synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/cp/cp-usage-model.js

@@ -0,0 +1,124 @@
+// ── Context usage, plan usage, MCP servers, rewind preview → rows (DOM-free) ──
+// The bridge answers `session_request` with trimmed data (lib/claude-panel-requests.js);
+// these functions turn it into the rows and sentences the cards show.
+
+import { fmtTokens, fmtDuration, fmtResetTime } from './cp-events.js';
+
+// A limit window's utilisation as the SDK reports it: already a percentage,
+// 0-100 (SDKControlGetUsageResponse in sdk.d.ts), or null when there is no data.
+// 1 is one percent; null is "unavailable", never 0%.
+const pct = (v) => {
+  if (v == null || v === '') return null;
+  const n = Number(v);
+  if (!Number.isFinite(n)) return null;
+  return n > 0 && n < 1 ? Math.max(0.1, Math.round(n * 10) / 10) : Math.round(n);
+};
+
+/** /context: headline, category rows, and the largest contributors. */
+export function contextCard(data) {
+  const d = data && typeof data === 'object' ? data : {};
+  const max = Number(d.maxTokens) || 0;
+  const total = Number(d.totalTokens) || 0;
+  const percentage = max > 0 ? Math.round((total / max) * 100) : Math.round(Number(d.percentage) || 0);
+  const rows = [];
+  for (const c of Array.isArray(d.categories) ? d.categories : []) {
+    if (!c?.name || c.kind === 'free') continue;
+    const share = max > 0 ? ` (${Math.max(0, Math.round((c.tokens / max) * 1000) / 10)}%)` : '';
+    // The CLI's own names for deferred categories already say so ("MCP tools (deferred)").
+    const label = c.deferred && !/\(deferred\)/i.test(c.name) ? `${c.name} (deferred)` : c.name;
+    rows.push([label, `${fmtTokens(c.tokens)}${share}`, c.kind === 'buffer' ? 'muted' : '']);
+  }
+  const free = (Array.isArray(d.categories) ? d.categories : []).find(c => c?.kind === 'free');
+  if (free) rows.push(['Free', fmtTokens(free.tokens), 'ok']);
+  const notes = [];
+  if (d.autoCompact?.enabled && d.autoCompact.threshold > 0) notes.push(`Auto-compact at ${fmtTokens(d.autoCompact.threshold)} tokens.`);
+  else if (d.autoCompact && !d.autoCompact.enabled) notes.push('Auto-compact is off.');
+  const sections = [];
+  const list = (label, items, fmt) => { if (items?.length) sections.push({ label, rows: items.map(fmt) }); };
+  list('Memory files', d.memoryFiles, f => [f.path, fmtTokens(f.tokens)]);
+  list(`MCP tools${d.mcpToolCount > (d.mcpTools?.length || 0) ? ` (largest ${d.mcpTools.length} of ${d.mcpToolCount})` : ''}`, d.mcpTools, t => [`${t.server ? `${t.server}: ` : ''}${t.name}${t.loaded ? '' : ' (deferred)'}`, fmtTokens(t.tokens)]);
+  list('Agents', d.agents, a => [`${a.name}${a.source ? ` (${a.source})` : ''}`, fmtTokens(a.tokens)]);
+  if (d.skills) sections.push({ label: 'Skills', rows: [[`${d.skills.included} of ${d.skills.total} listed`, fmtTokens(d.skills.tokens)]] });
+  return {
+    headline: `${fmtTokens(total)} of ${fmtTokens(max)} tokens (${percentage}%)${d.model ? ` · ${d.model}` : ''}`,
+    percentage,
+    rows,
+    notes,
+    sections,
+  };
+}
+
+function limitRow(label, w, now) {
+  if (!w) return null;
+  const p = pct(w.utilization);
+  const resets = w.resetsAt ? fmtResetTime(Date.parse(w.resetsAt), now) : '';
+  if (p == null && !resets) return null;
+  return [label, `${p != null ? `${p}% used` : 'no data'}${resets ? ` · resets ${resets}` : ''}`, p != null && p >= 90 ? 'warn' : ''];
+}
+
+/** /usage: this session's totals and the plan's limit windows. */
+export function usageCard(data, now = Date.now()) {
+  const d = data && typeof data === 'object' ? data : {};
+  const s = d.session || {};
+  const session = [];
+  if (s.costUsd > 0) session.push(['Cost', `$${s.costUsd.toFixed(4)}`, '']);
+  if (s.durationMs > 0) session.push(['Duration', `${fmtDuration(s.durationMs)}${s.apiDurationMs > 0 ? ` (${fmtDuration(s.apiDurationMs)} in API calls)` : ''}`, '']);
+  if (s.linesAdded || s.linesRemoved) session.push(['Lines changed', `+${s.linesAdded || 0} −${s.linesRemoved || 0}`, '']);
+  for (const m of Array.isArray(s.models) ? s.models : []) session.push([m.model, `${fmtTokens(m.input)} in · ${fmtTokens(m.output)} out${m.costUsd > 0 ? ` · $${m.costUsd.toFixed(4)}` : ''}`, '']);
+  const limits = [];
+  if (d.limitsAvailable && d.limits) {
+    const l = d.limits;
+    for (const row of [limitRow('5-hour limit', l.fiveHour, now), limitRow('Weekly limit', l.sevenDay, now), limitRow('Weekly Opus limit', l.sevenDayOpus, now), limitRow('Weekly Sonnet limit', l.sevenDaySonnet, now)]) if (row) limits.push(row);
+    for (const m of l.models || []) { const row = limitRow(m.name, m, now); if (row) limits.push(row); }
+    if (l.extraUsage) {
+      const e = l.extraUsage;
+      limits.push(['Extra usage', e.enabled ? `on${e.used != null ? ` · ${e.used} used` : ''}${e.monthlyLimit != null ? ` of ${e.monthlyLimit}` : ''}${e.currency ? ` ${e.currency}` : ''}` : 'off', '']);
+    }
+  }
+  return {
+    session,
+    limits,
+    plan: d.subscription || '',
+    limitsNote: d.limitsAvailable ? '' : 'Plan limits do not apply to this session (API key or cloud provider).',
+  };
+}
+
+const MCP_TONE = { connected: 'ok', pending: 'warn', 'needs-auth': 'warn', failed: 'err', disabled: 'muted' };
+
+/** /mcp: one entry per server, with what can be done about it. */
+export function mcpRows(servers, { controls = true } = {}) {
+  return (Array.isArray(servers) ? servers : []).map((s) => {
+    const status = s?.status || 'unknown';
+    return {
+      name: s?.name || '',
+      status,
+      tone: MCP_TONE[status] || 'warn',
+      detail: [s?.scope, s?.version, s?.toolCount != null ? `${s.toolCount} tool${s.toolCount === 1 ? '' : 's'}` : ''].filter(Boolean).join(' · '),
+      error: s?.error || (status === 'needs-auth' ? 'Needs sign-in. Run `claude mcp` in a terminal, or the server\'s own sign-in flow.' : ''),
+      // `controls: false`: nothing can act on the list (no live session, or a
+      // server that cannot take the request), so no button is offered.
+      canReconnect: controls && (status === 'failed' || status === 'needs-auth' || status === 'pending'),
+      canDisable: controls && status !== 'disabled',
+      canEnable: controls && status === 'disabled',
+    };
+  }).filter(r => r.name);
+}
+
+/** What a rewind to a message would change, in one sentence. */
+export function rewindPreviewText(r) {
+  const d = r && typeof r === 'object' ? r : {};
+  if (d.canRewind === false) return d.error || 'No checkpoint for this message: files cannot be rewound to it.';
+  const n = Number(d.fileCount) || (Array.isArray(d.filesChanged) ? d.filesChanged.length : 0);
+  if (!n) return 'No file would change: nothing was edited after this message.';
+  const names = (d.filesChanged || []).slice(0, 4).map(f => String(f).split(/[/\\]/).pop());
+  const more = n > names.length ? `, +${n - names.length} more` : '';
+  const skipped = Number(d.skippedLinks) > 0 ? ` ${d.skippedLinks} link${d.skippedLinks === 1 ? '' : 's'} would be skipped.` : '';
+  return `${n} file${n === 1 ? '' : 's'} would be restored (+${d.insertions || 0} −${d.deletions || 0} lines): ${names.join(', ')}${more}.${skipped}`;
+}
+
+export function rewindResultText(msg) {
+  const n = Number(msg?.fileCount);
+  if (!Number.isFinite(n)) return 'Files rewound to checkpoint';
+  if (!n) return 'Rewound: no file needed to change.';
+  return `Files rewound: ${n} file${n === 1 ? '' : 's'} restored (+${msg.insertions || 0} −${msg.deletions || 0} lines).`;
+}

