dsh-island 0.4.0 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # DeepSeek Island · 桌面灵动岛
 
-DeepSeek Harness 的桌面灵动岛插件：像 iPhone 灵动岛一样停在屏幕边缘，实时显示 Agent 在做什么——思考、回答、执行工具、等你确认；展开后是任务控制台，可以看计划进度和用量、停止任务，并直接回答 Agent 的提问。
+DeepSeek Harness 的桌面灵动岛插件：像 iPhone 灵动岛一样停在屏幕边缘，实时显示 Agent 在做什么——思考、回答、执行工具、等你确认；展开后是任务控制台，可以看计划进度、上下文占用和用量、停止任务，直接批准权限请求、回答 Agent 的提问，任务完成时预览回复；另有按时间、模型、会话、轮次统计的用量窗口，并按 DeepSeek 官方价格估算费用。
 
 > 社区插件，非 DeepSeek 官方产品。DeepSeek 名称与鲸鱼标志归其所有者。
 
@@ -10,6 +10,12 @@ DeepSeek Harness 的桌面灵动岛插件：像 iPhone 灵动岛一样停在屏
 | --- | --- |
 | ![任务控制台](docs/console.png) | ![回答提问](docs/ask.png) |
 
+| 批准权限请求 | 有新回复 |
+| --- | --- |
+| ![批准权限请求](docs/approval.png) | ![有新回复](docs/reply.png) |
+
+![用量统计](docs/stats.png)
+
 ![Harness 设置 › 灵动岛](docs/settings.png)
 
 [动画录屏（mp4）](docs/motion.mp4)
@@ -30,16 +36,19 @@ DeepSeek Harness 的桌面灵动岛插件：像 iPhone 灵动岛一样停在屏
 | --- | --- | --- |
 | 待机 | 118 × 32 | 没有任务：只有鲸鱼和一颗呼吸的蓝点 |
 | 紧凑 | 212 × 36 | 任务进行中：鲸鱼 · 状态文字 · 动态指示器，多任务时显示数量 |
-| 弹出 | 312 × 66 | 新任务开始、等待确认、完成、异常时自动弹出几秒；鼠标悬停也会弹出，显示任务标题 |
-| 展开 | 344 × 自适应 | 点击：任务详情、计时、停靠位置、大小、动效 |
+| 弹出 | 312 × 66 | 新任务开始、等待确认、完成、异常时自动弹出几秒，显示任务标题；完成时显示回复开头 |
+| 展开 | 344 × 自适应 | 鼠标停留约 0.7 秒或单击：任务控制台 |
 | 竖向 | 32 × 78 / 36 × 104 | 停靠在左侧或右侧居中时变为竖条，悬停或提醒时横向舒展 |
 
 尺寸、圆角、鲸鱼和指示器的位置都随形态一起用带轻微回弹的弹簧曲线过渡；状态切换时文字和图标做模糊交叉淡入。
 
+任务进行中，鲸鱼外圈是**上下文占用环**：按当前上下文占模型窗口的比例描边，70% 以下绿色，70% 起黄色，90% 起红色并轻轻呼吸，提示快要整理上下文了。
+
 ## 使用
 
-- 单击胶囊展开任务控制台，再次单击或按 Esc 收起；鼠标离开 6 秒后自动收起。
-- “打开 Harness”回到主窗口；确认和问题仍在 Harness 中处理。
+- 鼠标在灵动岛上停留片刻即展开任务控制台，移开后自动收起；悬停展开后再单击可固定，不随鼠标离开收起。可在设置中关闭悬停展开。
+- 单击胶囊展开或收起，按 Esc 收起；单击展开的面板在鼠标离开 6 秒后自动收起。
+- “打开 Harness”回到主窗口；面板底部的柱状图按钮或托盘菜单「用量统计」打开用量窗口。
 - “隐藏”只隐藏灵动岛，点系统托盘的蓝色鲸鱼可重新显示；右键托盘可选显示器或退出。
 - 透明区域不拦截鼠标；窗口置顶但出现时不抢输入焦点。
 
@@ -47,11 +56,11 @@ DeepSeek Harness 的桌面灵动岛插件：像 iPhone 灵动岛一样停在屏
 
 | 什么时候 | 显示什么 |
 | --- | --- |
-| 有任务进行中 | 任务标题与计时；Agent 计划的进度条（如 4/7）和当前步骤；最近几步工具（读取文件、编辑、终端…）；模型、上下文大小、缓存命中率、工具次数、输出 tokens；其他同时进行的任务；**停止任务**按钮 |
-| 刚结束 | 结果、最终计划进度、本次用量，以及最近几个任务 |
-| 空闲 | 今天完成的任务数、工作时长、DeepSeek 账户余额（未登录账号时显示今日 tokens）；过去 24 小时每小时的 token 柱状图与缓存命中率；最近几个任务（结果、时长、多久以前） |
+| 有任务进行中 | 任务标题与计时；Agent 计划的进度条（如 4/7）和当前步骤；最近几步工具（读取文件、编辑、终端…）；模型、上下文占用（如 412K / 1.0M (39%)）、缓存命中率、工具次数、输出 tokens；其他同时进行的任务；**停止任务**按钮 |
+| 刚结束 | **有新回复**：Agent 最后一条回复的开头（点击回到 Harness 看全文）；结果、最终计划进度、本次用量 |
+| 空闲 | 今天完成的任务数、工作时长、DeepSeek 账户余额（未登录账号时显示今日 tokens）；过去 24 小时每小时的 token 柱状图、缓存命中率和今日估算费用；最近几个任务（结果、时长、多久以前） |
 
-**停止任务**要点两次（第一次变红确认），效果与 Harness 里的停止按钮相同，只对顶层任务生效；子智能体不会单独列为任务，除非它在等你确认或出错。完成记录保存在 `%USERPROFILE%\.dsh\dsh-island\history.json`，只含标题、结果、时长、工具次数和 token 数，保留 7 天。
+**停止任务**要点两次（第一次变红确认），效果与 Harness 里的停止按钮相同，只对顶层任务生效；子智能体不会单独列为任务，除非它在等你确认或出错。用量数据来自 Harness 自己的会话记录（`ctx.sessionQuery`）：启用后在后台补算最近 30 天的会话，之后跟随实时事件更新，汇总保存在 `%USERPROFILE%\.dsh\dsh-island\usage.json`，只含会话标题、每轮的模型、时间、结果、调用与工具次数、token 数和估算费用，保留 35 天，不含对话内容。
 
 账户余额通过 Harness 自己的账户服务读取（与「设置 › 账户」相同），只在用 DeepSeek 账号登录时可用；灵动岛看不到任何令牌或 API Key。打开面板时最多每分钟刷新一次，另外每 10 分钟刷新一次。
 
