// dev-agent-workspace.jsx // §05 Develop · Agent + IDE workspace (the "hero" Develop view) // JetBrains Air–style task / agent / editor co-existence, but with Ghast's // mono+Liquid-Glass tone, no green highlights, no IDE chrome theatrics. // ────────── shared data ────────── const DAW_TASKS = [ { id: 't-canvas-png', label: '完成 画布导出 PNG 功能', done: true, plus: 445, minus: 9, age: 'Today' }, { id: 't-settings', label: '打开设置窗口，窗口位置要在原来窗口右侧', done: true, plus: 445, minus: 9, age: 'Today' }, { id: 't-canvas-drag', label: 'canvas 里 node 拖动碰撞检测有问题', done: true, plus: 75, minus: 8, age: 'Today' }, { id: 't-canvas-mode', label: 'canvas 模式下，Note Library 从右侧弹出', done: true, plus: 45, minus: 0, age: 'Today', active: true }, { id: 't-export-md', label: 'Markdown export · 包含 frontmatter', done: false, plus: 0, minus: 0, age: 'Pending' }, { id: 't-tests-vitest', label: 'vitest watch · re-run on save flake', done: false, plus: 0, minus: 0, age: 'Pending' }, ]; const DAW_AGENT_STREAM = [ { kind: 'summary', text: '定位完成: 右侧弹出和新建逻辑都在 DetachedNotesSidebar; 标题栏高度适配需要从根标题栏暴露 CSS 变量。' }, { kind: 'processed', text: 'Results Retrieved' }, { kind: 'summary', text: '交互和位置已经改完；现在补测试覆盖"剩余关闭按钮"和标题栏高度变量。' }, { kind: 'processed', text: 'Processed' }, { kind: 'summary', text: '测试已补；我先跑受影响的组件和路由测试，确认没有回归。' }, { kind: 'processed', text: 'Processed' }, { kind: 'summary', text: '受影响测试通过。按项目要求再跑全量单测，确保整体行为稳定。' }, { kind: 'processed', text: 'Processed' }, { kind: 'summary', text: '全量单测也通过；最后跑类型检查，避免 TS 细节漏掉。' }, { kind: 'processed', text: 'Processed' }, { kind: 'summary', text: '类型检查卡在 node_modules/electrobun 的既有声明问题；我再跑项目 lint/check 看本次改动是否干净。' }, { kind: 'processed', text: 'Processed' }, { kind: 'summary', text: '项目级 check 也被既有 .agents 文件拦住；我对本次改动文件单独跑一次格式/规则检查。' }, { kind: 'processed', text: 'Processed' }, { kind: 'summary', text: '本次改动文件单独 check 通过。最后看下 diff，确认没有多余变更。' }, { kind: 'processed', text: 'Processed' }, ]; const DAW_PLAN = [ { label: '定位 Note Library 组件', done: true }, { label: '调整画布模式交互', done: true }, { label: '适配标题栏高度', done: true }, { label: '补充或更新测试', done: true }, { label: '运行针对性验证', done: true }, ]; const DAW_FILES = [ { name: 'dist', kind: 'dir', level: 0 }, { name: 'docs', kind: 'dir', level: 0 }, { name: 'icon.iconset', kind: 'dir', level: 0 }, { name: 'messages', kind: 'dir', level: 0 }, { name: 'node_modules', kind: 'dir', level: 0 }, { name: 'project.inlang', kind: 'dir', level: 0 }, { name: 'src', kind: 'dir', level: 0, open: true }, { name: 'bun', kind: 'dir', level: 1 }, { name: 'mainview', kind: 'dir', level: 1, open: true }, { name: 'components', kind: 'dir', level: 2 }, { name: 'data', kind: 'dir', level: 2 }, { name: 'hooks', kind: 'dir', level: 2, open: true }, { name: 'useCanvasKeyboard.test.tsx', kind: 'tsx', level: 3, dirty: false }, { name: 'useCanvasKeyboard.ts', kind: 'ts', level: 3 }, { name: 'useCanvasPersistence.test.tsx', kind: 'tsx', level: 3 }, { name: 'useCanvasPersistence.ts', kind: 'ts', level: 3 }, { name: 'useContextMenu.test.tsx', kind: 'tsx', level: 3 }, { name: 'useContextMenu.ts', kind: 'ts', level: 3 }, { name: 'useDocumentKeyboard.ts', kind: 'ts', level: 3 }, { name: 'useHelperLines.test.tsx', kind: 'tsx', level: 3 }, { name: 'useHelperLines.ts', kind: 'ts', level: 3 }, { name: 'useNodeCreation.test.tsx', kind: 'tsx', level: 3 }, { name: 'useNodeCreation.ts', kind: 'ts', level: 3 }, { name: 'useNodeDrag.test.tsx', kind: 'tsx', level: 3, dirty: true }, { name: 'useNodeDrag.ts', kind: 'ts', level: 3, dirty: true }, { name: 'useNoteSaver.test.tsx', kind: 'tsx', level: 3 }, { name: 'useNoteSaver.ts', kind: 'ts', level: 3 }, { name: 'useSearch.ts', kind: 'ts', level: 3 }, { name: 'lib', kind: 'dir', level: 2 }, { name: 'routes', kind: 'dir', level: 2 }, { name: 'store', kind: 'dir', level: 2 }, { name: 'index.css', kind: 'css', level: 2 }, { name: 'index.html', kind: 'html', level: 2 }, { name: 'main.tsx', kind: 'tsx', level: 2 }, { name: 'router.test.tsx',kind: 'tsx', level: 2 }, { name: 'router.tsx', kind: 'tsx', level: 2, active: true }, ]; const DAW_EDITOR_TABS = [ { name: 'useNodeDrag.ts', dirty: true }, { name: 'useNodeCreation.ts', dirty: false }, { name: 'router.tsx', dirty: false, active: true }, { name: 'router.test.tsx', dirty: false }, ]; // router.tsx — annotated lines so we can render line numbers + token spans // without a real syntax highlighter const DAW_CODE_LINES = [ { n: 1, s: [['kw','import'],[' { '],['id','QueryClientProvider'],[' } '],['kw','from'],[' '],['str',"'@tanstack/react-query'"],[';']] }, { n: 2, s: [['kw','import'],[' {']] }, { n: 3, s: [[' '],['id','createHashHistory'],[',']] }, { n: 4, s: [[' '],['id','createRouter'],[' '],['kw','as'],[' '],['id','createTanStackRouter'],[',']] }, { n: 5, s: [['} '],['kw','from'],[' '],['str',"'@tanstack/react-router'"],[';']] }, { n: 6, s: [] }, { n: 7, s: [['kw','import'],[' { '],['id','ErrorBoundaryFallback'],[' } '],['kw','from'],[' '],['str',"'@/components/layout/ErrorBoundaryFallback'"],[';']] }, { n: 8, s: [['kw','import'],[' { '],['id','Loader'],[' } '],['kw','from'],[' '],['str',"'@/components/layout/Loader'"],[';']] }, { n: 9, s: [['kw','import'],[' { '],['id','queryClient'],[' } '],['kw','from'],[' '],['str',"'@/lib/queryClient'"],[';']] }, { n: 10, s: [] }, { n: 11, s: [['kw','import'],[' '],['id','routeTree'],[' '],['kw','from'],[' '],['str',"'./routeTree.gen'"],[';']] }, { n: 12, s: [] }, { n: 13, s: [['kw','const'],[' '],['id','isHttpProtocol'],[' = ['],['str',"'http:'"],[', '],['str',"'https:'"],[']'],['.'],['fn','includes'],['(']] }, { n: 14, s: [[' '],['id','globalThis'],['.'],['id','location'],['.'],['id','protocol'],[',']] }, { n: 15, s: [[');']] }, { n: 16, s: [] }, { n: 17, s: [['kw','export'],[' '],['kw','const'],[' '],['id','router'],[' = '],['fn','createTanStackRouter'],['('],['id','options'],[': {']] }, { n: 18, s: [[' '],['id','routeTree'],[',']] }, { n: 19, s: [[' '],['id','history'],[': '],['id','isHttpProtocol'],[' ? '],['kw','undefined'],[' : '],['fn','createHashHistory'],['(),']] }, { n: 20, s: [[' '],['id','scrollRestoration'],[': '],['kw','true'],[',']] }, { n: 21, s: [[' '],['id','defaultPreloadStaleTime'],[': '],['num','0'],[',']] }, { n: 22, s: [[' '],['id','context'],[': { '],['id','queryClient'],[' },']] }, { n: 23, s: [[' '],['id','defaultPendingComponent'],[': () : '],['id','Element'],[' => <'],['tag','Loader'],[' />,']] }, { n: 24, s: [[' '],['id','defaultErrorComponent'],[': '],['id','ErrorBoundaryFallback'],[',']] }, { n: 25, s: [[' '],['id','defaultNotFoundComponent'],[': () : '],['id','Element'],[' => <'],['tag','div'],['>Not Found,']] }, { n: 26, s: [[' '],['id','Wrap'],[': ({ '],['id','children'],[' }: { '],['id','children'],[': '],['id','any'],[' }) : '],['id','Element'],[' => (']] }, { n: 27, s: [[' <'],['tag','QueryClientProvider'],[' '],['attr','client'],['={'],['id','queryClient'],['}>{'],['id','children'],['}']] }, { n: 28, s: [[' ),']] }, { n: 29, s: [['});']], cursor: true }, { n: 30, s: [] }, ]; const DAW_TERMINAL_LINES = [ { kind: 'cmd', text: '/exit' }, { kind: 'comment', text: 'Exit the CLI' }, { kind: 'cmd', text: '/context' }, { kind: 'comment', text: 'Visualize current context usage as a colored grid' }, { kind: 'cmd', text: '/impeccable' }, { kind: 'comment', text: 'Create distinctive, production-grade frontend interfaces with high design quality. Generates' }, { kind: 'comment', text: 'creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web' }, { kind: 'comment', text: 'components, pages, artifacts, posters.' }, { kind: 'cmd', text: '/distill' }, { kind: 'comment', text: 'Strip designs to their essence by removing unnecessary complexity. Great design is simple,' }, { kind: 'comment', text: 'powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements,' }, { kind: 'comment', text: 'or make a UI cleaner and more focused.' }, { kind: 'spacer' }, { kind: 'banner', ts: '33s', tag: 'claude' }, { kind: 'gitstatus', repo: 'electrobun-starter-tanstack', branch: 'main', mods: 4, untrack: 15, summary: 'pkg ★ 1.0 node ◆ 24.15.0 14:32' }, { kind: 'spacer' }, { kind: 'prompt', text: 'try "fix lint errors"' }, { kind: 'hint', text: '? for shortcuts' }, ]; // ────────── leaf renderers ────────── function DawTaskList({ t, dark, tasks = DAW_TASKS, activeId = 't-canvas-mode', compact = false }) { return (
Search tasks ⌥T
Today
{tasks.map((task) => { const active = task.id === activeId; return (
{task.done ? : } {task.label}
{task.done && (
Done +{task.plus} −{task.minus}
)}
); })}
); } function DawAgentStream({ t, stream = DAW_AGENT_STREAM, plan = DAW_PLAN, planLabel = '5/5', showScrollHint = true }) { return (
{stream.map((node, i) => ( node.kind === 'summary' ? (
{node.text}
) : (
{node.text}
) ))} {showScrollHint && (
Scroll to bottom
)} {plan && (
Plan {planLabel}
{plan.map((p, i) => (
{p.done ? : } {p.label}
))}
)}
); } function DawFileTree({ t, files = DAW_FILES, width = 240 }) { const iconForKind = (k) => ({ dir: 'folder', tsx: 'code', ts: 'code', css: 'file', html: 'file', js: 'code', }[k] || 'file'); return (
Files
{files.map((f, i) => { const Indent = f.level * 12; return (
{f.kind === 'dir' ? ( ) : ( )} {f.name} {f.dirty && }
); })}
); } function DawEditor({ t, dark, tabs = DAW_EDITOR_TABS, lines = DAW_CODE_LINES, height }) { const tokenColor = (k) => { const map = dark ? { kw: '#c792ea', str: '#c3e88d', num: '#f78c6c', fn: '#82aaff', id: '#eeffff', tag: '#f07178', attr: '#ffcb6b' } : { kw: '#7c3aed', str: '#0e7c39', num: '#b91c1c', fn: '#1d4ed8', id: t.fg, tag: '#b91c1c', attr: '#a16207' }; return map[k] || t.fg2; }; return (
{/* Tab bar */}
{tabs.map((tab, i) => { const active = tab.active; return (
{tab.name} {tab.dirty && }
); })}
{/* Code area */}
{lines.map((l) => (
{l.n} {l.s.length === 0 ? ' ' : l.s.map((tok, i) => { const text = Array.isArray(tok) ? (tok.length === 2 ? tok[1] : tok[0]) : ''; const kind = Array.isArray(tok) && tok.length === 2 ? tok[0] : null; return ( {text} ); })} {l.cursor && }
))}
); } function DawTerminal({ t, dark, lines = DAW_TERMINAL_LINES, height = 220 }) { return (
Terminal
Terminal (3)
{lines.map((l, i) => { if (l.kind === 'spacer') return
; if (l.kind === 'cmd') return
{l.text}
; if (l.kind === 'comment') return
{l.text}
; if (l.kind === 'banner') return (
{l.ts} {l.tag}
); if (l.kind === 'gitstatus') return (
Claude Code v2.1.126 · Sonnet 4.6 · API Usage Billing ~/Projects/{l.repo} {l.branch} {l.mods}|{l.untrack} {l.summary}
); if (l.kind === 'prompt') return (
> {l.text}
); if (l.kind === 'hint') return
{l.text}
; return null; })}
); } function DawTopBar({ t, dark, repo = 'electrobun-starter-tanstack', branch = 'main', task = 'canvas 模式下，Note Library 从右边弹出，去掉新建...', expanded = false }) { return (
{repo} {branch} / ● {task}
); } // ────────── main component ────────── // // variant: // 'agent-led' — left task list, agent stream + composer (main), file tree right // 'code-led' — left task list narrow, editor full, file tree right // 'terminal-split' — code-led + bottom terminal split // 'plan-focus' — agent + plan checklist big, no editor // 'followup' — composer focused, autocomplete dropdown function DevAgentWorkspace({ dark, variant = 'agent-led' }) { const t = dark ? G.d : G.l; const compact = variant === 'code-led' || variant === 'terminal-split'; const showAgent = variant === 'agent-led' || variant === 'plan-focus' || variant === 'followup' || variant === 'perm-menu'; const showEditorMain = variant === 'code-led' || variant === 'terminal-split'; const showTerminal = variant === 'terminal-split'; return ( } topBar={} >
{/* Middle column — agent stream OR editor (depends on variant) */}
{showAgent && ( <> )} {showEditorMain && ( <> {showTerminal && } )}
{/* Right column — agent-led shows editor + tree; others just tree */} {variant === 'agent-led' ? ( <>
) : variant === 'plan-focus' || variant === 'followup' || variant === 'perm-menu' ? ( ) : ( )}
); } // Export Object.assign(window, { DevAgentWorkspace, DAW_TASKS, DAW_AGENT_STREAM, DAW_PLAN, DAW_FILES, DAW_EDITOR_TABS, });