package/neural-interface/public/shared/graph-activity.js

@@ -0,0 +1,68 @@
+// ── Graph pointer activity + resize coalescing ──
+//
+// The graph's render loop idles at a low frame rate until something counts as
+// activity. A document-level mousemove used to count unconditionally, so moving
+// the mouse over a terminal woke the Three.js scene (and its bloom chain) to
+// full frame rate. These helpers decide what is really graph activity. They have
+// no three.js dependency so they can be tested without a WebGL scene.
+
+// UI that sits above the graph and must never wake it, even when it is a
+// descendant of #graph-container.
+const NON_GRAPH_UI = [
+  '.term-viewport', '.term-float-tab', '#terminal-panel', '#term-peek-dock',
+  '.sp-sidepanel', '.glass', '.resizable', '.detail-card',
+  'input', 'textarea', 'select', 'button', '[contenteditable]',
+].join(',');
+
+/**
+ * True when a pointer event is graph activity: the pointer is over the graph
+ * canvas, or over a graph-owned overlay inside #graph-container. Terminals,
+ * floats, panels and glass UI never count. A drag only counts when it started
+ * on the canvas (`canvasDown`), so dragging a window across the graph does not
+ * wake it while an orbit drag that leaves the canvas keeps it awake.
+ *
+ * @param {MouseEvent|PointerEvent|{target?: EventTarget, buttons?: number}} e
+ * @param {HTMLCanvasElement|null|undefined} canvas  The graph canvas
+ * @param {boolean} [canvasDown]  A press started on the canvas and is still held
+ */
+export function isGraphPointerActivity(e, canvas, canvasDown = false) {
+  if (!e || !canvas) return false;
+  if (canvasDown) return true;
+  // A button is held but the press did not start on the canvas: a window/panel drag
+  if (e.buttons) return false;
+  const target = e.target;
+  if (!target || typeof target.closest !== 'function') return false;
+  if (target === canvas) return true;
+  const container = canvas.closest?.('#graph-container') || canvas.parentElement;
+  if (!container || !container.contains(target)) return false;
+  return !target.closest(NON_GRAPH_UI);
+}
+
+/**
+ * Debounce `fn` until `delayMs` of quiet. Returns a callable with:
+ *  - `.flush()`  run a pending call now (e.g. on the container's transitionend)
+ *  - `.cancel()` drop a pending call
+ *  - `.pending`  whether a call is scheduled
+ */
+export function createResizeCoalescer(fn, delayMs = 150) {
+  let timer = null;
+  const run = () => {
+    timer = null;
+    fn();
+  };
+  const schedule = () => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(run, delayMs);
+  };
+  schedule.flush = () => {
+    if (!timer) return;
+    clearTimeout(timer);
+    run();
+  };
+  schedule.cancel = () => {
+    if (timer) clearTimeout(timer);
+    timer = null;
+  };
+  Object.defineProperty(schedule, 'pending', { get: () => timer !== null });
+  return schedule;
+}

