feat: implement Stories 3.4, 3.5, 3.6 — AI proposals, wizard, hover & palette

Story 3.4: AI semantic suggestions with accept/reject workflow
- ProposalBar overlay with visual diff
- Accept/reject flow with graph snapshot restore
- useProposalDiff hook for change summary
- System prompt scoping for selected elements

Story 3.5: New diagram wizard with AI type inference
- CreateDiagramDialog with AI type inference (Haiku)
- initialDescription prop for chat-first flow
- Auto-send on mount with hasSentInitial ref guard
- DB migration for diagram description column

Story 3.6: Hover affordances and command palette
- HoverAffordances toolbar (5 AI actions, debounced)
- CommandPalette (Cmd+K) with AI, nav, Go to Node
- prefillChat/fitViewRequested/focusNodeId actions
- Code review: getNodesBounds, onOpenRightPanel,
  timer cleanup, test count fix

374 tests passing (251 web + 123 AI).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/modules/copilot/components/CopilotPanel.tsx

@@ -17,11 +17,29 @@ import { MemoizedMarkdown } from "~/modules/common/markdown/memoized-markdown";
 import { Prose } from "~/modules/common/prose";
 import { useGraphStore } from "~/modules/diagram/stores/useGraphStore";
 import { flowToGraph } from "~/modules/diagram/lib/graph-converter";
-import { useGraphMutation } from "../hooks/useGraphMutation";
+import { useGraphMutation, persistGraphData } from "../hooks/useGraphMutation";
+import { useProposalDiff } from "../hooks/useProposalDiff";
 import { BadgeChip } from "./BadgeChip";
 
 import type { DiagramType } from "~/modules/diagram/types/graph";
 
+type ProposalStatus = "idle" | "pending" | "accepted" | "rejected";
+
+/** Shared accept handler — used by CopilotPanel, AssistantBubble, ProposalBar, DiagramCanvas */
+export function acceptCurrentProposal(diagramId: string) {
+  const store = useGraphStore.getState();
+  const patch = store.proposedPatch;
+  store.acceptProposal();
+  if (patch) {
+    persistGraphData(diagramId, patch);
+  }
+}
+
+/** Shared reject handler */
+export function rejectCurrentProposal() {
+  useGraphStore.getState().rejectProposal();
+}
+
 // Type helper for tool invocation parts from AI SDK
 interface ToolPart {
   type: string;
@@ -38,17 +56,40 @@ function isGenerateDiagramTool(part: { type: string }): part is ToolPart {
 interface CopilotPanelProps {
   diagramId: string;
   diagramType: DiagramType;
+  initialDescription?: string;
+  isSharedView?: boolean;
 }
 
-export function CopilotPanel({ diagramId, diagramType }: CopilotPanelProps) {
+export function CopilotPanel({ diagramId, diagramType, initialDescription, isSharedView }: CopilotPanelProps) {
   const chatId = useMemo(() => `copilot-${diagramId}`, [diagramId]);
   const [input, setInput] = useState("");
   const scrollRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const userScrolledRef = useRef(false);
   const appliedToolCallIds = useRef(new Set<string>());
+  const hasSentInitial = useRef(false);
 
-  const { applyGraphPatch } = useGraphMutation(diagramId, diagramType);
+  const { proposeGraphPatch } = useGraphMutation(diagramId, diagramType);
+  const proposalStatus = useGraphStore((s) => s.proposalStatus);
+  const lastProposalOutcome = useGraphStore((s) => s.lastProposalOutcome);
+  const { changeSummary } = useProposalDiff();
+
+  // Subscribe to prefillChat from hover affordances / command palette
+  const prefillChat = useGraphStore((s) => s.prefillChat);
+  useEffect(() => {
+    if (prefillChat) {
+      setInput(prefillChat.text);
+      // Position cursor at end of pre-filled text
+      requestAnimationFrame(() => {
+        const el = inputRef.current;
+        if (el) {
+          el.focus();
+          el.setSelectionRange(el.value.length, el.value.length);
+        }
+      });
+      useGraphStore.getState().clearPrefillChat();
+    }
+  }, [prefillChat]);
 
   // Subscribe to selected nodes for badge chips
   const selectedNodeIds = useGraphStore((s) => s.selectedNodeIds);
@@ -179,6 +220,23 @@ export function CopilotPanel({ diagramId, diagramType }: CopilotPanelProps) {
     }
   }, [initialMessages, messages.length, setMessages]);
 
+  // Auto-send initial description from wizard (chat-first onboarding)
+  useEffect(() => {
+    if (
+      initialDescription &&
+      !hasSentInitial.current &&
+      messages.length === 0 &&
+      !initialMessages?.length
+    ) {
+      hasSentInitial.current = true;
+      void sendMessage({ text: initialDescription, metadata: {} });
+      // Clean only the desc URL param without navigation
+      const url = new URL(window.location.href);
+      url.searchParams.delete("desc");
+      window.history.replaceState({}, "", url.pathname + url.search);
+    }
+  }, [initialDescription, messages.length, initialMessages, sendMessage]);
+
   // Detect and apply graph patches from tool invocations
   useEffect(() => {
     for (const message of messages) {
@@ -195,7 +253,7 @@ export function CopilotPanel({ diagramId, diagramType }: CopilotPanelProps) {
             | { success: false; errors: string[] };
 
           if (result.success) {
-            applyGraphPatch(result.data);
+            proposeGraphPatch(result.data);
           } else {
             toast.error("Diagram generation failed: invalid graph structure");
             console.error("[copilot] Graph validation errors:", result.errors);
@@ -203,7 +261,7 @@ export function CopilotPanel({ diagramId, diagramType }: CopilotPanelProps) {
         }
       }
     }
-  }, [messages, applyGraphPatch]);
+  }, [messages, proposeGraphPatch]);
 
   const isSubmitting = status === "submitted" || status === "streaming";
 
@@ -268,18 +326,43 @@ export function CopilotPanel({ diagramId, diagramType }: CopilotPanelProps) {
     userScrolledRef.current = false;
   }, [input, isSubmitting, sendMessage]);
 
