@arcfold/dsh-method-ui 0.0.0-stage → 0.4.0

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "@arcfold/dsh-method-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.4.0",
+  "type": "module",
+  "main": "./src/index.mjs",
+  "exports": {
+    ".": "./src/index.mjs",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-renderer",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-file-upload",
+        "@deepseek-ai/dsh-client-ui-sidebar"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "4.1.0",
+    "@deepseek-ai/dsh-typert-protocol": "0.2.2-rc.1",
+    "react": "18.3.1"
+  },
+  "files": [
+    "src",
+    "lib",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "license": "MIT"
+}

package/src/Brand.mjs

@@ -0,0 +1,17 @@
+import React from 'react';
+
+// Visuals only: the native parent owns navigation, permissions and focus.
+export function BrandMark({ size = 24, className }) {
+  return React.createElement('svg', { width: size, height: size, viewBox: '0 0 32 32',
+    className, fill: 'none', 'aria-hidden': true, focusable: false,
+    style: { flexShrink: 0, color: 'inherit' } },
+    React.createElement('path', { d: 'M5 26 16 5l11 21M10 19h12M16 5v21',
+      stroke: 'currentColor', strokeWidth: 2.4, strokeLinecap: 'round', strokeLinejoin: 'round' }));
+}
+export function BrandName() { return React.createElement('span', null, 'Arcfold'); }
+export function installBrand(ctx) {
+  for (const [name, component] of [
+    ['sidebar.brand.mark', BrandMark], ['sidebar.brand.name', BrandName],
+    ['conversation.hero.brand.mark', BrandMark],
+  ]) ctx.slots.inject(name, () => ctx.slots.register({ name }, component));
+}

package/src/CollaborationView.mjs

@@ -0,0 +1,56 @@
+import React, { useEffect, useId, useRef, useState } from 'react';
+import { OpportunityDock } from './OpportunityDock.mjs';
+import { MethodDock } from './MethodDock.mjs';
+import { GoalDock } from './GoalDock.mjs';
+import { UnderstandingDock } from './UnderstandingDock.mjs';
+import { ImportDock } from './ImportDock.mjs';
+import { ModelSettings } from './ModelSettings.mjs';
+
+const h = React.createElement;
+function Panels(props) {
+  return h(React.Fragment, null, h(OpportunityDock, props), h(MethodDock, props),
+    h(GoalDock, props), h(UnderstandingDock, props), h(ImportDock, props));
+}
+function Models(props) {
+  return h(ModelSettings, { ...props, onRefresh: props.onModelsRefresh });
+}
+function Dialog({ title, onClose, children, t }) {
+  const ref = useRef(null), titleId = useId();
+  useEffect(() => {
+    const dialog = ref.current;
+    dialog.showModal();
+    return () => { dialog.close(); };
+  }, []);
+  return h('dialog', { ref, className: 'arcfold-dialog', 'aria-labelledby': titleId,
+    onCancel: event => { event.preventDefault(); onClose(); } },
+    h('header', { className: 'arcfold-toolbar' },
+      h('h2', { id: titleId }, title),
+      h('button', { type: 'button', onClick: onClose, autoFocus: true }, t('collaborationClose'))),
+    children);
+}
+export function CollaborationView(props) {
+  const scope = props.useBrowseScope ? props.useBrowseScope(value => value) : { viewScope: 'all', epoch: 0 };
+  const [modelsOpen, setModelsOpen] = useState(false);
+  useEffect(() => { setModelsOpen(false); }, [props.opportunitySessionId]);
+  return h('section', { className: 'arcfold-view', 'aria-label': props.t('collaborationTitle') },
+    h('header', { className: 'arcfold-toolbar' },
+      h('h2', null, props.t('collaborationTitle')),
+      h('button', { type: 'button', onClick: () => props.onOpenModels ? props.onOpenModels() : setModelsOpen(true) }, props.t('modelsTitle'))),
+    h('div', { className: 'arcfold-view-scope', role: 'group', 'aria-label': props.t('collaborationViewScope') },
+      ['all', 'current'].map(viewScope => h('button', { key: viewScope, type: 'button',
+        'aria-pressed': scope.viewScope === viewScope,
+        onClick: () => props.onViewScopeChange?.(viewScope) }, props.t(viewScope === 'all' ? 'collaborationAll' : 'collaborationCurrent')))),
+    h(Panels, { ...props, viewScope: scope.viewScope, key: `${props.opportunitySessionId}:${scope.epoch}` }),
+    modelsOpen && h(Dialog, { title: props.t('modelsTitle'), t: props.t, onClose: () => setModelsOpen(false) }, h(Models, props)));
+}
+export function CollaborationHero(props) {
+  const [panel, setPanel] = useState(null);
+  // A session switch must not carry an open dialog or unfinished draft forward.
+  useEffect(() => { setPanel(null); }, [props.opportunitySessionId]);
+  return h('div', { className: 'arcfold-hero-entry' },
+    h('button', { type: 'button', onClick: () => setPanel('collaboration') }, props.t('collaborationTitle')),
+    h('button', { type: 'button', onClick: () => setPanel('models') }, props.t('modelsTitle')),
+    panel && h(Dialog, { title: props.t(panel === 'models' ? 'modelsTitle' : 'collaborationTitle'),
+      t: props.t, onClose: () => setPanel(null) },
+      panel === 'models' ? h(Models, props) : h(CollaborationView, { ...props, onOpenModels: () => setPanel('models') })));
+}

