Search previous Claude Code conversations for facts, patterns, decisions, and context using semantic or text search

Web Client Specification

1. Technology Stack

• Build Tools: yarn, rspack
• Languages & Frameworks: TypeScript, React
• Code Quality: oxlint, prettier
• Styling: tailwind

All frontend code shares the same Rspack configuration in web/rspack.config.js.

2. Embedded WebView

• Entry Point: create WebView bundles at web/src/embedded/{name}.tsx.
• Native Bridge: define Swift interop types in web/src/embedded/{name}.d.tsx when applicable.
• Build Output: generated assets are consumed by the macOS project at macos/Resources/WebAssets/{name}.html.

Development

yarn dev

Running the dev server rebuilds embedded assets on file changes. Restart the macOS host app if the bundled WebView does not pick up the new build.

Swift ⇄ JavaScript Bridge

Swift → JavaScript

let script =
  """
  window.jsb.{name}.updateMessage(\"\(messagesArrayJson)\");
  """
webView.evaluateJavaScript(script) { result, error in
  if let error = error {
    print("❌ JavaScript execution error: \(error.localizedDescription)")
  }
}

JavaScript → Swift

window.webkit.messageHandlers.{name}.postMessage({
  content: message,
});

3. Standalone Website

Certain routes (e.g., /signin, /reset-password) are hosted as standalone web pages served by the backend.

• Entry Point: web/src/website/index.tsx
• Build Output: bundles are emitted to web/dist/website/index.html
• Development:

yarn rspack serve --configName website --port 8080

This runs a local dev server with hot reloading at http://localhost:8080.

4. Admin Console

The admin bundle is defined at web/src/admin/index.tsx and emitted to web/dist/admin/admin.html. Run it with:

yarn rspack serve --configName admin --port 8081

Admin-specific requirements and workflows are documented in web/src/admin/spec.md.