npm - @namewta/speculo - Versions diffs - 0.8.6 → 0.8.7 - Mend

@namewta/speculo 0.8.6 → 0.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/01-dense-ide.html ADDED Viewed

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="zh-CN" class="dark">
+<head>
+  <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>高密度 IDE 风格</title>
+  <link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/pages.css">
+</head>
+<body class="theme-ide density-default">
+  <div class="app-frame">
+    <header class="utility-bar">
+      <a class="icon-btn" href="index.html" title="返回总览"><i data-lucide="layout-grid"></i></a>
+      <div class="utility-brand"><span class="utility-mark"><i data-lucide="braces"></i></span><span class="utility-title">Atlas Workspace</span><span class="utility-kind">高密度 IDE</span></div>
+      <div class="utility-actions">
+        <div class="segmented desktop-only"><button data-density="compact">紧凑</button><button class="active" data-density="default">默认</button><button data-density="comfortable">舒适</button></div>
+        <button class="icon-btn" data-theme-toggle></button>
+        <button class="icon-btn" data-token-toggle aria-expanded="false" title="设计 Token"><i data-lucide="swatch-book"></i></button>
+      </div>
+    </header>
+    <main class="workspace">
+      <aside class="ide-rail" aria-label="工具栏">
+        <button class="tool-btn active" title="文件"><i data-lucide="files"></i></button><button class="tool-btn" title="搜索"><i data-lucide="search"></i></button><button class="tool-btn" title="Git"><i data-lucide="git-branch"></i></button><button class="tool-btn" title="运行"><i data-lucide="play"></i></button><button class="tool-btn" title="扩展"><i data-lucide="blocks"></i></button><span class="ide-rail-spacer"></span><button class="tool-btn" title="账户"><i data-lucide="user-round"></i></button><button class="tool-btn" title="设置"><i data-lucide="settings"></i></button>
+      </aside>
+      <aside class="ide-explorer">
+        <div class="panel-header"><span class="panel-title">EXPLORER</span><span class="panel-actions"><button class="tool-btn" title="新文件"><i data-lucide="file-plus"></i></button><button class="tool-btn" title="折叠"><i data-lucide="chevrons-up"></i></button></span></div>
+        <div class="scroll-area ide-tree">
+          <div class="tree-row"><i data-lucide="chevron-down"></i><i data-lucide="folder-open"></i><b>atlas-app</b></div>
+          <div class="tree-row"><span class="indent"></span><i data-lucide="chevron-down"></i><i data-lucide="folder-open"></i>src</div>
+          <div class="tree-row active"><span class="indent"></span><span class="indent"></span><i class="file-ts" data-lucide="file-code-2"></i>AppShell.tsx</div>
+          <div class="tree-row"><span class="indent"></span><span class="indent"></span><i class="file-ts" data-lucide="file-code-2"></i>SessionPane.tsx</div>
+          <div class="tree-row"><span class="indent"></span><span class="indent"></span><i class="file-css" data-lucide="file-type-2"></i>tokens.css</div>
+          <div class="tree-row"><span class="indent"></span><i data-lucide="chevron-right"></i><i data-lucide="folder"></i>components</div>
+          <div class="tree-row"><span class="indent"></span><i data-lucide="chevron-right"></i><i data-lucide="folder"></i>lib</div>
+          <div class="tree-row"><span class="indent"></span><i class="file-md" data-lucide="file-text"></i>README.md</div>
+        </div>
+      </aside>
+      <section class="ide-center">
+        <div class="ide-tabbar"><div class="ide-tab active"><i class="file-ts" data-lucide="file-code-2"></i>AppShell.tsx</div><div class="ide-tab"><i class="file-css" data-lucide="file-type-2"></i>tokens.css</div></div>
+        <div class="ide-editor">
+          <div class="editor-pane"><div class="editor-title">AppShell.tsx</div><div class="ide-code">
+            <div class="code-line"><span class="ln">1</span><span><b class="tok-key">import</b> { PanelGroup } <b class="tok-key">from</b> <span class="tok-str">"./ui/panels"</span>;</span></div>
+            <div class="code-line"><span class="ln">2</span><span><b class="tok-key">import</b> { SessionList } <b class="tok-key">from</b> <span class="tok-str">"./session"</span>;</span></div>
+            <div class="code-line"><span class="ln">3</span></div>
+            <div class="code-line"><span class="ln">4</span><span><b class="tok-key">export function</b> <span class="tok-fn">AppShell</span>() {</span></div>
+            <div class="code-line"><span class="ln">5</span><span>&nbsp;&nbsp;<b class="tok-key">return</b> (</span></div>
+            <div class="code-line active"><span class="ln">6</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="tok-fn">PanelGroup</span> direction=<span class="tok-str">"horizontal"</span>&gt;</span></div>
+            <div class="code-line"><span class="ln">7</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="tok-fn">SessionList</span> defaultSize={22} /&gt;</span></div>
+            <div class="code-line"><span class="ln">8</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="tok-fn">AgentWorkspace</span> /&gt;</span></div>
+            <div class="code-line"><span class="ln">9</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="tok-fn">ReviewPane</span> minSize={28} /&gt;</span></div>
+            <div class="code-line"><span class="ln">10</span><span>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/<span class="tok-fn">PanelGroup</span>&gt;</span></div>
+            <div class="code-line"><span class="ln">11</span><span>&nbsp;&nbsp;);</span></div><div class="code-line"><span class="ln">12</span><span>}</span></div>
+          </div></div>
+          <div class="editor-pane"><div class="editor-title">Working tree diff</div><div>
+            <div class="diff-line"><span class="diff-mark"> </span>@@ -24,6 +24,10 @@ export function AppShell()</div>
+            <div class="diff-line del"><span class="diff-mark">-</span>&lt;SessionList /&gt;</div>
+            <div class="diff-line add"><span class="diff-mark">+</span>&lt;SessionList defaultSize={22} /&gt;</div>
+            <div class="diff-line add"><span class="diff-mark">+</span>&lt;AgentWorkspace /&gt;</div>
+            <div class="diff-line add"><span class="diff-mark">+</span>&lt;ReviewPane minSize={28} /&gt;</div>
+          </div></div>
+        </div>
+        <div class="ide-terminal"><div class="terminal-head"><span class="active">TERMINAL</span><span>PROBLEMS <b>0</b></span><span>OUTPUT</span><span class="panel-actions"><i data-lucide="plus"></i><i data-lucide="trash-2"></i></span></div><div class="terminal-body"><div><span class="prompt">atlas-app</span> <span class="quiet">git:(feature/panes)</span> npm run test</div><div>✓ 28 tests passed <span class="quiet">in 1.42s</span></div><div><span class="prompt">atlas-app</span> <span class="quiet">git:(feature/panes)</span> <span class="tok-comment">_</span></div></div></div>
+      </section>
+      <aside class="ide-review"><div class="panel-header"><span class="panel-title">CHANGES</span><span class="badge info">3 files</span></div><div class="change-group"><div class="change-title"><i class="file-ts" data-lucide="file-code-2"></i>AppShell.tsx <span class="change-stats"><b class="plus">+8</b> <b class="minus">-1</b></span></div></div><div class="change-group"><div class="change-title"><i class="file-css" data-lucide="file-type-2"></i>tokens.css <span class="change-stats"><b class="plus">+14</b></span></div></div><div class="change-group"><div class="change-title"><i class="file-ts" data-lucide="file-code-2"></i>panels.test.ts <span class="change-stats"><b class="plus">+22</b></span></div></div><div class="panel-header"><span class="panel-title">REVIEW</span></div><div style="padding:12px;color:var(--text-2);font-size:12px;line-height:1.6">三栏在 1024px 以上并列，右栏低于 1180px 自动收起。编辑器与 diff 保持 12px 等宽字体。</div></aside>
+    </main>
+    <footer class="ide-statusbar"><span><i data-lucide="git-branch" style="display:inline;width:11px;height:11px"></i> feature/panes</span><span>0 errors</span><span class="push">Ln 6, Col 34 &nbsp; UTF-8 &nbsp; TypeScript React</span></footer>
+  </div>
+  <aside class="token-drawer" aria-label="高密度 IDE Token"><div class="panel-header"><span class="panel-title">高密度 IDE / Token</span><button class="icon-btn panel-actions" data-token-close><i data-lucide="x"></i></button></div><div class="token-body"><div class="token-group"><h3>颜色</h3><div class="swatches"><div class="swatch"><div class="swatch-color" style="--swatch:#111315"></div><label>#111315</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#181b1e"></div><label>#181b1e</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#2b3035"></div><label>#2b3035</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#e47c38"></div><label>#e47c38</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#f3f4f5"></div><label>#f3f4f5</label></div></div></div><div class="token-group"><h3>尺寸</h3><div class="token-table"><div class="token-row"><span>侧栏</span><code>230px</code></div><div class="token-row"><span>控件</span><code>30px</code></div><div class="token-row"><span>正文</span><code>13px</code></div><div class="token-row"><span>代码</span><code>12/21px</code></div><div class="token-row"><span>圆角</span><code>2 / 3 / 4px</code></div></div></div></div></aside>
+  <script src="assets/lucide.js"></script><script src="scripts/gallery.js"></script>
+</body></html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/02-monochrome-console.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="zh-CN" class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>单色桌面控制台</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/pages.css"></head>
+<body class="theme-console density-default"><div class="app-frame">
+  <header class="utility-bar"><a class="icon-btn" href="index.html" title="返回总览"><i data-lucide="layout-grid"></i></a><div class="utility-brand"><span class="utility-mark"><i data-lucide="terminal-square"></i></span><span class="utility-title">Command Center</span><span class="utility-kind">单色桌面控制台</span></div><div class="utility-actions"><div class="segmented desktop-only"><button data-density="compact">紧凑</button><button class="active" data-density="default">默认</button><button data-density="comfortable">舒适</button></div><button class="icon-btn" data-theme-toggle></button><button class="icon-btn" data-token-toggle aria-expanded="false"><i data-lucide="swatch-book"></i></button></div></header>
+  <main class="workspace">
+    <aside class="console-sidebar"><div class="console-logo"><span class="logo-glyph"><i data-lucide="command"></i></span><span>opcode</span></div><div class="sidebar-section">Workspace</div><div class="nav-list"><div class="nav-row active"><i data-lucide="layout-dashboard"></i><span>Overview</span></div><div class="nav-row"><i data-lucide="folder-kanban"></i><span>Projects</span><span class="badge">12</span></div><div class="nav-row"><i data-lucide="bot"></i><span>Agents</span><span class="status-dot run"></span></div><div class="nav-row"><i data-lucide="history"></i><span>Sessions</span></div></div><div class="sidebar-section">System</div><div class="nav-list"><div class="nav-row"><i data-lucide="server-cog"></i><span>MCP Servers</span></div><div class="nav-row"><i data-lucide="file-cog"></i><span>CLAUDE.md</span></div><div class="nav-row"><i data-lucide="chart-no-axes-combined"></i><span>Usage</span></div></div><div style="margin-top:auto" class="nav-list"><div class="nav-row"><i data-lucide="settings"></i><span>Settings</span></div></div></aside>
+    <section class="console-main"><div class="panel-header" style="min-height:54px"><div><div class="panel-title">Overview</div><div class="panel-meta">Local workspace · last synced just now</div></div><div class="panel-actions"><button class="btn"><i data-lucide="filter"></i>Filter</button><button class="btn primary"><i data-lucide="plus"></i>New session</button></div></div>
+      <div class="console-overview"><div class="console-stat"><span>Active sessions</span><b>04</b><small>2 need attention</small></div><div class="console-stat"><span>Tasks completed</span><b>128</b><small>+18 this week</small></div><div class="console-stat"><span>Token usage</span><b>2.4M</b><small>68% cached</small></div><div class="console-stat"><span>Estimated cost</span><b>$18.42</b><small>-12% vs last week</small></div></div>
+      <div class="console-content"><div class="session-column"><div class="panel-header"><span class="panel-title">Recent sessions</span><span class="panel-actions panel-meta">Updated live</span></div><div class="scroll-area">
+        <div class="session-row"><span class="avatar agent">A1</span><div class="session-copy"><strong>Refactor authentication middleware</strong><p>atlas-web · feature/auth-boundary</p></div><span class="badge warning">Needs input</span></div>
+        <div class="session-row"><span class="avatar agent">A2</span><div class="session-copy"><strong>Audit database migration plan</strong><p>core-api · worktree/migration-audit</p></div><span class="badge info">Running</span></div>
+        <div class="session-row"><span class="avatar agent">A3</span><div class="session-copy"><strong>Add responsive panel behavior</strong><p>atlas-web · feature/panel-layout</p></div><span class="badge success">Complete</span></div>
+        <div class="session-row"><span class="avatar">A4</span><div class="session-copy"><strong>Investigate failed CI workflow</strong><p>desktop-client · fix/windows-signing</p></div><span class="badge danger">Failed</span></div>
+        <div class="session-row"><span class="avatar">A5</span><div class="session-copy"><strong>Document MCP configuration</strong><p>docs · main</p></div><span class="badge">Paused</span></div>
+      </div></div><aside class="analytics-column"><div class="panel-title">Daily token usage</div><div class="chart-shell"><div class="bar-chart"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="panel-meta">Mon&nbsp;&nbsp; Tue&nbsp;&nbsp; Wed&nbsp;&nbsp; Thu&nbsp;&nbsp; Fri&nbsp;&nbsp; Sat&nbsp;&nbsp; Sun</div></div><div class="agent-card"><div class="agent-card-head"><span class="avatar agent">QA</span><div><strong>Review Agent</strong><div class="panel-meta">Claude Opus · restricted</div></div><span class="status-dot run" style="margin-left:auto"></span></div><p>Reviewing the authentication boundary. 12 files scanned, 3 findings waiting for confirmation.</p></div><div class="agent-card"><div class="agent-card-head"><span class="avatar agent">DB</span><div><strong>Migration Agent</strong><div class="panel-meta">Claude Sonnet · read only</div></div><span class="status-dot ok" style="margin-left:auto"></span></div><p>Migration report completed. No destructive changes detected in the proposed schema.</p></div></aside></div>
+    </section>
+  </main>
+</div><aside class="token-drawer"><div class="panel-header"><span class="panel-title">单色控制台 / Token</span><button class="icon-btn panel-actions" data-token-close><i data-lucide="x"></i></button></div><div class="token-body"><div class="token-group"><h3>深色表面</h3><div class="swatches"><div class="swatch"><div class="swatch-color" style="--swatch:#0e1012"></div><label>bg</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#15181b"></div><label>surface</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#1b1f23"></div><label>raised</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#2a3036"></div><label>border</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#eef0f2"></div><label>primary</label></div></div></div><div class="token-group"><h3>尺寸</h3><div class="token-table"><div class="token-row"><span>侧栏</span><code>252px</code></div><div class="token-row"><span>控件</span><code>34px</code></div><div class="token-row"><span>正文</span><code>13-14px</code></div><div class="token-row"><span>圆角</span><code>4 / 8 / 12px</code></div><div class="token-row"><span>结构</span><code>1px border</code></div></div></div></div></aside><script src="assets/lucide.js"></script><script src="scripts/gallery.js"></script></body></html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/03-soft-personal-ai.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>柔和个人 AI 桌面</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/pages.css"></head>
+<body class="theme-soft density-default"><div class="app-frame">
+  <header class="utility-bar"><a class="icon-btn" href="index.html" title="返回总览"><i data-lucide="layout-grid"></i></a><div class="utility-brand"><span class="utility-mark"><i data-lucide="sparkles"></i></span><span class="utility-title">Luma Assistant</span><span class="utility-kind">柔和个人 AI 桌面</span></div><div class="utility-actions"><div class="segmented desktop-only"><button data-density="compact">紧凑</button><button class="active" data-density="default">默认</button><button data-density="comfortable">舒适</button></div><button class="icon-btn" data-theme-toggle></button><button class="icon-btn" data-token-toggle aria-expanded="false"><i data-lucide="swatch-book"></i></button></div></header>
+  <main class="workspace soft-shell">
+    <aside class="soft-sidebar"><div class="soft-greeting"><strong>下午好，Wen</strong><span>3 个工作区正在运行</span></div><div class="nav-list" style="padding:0 9px"><div class="nav-row active"><i data-lucide="message-circle"></i><span>对话</span><span class="badge">8</span></div><div class="nav-row"><i data-lucide="calendar-clock"></i><span>计划任务</span></div><div class="nav-row"><i data-lucide="puzzle"></i><span>Skills</span></div></div><div class="sidebar-section">最近项目</div><div class="scroll-area">
+      <div class="soft-project active"><div class="soft-project-head"><span class="avatar agent">AT</span><span>Atlas 产品工作区</span><span class="status-dot run" style="margin-left:auto"></span></div><p>正在优化响应式布局</p></div>
+      <div class="soft-project"><div class="soft-project-head"><span class="avatar">FN</span><span>个人财务助手</span><span class="status-dot ok" style="margin-left:auto"></span></div><p>预算报告已生成</p></div>
+      <div class="soft-project"><div class="soft-project-head"><span class="avatar">KB</span><span>知识库整理</span></div><p>24 个文档等待归档</p></div>
+    </div><div class="nav-list" style="margin-top:auto;padding:9px"><div class="nav-row"><i data-lucide="settings"></i><span>设置</span></div><div class="nav-row"><span class="avatar" style="width:24px;height:24px">W</span><span>wen@example.com</span></div></div></aside>
+    <section class="soft-main"><div class="panel-header"><div><div class="panel-title">Atlas 产品工作区</div><div class="panel-meta">Claude Opus · 本地项目</div></div><div class="panel-actions"><button class="icon-btn" title="分屏"><i data-lucide="columns-2"></i></button><button class="icon-btn" title="更多"><i data-lucide="ellipsis"></i></button></div></div><div class="scroll-area message-list">
+      <article class="message user"><span class="avatar">W</span><div class="message-body">把右侧上下文区做得更安静一些，同时保留文件和 token 使用情况。</div></article>
+      <article class="message"><span class="avatar agent"><i data-lucide="sparkles"></i></span><div class="message-body"><div class="message-name">Luma <span class="badge success">已完成</span></div>我把右栏改成低对比度的独立工作面，并减少了常驻文字。文件、上下文和运行状态仍然可扫描，但不会与对话竞争注意力。<div class="tool-event"><div class="tool-event-head"><i data-lucide="file-pen-line"></i><span>编辑 3 个文件</span><span class="badge success" style="margin-left:auto">+42 −18</span></div><div class="tool-event-body">src/layout/ContextRail.tsx<br>src/styles/tokens.css<br>src/components/UsageRing.tsx</div></div></div></article>
+      <article class="message"><span class="avatar agent"><i data-lucide="sparkles"></i></span><div class="message-body"><div class="message-name">Luma <span class="panel-meta">刚刚</span></div>圆角只用于独立窗格和 composer，列表行保持较小圆角。这样仍然柔和，但不会变成卡片堆叠。</div></article>
+    </div><div class="composer-wrap"><div class="composer"><textarea aria-label="消息" placeholder="继续描述你希望调整的内容…"></textarea><div class="composer-footer"><button class="icon-btn" title="添加附件"><i data-lucide="paperclip"></i></button><button class="select-chip"><i data-lucide="brain"></i>Opus <i data-lucide="chevron-down"></i></button><button class="select-chip"><i data-lucide="shield-check"></i>询问权限</button><button class="send-btn" data-send title="发送"><i data-lucide="arrow-up"></i></button></div></div></div></section>
+    <aside class="soft-right"><div class="panel-header"><span class="panel-title">上下文</span><span class="panel-actions"><button class="icon-btn"><i data-lucide="panel-right-close"></i></button></span></div><div class="context-ring"><b>72%</b></div><div class="panel-meta" style="text-align:center">128k 上下文窗口</div><div class="context-list" style="margin-top:14px"><div class="context-row"><i style="--dot:#6f91bd"></i><span>对话</span><b>38%</b></div><div class="context-row"><i style="--dot:#8ca675"></i><span>文件</span><b>21%</b></div><div class="context-row"><i style="--dot:#c39363"></i><span>工具</span><b>13%</b></div></div><div class="soft-banner"><b style="display:block;color:var(--text);margin-bottom:5px">工作区状态</b>所有更改保存在本地 worktree。当前分支尚未推送。</div><div class="panel-header"><span class="panel-title">相关文件</span></div><div class="nav-list" style="padding:8px"><div class="nav-row"><i data-lucide="file-code-2"></i><span>ContextRail.tsx</span></div><div class="nav-row"><i data-lucide="file-type-2"></i><span>tokens.css</span></div><div class="nav-row"><i data-lucide="file-code-2"></i><span>UsageRing.tsx</span></div></div></aside>
+  </main>
+</div><aside class="token-drawer"><div class="panel-header"><span class="panel-title">柔和个人 AI / Token</span><button class="icon-btn panel-actions" data-token-close><i data-lucide="x"></i></button></div><div class="token-body"><div class="token-group"><h3>暖中性色</h3><div class="swatches"><div class="swatch"><div class="swatch-color" style="--swatch:#efeeeb"></div><label>window</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#ffffff"></div><label>surface</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#f5f4f1"></div><label>muted</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#e2ded7"></div><label>border</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#262626"></div><label>primary</label></div></div></div><div class="token-group"><h3>尺寸</h3><div class="token-table"><div class="token-row"><span>窗格间距</span><code>8px</code></div><div class="token-row"><span>窗格圆角</span><code>16px</code></div><div class="token-row"><span>控件圆角</span><code>8-12px</code></div><div class="token-row"><span>正文</span><code>14px / 1.62</code></div><div class="token-row"><span>阴影</span><code>2-layer diffuse</code></div></div></div></div></aside><script src="assets/lucide.js"></script><script src="scripts/gallery.js"></script></body></html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/04-responsive-web.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>响应式 Web 工作台</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/pages.css"></head>
+<body class="theme-web density-default"><div class="app-frame">
+  <header class="utility-bar"><button class="icon-btn mobile-only" data-sidebar-toggle aria-expanded="false"><i data-lucide="menu"></i></button><a class="icon-btn desktop-only" href="index.html" title="返回总览"><i data-lucide="layout-grid"></i></a><div class="utility-brand"><span class="utility-mark"><i data-lucide="cloud-cog"></i></span><span class="utility-title">CloudCLI</span><span class="utility-kind">响应式 Web 工作台</span></div><div class="utility-actions"><span class="badge success desktop-only"><span class="status-dot ok"></span>Local</span><button class="icon-btn" data-theme-toggle></button><button class="icon-btn" data-token-toggle aria-expanded="false"><i data-lucide="swatch-book"></i></button></div></header>
+  <main class="workspace" style="position:relative">
+    <aside class="sidebar drawer web-sidebar"><div class="search-box"><i data-lucide="search"></i><span>搜索项目或会话</span><span class="badge" style="margin-left:auto">⌘ K</span></div><div class="nav-list"><div class="nav-row active"><i data-lucide="inbox"></i><span>全部会话</span><span class="badge">12</span></div><div class="nav-row"><i data-lucide="circle-play"></i><span>正在运行</span><span class="status-dot run"></span></div><div class="nav-row"><i data-lucide="clock-3"></i><span>计划任务</span></div></div><div class="sidebar-section">项目</div><div class="scroll-area nav-list"><div class="nav-row active"><i data-lucide="folder-git-2"></i><span>atlas-web</span></div><div class="nav-row"><i data-lucide="folder-git-2"></i><span>core-api</span></div><div class="nav-row"><i data-lucide="folder-git-2"></i><span>mobile-client</span></div><div class="nav-row"><i data-lucide="folder"></i><span>design-research</span></div></div><div class="nav-list" style="margin-top:auto;padding-bottom:9px"><div class="nav-row"><i data-lucide="settings"></i><span>设置</span></div></div></aside>
+    <section class="web-main panel"><div class="panel-header"><div><div class="panel-title">优化移动端导航</div><div class="panel-meta">atlas-web · feature/mobile-shell</div></div><div class="panel-actions"><button class="btn ghost desktop-only"><i data-lucide="git-branch"></i>Worktree</button><button class="icon-btn"><i data-lucide="ellipsis"></i></button></div></div><div class="scroll-area message-list">
+      <article class="message user"><span class="avatar">W</span><div class="message-body">在手机上把右侧 Plan 和 Preview 改成全屏视图，保留会话返回路径。</div></article>
+      <article class="message"><span class="avatar agent">C</span><div class="message-body"><div class="message-name">Cloud Agent <span class="badge info">运行中</span></div>我会把桌面三栏拆成移动任务流：主会话保持当前路由，Plan 和 Preview 从底部导航进入，并在标题栏提供返回。<div class="tool-event"><div class="tool-event-head"><i data-lucide="terminal"></i><span>npm run test:responsive</span><span class="badge success" style="margin-left:auto">passed</span></div><div class="tool-event-body">8 responsive scenarios passed<br>375 / 390 / 768 / 1024 px</div></div></div></article>
+      <article class="message"><span class="avatar agent">C</span><div class="message-body"><div class="message-name">Cloud Agent</div>底部导航使用 52px 固定高度，并额外叠加 `env(safe-area-inset-bottom)`。drawer 最大宽度 330px，小屏为 86vw。</div></article>
+    </div><div class="composer-wrap"><div class="composer"><textarea aria-label="消息" placeholder="发送后续要求…"></textarea><div class="composer-footer"><button class="icon-btn"><i data-lucide="paperclip"></i></button><button class="select-chip"><i data-lucide="code-2"></i>Code</button><button class="select-chip"><i data-lucide="brain"></i>Sonnet</button><button class="send-btn" data-send><i data-lucide="arrow-up"></i></button></div></div></div></section>
+    <aside class="web-right"><div class="panel-header"><div class="tabs" data-tabs><button class="tab active" data-tab-target="plan">Plan</button><button class="tab" data-tab-target="files">Files</button><button class="tab" data-tab-target="preview">Preview</button></div></div><div class="scroll-area" data-tab-panel="plan"><div class="plan-list"><div class="plan-step done"><i>✓</i><span>定义移动路由和返回状态</span></div><div class="plan-step done"><i>✓</i><span>将右栏转换为全屏 detail</span></div><div class="plan-step"><i>3</i><span>补充底部安全区和键盘测试</span></div><div class="plan-step"><i>4</i><span>验证 375px 最窄视口</span></div></div><div class="preview-frame"><div class="preview-address"><span class="preview-dot"></span><span class="preview-dot"></span><span class="preview-dot"></span><span class="panel-meta" style="margin-left:5px">localhost:5173</span></div><div class="preview-content"><img src="assets/workspace.jpg" alt="工作区预览"></div></div></div><div data-tab-panel="files" hidden><div class="nav-list" style="padding:10px"><div class="nav-row"><i data-lucide="file-code-2"></i><span>MobileNav.tsx</span><span class="badge success">M</span></div><div class="nav-row"><i data-lucide="file-type-2"></i><span>app-shell.css</span><span class="badge success">M</span></div></div></div><div data-tab-panel="preview" hidden><div class="preview-frame"><div class="preview-address"><span class="preview-dot"></span><span class="preview-dot"></span><span class="preview-dot"></span></div><div class="preview-content"><img src="assets/workspace.jpg" alt="应用预览"></div></div></div></aside>
+    <nav class="web-bottom-nav mobile-only" aria-label="移动导航"><button data-sidebar-toggle><i data-lucide="panel-left"></i></button><button class="active"><i data-lucide="message-circle"></i></button><button><i data-lucide="list-checks"></i></button><button><i data-lucide="file-diff"></i></button><a class="icon-btn" href="index.html"><i data-lucide="layout-grid"></i></a></nav>
+  </main>
+</div><aside class="token-drawer"><div class="panel-header"><span class="panel-title">响应式 Web / Token</span><button class="icon-btn panel-actions" data-token-close><i data-lucide="x"></i></button></div><div class="token-body"><div class="token-group"><h3>颜色</h3><div class="swatches"><div class="swatch"><div class="swatch-color" style="--swatch:#f4f2ed"></div><label>background</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#ffffff"></div><label>card</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#f3f1eb"></div><label>muted</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#dedad1"></div><label>border</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#3978e6"></div><label>primary</label></div></div></div><div class="token-group"><h3>响应式</h3><div class="token-table"><div class="token-row"><span>桌面侧栏</span><code>260px</code></div><div class="token-row"><span>移动 drawer</span><code>86vw / 330px</code></div><div class="token-row"><span>底部导航</span><code>52px + safe area</code></div><div class="token-row"><span>基础圆角</span><code>6px</code></div><div class="token-row"><span>面板进入</span><code>220ms</code></div></div></div></div></aside><script src="assets/lucide.js"></script><script src="scripts/gallery.js"></script></body></html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/05-mobile-supervisor.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>移动监督与审批</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/pages.css"></head>
+<body class="theme-mobile"><div class="app-frame">
+  <header class="utility-bar"><a class="icon-btn" href="index.html" title="返回总览"><i data-lucide="layout-grid"></i></a><div class="utility-brand"><span class="utility-mark"><i data-lucide="smartphone"></i></span><span class="utility-title">Happy Mobile</span><span class="utility-kind">移动监督与审批</span></div><div class="utility-actions"><button class="icon-btn" data-theme-toggle></button><button class="icon-btn" data-token-toggle aria-expanded="false"><i data-lucide="swatch-book"></i></button></div></header>
+  <main class="mobile-stage">
+    <section class="phone-frame" aria-label="会话列表手机界面"><div class="phone-status"><span>9:41</span><span>● ● ●</span></div><div class="phone-header"><div><strong>会话</strong><div class="panel-meta">3 个设备在线</div></div><button class="icon-btn" style="margin-left:auto"><i data-lucide="bell"></i></button><button class="icon-btn"><i data-lucide="plus"></i></button></div><div class="session-cards">
+      <article class="mobile-session active"><div class="mobile-session-head"><span class="avatar agent">A</span><strong>优化移动端审批流程</strong><span class="status-dot wait"></span></div><p>Agent 正在等待你批准执行测试命令。</p><div class="mobile-session-meta"><i data-lucide="laptop"></i><span>Atlas MacBook</span><span style="margin-left:auto">刚刚</span></div></article>
+      <article class="mobile-session"><div class="mobile-session-head"><span class="avatar agent">D</span><strong>数据库迁移审查</strong><span class="status-dot run"></span></div><p>正在扫描 18 个 migration 文件，未发现破坏性操作。</p><div class="mobile-session-meta"><i data-lucide="server"></i><span>Dev Server</span><span style="margin-left:auto">2 分钟</span></div></article>
+      <article class="mobile-session"><div class="mobile-session-head"><span class="avatar">W</span><strong>周报自动整理</strong><span class="status-dot ok"></span></div><p>报告已完成，可在桌面端继续编辑。</p><div class="mobile-session-meta"><i data-lucide="monitor"></i><span>Windows PC</span><span style="margin-left:auto">18 分钟</span></div></article>
+    </div><nav class="mobile-tabbar"><button class="active" title="会话"><i data-lucide="messages-square"></i></button><button title="收件箱"><i data-lucide="inbox"></i></button><button title="设备"><i data-lucide="monitor-smartphone"></i></button><button title="设置"><i data-lucide="settings"></i></button></nav></section>
+    <section class="phone-frame" aria-label="权限审批手机界面"><div class="phone-status"><span>9:41</span><span>● ● ●</span></div><div class="phone-header"><button class="icon-btn"><i data-lucide="chevron-left"></i></button><div><strong style="font-size:15px">权限请求</strong><div class="panel-meta">Atlas 产品工作区</div></div><span class="badge warning" style="margin-left:auto">等待中</span></div>
+      <article class="approval-card"><div class="approval-hero"><span class="avatar agent"><i data-lucide="sparkles"></i></span><div><strong>Agent 想要执行命令</strong><span>请确认影响范围后再批准</span></div></div><div class="approval-command">npm run test:responsive -- --update-snapshots</div><div class="approval-scope"><div class="scope-row"><i data-lucide="folder"></i><span>/Users/wen/Projects/atlas-web</span></div><div class="scope-row"><i data-lucide="file-pen-line"></i><span>可能更新 8 个 snapshot 文件</span></div><div class="scope-row"><i data-lucide="wifi-off"></i><span>不需要网络访问</span></div></div><div class="approval-actions"><button class="btn danger" data-approval="deny"><i data-lucide="x"></i>拒绝</button><button class="btn primary" data-approval="allow"><i data-lucide="check"></i>允许一次</button></div></article>
+      <div style="padding:12px 18px 18px;text-align:center;color:var(--text-3);font-size:11px;line-height:1.5">批准仅对这一次命令有效。后续写入仍会再次询问。</div>
+    </section>
+  </main>
+</div><aside class="token-drawer"><div class="panel-header"><span class="panel-title">移动监督 / Token</span><button class="icon-btn panel-actions" data-token-close><i data-lucide="x"></i></button></div><div class="token-body"><div class="token-group"><h3>Material tonal 色板</h3><div class="swatches"><div class="swatch"><div class="swatch-color" style="--swatch:#fffbff"></div><label>background</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#e5deff"></div><label>container</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#5e52a7"></div><label>primary</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#78767f"></div><label>outline</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#ba1a1a"></div><label>error</label></div></div></div><div class="token-group"><h3>移动尺寸</h3><div class="token-table"><div class="token-row"><span>正文</span><code>15px</code></div><div class="token-row"><span>触控目标</span><code>44-48px</code></div><div class="token-row"><span>卡片圆角</span><code>18px</code></div><div class="token-row"><span>主要按钮</span><code>44px / 14px</code></div><div class="token-row"><span>底部栏</span><code>66px + safe area</code></div></div></div></div></aside><script src="assets/lucide.js"></script><script src="scripts/gallery.js"></script></body></html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/06-cross-platform-workspace.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>多端 Agent 工作区</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/pages.css"></head>
+<body class="theme-paseo density-default"><div class="app-frame">
+  <header class="utility-bar"><button class="icon-btn mobile-only" data-sidebar-toggle aria-expanded="false"><i data-lucide="menu"></i></button><a class="icon-btn desktop-only" href="index.html"><i data-lucide="layout-grid"></i></a><div class="utility-brand"><span class="utility-mark"><i data-lucide="route"></i></span><span class="utility-title">Paseo Workspace</span><span class="utility-kind">多端 Agent 工作区</span></div><div class="utility-actions"><span class="badge success desktop-only"><span class="status-dot ok"></span>3 hosts</span><div class="segmented desktop-only"><button data-density="compact">紧凑</button><button class="active" data-density="default">默认</button><button data-density="comfortable">舒适</button></div><button class="icon-btn" data-theme-toggle></button><button class="icon-btn" data-token-toggle aria-expanded="false"><i data-lucide="swatch-book"></i></button></div></header>
+  <main class="workspace" style="position:relative">
+    <aside class="paseo-rail"><button class="tool-btn active"><i data-lucide="bot"></i></button><button class="tool-btn"><i data-lucide="folder-tree"></i></button><button class="tool-btn"><i data-lucide="terminal-square"></i></button><button class="tool-btn"><i data-lucide="calendar-clock"></i></button><span style="flex:1"></span><button class="tool-btn"><i data-lucide="settings"></i></button></aside>
+    <aside class="sidebar drawer paseo-sidebar"><div class="panel-header"><span class="panel-title">Workspaces</span><button class="icon-btn panel-actions"><i data-lucide="plus"></i></button></div><div class="scroll-area">
+      <div class="sidebar-section">MacBook · Local</div><div class="workspace-row active"><div class="workspace-row-head"><span class="status-dot wait"></span><strong>Atlas Web</strong><span class="badge warning">输入</span></div><p>Claude · feature/mobile-shell</p></div><div class="workspace-row"><div class="workspace-row-head"><span class="status-dot run"></span><strong>Core API Audit</strong><span class="badge info">运行</span></div><p>Codex · worktree/api-audit</p></div>
+      <div class="sidebar-section">Dev Server · Remote</div><div class="workspace-row"><div class="workspace-row-head"><span class="status-dot ok"></span><strong>Database Migration</strong></div><p>Claude · report complete</p></div><div class="workspace-row"><div class="workspace-row-head"><span class="status-dot run"></span><strong>Visual Regression</strong></div><p>OpenCode · 24 / 48 pages</p></div>
+    </div><div class="nav-list" style="padding:8px"><div class="nav-row"><i data-lucide="monitor-up"></i><span>添加主机</span></div></div></aside>
+    <section class="paseo-center"><div class="workspace-tabs"><div class="workspace-tab active"><span class="status-dot wait"></span><span>Atlas Web</span><i data-lucide="x" style="margin-left:auto"></i></div><div class="workspace-tab"><span class="status-dot run"></span><span>Core API</span><i data-lucide="x" style="margin-left:auto"></i></div><button class="tool-btn"><i data-lucide="plus"></i></button></div><div class="attention-strip"><i data-lucide="circle-alert"></i><span>Agent 需要你选择移动端导航行为</span><button class="btn ghost" style="margin-left:auto;min-height:26px">查看问题</button></div><div class="scroll-area message-list">
+      <article class="message user"><span class="avatar">W</span><div class="message-body">请让移动端、Web 和桌面共享相同的 workspace 状态，但使用各自合适的导航。</div></article>
+      <article class="message"><span class="avatar agent">P</span><div class="message-body"><div class="message-name">Paseo Agent <span class="badge info">Claude Code</span></div>我把 workspace、agent、file 和 terminal 作为共享领域对象。桌面使用标签与分栏，移动端使用 stack route 和 sheet，状态协议保持一致。<div class="tool-event"><div class="tool-event-head"><i data-lucide="list-tree"></i><span>启动 2 个子 Agent</span><span class="badge info" style="margin-left:auto">并行</span></div><div class="tool-event-body">mobile-navigation · Claude Sonnet<br>desktop-tabs · Codex</div></div></div></article>
+      <article class="message"><span class="avatar agent">P</span><div class="message-body"><div class="message-name">Paseo Agent</div>需要确认手机上的文件列表入口：放在顶部操作区，还是放在底部标签中？</div></article>
+    </div><div class="composer-wrap"><div class="composer"><textarea aria-label="消息" placeholder="回复 Agent 或输入 @ 引用文件…"></textarea><div class="composer-footer"><button class="icon-btn"><i data-lucide="paperclip"></i></button><button class="select-chip"><i data-lucide="shield-check"></i>Auto review</button><button class="select-chip"><i data-lucide="brain"></i>Claude</button><span class="badge paseo-mobile-chip">72%</span><button class="send-btn" data-send><i data-lucide="arrow-up"></i></button></div></div></div></section>
+    <aside class="paseo-right"><div class="panel-header"><div class="tabs" data-tabs><button class="tab active" data-tab-target="changes">Changes</button><button class="tab" data-tab-target="files">Files</button><button class="tab" data-tab-target="terminal">Terminal</button></div></div><div class="scroll-area" data-tab-panel="changes"><div class="file-change"><i data-lucide="file-code-2"></i><span>workspace-store.ts</span><span class="stat"><b class="plus">+32</b> <b class="minus">−8</b></span></div><div class="file-change"><i data-lucide="file-code-2"></i><span>mobile-layout.tsx</span><span class="stat"><b class="plus">+48</b></span></div><div class="file-change"><i data-lucide="file-type-2"></i><span>theme.ts</span><span class="stat"><b class="plus">+12</b> <b class="minus">−4</b></span></div><div style="margin:12px;overflow:hidden;border:1px solid var(--border);border-radius:6px"><div class="diff-line add"><span class="diff-mark">+</span>surfaceSidebar: "#f4f4f5"</div><div class="diff-line add"><span class="diff-mark">+</span>statusDotRunning: "#268ae0"</div><div class="diff-line del"><span class="diff-mark">−</span>borderRadius: 12</div><div class="diff-line add"><span class="diff-mark">+</span>borderRadius: 6</div></div></div><div data-tab-panel="files" hidden><div class="nav-list" style="padding:8px"><div class="nav-row"><i data-lucide="folder"></i><span>packages/app</span></div><div class="nav-row"><i data-lucide="file-code-2"></i><span>workspace-store.ts</span></div></div></div><div data-tab-panel="terminal" hidden><div class="terminal-body mono"><span class="prompt">atlas-web</span> npm run dev<br><span class="quiet">ready on http://localhost:5173</span></div></div></aside>
+  </main>
+</div><aside class="token-drawer"><div class="panel-header"><span class="panel-title">多端工作区 / Token</span><button class="icon-btn panel-actions" data-token-close><i data-lucide="x"></i></button></div><div class="token-body"><div class="token-group"><h3>Zinc + 低饱和绿</h3><div class="swatches"><div class="swatch"><div class="swatch-color" style="--swatch:#ffffff"></div><label>surface0</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#f4f4f5"></div><label>surface2</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#e4e4e7"></div><label>surface3</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#20744a"></div><label>accent</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#268ae0"></div><label>running</label></div></div></div><div class="token-group"><h3>精确基线</h3><div class="token-table"><div class="token-row"><span>UI / 正文 / Code</span><code>14 / 15 / 12px</code></div><div class="token-row"><span>图标</span><code>12 / 14 / 16 / 20</code></div><div class="token-row"><span>圆角</span><code>2 / 4 / 6 / 8 / 12</code></div><div class="token-row"><span>间距</span><code>4 / 8 / 12 / 16</code></div><div class="token-row"><span>Diff 行高</span><code>22px</code></div></div></div></div></aside><script src="assets/lucide.js"></script><script src="scripts/gallery.js"></script></body></html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/07-local-first-content.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Local-first 内容编辑器</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/pages.css"></head>
+<body class="theme-content density-default"><div class="app-frame">
+  <header class="utility-bar"><button class="icon-btn mobile-only" data-sidebar-toggle aria-expanded="false"><i data-lucide="menu"></i></button><a class="icon-btn desktop-only" href="index.html"><i data-lucide="layout-grid"></i></a><div class="utility-brand"><span class="utility-mark"><i data-lucide="notebook-pen"></i></span><span class="utility-title">Field Notes</span><span class="utility-kind">Local-first 内容编辑器</span></div><div class="utility-actions"><span class="sync-state"><i data-lucide="cloud-check"></i>已同步</span><button class="icon-btn" data-theme-toggle></button><button class="icon-btn" data-token-toggle aria-expanded="false"><i data-lucide="swatch-book"></i></button></div></header>
+  <main class="workspace" style="position:relative">
+    <aside class="content-global"><div class="panel-header"><span class="panel-title">资料库</span><button class="icon-btn panel-actions"><i data-lucide="plus"></i></button></div><div class="nav-list" style="padding-top:7px"><div class="nav-row active"><i data-lucide="notebook-tabs"></i><span>全部笔记</span><span class="badge">128</span></div><div class="nav-row"><i data-lucide="star"></i><span>收藏</span></div><div class="nav-row"><i data-lucide="clock-3"></i><span>最近</span></div><div class="nav-row"><i data-lucide="archive"></i><span>归档</span></div></div><div class="sidebar-section">笔记本</div><div class="nav-list"><div class="nav-row"><span class="status-dot" style="background:#a65235"></span><span>产品研究</span></div><div class="nav-row"><span class="status-dot" style="background:#577d68"></span><span>旅行记录</span></div><div class="nav-row"><span class="status-dot" style="background:#6c729a"></span><span>读书摘录</span></div></div><div class="nav-list" style="margin-top:auto;padding-bottom:9px"><div class="nav-row"><i data-lucide="trash-2"></i><span>回收站</span></div><div class="nav-row"><i data-lucide="settings"></i><span>设置</span></div></div></aside>
+    <aside class="content-list"><div class="panel-header"><div><div class="panel-title">产品研究</div><div class="panel-meta">24 篇笔记</div></div><button class="icon-btn panel-actions"><i data-lucide="list-filter"></i></button></div><div class="search-box"><i data-lucide="search"></i><span>在笔记中搜索</span></div><div class="scroll-area"><article class="note-row active"><strong>跨端应用的布局策略</strong><p>桌面擅长并行比较，移动端适合监督、通知和即时决策……</p><time>今天 14:32</time></article><article class="note-row"><strong>Claude Code 客户端研究</strong><p>专项覆盖 CloudCLI、Happy、Paseo、Opcode 与现代桌面客户端。</p><time>昨天 21:10</time></article><article class="note-row"><strong>圆角不是越大越现代</strong><p>密度、输入设备和层级共同决定圆角，而不是品牌偏好。</p><time>8 月 28 日</time></article><article class="note-row"><strong>语义色与状态色</strong><p>产品主题、Git diff、syntax 和运行状态应分别建立 token。</p><time>8 月 26 日</time></article></div></aside>
+    <article class="editor-page"><div class="panel-header"><div class="tabs"><button class="tab active">跨端应用的布局策略</button></div><div class="panel-actions"><button class="icon-btn"><i data-lucide="star"></i></button><button class="icon-btn"><i data-lucide="ellipsis"></i></button></div></div><div class="scroll-area"><div class="editor-document"><span class="eyebrow">产品设计 · 多端体验</span><h1>跨端应用的布局策略</h1><div class="byline">最后编辑于今天 14:32 · 1,286 字</div><img class="editor-image" src="assets/mountain.jpg" alt="山谷与湖泊"><p>多端一致性不意味着每个像素完全相同。真正需要共享的是对象、状态、核心流程以及用户对结果的预期。桌面、Web 和手机拥有不同的输入方式，也应该承担不同的任务。</p><blockquote>桌面用于并行与比较，手机用于通知、监督和即时决策。</blockquote><p>在桌面上，侧栏、列表和编辑器可以同时出现；到了手机，应把同一关系重组为列表页、详情页和返回路径。这样既保留信息架构，又避免把三栏直接压缩成三个不可操作的窄栏。</p><p>视觉层面，正文应成为第一信号。导航使用低对比度表面和较小圆角，编辑区保持无框，并通过稳定的行宽、17px 字号与 1.78 行高支持长时间阅读。</p></div></div></article>
+  </main>
+</div><aside class="token-drawer"><div class="panel-header"><span class="panel-title">Local-first 内容 / Token</span><button class="icon-btn panel-actions" data-token-close><i data-lucide="x"></i></button></div><div class="token-body"><div class="token-group"><h3>暖灰阅读色板</h3><div class="swatches"><div class="swatch"><div class="swatch-color" style="--swatch:#fffefb"></div><label>paper</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#f4f1e9"></div><label>sidebar</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#e2ddd1"></div><label>border</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#292722"></div><label>ink</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#a65235"></div><label>accent</label></div></div></div><div class="token-group"><h3>阅读尺寸</h3><div class="token-table"><div class="token-row"><span>正文宽度</span><code>760px</code></div><div class="token-row"><span>正文</span><code>17px / 1.78</code></div><div class="token-row"><span>标题</span><code>34px / 1.2</code></div><div class="token-row"><span>列表摘要</span><code>11px / 1.45</code></div><div class="token-row"><span>结构圆角</span><code>4 / 6 / 8px</code></div></div></div></div></aside><script src="assets/lucide.js"></script><script src="scripts/gallery.js"></script></body></html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/08-media-first.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!doctype html><html lang="zh-CN" class="dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>媒体优先个人应用</title><link rel="stylesheet" href="styles/base.css"><link rel="stylesheet" href="styles/pages.css"></head>
+<body class="theme-media"><div class="app-frame">
+  <header class="utility-bar" style="background:#141619"><button class="icon-btn mobile-only" data-sidebar-toggle aria-expanded="false"><i data-lucide="menu"></i></button><a class="icon-btn desktop-only" href="index.html"><i data-lucide="layout-grid"></i></a><div class="utility-brand"><span class="utility-mark" style="background:#62a7ff;color:#07111d"><i data-lucide="aperture"></i></span><span class="utility-title">Moments</span><span class="utility-kind">媒体优先个人应用</span></div><div class="utility-actions"><button class="icon-btn" title="搜索"><i data-lucide="search"></i></button><button class="icon-btn" title="上传"><i data-lucide="cloud-upload"></i></button><button class="icon-btn" data-token-toggle aria-expanded="false"><i data-lucide="swatch-book"></i></button></div></header>
+  <main class="workspace" style="position:relative">
+    <aside class="media-sidebar"><div class="nav-list" style="padding:10px 8px"><div class="nav-row active"><i data-lucide="images"></i><span>图库</span></div><div class="nav-row"><i data-lucide="search"></i><span>搜索</span></div><div class="nav-row"><i data-lucide="map"></i><span>地点</span></div><div class="nav-row"><i data-lucide="users"></i><span>人物</span></div></div><div class="sidebar-section">资料库</div><div class="nav-list"><div class="nav-row"><i data-lucide="heart"></i><span>收藏</span><span class="badge">38</span></div><div class="nav-row"><i data-lucide="archive"></i><span>归档</span></div><div class="nav-row"><i data-lucide="trash-2"></i><span>最近删除</span></div></div><div class="upload-card"><div class="upload-head"><i data-lucide="cloud-upload"></i><span>正在备份 72%</span><span style="margin-left:auto">148 / 206</span></div><div class="upload-progress"><i></i></div></div></aside>
+    <section class="media-main"><div class="media-toolbar"><div><h1>照片</h1><div class="panel-meta">2026 年 · 1,284 项</div></div><div class="panel-actions"><div class="segmented"><button class="active">日</button><button>月</button><button>年</button></div><button class="icon-btn"><i data-lucide="sliders-horizontal"></i></button></div></div><div class="media-grid">
+      <div class="media-day"><strong>8 月 30 日</strong><span>上海 · 12 项</span><span class="panel-actions"><button class="btn ghost">选择</button></span></div>
+      <figure class="photo-tile tall" style="margin:0"><img src="assets/mountain.jpg" alt="山谷湖泊"><figcaption class="photo-meta"><span>山谷 · 16:42</span><button title="收藏"><i data-lucide="heart"></i></button></figcaption></figure>
+      <figure class="photo-tile wide" style="margin:0"><img src="assets/workspace.jpg" alt="明亮工作空间"><figcaption class="photo-meta"><span>工作室 · 10:18</span><button title="收藏"><i data-lucide="heart"></i></button></figcaption></figure>
+      <figure class="photo-tile" style="margin:0"><img src="assets/landscape.jpg" alt="户外风景"><figcaption class="photo-meta"><span>周末 · 18:06</span><button title="收藏"><i data-lucide="heart"></i></button></figcaption></figure>
+      <figure class="photo-tile" style="margin:0"><img src="assets/landscape.jpg" alt="旅行风景" style="object-position:70% 40%"><figcaption class="photo-meta"><span>沿途 · 18:22</span><button title="收藏"><i data-lucide="heart"></i></button></figcaption></figure>
+      <div class="media-day"><strong>8 月 24 日</strong><span>杭州 · 8 项</span><span class="panel-actions"><button class="btn ghost">选择</button></span></div>
+      <figure class="photo-tile wide" style="margin:0"><img src="assets/mountain.jpg" alt="湖边风景" style="object-position:30% 55%"><figcaption class="photo-meta"><span>湖边 · 07:35</span><button title="收藏"><i data-lucide="heart"></i></button></figcaption></figure>
+      <figure class="photo-tile" style="margin:0"><img src="assets/workspace.jpg" alt="室内空间" style="object-position:80% 50%"><figcaption class="photo-meta"><span>午后 · 13:14</span><button title="收藏"><i data-lucide="heart"></i></button></figcaption></figure>
+    </div></section>
+  </main>
+</div><aside class="token-drawer"><div class="panel-header"><span class="panel-title">媒体优先 / Token</span><button class="icon-btn panel-actions" data-token-close><i data-lucide="x"></i></button></div><div class="token-body"><div class="token-group"><h3>深色 Chrome</h3><div class="swatches"><div class="swatch"><div class="swatch-color" style="--swatch:#101214"></div><label>canvas</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#181b1e"></div><label>surface</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#202429"></div><label>raised</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#2b3036"></div><label>border</label></div><div class="swatch"><div class="swatch-color" style="--swatch:#62a7ff"></div><label>action</label></div></div></div><div class="token-group"><h3>内容优先</h3><div class="token-table"><div class="token-row"><span>网格间距</span><code>6px</code></div><div class="token-row"><span>图片圆角</span><code>6px</code></div><div class="token-row"><span>操作出现</span><code>hover / selection</code></div><div class="token-row"><span>chrome 正文</span><code>11-14px</code></div><div class="token-row"><span>首要视觉</span><code>media content</code></div></div></div></div></aside><script src="assets/lucide.js"></script><script src="scripts/gallery.js"></script></body></html>

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/README.md ADDED Viewed