package/src/DesktopModels.mjs

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+const h = React.createElement, REF = 'DEEPSEEK_API_KEY';
+
+/** Secrets stay in this local input until submitted to DSH's credential API. */
+export function DesktopModels({ rpc }) {
+  const [info, setInfo] = useState(null), [secret, setSecret] = useState('');
+  const [busy, setBusy] = useState(false), [message, setMessage] = useState('');
+  async function refresh() {
+    const result = await rpc.call('/api', 'credentials/describe', { args: { refs: [REF] } });
+    if (result?.ok !== true) throw new Error('无法读取密钥状态。');
+    const value = result.value?.[REF];
+    setInfo({ configured: value?.configured === true, writable: value?.writable === true });
+  }
+  useEffect(() => { let active = true;
+    void rpc.call('/api', 'credentials/describe', { args: { refs: [REF] } }).then(result => {
+      if (!active) return;
+      if (result?.ok !== true) throw new Error('unavailable');
+      const value = result.value?.[REF]; setInfo({ configured: value?.configured === true, writable: value?.writable === true });
+    }).catch(() => { if (active) setMessage('无法读取密钥状态，请稍后重试。'); });
+    return () => { active = false; };
+  }, [rpc]);
+  async function save() {
+    if (!info?.writable || !secret.trim() || busy) return;
+    setBusy(true); setMessage('正在保存…');
+    try {
+      const result = await rpc.call('/api', 'credentials/set', { args: { ref: REF, value: secret } });
+      if (result?.ok !== true) throw new Error('unconfirmed');
+      await refresh(); setMessage('已保存到 Desktop 的凭据服务。');
+    } catch { setMessage('保存结果尚未确认，请刷新状态后再决定。'); }
+    finally { setSecret(''); setBusy(false); }
+  }
+  return h('section', { className: 'arcfold-desktop-setup' }, h('h2', null, 'DeepSeek'),
+    h('p', null, '密钥由 DSH 统一保存和使用；Arcfold 不把密钥写进自身数据或费用记录。'),
+    h('p', null, !info ? '正在读取密钥状态…' : info.configured ? 'DeepSeek 密钥已配置。' : '尚未配置 DeepSeek 密钥。'),
+    h('label', null, 'DeepSeek API 密钥', h('input', { type: 'password', autoComplete: 'off', value: secret,
+      disabled: !info?.writable || busy, onChange: event => setSecret(event.target.value) })),
+    h('button', { type: 'button', disabled: !info?.writable || !secret.trim() || busy, onClick: () => void save() }, '保存密钥'),
+    h('button', { type: 'button', disabled: busy, onClick: () => void refresh().catch(() => setMessage('无法读取密钥状态。')) }, '刷新状态'),
+    message && h('p', { role: 'status' }, message));
+}

package/src/DesktopSetup.mjs

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+
+const h = React.createElement;
+export function DesktopSetup({ initial, rpc, openWorkspace }) {
+  const [info, setInfo] = useState(initial), [checked, setChecked] = useState(false);
+  const [busy, setBusy] = useState(false), [message, setMessage] = useState('');
+  async function refresh() {
+    const reply = await rpc.call('/api', 'arcfoldDesktop/status', { args: { request: {} } });
+    if (reply?.ok !== true) throw new Error('无法读取设置状态。');
+    setInfo(reply.value); return reply.value;
+  }
+  async function open(path) {
+    if (typeof openWorkspace !== 'function') throw new Error('DSH 工作区服务尚未就绪。');
+    await openWorkspace(path); globalThis.location.reload();
+  }
+  async function start() {
+    if (!checked || busy) return;
+    setBusy(true); setMessage('正在创建独立数据并启动 Arcfold…');
+    let initialized = false;
+    try {
+      const result = await rpc.call('/api', 'arcfoldDesktop/start', { args: { request: { confirmed: true } } });
+      if (result?.ok !== true) throw new Error('设置结果尚未确认。');
+      setInfo(result.value);
+      if (result.value?.state === 'ready') { initialized = true; setMessage('设置完成，正在打开独立工作区。'); await open(result.value.workspace); return; }
+      setMessage('设置尚未完成，请查看当前状态。');
+    } catch { setMessage(initialized ? '设置已完成，但工作区未能打开。请重试打开工作区。' : '设置结果尚未确认，请刷新状态，不要重复提交。'); try { await refresh(); } catch {} }
+    finally { setBusy(false); }
+  }
+  const refreshButton = h('button', { type: 'button', onClick: () => void refresh().catch(() => setMessage('无法读取设置状态。')) }, '刷新状态');
+  if (info.state !== 'needs_setup') return h('section', { className: 'arcfold-desktop-setup' },
+    h('h2', null, 'Arcfold 设置'), h('p', null, info.state === 'configured' ? '正在读取已保存的设置。' :
+      info.state === 'ready' ? 'Arcfold 已就绪。' : 'Arcfold 尚未完成启动，请保留已有数据并检查设置。'),
+    info.activationError && h('p', { role: 'alert' }, info.activationError), message && h('p', { role: 'status' }, message),
+    info.state === 'ready' && h('button', { type: 'button', disabled: busy, onClick: () => { setBusy(true); void open(info.workspace).catch(() => setMessage('无法打开工作区，请稍后重试。')).finally(() => setBusy(false)); } }, '打开 Arcfold 工作区'), refreshButton);
+  return h('section', { className: 'arcfold-desktop-setup' },
+    h('h2', null, '开始使用 Arcfold'),
+    h('p', null, 'Arcfold 会在 Desktop 中保存独立的目标、经历和费用记录。其他版本已有的数据不会自动导入。'),
+    h('p', null, '工作区：', h('code', null, info.workspace)),
+    h('p', null, '数据位置：', h('code', null, info.dataRoot)),
+    h('p', null, '主对话和与其相关的后台处理使用当前对话选择的模型；不同后台任务保留各自的思考设置。完成后可在“设置 → 模型”中配置 DeepSeek 密钥。'),
+    h('p', null, '跨多段对话自动整理时，使用最新相关对话的模型；没有关联对话时使用默认模型。'),
+    h('p', null, '模型服务会产生费用。这里记录请求和估算费用，但不设本地消费上限；实际扣费以服务商为准。'),
+    h('p', null, '当前估算价格资料核对日期：', info.priceReviewedAt, '。'),
+    h('button', { type: 'button', 'aria-pressed': checked, onClick: () => setChecked(value => !value) },
+      checked ? '已确认：模型调用可能产生费用，本机不设消费上限' : '确认：模型调用可能产生费用，本机不设消费上限'),
+    h('div', null, h('button', { type: 'button', disabled: !checked || busy, onClick: () => void start() }, busy ? '正在设置…' : '创建并开始'), ' ', refreshButton),
+    message && h('p', { role: 'status' }, message));
+}

