dsh-biocore 0.1.8 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-biocore",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "type": "module",
   "description": "BioCore DSH UI: per-session state tab, standalone instrument panel, /api/biocore/state, session/event one_turn updates, /bio sync.",
   "main": "lib/index.js",

package/ui/panel-layout.js

@@ -10,15 +10,17 @@
   var STORAGE_KEY = 'biocore-panel-layout-v2'
   var DEFAULT_ORDER = [
     'mood', 'tension', 'warmth', 'heaviness', 'clarity', 'chart',
-    'memory', 'memory-summary', 'metrics', 'trace', 'runtime',
+    'memory', 'memory-summary', 'metrics',
     'persona', 'model', 'switches', 'expression', 'advanced',
+    'runtime', 'trace',
   ]
-  var TAB_ORDER = ['dashboard', 'memory', 'settings', 'diagnosis']
+  var TAB_ORDER = ['dashboard', 'memory', 'relation', 'settings', 'tools']
   var TAB_GROUPS = Object.freeze({
     dashboard: ['mood', 'tension', 'warmth', 'heaviness', 'clarity', 'chart'],
     memory: ['memory', 'memory-summary'],
+    relation: ['metrics'],
     settings: ['persona', 'model', 'switches', 'expression', 'advanced'],
-    diagnosis: ['metrics', 'trace', 'runtime'],
+    tools: ['runtime', 'trace'],
   })
 
   function defaultLayout() {

package/ui/panel.css

@@ -1,4 +1,4 @@
-/* BioCore instrument panel — FlClash mobile spec. | layout v24
+/* BioCore instrument panel — FlClash mobile spec. | layout v27
    1) tokens  2) base  3) topbar  4) cards  5) figures  6) lists  7) forms
    8) switches  9) nav  10) edit mode  11) desktop.
    Rule: one component rule per selector, px values from docs/DSH-PANEL-FLCLASH-SPEC.md. */
@@ -499,6 +499,9 @@ canvas#moodChart { display: block; width: 100%; height: 150px; }
   .expression-fields { grid-template-columns: 1fr; }
 }
 
+/* bug fix: whole channels block (title included) leaves non-dashboard tabs */
+.panel:not(.tab-dashboard):not(.layout-editing) .channels-wrap { display: none; }
+
 /* ---------- 13. layout guards (防止旧版/串版样式压扁版面) ---------- */
 html, body { overflow-x: clip; }
 body { max-width: 100%; }
@@ -556,3 +559,275 @@ body { max-width: 100%; }
 .model-card .model-section-title:first-of-type { margin-top: 0; }
 .rerank-toggle { margin: 0 0 10px; }
 .rerank-grid[hidden] { display: none !important; }
