@citeark/agent 0.3.20

package/src/workspace/worker.mjs

@@ -0,0 +1,137 @@
+import { appendFile, rm, readFile } from "node:fs/promises";
+import path from "node:path";
+import { format } from "node:util";
+import { main } from "../cli.mjs";
+import { hasSessionEvents, sessionEvent } from "../terminal/events.mjs";
+import { withResearchControl, cancellationError } from "./control.mjs";
+import { jobJson, saveJobJson } from "./jobs.mjs";
+
+const root = process.argv[2];
+const request = await jobJson(root, "request.json");
+const abort = new AbortController();
+let state = {
+  pid: process.pid,
+  status: "running",
+  startedAt: new Date().toISOString(),
+};
+let action = "run";
+let saving = Promise.resolve();
+const save = (patch) =>
+  (saving = saving.then(async () => {
+    state = { ...state, ...patch, updatedAt: new Date().toISOString() };
+    await saveJobJson(root, "state.json", state);
+  }));
+await save({});
+const cancel = () => abort.abort(cancellationError());
+process.on("SIGTERM", cancel);
+process.on("SIGINT", cancel);
+const originalLog = console.log;
+console.log = (...args) =>
+  hasSessionEvents()
+    ? sessionEvent({ kind: "status", text: format(...args) })
+    : originalLog(...args);
+let polling = false;
+const poll = async () => {
+  if (polling) return;
+  polling = true;
+  try {
+    action = (await jobJson(root, "control.json", { action: "run" })).action;
+    if (action === "cancel" && !abort.signal.aborted) {
+      await save({ status: "cancelling" });
+      cancel();
+    }
+  } finally {
+    polling = false;
+  }
+};
+const timer = setInterval(
+  () => poll().catch((error) => abort.abort(error)),
+  1000,
+);
+try {
+  const result = await withResearchControl(
+    {
+      signal: abort.signal,
+      cleanup: async (record) => {
+        await save({
+          resourceCleanup: [...(state.resourceCleanup ?? []), record],
+        });
+        sessionEvent({
+          kind: record.status === "failed" ? "error" : "status",
+          text: `${record.provider} ${record.resource}: cleanup ${record.status}${record.error ? ` — ${record.error}` : ""}`,
+        });
+      },
+      instructions: async () => {
+        let lines;
+        try {
+          lines = await readFile(
+            path.join(root, ".citeark-job", "notes.jsonl"),
+            "utf8",
+          );
+        } catch (error) {
+          if (error.code === "ENOENT") return "";
+          throw error;
+        }
+        const notes = lines.split("\n").filter(Boolean).map(JSON.parse);
+        sessionEvent({
+          kind: "status",
+          text: `Including ${notes.length} follow-up instruction(s) in the next Agent invocation.`,
+        });
+        return notes.map((note) => `[${note.at}] ${note.text}`).join("\n");
+      },
+      boundary: async (stage) => {
+        await poll();
+        abort.signal.throwIfAborted();
+        while (action === "pause") {
+          if (state.status !== "paused") {
+            await save({ status: "paused", stage });
+            sessionEvent({
+              kind: "status",
+              text: "Research paused. Use session resume to continue.",
+            });
+          }
+          await new Promise((resolve) => setTimeout(resolve, 500));
+          await poll();
+          abort.signal.throwIfAborted();
+        }
+        await save({ status: "running", stage });
+      },
+    },
+    () => main(["start", ...request.argv]),
+  );
+  clearInterval(timer);
+  abort.signal.throwIfAborted();
+  await save({
+    status:
+      result?.phase === "completed"
+        ? "completed"
+        : result?.phase === "awaiting_selection"
+          ? "awaiting_selection"
+          : "prepared",
+    finishedAt: new Date().toISOString(),
+  });
+} catch (error) {
+  clearInterval(timer);
+  await save({
+    status: abort.signal.aborted ? "cancelled" : "failed",
+    error: error.message,
+    finishedAt: new Date().toISOString(),
+  });
+  await appendFile(
+    path.join(root, "session.events.jsonl"),
+    JSON.stringify({
+      at: new Date().toISOString(),
+      kind: "error",
+      text: error.message,
+    }) + "\n",
+  );
+  process.exitCode = abort.signal.aborted ? 130 : 1;
+} finally {
+  await rm(path.join(root, ".citeark-job", "starting"), {
+    recursive: true,
+    force: true,
+  });
+  clearInterval(timer);
+  process.removeListener("SIGTERM", cancel);
+  process.removeListener("SIGINT", cancel);
+}

package/ui/arkgraph/ambient-motion.mjs

@@ -0,0 +1,10 @@
+// Fixed design units. The collision solver reserves the entire motion envelope.
+export const motionEnvelope=n=>n.main?{x:2.25,y:1.65}:{x:3.15,y:2.45};
+export const layoutPosition=n=>({x:n.restX??n.x,y:n.restY??n.y});
+export function ambientOffset(n,seconds,group){
+ const phase=group*.64,ramp=1-(1-Math.min(1,seconds/2.4))**3;
+ return {
+  x:((n.main?1.8:2.7)*Math.sin(seconds*.36+phase)+.45*Math.sin(seconds*.67+n.phase))*ramp,
+  y:((n.main?1.3:2.1)*Math.sin(seconds*.29+phase+.9)+.35*Math.sin(seconds*.53+n.phase))*ramp
+ };
+}

package/ui/arkgraph/app.jsx