package/src/GoalDock.mjs

@@ -0,0 +1,130 @@
+import { presentationLabel } from './locales.mjs';
+import { GoalWorkList } from './GoalWorkList.mjs';
+import React, { useRef, useState } from 'react';
+const h = React.createElement;
+const content = value => typeof value === 'string' ? value : value?.content ?? '';
+const version = goal => JSON.stringify([goal.id, goal.revision, goal.definitionVersion]);
+
+function GoalCard({ detail, works, canDiscuss, onGoalDiscuss, onGoalRefresh, onAction, workBusy, t }) {
+  const goal = detail.goal, allowed = detail.availability?.allowed === true;
+  const [draft, setDraft] = useState(''), [draftVersion, setDraftVersion] = useState(null);
+  const [busy, setBusy] = useState(false), [error, setError] = useState(null), [notice, setNotice] = useState(null);
+  const pending = useRef(false), retryIds = useRef(new Map());
+  const staleDraft = Boolean(draft && draftVersion !== version(goal));
+  async function discuss() {
+    if (pending.current || !draft.trim() || staleDraft || !canDiscuss || !(allowed || detail.repairAllowed)) return;
+    const request = { goalId: goal.id, expectedRevision: goal.revision, definitionVersion: goal.definitionVersion,
+      mode: allowed ? 'discuss' : 'repair', text: draft };
+    const key = JSON.stringify(request);
+    if (!retryIds.current.has(key)) retryIds.current.set(key, globalThis.crypto.randomUUID());
+    request.requestId = retryIds.current.get(key);
+    pending.current = true; setBusy(true); setError(null); setNotice(null);
+    try {
+      const result = await onGoalDiscuss(request), admission = result.binding?.admission?.state;
+      setNotice(t(admission === 'accepted' ? 'goalAccepted' : admission === 'failed' ? 'goalFailed' : 'goalUnknown'));
+      await onGoalRefresh();
+    } catch (failure) {
+      setError(failure.remote ? failure.message : `${failure.message || t('failed')} ${t('goalUnknown')}`);
+      if (['revision_conflict', 'goal_source_invalid', 'goal_unavailable'].includes(failure.code)) await onGoalRefresh();
+    } finally { pending.current = false; setBusy(false); }
+  }
+  const text = (key, value) => h('div', { key, className: 'text' }, content(value));
+  const label = (kind, value) => presentationLabel(kind, value, t);
+  return h('article', { className: 'goal-card', id: `arcfold-goal-${goal.id}`, 'aria-label': goal.title || t('goalUnavailable') },
+    h('header', { className: 'goal-card-heading' }, h('h3', null, goal.title || t('goalUnavailable')),
+      h('span', { className: 'goal-status-badge' }, label('goal', goal.status))),
+    detail.browse?.related === false && h('p', { className: 'meta' }, t('browseReturnToOrigin')),
+    !allowed && h('p', { role: 'alert' }, detail.availability?.message || t('goalUnavailable')),
+    allowed && h('div', { className: 'goal-outcome text' }, content(goal.outcome)),
+    h('div', { className: 'goal-card-section' },
+      works.length ? h(GoalWorkList, { works, title: t('goalCurrentWork'), onAction, busy: workBusy, t })
+        : h(React.Fragment, null, h('h4', null, t('goalCurrentWork')), h('p', { className: 'meta' }, t('goalNoCurrentWork')))),
+    allowed && h('div', { className: 'goal-card-section goal-progress' },
+      h('h4', null, t('goalProgress')),
+      text('progress', detail.coverage?.progressUnavailable > 0 ? t('goalProgressUnavailable') : content(goal.progress) || t('goalNoProgress'))),
+    h('details', { className: 'goal-card-evidence' }, h('summary', null, t('goalEvidence')),
+      h('p', { className: 'meta' }, `${t('goalDefinition')} ${goal.definitionVersion} · ${t('revision')} ${goal.revision}`),
+      allowed && h(React.Fragment, null,
+        h('h4', null, t('goalRelations')),
+        !(detail.relations || []).length && h('p', { className: 'meta' }, t('goalNoRelations')),
+        (detail.relations || []).map((item, index) => h('p', { className: 'meta', key: index },
+          `${label('relation', item.type)} · ${item.targetId} · ${item.state === 'needs_review' ? t('goalRelationReview') : item.state === 'unavailable' ? t('goalRelationUnavailable') : ''}`)),
+        h('h4', null, t('sources')),
+        (detail.sources || []).map(source => h('div', { className: 'source', key: source.id },
+          h('p', { className: 'meta' }, `${source.id} · ${label('role', source.role)} · ${t('revision')} ${source.revision} · ${source.occurredAt || ''}`),
+          text('content', source.content), h('p', { className: 'meta' }, JSON.stringify(source.provenance || null))))),
+      (detail.links || []).map(link => h('div', { className: 'source', key: link.id },
+        h('p', { className: 'meta' }, `${link.sessionId} · ${t('turn')} ${link.turn} · ${t('goalDefinition')} ${link.definitionVersion} · ${label('outcome', link.outcome?.outcome ?? 'pending')} · ${t('goalUnassessed')}`),
+        h('p', { className: 'meta' }, t('goalContribution')),
+        text('contribution', link.contribution?.available === true ? link.contribution.reason : t('goalContributionUnavailable')))),
+      !(detail.links || []).length && !works.length && h('p', { className: 'meta' }, t('goalNoLinks')),
+      (detail.discussions || []).length > 0 && h('div', null,
+        h('h4', null, `${t('goalHistory')} · ${detail.discussions.length}/${detail.discussionsTotal ?? detail.discussions.length}`),
+        detail.discussions.map(item => h('div', { className: 'source', key: item.id },
+          h('p', { className: 'meta' }, `${item.requestId} · ${t('goalAdmission')}: ${label('admission', item.admission?.state ?? 'unknown')}`),
+          text('submitted', item.content?.map(part => part.text || '').join('') || ''),
+          item.admission?.state !== 'accepted' && h('p', null, t('goalUnknown')))))),
+    (allowed || detail.repairAllowed) && h('details', { className: 'goal-discussion' },
+      h('summary', null, t('goalCorrection')),
+      h('p', { className: 'meta' }, t(allowed ? 'goalDiscussHelp' : 'goalRepairHelp')),
+      !canDiscuss && h('p', { className: 'meta' }, t('goalMainRequired')),
+      staleDraft && h('p', { role: 'alert' }, t('goalDraftChanged')),
+      error && h('p', { role: 'alert' }, error), notice && h('p', { role: 'status' }, notice),
+      h('label', null, t('goalDiscussLabel'), h('textarea', { value: draft, maxLength: 24000, disabled: busy,
+        onChange: event => { setDraft(event.target.value); setDraftVersion(version(goal)); } })),
+      h('button', { type: 'button', onClick: () => { void discuss(); }, disabled: busy || staleDraft || !draft.trim() || !canDiscuss },
+        t(allowed ? 'goalDiscuss' : 'goalRepair'))));
+}
+
+export function GoalDock({ useGoals, onGoalDiscuss, onGoalStopWork, onGoalResumeWork, onGoalRefresh, onGoalPage, t }) {
+  const state = useGoals(value => value);
+  const [expanded, setExpanded] = useState(false), [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null), [notice, setNotice] = useState(null);
+  const pending = useRef(false), retryIds = useRef(new Map());
+  async function controlWork(action, work) {
+    const control = action === 'resume' ? onGoalResumeWork : onGoalStopWork;
+    if (pending.current || !control) return;
+    const request = { workId: work.id, nativeGoalId: work.nativeGoalId, nativeRevision: work.nativeRevision };
+    const key = JSON.stringify({ action, ...request });
+    if (!retryIds.current.has(key)) retryIds.current.set(key, globalThis.crypto.randomUUID());
+    request.requestId = retryIds.current.get(key);
+    pending.current = true; setBusy(true); setError(null); setNotice(null);
+    try {
+      const result = await control(request);
+      if (result?.state === 'applied') {
+        retryIds.current.delete(key); setNotice(t(action === 'resume' ? 'goalWorkResumed' : 'goalWorkStopped'));
+      } else setNotice(t('goalWorkUnknown'));
+    } catch (failure) {
+      if (failure.remote) retryIds.current.delete(key);
+      setError(`${failure.message || t('failed')}${failure.remote ? '' : ` ${t('goalWorkUnknown')}`}`);
+      await onGoalRefresh();
+    } finally { pending.current = false; setBusy(false); }
+  }
+  // The existing list read already includes full goal details and related work.
+  // Keep one card per goal; no second detail fetch or duplicate goal navigation.
+  const works = [...new Map([...state.items.flatMap(item => item.works || []), ...(state.works || [])]
+    .map(work => [work.id, work])).values()];
+  const belongs = (work, id) => work.relation?.state === 'current' && work.relation.goalId === id;
+  const others = works.filter(work => !state.items.some(item => belongs(work, item.goal.id)));
+  const button = (label, action, disabled = false, props = {}) => h('button', { type: 'button', disabled,
+    onClick: () => { void action(); }, ...props }, label);
+  return h('section', { className: 'arcfold-methods arcfold-goals', 'aria-label': t('goalTitle') },
+    h('header', null, h('strong', null, `${t('goalTitle')} · ${state.total}`),
+      button(expanded ? t('goalHide') : t('goalOpen'), () => setExpanded(!expanded), false, { 'aria-expanded': expanded }),
+      button(t('refresh'), onGoalRefresh)),
+    state.loading && h('p', { role: 'status' }, t('goalLoading')),
+    state.error && h('p', { role: 'alert' }, state.error),
+    // Collapsing the panel preserves unsent drafts and each card's request identity.
+    h('div', { className: 'detail', hidden: !expanded },
+      h('p', { className: 'meta' }, t('goalBoundary')),
+      error && h('p', { role: 'alert' }, error), notice && h('p', { role: 'status' }, notice),
+      h('div', { className: 'goal-cards' }, state.items.map(item => h(GoalCard, { key: item.goal.id, detail: item,
+        works: works.filter(work => belongs(work, item.goal.id)), canDiscuss: state.canDiscuss === true && item.browse?.related !== false,
+        onGoalDiscuss, onGoalRefresh, onAction: controlWork, workBusy: busy, t }))),
+      !state.loading && !state.error && !state.items.length && h('p', null, t('goalEmpty')),
+      others.length > 0 && h('details', { className: 'goal-other-work' },
+        h('summary', null, `${t('goalOtherWork')} · ${others.length}`), h(GoalWorkList, { works: others, onAction: controlWork, busy, t })),
+      (state.offset > 0 || state.nextOffset != null) && h('nav', null,
+        button(t('previous'), () => onGoalPage(Math.max(0, state.offset - 20)), state.offset === 0),
+        button(t('next'), () => onGoalPage(state.nextOffset), state.nextOffset == null))));
+}

