From a424e96dd7c2c33426fe738d7079dc121daa196c Mon Sep 17 00:00:00 2001
From: Nexus Dev <nexus@local>
Date: Wed, 1 Apr 2026 21:39:50 +0000
Subject: [PATCH] feat(23-02): add ChatSpecCard and ChatHandoffIndicator
 components

- ChatSpecCard renders 4-field spec (What/Why/Constraints/Success) with edit mode
- ChatSpecCard action row: Send to PM, Edit, Save as Draft buttons
- ChatSpecCard edit mode with aria-labels, Escape key discard, tab order
- ChatHandoffIndicator separator-style with flanking hr and aria-label
---
 ui/src/components/ChatHandoffIndicator.tsx |  21 ++
 ui/src/components/ChatSpecCard.tsx         | 233 +++++++++++++++++++++
 2 files changed, 254 insertions(+)
 create mode 100644 ui/src/components/ChatHandoffIndicator.tsx
 create mode 100644 ui/src/components/ChatSpecCard.tsx

diff --git a/ui/src/components/ChatHandoffIndicator.tsx b/ui/src/components/ChatHandoffIndicator.tsx
new file mode 100644
index 00000000..ff6b4c8d
--- /dev/null
+++ b/ui/src/components/ChatHandoffIndicator.tsx
@@ -0,0 +1,21 @@
+import { cn } from "../lib/utils";
+
+interface ChatHandoffIndicatorProps {
+  content: string;
+}
+
+export function ChatHandoffIndicator({ content }: ChatHandoffIndicatorProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 py-2 text-[13px] text-muted-foreground",
+        "motion-safe:animate-in motion-safe:fade-in"
+      )}
+      aria-label="Agent handoff from Brainstormer to PM"
+    >
+      <hr className="flex-1 border-border" aria-hidden="true" />
+      <span className="whitespace-nowrap">{content}</span>
+      <hr className="flex-1 border-border" aria-hidden="true" />
+    </div>
+  );
+}
diff --git a/ui/src/components/ChatSpecCard.tsx b/ui/src/components/ChatSpecCard.tsx
new file mode 100644
index 00000000..0a329e1c
--- /dev/null
+++ b/ui/src/components/ChatSpecCard.tsx
@@ -0,0 +1,233 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "../lib/utils";
+import { chatApi } from "../api/chat";
+
+interface SpecContent {
+  what: string;
+  why: string;
+  constraints: string;
+  success: string;
+}
+
+interface ChatSpecCardProps {
+  content: string;
+  messageId?: string;
+  conversationId?: string;
+  onHandoff?: (spec: SpecContent) => void;
+}
+
+export function ChatSpecCard({ content, messageId, conversationId, onHandoff }: ChatSpecCardProps) {
+  let parsedSpec: SpecContent | null = null;
+  try {
+    parsedSpec = JSON.parse(content) as SpecContent;
+  } catch {
+    return (
+      <div className="text-destructive text-[13px]">Could not render spec.</div>
+    );
+  }
+
+  return <ChatSpecCardInner spec={parsedSpec} messageId={messageId} conversationId={conversationId} onHandoff={onHandoff} />;
+}
+
+function ChatSpecCardInner({
+  spec: initialSpec,
+  messageId,
+  conversationId,
+  onHandoff,
+}: {
+  spec: SpecContent;
+  messageId?: string;
+  conversationId?: string;
+  onHandoff?: (spec: SpecContent) => void;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isDraft, setIsDraft] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [spec, setSpec] = useState<SpecContent>(initialSpec);
+  const [editedSpec, setEditedSpec] = useState<SpecContent>(initialSpec);
+
+  const allFieldsEmpty =
+    !editedSpec.what.trim() &&
+    !editedSpec.why.trim() &&
+    !editedSpec.constraints.trim() &&
+    !editedSpec.success.trim();
+
+  function handleDiscard() {
+    setEditedSpec(spec);
+    setIsEditing(false);
+  }
+
+  async function handleSaveChanges() {
+    setSpec(editedSpec);
+    setIsEditing(false);
+    if (conversationId && messageId) {
+      await chatApi.editMessage(conversationId, messageId, JSON.stringify(editedSpec));
+    }
+  }
+
+  async function handleSendToPM() {
+    setIsSubmitting(true);
+    try {
+      onHandoff?.(spec);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <div
+        role="region"
+        aria-label="Specification"
+        className={cn(
+          "motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2",
+          "rounded-lg border border-border bg-card p-4 max-w-[480px]"
+        )}
+      >
+        <div className="space-y-4">
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">What</p>
+            <textarea
+              value={editedSpec.what}
+              onChange={(e) => setEditedSpec((s) => ({ ...s, what: e.target.value }))}
+              aria-label="What to build"
+              placeholder="What should be built?"
+              className="mt-1 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm resize-none min-h-[60px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              tabIndex={1}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") handleDiscard();
+              }}
+            />
+          </div>
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Why</p>
+            <textarea
+              value={editedSpec.why}
+              onChange={(e) => setEditedSpec((s) => ({ ...s, why: e.target.value }))}
+              aria-label="Why it matters"
+              placeholder="Why is this important?"
+              className="mt-1 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm resize-none min-h-[60px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              tabIndex={2}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") handleDiscard();
+              }}
+            />
+          </div>
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Constraints</p>
+            <textarea
+              value={editedSpec.constraints}
+              onChange={(e) => setEditedSpec((s) => ({ ...s, constraints: e.target.value }))}
+              aria-label="Constraints"
+              placeholder="Any constraints or requirements?"
+              className="mt-1 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm resize-none min-h-[60px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              tabIndex={3}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") handleDiscard();
+              }}
+            />
+          </div>
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Success</p>
+            <textarea
+              value={editedSpec.success}
+              onChange={(e) => setEditedSpec((s) => ({ ...s, success: e.target.value }))}
+              aria-label="Success criteria"
+              placeholder="How will success be measured?"
+              className="mt-1 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm resize-none min-h-[60px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              tabIndex={4}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") handleDiscard();
+              }}
+            />
+          </div>
+        </div>
+        <div className="flex gap-2 pt-4 border-t border-border mt-4">
+          <Button
+            variant="default"
+            size="sm"
+            disabled={allFieldsEmpty}
+            onClick={handleSaveChanges}
+            tabIndex={5}
+          >
+            Save changes
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDiscard}
+            tabIndex={6}
+          >
+            Discard
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="region"
+      aria-label="Specification"
+      aria-busy={isSubmitting ? "true" : undefined}
+      aria-disabled={isSubmitting ? "true" : undefined}
+      className={cn(
+        "motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2",
+        "rounded-lg border border-border bg-card p-4 max-w-[480px]"
+      )}
+    >
+      {isDraft && (
+        <p className="text-[11px] text-muted-foreground ml-2 mb-2">[Draft]</p>
+      )}
+      <div className="space-y-4">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">What</p>
+          <p className="text-[15px] font-normal text-foreground leading-relaxed">{spec.what}</p>
+        </div>
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Why</p>
+          <p className="text-[15px] font-normal text-foreground leading-relaxed">{spec.why}</p>
+        </div>
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Constraints</p>
+          <p className="text-[15px] font-normal text-foreground leading-relaxed">{spec.constraints}</p>
+        </div>
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Success</p>
+          <p className="text-[15px] font-normal text-foreground leading-relaxed">{spec.success}</p>
+        </div>
+      </div>
+      <div className="flex gap-2 pt-4 border-t border-border mt-4">
+        <Button
+          variant="default"
+          size="sm"
+          disabled={isSubmitting}
+          onClick={handleSendToPM}
+          aria-disabled={isSubmitting ? "true" : undefined}
+        >
+          Send to PM
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={isSubmitting}
+          onClick={() => {
+            setEditedSpec(spec);
+            setIsEditing(true);
+          }}
+        >
+          Edit
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={isSubmitting}
+          onClick={() => setIsDraft(true)}
+        >
+          Save as Draft
+        </Button>
+      </div>
+    </div>
+  );
+}