@@ -0,0 +1,49 @@
+# UI 风格 HTML 样板库
+直接打开 [index.html](index.html) 即可浏览。所有页面是静态 HTML，不需要安装依赖或启动服务器；Lucide 图标和示例图片已经保存在本目录。
+## 页面清单
+| 页面 | 适合的产品 | 主要参考 |
+|---|---|---|
+| [01-dense-ide.html](01-dense-ide.html) | IDE、数据库、API、日志工具 | cdesktop、DBeaver、DBX |
+| [02-monochrome-console.html](02-monochrome-console.html) | Agent 管理台、本地开发控制台 | Opcode |
+| [03-soft-personal-ai.html](03-soft-personal-ai.html) | 个人 AI 助手、消费级桌面工具 | CodePilot、TOKENICODE |
+| [04-responsive-web.html](04-responsive-web.html) | 自托管 Web UI、PWA、多设备访问 | CloudCLI |
+| [05-mobile-supervisor.html](05-mobile-supervisor.html) | 移动审批、通知、远程监督 | Happy |
+| [06-cross-platform-workspace.html](06-cross-platform-workspace.html) | 真正多端的 Agent 工作区 | Paseo |
+| [07-local-first-content.html](07-local-first-content.html) | 笔记、知识库、local-first 编辑器 | Notesnook、Joplin、Outline |
+| [08-media-first.html](08-media-first.html) | 相册、资产库、视觉内容应用 | Immich |
+## 仿造方式
+1. 先复制最接近目标任务的 HTML，不要仅按颜色选择。
+2. 保留 `styles/base.css`，再从 `styles/pages.css` 复制对应 `.theme-*` 和页面组件块。
+3. 先修改页面顶部 `.theme-*` 的语义变量：表面、文字、边框、accent、圆角、字号和面板宽度。
+4. 保留 keyboard focus、reduced motion、safe area 和移动任务重排规则。
+5. 替换演示数据、名称与状态；不要把 demo 中的权限、Git 或同步状态直接当作真实逻辑。
+## 文件结构
+```text
+ui-gallery/
+├─ index.html                 # 风格总览
+├─ 01...08-*.html            # 独立可运行样板
+├─ styles/base.css           # 通用 primitive、token 抽屉和响应式基线
+├─ styles/pages.css          # 八种风格的布局与视觉实现
+├─ scripts/gallery.js        # 主题、密度、drawer、tab 和 demo 交互
+├─ tests/gallery.spec.js     # Playwright 视口、资源与交互检查
+├─ assets/lucide.js          # 本地 icon library
+├─ assets/*.jpg              # 内容/媒体示例图
+└─ screenshots/              # Playwright 验证截图
+```
+这些页面用于设计参考和原型起点，不是生产组件库。进入正式开发后，应将 button、menu、dialog、sheet、tabs、tooltip 等替换为项目所用框架的可访问组件原语。
+页面本身无需安装依赖。仅在需要重复运行自动化校验时执行：
+```powershell
+cd ui-gallery
+npm install
+npm test
+```

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/ATTRIBUTION.md ADDED Viewed

@@ -0,0 +1,9 @@
+# Visual asset attribution
+The gallery uses three local raster photographs from Unsplash as realistic sample content:
+- `workspace.jpg`: photo by Proxyclick Visitor Management, Unsplash photo ID `1497366754035-f200968a6e72`.
+- `mountain.jpg`: photo from Unsplash photo ID `1470770841072-f978cf4d019e`.
+- `landscape.jpg`: photo from Unsplash photo ID `1500530855697-b586d89ba3ee`.
+Icons are provided by the locally vendored [Lucide](https://lucide.dev/) UMD distribution, version 1.37.0, under the ISC license.

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/landscape.jpg ADDED Viewed

Binary file