+  const handleAccept = useCallback(() => {
+    acceptCurrentProposal(diagramId);
+  }, [diagramId]);
+
+  const handleReject = useCallback(() => {
+    rejectCurrentProposal();
+  }, []);
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      const currentProposalStatus = useGraphStore.getState().proposalStatus;
+
+      // Proposal pending + Enter + empty textarea → accept
+      if (e.key === "Enter" && !e.shiftKey && currentProposalStatus === "pending" && !input.trim()) {
+        e.preventDefault();
+        handleAccept();
+        return;
+      }
+      // Proposal pending + Escape → reject (don't clear badges)
+      if (e.key === "Escape" && currentProposalStatus === "pending") {
+        e.preventDefault();
+        handleReject();
+        return;
+      }
+      // Normal Enter → send message
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
         handleSend();
+        return;
       }
+      // Normal Escape → clear badges
       if (e.key === "Escape" && selectedNodeIds.length > 0) {
         e.preventDefault();
         useGraphStore.getState().setSelectedNodeIds([]);
       }
     },
-    [handleSend, selectedNodeIds.length],
+    [handleSend, handleAccept, handleReject, selectedNodeIds.length, input],
   );
 
   return (
@@ -288,7 +371,7 @@ export function CopilotPanel({ diagramId, diagramType }: CopilotPanelProps) {
       <ScrollArea ref={scrollRef} className="flex-1">
         <div className="flex flex-col gap-1 p-3">
           {messages.length === 0 && (
-            <EmptyState />
+            <EmptyState isSharedView={isSharedView} />
           )}
 
           {messages.map((message) => (
@@ -308,6 +391,10 @@ export function CopilotPanel({ diagramId, diagramType }: CopilotPanelProps) {
                     status === "streaming" &&
                     message.id === messages.at(-1)?.id
                   }
+                  diagramId={diagramId}
+                  proposalStatus={proposalStatus}
+                  lastProposalOutcome={lastProposalOutcome}
+                  changeSummary={changeSummary}
                 />
               )}
             </div>
@@ -414,7 +501,21 @@ export function CopilotPanel({ diagramId, diagramType }: CopilotPanelProps) {
   );
 }
 
-function EmptyState() {
+function EmptyState({ isSharedView }: { isSharedView?: boolean }) {
+  if (isSharedView) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <Icons.MessageSquare className="mb-3 size-8 text-muted-foreground/30" />
+        <p className="text-sm font-medium text-muted-foreground">
+          Join the conversation
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground/60">
+          This diagram was shared with you. Type below to start collaborating.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col items-center justify-center py-12 text-center">
       <Icons.Sparkles className="mb-3 size-8 text-muted-foreground/30" />
@@ -443,31 +544,109 @@ const UserBubble = memo<{ message: { id: string; parts: Array<{ type: string; te
 );
 UserBubble.displayName = "UserBubble";
 
+const SUGGESTION_PATTERN = /^(Note|Consider|Suggestion|Tip):/m;
+
+/** Wrap lines matching suggestion patterns with styled container */
+function renderWithSuggestions(text: string, messageId: string, index: number) {
+  if (!SUGGESTION_PATTERN.test(text)) {
+    return (
+      <MemoizedMarkdown
+        key={`${messageId}-${index}`}
+        content={text}
+        id={`copilot-${messageId}-${index}`}
+      />
+    );
+  }
+
+  const lines = text.split("\n");
+  const segments: Array<{ isSuggestion: boolean; content: string }> = [];
+  let currentSegment = { isSuggestion: false, content: "" };
+
+  for (const line of lines) {
+    const isSuggestionLine = /^(Note|Consider|Suggestion|Tip):/.test(line.trim());
+    if (isSuggestionLine !== currentSegment.isSuggestion && currentSegment.content) {
+      segments.push({ ...currentSegment });
+      currentSegment = { isSuggestion: isSuggestionLine, content: line };
+    } else {
+      currentSegment.content += (currentSegment.content ? "\n" : "") + line;
+    }
+  }
+  if (currentSegment.content) segments.push(currentSegment);
+
+  return segments.map((seg, si) =>
+    seg.isSuggestion ? (
+      <div
+        key={`${messageId}-${index}-sug-${si}`}
+        className="my-1.5 flex items-start gap-2 rounded-md border-l-2 border-[var(--ai-accent)] bg-muted/30 px-3 py-2"
+      >
+        <Icons.Lightbulb className="mt-0.5 size-3.5 shrink-0 text-[var(--ai-accent)]" />
+        <div className="min-w-0 flex-1">
+          <MemoizedMarkdown
+            content={seg.content}
+            id={`copilot-${messageId}-${index}-sug-${si}`}
+          />
+        </div>
+      </div>
+    ) : (
+      <MemoizedMarkdown
+        key={`${messageId}-${index}-txt-${si}`}
+        content={seg.content}
+        id={`copilot-${messageId}-${index}-txt-${si}`}
+      />
+    ),
+  );
+}
+
 const AssistantBubble = memo<{
   message: { id: string; parts: Array<{ type: string; text?: string; state?: string }> };
   isStreaming: boolean;
-}>(({ message, isStreaming }) => {
+  diagramId: string;
+  proposalStatus: ProposalStatus;
+  lastProposalOutcome: "accepted" | "rejected" | null;
+  changeSummary: string;
+}>(({ message, isStreaming, diagramId, proposalStatus, lastProposalOutcome, changeSummary }) => {
   const hasToolResult = message.parts.some(
     (p) => isGenerateDiagramTool(p) && p.state === "output-available",
   );
 
+  const handleAccept = useCallback(() => {
+    acceptCurrentProposal(diagramId);
+  }, [diagramId]);
+
+  const handleReject = useCallback(() => {
+    rejectCurrentProposal();
+  }, []);
+
   return (
     <div className="max-w-[95%]">
       <Prose className="text-sm">
         {message.parts.map((part, i) =>
-          part.type === "text" && part.text ? (
-            <MemoizedMarkdown
-              key={`${message.id}-${i}`}
-              content={part.text}
-              id={`copilot-${message.id}-${i}`}
-            />
-          ) : null,
+          part.type === "text" && part.text
+            ? renderWithSuggestions(part.text, message.id, i)
+            : null,
         )}
         {isStreaming && message.parts.length === 0 && (
           <span className="inline-block size-2 animate-pulse rounded-full bg-muted-foreground/50" />
         )}
       </Prose>
-      {hasToolResult && (
+      {hasToolResult && proposalStatus === "pending" && (
+        <div className="mt-2 flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">{changeSummary}</span>
+          <Button size="sm" onClick={handleAccept}>
+            <Icons.Check className="mr-1 size-3" /> Accept
+          </Button>
+          <Button size="sm" variant="ghost" onClick={handleReject}>
+            <Icons.X className="mr-1 size-3" /> Reject
+          </Button>
+        </div>
+      )}
+      {hasToolResult && proposalStatus !== "pending" && lastProposalOutcome === "rejected" && (
+        <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Icons.X className="size-3 text-red-500" />
+          Changes discarded
+        </div>
+      )}
+      {hasToolResult && proposalStatus !== "pending" && lastProposalOutcome !== "rejected" && (
         <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
           <Icons.Check className="size-3 text-green-500" />
           Diagram updated