Why: D25 final state - the right rail answers only "what needs me now" (inbox + a pinned current-task card); artifacts/agents/plugin panels become overlay workspaces with Cmd shortcuts and a left-rail quick section; DocViewer/AgentTracker migrate onto the shared OverlayHost. Evidence: tsc clean; vitest 9/9; vite build ok; delegation-only logic (overlay semantics covered by ui OverlayHost suite). Impact: Workbench drops classic tabs and gains CurrentTaskCard (plan+todos merged); new Workspaces.tsx (workspaceEntries, Cmd1-9 handler, builtin/plugin/server workspace rendering); store gains activeWorkspace/serverWorkspaces + open/close; ProjectNav quick section; Conversation project badge (D26); DocViewer/AgentTracker render through OverlayHost. Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md T4; task card feature/workspaces-r1
93 lines
4.2 KiB
TypeScript
93 lines
4.2 KiB
TypeScript
// 工作区弹层(提案 T4/D25):工件/代理/插件面板/插件声明工作区统一经 OverlayHost 呈现;
|
||
// ⌘1–9 快捷键与左栏快捷区共享同一清单(workspaceEntries)。
|
||
import { store, useStore } from '../store'
|
||
import type { Run } from '../contracts'
|
||
import { OverlayHost, type DocBridge } from '@ui'
|
||
import { docBridge } from './Workbench'
|
||
import { AgentRow } from './Workbench'
|
||
|
||
/** 工作区清单(顺序即 ⌘ 序号):内置在前,插件面板/声明工作区随后。 */
|
||
export function workspaceEntries(): { key: string; title: string; icon: string; shortcut: string }[] {
|
||
const s = store.getState()
|
||
const out = [
|
||
{ key: 'artifacts', title: '工件', icon: '📦', shortcut: '⌘1' },
|
||
{ key: 'agents', title: '代理', icon: '🤖', shortcut: '⌘2' },
|
||
...s.pluginPanels.map((p, i) => ({ key: `plugin:${p.id}`, title: p.title, icon: '🧩', shortcut: `⌘${i + 3}` })),
|
||
...s.serverWorkspaces.map((w, i) => ({ key: `ws:${w.id}`, title: w.title, icon: w.icon || '🗂', shortcut: w.shortcut ? `⌘${w.shortcut}` : `⌘${i + 3 + s.pluginPanels.length}` })),
|
||
]
|
||
return out.slice(0, 9)
|
||
}
|
||
|
||
export function Workspaces() {
|
||
const active = useStore(s => s.ui.activeWorkspace)
|
||
const artifacts = useStore(s => s.artifacts)
|
||
const runs = useStore(s => s.runs)
|
||
const pluginPanels = useStore(s => s.pluginPanels)
|
||
const serverWorkspaces = useStore(s => s.serverWorkspaces)
|
||
if (!active) return null
|
||
const entry = workspaceEntries().find(e => e.key === active)
|
||
const close = () => store.closeWorkspace()
|
||
|
||
if (active === 'artifacts') {
|
||
return <OverlayHost title="工件" icon="📦" shortcut="⌘1" badge={artifacts.length || undefined} onClose={close}>
|
||
<ArtifactsPanel />
|
||
</OverlayHost>
|
||
}
|
||
if (active === 'agents') {
|
||
const convRuns = runs.filter(r => r.kind !== 'tool')
|
||
return <OverlayHost title="代理" icon="🤖" shortcut="⌘2" onClose={close}>
|
||
<AgentsPanel runs={convRuns} />
|
||
</OverlayHost>
|
||
}
|
||
if (active.startsWith('plugin:')) {
|
||
const panel = pluginPanels.find(p => `plugin:${p.id}` === active)
|
||
return <OverlayHost title={panel?.title ?? '插件面板'} icon="🧩" onClose={close}
|
||
nodes={panel?.body ?? []} docBridge={docBridge as DocBridge} onRefresh={() => store.refreshPlugins()} />
|
||
}
|
||
if (active.startsWith('ws:')) {
|
||
const ws = serverWorkspaces.find(w => `ws:${w.id}` === active)
|
||
return <OverlayHost title={ws?.title ?? '工作区'} icon={ws?.icon || '🗂'} shortcut={entry?.shortcut} onClose={close}
|
||
nodes={ws?.body ?? []} docBridge={docBridge as DocBridge} onRefresh={() => store.refreshPlugins()} />
|
||
}
|
||
return null
|
||
}
|
||
|
||
/** 工件面板(自 Workbench tabs 迁入;点击进 DocViewer 深读)。 */
|
||
export function ArtifactsPanel() {
|
||
const artifacts = useStore(s => s.artifacts)
|
||
if (artifacts.length === 0) return <div className="empty-note">暂无工件——上传附件或让模型产出文档(mock:#doc)</div>
|
||
return <>{artifacts.map(a => (
|
||
<div key={a.id} className="artifact-row" onClick={() => store.viewArtifact(a)}>
|
||
<span>{a.kind === 'image' ? '🖼' : a.kind === 'document' ? '📄' : '🗂'}</span>
|
||
<span className="name" title={a.name}>{a.name}</span>
|
||
<span className="kind">{a.kind}</span>
|
||
</div>
|
||
))}</>
|
||
}
|
||
|
||
/** 代理面板(任务树;点击进 AgentTracker 深读)。 */
|
||
export function AgentsPanel({ runs }: { runs: Run[] }) {
|
||
if (runs.length === 0) return <div className="empty-note">暂无运行——多代理任务会在此形成任务树(mock:#agents)</div>
|
||
const roots = runs.filter(r => !r.parentRunId)
|
||
return <div className="subagent-tree">
|
||
{roots.map(r => (
|
||
<div key={r.id}>
|
||
<AgentRow run={r} depth={0} />
|
||
{runs.filter(c => c.parentRunId === r.id).map(c => <AgentRow key={c.id} run={c} depth={1} />)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
}
|
||
|
||
/** ⌘1–9 / Ctrl+1–9 全局快捷键(挂载于 App)。 */
|
||
export function workspaceShortcuts(e: KeyboardEvent) {
|
||
if (!(e.metaKey || e.ctrlKey)) return
|
||
const n = parseInt(e.key, 10)
|
||
if (!Number.isInteger(n) || n < 1 || n > 9) return
|
||
const entries = workspaceEntries()
|
||
const hit = entries[n - 1]
|
||
if (!hit) return
|
||
e.preventDefault()
|
||
store.openWorkspace(hit.key)
|
||
}
|