tagword-codeagent 1.1.6__py3-none-any.whl

codeagent/web/static/03e-tool-trace.js

@@ -0,0 +1,182 @@
+/**
+ * 时间轴上的单条工具记录（与会话历史 / WS 实时共用 DOM 结构）。
+ * @param {object} row { tool, arguments, result }
+ * @param {number} index
+ * @param {number} total
+ * @param {{prepend?:boolean,skipScroll?:boolean,running?:boolean,hideIndex?:boolean}} opts
+ * @returns {HTMLDetailsElement}
+ */
+/** 工具生成内容的媒体类型定义（图片/音频/视频） */
+const _MEDIA_HANDLERS = [
+  {
+    toolName: 'image_generate',
+    containerClass: 'oa-tool-gen-images',
+    extractItems(payload) {
+      return Array.isArray(payload?.images) ? payload.images : [];
+    },
+    createEl(item) {
+      const el = document.createElement('img');
+      el.className = 'chat-inline-img bubble-user__img';
+      el.alt = item.filename || 'generated';
+      return el;
+    },
+    postProcess(wrap) {
+      if (typeof enhanceChatImagesInBubble === 'function') enhanceChatImagesInBubble(wrap);
+    },
+  },
+  {
+    toolName: 'music_generate',
+    containerClass: 'oa-tool-gen-audio',
+    extractItems(payload) {
+      return payload?.audio ? [payload.audio] : [];
+    },
+    createEl() {
+      const el = document.createElement('audio');
+      el.controls = true;
+      el.preload = 'metadata';
+      return el;
+    },
+  },
+  {
+    toolName: 'video_generate',
+    containerClass: 'oa-tool-gen-video',
+    extractItems(payload) {
+      return payload?.video ? [payload.video] : [];
+    },
+    createEl() {
+      const el = document.createElement('video');
+      el.controls = true;
+      el.preload = 'metadata';
+      return el;
+    },
+  },
+];
+
+function _attachmentMediaUrl(attachmentId) {
+  return '/api/attachments/' + encodeURIComponent(attachmentId)
+    + '?session_id=' + encodeURIComponent(typeof sessionId !== 'undefined' ? sessionId : 'web-chat')
+    + '&agent_id=' + encodeURIComponent(typeof agentId !== 'undefined' ? agentId : 'default');
+}
+
+/** 在工具行内追加生成内容预览（图片/音频/视频），根据 row.tool 自动判断类型。 */
+function appendGeneratedMediaToToolRow(detailsEl, row) {
+  if (!detailsEl || !row) return;
+  const name = (row.tool || row.name || '').toLowerCase();
+  const handler = _MEDIA_HANDLERS.find(function(h) { return h.toolName === name; });
+  if (!handler) return;
+  let payload;
+  try { payload = JSON.parse(String(row.result || '')); } catch (_) { return; }
+  const items = handler.extractItems(payload);
+  if (!items.length) return;
+  detailsEl.querySelectorAll('.' + handler.containerClass).forEach(function(n) { n.remove(); });
+  const wrap = document.createElement('div');
+  wrap.className = handler.containerClass;
+  items.forEach(function(item) {
+    if (!item || !item.attachment_id) return;
+    const el = handler.createEl(item);
+    el.src = _attachmentMediaUrl(item.attachment_id);
+    wrap.appendChild(el);
+  });
+  if (wrap.childNodes.length) {
+    detailsEl.appendChild(wrap);
+    if (handler.postProcess) handler.postProcess(wrap);
+  }
+}
+
+function appendAgentToolTraceRowToLog(row, index, total, opts) {
+  opts = opts || {};
+  const name = (row && (row.tool || row.name)) || 'tool';
+  const args = row && row.arguments != null ? String(row.arguments) : '';
+  const res = row && row.result != null ? String(row.result) : '';
+  const running = !!opts.running;
+  const showIdx = total > 1 && !opts.hideIndex;
+  const suffix = showIdx ? ' (' + (index + 1) + ')' : '';
+
+  const wrap = document.createElement('details');
+  wrap.className = 'system-msg system-tools oa-live-tool';
+  if (running) wrap.classList.add('is-running');
+
+  const summary = document.createElement('summary');
+  summary.className = 'oa-live-tool-summary';
+  if (running) {
+    const spinner = document.createElement('span');
+    spinner.className = 'oa-live-tool-spinner';
+    spinner.setAttribute('aria-hidden', 'true');
+    summary.appendChild(spinner);
+  }
+  const label = document.createElement('span');
+  label.className = 'oa-live-tool-label oa-live-tool-title';
+  label.textContent = (running ? '执行中：' : '已完成：') + name + suffix;
+  summary.appendChild(label);
+
+  const pre = document.createElement('pre');
+  pre.className = 'oa-tool-trace-pre';
+  if (running) {
+    pre.textContent = args ? '参数：\n' + args + '\n' : '';
+  } else {
+    pre.textContent = '参数：\n' + args + '\n\n输出：\n' + res;
+  }
+  wrap.appendChild(summary);
+  wrap.appendChild(pre);
+
+  appendGeneratedMediaToToolRow(wrap, row);
+
+  if (opts.prepend && log.firstChild) {
+    log.insertBefore(wrap, log.firstChild);
+  } else {
+    log.appendChild(wrap);
+  }
+  if (!opts.skipScroll) scrollLog();
+  return wrap;
+}
+
+/** 用服务端 tool_trace 覆盖/补齐当前 log 内的时间轴工具块（与 WS 块对齐）。
+ * 自动清理多余旧块（防重），确保最终 log 中工具块数 === toolTrace.length。 */
+function syncLiveToolsFromToolTrace(toolTrace) {
+  if (typeof log === 'undefined' || !log) return;
+  const tt = Array.isArray(toolTrace) ? toolTrace : [];
+  // 收集当前所有工具块
+  const all = [];
+  try {
+    log.querySelectorAll('details.system-msg.system-tools.oa-live-tool').forEach(function(n) {
+      all.push(n);
+    });
+  } catch (_) {}
+  // 清理多余旧块：保留最后 tt.length 个，移除前面的
+  if (all.length > tt.length) {
+    const removeCount = all.length - tt.length;
+    all.slice(0, removeCount).forEach(function(n) {
+      try { n.parentNode.removeChild(n); } catch (_) {}
+    });
+    var kept = all.slice(removeCount);
+  } else {
+    var kept = all.slice();
+  }
+  // 更新/补齐
+  for (var i = 0; i < tt.length; i++) {
+    if (i < kept.length) {
+      updateTimelineToolRowElement(kept[i], tt[i], i, tt.length);
+    } else {
+      appendAgentToolTraceRowToLog(tt[i], i, tt.length, { skipScroll: true });
+    }
+  }
+  scrollLog();
+}
+
+function updateTimelineToolRowElement(detailsEl, row, index, total) {
+  if (!detailsEl || !row) return;
+  detailsEl.classList.remove('is-running');
+  const name = (row && (row.tool || row.name)) || 'tool';
+  const args = row && row.arguments != null ? String(row.arguments) : '';
+  const res = row && row.result != null ? String(row.result) : '';
+  const title = detailsEl.querySelector('.oa-live-tool-title');
+  if (title) {
+    const suffix = total > 1 ? ' (' + (index + 1) + ')' : '';
+    title.textContent = '已完成：' + name + suffix;
+  }
+  const pre = detailsEl.querySelector('.oa-tool-trace-pre');
+  if (pre) pre.textContent = '参数：\n' + args + '\n\n输出：\n' + res;
+  appendGeneratedMediaToToolRow(detailsEl, row);
+  const spin = detailsEl.querySelector('.oa-live-tool-spinner');
+  if (spin && spin.parentNode) spin.parentNode.removeChild(spin);
+}