package/src/GoalWorkList.mjs

@@ -0,0 +1,52 @@
+import React from 'react';
+const h = React.createElement;
+
+function workStatus(work, t) {
+  if (work.stage) {
+    const keys = { waiting: 'goalStageWaiting', completed: 'goalStageComplete', paused: 'goalWorkPaused', needs_review: 'goalStageReview' };
+    if (Object.hasOwn(keys, work.stage.status)) return t(keys[work.stage.status]);
+  } else if (work.phase === 'active') return t('goalStageReview');
+  if (work.phase === 'active') return t(work.activation === 'armed' ? 'goalWorkEnabled' :
+    work.activation === 'disarmed' ? 'goalWorkDisarmed' : 'presentationUnknown');
+  const keys = { paused: 'goalWorkPaused', blocked: 'goalWorkBlocked', complete: 'goalWorkComplete', cleared: 'goalWorkCleared' };
+  return t(Object.hasOwn(keys, work.phase) ? keys[work.phase] : 'presentationUnknown');
+}
+
+// Arcfold stage decisions and the corresponding native execution are one view.
+export function GoalWorkList({ works = [], title, onAction, busy, t }) {
+  if (!works.length) return null;
+  return h('section', { className: 'goal-work-list', 'aria-label': t('goalWorkTitle') },
+    title && h('h4', null, title),
+    works.map(work => {
+      const relation = work.relation;
+      const linked = relation?.state === 'current';
+      const blocker = work.blockedReason;
+      const reasonKey = ({ 'round-limit': 'goalBlockRoundLimit', 'queue-failed': 'goalBlockQueueFailed',
+        'prompt-rejected': 'goalBlockPromptRejected' })[blocker?.code];
+      return h('div', { className: 'goal-work', key: work.id },
+        h('span', { className: 'goal-status-badge' }, workStatus(work, t)),
+        work.otherSession && h('p', { className: 'meta' }, t('browseReturnToOrigin')),
+        h('p', { className: 'text' }, work.stage?.available === false ? t('goalStageReview') :
+          work.stage?.objective || (linked ? relation.reason : work.objective)),
+        work.stage?.reason && h('p', { className: 'meta' }, work.stage.reason),
+        !relation && h('p', { className: 'meta' }, t('goalWorkUnlinked')),
+        relation && !linked && h('p', { className: 'meta' },
+          t(relation.state === 'needs_review' ? 'goalWorkRelationReview' : 'goalRelationUnavailable')),
+        work.phase === 'blocked' && h('div', { className: 'goal-work-blocker' }, h('h5', null, t('goalBlockReason')),
+          h('p', { className: 'text' }, reasonKey ? t(reasonKey) : blocker?.message || t('goalBlockUnknown'))),
+        work.canStop && onAction && h('button', { type: 'button', disabled: busy,
+          onClick: () => { void onAction('stop', work); } }, t('goalWorkStop')),
+        work.canResume && onAction && h('button', { type: 'button', disabled: busy,
+          onClick: () => { void onAction('resume', work); } }, t('goalWorkResume')),
+        h('details', { className: 'goal-work-details' }, h('summary', null, t('goalWorkOriginal')),
+          h('p', { className: 'text' }, work.stage?.available === false ? t('goalStageReview') : work.stage?.objective || work.objective),
+          work.stage?.doneWhen && h('p', { className: 'text' }, `${t('goalStageDoneWhen')} ${work.stage.doneWhen}`),
+          work.stage?.boundaries && h('p', { className: 'text' }, `${t('goalStageBoundaries')} ${work.stage.boundaries}`),
+          work.phase === 'blocked' && blocker?.message && h('p', { className: 'text' }, blocker.message),
+          h('p', { className: 'meta' }, `${t('goalWorkRounds')} ${work.roundsStarted} / ${work.maxGoalRounds}`),
+          h('p', { className: 'meta' }, t(work.provenance === 'verified-native-delegation' ? 'goalWorkVerified' :
+            work.provenance === 'source-unavailable' ? 'goalWorkSourceUnavailable' : 'goalWorkLegacy')),
+          h('p', { className: 'meta' }, `${work.sessionId} · ${work.nativeGoalId} · ${t('revision')} ${work.nativeRevision}`),
+          relation && h('p', { className: 'meta' }, `${relation.goalId} · ${t('goalDefinition')} ${relation.definitionVersion}`)));
+    }));
+}

