feat: build the chat + preview + approve interface

- web: two-pane app chrome (chat panel + browser-framed preview) - ChatPanel, Preview, ApproveBar components + useChat (mock agent for now) - Fluent/Figma design system (Inter, dark chrome, elevation, motion) - 107 unit tests + Playwright e2e green; web typechecks + builds
2026-08-17 17:10:25 +01:00
parent b61ff21710
commit 69287ebec0
10 changed files with 739 additions and 24 deletions
@@ -0,0 +1,40 @@
+import type { ChatStatus } from '../hooks/useChat.ts';
+
+type PreviewProps = {
+  heading: string;
+  status: ChatStatus;
+  applied: boolean;
+};
+
+export function Preview({ heading, status, applied }: PreviewProps) {
+  return (
+    <main className="preview">
+      <div className="browser">
+        <div className="browser-bar">
+          <span className="dot dot-red" />
+          <span className="dot dot-yellow" />
+          <span className="dot dot-green" />
+          <span className="browser-url">preview.wursor.dev</span>
+          {applied && <span className="preview-badge">Applied to your site ✓</span>}
+        </div>
+        <div className="browser-body">
+          {status === 'working' ? (
+            <div className="preview-working">Applying your change…</div>
+          ) : (
+            <div className="mock-site">
+              <nav className="mock-nav">
+                <span className="mock-brand">Your Site</span>
+                <span>About</span>
+                <span>Contact</span>
+              </nav>
+              <div className="mock-hero">
+                <h1 className="wursor-preview-frame">{heading}</h1>
+                <p>This is a live preview of your sandbox — the real site stays untouched until you approve.</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}