Persist AI admissions and reconcile canvas runs across navigation

src/components/canvas/headless-ai-panel.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ArrowUp, Sparkles, X } from "lucide-react";
+import type { ElementRecord, Json, Result } from "@/lib/canvas-core/types";
+import { runContainsTarget } from "@/lib/canvas-runtime/runs";
+import type { RunModel } from "@/lib/canvas-runtime/runs";
+import type { ProjectEngine } from "@/lib/canvas-runtime/workspace";
+import { errorText } from "@/lib/api";
+import { managedImageSource } from "@/lib/canvas-v2";
+import styles from "./canvas.module.css";
+
+const object = (value: Json | undefined) => value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+export function HeadlessAIPanel({ engine, element, close }: { engine: ProjectEngine; element: ElementRecord; close(): void }) {
+  const saved = object(element.data.ai), root = engine.getSnapshot();
+  const [models, setModels] = useState<readonly RunModel[]>([]), [loading, setLoading] = useState(true), [error, setError] = useState('');
+  const [model, setModel] = useState(typeof saved.modelId === 'string' ? saved.modelId : '');
+  const [prompt, setPrompt] = useState(typeof saved.prompt === 'string' ? saved.prompt : '');
+  const [propagate, setPropagate] = useState(saved.propagate === true);
+  const image = ['image','plain-image'].includes(element.componentId);
+  const relevant = [...root.runtime.runs.values()].filter(run => runContainsTarget(run,element));
+  const run = relevant.at(-1);
+  const pending = [...root.runtime.ledger.operations.values()].filter(record => record.intent.operationType === 'run.start' && record.intent.run.target.id === element.id && record.intent.run.target.incarnation === element.incarnation && record.phase !== 'resolved');
+  const busy = pending.length > 0 || !!run && (run.hasMore || !!run.pendingPage || ['queued','running'].includes(run.status));
+  const outputEvent = run?.outputEvents.filter(event => event.node_id === element.id).at(-1), output = object(outputEvent?.output);
+  useEffect(() => {
+    const controller = new AbortController();setLoading(true);setError('');
+    engine.models(element.ownerCanvasId,controller.signal).then(catalog => {
+      if(controller.signal.aborted)return;
+      const compatible = catalog.models.filter(model => model.output_modalities.includes(image ? 'image' : 'text'));
+      setModels(compatible);setModel(current => compatible.some(model => model.id === current) ? current : compatible.find(model => model.available)?.id ?? '');
+      if(catalog.unavailableReason)setError(errorText(new Error(catalog.unavailableReason)));
+    }).catch(error => { if(!controller.signal.aborted)setError(errorText(error)); }).finally(() => { if(!controller.signal.aborted)setLoading(false); });
+    return () => controller.abort();
+  },[engine,element.ownerCanvasId,image]);
+  function check(result: Result) { if(result.status === 'rejected') { setError(errorText(new Error(result.code)));return false; }return true; }
+  function save() {
+    if(!model || busy)return true;
+    return check(engine.editor.dispatch({type:'element.data',target:{id:element.id,incarnation:element.incarnation},patch:{ai:{enabled:true,modelId:model,prompt,propagate,parameters:{}}}},{label:'Configure generation'}));
+  }
+  const message = pending.length ? pending.some(record => record.phase === 'blocked') ? '生成受理需要处理' : '正在等待同步并受理生成…' : run?.blocked ? '生成结果已保留，当前编辑需要协调' : run?.error ? '任务跟踪需要处理，可重试' : run?.hasMore ? '正在接收生成结果…' : run ? ({queued:'已受理，等待生成',running:'正在生成…',succeeded:'已更新当前元素',failed:'生成未完成，原内容已保留',conflict:'内容已改变，生成结果已保留',cancelled:'已取消生成',partially_succeeded:'部分步骤已完成'}[run.status]) : '结果将显示在当前元素';
+  return <section className={`${styles.aiPanel} nodrag nopan nowheel`} aria-label="元素 AI 工具" style={{position:'absolute',right:24,bottom:90,zIndex:110,maxWidth:'calc(100% - 48px)',maxHeight:'70%',overflow:'auto'}} onPointerDown={event=>event.stopPropagation()} onKeyDown={event=>event.stopPropagation()}>
+    <header><Sparkles size={14}/><strong>{image ? '图像创作' : '文本创作'}</strong><span>{element.data.title as string}</span><button aria-label="关闭 AI 工具" onClick={close}><X size={14}/></button></header>
+    <textarea aria-label="AI 指令" placeholder="希望如何处理当前内容？" maxLength={16000} disabled={busy} value={prompt} onChange={event=>setPrompt(event.target.value)} onBlur={save}/>
+    <footer><select aria-label="AI 模型" value={model} disabled={loading || busy} onChange={event=>setModel(event.target.value)}>{!model && <option value="">{loading ? '正在读取模型…' : '暂无可用模型'}</option>}{models.map(model=><option key={model.id} value={model.id} disabled={!model.available}>{model.label || model.display_name || model.id}</option>)}</select>
+      <label><input type="checkbox" aria-label="继续向下传播" checked={propagate} disabled={busy} onChange={event=>setPropagate(event.target.checked)}/>继续向下传播</label>
+      <button aria-label="执行 AI" title="在当前元素生成结果" disabled={busy || loading || !prompt.trim() || !models.some(item=>item.id===model && item.available)} onClick={()=>{setError('');if(save())check(engine.startRun({target:{id:element.id,incarnation:element.incarnation},boardId:element.ownerCanvasId,modelId:model,prompt,parameters:{},propagate}));}}><ArrowUp size={18}/></button>
+    </footer>
+    <p role="status">{message}</p>
+    {(run?.blocked || run?.status==='conflict') && <div className={styles.aiConflict}>{typeof output.text==='string' && <pre>{output.text}</pre>}{typeof output.src==='string' && <img src={managedImageSource(output.src)} alt="保留的生成结果"/>}</div>}
+    {(run?.blocked || run?.error || pending.some(record=>record.phase==='blocked')) && <button onClick={()=>void engine.retry().catch(error=>setError(errorText(error)))}>重试任务跟踪</button>}
+    {error && <p role="alert">{error}</p>}
+  </section>;
+}