+
+/* ---------- 15. desktop (>=1024): left rail + 12-col dashboard ---------- */
+.rail, .desk { display: none; }
+
+@media (min-width: 1024px) {
+  :root {
+    --rail-w: 220px;
+    --radius-card: 32px;
+    --pad-card: 20px;
+    --gap-card: 12px;
+  }
+  body { padding: 0; }
+  body.rail-collapsed { --rail-w: 64px; }
+
+  .panel {
+    width: auto;
+    max-width: none;
+    min-height: 100vh;
+    margin: 0 0 0 var(--rail-w);
+    padding: 16px 24px 24px 16px;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 12px;
+    align-content: start;
+    transition: margin-left 160ms ease;
+  }
+
+  /* --- left rail --- */
+  .rail {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 40;
+    width: var(--rail-w);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 12px 10px;
+    background: var(--page);
+    border-right: 1px solid var(--line);
+    overflow: hidden;
+    transition: width 160ms ease, padding 160ms ease;
+  }
+  .rail-toggle {
+    display: grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    margin: 0 0 8px 2px;
+    padding: 0;
+    border: 0;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--text-2);
+    cursor: pointer;
+    transition: background 160ms ease, color 160ms ease;
+  }
+  .rail-toggle:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
+  .rail-toggle svg { width: 20px; height: 20px; }
+  .rail-nav { display: flex; flex-direction: column; gap: 2px; }
+  .rail-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 40px;
+    padding: 0 12px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-2);
+    font: inherit;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+    transition: background 160ms ease, color 160ms ease;
+  }
+  .rail-item svg { flex: 0 0 20px; width: 20px; height: 20px; }
+  .rail-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
+  .rail-item.active { background: rgba(255, 255, 255, 0.06); color: var(--text); }
+  .rail-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 8px;
+    bottom: 8px;
+    width: 2px;
+    border-radius: 2px;
+    background: var(--accent);
+  }
+  body.rail-collapsed .rail-item { justify-content: center; padding: 0; }
+  body.rail-collapsed .rail-item span { display: none; }
+
+  /* --- header --- */
+  .topbar { position: static; height: 56px; padding: 0; grid-column: 1 / -1; }
+  .topbar h1 { font-size: 22px; line-height: 28px; }
+  .masthead { display: none; }
+  .tabbar { display: none; }
+  .footer { grid-column: 1 / -1; padding: 0 4px; }
+
+  /* --- desktop dashboard: 12 col x 5 rows --- */
+  .desk {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    grid-template-rows: 208px 64px 176px minmax(200px, auto) minmax(120px, auto);
+    gap: 12px;
+  }
+  .desk-card {
+    position: relative;
+    min-width: 0;
+    padding: 20px;
+    border-radius: 32px;
+    overflow: hidden;
+  }
+  .desk-card-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+  .desk-card-head h2 { margin: 0; font-size: 15px; line-height: 24px; font-weight: 600; }
+  .desk-status, .desk-seg, .desk-memory, .desk-chart { grid-column: span 6; }
+  .desk-metric, .desk-switch, .desk-tile { grid-column: span 3; }
+  .desk-stat { grid-column: span 4; }
+
+  .desk-status { display: flex; align-items: center; gap: 20px; }
+  .desk-orb { width: 88px; height: 88px; flex: 0 0 88px; display: grid; place-items: center; }
+  .desk-status-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+  .desk-status-body h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; }
+  .desk-status-body .motivation { margin: 0; color: var(--text-2); font-size: 15px; line-height: 22px; }
+
+  .desk-metric { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
+  .desk-metric-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    color: var(--text-2);
+    font-size: 13px;
+    line-height: 18px;
+  }
+  .desk-metric-value { display: flex; align-items: baseline; gap: 10px; }
+  .desk-metric-value strong {
+    font-size: 40px;
+    line-height: 44px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+  }
+  .desk-metric-value .sub-status { margin-left: auto; color: var(--text-2); font-size: 13px; }
+
+  .desk-seg { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 32px; background: var(--tone); box-shadow: none; }
+  .seg-item {
+    flex: 1 1 0;
+    height: 52px;
+    border: 0;
+    border-radius: 16px;
+    background: transparent;
+    color: var(--text-2);
+    font: inherit;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background 160ms ease, color 160ms ease;
+  }
+  .seg-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
+  .seg-item.active { background: var(--accent); color: #ffffff; }
+
+  .desk-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .desk-switch-label { font-size: 15px; line-height: 24px; font-weight: 600; }
+  .desk-switch-control { display: flex; align-items: center; gap: 8px; }
+  .desk-switch-control input { width: 22px; height: 22px; accent-color: var(--accent); }
+  .desk-switch-state { color: var(--text-3); font-size: 12px; line-height: 16px; }
+
+  .desk-tile { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
+  .desk-tile-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    color: var(--text-2);
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .desk-tile strong {
+    font-size: 22px;
+    line-height: 28px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .desk-tile-note { color: var(--text-3); font-size: 12px; line-height: 16px; }
+  .desk-tile-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 13px; line-height: 18px; }
+  .desk-tile-row b { color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
+  .desk-chevron { color: var(--text-3); font-size: 14px; }
+  .desk-copy {
+    height: 24px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: 8px;
+    background: var(--block);
+    color: var(--text-2);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  .desk-memory { display: flex; flex-direction: column; }
+  .desk-memory .memory-list { max-height: none; }
+  .desk-chart { display: flex; flex-direction: column; }
+  #deskChart { width: 100%; height: 100%; min-height: 110px; display: block; }
+
+  .desk-stat { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
+  .desk-stat-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+    color: var(--text-2);
+    font-size: 13px;
+    line-height: 18px;
+  }
+  .desk-stat-row b { color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
+
+  /* --- tab switching on desktop --- */
+  .panel.tab-dashboard #cards { display: none; }
+  .panel:not(.tab-dashboard) .desk { display: none; }
+  .panel:not(.tab-dashboard) #cards {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 12px;
+  }
+  .panel:not(.tab-dashboard) #cards { align-content: start; }
+  .panel:not(.tab-dashboard) #cards > * { grid-column: span 6; }
+  .panel:not(.tab-dashboard) #cards > [data-card-id="metrics"] { grid-column: span 8; }
+  .panel:not(.tab-dashboard) #cards > [data-card-id="trace"] { grid-column: span 8; }
+  .panel:not(.tab-dashboard) #cards > [data-card-id="runtime"] { grid-column: span 4; }
+  .panel:not(.tab-dashboard) #cards > [data-card-id="model"] { grid-column: span 12; }
+  .panel:not(.tab-dashboard) #cards > .channels-wrap { grid-column: span 12; }
+  .panel:not(.tab-dashboard) .channels-wrap .channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .panel:not(.tab-dashboard) .add-cards { grid-column: 1 / -1; }
+  .layout-editing #cards { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
+  .layout-editing #cards > * { grid-column: span 6; }
+
+  /* --- desktop edit mode (hide chips on desk cards) --- */
+  .desk-hide {
+    display: none;
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    z-index: 3;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: var(--danger);
+    color: #ffffff;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .layout-editing .desk-hide { display: grid; }
+  .desk-card.is-desk-hidden { display: none !important; }
+}

package/ui/panel.html

@@ -1,13 +1,25 @@
 <!doctype html>
-<!-- BioCore panel layout v24 (FlClash mobile): masthead/orb centered, channels 2x2, pill tabbar -->
+<!-- BioCore panel layout v27: mobile = FlClash phone (masthead/channels 2x2/pill tabbar); desktop >=1024 = left rail + 12-col 5-row dashboard -->
 <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="panel.css?v=24">
+<link rel="stylesheet" href="panel.css?v=27">
 </head>
 <body>
+<aside class="rail" id="rail" aria-label="主导航">
+  <button class="rail-toggle" id="railToggle" type="button" aria-label="收起导航" aria-expanded="true" title="收起导航">
+    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.5" y="3.5" width="15" height="13" rx="2.5"/><path d="M7.5 3.5v13M12.5 8l-2 2 2 2"/></svg>
+  </button>
+  <nav class="rail-nav" aria-label="页面导航">
+    <button class="rail-item active" type="button" data-tab="dashboard" title="仪表盘" aria-selected="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="6" height="6" rx="1.5"/><rect x="11" y="3" width="6" height="6" rx="1.5"/><rect x="3" y="11" width="6" height="6" rx="1.5"/><rect x="11" y="11" width="6" height="6" rx="1.5"/></svg><span>仪表盘</span></button>
+    <button class="rail-item" type="button" data-tab="memory" title="记忆" aria-selected="false"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3.5h10v13l-5-3-5 3z"/></svg><span>记忆</span></button>
+    <button class="rail-item" type="button" data-tab="relation" title="关系" aria-selected="false"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 16.2s-5.4-3.4-5.4-7a2.9 2.9 0 015.4-1.7 2.9 2.9 0 015.4 1.7c0 3.6-5.4 7-5.4 7z"/></svg><span>关系</span></button>
+    <button class="rail-item" type="button" data-tab="settings" title="配置" aria-selected="false"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="2.6"/><path d="M10 3.2v2M10 14.8v2M3.2 10h2M14.8 10h2M5.2 5.2l1.4 1.4M13.4 13.4l1.4 1.4M14.8 5.2l-1.4 1.4M6.6 13.4l-1.4 1.4"/></svg><span>配置</span></button>
+    <button class="rail-item" type="button" data-tab="tools" title="工具" aria-selected="false"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.6 4.4a3.2 3.2 0 00-4 4l-4.1 4.1 2 2 4.1-4.1a3.2 3.2 0 004-4l-2 2-1.6-1.6 1.6-2.4z"/></svg><span>工具</span></button>
+  </nav>
+</aside>
 <main class="panel" id="panel">
   <header class="topbar" id="topBar">
     <div class="topbar-title">
@@ -22,6 +34,102 @@
     </button>
   </header>
 
+  <section class="desk" id="deskGrid" aria-label="桌面仪表盘">
+    <header class="card desk-card desk-status">
+      <div class="orb-wrap desk-orb" aria-hidden="true"><div class="orb"><span class="orb-ring"></span></div></div>
+      <div class="desk-status-body">
+        <h2>她现在的样子</h2>
+        <p class="motivation" id="deskMotivation">正在读取…</p>
+        <div class="status" id="deskStatus"><i class="dot"></i><span id="deskStatusText">未连接</span></div>
+      </div>
+    </header>
+
+    <section class="card desk-card desk-metric" id="deskMoodCard" data-card-label="心情">
+      <div class="desk-metric-head"><span>心情</span><span class="sub-trend"><b id="deskArrowV">→</b><span class="delta" id="deskDeltaV">—</span></span></div>
+      <div class="desk-metric-value"><strong id="deskNumV">–</strong><span class="sub-status" id="deskWordV">—</span></div>
+      <div class="bar"><i id="deskBarV"></i></div>
+    </section>
+
+    <section class="card desk-card desk-metric" id="deskTensionCard" data-card-label="张力">
+      <div class="desk-metric-head"><span>张力</span><span class="sub-trend"><b id="deskArrowTension">→</b><span class="delta" id="deskDeltaTension">—</span></span></div>
+      <div class="desk-metric-value"><strong id="deskNumTension">–</strong><span class="sub-status" id="deskWordTension">—</span></div>
+      <div class="bar"><i id="deskBarTension"></i></div>
+    </section>
+
+    <nav class="card desk-card desk-seg" id="segTabs" aria-label="分组导航">
+      <button class="seg-item active" type="button" data-tab="dashboard" aria-selected="true">仪表盘</button>
+      <button class="seg-item" type="button" data-tab="memory" aria-selected="false">记忆</button>
+      <button class="seg-item" type="button" data-tab="relation" aria-selected="false">关系</button>
+      <button class="seg-item" type="button" data-tab="settings" aria-selected="false">配置</button>
+      <button class="seg-item" type="button" data-tab="tools" aria-selected="false">工具</button>
+    </nav>
+
+    <section class="card desk-card desk-switch" aria-label="安全闸">
+      <span class="desk-switch-label">安全闸</span>
+      <label class="desk-switch-control"><input type="checkbox" data-switch="safety_enabled" aria-label="安全闸"><span class="desk-switch-state" data-switch-state="safety_enabled">当前：关</span></label>
+    </section>
+
+    <section class="card desk-card desk-switch" aria-label="主动回复">
+      <span class="desk-switch-label">主动回复</span>
+      <label class="desk-switch-control"><input type="checkbox" data-switch="proactive_send" aria-label="主动回复"><span class="desk-switch-state" data-switch-state="proactive_send">当前：关</span></label>
+    </section>
+
+    <section class="card desk-card desk-tile">
+      <div class="desk-tile-head"><span>数据目录</span><button class="desk-copy" id="deskCopyDataDir" type="button">复制</button></div>
+      <strong id="deskDataDir">宿主托管</strong>
+    </section>
+
+    <section class="card desk-card desk-tile">
+      <div class="desk-tile-head"><span>人设</span><span class="desk-chevron" aria-hidden="true">›</span></div>
+      <strong id="deskPersona">未载入</strong>
+      <span class="desk-tile-note" id="deskPersonaNote">—</span>
+    </section>
+
+    <section class="card desk-card desk-tile">
+      <div class="desk-tile-head"><span>运行时</span><span class="desk-chevron" aria-hidden="true">›</span></div>
+      <div class="desk-tile-row"><span>运行时长</span><b id="deskUptime">—</b></div>
+      <div class="desk-tile-row"><span>轮次</span><b id="deskTurns">—</b></div>
+      <div class="desk-tile-row"><span>向量模式</span><b id="deskVector">—</b></div>
+    </section>
+
+    <section class="card desk-card desk-tile">
+      <div class="desk-tile-head"><span>记忆容量</span><span class="desk-tile-note" id="deskCapText">0 / 200</span></div>
+      <div class="bar"><i id="deskCapFill"></i></div>
+    </section>
+
+    <section class="card desk-card desk-memory">
+      <div class="desk-card-head"><h2>最近记忆</h2><span class="card-aside" id="deskMemoryHint">—</span></div>
+      <ul class="memory-list" id="deskMemoryList"><li class="empty">还没有记忆，聊几句就会记住</li></ul>
+    </section>
+
+    <section class="card desk-card desk-chart">
+      <div class="desk-card-head"><h2>心情 · 24 小时</h2><span class="card-aside" id="deskChartHint">单线 + 事件点</span></div>
+      <canvas id="deskChart" height="170"></canvas>
+    </section>
+
+    <section class="card desk-card desk-stat">
+      <div class="desk-card-head"><h2>四通道均值</h2></div>
+      <div class="desk-stat-row"><span>绷紧</span><b id="deskAvgTension">—</b></div>
+      <div class="desk-stat-row"><span>暖</span><b id="deskAvgWarmth">—</b></div>
+      <div class="desk-stat-row"><span>沉</span><b id="deskAvgHeaviness">—</b></div>
+      <div class="desk-stat-row"><span>清</span><b id="deskAvgClarity">—</b></div>
+    </section>
+
+    <section class="card desk-card desk-stat">
+      <div class="desk-card-head"><h2>关系</h2></div>
+      <div class="desk-stat-row"><span>亲近</span><b id="deskRelCloseness">—</b></div>
+      <div class="desk-stat-row"><span>信任</span><b id="deskRelTrust">—</b></div>
+      <div class="desk-stat-row"><span>冲突</span><b id="deskRelConflict">—</b></div>
+    </section>
+
+    <section class="card desk-card desk-stat">
+      <div class="desk-card-head"><h2>今日</h2></div>
+      <div class="desk-stat-row"><span>新增记忆</span><b id="deskTodayMem">—</b></div>
+      <div class="desk-stat-row"><span>轮次</span><b id="deskTodayTurns">—</b></div>
+      <div class="desk-stat-row"><span>主动发送</span><b id="deskTodayProactive">—</b></div>
+    </section>
+  </section>
+
   <header class="masthead" id="masthead">
     <div class="orb-wrap" aria-hidden="true">
       <div class="orb"><span class="orb-ring"></span></div>
@@ -270,15 +378,19 @@
       <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3.5h10v13l-5-3-5 3z"/></svg>
       <span>记忆</span>
     </button>
+    <button class="tab-item" type="button" data-tab="relation" aria-selected="false">
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 16.2s-5.4-3.4-5.4-7a2.9 2.9 0 015.4-1.7 2.9 2.9 0 015.4 1.7c0 3.6-5.4 7-5.4 7z"/></svg>
+      <span>关系</span>
+    </button>
     <button class="tab-item" type="button" data-tab="settings" aria-selected="false">
       <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="2.6"/><path d="M10 3.2v2M10 14.8v2M3.2 10h2M14.8 10h2M5.2 5.2l1.4 1.4M13.4 13.4l1.4 1.4M14.8 5.2l-1.4 1.4M6.6 13.4l-1.4 1.4"/></svg>
-      <span>设置</span>
+      <span>配置</span>
     </button>
-    <button class="tab-item" type="button" data-tab="diagnosis" aria-selected="false">
-      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11h3.5l2-5 3 10 2-5H17"/></svg>
-      <span>诊断</span>
+    <button class="tab-item" type="button" data-tab="tools" aria-selected="false">
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.6 4.4a3.2 3.2 0 00-4 4l-4.1 4.1 2 2 4.1-4.1a3.2 3.2 0 004-4l-2 2-1.6-1.6 1.6-2.4z"/></svg>
+      <span>工具</span>
     </button>
-  </nav>
+    </nav>
 
   <div class="layout-toast" id="layoutToast" role="status" hidden></div>
 
@@ -289,6 +401,6 @@
 </main>
 <script src="panel-layout.js?v=5"></script>
 <script src="trace-view.js?v=5"></script>
-<script src="panel.js?v=5"></script>
+<script src="panel.js?v=6"></script>
 </body>
 </html>

package/ui/panel.js

@@ -442,8 +442,7 @@
     return localPoints.slice()
   }
 
-  function renderChart(data) {
-    var canvas = $('moodChart')
+  function drawChartInto(canvas, data) {
     if (!canvas) return
     var points = mergePoints(data)
     var wrapWidth = canvas.clientWidth || canvas.parentElement.clientWidth || 600
@@ -523,7 +522,7 @@
         ctx.arc(toX(eventTs), eventY, 2.6, 0, Math.PI * 2)
         ctx.fill()
       }
-      setText('chartHint', '单线 + ' + events.length + ' 个事件点')
+      setText(canvas.id === 'deskChart' ? 'deskChartHint' : 'chartHint', '单线 + ' + events.length + ' 个事件点')
     } else {
       ctx.strokeStyle = lineColor
       ctx.lineWidth = 2
@@ -538,12 +537,183 @@
         ctx.arc(padL + plotW - 3, padT + ((1 - Math.max(-1, Math.min(1, points[0].v))) / 2) * plotH, 3, 0, Math.PI * 2)
         ctx.fill()
       }
-      setText('chartHint', '积累中 · 单点')
+      setText(canvas.id === 'deskChart' ? 'deskChartHint' : 'chartHint', '积累中 · 单点')
     }
     ctx.fillStyle = mutedColor
     ctx.fillText('24 小时', padL, wrapHeight - 5)
   }
 
+  function renderChart(data) {
+    drawChartInto($('moodChart'), data)
+    drawChartInto($('deskChart'), data)
+  }
+
+  var DESK_HIDDEN_KEY = 'biocore-desk-hidden'
+  var RAIL_KEY = 'biocore-rail-collapsed'
+
+  function copyText(fromId, toId) {
+    var from = $(fromId)
+    var to = $(toId)
+    if (from && to) to.textContent = from.textContent
+  }
+
+  function copyBar(fromId, toId) {
+    var from = $(fromId)
+    var to = $(toId)
+    if (from && to) to.style.width = from.style.width
+  }
+
+  /** Desktop grid mirrors the mobile DOM (single data source, no duplicate state). */
+  function deskSync(data) {
+    copyText('motivation', 'deskMotivation')
+    copyText('statusText', 'deskStatusText')
+    var mobileStatus = $('status')
+    var deskStatus = $('deskStatus')
+    if (mobileStatus && deskStatus) {
+      deskStatus.className = 'status' + (mobileStatus.classList.contains('on') ? ' on' : (mobileStatus.classList.contains('off') ? ' off' : ''))
+    }
+    copyText('num-v', 'deskNumV')
+    copyText('moodNote', 'deskWordV')
+    copyText('arrow-v', 'deskArrowV')
+    copyText('delta-v', 'deskDeltaV')
+    copyBar('bar-v', 'deskBarV')
+    copyText('num-emotion-tension', 'deskNumTension')
+    copyText('status-tension', 'deskWordTension')
+    copyText('arrow-emotion-tension', 'deskArrowTension')
+    copyText('delta-emotion-tension', 'deskDeltaTension')
+    copyBar('bar-emotion-tension', 'deskBarTension')
+    copyText('runtimeUptime', 'deskUptime')
+    copyText('runtimeTurns', 'deskTurns')
+    copyText('runtimeVector', 'deskVector')
+    copyText('capText', 'deskCapText')
+    copyBar('capFill', 'deskCapFill')
+    copyText('dataDirText', 'deskDataDir')
+    copyText('memTotal', 'deskTodayMem')
+    copyText('runtimeTurns', 'deskTodayTurns')
+    copyText('memoryHint', 'deskMemoryHint')
+    var memoryFrom = $('memoryList')
+    var memoryTo = $('deskMemoryList')
+    if (memoryFrom && memoryTo) memoryTo.innerHTML = memoryFrom.innerHTML
+    var available = data && data.available !== false
+    var intero = (available && data.intero) || {}
+    var channels = [['tension', 'deskAvgTension'], ['warmth', 'deskAvgWarmth'], ['heaviness', 'deskAvgHeaviness'], ['clarity', 'deskAvgClarity']]
+    for (var i = 0; i < channels.length; i += 1) {
+      var value = Number(intero[channels[i][0]])
+      setText(channels[i][1], Number.isFinite(value) ? fmt(value) : '—')
+    }
+    var rel = (available && data.relationship_metrics) || {}
+    setText('deskRelCloseness', available && Number.isFinite(Number(rel.closeness)) ? fmt(rel.closeness) : '—')
+    setText('deskRelTrust', available && Number.isFinite(Number(rel.trust)) ? fmt(rel.trust) : '—')
+    setText('deskRelConflict', available && Number.isFinite(Number(rel.conflict)) ? fmt(rel.conflict) : '—')
+    setText('deskTodayProactive', '—')
+    var personaBox = $('personaText')
+    var personaChars = personaBox ? String(personaBox.value || '').replace(/s+/g, '').length : 0
+    setText('deskPersona', personaChars ? '已载入' : '未载入')
+    setText('deskPersonaNote', personaChars ? (personaChars + ' 字 · 编译后只改倾向') : '还没有写人设')
+  }
+
+  function deskCards() {
+    return Array.prototype.slice.call(document.querySelectorAll('#deskGrid .desk-card'))
+  }
+
+  function deskCardId(card, index) {
+    if (!card.id) card.id = 'desk-card-' + index
+    return card.id
+  }
+
+  function readDeskHidden() {
+    try {
+      var raw = window.localStorage.getItem(DESK_HIDDEN_KEY)
+      var list = raw ? JSON.parse(raw) : []
+      return Array.isArray(list) ? list : []
+    } catch (e) { return [] }
+  }
+
+  function writeDeskHidden(list) {
+    try { window.localStorage.setItem(DESK_HIDDEN_KEY, JSON.stringify(list)) } catch (e) { /* ignore */ }
+  }
+
+  function applyDeskHidden() {
+    var hidden = readDeskHidden()
+    deskCards().forEach(function (card, index) {
+      card.classList.toggle('is-desk-hidden', hidden.indexOf(deskCardId(card, index)) >= 0)
+    })
+  }
+
+  function ensureDeskHides() {
+    deskCards().forEach(function (card, index) {
+      deskCardId(card, index)
+      if (card.querySelector('[data-desk-hide]')) return
+      var button = document.createElement('button')
+      button.type = 'button'
+      button.className = 'desk-hide'
+      button.setAttribute('data-desk-hide', '')
+      button.setAttribute('aria-label', '隐藏这张卡片')
+      button.textContent = '−'
+      card.appendChild(button)
+    })
+  }
+
+  function deskLabel(card) {
+    var named = card.getAttribute('data-card-label')
+    if (named) return named
+    var title = card.querySelector('h2')
+    return title ? title.textContent.trim() : card.id
+  }
+
+  function restoreDeskCard(id) {
+    writeDeskHidden(readDeskHidden().filter(function (item) { return item !== id }))
+    applyDeskHidden()
+    renderAddCards()
+    layoutToast('已恢复卡片')
+  }
+
+  function onDeskEditClick(event) {
+    var target = event.target
+    var add = target && target.closest ? target.closest('[data-desk-add]') : null
+    if (add) {
+      event.preventDefault()
+      restoreDeskCard(add.getAttribute('data-desk-add'))
+      return
+    }
+    var hide = target && target.closest ? target.closest('[data-desk-hide]') : null
+    if (!hide) return
+    event.preventDefault()
+    var card = hide.closest('.desk-card')
+    if (!card) return
+    var hidden = readDeskHidden()
+    var id = card.id
+    if (hidden.indexOf(id) < 0) hidden.push(id)
+    writeDeskHidden(hidden)
+    applyDeskHidden()
+    renderAddCards()
+    layoutToast('已隐藏「' + deskLabel(card) + '」')
+  }
+
+  function railApply(collapsed) {
+    document.body.classList.toggle('rail-collapsed', !!collapsed)
+    var button = $('railToggle')
+    if (!button) return
+    var label = collapsed ? '展开导航' : '收起导航'
+    button.setAttribute('aria-expanded', String(!collapsed))
+    button.setAttribute('aria-label', label)
+    button.setAttribute('title', label)
+  }
+
+  function railInit() {
+    var storage = layoutStorage()
+    var collapsed = false
+    try { collapsed = !!storage && storage.getItem(RAIL_KEY) === '1' } catch (e) { collapsed = false }
+    railApply(collapsed)
+    var button = $('railToggle')
+    if (!button) return
+    button.addEventListener('click', function () {
+      var next = !document.body.classList.contains('rail-collapsed')
+      railApply(next)
+      try { if (storage) storage.setItem(RAIL_KEY, next ? '1' : '0') } catch (e) { /* ignore */ }
+    })
+  }
+
   function updateFooter(data) {
     var memory = data && data.available !== false && typeof data.memory_count === 'number'
       ? data.memory_count : '-'
@@ -560,6 +730,8 @@
     renderRuntime(data)
     renderChart(data)
     updateFooter(data)
+    deskSync(data)
+    deskSync(data)
     if (!data) renderEmpty('request_failed')
     else if (data.available === false) renderEmpty(String(data.reason || 'request_failed'))
     else clearEmpty()
@@ -611,16 +783,20 @@
   }
 
   function paintSwitchState(key, checked) {
-    var state = document.querySelector('[data-switch-state="' + key + '"]')
-    if (state) state.textContent = '当前：' + (checked ? '开' : '关')
+    var states = document.querySelectorAll('[data-switch-state="' + key + '"]')
+    for (var i = 0; i < states.length; i += 1) states[i].textContent = '当前：' + (checked ? '开' : '关')
+  }
+
+  function setSwitchInputs(key, checked) {
+    var inputs = document.querySelectorAll('input[data-switch="' + key + '"]')
+    for (var i = 0; i < inputs.length; i += 1) inputs[i].checked = !!checked
+    paintSwitchState(key, checked)
   }
 
   function applySwitchValues(values) {
     for (var i = 0; i < SWITCHES.length; i += 1) {
-      var input = document.querySelector('input[data-switch="' + SWITCHES[i].key + '"]')
-      if (input && values && typeof values[SWITCHES[i].key] === 'boolean') {
-        input.checked = values[SWITCHES[i].key]
-        paintSwitchState(SWITCHES[i].key, input.checked)
+      if (values && typeof values[SWITCHES[i].key] === 'boolean') {
+        setSwitchInputs(SWITCHES[i].key, values[SWITCHES[i].key])
       }
     }
   }
@@ -673,14 +849,12 @@
           applySwitchValues(body.switches)
           setText('switchHint', '已写入宿主设置')
         } else {
-          input.checked = !next
-          paintSwitchState(key, input.checked)
+          setSwitchInputs(key, !next)
           setText('switchHint', '写入失败：' + ((body && body.reason) || 'unknown'))
         }
       })
       .catch(function () {
-        input.checked = !next
-        paintSwitchState(key, input.checked)
+        setSwitchInputs(key, !next)
         setText('switchHint', '写入失败：未连接')
       })
       .then(function () {
@@ -1270,15 +1444,18 @@
     if (!layoutApi) return
     var group = layoutEditing ? null : (layoutApi.TAB_GROUPS[activeTab] || [])
     var panel = $('panel')
-    if (panel) panel.classList.toggle('tab-dashboard', activeTab === 'dashboard')
+    if (panel) {
+      var tabsKnown = ['dashboard', 'memory', 'relation', 'settings', 'tools']
+      for (var t = 0; t < tabsKnown.length; t += 1) {
+        panel.classList.toggle('tab-' + tabsKnown[t], activeTab === tabsKnown[t])
+      }
+    }
     var cards = layoutCards()
     for (var i = 0; i < cards.length; i += 1) {
       var id = cards[i].getAttribute('data-card-id')
       cards[i].classList.toggle('tab-hidden', !!group && group.indexOf(id) < 0)
     }
-    var bar = $('tabBar')
-    if (!bar) return
-    var items = bar.querySelectorAll('[data-tab]')
+    var items = document.querySelectorAll('[data-tab]')
     for (var j = 0; j < items.length; j += 1) {
       var on = items[j].getAttribute('data-tab') === activeTab
       items[j].classList.toggle('active', on)
@@ -1286,17 +1463,19 @@
     }
   }
 
+  function setActiveTab(tab) {
+    if (!layoutApi || !layoutApi.TAB_GROUPS[tab]) return
+    activeTab = tab
+    applyTabGroup()
+  }
+
   function bindTabBar() {
-    var bar = $('tabBar')
-    if (!bar) return
-    bar.addEventListener('click', function (event) {
+    document.addEventListener('click', function (event) {
       var target = event.target
       var button = target && target.closest ? target.closest('[data-tab]') : null
       if (!button) return
-      var tab = button.getAttribute('data-tab')
-      if (!layoutApi || !layoutApi.TAB_GROUPS[tab]) return
-      activeTab = tab
-      applyTabGroup()
+      event.preventDefault()
+      setActiveTab(button.getAttribute('data-tab'))
     })
     applyTabGroup()
   }
@@ -1354,6 +1533,8 @@
     if (reset) reset.hidden = !layoutEditing
     var cards = layoutCards()
     for (var i = 0; i < cards.length; i += 1) ensureHideButton(cards[i])
+    ensureDeskHides()
+    applyDeskHidden()
     renderAddCards()
     applyTabGroup()
     if (!layoutEditing) persistDomOrder()
@@ -1396,7 +1577,11 @@
       return
     }
     var hidden = hiddenCards()
-    if (!hidden.length) {
+    var deskHidden = readDeskHidden()
+    var deskHiddenCards = deskCards().filter(function (card, index) {
+      return deskHidden.indexOf(deskCardId(card, index)) >= 0
+    })
+    if (!hidden.length && !deskHiddenCards.length) {
       section.hidden = true
       list.textContent = ''
       return
@@ -1411,6 +1596,14 @@
       chip.textContent = '+ ' + hidden[i].label
       list.appendChild(chip)
     }
+    for (var d = 0; d < deskHiddenCards.length; d += 1) {
+      var deskChip = document.createElement('button')
+      deskChip.type = 'button'
+      deskChip.className = 'add-chip'
+      deskChip.setAttribute('data-desk-add', deskCardId(deskHiddenCards[d], 0))
+      deskChip.textContent = '+ ' + deskLabel(deskHiddenCards[d])
+      list.appendChild(deskChip)
+    }
   }
 
   function showHiddenCard(id) {
@@ -1583,9 +1776,13 @@
     document.addEventListener('pointermove', onCardsPointerMove, { passive: false })
     document.addEventListener('pointerup', onCardsPointerUp)
     document.addEventListener('pointercancel', onCardsPointerUp)
+    ensureDeskHides()
+    applyDeskHidden()
+    document.addEventListener('click', onDeskEditClick)
   }
 
   function boot() {
+    railInit()
     initLayout()
     bindAdvanced()
     bindPersona()