package/src/ImportDock.mjs

@@ -0,0 +1,172 @@
+import { importReasonKeys } from './import-locales.mjs';
+import React, { useEffect, useRef, useState } from 'react';
+import { IMPORT_MAX_FILE_BYTES } from './import-source.mjs';
+const h = React.createElement;
+const statusKeys = { preparing:'importPreparingStatus', ready:'importReady', failed:'importFailed', confirmed:'importConfirmed', withdrawn:'importWithdrawn' };
+const eligibilityKeys = { enabled:'importEnabled', trial:'importTrial', paused:'importPaused', history:'importHistory', needs_review:'importNeedsReview' };
+const scopeKeys = { global:'importGlobal', mapped:'importMapped', historical:'importHistoricalScope' };
+export function ImportDock({ useImports, importSessionId, onImportUpload, onImportPrepare, onImportDetails,
+  onImportConfirm, onImportWithdraw, onImportRefresh, onImportPage, t }) {
+  const state = useImports(value => value);
+  const [expanded, expand] = useState(false), [file, setFile] = useState(null), [receipt, setReceipt] = useState(null);
+  const [detail, setDetail] = useState(null), [scope, setScope] = useState(''), [text, setText] = useState(null);
+  const [busy, setBusy] = useState(false), [loading, setLoading] = useState(false), [progress, setProgress] = useState(null);
+  const [error, setError] = useState(''), [notice, setNotice] = useState('');
+  const mounted = useRef(true), generation = useRef(0), pending = useRef(false), identities = useRef(new Map());
+  useEffect(() => { mounted.current = true; return () => { mounted.current = false; generation.current++; }; }, []);
+  useEffect(() => {
+    generation.current++; setDetail(null); setText(null); setReceipt(null); setScope(''); setLoading(false); setProgress(null);
+    setError(''); if (pending.current) setNotice(t('importUnknown'));
+  }, [state.readEpoch]);
+  const current = value => mounted.current && value === generation.current;
+  async function show(batchId, view = 'records', offset = 0, retainNotice = false) {
+    const version = ++generation.current; setLoading(true); setText(null); setDetail(null);
+    if (!retainNotice) { setError(''); setNotice(''); }
+    try {
+      const result = await onImportDetails({ batchId, view, offset, limit: 20 });
+      if (current(version)) { setDetail({ ...result, offset }); setScope(result.batch.scopeMap[0]?.sourceConversationId || ''); }
+    } catch (failure) { if (current(version)) setError(failure.message || t('failed')); }
+    finally { if (current(version)) setLoading(false); }
+  }
+  async function readText(textKey, offset = 0) {
+    if (!detail || pending.current) return;
+    const version = generation.current, batchId = detail.batch.id; setLoading(true); setText(null);
+    try {
+      const result = await onImportDetails({ batchId, view:'text', textKey, offset, limit:16000 });
+      if (current(version)) setText(result);
+    } catch (failure) { if (current(version)) setError(failure.message || t('failed')); }
+    finally { if (current(version)) setLoading(false); }
+  }
+  async function refresh() {
+    const version = generation.current, selected = detail;
+    await onImportRefresh();
+    if (current(version) && selected) await show(selected.batch.id, selected.view, selected.offset, true);
+  }
+  async function prepare(reuse = false) {
+    if (state.canImport === false || pending.current || loading || (!reuse && !file) || (reuse && !receipt)) return;
+    const version = ++generation.current;
+    pending.current = true; setBusy(true); setError(''); setNotice(''); setText(null); setProgress(null);
+    try {
+      let staged = receipt;
+      if (!reuse) {
+        staged = await onImportUpload(file, value => { if (current(version)) setProgress(value); });
+        if (!current(version)) return;
+        setReceipt(staged);
+      }
+      const value = await onImportPrepare({ receiptId: staged.receiptId, requestId:globalThis.crypto.randomUUID(),
+        scopeMap:reuse && scope ? [{ sourceConversationId:scope, targetSessionId:importSessionId }] : [] });
+      if (!current(version)) return;
+      setReceipt({ ...staged, batchId:value.id });
+      await onImportRefresh();
+      if (current(version)) await show(value.id, 'records', 0, true);
+    } catch (failure) {
+      if (current(version)) setError((failure.message || t('failed')) + (failure.remote ? '' : ' ' + t('importUnknown')));
+    } finally { pending.current = false; if (mounted.current) { setBusy(false); setProgress(null); } }
+  }
+  async function decide(action) {
+    const batch = detail?.batch;
+    if (state.canImport === false || detail?.canImport === false || !batch || pending.current || loading) return;
+    const changed = scope !== (batch.scopeMap[0]?.sourceConversationId || '');
+    if (action === 'confirm' && (batch.status !== 'ready' || batch.sessionId !== importSessionId || changed)) return;
+    if (action === 'withdraw' && batch.status !== 'confirmed') return;
+    const version = generation.current;
+    const request = { batchId:batch.id, expectedRevision:batch.revision, previewHash:batch.previewHash };
+    const key = JSON.stringify([action,request]);
+    if (!identities.current.has(key)) identities.current.set(key,globalThis.crypto.randomUUID());
+    request.requestId = identities.current.get(key);
+    pending.current = true; setBusy(true); setError(''); setNotice('');
+    try {
+      const value = await (action === 'confirm' ? onImportConfirm(request) : onImportWithdraw(request));
+      if (!current(version)) return;
+      setNotice(t('importSaved'));
+      await onImportRefresh();
+      if (current(version)) await show(value.id, 'records', 0, true);
+    } catch (failure) {
+      if (current(version)) {
+        setError((failure.message || t('failed')) + (failure.remote ? '' : ' ' + t('importUnknown')));
+        // Only read back. A lost response must never trigger a second mutation.
+        await onImportRefresh();
+        if (current(version)) await show(batch.id, 'records', 0, true);
+      }
+    } finally { pending.current = false; if (mounted.current) setBusy(false); }
+  }
+  const button = (label, action, disabled = false, props = {}) => h('button', { type:'button', disabled,
+    onClick:() => { void action(); }, ...props }, t(label));
+  const body = value => h('div', { className:'text' }, String(value ?? ''));
+  const reason = code => t(importReasonKeys.includes(code) ? 'importReason_' + code : 'importReasonUnrecognized');
+  const role = value => t(['user','assistant','tool','system','material','program'].includes(value) ? 'importRole_' + value : 'importRoleUnknown');
+  const batch = detail?.batch, locked = busy || loading;
+  const actionLocked = locked || state.canImport === false || detail?.canImport === false;
+  const scopeChanged = batch && scope !== (batch.scopeMap[0]?.sourceConversationId || '');
+  const receiptMatches = receipt && batch && receipt.batchId === batch.id;
+  return h('section', { className:'arcfold-methods arcfold-imports', 'aria-label':t('importTitle') },
+    h('header', null, h('strong', null, `${t('importTitle')} · ${state.total}`),
+      button(expanded ? 'importHide' : 'importOpen', () => expand(!expanded), busy, { 'aria-expanded':expanded }),
+      button('refresh', refresh, locked)),
+    expanded && h('div', { className:'detail' },
+      h('p', null, t('importBoundary')),
+      h('label', null, t('importFile'), h('input', { type:'file', accept:'.json,.jsonl,.ndjson,application/json', disabled:actionLocked,
+        onChange:event => {
+          const chosen = event.target.files?.[0] || null; generation.current++; setDetail(null); setText(null); setReceipt(null); setScope(''); setNotice('');
+          const valid = chosen && chosen.size > 0 && chosen.size <= IMPORT_MAX_FILE_BYTES;
+          setFile(valid ? chosen : null); setError(chosen && !valid ? t('importFileTooLarge') : '');
+        } })),
+      button('importPrepare', () => prepare(), actionLocked || !file),
+      busy && h('p', { role:'status' }, t('importWorking'), progress && ` ${progress.loaded.toLocaleString()} / ${file?.size.toLocaleString()} bytes`),
+      h('p', { className:'meta' }, t('importStorage')),
+      (state.loading || loading) && h('p', { role:'status' }, t('importLoading')),
+      (error || state.error) && h('p', { role:'alert' }, error || state.error), notice && h('p', { role:'status' }, notice),
+      h('ul', null, state.items.map(row => h('li', { key:row.id },
+        body(row.file.name), h('p', { className:'meta' }, `${t(statusKeys[row.status])} · ${row.createdAt}`),
+        button('importPreview', () => show(row.id), locked)))),
+      !state.loading && !state.error && !state.items.length && h('p', null, t('importEmpty')),
+      h('nav', null, button('previous', () => onImportPage(Math.max(0,state.offset-20)), locked || !state.offset),
+        button('next', () => onImportPage(state.nextOffset), locked || state.nextOffset == null)),
+      batch && h('article', { 'aria-label':t('importTitle') + ' ' + batch.id },
+        h('h3', null, batch.file.name), h('p', null, t(statusKeys[batch.status])),
+        h('p', { className:'meta' }, t('importSnapshot')),
+        batch.status === 'withdrawn' && h('p', { role:'status' }, t('importWithdrawnNotice')),
+        h('p', { className:'meta' }, `${t('importRevision')} ${batch.revision} · ${batch.file.bytes.toLocaleString()} bytes`),
+        h('details', null, h('summary', null, t('importFileHash')), body(batch.file.sha256)),
+        batch.error && h('p', { role:'alert' }, batch.error.message),
+        h('h4', null, t('importCountsAtPreview')),
+        h('dl', { className:'import-counts' }, Object.entries({ sources:'importCountSources',records:'importCountRecords',enabled:'importEnabled',trial:'importTrial',paused:'importPaused',history:'importHistory',needsReview:'importNeedsReview' }).map(([name,key]) =>
+          h('div', { key:name }, h('dt', null, t(key)), h('dd', null, String(batch.counts[name] ?? 0))))),
+        h('h4', null, t('importScopeTitle')), h('p', { className:'meta' }, t('importScopeHelp')),
+        h('label', null, t('importMapScope'), h('select', { value:scope, disabled:actionLocked || batch.status !== 'ready' || !receiptMatches || batch.sessionId !== importSessionId,
+          onChange:event => setScope(event.target.value) },
+          h('option', { value:'' }, t('importKeepScope')),
+          batch.sourceScopes.map(source => h('option', { key:source.sourceConversationId, value:source.sourceConversationId }, `${source.title || source.sourceConversationId} · ${source.messageCount}`)))),
+        scope && h('p', { className:'text' }, batch.sourceScopes.find(source => source.sourceConversationId === scope)?.preview),
+        scopeChanged && h('p', { role:'status' }, t('importScopeChanged')),
+        batch.status === 'ready' && (receiptMatches ? button('importReprepare', () => prepare(true), actionLocked || !scopeChanged)
+          : h('p', { className:'meta' }, t('importNoReceipt'))),
+        h('nav', null, button('importRecords', () => show(batch.id,'records'), locked), button('importSources', () => show(batch.id,'sources'), locked)),
+        h('p', { className:'meta' }, t('importExcerpt')),
+        h('ul', null, detail.items.map(row => h('li', { key:row.id, className:'source' },
+          row.title && h('h4', null, row.title), body(row.textPreview),
+          row.eligibility && h('p', null, `${t('importEligibilityAtPreview')}：${t(eligibilityKeys[row.eligibility])}`),
+          row.claimType && h('p', null, t({ user_statement:'importClaimLiteral', inference:'importClaimInference', open_question:'importClaimQuestion' }[row.claimType] || 'importClaimInference')),
+          row.kind === 'methods' && h(React.Fragment, null,
+            h('h4', null, t('importAppliesTo')), body(row.appliesTo ?? t('importAttributeUnavailable')),
+            h('h4', null, t('importDoesNotApplyTo')), body(row.doesNotApplyTo ?? t('importAttributeUnavailable'))),
+          row.scope && h('p', { className:'meta' }, t(scopeKeys[row.scope.kind])),
+          row.scope?.topics?.length > 0 && h('p', { className:'meta' }, t('importTopics') + ': ' + row.scope.topics.join(' · ')),
+          row.role && h('p', { className:'meta' }, `${role(row.role)} · ${row.occurredAt || ''} · ${t('importSourceAtPreview')}：${t(row.available ? 'importAvailable' : 'importUnavailable')}`),
+          row.methodUsage && h('p', null, `${t('importUsageAtPreview')}：${t('importUsed')} ${row.methodUsage.trialUses ?? '—'} / ${t('importMaximum')} ${row.methodUsage.maxTrialUses ?? '—'} · ${t('importRemaining')} ${row.methodUsage.remaining ?? '—'}`),
+          row.reasonCodes?.length > 0 && h('details', null, h('summary', null, t('importReason')), body(row.reasonCodes.map(reason).join('\n'))),
+          row.existingRecordId && h('details', null, h('summary', null, t('importExistingRecord')), body(row.existingRecordId)),
+          row.originalTextKey && button('importOriginalRecord', () => readText(row.originalTextKey), locked),
+          row.textKey && button(detail.view === 'sources' ? 'importText' : 'importContent', () => readText(row.textKey), locked)))),
+        h('nav', null, button('previous', () => show(batch.id,detail.view,Math.max(0,detail.offset-20)), locked || !detail.offset),
+          button('next', () => show(batch.id,detail.view,detail.nextOffset), locked || detail.nextOffset == null)),
+        text && h('section', { 'aria-label':t('importTextPage') },
+          h('h4', null, t('importTextPage')), h('p', { className:'meta' }, `${text.offset}–${text.offset+text.text.length} / ${text.total}`), body(text.text),
+          button('importReadPrevious', () => readText(text.textKey,Math.max(0,text.offset-16000)), locked || !text.offset),
+          button('importReadMore', () => readText(text.textKey,text.nextOffset), locked || text.nextOffset == null)),
+        batch.status === 'ready' && h('div', { className:'import-decision' }, h('p', null, t('importConfirmHelp')),
+          batch.sessionId !== importSessionId && h('p', null, t('importOtherSession')),
+          button('importConfirm', () => decide('confirm'), actionLocked || scopeChanged || batch.sessionId !== importSessionId)),
+        batch.status === 'confirmed' && h('div', { className:'import-decision' }, h('p', null, t('importWithdrawHelp')),
+          button('importWithdraw', () => decide('withdraw'), actionLocked)))));
+}