codeagent/web/static/03f-timeline.js

@@ -0,0 +1,54 @@
+/**
+ * 渲染助手消息，但将 toolTrace 中的每个工具调用渲染为独立元素，
+ * 而不是全部塞在一个气泡里。用于转录加载时保持与实时执行一致的展示。
+ */
+function bubbleAgentWithSplitToolTrace(text, toolTrace, opts) {
+  opts = opts || {};
+  const at = opts.at;
+  const tt = Array.isArray(toolTrace) ? toolTrace : [];
+
+  // 1. 文本内容气泡（reasoning_content 由 opts.reasoningContent 传入，暂不展现）
+  const cleanText = stripOaToolOrphans(normReply(text || ''));
+  if (cleanText) {
+    const wrap = document.createElement('div');
+    wrap.className = 'msg-row msg-agent';
+    const col = document.createElement('div');
+    col.className = 'msg-col';
+    const meta = document.createElement('div');
+    meta.className = 'msg-meta';
+    const label = '助手';
+    const ts = formatBubbleTime(at);
+    meta.textContent = ts ? label + ' · ' + ts : label;
+    const b = document.createElement('div');
+    b.className = 'bubble bubble-agent';
+    b.innerHTML = renderMarkdown(cleanText);
+    ensureLinksOpenNewTab(b);
+    col.appendChild(meta);
+    col.appendChild(b);
+    if (typeof appendBubbleTtsBar === 'function') {
+      appendBubbleTtsBar(col, text, { role: 'agent' });
+    }
+    wrap.appendChild(col);
+    if (opts.prepend && log.firstChild) {
+      log.insertBefore(wrap, log.firstChild);
+    } else {
+      log.appendChild(wrap);
+    }
+  }
+
+  // 3. 每个工具调用独立渲染（与 WS 实时 appendAgentToolTraceRowToLog 一致）
+  tt.forEach(function(row, i) {
+    appendAgentToolTraceRowToLog(row, i, tt.length, { prepend: !!opts.prepend, skipScroll: true });
+  });
+
+  if (!opts.skipScroll && !opts.prepend) scrollLog();
+}
+
+function systemMsg(kind, text, opts) {
+  opts = opts || {};
+  const d = document.createElement('div');
+  d.className = 'system-msg system-' + kind;
+  d.textContent = text;
+  log.appendChild(d);
+  if (!opts.skipScroll) scrollLog();
+}

codeagent/web/static/03g-bubble-tts.js

