Frontend Design

Stack

• Astro 7 -- static site generator, renders index.astro as a thin shell
• Svelte 5 -- reactive UI framework, loaded via client:only="svelte"
• Tailwind v4 -- utility-first CSS (via Vite plugin, @source directives in global.css)
• Capsem-owned semantic CSS -- src/styles/capsem-theme.css owns the complete token contract (bg-primary, text-foreground, and peers). Production code must never install, import, scan, or execute Preline or another component library. Historical component references may inspire class composition only; copy the result into Capsem-owned code.

Loading into capsem-app (Tauri)

tauri::generate_context!() bakes web/app/dist/** into the capsem-app binary at cargo compile time (via the custom-protocol feature). This means:

• pnpm run build alone has no effect on a running ./cache/target/**/capsem-app -- the bundle is embedded in the binary.
• After any web/app/ change you intend to test in the desktop app, run just build (chains frontend build + cargo build -p capsem-app).
• just dev ui (cargo tauri dev) bypasses this by loading http://localhost:5173 -- good for iteration, but the production code path goes through the embedded bundle.
• The Toolbar shows build YYYY-MM-DD HH:MM:SS as a quick visual sanity check -- if it's stale after you rebuilt, you forgot cargo build -p capsem-app.

Also: iframe src for bundled pages must end in index.html (e.g. /vm/terminal/index.html). Tauri's custom protocol on macOS does not auto-append index.html for trailing-slash paths the way Vite/Astro dev server does. A /vm/terminal/ src loads fine in Chrome dev mode and silently 404s in the Tauri app.