@@ -61,6 +70,30 @@ Agent 用 `ask_user_question` 提问时，灵动岛自动展开提问卡：单
 
 计划审阅（plan mode）和带长说明的问题需要看全文，仍在 Harness 中回答。可在设置中关闭「在灵动岛回答提问」。
 
+## 在灵动岛批准权限请求
+
+Agent 要执行需要授权的操作（运行命令、修改文件、访问网址等）时，灵动岛变为“需要你批准”并自动展开审批卡，显示是哪个工具、为什么、具体要做什么（命令全文、文件路径或网址）。可以 **允许一次** 或 **拒绝**；按钮在卡片出现后约 0.6 秒才可点，避免误触。Harness 窗口里的审批卡照常可用，**哪边先批用哪边**，灵动岛先批时 Harness 里的卡随之撤下；没有打开 Harness 窗口时灵动岛就是审批入口。多个请求依次处理。
+
+“始终允许”等持久授权不在灵动岛提供，仍在 Harness 中设置；子智能体的请求也在 Harness 中处理。可在设置中关闭「在灵动岛批准权限请求」。
+
+## 用量统计
+
+从面板底部的柱状图按钮或托盘菜单打开，范围可选 **今天**（按小时）、**7 天**、**30 天**（按天）：
+
+- 概览：总 tokens、估算费用、缓存命中率、轮次（完成/其他）、工作时长。
+- 堆叠柱状图：缓存命中 / 未命中输入 / 输出，悬停查看每段的数量、费用和轮次。
+- 按模型：tokens、估算费用、轮次。
+- 按会话：每个会话的轮次、tokens、费用，点开看每一轮的结束时间、模型、调用与工具次数、各类 tokens 和费用。
+
+费用按 [DeepSeek 官方价格](https://api-docs.deepseek.com/zh-cn/quick_start/pricing)（2026-10-27 查询，人民币/百万 tokens）逐次调用估算：
+
+| 模型 | 时段 | 缓存命中输入 | 未命中输入 | 输出 |
+| --- | --- | --- | --- | --- |
+| deepseek-flash | 空闲 / 高峰 | 0.02 / 0.04 | 1 / 2 | 4 / 8 |
+| deepseek-v4-pro | 空闲 / 高峰 | 0.15 / 0.30 | 4.5 / 9 | 13.5 / 27 |
+
+高峰时段为北京时间工作日 9:00–12:00、14:00–18:00（法定节假日无法识别，按工作日计）。写入缓存的输入按未命中价，输出含思考内容；已下线的 `deepseek-v4-flash` 按 Flash 价计；没有官方价格的模型不计入费用。估算仅供参考，实际扣费以 DeepSeek 账单为准。
+
 ## 在 Harness 中设置
 
 位置、大小等选项在 Harness 的 **设置 › 灵动岛** 中，修改后立即生效，无需重启：
@@ -71,8 +104,10 @@ Agent 用 `ask_user_question` 提问时，灵动岛自动展开提问卡：单
 | 显示灵动岛 | 关闭即隐藏；打开时会重新显示 |
 | 大小 | 小巧、适中、舒展 |
 | 弹出提醒 | 任务开始、完成、需要确认或出错时短暂放大 |
-| 显示任务内容 | 关闭后不显示任务标题、计划内容和工具名，只显示状态 |
+| 显示任务内容 | 关闭后不显示任务标题、计划内容、工具名、审批详情和回复预览，只显示状态 |
 | 在灵动岛回答提问 | Agent 提问时自动展开提问卡，可直接回答 |
+| 在灵动岛批准权限请求 | 需要授权时显示审批卡，可允许一次或拒绝 |
+| 悬停展开面板 | 鼠标停留即展开，移开收起；关闭后需要单击 |
 | 显示账户余额 | 空闲时显示 DeepSeek 账户余额 |
 | 减少动态效果 | 关闭循环动画和弹性过渡（也跟随系统设置） |
 

package/desktop/index.html

@@ -11,6 +11,7 @@
     <div class="surface">
       <button id="capsule" class="capsule" aria-label="展开 DeepSeek 灵动岛" aria-expanded="false" aria-controls="panel">
         <span class="lead" aria-hidden="true">
+          <svg class="ctx-ring" viewBox="0 0 40 40" aria-hidden="true"><circle class="ctx-track" cx="20" cy="20" r="18"/><circle id="ctx-arc" class="ctx-arc" cx="20" cy="20" r="18" pathLength="100"/></svg>
           <span class="whale"></span>
           <span class="spout"><i></i><i></i><i></i></span>
         </span>
@@ -35,6 +36,16 @@
       </button>
 
       <section id="panel" class="panel" inert aria-label="任务详情">
+        <form id="approve" class="card ask approve" hidden autocomplete="off">
+          <div class="ask-top"><span class="ask-dot" aria-hidden="true"></span><span id="approve-title">需要你批准</span><span id="approve-count" class="num"></span></div>
+          <p id="approve-reason" class="ask-q"></p>
+          <div id="approve-detail" class="approve-detail"><span id="approve-label"></span><code id="approve-text"></code></div>
+          <div class="ask-actions"><span id="approve-status" class="ask-status" role="status"></span><button id="approve-reject" type="button" class="ask-skip approve-reject">拒绝</button><button id="approve-allow" type="submit" class="ask-next">允许一次</button></div>
+        </form>
+        <div id="reply" class="card reply" hidden>
+          <div class="reply-head"><span class="reply-dot" aria-hidden="true"></span>有新回复<span class="reply-hint">回到 Harness 查看全文</span></div>
+          <p id="reply-text"></p>
+        </div>
         <form id="ask" class="card ask" hidden autocomplete="off">
           <div class="ask-top"><span class="ask-dot" aria-hidden="true"></span><span id="ask-title">Agent 在问你</span><span id="ask-step" class="num"></span></div>
           <p id="ask-question" class="ask-q"></p>
@@ -82,6 +93,7 @@
         <div class="footer">
           <button id="stop" class="stop" hidden><span class="stop-glyph" aria-hidden="true"></span><span id="stop-label">停止任务</span></button>
           <button id="open-harness" class="open-harness">打开 Harness <span aria-hidden="true">↗</span></button>
+          <button id="stats" class="icon-button" aria-label="用量统计" title="用量统计"><svg viewBox="0 0 16 16" aria-hidden="true" width="14" height="14"><path d="M2.5 13.5h11M4.5 11V7.5M8 11V3.5M11.5 11V6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
           <button id="more" class="icon-button" aria-label="更多" title="显示器、隐藏、退出">···</button>
           <button id="hide" class="hide" title="可从系统托盘重新显示">隐藏</button>
         </div>

package/desktop/island.css

@@ -281,6 +281,28 @@ p{margin:3px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
 .ask-next{height:28px;padding:0 14px;border-radius:9px;font-size:11.5px;font-weight:600;color:#1b1203;background:#f5b544}
 .ask-next:hover{background:#ffc35c}
 .ask-next:disabled{opacity:.45;cursor:default}
+.ctx-ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);transform:rotate(-90deg);opacity:0;transition:opacity .4s;pointer-events:none;overflow:visible}
+.ctx-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:2.6}
+.ctx-arc{fill:none;stroke:var(--ctx-color,#3ddc91);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:var(--ctx-pct,0) 100;transition:stroke-dasharray .8s var(--spring),stroke .4s}
+.island:not([data-state="idle"]):not([data-state="offline"])[data-ctx] .ctx-ring{opacity:1}
+.island[data-ctx="ok"]{--ctx-color:#3ddc91}.island[data-ctx="warn"]{--ctx-color:#f5b544}.island[data-ctx="full"]{--ctx-color:#ff6b6b}
+.island[data-ctx="full"] .ctx-arc{animation:pulse 1.6s ease-in-out infinite}
+.approve{border-color:color-mix(in srgb,#ff9b5e 34%,transparent);background:linear-gradient(180deg,rgba(255,155,94,.08),rgba(255,255,255,.03))}
+.approve .ask-dot{background:#ff9b5e;--c:#ff9b5e}
+.approve .ask-top{color:#ffc39b}
+.approve-detail{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06)}
+.approve-detail:empty,.approve-detail[hidden]{display:none}
+.approve-detail #approve-label{font-size:10px;color:var(--muted)}
+.approve-detail code{font:11.5px/1.5 "Cascadia Code",Consolas,"Microsoft YaHei UI",monospace;color:#f3f5ff;white-space:pre-wrap;word-break:break-all;max-height:84px;overflow:auto}
+.approve-reject{color:#ffb4b4}
+.approve-reject:hover{background:rgba(255,107,107,.14)!important;color:#ffd0d0!important}
+.reply{border-color:color-mix(in srgb,#3ddc91 26%,transparent)}
+.reply-head{display:flex;align-items:center;gap:7px;font-size:11px;color:#9ff0c6}
+.reply-hint{margin-left:auto;font-size:10px;color:var(--faint)}
+.reply-dot{width:7px;height:7px;border-radius:50%;background:#3ddc91}
+#reply-text{margin:6px 0 0;font-size:12px;line-height:1.55;color:#e8ecf8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.ghost{height:30px;padding:0 10px;border-radius:10px;font-size:11.5px;color:var(--muted)}
+.ghost:hover{background:rgba(255,255,255,.06);color:#e5e9f7}
 .hint{margin:0 2px;font-size:10.5px;line-height:1.5;color:var(--faint)}
 
 .footer{display:flex;align-items:center;gap:6px;margin-top:2px}
@@ -339,3 +361,10 @@ body[data-motion="reduced"] .ind-completed .tick{stroke-dashoffset:0}
   *,*::before,*::after{animation:none!important;transition-duration:.08s!important;transition-delay:0s!important}
   .ind-completed .tick{stroke-dashoffset:0}
 }
+.approve-detail code.plain{font-family:inherit}
+.island[data-alert="approval"]{--tint:#ff9b5e}
+.reply{cursor:pointer;transition:background-color .2s}
+.reply:hover{background:rgba(61,220,145,.07)}
+.footer button{white-space:nowrap}
+#stats svg{display:block;margin:auto}
+#stats+#more{margin-left:0}

package/desktop/main.cjs

@@ -27,9 +27,10 @@ async function start() {
   };
   // 本地只保存“是否隐藏”和显示器；位置、大小、动效来自 Harness 设置（预览模式下才在本地保存）。
   let settings=normalizeSettings(read('settings.json',{}));
-  let prefs={enabled:true,popups:true,details:true,balance:true,questions:true};
+  let prefs={enabled:true,popups:true,details:true,balance:true,questions:true,approvals:true,hoverExpand:true};
   let balance=null;
-  let answerResults={};
+  let answerResults={},approvalResults={};
+  let statsWin=null,statsRange='today';
   let history=Array.isArray(read('history.json',[]))?read('history.json',[]):[];
   let win, tray, ignore=true, hitbox=null, quitting=false, activity={state:'idle',activeCount:0}, demoTimer;
   const save=()=>write('settings.json',settings);
@@ -62,7 +63,8 @@ async function start() {
       day:{hours,tokens:hours.reduce((a,b)=>a+b,0),cacheRate:input+cache>0?Math.round(cache/(input+cache)*100):null}
     };
   };
-  const payload=()=>({activity,settings,prefs,answerResults,balance:prefs.balance?balance:null,preview:demo,history:summary(),displays:screen.getAllDisplays().map((d,i)=>({id:d.id,label:d.label||`显示器 ${i+1}`}))});
+  // Harness 侧的用量账本（含历史会话补算）优先；没有时退回本地的完成记录。
+  const payload=()=>({activity,settings,prefs,answerResults,approvalResults,balance:prefs.balance?balance:null,preview:demo,history:activity.usage??summary(),displays:screen.getAllDisplays().map((d,i)=>({id:d.id,label:d.label||`显示器 ${i+1}`}))});
   const send=()=>{ if(win && !win.isDestroyed())win.webContents.send('island:snapshot',payload()); };
   const position=()=>{
     const display=screen.getAllDisplays().find(d=>d.id===settings.displayId)||screen.getPrimaryDisplay();
@@ -76,11 +78,29 @@ async function start() {
   const update=value=>{settings=normalizeSettings({...settings,...value});save();sync();};
   const applyPrefs=value=>{
     if(!value||typeof value!=='object')return;
-    prefs={enabled:value.enabled!==false,popups:value.popups!==false,details:value.details!==false,balance:value.balance!==false,questions:value.questions!==false};
+    prefs={enabled:value.enabled!==false,popups:value.popups!==false,details:value.details!==false,balance:value.balance!==false,questions:value.questions!==false,approvals:value.approvals!==false,hoverExpand:value.hoverExpand!==false};
     settings=normalizeSettings({...settings,position:value.position,scale:SIZES[value.size]??1,motion:value.reduceMotion?'reduced':'full'});
     save();sync();
   };
   const openHarness=()=>shell.openExternal('dsh://open').catch(()=>{});
+  // 用量统计窗口：数据由 Harness 侧的用量账本按需计算（预览模式用示例数据）。
+  const requestStats=range=>{
+    statsRange=['today','7d','30d'].includes(range)?range:statsRange;
+    if(demo){const data=demoStats(statsRange);setTimeout(()=>statsWin?.webContents.send('stats:data',data),120);return;}
+    if(process.send)process.send({type:'stats',range:statsRange});
+    else statsWin?.webContents.send('stats:data',null);
+  };
+  const openStats=()=>{
+    if(statsWin&&!statsWin.isDestroyed()){statsWin.show();statsWin.focus();requestStats(statsRange);return;}
+    statsWin=new BrowserWindow({width:860,height:680,minWidth:620,minHeight:480,show:false,title:'用量统计 · DeepSeek 灵动岛',backgroundColor:'#0b0e17',autoHideMenuBar:true,
+      webPreferences:{preload:path.join(__dirname,'stats-preload.cjs'),contextIsolation:true,nodeIntegration:false,sandbox:true}});
+    statsWin.setMenuBarVisibility(false);
+    statsWin.webContents.setWindowOpenHandler(({url})=>{if(/^https:\/\/api-docs\.deepseek\.com\//.test(url))shell.openExternal(url).catch(()=>{});return {action:'deny'};});
+    statsWin.webContents.on('will-navigate',event=>event.preventDefault());
+    statsWin.once('ready-to-show',()=>statsWin.show());
+    statsWin.on('closed',()=>{statsWin=null;});
+    statsWin.loadFile(path.join(__dirname,'stats.html'),{query:{preview:demo?'1':''}});
+  };
   const menu=()=>Menu.buildFromTemplate([
     {label:visible()?'隐藏灵动岛':'显示灵动岛',click:()=>visible()?hide():show()},
     {label:'显示器',submenu:screen.getAllDisplays().map((d,i)=>({label:d.label||`显示器 ${i+1}`,type:'radio',checked:(settings.displayId??screen.getPrimaryDisplay().id)===d.id,click:()=>update({displayId:d.id})}))},
@@ -91,6 +111,7 @@ async function start() {
       {label:'播放全部状态',click:()=>playDemo()}
     ]:[{label:'位置与大小：Harness 设置 › 灵动岛',click:openHarness}]),
     {type:'separator'},
+    {label:'用量统计',click:openStats},
     {label:'打开 DeepSeek Harness',click:openHarness},
     {label:'退出灵动岛',click:()=>app.quit()}
   ]);
@@ -118,6 +139,14 @@ async function start() {
     if(process.send)process.send({type:'answer',callId,answers:clean});
   });
   ipcMain.on('island:panel',event=>{if(trusted(event)&&process.send)process.send({type:'panel-open'});});
+  ipcMain.on('island:stats',event=>{if(trusted(event))openStats();});
+  ipcMain.on('stats:request',(event,range)=>{if(statsWin&&event.sender===statsWin.webContents&&event.senderFrame===statsWin.webContents.mainFrame)requestStats(range);});
+  ipcMain.on('island:approve',(event,id,outcome)=>{
+    if(!trusted(event)||typeof id!=='string'||!['allowed-once','rejected'].includes(outcome))return;
+    if(!(activity.approvals||[]).some(a=>a.id===id))return;
+    if(demo){approvalResults={[id]:{ok:true,at:Date.now()}};activity={...activity,approvals:activity.approvals.filter(a=>a.id!==id)};send();return;}
+    if(process.send)process.send({type:'approve',id,outcome});
+  });
   ipcMain.on('island:stop',(event,sessionId)=>{
     if(!trusted(event)||typeof sessionId!=='string'||sessionId!==activity.sessionId||!activity.stoppable)return;
     if(demo){setDemoState('paused');return;}
@@ -133,11 +162,12 @@ async function start() {
     const busy=!done;
     activity={state,title:'重构登录模块并补齐测试',sessionId:'preview',activeCount:busy?2:0,started:Date.now()-192000,ended:done?Date.now():0,
       tool:state==='tools'?'str_replace_editor':'',stoppable:busy&&state!=='offline',
-      detail:state==='idle'?null:{plan:{total:7,done:state==='completed'?7:4,current:state==='completed'?'':'补齐登录失败场景的单元测试'},trail:['read','grep','str_replace_editor','bash'],toolCount:23,model:'deepseek-v4',contextTokens:63400,outputTokens:8210,cacheRate:94},
+      detail:state==='idle'?null:{plan:{total:7,done:state==='completed'?7:4,current:state==='completed'?'':'补齐登录失败场景的单元测试'},trail:['read','grep','str_replace_editor','bash'],toolCount:23,model:'deepseek-v4-pro',contextTokens:state==='compacting'?968000:412000,contextWindow:1048576,outputTokens:8210,cacheRate:94,...(state==='completed'?{reply:'登录模块已拆成 3 个文件，新增 14 个单元测试全部通过。验证码过期场景需要后端配合，我在 TODO 里留了说明。'}:{})},
       sessions:busy?[{id:'preview',title:'重构登录模块并补齐测试',state,started:Date.now()-192000},{id:'p2',title:'整理周报数据',state:'streaming',started:Date.now()-41000}]:[],
       questions:state==='waiting'?[{callId:'demo-ask',sessionId:'preview',state:'open',title:'重构登录模块并补齐测试',questions:[
         {id:'framework',header:'测试框架',question:'登录模块的单元测试用哪个框架？',multiSelect:false,options:[{label:'Vitest',description:'和现有构建工具一致，速度快'},{label:'Jest',description:'生态成熟，迁移成本略高'},{label:'node:test',description:'零依赖'}]},
         {id:'cases',header:'覆盖场景',question:'需要覆盖哪些失败场景？',multiSelect:true,options:[{label:'密码错误'},{label:'账号锁定'},{label:'验证码过期'}]}]}]:[],
+      approvals:state==='waiting'?[{id:'demo-approval',sessionId:'preview',title:'重构登录模块并补齐测试',at:Date.now(),toolName:'bash',reason:'运行测试需要执行命令',detail:{label:'命令',text:'npm test -- --coverage src/auth',mono:true}}]:[],
       finished:[]};
     if(demo&&!history.length){
       const sample=[['修复首页加载白屏','completed',22,312,18],['写一份竞品对比表','completed',17,146,9],['整理接口文档','completed',9,205,14],['升级依赖并跑测试','error',3,88,6],['生成周报图表','completed',1.5,131,11]];
@@ -146,12 +176,32 @@ async function start() {
     }
     send();
   };
+  const demoStats=range=>{
+    const days=range==='30d'?30:range==='7d'?7:1,byHour=range==='today',start=new Date();start.setHours(0,0,0,0);start.setDate(start.getDate()-(days-1));
+    const from=start.getTime(),n=byHour?24:days,nowH=new Date().getHours();
+    const wave=i=>byHour?(i<=nowH&&i>=Math.min(9,Math.max(0,nowH-6))?0.4+Math.abs(Math.sin(i*1.7)):0):(0.3+Math.abs(Math.sin(i*2.1))*(i%7===5||i%7===6?0.3:1));
+    const buckets=Array.from({length:n},(_,i)=>{const w=wave(i),d=new Date(from);if(byHour)d.setHours(i);else d.setDate(d.getDate()+i);
+      const cacheRead=Math.round(w*(byHour?380000:2.6e6)),input=Math.round(w*(byHour?21000:150000)),output=Math.round(w*(byHour?9000:64000));
+      return {start:d.getTime(),label:byHour?`${i}:00`:`${d.getMonth()+1}/${d.getDate()}`,cacheRead,input,output,cost:(cacheRead*0.02+input*1+output*4)/1e6*(i%3?1:2.2),turns:w?Math.max(1,Math.round(w*(byHour?3:14))):0};});
+    const sum=k=>buckets.reduce((a,b)=>a+b[k],0),tokens=sum('cacheRead')+sum('input')+sum('output');
+    const titles=['重构登录模块并补齐测试','整理周报数据','修复首页加载白屏','写一份竞品对比表','整理接口文档','升级依赖并跑测试'];
+    const sessions=titles.slice(0,byHour?4:6).map((title,i)=>{const share=[.38,.22,.16,.11,.08,.05][i],turns=Math.max(1,Math.round(sum('turns')*share)),last=Date.now()-i*(byHour?3600e3:86400e3*days/7);
+      const items=Array.from({length:Math.min(turns,8)},(_,k)=>{const end=last-k*1500e3,inp=9000+k*700,cr=120000+k*9000,out=3800+k*300,model=i===0&&k<2?'deepseek-v4-pro':'deepseek-flash';
+        return {turn:turns-k,start:end-(120+k*40)*1000,end,state:k===2&&i===3?'error':'completed',model,calls:3+k%4,tools:5+k%6,input:inp,cacheRead:cr,output:out,cost:model==='deepseek-flash'?(inp+cr*0.02+out*4)/1e6:(inp*4.5+cr*0.15+out*13.5)/1e6,priced:true};});
+      return {id:'demo'+i,title,tokens:Math.round(tokens*share),cost:sum('cost')*share,turns,last,items};});
+    return {range,from,to:Date.now(),byHour,buckets,preview:true,
+      totals:{tokens,input:sum('input'),cacheRead:sum('cacheRead'),output:sum('output'),cost:sum('cost'),unpricedTokens:0,turns:sum('turns'),completed:Math.round(sum('turns')*.93),ms:sum('turns')*184000,cacheRate:tokens?Math.round(sum('cacheRead')/(sum('cacheRead')+sum('input'))*100):null},
+      models:[{model:'deepseek-flash',priced:true,tokens:Math.round(tokens*.78),cost:sum('cost')*.46,turns:Math.round(sum('turns')*.8)},{model:'deepseek-v4-pro',priced:true,tokens:Math.round(tokens*.22),cost:sum('cost')*.54,turns:Math.round(sum('turns')*.2)}],
+      sessions,scanned:42};
+  };
   const playDemo=()=>{clearInterval(demoTimer);let i=0;const order=['idle','thinking','streaming','tools','waiting','completed','paused','error','reconnecting','compacting','offline'];setDemoState(order[i++]);demoTimer=setInterval(()=>setDemoState(order[i++%order.length]),4500);};
   process.on('message',message=>{
     if(message?.type==='shutdown')app.quit();
     if(message?.type==='prefs')applyPrefs(message.data);
     if(message?.type==='show')show();
     if(message?.type==='answer-result'&&typeof message.callId==='string'){answerResults={...Object.fromEntries(Object.entries(answerResults).filter(([,r])=>Date.now()-r.at<300000)),[message.callId]:{ok:!!message.ok,reason:String(message.reason||'').slice(0,80),at:Date.now()}};send();}
+    if(message?.type==='approval-result'&&typeof message.id==='string'){approvalResults={...Object.fromEntries(Object.entries(approvalResults).filter(([,r])=>Date.now()-r.at<300000)),[message.id]:{ok:!!message.ok,reason:String(message.reason||'').slice(0,80),at:Date.now()}};send();}
+    if(message?.type==='stats'&&statsWin&&!statsWin.isDestroyed())statsWin.webContents.send('stats:data',message.data??null);
     if(message?.type==='balance'){balance=message.data&&Array.isArray(message.data.wallets)?message.data:null;send();}
     if(message?.type==='activity'&&Object.hasOwn(STATES,message.data?.state)){activity=message.data;remember(activity.finished);send();}
   });
@@ -175,7 +225,8 @@ async function start() {
   screen.on('display-metrics-changed',position); screen.on('display-removed',position);screen.on('display-added',position);
   app.on('second-instance',show);
   win.on('close',event=>{if(!quitting){event.preventDefault();hide();}});
-  app.on('before-quit',()=>{quitting=true;clearInterval(cursorTimer);clearInterval(demoTimer);tray?.destroy();});
+  app.on('before-quit',()=>{quitting=true;statsWin?.destroy();clearInterval(cursorTimer);clearInterval(demoTimer);tray?.destroy();});
   if(process.send) process.send({type:'ready'});
   if(demo && process.argv.includes('--cycle'))playDemo();
+  if(process.argv.includes('--stats'))openStats();
 }

package/desktop/preload.cjs

@@ -10,5 +10,7 @@ contextBridge.exposeInMainWorld('island',{
   stop:sessionId=>ipcRenderer.send('island:stop',sessionId),
   panel:()=>ipcRenderer.send('island:panel'),
   answer:(callId,answers)=>ipcRenderer.send('island:answer',callId,answers),
+  approve:(id,outcome)=>ipcRenderer.send('island:approve',id,outcome),
+  stats:()=>ipcRenderer.send('island:stats'),
   preview:state=>ipcRenderer.send('island:preview',state)
 });

package/desktop/renderer.js

@@ -3,8 +3,8 @@ import {STATES} from '../src/state.js';
 const $=id=>document.getElementById(id);
 const island=$('island'),stage=$('stage'),bridge=window.island;
 let current={activity:{state:'idle'},settings:{position:'top-center',scale:1,motion:'full'}};
-let expanded=false,peek=false,burstUntil=0,lastState='',boundsFrame,burstTimer,peekTimer,leaveTimer,armTimer,listKey='',autoOpened=false;
-const drafts=new Map(),seenAsk=new Set();
+let expanded=false,peek=false,burstUntil=0,lastState='',boundsFrame,burstTimer,peekTimer,leaveTimer,armTimer,hoverTimer,listKey='',autoOpened=false,hoverOpened=false,lastReply='';
+const drafts=new Map(),seenAsk=new Set(),seenApproval=new Map(),sentApproval=new Map();
 
 // 出现时短暂"弹出"以示提醒；思考仅在新任务开始时弹出。
 const BURST={thinking:1700,waiting:3600,completed:3000,error:3800,paused:2200,offline:2600};
@@ -41,7 +41,8 @@ function applyShape(){
 function fitPanel(){island.style.height=expanded?`${Math.min(innerHeight-24,$('panel').scrollHeight+76)}px`:'';}
 
 function expand(value){
-  expanded=value;peek=false;clearTimeout(peekTimer);
+  expanded=value;peek=false;clearTimeout(peekTimer);clearTimeout(hoverTimer);
+  if(!value)hoverOpened=false;
   island.dataset.expanded=String(value);
   $('capsule').setAttribute('aria-expanded',String(value));
   $('capsule').setAttribute('aria-label',value?'收起 DeepSeek 灵动岛':'展开 DeepSeek 灵动岛');
@@ -56,18 +57,21 @@ function burst(ms){
   burstTimer=setTimeout(applyShape,ms+20);applyShape();
 }
 
-// 悬停预览：轻停片刻再舒展，离开后收回；展开时离开过久自动收起。
+// 悬停：轻停片刻先舒展；停留更久（可在设置里关闭）直接展开面板，离开后收回。
+const busyHere=()=>!!(askOf()||approvalOf()||document.activeElement?.matches('select,input'));
 island.addEventListener('mouseenter',()=>{
-  clearTimeout(leaveTimer);clearTimeout(peekTimer);
-  if(!expanded)peekTimer=setTimeout(()=>{peek=true;applyShape();},140);
+  clearTimeout(leaveTimer);clearTimeout(peekTimer);clearTimeout(hoverTimer);
+  if(expanded)return;
+  peekTimer=setTimeout(()=>{peek=true;applyShape();},140);
+  if(current.prefs?.hoverExpand!==false)hoverTimer=setTimeout(()=>{if(!expanded){hoverOpened=true;autoOpened=false;expand(true);}},700);
 });
 island.addEventListener('mouseleave',()=>{
-  clearTimeout(peekTimer);
+  clearTimeout(peekTimer);clearTimeout(hoverTimer);
   if(peek){peekTimer=setTimeout(()=>{peek=false;applyShape();},220);}
-  if(expanded)leaveTimer=setTimeout(()=>{if(expanded&&!askOf()&&!document.activeElement?.matches('select,input'))expand(false);},6000);
+  if(expanded)leaveTimer=setTimeout(()=>{if(expanded&&!busyHere())expand(false);},hoverOpened?450:6000);
 });
 
-$('capsule').addEventListener('click',()=>{autoOpened=false;expand(!expanded);});
+$('capsule').addEventListener('click',()=>{autoOpened=false;const pinned=hoverOpened;hoverOpened=false;clearTimeout(hoverTimer);if(pinned&&expanded){applyShape();return;}expand(!expanded);});
 document.addEventListener('keydown',e=>{if(e.key==='Escape'&&expanded)expand(false);});
 document.addEventListener('contextmenu',e=>{e.preventDefault();bridge.menu();});
 // 停止任务需要点两次：第一次变红确认，3 秒内再点才真正停止。
@@ -78,6 +82,8 @@ $('stop').addEventListener('click',()=>{
 });
 $('more').addEventListener('click',()=>bridge.menu());
 $('open-harness').addEventListener('click',()=>bridge.open());
+$('stats').addEventListener('click',()=>bridge.stats?.());
+$('reply').addEventListener('click',()=>bridge.open());
 $('hide').addEventListener('click',()=>{expand(false);bridge.hide();});
 for(const [key,value] of Object.entries(STATES)){const o=document.createElement('option');o.value=key;o.textContent=value.label;$('demo-state').append(o);}
 $('demo-state').addEventListener('change',()=>bridge.preview($('demo-state').value));
@@ -154,6 +160,42 @@ function advance(){
 $('ask').addEventListener('submit',e=>{e.preventDefault();if(!$('ask-next').disabled)advance();});
 $('ask-skip').addEventListener('click',()=>{const c=currentAsk();if(!c)return;c.ans.selected=[];c.ans.custom='';$('ask-custom').value='';advance();});
 
+// 审批卡：在灵动岛里允许一次或拒绝工具调用；出现后短暂锁定按钮，防止误点。
+function approvalOf(){return current.prefs?.approvals!==false?(current.activity?.approvals||[])[0]:undefined;}
+function renderApprove(){
+  const a=approvalOf();$('approve').hidden=!a;
+  if(!a)return false;
+  if(!seenApproval.has(a.id))seenApproval.set(a.id,Date.now());
+  const details=current.prefs?.details!==false,count=(current.activity.approvals||[]).length;
+  $('approve-title').textContent=`${toolLabel(a.toolName)} 需要你批准`+(details&&a.title?` · ${a.title}`:'');
+  $('approve-count').textContent=count>1?`还有 ${count-1} 个`:'';
+  $('approve-reason').textContent=a.reason||'Agent 想执行一个需要授权的操作。';
+  const detail=details?a.detail:null;
+  $('approve-detail').hidden=!detail;
+  if(detail){$('approve-label').textContent=detail.label;$('approve-text').textContent=detail.text;$('approve-text').classList.toggle('plain',!detail.mono);}
+  const sent=sentApproval.get(a.id),result=current.approvalResults?.[a.id],failed=result&&!result.ok&&result.at>(sent||0);
+  if(failed)sentApproval.delete(a.id);
+  const sending=sentApproval.has(a.id),locked=Date.now()-seenApproval.get(a.id)<600;
+  $('approve-allow').disabled=$('approve-reject').disabled=sending||locked;
+  if(locked)setTimeout(renderApprove,620-(Date.now()-seenApproval.get(a.id)));
+  const st=$('approve-status');st.className='ask-status'+(failed?' err':'');
+  st.textContent=sending?'正在提交…':failed?result.reason:'持久授权请在 Harness 中设置';
+  return true;
+}
+function decide(outcome){const a=approvalOf();if(!a||sentApproval.has(a.id)||$('approve-allow').disabled)return;sentApproval.set(a.id,Date.now());bridge.approve(a.id,outcome);renderApprove();}
+$('approve').addEventListener('submit',e=>{e.preventDefault();decide('allowed-once');});
+$('approve-reject').addEventListener('click',()=>decide('rejected'));
+
+// 上下文占用：鲸鱼外圈按占用比例描边，70% 起变黄，90% 起变红。
+function contextOf(d){if(!d?.contextTokens||!d?.contextWindow)return null;return Math.min(100,Math.round(d.contextTokens/d.contextWindow*100));}
+function renderRing(state,d){
+  const pct=['idle','offline'].includes(state)?null:contextOf(d);
+  if(pct==null){delete island.dataset.ctx;return;}
+  island.dataset.ctx=pct>=90?'full':pct>=70?'warn':'ok';
+  island.style.setProperty('--ctx-pct',String(Math.max(2,pct)));
+  $('capsule').title=`上下文已用 ${pct}%`;
+}
+
 // 展开面板：进行中显示当前任务卡和其他任务，空闲时显示今天的统计和最近完成。
 function renderPanel({activity:a,prefs={},history={},balance,preview}){
   const state=Object.hasOwn(STATES,a.state)?a.state:'offline',details=prefs.details!==false;
@@ -168,7 +210,8 @@ function renderPanel({activity:a,prefs={},history={},balance,preview}){
   const trailKey=trail.join('|');
   if($('trail').dataset.key!==trailKey){$('trail').dataset.key=trailKey;$('trail').replaceChildren(...trail.map((n,i)=>{const c=document.createElement('span');c.className='chip';c.textContent=toolLabel(n);c.style.animationDelay=`${i*40}ms`;return c;}));}
   $('trail').hidden=!trail.length;
-  const meta=[d.model,d.contextTokens?`上下文 ${tokens(d.contextTokens)}`:'',d.cacheRate!=null?`缓存命中 ${d.cacheRate}%`:'',d.toolCount?`工具 ${d.toolCount} 次`:'',d.outputTokens?`输出 ${tokens(d.outputTokens)}`:''].filter(Boolean);
+  const pct=contextOf(d);
+  const meta=[d.model,d.contextTokens?(pct!=null?`上下文 ${tokens(d.contextTokens)} / ${tokens(d.contextWindow)} (${pct}%)`:`上下文 ${tokens(d.contextTokens)}`):'',d.cacheRate!=null?`缓存命中 ${d.cacheRate}%`:'',d.toolCount?`工具 ${d.toolCount} 次`:'',d.outputTokens?`输出 ${tokens(d.outputTokens)}`:''].filter(Boolean);
   $('meta').replaceChildren(...meta.map(t=>{const s=document.createElement('span');s.textContent=t;return s;}));
   $('activity-note').textContent=preview?'预览模式 · 示例数据，不代表实际任务':'';
 
@@ -196,14 +239,21 @@ function renderPanel({activity:a,prefs={},history={},balance,preview}){
   const day=history.day;
   $('usage').hidden=!idle||!day||!day.tokens;
   if(day&&day.tokens){
-    $('usage-sum').textContent=`${tokens(day.tokens)} tokens${day.cacheRate!=null?` · 缓存命中 ${day.cacheRate}%`:''}`;
+    const cost=history.today?.cost;
+    $('usage-sum').textContent=`${tokens(day.tokens)} tokens${day.cacheRate!=null?` · 缓存命中 ${day.cacheRate}%`:''}${cost>=0.005?` · 今日≈¥${cost.toFixed(2)}`:''}`;
     const max=Math.max(...day.hours,1),key=day.hours.join(',');
     if($('usage-bars').dataset.key!==key){$('usage-bars').dataset.key=key;$('usage-bars').replaceChildren(...day.hours.map((v,i)=>{const b=document.createElement('i');if(!v)b.className='zero';b.style.height=v?`${Math.max(8,Math.round(v/max*100))}%`:'';b.style.animationDelay=`${i*18}ms`;b.title=`${tokens(v)} tokens`;return b;}));}
   }
   $('recent').hidden=!(idle||['completed','paused','error'].includes(state))||!recent.length;
   $('hint').hidden=!idle||preview;
   $('stop').hidden=!a.stoppable;if(!a.stoppable)disarm();
-  if(renderAsk())for(const id of ['task','others','today','usage','recent','hint'])$(id).hidden=true;
+  const reply=details&&state==='completed'?d.reply:'';
+  $('reply').hidden=!reply;$('reply-text').textContent=reply||'';
+  if(reply)$('recent').hidden=true;
+  const approving=renderApprove();
+  if(approving)$('ask').hidden=true;
+  const asking=!approving&&renderAsk();
+  if(approving||asking)for(const id of ['task','others','today','usage','recent','hint','reply'])$(id).hidden=true;
 }
 
 // 状态切换：文字与指示器做模糊交叉淡入，异常时整体轻摇。
@@ -225,22 +275,34 @@ function render(snapshot){
 
   $('status-label').textContent=copy.label;
   const details=snapshot.prefs?.details!==false;
-  const ask=askOf();
+  const ask=askOf(),approval=approvalOf(),reply=details&&state==='completed'?a.detail?.reply:'';
   if(ask&&state==='waiting')$('status-label').textContent='有问题等你回答';
-  $('mini-note').textContent=ask&&state==='waiting'&&!expanded?ask.questions[0].question:state==='idle'?(preview?'动画预览':'DeepSeek Harness'):details&&a.title?a.title:copy.detail;
+  if(approval)$('status-label').textContent='需要你批准';
+  else if(reply)$('status-label').textContent='有新回复';
+  $('mini-note').textContent=approval&&!expanded?(details&&approval.detail?.text?approval.detail.text:toolLabel(approval.toolName))
+    :ask&&state==='waiting'&&!expanded?ask.questions[0].question
+    :reply&&!expanded?reply
+    :state==='idle'?(preview?'动画预览':'DeepSeek Harness'):details&&a.title?a.title:copy.detail;
+  island.dataset.alert=approval?'approval':reply?'reply':'';
+  renderRing(state,a.detail);
   $('badge').hidden=!(a.activeCount>1);$('badge').textContent=a.activeCount>1?String(a.activeCount):'';
   $('demo-controls').hidden=!preview;$('demo-state').value=state;
   renderPanel(snapshot);
 
   for(const id of drafts.keys())if(!(a.questions||[]).some(q=>q.callId===id))drafts.delete(id);
-  if(ask&&!seenAsk.has(ask.callId)){seenAsk.add(ask.callId);if(snapshot.prefs?.popups!==false&&!expanded){autoOpened=true;expand(true);}}
-  if(!ask&&autoOpened){autoOpened=false;if(expanded)expand(false);}
+  for(const id of [...seenApproval.keys()])if(!(a.approvals||[]).some(x=>x.id===id)){seenApproval.delete(id);sentApproval.delete(id);}
+  const prompt=approval?'approval:'+approval.id:ask?'ask:'+ask.callId:'';
+  if(prompt&&!seenAsk.has(prompt)){seenAsk.add(prompt);if(snapshot.prefs?.popups!==false&&!expanded){autoOpened=true;expand(true);}}
+  if(!prompt&&autoOpened){autoOpened=false;if(expanded)expand(false);}
+  // 新回复：完成时在胶囊里预览回复开头，并多停留一会儿。
+  if(reply&&reply!==lastReply&&lastState===state&&!expanded&&snapshot.prefs?.popups!==false)burst(4200);
+  lastReply=reply||'';
   if(lastState!==state){
     const prev=lastState;lastState=state;
     $('announcement').textContent=copy.label;
     choreograph(state,prev);
     const fresh=state!=='thinking'||QUIET.includes(prev);
-    if(BURST[state]&&fresh&&prev&&!expanded&&snapshot.prefs?.popups!==false)burst(BURST[state]);
+    if(BURST[state]&&fresh&&prev&&!expanded&&snapshot.prefs?.popups!==false)burst(reply?4200:BURST[state]);
   }
   // 切到减少动效时，正在进行的过渡直接落到终点。
   if(!motionOn())document.getAnimations().forEach(x=>{if(x instanceof CSSAnimation)return;try{x.finish();}catch{x.cancel();}});
@@ -250,4 +312,4 @@ function render(snapshot){
 const unsubscribe=bridge.subscribe(render);
 render(await bridge.initial());
 const timer=setInterval(tick,1000);
-window.addEventListener('beforeunload',()=>{unsubscribe();clearInterval(timer);cancelAnimationFrame(boundsFrame);clearTimeout(burstTimer);clearTimeout(peekTimer);clearTimeout(leaveTimer);clearTimeout(armTimer);});
+window.addEventListener('beforeunload',()=>{unsubscribe();clearInterval(timer);cancelAnimationFrame(boundsFrame);clearTimeout(burstTimer);clearTimeout(peekTimer);clearTimeout(leaveTimer);clearTimeout(armTimer);clearTimeout(hoverTimer);});

package/desktop/stats-preload.cjs

@@ -0,0 +1,5 @@
+const {contextBridge,ipcRenderer}=require('electron');
+contextBridge.exposeInMainWorld('usageStats',{
+  request:range=>ipcRenderer.send('stats:request',range),
+  subscribe:callback=>{const fn=(_event,data)=>callback(data);ipcRenderer.on('stats:data',fn);return()=>ipcRenderer.removeListener('stats:data',fn);}
+});

package/desktop/stats.css

@@ -0,0 +1,86 @@
+:root{
+  color-scheme:dark;
+  --bg:#0b0e17;--surface:#0d111c;--card:#121726;--line:rgba(255,255,255,.07);
+  --ink:#eef1fb;--muted:#8d95ad;--faint:#5c647c;--blue:#4d6bfe;--blue-hi:#7f95ff;
+  --s-cache:#3987e5;--s-input:#d95926;--s-output:#199e70;
+  font-family:"HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
+}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink)}
+body{min-height:100vh;padding:22px 26px 28px;font-size:13px}
+.num{font-variant-numeric:tabular-nums}
+button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
+a{color:var(--blue-hi)}
+.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
+.brand{display:flex;align-items:center;gap:12px}
+.mark{width:34px;height:34px;border-radius:11px;background:var(--blue) url("../assets/deepseek.svg") center/22px no-repeat;box-shadow:0 6px 22px rgba(77,107,254,.35)}
+h1{margin:0;font-size:18px;font-weight:650;letter-spacing:.3px}
+h2{margin:0;font-size:13px;font-weight:600}
+.sub{margin:2px 0 0;color:var(--muted);font-size:11.5px}
+.sub .tag{margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(245,181,68,.14);color:#f5c46a;font-size:10.5px}
+.tabs{display:flex;padding:3px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
+.tabs button{height:30px;padding:0 14px;border-radius:9px;color:var(--muted);font-size:12.5px;transition:background-color .2s,color .2s}
+.tabs button:hover{color:var(--ink)}
+.tabs button[aria-selected="true"]{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(77,107,254,.35)}
+.tabs button:focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px}
+main{transition:opacity .25s}
+main[aria-busy="true"]{opacity:.55}
+.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
+.kpi{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:0}
+.kpi .k{font-size:11px;color:var(--muted)}
+.kpi strong{font-size:21px;font-weight:650;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.kpi .s{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.card{position:relative;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);min-width:0}
+.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
+.hint{font-size:10.5px;color:var(--faint)}
+.legend{display:flex;gap:14px;font-size:11px;color:var(--muted)}
+.legend span{display:flex;align-items:center;gap:6px}
+.legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
+.chart{height:230px;background:var(--surface);border-radius:12px;padding:6px 4px 0}
+.chart svg{display:block;width:100%;height:100%;overflow:visible}
+.chart .grid{stroke:rgba(255,255,255,.06);stroke-width:1}
+.chart .axis{fill:var(--faint);font-size:10px}
+.chart .hit{fill:transparent}
+.chart .seg{transition:opacity .15s}
+.chart .col.dim .seg{opacity:.35}
+.chart.still .seg{animation:none}
+.chart .seg{transform-box:fill-box;transform-origin:50% 100%;animation:grow .6s cubic-bezier(.22,1,.36,1) backwards}
+@keyframes grow{from{transform:scaleY(0)}}
+.tip{position:absolute;z-index:3;pointer-events:none;min-width:168px;padding:9px 11px;border-radius:11px;background:rgba(9,12,22,.96);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:11.5px;line-height:1.6}
+.tip b{display:block;margin-bottom:3px;font-size:12px}
+.tip .r{display:flex;justify-content:space-between;gap:14px;color:var(--muted)}
+.tip .r span:first-child{display:flex;align-items:center;gap:6px}
+.tip .r i{width:8px;height:8px;border-radius:2px;background:var(--c)}
+.tip .r span:last-child{color:var(--ink);font-variant-numeric:tabular-nums}
+.cols{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:12px;margin-top:12px;align-items:start}
+table{width:100%;border-collapse:collapse}
+th{font-size:10.5px;font-weight:500;color:var(--faint);text-align:left;padding:0 6px 7px}
+td{padding:8px 6px;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
+.r{text-align:right}
+.models .name{display:flex;flex-direction:column;gap:5px}
+.models .share{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
+.models .share i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--blue-hi))}
+.models .unpriced{font-size:10px;color:var(--faint)}
+.sessions{display:flex;flex-direction:column;max-height:340px;overflow:auto;margin:0 -6px;padding:0 6px}
+.sessions details{border-top:1px solid var(--line)}
+.sessions details:first-child{border-top:0}
+.sessions summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 2px;cursor:pointer;list-style:none;border-radius:8px}
+.sessions summary::-webkit-details-marker{display:none}
+.sessions summary:hover{background:rgba(255,255,255,.03)}
+.sessions summary:focus-visible{outline:2px solid var(--blue-hi)}
+.sessions .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
+.sessions .t::before{content:"›";display:inline-block;width:12px;color:var(--faint);transition:transform .2s}
+.sessions details[open] .t::before{transform:rotate(90deg)}
+.sessions .m{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
+.turns{margin:0 0 10px 12px;width:calc(100% - 12px)}
+.turns td{font-size:11px;padding:6px 5px;color:#cfd5e6;white-space:nowrap}
+.turns th{white-space:nowrap}
+.turns th{padding:4px 5px}
+.state{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:#3ddc91}
+.state.paused{background:#9aa3b8}.state.error{background:#ff6b6b}
+.empty{margin:14px 0 0;text-align:center;color:var(--muted)}
+.note{margin-top:14px;color:var(--faint);font-size:10.5px;line-height:1.7}
+@media (max-width:760px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.cols{grid-template-columns:1fr}}
+@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+.models th,.models td{white-space:nowrap}
+.models .name span{overflow:hidden;text-overflow:ellipsis}