@@ -0,0 +1,292 @@
+/* Bubble text-to-speech: cached playback + MiniMax / browser fallback */
+
+var _bubbleTtsAudio = null;
+var _bubbleTtsBtn = null;
+
+function plainTextForTts(raw) {
+  var t = String(raw || '');
+  if (typeof normReply === 'function') t = normReply(t);
+  t = t.replace(/```[\s\S]*?```/g, ' ');
+  t = t.replace(/`([^`]+)`/g, '$1');
+  t = t.replace(/!\[[^\]]*\]\([^)]*\)/g, '');
+  t = t.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1');
+  t = t.replace(/^#+\s+/gm, '');
+  t = t.replace(/<[^>]+>/g, ' ');
+  t = t.replace(/[*_~>#|]/g, ' ');
+  t = t.replace(/\s+/g, ' ').trim();
+  return t;
+}
+
+function ttsCacheKey(plain, settings) {
+  return (settings.voice_id || '') + '|' + (settings.model || '') + '|' + plain;
+}
+
+function clearBubbleTtsCache(btn) {
+  if (!btn) return;
+  if (btn._ttsCacheUrl) {
+    try { URL.revokeObjectURL(btn._ttsCacheUrl); } catch (_) {}
+  }
+  btn._ttsCacheKey = null;
+  btn._ttsCacheUrl = null;
+}
+
+function clearAllBubbleTtsCaches() {
+  try {
+    document.querySelectorAll('.bubble-tts-btn').forEach(function(btn) {
+      clearBubbleTtsCache(btn);
+    });
+  } catch (_) {}
+}
+
+function stopBubbleTtsPlayback() {
+  if (_bubbleTtsAudio) {
+    try {
+      _bubbleTtsAudio.pause();
+      _bubbleTtsAudio.currentTime = 0;
+    } catch (_) {}
+    _bubbleTtsAudio = null;
+  }
+  if (window.speechSynthesis) {
+    try { window.speechSynthesis.cancel(); } catch (_) {}
+  }
+  if (_bubbleTtsBtn) {
+    _bubbleTtsBtn.classList.remove('is-playing');
+    _bubbleTtsBtn.setAttribute('aria-label', '朗读');
+    _bubbleTtsBtn = null;
+  }
+}
+
+function speakBubbleWithBrowser(text, btn) {
+  if (!window.speechSynthesis) return false;
+  stopBubbleTtsPlayback();
+  _bubbleTtsBtn = btn;
+  btn.classList.add('is-playing');
+  btn.setAttribute('aria-label', '停止朗读');
+  var u = new SpeechSynthesisUtterance(text);
+  u.lang = 'zh-CN';
+  u.onend = function() { stopBubbleTtsPlayback(); };
+  u.onerror = function() { stopBubbleTtsPlayback(); };
+  window.speechSynthesis.speak(u);
+  return true;
+}
+
+async function playBubbleAudioUrl(url, btn) {
+  stopBubbleTtsPlayback();
+  _bubbleTtsBtn = btn;
+  btn.classList.add('is-playing');
+  btn.setAttribute('aria-label', '停止朗读');
+  var audio = new Audio(url);
+  _bubbleTtsAudio = audio;
+  audio.onended = function() { stopBubbleTtsPlayback(); };
+  audio.onerror = function() { stopBubbleTtsPlayback(); };
+  await audio.play();
+}
+
+async function fetchAndCacheBubbleTts(plain, settings, btn) {
+  var r = await fetch('/api/tts', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'same-origin',
+    body: JSON.stringify({
+      text: plain,
+      voice_id: settings.voice_id || undefined,
+      model: settings.model || undefined,
+    }),
+  });
+  if (!r.ok) {
+    var err = null;
+    try { err = await r.json(); } catch (_) {}
+    var detail = (err && err.detail) || r.statusText || 'TTS failed';
+    var e = new Error(detail);
+    e.fallback = !!(err && err.fallback);
+    e.statusCode = (err && err.status_code) || r.status;
+    throw e;
+  }
+  var blob = await r.blob();
+  clearBubbleTtsCache(btn);
+  var url = URL.createObjectURL(blob);
+  btn._ttsCacheKey = ttsCacheKey(plain, settings);
+  btn._ttsCacheUrl = url;
+  await playBubbleAudioUrl(url, btn);
+}
+
+async function toggleBubbleTts(text, btn) {
+  if (btn.classList.contains('is-playing')) {
+    stopBubbleTtsPlayback();
+    return;
+  }
+  var plain = plainTextForTts(text);
+  if (!plain || plain.length < 2) return;
+  var settings = typeof getTtsPlaybackSettings === 'function'
+    ? getTtsPlaybackSettings()
+    : { voice_id: '', model: '' };
+  var key = ttsCacheKey(plain, settings);
+
+  if (btn._ttsCacheKey === key && btn._ttsCacheUrl) {
+    try {
+      await playBubbleAudioUrl(btn._ttsCacheUrl, btn);
+    } catch (_) {
+      clearBubbleTtsCache(btn);
+      await fetchAndCacheBubbleTts(plain, settings, btn);
+    }
+    return;
+  }
+
+  try {
+    await fetchAndCacheBubbleTts(plain, settings, btn);
+  } catch (e) {
+    var usedBrowser = false;
+    if (e && e.fallback) {
+      usedBrowser = speakBubbleWithBrowser(plain, btn);
+    }
+    if (typeof systemMsg === 'function') {
+      var msg = String((e && e.message) || 'TTS 不可用');
+      if (usedBrowser) {
+        systemMsg('info', 'MiniMax 朗读失败：' + msg + '（已改用浏览器朗读）');
+      } else {
+        systemMsg('err', '无法朗读：' + msg);
+      }
+    } else if (!usedBrowser && !(e && e.fallback)) {
+      speakBubbleWithBrowser(plain, btn);
+    }
+  }
+}
+
+async function copyBubbleContent(text, btn) {
+  var content = String(text || '');
+  if (typeof normReply === 'function') content = normReply(content);
+  if (typeof stripOaToolOrphans === 'function') content = stripOaToolOrphans(content);
+  if (typeof extractOaToolCallBlocks === 'function') content = extractOaToolCallBlocks(content).text;
+  content = content.trim();
+  if (!content) return;
+
+  var copied = false;
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(content);
+      copied = true;
+    }
+  } catch (_) {}
+
+  if (!copied) {
+    try {
+      if (typeof copyToClipboard === 'function') {
+        copyToClipboard(content);
+        copied = true;
+      } else {
+        var ta = document.createElement('textarea');
+        ta.value = content;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        copied = true;
+      }
+    } catch (_) {}
+  }
+
+  if (!copied || !btn) return;
+
+  var defaultIcon = btn.innerHTML;
+  btn.classList.add('is-copied');
+  btn.setAttribute('aria-label', '已复制');
+  btn.title = '已复制';
+  btn.innerHTML = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+  setTimeout(function() {
+    btn.classList.remove('is-copied');
+    btn.setAttribute('aria-label', '复制');
+    btn.title = '复制内容';
+    btn.innerHTML = defaultIcon;
+  }, 1500);
+}
+
+function appendBubbleTtsBar(col, rawText, opts) {
+  opts = opts || {};
+  if (!col) return;
+  var role = opts.role || 'agent';
+  if (role === 'agent') {
+    var plain = plainTextForTts(rawText);
+    if (!plain || plain.length < 2) return;
+  }
+
+  var existing = col.querySelector('.bubble-tts-bar');
+  if (existing) existing.remove();
+
+  var bar = document.createElement('div');
+  bar.className = 'bubble-tts-bar';
+
+  // 复制按钮（所有角色都有）
+  var copyBtn = document.createElement('button');
+  copyBtn.type = 'button';
+  copyBtn.className = 'bubble-copy-btn';
+  copyBtn.title = '复制内容';
+  copyBtn.setAttribute('aria-label', '复制');
+  copyBtn.innerHTML = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';
+  copyBtn.addEventListener('click', function(e) {
+    e.stopPropagation();
+    copyBubbleContent(rawText, copyBtn);
+  });
+  bar.appendChild(copyBtn);
+
+  // 朗读按钮（仅 agent 消息）
+  if (role === 'agent') {
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'bubble-tts-btn';
+    btn.title = '朗读（首次合成，之后复播）';
+    btn.setAttribute('aria-label', '朗读');
+    btn.innerHTML = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 5.636a9 9 0 0 1 0 12.728"/></svg>';
+    btn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      toggleBubbleTts(rawText, btn);
+    });
+    bar.appendChild(btn);
+  }
+
+  col.appendChild(bar);
+}
+
+// ── 代码块复制（全局事件委托） ──
+document.addEventListener('click', function(e) {
+  var btn = e.target.closest('.code-copy-btn');
+  if (!btn) return;
+  var wrap = btn.closest('.code-block-wrap');
+  if (!wrap) return;
+  var code = wrap.querySelector('code');
+  if (!code) return;
+  var text = code.textContent || '';
+  if (!text) return;
+
+  var copied = false;
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(function() { copied = true; }).catch(function() {});
+    }
+  } catch (_) {}
+
+  if (!copied) {
+    try {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+      copied = true;
+    } catch (_) {}
+  }
+
+  if (!copied || !btn) return;
+
+  var orig = btn.innerHTML;
+  btn.innerHTML = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
+  btn.classList.add('is-copied');
+  setTimeout(function() {
+    btn.classList.remove('is-copied');
+    btn.innerHTML = orig;
+  }, 1500);
+});

codeagent/web/static/04-components-p1.css

@@ -0,0 +1 @@
+/* ================================================================ * 04-components.css — Nav rail, session panel, buttons, forms, sections * ================================================================ *//* ============ Nav rail ============ */.nav-rail {  display: flex;  flex-direction: column;  gap: 2px;  padding: var(--sp-3) var(--sp-1) 0;}.nav-rail__item {  display: flex;  align-items: center;  gap: var(--sp-3);  padding: 7px 10px;  border: none;  background: transparent;  border-radius: var(--r-md);  cursor: pointer;  color: var(--text-secondary);  font-size: 13px;  font-weight: 500;  text-align: left;  transition: background 0.12s ease, color 0.12s ease;}.nav-rail__item:hover { background: var(--bg-hover); color: var(--text); }.nav-rail__item.active {  background: var(--accent-soft);  color: var(--accent);  font-weight: 600;}.nav-rail__icon {  width: 16px; height: 16px;  flex-shrink: 0;  display: inline-flex;  align-items: center;  justify-content: center;  opacity: 0.9;}.nav-rail__label { flex: 1; min-width: 0; }

codeagent/web/static/04-components-p2b.css

@@ -0,0 +1 @@
+/* ============ Session panel ============ */.sess-panel {  flex: 1;  min-height: 0;  display: flex;  flex-direction: column;  padding: 0 var(--sp-2) var(--sp-2);}.sess-panel__toolbar {  display: flex;  align-items: center;  gap: var(--sp-2);  padding: 0 var(--sp-1);  margin-bottom: var(--sp-2);  flex-shrink: 0;}.agent-select {  flex: 1;  min-width: 0;  height: 28px;  padding: 0 26px 0 8px;  background: var(--bg-subtle);  border: 1px solid var(--border);  border-radius: var(--r-sm);  font-size: 12px;  color: var(--text);  appearance: none;  cursor: pointer;  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8l4 4 4-4'/></svg>");  background-repeat: no-repeat;  background-position: right 6px center;  background-size: 14px;}.agent-select:hover { border-color: var(--border-strong); }.sess-new-btn {  flex-shrink: 0;  width: 28px; height: 28px;  padding: 0;  border: 1px solid var(--border);  border-radius: var(--r-sm);  background: var(--bg-subtle);  color: var(--text-secondary);  cursor: pointer;  display: inline-flex;  align-items: center;  justify-content: center;  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;}.sess-new-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }.sess-list {  flex: 1;  min-height: 0;  overflow-y: auto;  display: flex;  flex-direction: column;  gap: 1px;  padding: var(--sp-1) 0 var(--sp-1);  margin: 0;  scrollbar-width: thin;  scrollbar-color: var(--border-strong) transparent;}.sess-list::-webkit-scrollbar { width: 6px; }.sess-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }.sess-list::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }.sess-row {  display: flex;  align-items: stretch;  width: 100%;  border-radius: var(--r-md);  transition: background 0.12s ease;  position: relative;}.sess-row:hover { background: var(--bg-hover); }.sess-row.is-active { background: var(--accent-soft); }.sess-row.is-active::before {  content: '';  position: absolute;  left: 0; top: 7px; bottom: 7px;  width: 2px;  background: var(--accent);  border-radius: 0 2px 2px 0;}.sess-item-main {  flex: 1;  min-width: 0;  display: flex;  align-items: flex-start;  gap: var(--sp-2);  text-align: left;  padding: 7px 6px 7px 10px;  border: none;  background: transparent;  cursor: pointer;  color: inherit;  font: inherit;  border-radius: var(--r-md);}.sess-item__channel-dot {  width: 5px; height: 5px;  border-radius: 50%;  background: var(--text-subtle);  margin-top: 7px;  flex-shrink: 0;  opacity: 0.6;}.sess-row.is-active .sess-item__channel-dot { background: var(--accent); opacity: 1; }.sess-item__body { flex: 1; min-width: 0; }.sess-item__title {  font-size: 12.5px;  font-weight: 500;  line-height: 1.35;  color: var(--text);  display: -webkit-box;  -webkit-line-clamp: 1;  line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;}.sess-row.is-active .sess-item__title { font-weight: 600; color: var(--accent); }.sess-item__sub {  font-size: 11px;  color: var(--text-muted);  margin-top: 2px;  line-height: 1.3;  display: -webkit-box;  -webkit-line-clamp: 1;  line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;}.sess-item__badge {  flex-shrink: 0;  min-width: 18px; height: 18px;  padding: 0 5px;  margin-top: 3px;  border-radius: var(--r-full);  background: var(--danger);  color: #fff;  font-size: 10px;  font-weight: 700;  display: inline-flex;  align-items: center;  justify-content: center;  line-height: 1;  font-variant-numeric: tabular-nums;}.sess-item__badge[hidden] { display: none !important; }.sess-item__op-wrap {  position: relative;  flex-shrink: 0;  display: flex;  align-items: flex-start;  padding: 5px 4px 5px 0;  opacity: 0;  transition: opacity 0.12s ease;}.sess-row:hover .sess-item__op-wrap,.sess-row.is-active .sess-item__op-wrap,.sess-item__op-wrap:focus-within { opacity: 1; }.sess-item__op-trigger {  width: 22px; height: 22px;  padding: 0;  border: none;  border-radius: var(--r-xs);  background: transparent;  color: var(--text-muted);  font-size: 14px;  line-height: 1;  cursor: pointer;  display: inline-flex;  align-items: center;  justify-content: center;}.sess-item__op-trigger:hover { background: var(--bg-hover); color: var(--text); }.sess-item__menu {  position: absolute;  right: 0;  top: 100%;  margin-top: 4px;  min-width: 120px;  padding: var(--sp-1);  display: none;  flex-direction: column;  gap: 1px;  background: var(--bg-panel);  border: 1px solid var(--border);  border-radius: var(--r-md);  box-shadow: var(--shadow-md);  z-index: 40;}.sess-item__op-wrap:hover .sess-item__menu,.sess-item__op-wrap:focus-within .sess-item__menu { display: flex; }.sess-item__menu button {  display: block;  width: 100%;  text-align: left;  padding: 6px 10px;  border: none;  border-radius: var(--r-sm);  background: transparent;  color: var(--text-secondary);  font-size: 12.5px;  cursor: pointer;  font: inherit;}.sess-item__menu button:hover { background: var(--bg-hover); color: var(--text); }.sess-item__menu-danger:hover { background: var(--danger-soft) !important; color: var(--danger) !important; }

codeagent/web/static/04-components-p3.css

@@ -0,0 +1,2 @@
+/* ============ Buttons ============ */.btn {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 6px;  padding: 0 12px;  height: 30px;  border-radius: var(--r-md);  border: 1px solid transparent;  background: transparent;  color: var(--text-secondary);  font-size: 12.5px;  font-weight: 500;  line-height: 1;  cursor: pointer;  font-family: inherit;  white-space: nowrap;  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;}.btn:disabled { opacity: 0.45; cursor: not-allowed; }.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }.btn--primary {  background: var(--accent);  color: #fff;  border-color: var(--accent);  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.22);}.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }.btn--primary:active:not(:disabled) { transform: translateY(0.5px); }.btn--ghost {  background: var(--bg-panel);  color: var(--text-secondary);  border-color: var(--border);}.btn--ghost:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text); }.btn--subtle {  background: transparent;  color: var(--text-muted);}.btn--subtle:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); }.btn--xs { height: 24px; padding: 0 7px; font-size: 11px; border-radius: var(--r-xs); }
+/* ============ Form controls ============ */.form-label {  display: block;  font-size: 10.5px;  font-weight: 600;  text-transform: uppercase;  letter-spacing: 0.07em;  color: var(--text-muted);  margin: var(--sp-4) 0 var(--sp-2);}.form-label:first-child,div > .form-label:first-of-type { margin-top: 0; }input[type=text], input[type=password], input[type=url], input[type=search], input[type=number], select, textarea {  width: 100%;  background: var(--bg-panel);  color: var(--text);  border: 1px solid var(--border);  border-radius: var(--r-md);  padding: 7px 10px;  font-family: inherit;  font-size: 13px;  line-height: 1.4;  transition: border-color 0.12s ease, box-shadow 0.12s ease;}input[type=text]:hover, input[type=password]:hover, input[type=url]:hover, input[type=number]:hover, select:hover, textarea:hover { border-color: var(--border-strong); }input[type=text]:focus, input[type=password]:focus, input[type=url]:focus, input[type=number]:focus, select:focus, textarea:focus {  outline: none;  border-color: var(--accent);  box-shadow: var(--shadow-focus);}textarea {  resize: vertical;  font-family: var(--font-mono);  font-size: 12.5px;  line-height: 1.55;}.md-select { max-width: 360px; padding-right: 30px; }.cron-json-edit { min-height: 200px; }.env-edit { min-height: 220px; margin-top: var(--sp-3); }.env-edit.md-edit { min-height: 320px; }.checkbox-row {  display: flex;  align-items: flex-start;  gap: var(--sp-2);  font-size: 13px;  color: var(--text-secondary);  cursor: pointer;  line-height: 1.5;  margin: var(--sp-3) 0;}.checkbox-row input { margin-top: 3px; accent-color: var(--accent); }.checkbox-row.stacked { display: flex; }/* ============ Chat env config form ============ */.form-row {  display: flex;  align-items: center;  gap: var(--sp-3);  margin: var(--sp-3) 0;  flex-wrap: wrap;}.form-row .form-label {  margin: 0;  white-space: nowrap;  min-width: 120px;}.form-input-sm {  width: 100px;}.form-hint {  font-size: 11px;  color: var(--text-muted);  margin-left: var(--sp-1);}.sub-row {  margin-left: var(--sp-5);  padding-left: var(--sp-3);  border-left: 2px solid var(--border);}.sub-rows {  margin-left: var(--sp-5);  padding-left: var(--sp-3);  border-left: 2px solid var(--border);}.sub-rows .form-row {  margin: var(--sp-2) 0;}

codeagent/web/static/04-components-p4.css

@@ -0,0 +1 @@
+/* ============ Sections (config/plugins pages) ============ */.section {  background: var(--bg-panel);  border: 1px solid var(--border);  border-radius: var(--r-xl);  padding: var(--sp-5) var(--sp-6) var(--sp-6);  box-shadow: var(--shadow-xs);}.section__header {  display: flex;  align-items: center;  justify-content: space-between;  gap: var(--sp-3);  margin-bottom: var(--sp-3);}.section__title {  font-size: 12px;  font-weight: 650;  letter-spacing: 0.08em;  color: var(--text);  margin: 0;  text-transform: uppercase;  display: inline-flex;  align-items: center;  gap: var(--sp-2);}.section__title::before {  content: '';  width: 4px; height: 14px;  background: var(--accent);  border-radius: 2px;  flex-shrink: 0;  opacity: 0.85;}.section__desc {  font-size: 12.5px;  color: var(--text-muted);  margin: 0 0 var(--sp-4);  line-height: 1.65;}.section code, .section__desc code, .checkbox-row code {  font-family: var(--font-mono);  font-size: 0.88em;  padding: 1px 5px;  border-radius: 4px;  background: var(--bg-subtle);  border: 1px solid var(--border);  color: var(--text-secondary);}.row-actions {  display: flex;  flex-wrap: wrap;  gap: var(--sp-2);  margin-top: var(--sp-4);}.status-line {  margin-top: var(--sp-3);  font-size: 12px;  color: var(--text-muted);  line-height: 1.6;  word-break: break-all;}.status-line.is-err { color: var(--danger); }.config-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  gap: var(--sp-6);  margin-top: var(--sp-2);}.field-row {  display: flex;  gap: var(--sp-2);  align-items: stretch;  flex-wrap: wrap;}.field-row > input { flex: 1; min-width: 12rem; }/* ============ Preset cards (LLM) ============ */.preset-list {  display: flex;  flex-direction: column;  gap: var(--sp-2);}.preset-card {  display: flex;  align-items: center;  justify-content: space-between;  background: var(--bg-subtle);  border: 1px solid var(--border);  border-radius: var(--r-md);  padding: var(--sp-3) var(--sp-4);  transition: border-color 0.12s ease;}.preset-card:hover { border-color: var(--accent); }.preset-card__info { flex: 1; min-width: 0; }.preset-card__name {  font-weight: 600;  font-size: 13px;  color: var(--text);  line-height: 1.4;}.preset-card__detail {  font-size: 11.5px;  color: var(--text-subtle);  line-height: 1.4;  margin-top: 2px;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.preset-card__actions {  display: flex;  gap: var(--sp-1);  flex-shrink: 0;  margin-left: var(--sp-3);}.preset-empty { color: var(--text-subtle); font-size: 13px; padding: var(--sp-4) 0; }.preset-del { color: var(--danger); }.preset-del:hover { background: var(--danger); color: #fff; }.preset-card-wrap { margin-bottom: var(--sp-2); }.preset-card-wrap .preset-card { border-radius: var(--r-md) var(--r-md) 0 0; }.preset-card-wrap .preset-edit-wrap {  background: var(--bg-panel);  border: 1px solid var(--border);  border-top: none;  border-radius: 0 0 var(--r-md) var(--r-md);  padding: var(--sp-3) var(--sp-4) var(--sp-4);}.preset-card-wrap.is-new .preset-edit-wrap {  border-radius: var(--r-md);  border: 1px solid var(--accent);}.preset-card__badge {  display: inline-block;  font-weight: 500;  font-size: 10px;  color: #fff;  background: var(--accent);  border-radius: var(--r-xs);  padding: 0 5px;  margin-left: 6px;  vertical-align: middle;  line-height: 1.5;}

codeagent/web/static/04-components-p5.css

@@ -0,0 +1 @@
+/* ============ Cron job cards ============ */.cron-list {  display: flex;  flex-direction: column;  gap: var(--sp-2);}.cron-card {  display: flex;  align-items: center;  justify-content: space-between;  background: var(--bg-subtle);  border: 1px solid var(--border);  border-radius: var(--r-md);  padding: var(--sp-3) var(--sp-4);  transition: border-color 0.12s ease;}.cron-card:hover { border-color: var(--accent); }.cron-card__info { flex: 1; min-width: 0; }.cron-card__name {  font-weight: 600;  font-size: 13px;  color: var(--text);  line-height: 1.4;  display: flex;  align-items: center;  gap: var(--sp-2);}.cron-card__detail {  font-size: 11.5px;  color: var(--text-subtle);  line-height: 1.4;  margin-top: 2px;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.cron-card__actions {  display: flex;  gap: var(--sp-1);  flex-shrink: 0;  margin-left: var(--sp-3);}.cron-card__badge {  display: inline-block;  font-weight: 500;  font-size: 10px;  color: #fff;  background: var(--accent);  border-radius: var(--r-xs);  padding: 0 5px;  vertical-align: middle;  line-height: 1.5;}.cron-card__badge-off {  background: var(--text-muted);}.cron-card__status-dot {  display: inline-block;  width: 8px;  height: 8px;  border-radius: 50%;  margin-right: 4px;}.cron-card__status-dot.on { background: #22c55e; }.cron-card__status-dot.off { background: var(--text-muted); }.cron-card-wrap { margin-bottom: var(--sp-2); }.cron-card-wrap .cron-card { border-radius: var(--r-md) var(--r-md) 0 0; }.cron-card-wrap .cron-edit-wrap {  background: var(--bg-panel);  border: 1px solid var(--border);  border-top: none;  border-radius: 0 0 var(--r-md) var(--r-md);  padding: var(--sp-3) var(--sp-4) var(--sp-4);}.cron-card-wrap.is-new .cron-edit-wrap {  border-radius: var(--r-md);  border: 1px solid var(--accent);}.cron-empty { color: var(--text-subtle); font-size: 13px; padding: var(--sp-4) 0; }.cron-del { color: var(--danger); }.cron-del:hover { background: var(--danger); color: #fff; }.skill-list .cron-card-wrap, .tool-list .cron-card-wrap { margin-bottom: var(--sp-2); }.tool-card-wrap { margin-bottom: var(--sp-2); }.tool-card-wrap .cron-card { cursor: pointer; border-radius: var(--r-md) var(--r-md) 0 0; }.tool-card-wrap .cron-edit-wrap {  border: 1px solid var(--border);  border-top: none;  padding: var(--sp-3);  border-radius: 0 0 var(--r-md) var(--r-md);  background: var(--bg);}.cron-form-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--sp-3) var(--sp-4);}.cron-form-grid .form-label {  display: block;  font-size: 11.5px;  font-weight: 600;  color: var(--text-secondary);  margin-bottom: var(--sp-1);}.cron-form-grid input,.cron-form-grid select,.cron-form-grid textarea {  width: 100%;  box-sizing: border-box;}.cron-form-full {  grid-column: 1 / -1;}.cron-form-full textarea {  min-height: 60px;  resize: vertical;}/* Cron toggle switch - global */.cron-global-toggle {  display: inline-flex;  align-items: center;  gap: var(--sp-3);  margin-bottom: var(--sp-3);  font-size: 13px;  font-weight: 500;}.toggle-switch {  position: relative;  width: 40px;  height: 22px;  background: var(--border);  border-radius: 11px;  cursor: pointer;  transition: background 0.2s;  flex-shrink: 0;}.toggle-switch.on { background: var(--accent); }.toggle-switch::after {  content: '';  position: absolute;  top: 2px;  left: 2px;  width: 18px;  height: 18px;  background: #fff;  border-radius: 50%;  transition: transform 0.2s;}.toggle-switch.on::after { transform: translateX(18px); }/* Inline cron preset selectors */.cron-quick-presets {  display: flex;  flex-wrap: wrap;  gap: var(--sp-1);  margin-top: var(--sp-1);}.cron-quick-preset {  font-size: 10.5px;  padding: 2px 8px;  border: 1px solid var(--border);  border-radius: var(--r-sm);  background: var(--bg-subtle);  cursor: pointer;  color: var(--text-secondary);  transition: all 0.12s;}.cron-quick-preset:hover {  border-color: var(--accent);  color: var(--accent);}.cron-quick-preset.active {  background: var(--accent);  color: #fff;  border-color: var(--accent);}/* Frequency block show/hide for natural-language mode switcher */.cron-freq-hidden { display: none !important; }

codeagent/web/static/04-components-p6.css

@@ -0,0 +1,58 @@
+/* Day-of-week pills */.cron-day-pill {  display: inline-flex;  align-items: center;  justify-content: center;  width: 44px;  height: 30px;  border: 1px solid var(--border);  border-radius: var(--r-sm);  background: var(--bg-subtle);  color: var(--text-secondary);  font-size: 12px;  cursor: pointer;  transition: all 0.12s;  user-select: none;}.cron-day-pill:hover {  border-color: var(--accent);  color: var(--accent);}.cron-day-pill--on {  background: var(--accent);  color: #fff;  border-color: var(--accent);}/* ============ Stats sidebar ============ */.sidebar-mode {  flex: 1;  min-height: 0;  display: none;  flex-direction: column;  overflow: hidden;}.sidebar-mode__scroll {  flex: 1;  min-height: 0;  overflow-y: auto;  scrollbar-width: thin;  scrollbar-color: var(--border-strong) transparent;}.sidebar-mode__scroll::-webkit-scrollbar { width: 6px; }.sidebar-mode__scroll::-webkit-scrollbar-thumb {  background: var(--border-strong);  border-radius: 3px;}.stats-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--sp-2);  padding: var(--sp-2) var(--sp-3) var(--sp-4);}.stats-card {  border: 1px solid var(--border);  border-radius: var(--r-md);  background: var(--bg-subtle);  padding: var(--sp-3);  text-align: center;}.stats-card__value {  font-size: 20px;  font-weight: 650;  letter-spacing: -0.02em;  color: var(--text);  line-height: 1.2;}.stats-card__label {  margin-top: 4px;  font-size: 11px;  color: var(--text-muted);  font-weight: 500;}.stats-section {  padding: 0 var(--sp-3) var(--sp-4);}.stats-recent {  display: flex;  flex-direction: column;  gap: 2px;  margin-top: var(--sp-2);}.stats-recent__row {  display: flex;  align-items: center;  justify-content: space-between;  gap: var(--sp-2);  padding: 7px var(--sp-2);  border-radius: var(--r-sm);  border: 1px solid var(--border);  background: var(--bg);}.stats-recent__name {  min-width: 0;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  font-size: 12px;  color: var(--text);}.stats-recent__meta {  flex-shrink: 0;  font-size: 11px;  color: var(--text-muted);}.config-tool-list__empty {  color: var(--text-muted);  font-size: 12px;  padding: 8px 12px;  font-style: italic;}.chat-env-form {  display: flex;  flex-direction: column;  gap: var(--sp-3);}.brand--stats {  display: flex;  align-items: center;  gap: var(--sp-3);  padding: var(--sp-2) var(--sp-1);  color: var(--text-muted);}.brand--stats .brand__name { color: var(--text); }/* ============ Search bar ============ */.search-bar {  display: flex; align-items: center; gap: var(--sp-1);  padding: var(--sp-1) var(--sp-2); margin: var(--sp-2);  border-radius: var(--r-md);  background: var(--bg-subtle);  border: 1px solid transparent;  transition: border-color 0.12s ease;}.search-bar:focus-within { border-color: var(--accent); }.search-bar__icon { flex-shrink: 0; opacity: 0.4; }.search-bar__input {  flex: 1; min-width: 0;  border: none; outline: none; background: transparent;  font-size: 12.5px; color: var(--text);}.search-bar__input::placeholder { color: var(--text-subtle); }.search-bar__clear {  flex-shrink: 0; width: 18px; height: 18px;  display: flex; align-items: center; justify-content: center;  border: none; border-radius: 50%; background: var(--bg-hover);  color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1;}/* ============ Project tree ============ */.project-tree {  flex: 1; min-height: 0;  overflow-y: auto; overflow-x: hidden;  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;  padding: 0 var(--sp-1);}.project-tree::-webkit-scrollbar { width: 6px; }.project-tree::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }.project-tree__empty { padding: var(--sp-6) var(--sp-3); text-align: center; font-size: 12px; color: var(--text-muted); }
+.project-tree__empty.tree-search__empty { color: var(--text-subtle); font-style: italic; }.project-tree__footer {  flex-shrink: 0; padding: var(--sp-2) var(--sp-3);}.tree-footer-btn {  display: flex; align-items: center; gap: var(--sp-2);  width: 100%; padding: var(--sp-2); border: none; border-radius: var(--r-sm);  background: transparent; color: var(--text-muted); cursor: pointer;  font-size: 12px; transition: background 0.1s ease;}.tree-footer-btn:hover { background: var(--bg-hover); color: var(--text); }
+
+/* ============ Sidebar cost summary ============ */
+.sidebar-cost {
+  flex-shrink: 0;
+  padding: var(--sp-1) var(--sp-3) var(--sp-2);
+  border-top: 1px solid var(--border);
+  margin: 0 var(--sp-2);
+}
+.sidebar-cost__title {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 4px;
+}
+.cost__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.cost__row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 3px 0;
+  font-size: 11px;
+}
+.cost__row--total {
+  border-top: 1px solid var(--border);
+  margin-top: 2px;
+  padding-top: 4px;
+  font-weight: 600;
+}
+.cost__model {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+.cost__tokens {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 10px;
+}
+.cost__amount {
+  flex-shrink: 0;
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  min-width: 48px;
+  text-align: right;
+}

codeagent/web/static/04-components-p7.css

@@ -0,0 +1,4 @@
+/* Tree node - project */.tree-project {  position: relative;}.tree-project__row {  display: flex; align-items: center; gap: 4px;  padding: 5px var(--sp-2); border-radius: var(--r-sm);  cursor: pointer; user-select: none; position: relative;  transition: background 0.1s ease;}.tree-project__row:hover { background: var(--bg-hover); }.tree-project__row--active { background: var(--accent-soft); }.tree-project__toggle {  flex-shrink: 0; width: 18px; height: 18px;  display: flex; align-items: center; justify-content: center;  border: none; border-radius: var(--r-xs); background: transparent;  color: var(--text-muted); cursor: pointer; font-size: 10px;  transition: transform 0.15s ease;}.tree-project__toggle--expanded { transform: rotate(90deg); }.tree-project__icon {  flex-shrink: 0;  display: flex;  align-items: center;  justify-content: center;  color: var(--text-muted);  opacity: 0.9;}.tree-project__icon svg { display: block; }.tree-project__name {  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--text);  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.tree-project__menu,
+.tree-project__add-session {  flex-shrink: 0; width: 20px; height: 20px;  display: none; align-items: center; justify-content: center;  border: none; border-radius: var(--r-xs); background: transparent;  color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1;}.tree-project__row:hover .tree-project__menu,
+.tree-project__row:hover .tree-project__add-session { display: flex; }.tree-project__menu:hover,
+.tree-project__add-session:hover { background: var(--bg-hover); color: var(--text); }.tree-project__active-bar {  position: absolute; left: -8px; top: 50%; transform: translateY(-50%);  width: 3px; height: 14px; border-radius: 0 3px 3px 0; background: var(--accent);}/* Tree node - session (child) */.tree-session { padding-left: 28px; }.tree-session__row {  display: flex; align-items: center; gap: 6px;  padding: 4px var(--sp-2); border-radius: var(--r-sm);  cursor: pointer; user-select: none; position: relative;  transition: background 0.1s ease;}.tree-session__row:hover { background: var(--bg-hover); }.tree-session__row--active { background: var(--accent-soft); }.tree-session__indicator {  flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;  background: var(--border-strong);}.tree-session__row--unread .tree-session__indicator { background: var(--accent); }.tree-session__title {  flex: 1; min-width: 0; font-size: 12px; color: var(--text-secondary);  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.tree-session__row--active .tree-session__title { color: var(--accent); font-weight: 600; }.tree-session__menu {  flex-shrink: 0; width: 18px; height: 18px;  display: none; align-items: center; justify-content: center;  border: none; border-radius: var(--r-xs); background: transparent;  color: var(--text-muted); cursor: pointer; font-size: 12px;}.tree-session__row:hover .tree-session__menu { display: flex; }.tree-session__menu:hover { background: var(--bg-hover); color: var(--text); }.tree-session__new {  padding: 4px var(--sp-2) 4px 28px; display: flex; align-items: center; gap: 6px;  font-size: 11.5px; color: var(--text-muted); cursor: pointer;  border: none; background: none; width: 100%; text-align: left;  border-radius: var(--r-sm); transition: color 0.1s ease;}.tree-session__new:hover { color: var(--accent); background: var(--bg-hover); }.tree-session__empty {  padding: 4px var(--sp-2) 4px 28px;  font-size: 11.5px; color: var(--text-subtle);}/* Search results */.tree-search-result { padding: var(--sp-2); }.tree-search-result__item {  display: flex; align-items: center; gap: var(--sp-2);  padding: 6px var(--sp-2); border-radius: var(--r-sm);  cursor: pointer; transition: background 0.1s ease;}.tree-search-result__item:hover { background: var(--bg-hover); }.tree-search-result__item--active { background: var(--accent-soft); }.tree-search-result__type {  font-size: 11px; color: var(--text-muted); flex-shrink: 0;}.tree-search-result__name {  flex: 1; min-width: 0; font-size: 12px; color: var(--text);  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.tree-search-result__project {  font-size: 10px; color: var(--text-subtle); flex-shrink: 0;}/* Context menu */.tree-context-menu {  position: fixed; z-index: 999;  min-width: 140px; padding: var(--sp-1) 0;  background: var(--bg-elevated); border: 1px solid var(--border);  border-radius: var(--r-md); box-shadow: var(--shadow-lg);}.tree-context-menu__item {  display: flex; align-items: center; gap: var(--sp-2);  padding: 6px var(--sp-3); font-size: 12px; color: var(--text); cursor: pointer;  transition: background 0.1s ease; border: none; background: none; width: 100%; text-align: left;}.tree-context-menu__item:hover { background: var(--bg-hover); }.tree-context-menu__item--danger { color: var(--danger); }/* Overlay for context menu */.tree-overlay { position: fixed; inset: 0; z-index: 998; }