package/neural-interface/public/shared/html-shell.js

@@ -18,8 +18,8 @@ export function getSharedHTML() {
   return `
 <!-- Loading Overlay -->
 <div id="loading-overlay">
-  <div id="loading-mascot">
-    <svg viewBox="0 0 280 140" width="160" height="80" style="overflow:visible">
+  <div id="loading-mascot" data-state="asleep">
+    <svg viewBox="0 0 280 140" width="160" height="80" style="overflow:visible" aria-hidden="true">
       <g class="syna-eye">
         <g class="syna-lid" transform="translate(0,60) scale(1,0.08) translate(0,-60)">
           <rect x="80" y="24" width="38" height="72" rx="19" fill="#ffffff"/>
@@ -42,7 +42,11 @@ export function getSharedHTML() {
       <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
       <span id="loading-action-label">${t('loading.startServer')}</span>
     </button>
-    <div id="loading-action-status"></div>
+    <div id="loading-action-status" role="status" aria-live="polite" aria-atomic="true"></div>
+    <div id="loading-action-elapsed" role="timer" aria-live="off"></div>
+    <div id="loading-action-hint"></div>
+    <ul id="loading-action-trail"></ul>
+    <div id="loading-action-log"></div>
   </div>
   <div id="loading-server-cmd">
     <div id="loading-server-cmd-hint">${t('loading.runCommand')}</div>
@@ -72,13 +76,12 @@ export function getSharedHTML() {
 <!-- Top Menu Bar -->
 <div id="title-bar">
   <div class="bar-left">
-    <img src="synabun.png?v=2" alt="SynaBun" id="titlebar-logo" style="height:24px;width:auto;opacity:0.7;cursor:pointer;" data-tooltip="${t('tooltip.toggleExplorer')}">
+    <img src="synabun.png?v=2" alt="SynaBun" id="titlebar-logo" style="height:24px;width:auto;cursor:pointer;" data-tooltip="${t('tooltip.toggleExplorer')}">
     <div class="bar-sep"></div>
     <div class="view-toggle">
       <a class="view-toggle-btn${is3D ? '' : ' active'}" href="${is3D ? '/index2d.html' : '#'}" id="nav-2d-link">${t('nav.toggle2d')}</a>
       <a class="view-toggle-btn${is3D ? ' active' : ''}" href="${is3D ? '#' : '/'}" id="nav-3d-link">${t('nav.toggle3d')}</a>
       <span class="view-toggle-sep"></span>
-      <a class="view-toggle-btn" href="/claude-chat.html" id="nav-chat-link" data-tooltip="SynaBun Chat — full Claude Code UI" style="display:none">Chat</a>
     </div>
     <div class="bar-sep"></div>
 
@@ -89,21 +92,37 @@ export function getSharedHTML() {
       <div class="menubar-item" data-menu="apps">
         <button class="menubar-label">${t('nav.apps')}</button>
         <div class="menubar-dropdown glass">
+          <div class="menu-item" id="menu-terminal-assistant">
+            <span class="menu-check"></span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="8" y="5.5" width="11" height="5" rx="2.5" transform="rotate(-12 13.5 8)"/><rect x="4.5" y="12.5" width="11" height="5" rx="2.5" transform="rotate(-12 10 15)"/></svg></span> ${t('menu.apps.assistant')}</span>
+            <span class="menu-shortcut" data-keybind-for="launch-assistant"></span>
+          </div>
+          <div class="menu-sep"></div>
           <div class="menu-item" id="menu-terminal-claude">
             <span class="menu-check"></span>
-            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg></span> ${t('menu.apps.claudeCode')}</span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg></span> ${t('menu.apps.claudeCode')} <span class="count-badge count-badge--green menu-update-badge" id="claude-menu-update-badge"></span></span>
             <span class="menu-shortcut" data-keybind-for="launch-claude"></span>
           </div>
           <div class="menu-item" id="menu-terminal-codex">
             <span class="menu-check"></span>
-            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"/></svg></span> ${t('menu.apps.codexCli')}</span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"/></svg></span> ${t('menu.apps.codexCli')} <span class="count-badge count-badge--green menu-update-badge" id="codex-menu-update-badge"></span></span>
             <span class="menu-shortcut" data-keybind-for="launch-codex"></span>
           </div>
           <div class="menu-item" id="menu-terminal-gemini">
             <span class="menu-check"></span>
-            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"/></svg></span> ${t('menu.apps.geminiCli')}</span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"/></svg></span> ${t('menu.apps.geminiCli')} <span class="count-badge count-badge--green menu-update-badge" id="gemini-menu-update-badge"></span></span>
             <span class="menu-shortcut" data-keybind-for="launch-gemini"></span>
           </div>
+          <div class="menu-item" id="menu-terminal-opencode">
+            <span class="menu-check"></span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 240 300" fill="currentColor"><path fill-rule="evenodd" d="M0 0h240v300H0V0zm60 60v180h120V60H60z"/><rect x="60" y="120" width="120" height="120" opacity=".45"/></svg></span> ${t('menu.apps.openCode')} <span class="count-badge count-badge--green menu-update-badge" id="opencode-menu-update-badge"></span></span>
+            <span class="menu-shortcut" data-keybind-for="launch-opencode"></span>
+          </div>
+          <div class="menu-sep"></div>
+          <div class="menu-item" id="menu-check-cli-updates">
+            <span class="menu-check"></span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span> Check for updates</span>
+          </div>
           <div class="menu-sep"></div>
           <div class="menu-item" id="menu-terminal-shell">
             <span class="menu-check"></span>
@@ -131,7 +150,7 @@ export function getSharedHTML() {
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></span> WhatsApp</span>
           </div>
-          <div class="menu-item" id="menu-app-leonardo">
+          <div class="menu-item" id="menu-app-leonardo" hidden>
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.5 2l1.5 3.5L14.5 7l-3.5 1.5L9.5 12l-1.5-3.5L4.5 7l3.5-1.5L9.5 2zM19 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2zM5 17l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z"/></svg></span> Leonardo.AI</span>
           </div>
@@ -140,7 +159,7 @@ export function getSharedHTML() {
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg></span> Command Runner</span>
           </div>
-          <div class="menu-item" id="menu-terminal-link">
+          <div class="menu-item" id="menu-terminal-link" hidden>
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span> Link Terminals</span>
           </div>
@@ -158,6 +177,10 @@ export function getSharedHTML() {
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg></span> Restart Server</span>
           </div>
+          <div class="menu-item" id="menu-stop-server">
+            <span class="menu-check"></span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="2"/></svg></span> Stop Server</span>
+          </div>
         </div>
       </div>
 
@@ -199,6 +222,38 @@ export function getSharedHTML() {
         </div>
       </div>
 
+${is3D ? `
+      <!-- Map menu (3D memory map) -->
+      <div class="menubar-item" data-menu="graph">
+        <button class="menubar-label">${t('nav.map')}</button>
+        <div class="menubar-dropdown glass">
+          <div class="menu-item" id="menu-map-frame-all">
+            <span class="menu-check"></span>
+            <span class="menu-text">${t('map.menu.frameAll')}</span>
+            <span class="menu-shortcut" data-keybind-for="map-frame-all"></span>
+          </div>
+          <div class="menu-sep"></div>
+          <div class="menu-item menu-toggle" id="menu-map-neighbors">
+            <span class="menu-check">&#10003;</span>
+            <span class="menu-text">${t('map.menu.neighbors')}</span>
+          </div>
+          <div class="menu-item menu-toggle" id="menu-map-recency">
+            <span class="menu-check">&#10003;</span>
+            <span class="menu-text">${t('map.menu.recency')}</span>
+          </div>
+          <div class="menu-item menu-toggle" id="menu-map-grid">
+            <span class="menu-check">&#10003;</span>
+            <span class="menu-text">${t('map.menu.grid')}</span>
+          </div>
+          <div class="menu-sep"></div>
+          <div class="menu-item" id="menu-map-rebuild">
+            <span class="menu-check"></span>
+            <span class="menu-text">${t('map.menu.rebuild')}</span>
+          </div>
+        </div>
+      </div>
+
+` : `
       <!-- Graph menu -->
       <div class="menubar-item" data-menu="graph">
         <button class="menubar-label">${t('nav.graph')}</button>
@@ -253,6 +308,7 @@ export function getSharedHTML() {
         </div>
       </div>
 
+`}
       <!-- Skills menu -->
       <div class="menubar-item" data-menu="skills">
         <button class="menubar-label">${t('nav.skills')}</button>
@@ -262,6 +318,10 @@ export function getSharedHTML() {
             <span class="menu-text">${t('menu.skills.skillsStudio')}</span>
             <span class="menu-shortcut">K</span>
           </div>
+          <div class="menu-item" id="menu-open-styleguide">
+            <span class="menu-check"></span>
+            <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span> ${t('styleguide.title')}</span>
+          </div>
           <div class="menu-sep"></div>
           <div class="menu-item" id="menu-skills-new">
             <span class="menu-check"></span>
@@ -288,6 +348,18 @@ export function getSharedHTML() {
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span> Schedules</span>
           </div>
+          <div class="menu-item" id="menu-automations-schedule-new">
+            <span class="menu-check"></span>
+            <span class="menu-text">New Cron Schedule</span>
+          </div>
+          <div class="menu-item" id="menu-automations-quick-timer">
+            <span class="menu-check"></span>
+            <span class="menu-text">Quick Timer</span>
+          </div>
+          <div class="menu-item" id="menu-automations-schedule-groups">
+            <span class="menu-check"></span>
+            <span class="menu-text">Schedule Groups</span>
+          </div>
           <div class="menu-sep"></div>
           <div class="menu-item" id="menu-automations-new">
             <span class="menu-check"></span>
@@ -327,9 +399,9 @@ export function getSharedHTML() {
 
   <div class="bar-right">
     <div class="bar-group">
-      <button id="titlebar-cost-btn" class="bar-icon bar-cost-btn" data-tooltip="Cost Tracker"><span class="bar-cost-label">$0</span></button>
-      <button id="titlebar-sessions-btn" class="bar-icon" data-tooltip="Session Monitor"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 12.0002C2 7.28611 2 4.92909 3.46447 3.46462C4.70529 2.2238 6.58687 2.03431 10 2.00537M22 12.0002C22 7.28611 22 4.92909 20.5355 3.46462C19.2947 2.2238 17.4131 2.03431 14 2.00537"/><path d="M10 22C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14C2 11.1997 2 9.79961 2.54497 8.73005C3.02433 7.78924 3.78924 7.02433 4.73005 6.54497C5.79961 6 7.19974 6 10 6H14C16.8003 6 18.2004 6 19.27 6.54497C20.2108 7.02433 20.9757 7.78924 21.455 8.73005C22 9.79961 22 11.1997 22 14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22"/><path d="M12 11L12 17M12 17L14.5 14.5M12 17L9.5 14.5" stroke-linejoin="round"/></svg></button>
-      <button id="titlebar-gallery-btn" class="bar-icon" data-tooltip="Image Gallery"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M21.1935 16.793C20.8437 19.2739 20.6689 20.5143 19.7717 21.2572C18.8745 22 17.5512 22 14.9046 22H9.09536C6.44881 22 5.12553 22 4.22834 21.2572C3.33115 20.5143 3.15626 19.2739 2.80648 16.793L2.38351 13.793C1.93748 10.6294 1.71447 9.04765 2.66232 8.02383C3.61017 7 5.29758 7 8.67239 7H15.3276C18.7024 7 20.3898 7 21.3377 8.02383C22.0865 8.83268 22.1045 9.98979 21.8592 12"/><path d="M19.5617 7C19.7904 5.69523 18.7863 4.5 17.4617 4.5H6.53788C5.21323 4.5 4.20922 5.69523 4.43784 7"/><path d="M17.4999 4.5C17.5283 4.24092 17.5425 4.11135 17.5427 4.00435C17.545 2.98072 16.7739 2.12064 15.7561 2.01142C15.6497 2 15.5194 2 15.2588 2H8.74099C8.48035 2 8.35002 2 8.24362 2.01142C7.22584 2.12064 6.45481 2.98072 6.45704 4.00434C6.45727 4.11135 6.47146 4.2409 6.49983 4.5"/><circle cx="16.5" cy="11.5" r="1.5"/><path d="M19.9999 20L17.1157 17.8514C16.1856 17.1586 14.8004 17.0896 13.7766 17.6851L13.5098 17.8403C12.7984 18.2542 11.8304 18.1848 11.2156 17.6758L7.37738 14.4989C6.6113 13.8648 5.38245 13.8309 4.5671 14.4214L3.24316 15.3803"/></svg></button>
+      <button id="titlebar-cost-btn" class="bar-icon bar-cost-btn" data-tooltip="Cost Tracker" hidden><span class="bar-cost-label">$0</span></button>
+      <button id="titlebar-sessions-btn" class="bar-icon" data-tooltip="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 6 2.5 8 2.5 8H3.5S6 14 6 8z"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="count-badge" id="titlebar-notifications-count" hidden></span></button>
+      <button id="titlebar-gallery-btn" class="bar-icon" data-tooltip="Image Gallery"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg></button>
     </div>
     <span class="bar-divider"></span>
     <div class="bar-group">
@@ -342,6 +414,12 @@ export function getSharedHTML() {
     </div>
     <span class="bar-divider"></span>
     <div class="bar-group bar-group--clock">
+      <div id="schedule-queue-overlay">
+        <button id="titlebar-queue-btn" class="bar-icon" data-tooltip="Schedule Queue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h10M4 18h14"/><circle cx="19" cy="12" r="3"/></svg><span class="count-badge" id="titlebar-queue-count" hidden></span></button>
+        <div id="schedule-queue-dropdown" style="display:none;">
+          <div id="sq-main"></div>
+        </div>
+      </div>
       <span id="titlebar-clock" class="titlebar-clock"></span>
     </div>
   </div>
@@ -427,10 +505,22 @@ export function getSharedHTML() {
     </div>
   </div>
   </div>
+  <button id="topright-assistant-panel-btn" class="topright-icon-btn" data-tooltip="${t('assistant.panel.open')}">
+    <svg viewBox="0 0 24 24" fill="currentColor"><rect x="8" y="5.5" width="11" height="5" rx="2.5" transform="rotate(-12 13.5 8)"/><rect x="4.5" y="12.5" width="11" height="5" rx="2.5" transform="rotate(-12 10 15)"/></svg>
+  </button>
   <button id="topright-claude-panel-btn" class="topright-icon-btn" data-tooltip="Claude Code side panel">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
+    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg>
+    <span class="count-badge count-badge--green" id="claude-update-badge"></span>
+  </button>
+  <button id="topright-codex-panel-btn" class="topright-icon-btn" data-tooltip="Codex side panel">
+    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 0 0-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 0 1 .476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 0 1 4.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 0 1-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 0 0 5.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0 0 10.205 0a5.947 5.947 0 0 0-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 0 0 4.162 1.713z"/></svg>
+    <span class="count-badge count-badge--green" id="codex-update-badge"></span>
   </button>
-  <button id="topright-collapse-btn" class="topright-collapse-btn" data-tooltip="Toggle toolbar">
+  <button id="topright-opencode-panel-btn" class="topright-icon-btn" data-tooltip="OpenCode side panel">
+    <svg viewBox="0 0 24 30" fill="currentColor"><path d="M18 6H6V24H18V6ZM24 30H0V0H24V30Z"/></svg>
+    <span class="count-badge count-badge--green" id="opencode-update-badge"></span>
+  </button>
+  <button id="topright-collapse-btn" class="topright-collapse-btn" data-tooltip="Hide all toolbars">
     <svg viewBox="0 0 24 24" class="collapse-chevron"><polyline points="9 18 15 12 9 6"/></svg>
     <span class="collapse-dots">
       <span></span><span></span><span></span>
@@ -678,8 +768,8 @@ export function getSharedHTML() {
   <div class="stat-divider"></div>
   <div>${t('stats.visible')} <span class="stat-value" id="stat-visible">0</span></div>
   <div class="stat-divider"></div>
-  <div>${t('stats.links')} <span class="stat-value" id="stat-links">0</span></div>
-  <div class="stat-divider"></div>
+  ${is3D ? '' : `<div>${t('stats.links')} <span class="stat-value" id="stat-links">0</span></div>
+  <div class="stat-divider"></div>`}
   <div id="stat-search-status"></div>
 </div>
 
@@ -687,6 +777,15 @@ export function getSharedHTML() {
 <div id="static-bg">
   <div class="focus-breathe"></div>
   <img src="synabun.png?v=2" alt="SynaBun" class="static-bg-logo">
+  <div id="wb-ruleset-alert" class="wb-ruleset-alert hidden" aria-live="polite">
+    <div class="wb-ruleset-alert-text">
+      A connected tool is missing SynaBun's rules, or its copy was edited. Open Setup to check.
+    </div>
+    <div class="wb-ruleset-alert-actions">
+      <button type="button" id="wb-ruleset-settings" class="wb-ruleset-alert-btn">Setup</button>
+      <button type="button" id="wb-ruleset-dismiss" class="wb-ruleset-alert-btn wb-ruleset-alert-dismiss">Don't Show This Again</button>
+    </div>
+  </div>
 
   <!-- Whiteboard (Focus Mode canvas) -->
   <div id="wb-root">