src/components/canvas/headless-graph-canvas.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Background, BackgroundVariant, ConnectionMode, ReactFlow, ReactFlowProvider, useReactFlow, type Connection, type NodeProps } from "@xyflow/react";
-import { Download, Frame, Hand, ImagePlus, Maximize, Minus, MousePointer2, Plus, Redo2, StickyNote, Type, Undo2 } from "lucide-react";
+import { Download, Frame, Hand, ImagePlus, Maximize, Minus, MousePointer2, Plus, Redo2, Sparkles, StickyNote, Type, Undo2 } from "lucide-react";
 import type { Board } from "@/lib/workspace";
 import type { Data, ElementRecord, Geometry, Id, Json, Result } from "@/lib/canvas-core/types";
 import { equal } from "@/lib/canvas-core/values";
@@ -15,6 +15,7 @@ import toolbar from "@/components/ui/toolbar.module.css";
 import { guardEditingLease } from "./editing-lease";
 import { NodeEditing } from "./transformable-node";
 import { EdgeEditing } from "./edge-editing";
+import { HeadlessAIPanel } from "./headless-ai-panel";
 import { CanvasEdge } from "./canvas-edge";
 import { MaterialNode } from "./material-node";
 import { PlainTextNode } from "./plain-text-node";
@@ -36,6 +37,7 @@ function CanvasView({ engine, board, viewId }: { engine: ProjectEngine; board: B
   const liveView = sessions.views.get(viewId), lastView = useRef(liveView);
   if (liveView) lastView.current = liveView;
   const view = liveView ?? lastView.current!, flow = useReactFlow<ProjectionNode>();
+  const [showAI, setShowAI] = useState(false);
   const [error, setError] = useState(""), [sources, setSources] = useState(new Map<string, string>());
   const pointerStart = useRef<{ x: number; y: number } | null>(null), drag = useRef<{ token: number; start: { x: number; y: number }; positions: Map<Id, { x: number; y: number }> } | null>(null);
   const measurements = useRef(new Map<Id, { width: number; height: number; measured: { width: number; height: number } }>());
@@ -112,6 +114,8 @@ function CanvasView({ engine, board, viewId }: { engine: ProjectEngine; board: B
     return () => { window.removeEventListener('blur', cancel); window.removeEventListener('keydown', escape, true); };
   }, [engine, viewId]);
   const modes = view.modes;
+  const selected = view.selection.size === 1 ? root.document.elements.get([...view.selection][0]) : undefined;
+  const aiElement = selected?.structure === 'node' && engine.editor.registry.resolve(selected) === 'known' && ['text','plain-text','script','image','plain-image'].includes(selected.componentId) ? selected : undefined;
   if (!liveView) return <p role="status">画布已关闭</p>;
   return <div className={`${styles.editor} ${view.tool === 'pan' ? styles.handMode : ''}`} data-headless-canvas tabIndex={-1}
     onMouseDownCapture={event => { if (event.button === 0 && (event.target as HTMLElement).closest('.react-flow__node')) pointerStart.current = flow.screenToFlowPosition({ x: event.clientX, y: event.clientY }); }}
@@ -193,9 +197,11 @@ function CanvasView({ engine, board, viewId }: { engine: ProjectEngine; board: B
     </div><p role="status" style={{ fontSize: 11 }}>{blocked ? '有修改需要处理' : pending.length ? '正在同步…' : '已同步'}{blocked && <button onClick={() => void engine.retry().catch(e => setError(errorText(e)))}>重试</button>}</p></div>
     <div className={`${toolbar.surface} ${toolbar.relaxed} ${styles.toolbar} ${styles.bottomToolbar}`} role="toolbar" aria-label="画布创作工具">
       <IconButton icon={MousePointer2} label="选择工具（V）" aria-pressed={view.tool === 'select'} onClick={() => engine.sessions.tool(viewId, 'select')} /><IconButton icon={Hand} label="抓手工具（H）" aria-pressed={view.tool === 'pan'} onClick={() => engine.sessions.tool(viewId, 'pan')} />
+      <IconButton icon={Sparkles} label="AI 创作" disabled={!aiElement} aria-pressed={showAI} onClick={() => setShowAI(value => !value)} />
       <IconButton icon={Type} label="添加纯文本" onClick={() => add('plain-text')} /><IconButton icon={StickyNote} label="添加文本卡片" onClick={() => add('text')} /><IconButton icon={ImagePlus} label="添加图片" onClick={() => imageInput.current?.click()} /><IconButton icon={Frame} label="添加框选区" onClick={() => add('frame')} />
     </div>
     <input ref={imageInput} type="file" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden onChange={event => { const files = [...event.target.files ?? []]; event.target.value = ''; try { report(engine.stageFiles(files.map(file => ({ name: file.name, bytes: file })), (refs, tx) => { for (const ref of refs) add('image', ref, tx); })); } catch (e) { setError(errorText(e)); } }} />
+    {showAI && aiElement && <HeadlessAIPanel key={`${aiElement.id}:${aiElement.incarnation}:${aiElement.ownerCanvasId}`} engine={engine} element={aiElement} close={() => setShowAI(false)} />}
     {error && <div className={styles.error} role="alert">{error} <button onClick={() => setError('')}>关闭</button></div>}
   </div>;
 }

src/components/workspace/canvas-runtime-host.tsx

@@ -7,7 +7,7 @@ import { createRegistry, builtinComponents } from "@/lib/canvas-core/index";
 import { createRuntimeHost, type RuntimeHost } from "@/lib/canvas-runtime/host";
 import { createWorkspaceRuntime } from "@/lib/canvas-runtime/workspace";
 import { createBrowserStorage } from "@/lib/canvas-runtime/storage";
-import { createFoundryAssets, createFoundryPersistence, createFoundryTransport } from "@/lib/canvas-service/index";
+import { createFoundryAssets, createFoundryPersistence, createFoundryTransport, createFoundryRuns } from "@/lib/canvas-service/index";
 
 const Context = createContext<RuntimeHost | null>(null);
 export function CanvasRuntimeHost({ children }: { children: ReactNode }) {
@@ -18,7 +18,7 @@ export function CanvasRuntimeHost({ children }: { children: ReactNode }) {
         return createWorkspaceRuntime({ accountId, workspaceId, authEpoch, isCurrentIdentity, registry, storage: createBrowserStorage(),
           adapters(rootId, current) {
             const transport = createFoundryTransport({ accountId, isCurrentIdentity: current });
-            return { persistence: createFoundryPersistence({ workspaceId, rootId, registry, transport }), assets: createFoundryAssets({ workspaceId, transport, project: process.env.NEXT_PUBLIC_FOUNDRY_PROJECT || "endoleap", origin: process.env.NEXT_PUBLIC_FOUNDRY_API_ORIGIN }) };
+            return { runs: createFoundryRuns({ workspaceId, rootId, registry, transport }), persistence: createFoundryPersistence({ workspaceId, rootId, registry, transport }), assets: createFoundryAssets({ workspaceId, transport, project: process.env.NEXT_PUBLIC_FOUNDRY_PROJECT || "endoleap", origin: process.env.NEXT_PUBLIC_FOUNDRY_API_ORIGIN }) };
           },
           onError: error => notify({ id: `canvas-runtime:${accountId}:${workspaceId}`, title: "画布同步需要处理", description: errorText(error), level: "error" }),
         });