@@ -0,0 +1,153 @@
+import sourceTypes from './locales/source-types.json' with {type:'json'};
+import {useExperimentSelection,ExperimentToolbar,ExperimentDock,createExperimentPanel} from './experiment-ui.jsx';
+import {createOutline} from './outline.jsx';
+import {contentGroups,createReadingColors} from './reading-presentation.mjs';
+import React, {useState,useEffect,useMemo,useRef,useDeferredValue} from 'react';
+
+import {createRecordDetails} from './record-details.jsx';
+import {createPortal} from 'react-dom';
+import {createOpenGraph} from './open-graph.jsx';
+import {MD,typeColors,coreLabels,coreHints,coreTypeOf,colorOf,shapeOf,alpha,semanticLabelOf,descriptionOf,classificationOf,shortTypeLabel} from './research-types.mjs';
+import './style.css';
+import './steering-style.css';
+import './material-style.css';
+export function createArkGraphView(D,{sourceUrl=D.sourceDocument??null}={}){
+const byKey=new Map(D.nodes.map(n=>[n.key,n])),byLocal=new Map(D.nodes.map(n=>[n.local,n]));
+const roleLabel={'claim':'主张','hypothesis':'假说','observation':'观测','procedure':'实验计划','procedure-step':'计划步骤','model':'模型','checkpoint':'检查点','dataset':'数据集','sample':'样本','method':'方法','material':'材料','code':'代码','agent':'参与者','source-work':'论文来源','assessment':'阅读分析'};
+const typeLabel=semanticLabelOf;
+const categoryOf=coreTypeOf;
+const categoryLabels=coreLabels;
+const categoryHints=coreHints;
+const allCategories=true;
+const typeHint=descriptionOf;
+const contextRoles=n=>classificationOf(n).contextualRoles;
+const isResult=n=>coreTypeOf(n)==='result';
+const isMethodIllustration=n=>!!n&&coreTypeOf(n)==='method';
+const predicateLabel={requires:'需要',used:'使用',derivedFrom:'派生自',assertedIn:'发表于',associatedWith:'参与',follows:'遵循',basedOn:'依据',describes:'描述',assesses:'评估',expects:'预期产出',partOf:'属于',revises:'修订',supersedes:'替代',about:'涉及',evidenceFor:'证据关联',plannedFor:'拟检验',needs:'需要',hasStep:'包含步骤',uses:'使用',wasDerivedFrom:'派生自',attributedTo:'归属于',wasGeneratedBy:'生成自',wasAssociatedWith:'参与',generated:'生成',usesMethod:'使用方法',explains:'解释假说',evaluates:'阅读核对'};
+const incident=new Map(D.nodes.map(n=>[n.key,[]]));
+D.edges.forEach(e=>{incident.get(e.from)?.push(e);if(e.to!==e.from)incident.get(e.to)?.push(e)});
+const recordSourcePage=n=>{if(n.sourcePage)return n.sourcePage;const m=n.source?.match(/\b(?:pp?\.|pages?\s+)\s*(\d+)|物理页\s*(\d+)|第\s*(\d+)\s*页/i);const page=Number(m?.slice(1).find(Boolean));return Number.isSafeInteger(page)&&page>0?page:null};
+function sourceLink(n){const page=recordSourcePage(n);return sourceUrl?sourceUrl+(page?'#page='+page:''):undefined}
+const pretty=x=>JSON.stringify(x,null,2);
+const recordLabel=n=>n?n.label:'未解析的外部引用';
+const displayValue=m=>String(m.printed??m.value)+(m.printed?'':m.unit==='%'?'%':m.unit?' '+m.unit:'');
+const evidenceCount=k=>new Set((incident.get(k)||[]).map(e=>e.from===k?e.to:e.from).filter(k=>{const n=byKey.get(k);return (isResult(n)||isMethodIllustration(n))&&!n.prospective})).size;
+const metricNames={};
+
+let completeData=D;
+const searchText=new WeakMap();
+const loadCompleteData=()=>Promise.resolve(D);
+function useCompleteData(enabled=true){
+ const [value,setValue]=useState(completeData),[error,setError]=useState(null);
+ useEffect(()=>{let active=true;if(enabled&&!value)loadCompleteData().then(d=>{if(active)setValue(d)}).catch(e=>{if(active)setError(e.message)});return()=>{active=false}},[enabled,value]);
+ return {value,error,retry:()=>{setError(null);loadCompleteData().then(setValue).catch(e=>setError(e.message))}};
+}
+function Disclosure({title,children,defaultOpen=false}){
+ const [open,setOpen]=useState(defaultOpen);
+ return <details open={open} onToggle={e=>setOpen(e.currentTarget.open)}><summary>{title}</summary>{open&&children()}</details>;
+}
+function RawRecord({record,edge=false}){
+ const {value,error,retry}=useCompleteData();
+ if(error)return <p role="alert">{error} <button className="text-button" onClick={retry}>重新加载</button></p>;
+ if(!value)return <p className="section-note" role="status">正在加载完整记录…</p>;
+ const original=(edge?value.edges:value.nodes).find(o=>edge?o.id===record.id:o.key===record.key);
+ return <pre>{pretty(original.raw)}</pre>;
+}
+function cachedSearch(o){if(!searchText.has(o))searchText.set(o,JSON.stringify(o).toLowerCase());return searchText.get(o)}
+
+function Measurements({items}) {
+ const [all,setAll]=useState(false);if(!items.length)return null;
+ return <section><h3>报告数值 <small>{items.length} 项</small></h3><div className="table-scroll"><table><thead><tr><th>条件</th><th>指标</th><th>数值</th></tr></thead><tbody>{(all?items:items.slice(0,8)).map((m,i)=><tr key={m.id||i}><td>{Object.entries(m.dimensions||{}).map(([k,v])=><div key={k}>{k+'：'+(typeof v==='object'?JSON.stringify(v):String(v))}</div>)}</td><td>{metricNames[m.metric]||m.metric}</td><td><b>{displayValue(m)}</b></td></tr>)}</tbody></table></div>{items.length>8&&<button className="text-button" onClick={()=>setAll(!all)}>{all?'收起数值':'查看全部 '+items.length+' 项数值'}</button>}<Disclosure title="数值的完整条件与来源">{()=> <pre>{pretty(items)}</pre>}</Disclosure></section>
+}
+function RecordMeta({n}){return <div className="detail-eyebrow" style={{'--record-color':colorOf(n)}}>{coreLabels[coreTypeOf(n)]} · {typeLabel(n)} · {n.prospective?'研究计划 · 尚未执行':n.role==='assessment'?'研究评估':n.role==='claim'?'来源理解':n.basis==='declared'?'原文报告':n.basis==='observed'?'运行观测':'来源资料'}</div>;}
+const canPreview=n=>!!n.image||(n.category==='result'&&!!n.sourcePage&&!!sourceUrl&&(/\.pdf(?:[?#]|$)|arxiv\.org\/pdf\//i.test(sourceUrl)));
+const RecordDetails=createRecordDetails({canPreview,incident,byKey,isResult,isMethodIllustration,recordLabel,typeLabel,sourceLink,FigureCard,Measurements,Disclosure,predicateLabel});
+// The reading projection is separate from the immutable CAP graph.
+const shortLabels=D.presentation.shortLabels;
+const spine=D.presentation.spine;
+const allPrimary=D.presentation.primary.map(key=>byKey.get(key));
+const themeFor=new Map(D.nodes.map(n=>[n.key,n.stage]));
+const stageOf=n=>n.stage;
+const groups=D.presentation.groups;
+const readingColorOf=createReadingColors(spine);
+const ReadingGraph=createOpenGraph({D,byKey,spine,allPrimary,groups,shortLabels,recordLabel,predicateLabel,readingColorOf});
+function FigureCard({n}){
+ const [large,setLarge]=useState(false);
+ useEffect(()=>{const close=e=>{if(e.key==='Escape'&&large){e.preventDefault();e.stopImmediatePropagation();setLarge(false)}};window.addEventListener('keydown',close,true);return()=>window.removeEventListener('keydown',close,true)},[large]);
+ return <><figure><button className="figure-button" onClick={()=>setLarge(true)} aria-label={'放大'+(n.imageCaption||n.label)}>{n.image?<img src={n.image} alt={n.imageCaption||n.label}/>:<iframe className="source-page" src={sourceLink(n)} title={n.label} loading="lazy"/>}</button><figcaption>{n.imageCaption||n.source}</figcaption></figure>{large&&createPortal(<div className="lightbox" role="dialog" aria-label="原文图表" onClick={()=>setLarge(false)}><button className="lightbox-close" aria-label="关闭放大图表" onClick={()=>setLarge(false)}><Icon name="close" size={22}/></button><figure onClick={e=>e.stopPropagation()}>{n.image?<img src={n.image} alt={n.imageCaption||n.label}/>:<iframe className="source-page" src={sourceLink(n)} title={n.label} loading="lazy"/>}<figcaption>{n.imageCaption||n.label} <a href={sourceLink(n)} target="_blank" rel="noopener">查看原论文 ↗</a></figcaption></figure></div>,document.body)}</>;
+}
+function DetailPanel({selection,onClose,openRecord,openEdge,showEvidence,expanded,onExpand,navigation}){
+ if(!selection)return null;
+ const n=selection.kind==='record'?byKey.get(selection.id):null,e=selection.kind==='edge'?D.edges.find(x=>x.id===selection.id):null;
+ return <aside className="inspector"><div className="drawer-top">{n?<RecordMeta n={n}/>:<span>整理关系</span>}<div className="drawer-actions">{navigation}<button className="detail-resize" aria-label={expanded?"缩小详情，显示图谱":"展开详情"} aria-expanded={expanded} onClick={onExpand}><Icon name={expanded?"minimize":"maximize"} size={17}/></button><button aria-label="关闭详情" onClick={onClose}><Icon name="close" size={18}/></button></div></div><div className="drawer-body" key={selection.id}>
+ {n&&<RecordDetails n={n} openRecord={openRecord} openEdge={openEdge} showEvidence={showEvidence}/>}
+ {e&&<><div className="detail-eyebrow">整理关系</div><h2>{predicateLabel[e.predicate]||e.predicate}</h2><button className="detail-row" onClick={()=>openRecord(e.from)}><span><small>起点</small><b>{recordLabel(byKey.get(e.from))}</b></span></button><div className="arrow-between">↓ {e.predicate}</div><button className="detail-row" onClick={()=>openRecord(e.to)}><span><small>终点</small><b>{recordLabel(byKey.get(e.to))}</b></span></button>{e.predicate==='evidenceFor'&&<p className="section-note">证据关联来自原文阅读，不表示已完成独立验证。</p>}<p className="original">{e.qualification}</p><p className="section-note">{e.source}</p><Disclosure title="完整整理关系">{()=> <RawRecord record={e} edge/>}</Disclosure></>}
+ </div></aside>;
+}
+const legend=contentGroups.map(group=>({...group,count:D.nodes.filter(n=>group.types.includes(coreTypeOf(n))).length})).filter(group=>group.count>0);
+function Icon({name,size=16}){
+ const shapes={
+  outline:<><path d="M8 5h13M8 12h13M8 19h13"/><circle cx="3" cy="5" r=".6"/><circle cx="3" cy="12" r=".6"/><circle cx="3" cy="19" r=".6"/></>,
+  comment:<><path d="M5 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 3v-3H3V6a2 2 0 0 1 2-2Z"/><path d="M8 8h9M8 12h6"/></>,
+  chart:<><path d="M4 3v17h17M8 16v-5M13 16V6M18 16V9"/></>,
+  motion:<><path d="M3 8c4-7 8 7 12 0M5 16c4-7 8 7 12 0"/><circle cx="20" cy="6" r="1"/></>,
+  fit:<><path d="M9 4H4v5m11-5h5v5M4 15v5h5m11-5v5h-5"/><circle cx="12" cy="12" r="2"/></>,
+  maximize:<><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></>,
+  minimize:<><path d="M3 8h5V3m8 0v5h5M8 21v-5H3m13 5v-5h5"/></>,
+  brand:<><path d="M5 18 12 5l7 13M5 18h14M8 12h8"/><circle cx="12" cy="5" r="2"/><circle cx="5" cy="18" r="2"/><circle cx="19" cy="18" r="2"/></>,
+  route:<><circle cx="5" cy="18" r="2"/><circle cx="19" cy="6" r="2"/><path d="M7 18h8a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h8"/></>,
+  settings:<><path d="M4 7h16M4 17h16"/><circle cx="9" cy="7" r="3"/><circle cx="15" cy="17" r="3"/></>,
+  search:<><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></>,
+  reset:<><path d="M5 8a8 8 0 1 1-1 8M5 3v5h5"/></>,
+  rotate:<><path d="M20 8a8 8 0 0 0-14-3L3 8m0-5v5h5M4 16a8 8 0 0 0 14 3l3-3m0 5v-5h-5"/></>,
+  label:<><path d="M4 5h16M12 5v15M8 20h8"/></>,
+  document:<><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Zm0 0v6h6M8 13h8m-8 4h5"/></>,
+  external:<><path d="M14 4h6v6m0-6L10 14M11 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"/></>,
+  'chevron-up':<path d="m6 15 6-6 6 6"/>, 'chevron-down':<path d="m6 9 6 6 6-6"/>,
+  'arrow-left':<path d="M20 12H4m6-6-6 6 6 6"/>, 'arrow-right':<path d="M4 12h16m-6-6 6 6-6 6"/>,
+  close:<path d="m6 6 12 12M6 18 18 6"/>
+ };
+ return <svg className="ui-icon" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.65" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{shapes[name]}</svg>;
+}
+
+function TypeMark({type}){
+ const outlined=['hypothesis','plan','result'].includes(type),dashed=['hypothesis','plan'].includes(type),square=['method','plan','activity','result'].includes(type);
+ return <svg className="type-mark" width="12" height="12" viewBox="0 0 16 16" aria-hidden="true" style={{color:typeColors[type]}} fill={outlined?'none':'currentColor'} stroke={outlined?'currentColor':'none'} strokeWidth="1.5" strokeDasharray={dashed?'2 2':undefined}>{square?<rect x="2" y="2" width="12" height="12" rx={type==='result'?1:3}/>:type==='assessment'?<path d="M8 1 15 8 8 15 1 8Z"/>:<circle cx="8" cy="8" r="6"/>}{type==='result'&&<path d="M5 6h6M5 10h6"/>}</svg>;
+}
+const Catalog=createOutline({D,byKey,spine,groups,recordLabel,typeLabel,coreLabels,coreHints,coreTypeOf,colorOf:readingColorOf,Icon,TypeMark,useCompleteData,cachedSearch,predicateLabel});
+function MainlineNavigation({idx,openRecord}){return <>{idx>=0?<nav className="spine-nav" aria-label="主线导航"><button aria-label="上一个主线节点" disabled={idx===0} onClick={()=>openRecord(spine[idx-1])}><Icon name="arrow-left" size={18}/></button><span>{idx+1} / {spine.length}</span><button aria-label="下一个主线节点" disabled={idx===spine.length-1} onClick={()=>openRecord(spine[idx+1])}><Icon name="arrow-right" size={18}/></button></nav>:null}</>;}
+const ExperimentPanel=createExperimentPanel({D,byKey,Icon,recordLabel});
+function App({selectionControl}={}){
+ const experiments=useExperimentSelection(D,selectionControl);
+ const [experimentReturn,setExperimentReturn]=useState(null);
+ const [selection,setSelection]=useState(null),[catalog,setCatalog]=useState(false),[labels,setLabels]=useState(true),[hidden,setHidden]=useState(new Set()),[extras,setExtras]=useState([]),[resetSignal,setResetSignal]=useState(0),[fitSignal,setFitSignal]=useState(0),[detailExpanded,setDetailExpanded]=useState(false),[ambient,setAmbient]=useState(true),[folded,setFolded]=useState(true),[visibleCount,setVisibleCount]=useState(allPrimary.length);
+ const openExperiment=id=>{setExperimentReturn(null);setCatalog(false);setSelection({kind:id?'experiment':'experiment-scope',id:id||'experiment-scope'});};
+ const openRecord=(k,returnTo=null)=>{setExperimentReturn(returnTo);if(!k){setSelection(null);return}if(!byKey.has(k))return;setCatalog(false);setSelection({kind:'record',id:k});setFolded(true);};
+ const openEdge=id=>{setCatalog(false);setSelection({kind:'edge',id})};
+ const showEvidence=k=>{const ks=[...new Set((incident.get(k)||[]).map(e=>e.from===k?e.to:e.from))].filter(key=>{const n=byKey.get(key);return (isResult(n)||isMethodIllustration(n))&&!n.prospective});const xs=[...new Set([k,...ks])].filter(key=>!allPrimary.some(n=>n.key===key));xs.owner=k;setExtras(xs);setSelection({kind:'record',id:k});};
+ const reset=()=>{setSelection(null);setCatalog(false);setExtras([]);setHidden(new Set());setResetSignal(x=>x+1)};
+ useEffect(()=>{const close=e=>{if(e.key==='Escape'){setCatalog(false);setSelection(null)}};window.addEventListener('keydown',close);return()=>window.removeEventListener('keydown',close)},[]);
+
+ useEffect(()=>setDetailExpanded(false),[selection?.id]);
+ const isExperiment=selection?.kind==='experiment'||selection?.kind==='experiment-scope';
+ const idx=spine.indexOf(selection?.id);
+ const graphCount=visibleCount;
+
+ return <main className={'reference-app '+(selection||catalog?'panel-open ':'')+(selection?'detail-open ':'')+(detailExpanded?'detail-expanded':'')}>
+  <header className="app-header"><span className="brand"><span className="brand-mark"><Icon name="brand" size={23}/></span>ArkGraph</span><span className="header-divider"/><span className="header-context">论文阅读地图</span>{!selection&&!catalog&&<button className="header-start" onClick={()=>openRecord(spine[0])}><Icon name="route"/>从主线开始</button>}{sourceUrl&&<a className="original-link" href={sourceUrl} target="_blank" rel="noopener"><Icon name="document"/>论文原文<Icon name="external" size={13}/></a>}</header>
+  <section className={'paper-card '+(folded?'folded':'')}><div className="paper-summary"><div className="paper-card-title"><div><div className="paper-eyebrow">研究概览</div><h1>{D.titleZh}</h1></div><button aria-label={folded?'展开论文说明':'收起论文说明'} onClick={()=>setFolded(!folded)}><Icon name={folded?'chevron-down':'chevron-up'} size={15}/></button></div>{folded&&<p className="paper-mini-meta">图中 {graphCount} 个对象 · 全文 {D.nodes.length} 个</p>}{!folded&&<><p>{D.question}</p><div className="paper-card-source"><span><b>{D.nodes.filter(n=>n.role==='claim').length}</b> 项主张 <i/> <b>{D.nodes.filter(n=>n.role==='hypothesis').length}</b> 个假说</span><span className="source-status"><i/>{D.provenance===sourceTypes.provenance?'Agent 生成 · 来源声明':D.provenance}</span></div></>}</div>
+  <nav className="toolbar" aria-label="视图控制">
+   <button className="icon-button" aria-label="查看全图" onClick={()=>{setSelection(null);setCatalog(false);setFitSignal(x=>x+1)}} title="查看全图"><Icon name="fit"/></button>
+   <ExperimentToolbar state={experiments} onEnter={()=>{setSelection(null);setCatalog(false);experiments.setSelecting(v=>!v)}}/><span className="toolbar-divider"/><button className="catalog-button" aria-pressed={catalog} onClick={()=>{setSelection(null);setCatalog(!catalog)}}><Icon name="outline"/>大纲</button>
+  </nav></section>
+  <section className="scene"><div className="scene-main">
+   <ReadingGraph onVisibleCount={setVisibleCount} experiments={experiments.model.experiments} experimentSelecting={experiments.selecting} experimentLocked={experiments.locked} experimentSelectable={experiments.selectable} experimentSelected={experiments.selected} experimentNodes={experiments.scope.nodeIds} onExperiment={id=>{if(experiments.selecting)experiments.toggle(id);else openExperiment(id)}} onInspectExperiment={openExperiment} selection={selection} labels={labels} folded={folded} hidden={hidden} extras={extras} onPick={openRecord} onPickEdge={openEdge} resetSignal={resetSignal} fitSignal={fitSignal} ambient={ambient} detailExpanded={detailExpanded} motionBlocked={catalog}/>
+   <ExperimentDock state={experiments} onReview={()=>openExperiment(null)}/><div className="legend" aria-label="内容分类"><span className="legend-title">内容</span>{legend.map(group=><button key={group.id} title={group.types.map(type=>coreLabels[type]).join('、')+" · 全文 "+group.count+" 项 · 点击弱化或恢复"} aria-label={group.label} aria-pressed={!group.types.every(type=>hidden.has(type))} onClick={()=>setHidden(old=>{const next=new Set(old),restore=group.types.every(type=>old.has(type));for(const type of group.types){if(restore)next.delete(type);else next.add(type)}return next})}><span className="legend-group-mark" style={{color:group.color}}>{group.id==='context'?<Icon name="search" size={13}/>:group.id==='argument'?<Icon name="comment" size={13}/>:group.id==='process'?<Icon name="route" size={13}/>:group.id==='evidence'?<Icon name="chart" size={13}/>:<Icon name="document" size={13}/>}</span>{group.label}</button>)}</div><div className="projection-note">{extras.length>0&&<button onClick={()=>setExtras([])}>回到研究概览</button>}</div>
+  </div>{isExperiment?<ExperimentPanel state={experiments} selection={selection} onClose={()=>setSelection(null)} onOpenRecord={k=>openRecord(k,selection)} onOpenExperiment={openExperiment} expanded={detailExpanded} onExpand={()=>setDetailExpanded(v=>!v)}/>:<DetailPanel selection={selection} onClose={()=>setSelection(null)} navigation={<>{experimentReturn&&<button aria-label="返回实验详情" onClick={()=>setSelection(experimentReturn)}>←</button>}<MainlineNavigation idx={idx} openRecord={openRecord}/></>} expanded={detailExpanded} onExpand={()=>setDetailExpanded(v=>!v)} openRecord={openRecord} openEdge={openEdge} showEvidence={showEvidence}/>} {catalog&&<Catalog onClose={()=>setCatalog(false)} openRecord={openRecord} openEdge={openEdge}/>}</section>
+ </main>;
+}
+return App;
+}
+
+import './experiment-style.css';
+import './record-detail.css';

package/ui/arkgraph/boot.js

@@ -0,0 +1,6 @@
+(() => {
+ const english=!new URL(location.href).searchParams.get('locale')?.startsWith('zh');
+ document.documentElement.lang=english?'en':'zh-CN';
+ const style=document.createElement('link');style.rel='stylesheet';style.href=english?'viewer.en.css':'viewer.css';document.head.append(style);
+ const script=document.createElement('script');script.src=english?'viewer.en.js':'viewer.js';document.body.append(script);
+})();

package/ui/arkgraph/camera-motion.mjs

@@ -0,0 +1,20 @@
+// One cancellable transition owns scale and center together. No library tween queue.
+export function createCameraMotion({graph,element,reduced,onActivity}){
+ let frame=0,target=null;
+ const cancel=()=>{cancelAnimationFrame(frame);frame=0;target=null;element.dataset.cameraMotion='idle';};
+ const move=(next,ms)=>{
+  if(target&&['x','y','k'].every(key=>Math.abs(target[key]-next[key])<1e-5))return;
+  const start={...graph.centerAt(),k:graph.zoom()};
+  if(!frame&&['x','y','k'].every(key=>Math.abs(start[key]-next[key])<1e-6))return;
+  cancel();target=next;const time=reduced()?0:ms,began=performance.now();
+  element.dataset.cameraStarts=String(Number(element.dataset.cameraStarts||0)+1);
+  const tick=now=>{
+   const t=time?Math.min(1,(now-began)/time):1,e=1-(1-t)**3;
+   onActivity();graph.zoom(Math.exp(Math.log(start.k)+(Math.log(next.k)-Math.log(start.k))*e));graph.centerAt(start.x+(next.x-start.x)*e,start.y+(next.y-start.y)*e);
+   element.dataset.cameraMotion=t<1?'moving':'idle';element.dataset.cameraProgress=t.toFixed(3);
+   if(t<1)frame=requestAnimationFrame(tick);else{frame=0;target=null;}
+  };
+  tick(began);
+ };
+ return {move,cancel,get active(){return !!frame;},dispose:cancel};
+}

package/ui/arkgraph/context-reveal.mjs

@@ -0,0 +1,39 @@
+// A view-local expansion of existing records; source identities and relations stay intact.
+export function createContextIndex(D,primary,spine){
+ const base=new Set(primary),hidden=new Set(D.nodes.filter(n=>!base.has(n.key)&&n.role!=='source-work'&&n.category!=='agent'&&n.role!=='procedure'&&n.role!=='procedure-step').map(n=>n.key));
+ const groups=D.presentation?.contextGroups;
+ const children=new Map([...new Set([...primary,...(groups??[]).map(g=>g.parent)])].map(id=>[id,[]])),owners=new Map();
+ const add=(owner,id)=>{if(!hidden.has(id)||!children.has(owner))return;if(!children.get(owner).includes(id))children.get(owner).push(id);if(!owners.has(id))owners.set(id,[]);if(!owners.get(id).includes(owner))owners.get(id).push(owner);};
+ // Reading ownership controls disclosure. Dense scientific adjacency stays in details.
+ if(groups)for(const group of groups)for(const id of group.children)add(group.parent,id);
+ else for(const owner of primary)for(const edge of D.edges){const id=edge.from===owner?edge.to:edge.to===owner?edge.from:null;add(owner,id);}
+ return {children,owners,base,spine};
+}
+export function contextRecords(index,{hoverOwner=null,selected=null,previousOwner=null}={}){
+ const selectedOwner=index.children.has(selected)?selected:index.owners.get(selected)?.includes(previousOwner)?previousOwner:index.owners.get(selected)?.[0];
+ const active=[...new Set([selectedOwner,hoverOwner].filter(Boolean))],records=new Map();
+ for(const owner of active)for(const id of index.children.get(owner)||[])if(!records.has(id))records.set(id,{id,owner});
+ if(selected&&!index.base.has(selected)&&!records.has(selected))records.set(selected,{id:selected,owner:selectedOwner||index.spine[0]});
+ return [...records.values()];
+}
+const intersects=(a,b,pad=7)=>a.x<b.x+b.w+pad&&a.x+a.w+pad>b.x&&a.y<b.y+b.h+pad&&a.y+a.h+pad>b.y;
+export function placeContext(items,obstacles){
+ const occupied=obstacles.map(b=>({...b})),result=new Map();
+ for(const item of items){let choice=null,score=Infinity;
+  for(let ring=0;ring<18;ring++){
+   const radius=70+ring*22;
+   for(let j=0;j<24;j++){
+    const angle=-Math.PI/2+j*Math.PI/12,x=item.owner.x+Math.cos(angle)*radius,y=item.owner.y+Math.sin(angle)*radius;
+    const side=Math.cos(angle)<-.15?'left':'right',dx=side==='left'?-item.w-12:12,dy=-item.h/2;
+    const node={x:x-7,y:y-7,w:14,h:14},label={x:x+dx,y:y+dy,w:item.w,h:item.h};
+    if(occupied.some(o=>intersects(node,o)||intersects(label,o)))continue;
+    const cost=radius+Math.abs(Math.cos(angle))*12;
+    if(cost<score){choice={x,y,dx,dy,side,node,label};score=cost;}
+   }
+   if(choice)break;
+  }
+  if(!choice)throw Error('Could not place context record '+item.id);
+  result.set(item.id,choice);occupied.push(choice.node,choice.label);
+ }
+ return result;
+}

package/ui/arkgraph/details.css

@@ -0,0 +1,3 @@
+.inspector,.catalog{width:365px;flex:none;border-left:1px solid #e1e7ee;background:#fff;display:flex;flex-direction:column;min-height:0}.drawer-top{padding:13px 21px;border-bottom:1px solid #edf0f4;display:flex;justify-content:space-between;align-items:center;color:#98a4b3;font-size:10px;letter-spacing:.8px;flex:none}.drawer-top button{font-size:23px;font-weight:300;color:#9eaabc;line-height:20px;padding:0 3px}.drawer-body{padding:23px 23px 35px;overflow:auto;min-height:0}.detail-eyebrow{font-size:10px;color:#8295ad;letter-spacing:.7px;margin-bottom:12px}h2{font-size:20px;line-height:1.6;font-weight:550;margin:0 0 13px;color:#35495f}.lead{font-size:12px;color:#758397;line-height:1.95;margin:12px 0 18px}.source-chip{display:block;padding:8px 10px;background:#f5f7fa;border-radius:6px;color:#7a90a9;font-size:10px;line-height:1.6}.primary,.secondary{border-radius:6px;padding:9px 13px;font-size:11px;line-height:1.5}.primary{border:1px solid #ccd8e6;background:#edf3fa;color:#527397;width:100%;margin-top:6px}.secondary{border:1px solid #dfe5ed;color:#6f859f;background:#fafcfe;margin-top:12px;width:100%}section h3{font-size:11px;font-weight:550;color:#536881;display:flex;justify-content:space-between;align-items:center;margin:24px 0 11px}h3 small{font-weight:400;color:#a2aebc;font-size:10px}.detail-row{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;border-bottom:1px solid #edf1f5;padding:12px 2px;font-size:11px;color:#657b94;line-height:1.6}.detail-row:hover{background:#f8fafc}.detail-row span:first-child{min-width:0}.detail-row b{display:block;font-weight:500;color:#4e647d}.detail-row small{display:block;font-size:9px;color:#a1afbf;line-height:1.7;margin:3px 0}.section-note{font-size:10px;line-height:1.9;color:#a0aaba;margin:10px 0}.number-story{padding:15px 16px;margin:20px 0;border:1px solid #e5ebf3;border-radius:9px;background:#f8fafc}.number-story>span{font-size:10px;color:#91a0b2}.number-story>div{display:flex;align-items:center;gap:12px;margin:11px 0;color:#486685}.number-story b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}.number-story i{font-size:11px;color:#a2b1c1;font-style:normal}.number-story small{font-size:9px;color:#9caabd}.table-scroll{overflow:auto;margin:10px 0}table{width:100%;border-collapse:collapse;font-size:10px;color:#6e839c}th{text-align:left;color:#a0adbd;font-size:9px;font-weight:400;padding:8px 6px;border-bottom:1px solid #dfe7f0}td{padding:9px 6px;border-bottom:1px solid #edf1f6;vertical-align:top;line-height:1.6}td b{white-space:nowrap;color:#5a7493;font-variant-numeric:tabular-nums}td:first-child{max-width:120px;overflow-wrap:anywhere}.text-button{font-size:10px;color:#6483a5;padding:8px 0}details{border-bottom:1px solid #edf1f5;padding:12px 0;margin-top:9px;font-size:10px;color:#7f94ad}summary{cursor:pointer;color:#8596ac;font-size:10px;line-height:1.7}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f7f9fc;color:#6d829b;padding:12px;border-radius:6px;font:9px/1.75 ui-monospace,SFMono-Regular,monospace;max-height:500px;overflow:auto}.original{font-size:10px;line-height:1.9;color:#8797ab}.identity{display:block;overflow-wrap:anywhere;font-size:9px;color:#a2afbf;margin:10px 0}.arrow-between{text-align:center;padding:14px;color:#9cabbf;font-size:10px}figure{margin:20px 0}figure img{width:100%;display:block;border:1px solid #eef1f6;border-radius:4px}figcaption{font-size:9px;color:#a1aebe;line-height:1.6;margin-top:8px}.catalog-tools{padding:17px 20px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid #e8edf3}.catalog-tools input,.catalog-tools select{width:100%;font-size:10px;padding:10px;border:1px solid #dfe6ef;border-radius:6px;color:#7a8ea8;background:#fff}.catalog-tools .segmented button{flex:1}.catalog-tools>small{font-size:9px;color:#a0adbd}.catalog-list{overflow:auto;flex:1;min-height:0;padding:0 20px}.pagination{padding:12px 20px;display:flex;gap:12px;border-top:1px solid #edf1f5;justify-content:space-between;font-size:10px;color:#8da0b8}.archive{display:flex;gap:20px;padding:12px 20px;border-top:1px solid #edf1f5;font-size:9px;color:#a1afbf}
+
+.source-page{display:block;width:100%;height:380px;border:0;background:#FFFFFF}.lightbox .source-page{width:80vw;height:78dvh}

package/ui/arkgraph/entry.jsx

@@ -0,0 +1,28 @@
+import React,{useState,useEffect} from 'react';
+import {createRoot} from 'react-dom/client';
+import {createArkGraphView} from './app.jsx';
+const root=createRoot(document.getElementById('root'));
+const embedded=window.parent!==window;
+const channel='citeark-arkgraph/1';
+function Hosted({data,options}){
+ const [control,setControl]=useState(options.selectionControl);
+ const [App]=useState(()=>createArkGraphView(data,{sourceUrl:options.sourceUrl}));
+ useEffect(()=>{const update=e=>{
+  if(e.source===parent&&e.data?.channel===channel&&e.data.type==='selection')setControl(e.data.control);
+ };window.addEventListener('message',update);return()=>window.removeEventListener('message',update)},[]);
+ const selectionControl=control?{...control,onToggle:id=>parent.postMessage({channel,type:'toggle',digest:data.digest,id},'*'),onClear:()=>parent.postMessage({channel,type:'clear',digest:data.digest},'*')}:undefined;
+ return <App selectionControl={selectionControl}/>;
+}
+if(embedded){
+ let initialized=false;
+ window.addEventListener('message',e=>{
+  if(e.source!==parent||e.data?.channel!==channel||e.data.type!=='init'||initialized)return;
+  const {data,options={}}=e.data;
+  if(data?.schemaVersion!=='arkgraph-presentation/1'||!data.digest||!Array.isArray(data.nodes))return;
+  initialized=true;root.render(<Hosted data={data} options={options}/>);
+ });
+ parent.postMessage({channel,type:'ready'},'*');
+}else{
+ const element=document.getElementById('graphData');
+ if(element){const data=JSON.parse(element.textContent),App=createArkGraphView(data);root.render(<App/>);}
+}

package/ui/arkgraph/experiment-curves.mjs

@@ -0,0 +1,17 @@
+export function curvePoint([a,c,b],t){const s=1-t;return{x:s*s*a.x+2*s*t*c.x+t*t*b.x,y:s*s*a.y+2*s*t*c.y+t*t*b.y};}
+// Route interaction affordances around existing labels; never feed them back into node or label layout.
+export function experimentCurve(a,b,rectangles,index,unit,labelSize={w:80,h:80}){
+ const dx=b.x-a.x,dy=b.y-a.y,length=Math.hypot(dx,dy)||1,nx=-dy/length,ny=dx/length;
+ let best=null,score=Infinity;
+ for(const amount of [35,-35,65,-65,100,-100,145,-145,200,-200,260,-260,340,-340,440,-440,560,-560]){
+  for(const along of [0,-70,70,-150,150,-240,240,-340,340]){
+  const bend=amount*unit,shift=along*unit,c={x:(a.x+b.x)/2+nx*bend+dx/length*shift,y:(a.y+b.y)/2+ny*bend+dy/length*shift},p=[a,c,b],m=curvePoint(p,.5);
+  const hit=(q,pad)=>rectangles.some(r=>q.x>=r.x-pad&&q.x<=r.x+r.w+pad&&q.y>=r.y-pad&&q.y<=r.y+r.h+pad);
+  let cost=Math.abs(amount)*.08+Math.abs(along)*.025+(Math.sign(amount)===(index%2?-1:1)?0:2);
+  for(let t=.12;t<.9;t+=.08)if(hit(curvePoint(p,t),2*unit))cost+=12;
+  if(rectangles.some(r=>m.x-labelSize.w*unit/2<r.x+r.w&&m.x+labelSize.w*unit/2>r.x&&m.y-labelSize.h*unit/2<r.y+r.h&&m.y+labelSize.h*unit/2>r.y))cost+=1000000;
+  if(cost<score){score=cost;best=p;}
+  }
+ }
+ return best;
+}

package/ui/arkgraph/experiment-selection.mjs

@@ -0,0 +1,15 @@
+export function createExperimentSelection(D){return {D,experiments:D.experiments??[]};}
+export function selectedExperimentScope(model,ids){
+ const byId=new Map(model.experiments.map(e=>[e.id,e])),nodes=new Map(model.D.nodes.map(n=>[n.key,n]));
+ const chosen=new Set(),visiting=new Set();
+ const visit=id=>{if(chosen.has(id))return;if(visiting.has(id))throw Error('实验依赖存在循环');const e=byId.get(id);if(!e)throw Error('实验依赖不可用');visiting.add(id);for(const dependency of e.requiredProcedureKeys)visit(dependency);visiting.delete(id);chosen.add(id);};
+ ids.forEach(visit);const experiments=[...chosen].map(id=>byId.get(id));
+ const stepIds=[...new Set(experiments.flatMap(e=>e.stepKeys))];
+ const operations=stepIds.map(id=>({id,title:nodes.get(id)?.label??id,methodRef:id,experimentIds:experiments.filter(e=>e.stepKeys.includes(id)).map(e=>e.id)}));
+ const resources=[...new Set(experiments.flatMap(e=>e.inputKeys))].filter(id=>!byId.has(id));
+ return {experiments,operations,resources,nodeIds:[...new Set(experiments.flatMap(e=>e.contextNodeIds))],addedIds:[...chosen].filter(id=>!ids.includes(id)),gaps:experiments.flatMap(e=>e.unresolvedInputs.map(r=>`缺少输入：${r.ref}`))};
+}
+export function experimentDraft(model,ids){
+ const scope=selectedExperimentScope(model,ids);
+ return {artifactDigest:model.D.digest,procedures:scope.experiments.map(e=>({ref:e.procedure.ref,digest:e.procedure.digest}))};
+}

package/ui/arkgraph/experiment-style.css

@@ -0,0 +1,26 @@
+/* Add selection affordances to the existing ArkGraph shell; keep its layout and typography. */
+.reference-app .experiment-toggle{font-size:12px;gap:6px;border:0;background:transparent;color:#616161;padding:7px 10px;display:flex;align-items:center;white-space:nowrap;border-radius:8px}.reference-app .experiment-toggle.active{color:#1976D2;background:#E3F2FD}.experiment-toggle span{font-size:10px;border-radius:8px;background:#E3F2FD;color:#1976D2;padding:1px 5px}.experiment-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}.experiment-edge-group{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:5px 7px 5px 9px;border-radius:9px;background:#FAFAFA;box-shadow:0 2px 12px #00000008;pointer-events:auto;transition:background .15s,box-shadow .15s}.experiment-edge-group[data-hovered=true]{background:#E3F2FD;box-shadow:0 3px 14px #1976D212}.experiment-edge-label{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:nowrap;cursor:pointer;text-align:left}.experiment-edge-label>span{font:500 10.5px/1.35 -apple-system,"PingFang SC",sans-serif;color:#1976D2}.experiment-edge-label>small{font:400 9px/1.3 -apple-system,"PingFang SC",sans-serif;color:#757575}.experiment-edge-pick{flex:none;width:22px;height:22px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#E3F2FD;color:#1976D2;cursor:pointer;font:500 15px/1 -apple-system,sans-serif}.experiment-edge-pick[aria-pressed=true]{background:#1E88E5;color:#FFFFFF}.experiment-edge-label:focus-visible,.experiment-edge-pick:focus-visible{outline:2px solid #1976D2;outline-offset:3px}.experiment-edge-pick span{pointer-events:none}.experiment-dock{position:absolute;bottom:82px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;width:min(470px,calc(100% - 40px));border-radius:14px;background:#FFFFFF;box-shadow:0 6px 26px #0000000D;z-index:7}.experiment-dock-copy{display:flex;flex-direction:column;gap:5px}.experiment-dock-copy b{font-size:12px;font-weight:550;color:#424242}.experiment-dock-copy small{font-size:10px;color:#757575}.experiment-dock>div:last-child{display:flex;align-items:center;gap:12px;white-space:nowrap}.experiment-clear{border:0;background:transparent;padding:4px;color:#757575;font-size:11px}.experiment-review{background:#1976D2;color:#FFFFFF;border:0;padding:10px 12px;border-radius:8px;font-size:11px;cursor:pointer}.experiment-review:disabled{opacity:.35;cursor:default}.experiment-reminder{position:absolute;right:24px;bottom:82px;border:0;background:#E3F2FD;color:#1976D2;border-radius:9px;padding:10px 14px;font-size:12px;z-index:7}.reference-app.detail-open .experiment-dock{left:22px;right:420px;width:auto;transform:none;gap:12px}.reference-app.detail-open .experiment-reminder{display:none}.exp-source{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:0;background:#FAFAFA;border-radius:9px;padding:11px 12px;margin:7px 0;color:#424242;cursor:pointer}.exp-source>span:first-child{display:flex;flex-direction:column;gap:4px}.exp-source b{font-size:12px;font-weight:500;line-height:1.6}.exp-source small{font-size:10px;color:#757575;line-height:1.5}.exp-source>span:last-child{color:#9E9E9E}.exp-source:hover{background:#F5F5F5}.exp-source.selected{background:#E3F2FD}.exp-relation{margin:22px 0 16px}.exp-relation-arrow{text-align:center;font-size:10px;color:#757575;padding:5px}.exp-primary{width:100%;border:0;border-radius:9px;background:#1976D2;color:#FFFFFF;padding:12px;font-size:12px;cursor:pointer;margin:10px 0}.exp-primary.chosen{background:#E3F2FD;color:#1976D2}.exp-primary:disabled{opacity:.4;cursor:default}.exp-step-group h4{font-size:11px;color:#757575;margin:15px 0 9px;font-weight:500}.exp-steps{padding:0 0 0 8px;list-style:none;margin:0}.exp-steps li{position:relative;border-left:1px solid #E0E0E0;padding-left:20px}.exp-steps li:last-child{border-color:transparent}.exp-steps li:before{content:'';position:absolute;left:-4px;top:16px;width:7px;height:7px;border-radius:50%;background:#BDBDBD}.exp-steps li:last-child:before{background:#1976D2}.exp-steps button{width:100%;display:flex;justify-content:space-between;gap:10px;border:0;background:none;padding:11px 0;text-align:left;cursor:pointer}.exp-steps b{font-size:12px;color:#616161;font-weight:500}.exp-steps small{font-size:10px;color:#757575}.exp-decisions{list-style:none;padding:0}.exp-decisions li{font-size:12px;color:#616161;line-height:1.8;padding-left:13px;position:relative;margin:8px 0}.exp-decisions li:before{content:'·';position:absolute;left:0;color:#1976D2}.exp-note{font-size:11px;line-height:1.8;color:#757575}.exp-estimates{display:flex;gap:28px;padding:15px 0}.exp-estimates span{display:flex;flex-direction:column;gap:5px;color:#757575;font-size:10px}.exp-estimates b{font-size:12px;color:#616161;font-weight:500}.exp-status{color:#00897B;font-size:11px;line-height:1.7}.exp-raw{font-size:11px;margin:14px 0;color:#757575}.exp-raw pre{max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#FAFAFA;padding:12px;font-size:10px}.experiment-inspector .drawer-body section{margin:24px 0}.experiment-inspector .drawer-body h3{font-size:12px}.experiment-inspector .drawer-body h3 small{color:#9E9E9E;font-size:10px}.experiment-inspector .drawer-top>span{font-size:11px;color:#757575}.experiment-inspector .drawer-body h2{font-size:22px}.experiment-inspector .drawer-body .lead{font-size:13px;line-height:1.8}
+@media(max-width:780px){.reference-app .experiment-toggle{padding:7px 8px;font-size:11px}.reference-app .toolbar{max-width:calc(100% - 32px)}.experiment-dock{bottom:80px;padding:13px;width:calc(100% - 32px);gap:8px}.experiment-dock-copy b{font-size:11px}.experiment-dock-copy small{font-size:9px}.experiment-dock>div:last-child{gap:8px}.reference-app.detail-open .experiment-dock{display:none}.experiment-reminder{bottom:80px;right:16px}.reference-app .paper-card h1{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
+
+.exp-comparison{margin:16px 0 7px;padding:13px 15px;background:#FAFAFA;border-radius:10px}.exp-cohort{display:block;color:#757575;font-size:10px;text-align:center}.exp-compare-models{display:flex;align-items:center;justify-content:space-around;padding:15px 0}.exp-compare-models>span{display:flex;flex-direction:column;gap:5px;color:#757575;font-size:10px;text-align:center}.exp-compare-models b{font-size:14px;color:#424242;font-weight:550}.exp-compare-models .exp-compare-arrow{color:#9E9E9E;font-size:17px}.exp-compare-metric{display:flex;justify-content:center;gap:10px;font-size:10px;color:#757575;padding-top:8px;border-top:1px solid #EEEEEE}.exp-compare-metric b{font-weight:500;color:#1976D2}.exp-evidence{margin:13px 0;font-size:11px;color:#757575}.exp-evidence summary{cursor:pointer}.exp-evidence .exp-relation{margin-top:12px}.experiment-inspector .drawer-body h2{font-size:21px;line-height:1.5}
+@media(prefers-reduced-motion:reduce){.experiment-edge-group{transition:none}}
+
+/* One continuous plus-to-check gesture, including interrupted and reverse toggles. */
+.selection-mark{display:block;flex:none;width:16px;height:16px;overflow:visible;pointer-events:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
+.selection-mark path{transition:d 460ms cubic-bezier(.22,1.28,.36,1)}
+.selection-mark-short{d:path("M5 12 L19 12")}
+.selection-mark-long{d:path("M12 19 L12 5");transition-delay:20ms}
+.selection-mark[data-selected=true] .selection-mark-short{d:path("M6 12 L10 16")}
+.selection-mark[data-selected=true] .selection-mark-long{d:path("M10 16 L18 8")}
+.experiment-edge-pick{transition:background-color 340ms cubic-bezier(.22,.61,.36,1),color 340ms cubic-bezier(.22,.61,.36,1),transform 420ms cubic-bezier(.22,1.28,.36,1);-webkit-tap-highlight-color:transparent}
+.experiment-edge-pick[aria-pressed=true]{transform:scale(1.035)}
+@media(hover:hover){.experiment-edge-pick:hover{transform:scale(1.1)}}
+.experiment-edge-pick:active{transform:scale(.9);transition-duration:90ms}
+.exp-selection-button{display:flex;align-items:center;justify-content:center;gap:7px;transition:background-color 340ms cubic-bezier(.22,.61,.36,1),color 340ms cubic-bezier(.22,.61,.36,1)}
+.exp-selection-button .selection-mark{width:17px;height:17px}
+@media(prefers-reduced-motion:reduce){.selection-mark path,.experiment-edge-pick,.exp-selection-button{transition:none}.experiment-edge-pick:active,.experiment-edge-pick:hover,.experiment-edge-pick[aria-pressed=true]{transform:none}}
+
+/* Readable route labels share the graph coordinate scale; full questions open in details. */
+.experiment-edge-label{white-space:normal;max-width:190px}.experiment-edge-label>span{font-size:12px;line-height:1.5}
+
+.experiment-edge-pick:disabled{opacity:.4;cursor:default}.exp-selection-button:disabled{opacity:.5;cursor:default}

package/ui/arkgraph/experiment-ui.jsx

@@ -0,0 +1,32 @@
+import React,{useState,useMemo} from 'react';
+import {SelectionMark} from './selection-mark.jsx';
+import {createExperimentSelection,selectedExperimentScope,experimentDraft} from './experiment-selection.mjs';
+export function useExperimentSelection(D,control){
+ const model=useMemo(()=>createExperimentSelection(D),[D]),key='arkgraph-procedures:'+D.digest;
+ const [selecting,setSelecting]=useState(false),[requested,setRequested]=useState(()=>{if(control)return [];try{const draft=JSON.parse(localStorage.getItem(key));return draft?.artifactDigest===D.digest?model.experiments.filter(e=>draft.procedures.some(p=>p.ref===e.procedure.ref&&p.digest===e.procedure.digest)).map(e=>e.id):[];}catch{return[];}}),[saved,setSaved]=useState(false),[error,setError]=useState('');
+ const scope=useMemo(()=>selectedExperimentScope(model,control?control.selected:requested),[model,requested,control]),selected=scope.experiments.map(e=>e.id);
+ const toggle=id=>{if(control){if(!control.locked&&control.selectable.includes(id))control.onToggle(id);return;}setSaved(false);setRequested(old=>selected.includes(id)?old.filter(root=>!selectedExperimentScope(model,[root]).experiments.some(e=>e.id===id)):[...old,id]);};
+ const clear=()=>{if(control){if(!control.locked)control.onClear();return;}setRequested([]);setSaved(false);try{localStorage.removeItem(key);}catch{}};
+ const draft=()=>experimentDraft(model,requested);
+ const save=()=>{try{localStorage.setItem(key,JSON.stringify(draft()));setSaved(true);setError('');}catch{setError('此浏览器无法保存草案。');}};
+ return {controlled:!!control,locked:!!control?.locked,selectable:control?.selectable,model,selecting,setSelecting,selected,toggle,clear,scope,save,saved,error,draft};
+}
+export function ExperimentToolbar({state,onEnter}){return state.model.experiments.length>0&&<button className={'experiment-toggle '+(state.selecting?'active':'')} aria-pressed={state.selecting} onClick={onEnter}>{state.selecting?'完成选择':'选择实验'}{state.selected.length>0&&<span>{state.selected.length}</span>}</button>}
+export function ExperimentDock({state,onReview}){
+ if(!state.selecting)return state.selected.length?<button className="experiment-reminder" onClick={onReview}>{state.selected.length} 项实验已选 <span>→</span></button>:null;
+ return <div className="experiment-dock"><div className="experiment-dock-copy" aria-live="polite"><b>{state.selected.length?`已选 ${state.selected.length} 项实验`:'先看问题，再选择实验'}</b><small>{state.selected.length?`包含 ${state.scope.operations.length} 个必要步骤`:'点问题看比较方式 · ＋ 加入范围'}</small></div><div>{state.selected.length>0&&<button className="experiment-clear" onClick={state.clear}>清空</button>}<button className="experiment-review" disabled={!state.selected.length} onClick={onReview}>查看范围 →</button></div></div>;
+}
+export function createExperimentPanel({byKey,Icon,recordLabel}){
+ return function ExperimentPanel({state,selection,onClose,onOpenRecord,onOpenExperiment,expanded,onExpand}){
+  const current=state.model.experiments.find(e=>e.id===selection.id),review=selection.kind==='experiment-scope',local=current?selectedExperimentScope(state.model,[current.id]):state.scope;
+  const sources=ids=>ids.map(id=>{const node=byKey.get(id);return node&&<button className="exp-source" key={id} onClick={()=>onOpenRecord(id)}><span><b>{recordLabel(node)}</b><small>{node.source}</small></span><span>↗</span></button>});
+  return <aside className="inspector experiment-inspector"><div className="drawer-top"><span>{review?'实验范围':'候选实验'}</span><div className="drawer-actions"><button className="detail-resize" aria-label={expanded?'缩小详情，显示图谱':'展开详情'} onClick={onExpand}><Icon name={expanded?'minimize':'maximize'} size={17}/></button><button aria-label="关闭详情" onClick={onClose}><Icon name="close" size={18}/></button></div></div><div className="drawer-body" key={selection.id}>
+  {review?<><h2>本次选择的实验</h2><p className="lead">{local.experiments.length} 项实验，共用 {local.operations.length} 个科研步骤。</p>{local.experiments.map(e=><button key={e.id} className="exp-source selected" onClick={()=>onOpenExperiment(e.id)}><b>{e.question}</b><span>↗</span></button>)}</>:<><h2>{current.question}</h2><p className="lead">{current.summary}</p>{current.criterion&&<section><h3>观察与判断</h3><p>{current.criterion}</p></section>}<button disabled={state.locked||(state.selectable&&!state.selectable.includes(current.id))} className={'exp-primary exp-selection-button '+(state.selected.includes(current.id)?'chosen':'')} aria-pressed={state.selected.includes(current.id)} onClick={()=>{state.setSelecting(true);state.toggle(current.id)}}><SelectionMark selected={state.selected.includes(current.id)}/><span>{state.selected.includes(current.id)?'已选择 · 移出范围':'选择这项实验'}</span></button><details className="exp-evidence"><summary>原文依据与目标</summary>{sources([...new Set([current.source,...current.targetKeys])])}</details></>}
+  {!review&&!!current.limitations?.length&&<section><h3>待核对条件</h3>{current.limitations.map((text,i)=><p key={i}>{text}</p>)}</section>}
+  {!!local.operations.length&&<section><h3>包含的必要步骤</h3><ol className="exp-steps">{local.operations.map(o=><li key={o.id}><button onClick={()=>onOpenRecord(o.methodRef)}><b>{o.title}</b>{o.experimentIds.length>1&&<small>{o.experimentIds.length} 项实验共用</small>}</button></li>)}</ol></section>}
+  {!!local.resources.length&&<section><h3>实验材料 <small>{local.resources.length}</small></h3>{sources(local.resources)}</section>}
+  {!!local.gaps.length&&<section><h3>待明确的输入</h3>{local.gaps.map(g=><p key={g}>{g}</p>)}</section>}
+  {review&&!state.controlled&&<><p className="exp-note">保存选择后，正式执行前仍需确认资源与费用。</p><button className="exp-primary" disabled={!state.selected.length} onClick={state.save}>{state.saved?'已保存到此浏览器':'保存实验范围'}</button>{state.error&&<p role="alert">{state.error}</p>}</>}
+  </div></aside>;
+ };
+}

package/ui/arkgraph/frame.html

@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ArkGraph</title></head><body><div id="root"></div><script src="boot.js"></script></body></html>