refactor(canvas): decouple the canvas from the chat engine

The canvas components will be reused by the MCP server's browser shell, which has no chat and no Next.js. They now read everything they need from small contexts and the canvas store instead of the chat engine: - components/canvas/versions-context.tsx: VersionsProvider and useVersionsContext give the version cards, the strip and the compare dialog a VersionsSource (versions, onCanvasId, undoneId, isBusy, canUndo, canRedo, restore, undo, redo). The chat fills it from the versions store and the engine in components/chat/chat-versions.tsx. - stores/canvas-store.ts: isBusy and busyReason; the chat engine sets them while a turn runs, SelectionAsk and the version UI read them. - components/canvas/version-card.tsx: the visual version card and the thumbnail, out of tool-activity.tsx; the chat's card composes it and adds its "Show XML" link and code panel. - compare-dialog.tsx and version-strip.tsx move to components/canvas; the strip takes the minimum number of versions to show as a prop, the chat panel computes it from the cards it has. - components/canvas/locale-context.tsx: LocaleProvider and useLocale, fed by the [lang] layout; CanvasStage no longer uses next/navigation. The overlay (SelectionAsk) is a slot and the wait for the saved language is a prop, so the shell can leave both out. - lib/version-text.ts: describeChanges is now describeChangeSummary, so it can be imported next to the MCP core's describeChanges.
2026-10-12 04:29:51 +08:00 · 2026-10-11 20:56:07 +09:00
parent 07f3e3c2a3
commit 899b6a3b5b
18 changed files with 527 additions and 297 deletions
@@ -726,6 +726,11 @@ export function ChatEngineProvider({
    // isBusy of the latest render, for code that runs after an await
    const busyRef = useRef(isBusy)
    busyRef.current = isBusy
+    // Canvas components (version cards, the compare dialog, "ask AI") read
+    // the busy flag from the canvas store
+    useEffect(() => {
+        useCanvasStore.getState().setBusy(isBusy ? "chat" : null)
+    }, [isBusy])
    // The page goes (another language mounts a new one): the answer stops,
    // so it cannot reach the next page's canvas
    const stopRef = useRef(stop)
@@ -7,6 +7,7 @@ import {
    Settings,
 } from "lucide-react"
 import { useRef } from "react"
+import { VersionStrip } from "@/components/canvas/version-strip"
 import { DevXmlSimulator } from "@/components/dev-xml-simulator"
 import { BrandMark } from "@/components/workspace/brand-mark"
 import { IconButton } from "@/components/workspace/icon-button"
@@ -21,11 +22,11 @@ import {
    useSettingsStore,
 } from "@/stores/settings-store"
 import { useUiStore } from "@/stores/ui-store"
+import { useVersionsStore } from "@/stores/versions-store"
 import { useChatEngine } from "./chat-engine"
 import { Composer } from "./composer"
 import { MessageList } from "./message-list"
 import { SessionMenu, useSessionTitle } from "./session-menu"
-import { VersionStrip } from "./version-strip"

 const DEBUG = process.env.NODE_ENV === "development"

@@ -97,6 +98,25 @@ export function ChatPanel({
    const openSettings = useUiStore((s) => s.openSettings)
    const setPanelOpen = useUiStore((s) => s.setPanelOpen)

+    // Versions with no card in the chat: saved by older app versions, from
+    // a turn that was retried, or drawn by a call that then failed its
+    // screenshot check (a call still running gets its card when done). The
+    // strip shows them even when there is only one.
+    const versions = useVersionsStore((s) => s.versions)
+    const hasCardless = versions.some(
+        (v) =>
+            !v.toolCallId ||
+            !engine.messages.some((m) =>
+                m.parts?.some((p) => {
+                    const part = p as { toolCallId?: string; state?: string }
+                    return (
+                        part.toolCallId === v.toolCallId &&
+                        part.state !== "output-error"
+                    )
+                }),
+            ),
+    )
+
    return (
        <aside
            className={cn(
@@ -160,7 +180,7 @@ export function ChatPanel({
                </div>
            </header>

-            <VersionStrip />
+            <VersionStrip minVersions={hasCardless ? 1 : 2} />

            <div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
                {engine.messages.length > 0 ? <MessageList /> : <EmptyThread />}
@@ -0,0 +1,46 @@
+"use client"
+
+import {
+    VersionsProvider,
+    type VersionsSource,
+} from "@/components/canvas/versions-context"
+import { useCanvasStore } from "@/stores/canvas-store"
+import { useVersionsStore } from "@/stores/versions-store"
+import { useChatEngine } from "./chat-engine"
+
+/**
+ * The chat's versions for the canvas components (version cards, the strip,
+ * the compare dialog): the version store's list and flags, and the chat
+ * engine's restore and undo
+ */
+export function ChatVersionsProvider({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const { restoreVersion, undoVersion } = useChatEngine()
+    const versions = useVersionsStore((s) => s.versions)
+    const onCanvasId = useVersionsStore((s) => s.onCanvasVersionId)
+    const undoneId = useVersionsStore((s) => s.undoneVersionId)
+    const isBusy = useCanvasStore((s) => s.isBusy)
+
+    // Only the latest version can be undone, and only while it is (or was)
+    // on the canvas: after an older version was restored, the latest one
+    // is restored too
+    const latest = versions.at(-1)
+    const undoable = !!latest && latest.beforeXml !== undefined
+    const value: VersionsSource = {
+        versions,
+        onCanvasId,
+        undoneId,
+        isBusy,
+        canUndo: undoable && latest.id === onCanvasId,
+        canRedo: undoable && latest.id === undoneId,
+        restore: restoreVersion,
+        // The engine's undo toggles: it redoes a change that is undone
+        undo: () => latest && undoVersion(latest.id),
+        redo: () => latest && undoVersion(latest.id),
+    }
+
+    return <VersionsProvider value={value}>{children}</VersionsProvider>
+}
@@ -1,160 +0,0 @@
-import { ChevronLeft, ChevronRight, RotateCcw } from "lucide-react"
-import { useEffect, useMemo, useState } from "react"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
-import { useDiagram } from "@/contexts/diagram-context"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { diffDiagrams, isSameDocument } from "@/lib/diagram-diff"
-import { formatMessage } from "@/lib/i18n/utils"
-import { describeChanges } from "@/lib/version-text"
-import { useUiStore } from "@/stores/ui-store"
-import { useVersionsStore } from "@/stores/versions-store"
-import { useChatEngine } from "./chat-engine"
-import { VersionThumb } from "./tool-activity"
-
-function Sheet({
-    label,
-    svg,
-}: {
-    label: string
-    svg: string | null | undefined
-}) {
-    return (
-        <figure className="flex min-w-0 flex-1 flex-col gap-2">
-            <figcaption className="text-xs font-medium text-muted-foreground">
-                {label}
-            </figcaption>
-            <div className="sheet-light flex aspect-[16/10] items-center justify-center overflow-hidden rounded-xl border border-border bg-white p-2">
-                <VersionThumb svg={svg} className="max-h-full max-w-full" />
-            </div>
-        </figure>
-    )
-}
-
-/** A saved version next to the current canvas, with restore */
-export function CompareDialog() {
-    const dict = useDictionary()
-    const t = dict.versions
-    const engine = useChatEngine()
-    const { getVersionSvg, chartXML } = useDiagram()
-    const versionId = useUiStore((s) => s.compareVersionId)
-    const openCompare = useUiStore((s) => s.openCompare)
-    const closeCompare = useUiStore((s) => s.closeCompare)
-    const versions = useVersionsStore((s) => s.versions)
-    const [currentSvg, setCurrentSvg] = useState<string | null>(null)
-
-    const index = versions.findIndex((v) => v.id === versionId)
-    const version = index >= 0 ? versions[index] : null
-
-    // Whether the canvas is this version, on every page
-    const same = useMemo(
-        () => !version || isSameDocument(version.xml, chartXML),
-        [version, chartXML],
-    )
-    // What the canvas has changed since this version on the page it was
-    // made on (null: nothing there)
-    const changes = useMemo(() => {
-        if (!version || same) return null
-        const { summary } = diffDiagrams(version.xml, chartXML, version.pageId)
-        return Object.values(summary).some((n) => n > 0) ? summary : null
-    }, [version, chartXML, same])
-
-    // The version went away (dropped as the oldest, another chat): the
-    // dialog closes, and nothing waits for its Escape
-    useEffect(() => {
-        if (versionId && !version) closeCompare()
-    }, [versionId, version, closeCompare])
-
-    // Picture of the canvas as it is now, taken again once an answer that
-    // was running is done ("" when none could be made)
-    useEffect(() => {
-        if (!versionId) return
-        let cancelled = false
-        setCurrentSvg(null)
-        getVersionSvg().then((svg) => {
-            if (!cancelled) setCurrentSvg(svg ?? "")
-        })
-        return () => {
-            cancelled = true
-        }
-    }, [versionId, engine.isBusy])
-
-    return (
-        <Dialog
-            open={!!version}
-            onOpenChange={(open) => !open && closeCompare()}
-        >
-            <DialogContent className="gap-5 sm:max-w-4xl">
-                <DialogHeader>
-                    <DialogTitle>{t.compareTitle}</DialogTitle>
-                    <DialogDescription>
-                        {!version
-                            ? ""
-                            : same
-                              ? t.isOnCanvas
-                              : changes
-                                ? `${formatMessage(t.compareSince, { n: version.number })} ${describeChanges(changes, t)}`
-                                : formatMessage(t.differsElsewhere, {
-                                      n: version.number,
-                                  })}
-                    </DialogDescription>
-                </DialogHeader>
-                {version && (
-                    <div className="flex flex-col gap-4 sm:flex-row">
-                        <Sheet
-                            label={formatMessage(t.versionLabel, {
-                                n: version.number,
-                            })}
-                            svg={version.svg}
-                        />
-                        <Sheet label={t.currentCanvas} svg={currentSvg} />
-                    </div>
-                )}
-                <div className="flex items-center gap-2">
-                    <button
-                        type="button"
-                        disabled={index <= 0}
-                        onClick={() => openCompare(versions[index - 1].id)}
-                        className="inline-flex size-8 items-center justify-center rounded-lg border border-border text-muted-foreground hover:text-foreground disabled:opacity-30"
-                        aria-label={t.previous}
-                    >
-                        <ChevronLeft className="size-4" />
-                    </button>
-                    <button
-                        type="button"
-                        disabled={index < 0 || index >= versions.length - 1}
-                        onClick={() => openCompare(versions[index + 1].id)}
-                        className="inline-flex size-8 items-center justify-center rounded-lg border border-border text-muted-foreground hover:text-foreground disabled:opacity-30"
-                        aria-label={t.next}
-                    >
-                        <ChevronRight className="size-4" />
-                    </button>
-                    <span className="text-xs text-muted-foreground tabular-nums">
-                        {index + 1} / {versions.length}
-                    </span>
-                    <button
-                        type="button"
-                        disabled={!version || same || engine.isBusy}
-                        onClick={() => {
-                            if (!version) return
-                            engine.restoreVersion(version.id)
-                            closeCompare()
-                        }}
-                        className="ml-auto inline-flex h-9 items-center gap-1.5 rounded-lg bg-primary px-3.5 text-[13px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
-                        data-testid="compare-restore"
-                    >
-                        <RotateCcw className="size-4" />
-                        {formatMessage(t.restoreVersion, {
-                            n: version?.number ?? 0,
-                        })}
-                    </button>
-                </div>
-            </DialogContent>
-        </Dialog>
-    )
-}
@@ -5,19 +5,14 @@ import {
    Copy,
    Library,
    PenTool,
-    Redo2,
-    RotateCcw,
-    Undo2,
 } from "lucide-react"
 import { useState } from "react"
 import { Shimmer } from "@/components/ai-elements/shimmer"
+import { VersionCard as VersionCardView } from "@/components/canvas/version-card"
 import { CodeBlock } from "@/components/code-block"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { useCopy } from "@/lib/clipboard"
-import { formatMessage } from "@/lib/i18n/utils"
 import { cn, isMxCellXmlComplete } from "@/lib/utils"
-import { describeChanges, describeTotals } from "@/lib/version-text"
-import { useUiStore } from "@/stores/ui-store"
 import { type DiagramVersion, useVersionsStore } from "@/stores/versions-store"
 import { useChatEngine } from "./chat-engine"
 import type { DiagramOperation, ToolPartLike } from "./types"
@@ -83,45 +78,9 @@ function toolText(part: ToolPartLike): string {
    return JSON.stringify(input, null, 2)
 }

-/** Picture of a version (SVG data URL), or what stands in for it */
-export function VersionThumb({
-    svg,
-    dimmed,
-    className,
-}: {
-    /** undefined or null: still being made; "": none could be made */
-    svg: string | null | undefined
-    dimmed?: boolean
-    className?: string
-}) {
-    const t = useDictionary().versions
-    if (svg) {
-        return (
-            // biome-ignore lint/performance/noImgElement: data URL thumbnail
-            <img
-                src={svg}
-                alt=""
-                className={cn(
-                    "object-contain transition-opacity",
-                    dimmed && "opacity-40",
-                    className,
-                )}
-            />
-        )
-    }
-    if (svg === "") {
-        return <span className="text-xs text-faint">{t.noPreview}</span>
-    }
-    return (
-        <Shimmer as="span" className="text-xs">
-            {t.rendering}
-        </Shimmer>
-    )
-}
-
 /**
- * Card for one diagram version produced by a tool call. The latest shows
- * its picture; older ones fold into one row (the picture opens Compare).
+ * Card for one diagram version produced by a tool call: the shared card
+ * with a link to what the AI wrote (shown in a panel under the card)
 */
 function VersionCard({
    part,
@@ -134,175 +93,49 @@ function VersionCard({
 }) {
    const dict = useDictionary()
    const t = dict.versions
-    const engine = useChatEngine()
-    const undoneVersionId = useVersionsStore((s) => s.undoneVersionId)
-    const onCanvasVersionId = useVersionsStore((s) => s.onCanvasVersionId)
-    const openCompare = useUiStore((s) => s.openCompare)
    const [showCode, setShowCode] = useState(false)
    const { copied, copy } = useCopy()
-
-    const isUndone = undoneVersionId === version.id
-    const isOnCanvas = onCanvasVersionId === version.id
    const isEdit = part.type === "tool-edit_diagram"
-    // Undo/redo belongs to the newest change while it is (or was) on the
-    // canvas; after an older version was restored, this one is restored too
-    const canUndo =
-        isLatest && version.beforeXml !== undefined && (isOnCanvas || isUndone)
-    const title = isUndone ? t.undone : isEdit ? t.edited : t.created
-    const summary = version.fromScratch
-        ? describeTotals(version.summary, t)
-        : describeChanges(version.summary, t)
-    const badge = (
-        <span
-            className={cn(
-                "shrink-0 rounded-md px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
-                isOnCanvas
-                    ? "bg-marker-soft text-marker-ink"
-                    : "bg-muted text-muted-foreground",
-            )}
-        >
-            v{version.number}
-        </span>
-    )
-    const actionClass =
-        "inline-flex h-7 shrink-0 items-center gap-1 rounded-lg px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40"
-    const restoreButton = (
-        <button
-            type="button"
-            disabled={engine.isBusy || isOnCanvas}
-            onClick={() => engine.restoreVersion(version.id)}
-            className={actionClass}
-            data-testid="version-restore"
-        >
-            <RotateCcw className="size-3.5" />
-            {formatMessage(t.restoreVersion, { n: version.number })}
-        </button>
-    )
-
-    // What the AI wrote: a text link in the summary line, so the card's
-    // only button is the action (undo or restore)
-    const summaryLine = (
-        <div className="text-xs text-muted-foreground">
-            {summary}
-            {/* The link wraps as one unit with its separator */}
-            <span className="whitespace-nowrap">
-                <span aria-hidden> · </span>
-                <button
-                    type="button"
-                    onClick={() => setShowCode((v) => !v)}
-                    className="underline decoration-foreground/30 underline-offset-2 hover:text-foreground hover:decoration-foreground"
-                >
-                    {showCode ? t.hideCode : t.showCode}
-                </button>
-            </span>
-        </div>
-    )
-    const codePanel = showCode && (
-        <div className="relative border-t border-border bg-surface-1 px-3 py-2.5">
-            <button
-                type="button"
-                onClick={() => copy(toolText(part))}
-                className="absolute top-2 right-2 z-10 inline-flex size-7 items-center justify-center rounded-lg bg-card text-muted-foreground shadow-float hover:text-foreground"
-                aria-label={dict.chat.copyResponse}
-            >
-                {copied ? (
-                    <Check className="size-3.5" />
-                ) : (
-                    <Copy className="size-3.5" />
-                )}
-            </button>
-            <ToolInputDetails part={part} />
-        </div>
-    )
-
-    if (!isLatest) {
-        return (
-            <div
-                className="overflow-hidden rounded-xl border border-border bg-card"
-                data-testid="version-card"
-                data-tool-state={part.state}
-            >
-                <div className="flex items-center gap-2.5 p-1.5 pr-2">
-                    <button
-                        type="button"
-                        onClick={() => openCompare(version.id)}
-                        className="sheet-light flex h-9 w-14 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-white hover:border-foreground/30"
-                        aria-label={t.compare}
-                        title={t.compare}
-                    >
-                        <VersionThumb
-                            svg={version.svg}
-                            className="max-h-8 max-w-[52px]"
-                        />
-                    </button>
-                    {badge}
-                    <div className="min-w-0 flex-1">
-                        <div className="truncate text-[13px] text-foreground">
-                            {title}
-                        </div>
-                        {summaryLine}
-                    </div>
-                    {restoreButton}
-                </div>
-                {codePanel}
-            </div>
-        )
-    }

    return (
-        <div
-            className={cn(
-                "overflow-hidden rounded-xl border border-border bg-card",
-                isOnCanvas && "border-foreground/15",
-            )}
-            data-testid="version-card"
+        <VersionCardView
+            version={version}
+            isLatest={isLatest}
+            label={isEdit ? t.edited : t.created}
            data-tool-state={part.state}
-        >
-            <button
-                type="button"
-                onClick={() => openCompare(version.id)}
-                className="group/thumb sheet-light relative flex h-24 w-full items-center justify-center border-b border-border bg-white"
-                aria-label={t.compare}
-            >
-                <VersionThumb
-                    svg={version.svg}
-                    dimmed={isUndone}
-                    className="max-h-20 max-w-[88%]"
-                />
-                <span className="absolute right-2 bottom-2 rounded-md bg-black/60 px-1.5 py-0.5 text-[11px] text-white opacity-0 transition-opacity group-hover/thumb:opacity-100">
-                    {t.compare}
-                </span>
-            </button>
-            {/* Title row with the action; the summary runs under both */}
-            <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2.5 px-3 py-2.5">
-                {badge}
-                <div className="truncate text-[13px] font-medium text-foreground">
-                    {title}
-                </div>
-                {canUndo ? (
+            // A text link, so the card's only button is the action (undo
+            // or restore); it wraps as one unit with its separator
+            afterSummary={
+                <span className="whitespace-nowrap">
+                    <span aria-hidden> · </span>
                    <button
                        type="button"
-                        disabled={engine.isBusy}
-                        onClick={() => engine.undoVersion(version.id)}
-                        className={actionClass}
-                        data-testid="version-undo"
+                        onClick={() => setShowCode((v) => !v)}
+                        className="underline decoration-foreground/30 underline-offset-2 hover:text-foreground hover:decoration-foreground"
                    >
-                        {isUndone ? (
-                            <Redo2 className="size-3.5" />
-                        ) : (
-                            <Undo2 className="size-3.5" />
-                        )}
-                        {isUndone ? t.redo : t.undo}
+                        {showCode ? t.hideCode : t.showCode}
                    </button>
-                ) : (
-                    restoreButton
-                )}
-                <div className="col-span-2 col-start-2 mt-0.5">
-                    {summaryLine}
+                </span>
+            }
+        >
+            {showCode && (
+                <div className="relative border-t border-border bg-surface-1 px-3 py-2.5">
+                    <button
+                        type="button"
+                        onClick={() => copy(toolText(part))}
+                        className="absolute top-2 right-2 z-10 inline-flex size-7 items-center justify-center rounded-lg bg-card text-muted-foreground shadow-float hover:text-foreground"
+                        aria-label={dict.chat.copyResponse}
+                    >
+                        {copied ? (
+                            <Check className="size-3.5" />
+                        ) : (
+                            <Copy className="size-3.5" />
+                        )}
+                    </button>
+                    <ToolInputDetails part={part} />
                </div>
-            </div>
-            {codePanel}
-        </div>
+            )}
+        </VersionCardView>
    )
 }

@@ -1,91 +0,0 @@
-import { useEffect, useRef } from "react"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { cn } from "@/lib/utils"
-import { useUiStore } from "@/stores/ui-store"
-import { useVersionsStore } from "@/stores/versions-store"
-import { useChatEngine } from "./chat-engine"
-
-/** Row of version thumbnails under the panel header; click to compare */
-export function VersionStrip() {
-    const dict = useDictionary()
-    const versions = useVersionsStore((s) => s.versions)
-    const onCanvasVersionId = useVersionsStore((s) => s.onCanvasVersionId)
-    const openCompare = useUiStore((s) => s.openCompare)
-    const engine = useChatEngine()
-    const scrollRef = useRef<HTMLDivElement>(null)
-
-    // Keep the newest version in view
-    useEffect(() => {
-        const el = scrollRef.current
-        if (el) el.scrollTo({ left: el.scrollWidth, behavior: "smooth" })
-    }, [versions.length])
-
-    // Versions with no card in the chat: saved by older app versions, from
-    // a turn that was retried, or drawn by a call that then failed its
-    // screenshot check (a call still running gets its card when done)
-    const hasCardless = versions.some(
-        (v) =>
-            !v.toolCallId ||
-            !engine.messages.some((m) =>
-                m.parts?.some((p) => {
-                    const part = p as { toolCallId?: string; state?: string }
-                    return (
-                        part.toolCallId === v.toolCallId &&
-                        part.state !== "output-error"
-                    )
-                }),
-            ),
-    )
-    // One version with a card: the strip adds nothing to it
-    if (versions.length < 2 && !hasCardless) return null
-
-    return (
-        <div className="flex items-center gap-2 border-b border-border px-3.5 pt-1 pb-3">
-            <span className="shrink-0 text-xs text-muted-foreground">
-                {dict.versions.strip}
-            </span>
-            <div
-                ref={scrollRef}
-                className="flex min-w-0 flex-1 gap-1.5 overflow-x-auto p-1 scrollbar-thin"
-            >
-                {versions.map((version) => {
-                    const isCurrent = version.id === onCanvasVersionId
-                    return (
-                        <button
-                            key={version.id}
-                            type="button"
-                            onClick={() => openCompare(version.id)}
-                            title={`v${version.number}${version.id === onCanvasVersionId ? ` · ${dict.versions.currentCanvas}` : ""}`}
-                            className={cn(
-                                "sheet-light relative flex h-12 w-[72px] shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-white transition-colors hover:border-foreground/30",
-                                // An outline with a gap reads on the white
-                                // picture in both themes
-                                isCurrent &&
-                                    "outline-2 outline-offset-2 outline-foreground",
-                            )}
-                            data-testid="version-thumb"
-                        >
-                            {version.svg && (
-                                // biome-ignore lint/performance/noImgElement: data URL thumbnail
-                                <img
-                                    src={version.svg}
-                                    alt=""
-                                    className="max-h-9 max-w-[62px] object-contain"
-                                />
-                            )}
-                            <span
-                                className={cn(
-                                    "absolute bottom-0.5 left-1 text-[10px] font-medium tabular-nums text-neutral-500",
-                                    isCurrent &&
-                                        "font-semibold text-neutral-900",
-                                )}
-                            >
-                                v{version.number}
-                            </span>
-                        </button>
-                    )
-                })}
-            </div>
-        </div>
-    )
-}