micro-models-agent 2.12.0 → 2.14.0

package/dist/assets/setup.js

@@ -103,6 +103,7 @@
       securityBashBlock: false,
       securityFlagsBlock: false,
       securityPathsRestrict: true,
+      securityDetail: { bash: {}, paths: {}, flags: {}, network: {}, advanced: {} },
     },
   };
 
@@ -118,6 +119,12 @@
       state.answers.contextWindow = r.data.defaults.contextWindow || state.answers.contextWindow;
       state.answers.maxToolIterations =
         r.data.defaults.maxToolIterations || state.answers.maxToolIterations;
+      if (r.data.defaults.security) {
+        state.answers.securityDetail = Object.assign(
+          state.answers.securityDetail,
+          r.data.defaults.security,
+        );
+      }
     }
     const first = (r.data.providers || [])[0];
     if (first) {
@@ -137,6 +144,7 @@
   // --- rendering -------------------------------------------------------------
 
   function render() {
+    closePopup();
     const wrap = h("div", "setup-wrap");
     const title = h("h1", "setup-h");
     title.appendChild(h("span", "glyph", "◇"));
@@ -258,6 +266,27 @@
     });
     box.appendChild(field(tr("web.setup.provider.base_url"), input));
 
+    const actions = h("div", "setup-row-inline");
+    const test = h("button", "setup-btn", tr("web.setup.provider.test"));
+    test.type = "button";
+    test.addEventListener("click", async () => {
+      if (!state.answers.apiBase) {
+        setMsg(box, "err", tr("web.setup.provider.required"));
+        return;
+      }
+      test.disabled = true;
+      setMsg(box, "", tr("web.setup.provider.testing"));
+      const r = await api("/api/setup/models", {
+        method: "POST",
+        body: { baseUrl: state.answers.apiBase, apiKey: state.answers.apiKey },
+      });
+      test.disabled = false;
+      const models = (r.ok && r.data && r.data.models) || [];
+      if (r.ok && models.length) setMsg(box, "ok", tr("web.setup.provider.test_ok"));
+      else setMsg(box, "warn", tr("web.setup.provider.test_fail"));
+    });
+    actions.appendChild(test);
+
     if (state.answers.provider === "openai-compat" || state.answers.provider === "lmstudio") {
       const scan = h("button", "setup-btn", tr("web.setup.provider.scan"));
       scan.type = "button";
@@ -291,8 +320,11 @@
           results.appendChild(b);
         });
       });
-      box.appendChild(scan);
+      actions.appendChild(scan);
+      box.appendChild(actions);
       box.appendChild(results);
+    } else {
+      box.appendChild(actions);
     }
     box.appendChild(messageEl());
     return box;
@@ -393,6 +425,38 @@
     });
     box.appendChild(field(tr("web.setup.context.contextWindow"), cw));
 
+    const detect = h("button", "setup-btn", tr("web.setup.context.detect"));
+    detect.type = "button";
+    detect.addEventListener("click", async () => {
+      if (!state.answers.apiBase || !state.answers.model) {
+        setMsg(box, "err", tr("web.setup.context.detect_fail"));
+        return;
+      }
+      detect.disabled = true;
+      setMsg(box, "", tr("web.setup.context.detecting"));
+      const r = await api("/api/setup/context", {
+        method: "POST",
+        body: {
+          baseUrl: state.answers.apiBase,
+          apiKey: state.answers.apiKey,
+          model: state.answers.model,
+          providerType: state.answers.provider,
+        },
+      });
+      detect.disabled = false;
+      const n = r.ok && r.data && r.data.contextWindow;
+      if (r.ok && r.data && r.data.ok && typeof n === "number" && n > 0) {
+        state.answers.contextWindow = n;
+        cw.value = String(n);
+        setMsg(box, "ok", tr("web.setup.context.detect_ok", { count: n }));
+      } else {
+        setMsg(box, "warn", tr("web.setup.context.detect_fail"));
+      }
+    });
+    const row = h("div", "setup-row-inline");
+    row.appendChild(detect);
+    box.appendChild(row);
+
     const it = h("input", "setup-input");
     it.type = "number";
     it.min = "1";
@@ -408,25 +472,219 @@
   function renderSecurity() {
     const box = stepBody("security");
     const toggles = [
-      ["securityPathsRestrict", "web.setup.security.paths"],
-      ["securityBashBlock", "web.setup.security.bash"],
-      ["securityFlagsBlock", "web.setup.security.flags"],
+      ["securityPathsRestrict", "web.setup.security.paths", "web.setup.security.paths_desc", "paths"],
+      ["securityBashBlock", "web.setup.security.bash", "web.setup.security.bash_desc", "bash"],
+      ["securityFlagsBlock", "web.setup.security.flags", "web.setup.security.flags_desc", "flags"],
     ];
-    toggles.forEach(([key, labelKey]) => {
-      const row = h("label", "setup-toggle");
+    toggles.forEach(([key, labelKey, descKey, group]) => {
+      const row = h("div", "setup-sec-row");
+      const label = h("label", "setup-toggle");
       const cb = h("input");
       cb.type = "checkbox";
       cb.checked = Boolean(state.answers[key]);
       cb.addEventListener("change", () => {
         state.answers[key] = cb.checked;
       });
-      row.appendChild(cb);
-      row.appendChild(h("span", null, tr(labelKey)));
+      label.appendChild(cb);
+      const texts = h("span", "setup-toggle-texts");
+      texts.appendChild(h("span", "t", tr(labelKey)));
+      const desc = tr(descKey);
+      if (desc !== descKey) texts.appendChild(h("span", "d", desc));
+      label.appendChild(texts);
+      row.appendChild(label);
+      row.appendChild(detailButton(group, tr(labelKey)));
       box.appendChild(row);
     });
+
+    const advRow = h("div", "setup-sec-row");
+    const advTexts = h("span", "setup-toggle setup-adv-label");
+    advTexts.appendChild(h("span", "t", tr("web.setup.security.advanced")));
+    advRow.appendChild(advTexts);
+    advRow.appendChild(detailButton("advanced", tr("web.setup.security.advanced")));
+    box.appendChild(advRow);
     return box;
   }
 
+  // Описание поп-апов тонкой настройки: путь в securityDetail + тип поля.
+  const SECURITY_POPUPS = {
+    paths: [
+      ["paths.denied", "list", "web.setup.security.denied"],
+      ["paths.allowed", "list", "web.setup.security.allowed"],
+    ],
+    bash: [
+      ["bash.blacklist", "list", "web.setup.security.blacklist"],
+      ["bash.whitelist", "list", "web.setup.security.whitelist"],
+      ["bash.logCommands", "bool", "web.setup.security.log_commands"],
+    ],
+    flags: [
+      ["flags.dangerousFlags", "list", "web.setup.security.dangerous_flags"],
+      ["flags.dangerousOperators", "list", "web.setup.security.dangerous_operators"],
+    ],
+    advanced: [
+      ["network.enabled", "bool", "web.setup.security.network_enabled"],
+      ["network.deniedDomains", "list", "web.setup.security.denied_domains"],
+      ["network.allowedDomains", "list", "web.setup.security.allowed_domains"],
+      ["network.requestTimeout", "int", "web.setup.security.request_timeout"],
+      ["network.maxResponseSize", "int", "web.setup.security.max_response_size"],
+      ["advanced.maxRecursionDepth", "int", "web.setup.security.max_recursion"],
+      ["advanced.maxFileOperations", "int", "web.setup.security.max_file_ops"],
+      ["advanced.maxRequestsPerMinute", "int", "web.setup.security.rate_rpm"],
+      ["advanced.maxParallelTasks", "int", "web.setup.security.rate_parallel"],
+      ["advanced.contentScanEnabled", "bool", "web.setup.security.content_scan"],
+      ["advanced.sessionEncryptionEnabled", "bool", "web.setup.security.session_encryption"],
+      ["advanced.auditNotifierEnabled", "bool", "web.setup.security.audit_enabled"],
+      ["advanced.auditNotifierMinSeverity", "enum", "web.setup.security.audit_severity"],
+      ["advanced.auditNotifierEventTypes", "list", "web.setup.security.audit_events"],
+      ["advanced.auditNotifierMaxRetries", "int", "web.setup.security.audit_retries"],
+      ["advanced.auditNotifierWebhookTimeout", "int", "web.setup.security.audit_timeout"],
+    ],
+  };
+  const SEVERITIES = ["low", "medium", "high", "critical"];
+  const GROUP_KEYS = {
+    paths: ["paths"],
+    bash: ["bash"],
+    flags: ["flags"],
+    advanced: ["network", "advanced"],
+  };
+
+  function getPath(obj, path) {
+    return path.split(".").reduce((o, k) => (o == null ? undefined : o[k]), obj);
+  }
+  function setPath(obj, path, value) {
+    const keys = path.split(".");
+    let cur = obj;
+    for (let i = 0; i < keys.length - 1; i++) {
+      if (typeof cur[keys[i]] !== "object" || cur[keys[i]] === null) cur[keys[i]] = {};
+      cur = cur[keys[i]];
+    }
+    cur[keys[keys.length - 1]] = value;
+  }
+
+  function detailButton(group, title) {
+    const btn = h("button", "setup-detail-btn");
+    btn.type = "button";
+    btn.appendChild(h("span", "g", "⚙"));
+    btn.appendChild(h("span", "t", tr("web.setup.security.configure")));
+    btn.title = title;
+    btn.addEventListener("click", (e) => {
+      e.preventDefault();
+      openSecurityPopup(group, title);
+    });
+    return btn;
+  }
+
+  let popup = null;
+
+  function openSecurityPopup(group, title) {
+    const overlay = h("div", "setup-overlay");
+    const modal = h("div", "setup-modal");
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+
+    const head = h("div", "setup-modal-head");
+    const hIcon = h("span", "glyph", "⚙");
+    head.appendChild(hIcon);
+    head.appendChild(h("span", "setup-modal-title", title));
+    const close = h("button", "setup-modal-x", "✕");
+    close.type = "button";
+    close.addEventListener("click", closePopup);
+    head.appendChild(close);
+    modal.appendChild(head);
+
+    const body = h("div", "setup-modal-body");
+    body.appendChild(h("p", "setup-hint", tr("web.setup.security.popup_hint")));
+    SECURITY_POPUPS[group].forEach(([path, type, labelKey]) => {
+      body.appendChild(popupField(path, type, tr(labelKey)));
+    });
+    modal.appendChild(body);
+
+    const foot = h("div", "setup-modal-foot");
+    const reset = h("button", "setup-btn link", tr("web.setup.security.reset"));
+    reset.type = "button";
+    reset.addEventListener("click", () => {
+      const defaults = (state.display && state.display.defaults && state.display.defaults.security) || {};
+      (GROUP_KEYS[group] || [group]).forEach((src) => {
+        const fresh = defaults[src] || {};
+        Object.keys(fresh).forEach((k) => setPath(state.answers.securityDetail, src + "." + k, fresh[k]));
+      });
+      closePopup();
+      openSecurityPopup(group, title);
+    });
+    foot.appendChild(reset);
+    foot.appendChild(h("span", "spacer"));
+    const done = h("button", "setup-btn primary", tr("web.setup.security.popup_done"));
+    done.type = "button";
+    done.addEventListener("click", closePopup);
+    foot.appendChild(done);
+    modal.appendChild(foot);
+
+    overlay.appendChild(modal);
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) closePopup();
+    });
+    popup = overlay;
+    gate.appendChild(overlay);
+  }
+
+  function popupField(path, type, label) {
+    const wrap = h("div", "setup-field");
+    if (type === "list") {
+      wrap.appendChild(h("label", "setup-label", label));
+      const ta = h("textarea", "setup-input setup-textarea");
+      const cur = getPath(state.answers.securityDetail, path);
+      ta.value = Array.isArray(cur) ? cur.join("\n") : "";
+      ta.rows = 5;
+      ta.spellcheck = false;
+      ta.addEventListener("input", () => {
+        const items = ta.value
+          .split("\n")
+          .map((s) => s.trim())
+          .filter(Boolean);
+        setPath(state.answers.securityDetail, path, items);
+      });
+      wrap.appendChild(ta);
+    } else if (type === "bool") {
+      const row = h("label", "setup-toggle");
+      const cb = h("input");
+      cb.type = "checkbox";
+      cb.checked = Boolean(getPath(state.answers.securityDetail, path));
+      cb.addEventListener("change", () => setPath(state.answers.securityDetail, path, cb.checked));
+      row.appendChild(cb);
+      row.appendChild(h("span", "t", label));
+      wrap.appendChild(row);
+    } else if (type === "int") {
+      wrap.appendChild(h("label", "setup-label", label));
+      const inp = h("input", "setup-input");
+      inp.type = "number";
+      inp.min = "1";
+      const cur = getPath(state.answers.securityDetail, path);
+      inp.value = typeof cur === "number" ? String(cur) : "";
+      inp.addEventListener("input", () => {
+        const n = parseInt(inp.value, 10);
+        setPath(state.answers.securityDetail, path, Number.isFinite(n) && n > 0 ? n : undefined);
+      });
+      wrap.appendChild(inp);
+    } else if (type === "enum") {
+      wrap.appendChild(h("label", "setup-label", label));
+      const sel = h("select", "setup-input");
+      const cur = getPath(state.answers.securityDetail, path);
+      SEVERITIES.forEach((sev) => {
+        const opt = h("option", null, tr("web.setup.security.severity." + sev));
+        opt.value = sev;
+        if (cur === sev) opt.selected = true;
+        sel.appendChild(opt);
+      });
+      sel.addEventListener("change", () => setPath(state.answers.securityDetail, path, sel.value));
+      wrap.appendChild(sel);
+    }
+    return wrap;
+  }
+
+  function closePopup() {
+    if (popup && popup.parentNode) popup.parentNode.removeChild(popup);
+    popup = null;
+  }
+
   function securitySummary() {
     const on = [];
     if (state.answers.securityPathsRestrict) on.push(tr("web.setup.security.paths"));
@@ -534,6 +792,7 @@
         securityBashBlock: state.answers.securityBashBlock,
         securityFlagsBlock: state.answers.securityFlagsBlock,
         securityPathsRestrict: state.answers.securityPathsRestrict,
+        securityDetail: state.answers.securityDetail,
       },
     });
     if (!r.ok) {

package/dist/assets/styles.css

@@ -229,7 +229,7 @@ body[data-font="large"] { font-size: 17px; }
 .layout { flex: 1; display: flex; min-height: 0; }
 
 /* chat */
-.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
 .msgs { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 11px; }
 .msgs > * { flex-shrink: 0; min-height: fit-content; }
 /* messages live inside a per-tab `.feed` wrapper; it must mirror the `.msgs`
@@ -377,31 +377,23 @@ body.light .codeblock { border: 1px solid var(--border); }
 }
 body.light .imgcard .ph { background: var(--ph-light); }
 .imgcard .cap { padding: 6px 10px; color: var(--dim-a); font-size: 12px; }
-.filecard {
-  margin-left: 26px; padding: 8px 12px; border-radius: 6px;
-  background: var(--surface); border: 1px solid var(--border-2); color: var(--muted);
-  display: flex; flex-direction: column; gap: 6px; align-items: stretch;
-  font-size: 12.5px; max-width: 480px; min-width: 0;
-}
-.filecard .fc-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
-.filecard .g { color: var(--cyan); flex: 0 0 auto; }
-.filecard .name {
-  color: var(--fg); min-width: 0; overflow-wrap: anywhere; word-break: break-word;
-}
-.filecard .fc-bottom {
-  display: flex; gap: 10px; align-items: center; justify-content: space-between;
-}
-.filecard .lab { color: var(--dim-a); min-width: 0; overflow-wrap: anywhere; }
-.filecard .fc-open {
-  flex: 0 0 auto; font: inherit; font-size: 12px; line-height: 1.4;
-  color: var(--accent); background: transparent; border: 1px solid var(--border-2);
-  border-radius: 4px; padding: 2px 10px; cursor: pointer; text-decoration: none;
-}
-.filecard .fc-open:hover { border-color: var(--accent); text-decoration: none; }
-.filecard .fc-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-.filecard button.fc-open { font: inherit; }
-.filecard .fc-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; flex: 0 0 auto; }
-.filecard .fc-hint { color: var(--dim-a); font-size: 12px; }
+.filerow { margin-left: 26px; display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 12.5px; color: var(--muted); }
+.filerow .g { flex: 0 0 auto; }
+.filerow.recon .g, .filerow.recon .lab { color: var(--cyan); }
+.filerow.mutate .g, .filerow.mutate .lab { color: var(--magenta); }
+.filerow .sep { color: var(--dim-b); }
+.filerow a.path { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; word-break: break-word; }
+.filerow a.path:hover { text-decoration: underline; }
+.filerow .tail { color: var(--dim-a); overflow-wrap: anywhere; word-break: break-word; }
+.filerow .copy-btn { background: transparent; border: 0; padding: 2px; color: var(--dim-a); cursor: pointer; opacity: 0; }
+.filerow:hover .copy-btn, .filerow:focus-within .copy-btn { opacity: 1; }
+@media (pointer: coarse) { .filerow .copy-btn { opacity: 1; } }
+.filerow .copy-btn:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
+.filerow .copy-btn .svg-icon { width: 14px; height: 14px; }
+.filegroup { margin-left: 26px; font-size: 12.5px; color: var(--muted); }
+.filegroup .head { background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; display: flex; gap: 6px; align-items: baseline; padding: 0; }
+.filegroup .items.hidden { display: none; }
+.filegroup .items > .filerow { margin-left: 0; }
 .linkline { margin-left: 26px; min-width: 0; overflow-wrap: anywhere; }
 .linkline a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; word-break: break-word; }
 .linkline a:hover { text-decoration: underline; }
@@ -452,6 +444,18 @@ body.light .imgcard .ph { background: var(--ph-light); }
 }
 .empty .g { color: var(--green); }
 
+/* jump-to-latest pill: only visible when the reader scrolled up */
+.to-latest {
+  position: absolute; left: 50%; bottom: 148px; transform: translateX(-50%);
+  z-index: 20; font: inherit; font-size: 12.5px; cursor: pointer;
+  color: var(--accent); background: var(--panel);
+  border: 1px solid var(--border-2); border-radius: 999px;
+  padding: 5px 14px; box-shadow: var(--shadow-menu);
+  white-space: nowrap;
+}
+.to-latest:hover { border-color: var(--accent); }
+.to-latest[hidden] { display: none; }
+
 /* ---- composer: selectors, attachments, input, autocomplete ---- */
 .input-area { margin: 14px 22px 16px; position: relative; }
 .selectors { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; min-width: 0; }
@@ -590,6 +594,61 @@ body.light .sel > button { border: 1px solid var(--border); }
 .input-area.dragover .composer { border-color: var(--accent); box-shadow: 0 0 0 2px var(--input-shadow); }
 @keyframes blink { 50% { opacity: 0; } }
 
+/* ---- chat motion ("magic"): entrances, caret, pulses, pops -----------------
+   Rules: only opacity/transform animations (never height/margin), 100–200ms,
+   calm single pulses. Killed globally by the `prefers-reduced-motion` block
+   below. Glyphs stay textual per STYLE.md — motion, not decoration. */
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes pop { from { opacity: 0; transform: scale(.98) translateY(2px); } to { opacity: 1; transform: none; } }
+@keyframes softPulse { 50% { opacity: .45; } }
+@keyframes fadeIn { from { opacity: 0; } }
+
+/* new rows rise in softly (a bulk history render animates once as a whole —
+   one shared fade, still cheap: opacity/transform only) */
+.feed > :is(.u, .md, .act, .think, .q, .filerow, .filegroup, .planblock, .imgcard, .linkline,
+  .toolout, .metric, .detail, .metaln, .warnline, .errline, .cmdout, .sysline,
+  .startbanner, .grouped, .msg-actions, .busy) {
+  animation: rise .18s ease-out;
+}
+/* quiet-mode run folding fades instead of snapping away */
+.fold-out { opacity: 0; transition: opacity .15s ease-out; }
+
+/* streaming caret at the tail of live markdown */
+.md.streaming::after {
+  content: "▌"; color: var(--accent); margin-left: 2px;
+  animation: blink 1s steps(2, start) infinite;
+}
+/* alive labels: in-feed spinner, the *live* think block, rail phase,
+   a running tool. Finished blocks stay static — a pulsing "думаю" after
+   the turn reads as hung. */
+.busy .lab, .think.live .think-h .lab, .rail-l1 .lab, .act.running .lab {
+  animation: softPulse 1.6s ease-in-out infinite;
+}
+
+/* menus, autocomplete and dialogs pop instead of snapping */
+.dd.open .dd-menu, .sel.open .menu, .cmdk:not([hidden]) { animation: pop .12s ease-out; }
+.to-latest:not([hidden]) { animation: pop .15s ease-out; }
+.overlay.open { animation: fadeIn .15s ease-out; }
+.overlay.open .modal { animation: rise .18s ease-out; }
+
+/* hover/active blends */
+.sel > button, .menu .mi, .stab, .q .qopt, .q .qsend, .filerow, .filegroup, .icon-btn,
+.btn, .linkbtn, .chip, .cb-copy, .act-btn, .copy-btn, .composer .attach-btn,
+.composer .send-btn, .dd-menu .si, .dd-menu .act, .cmdk-item, .toggle {
+  transition: background-color .12s, color .12s, border-color .12s;
+}
+.composer { transition: border-color .15s, box-shadow .15s; }
+
+/* scroll edge fades on the transcript (classes from the feed scroll hook) */
+.msgs::before, .msgs::after {
+  content: ""; position: sticky; display: block; height: 22px; flex: 0 0 auto;
+  pointer-events: none; z-index: 5; opacity: 0; transition: opacity .25s;
+}
+.msgs::before { top: 0; margin-bottom: -22px; background: linear-gradient(var(--bg), transparent); }
+.msgs::after { bottom: 0; margin-top: -22px; background: linear-gradient(transparent, var(--bg)); }
+.msgs.scrolled::before { opacity: 1; }
+.msgs.unfollowed::after { opacity: 1; }
+
 /* ---- activity rail — indicator above the composer while a turn runs ----
    Reproduces docs/design/ui/demo-activity-rail-chat.html (variant №12).
    `l-line` (default) = compact one-liner, `l-meta` = inside the hint row,
@@ -686,6 +745,66 @@ body.light .sel > button { border: 1px solid var(--border); }
 .sec.plan-sec { flex: 1 1 auto; }
 .sec.usage-sec { flex: 0 1 auto; max-height: 45%; }
 
+/* ---- sidebar tabs ---- */
+.sb-tabs { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+.sb-tab {
+  position: relative; width: 34px; height: 34px; flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center; padding: 0;
+  border: 1px solid var(--border-2); border-radius: 6px;
+  background: transparent; color: var(--stab-fg); cursor: pointer; font: inherit;
+}
+.sb-tab:hover { color: var(--fg); background: var(--hover-bg); }
+.sb-tab.on { color: var(--accent); background: var(--accent-bg); border-color: transparent; }
+.sb-tab .sb-ico svg { width: 17px; height: 17px; }
+.sb-tab .sb-dot {
+  position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--accent); opacity: 0; transition: opacity .2s;
+}
+.sb-tab[data-indicator="live"] .sb-dot { opacity: 1; animation: sbPulse 1s ease-in-out infinite; }
+.sb-tab[data-indicator="busy"] .sb-dot { opacity: 1; background: var(--accent); }
+.sb-tab[data-indicator="stale"] .sb-dot { opacity: 1; background: var(--yellow); }
+@keyframes sbPulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
+
+.sb-name {
+  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
+  padding: 10px 16px; color: var(--fg); font-size: 12.5px; font-weight: 600;
+  letter-spacing: .03em; border-bottom: 1px solid var(--border);
+}
+.sb-name .sb-ico svg { width: 14px; height: 14px; color: var(--accent); }
+
+.sb-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.sb-pane[hidden] { display: none; }
+
+/* master-detail expansion */
+.sb { transition: width .22s ease, min-width .22s ease; }
+.sb.sb-expanded { width: 680px; min-width: 680px; }
+#pane-trace { flex-direction: row; }
+.sb-expanded #pane-trace { position: relative; }
+.trace-list { flex: 1; min-width: 0; overflow-y: auto; padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 1px; }
+.trace-turn { color: var(--dim-c); font-size: 11px; margin: 8px 6px 2px; }
+.trc { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; font-size: 12px; color: var(--muted); border-radius: 4px; cursor: pointer; }
+.trc:hover { background: var(--hover-bg); }
+.trc.sel { background: var(--accent-bg); }
+.trc .g { flex: 0 0 auto; }
+.trc.recon .g { color: var(--cyan); } .trc.mutate .g { color: var(--purple); }
+.trc.execute .g { color: var(--accent); } .trc.meta .g { color: var(--meta); } .trc.phase .g { color: var(--think); }
+.trc .lab { color: var(--fg); white-space: nowrap; }
+.trc .args { color: var(--args); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
+.trc .t { color: var(--dim-b); margin-left: auto; flex: 0 0 auto; }
+.trc.warn .g, .trc.warn .lab { color: var(--yellow); }
+.trc.phase .lab { color: var(--think); }
+.trc-detail { display: flex; flex-direction: column; flex: 0 0 340px; min-width: 0; border-left: 1px solid var(--border); }
+.trc-detail[hidden] { display: none; }
+.detail-h { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--fg); font-size: 12.5px; flex-shrink: 0; }
+.detail-h .g { color: var(--accent); }
+.detail-h .x { margin-left: auto; color: var(--dim-b); cursor: pointer; }
+.detail-b { padding: 10px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
+.detail-b h5 { margin: 0 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--sec-h); font-weight: 600; }
+.map-sec { flex: 1 1 auto; }
+.map-reindex { margin-top: 10px; font: inherit; font-size: 12px; color: var(--accent); background: transparent; border: 1px solid var(--border-2); border-radius: 5px; padding: 4px 10px; cursor: pointer; width: fit-content; }
+.map-reindex:disabled { color: var(--dim-b); cursor: default; }
+.kv.wn b { color: var(--yellow); }
+
 ::-webkit-scrollbar { width: 8px; }
 ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
 
@@ -1212,6 +1331,7 @@ button.toggle:disabled { opacity: .5; cursor: default; }
   .chat { min-height: 0; }
   /* Phones: sidebar hidden, opens as an overlay drawer via body.sb-open. */
   .sb { display: none; }
+  .sb-tab[data-tab="trace"], #pane-trace { display: none; }
   body.sb-open .sb {
     display: flex; position: fixed; top: 41px; right: 0; bottom: 0; z-index: 45;
     width: min(360px, 85vw); min-width: 0; max-height: none;
@@ -1349,8 +1469,45 @@ body.setup-active .layout { display: none; }
 .setup-summary .k { color: var(--dim-a); width: 150px; flex: 0 0 auto; }
 .setup-summary .v { color: var(--fg); word-break: break-all; }
 
-.setup-toggle { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; cursor: pointer; }
-.setup-toggle input { accent-color: var(--green-fill); width: 15px; height: 15px; }
+.setup-toggle { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; font-size: 13px; cursor: pointer; }
+.setup-toggle input { accent-color: var(--green-fill); width: 15px; height: 15px; margin-top: 2px; flex: 0 0 auto; }
+.setup-toggle-texts { display: flex; flex-direction: column; gap: 2px; }
+.setup-toggle-texts .t { font-weight: 500; }
+.setup-toggle-texts .d { color: var(--dim-a); font-size: 12px; line-height: 1.5; }
+
+.setup-sec-row { display: flex; align-items: center; gap: 8px; }
+.setup-sec-row .setup-toggle { flex: 1; }
+.setup-adv-label { padding: 7px 0; }
+.setup-detail-btn {
+  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
+  background: transparent; color: var(--dim-a);
+  border: 1px solid var(--border); border-radius: 7px;
+  padding: 5px 9px; font-size: 12px; font-family: inherit; cursor: pointer;
+}
+.setup-detail-btn:hover { background: var(--hover-bg); color: var(--fg); }
+.setup-detail-btn .g { color: var(--accent); }
+
+.setup-textarea { resize: vertical; min-height: 84px; font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.5; }
+
+.setup-overlay {
+  position: fixed; inset: 0; z-index: 60;
+  background: rgba(0, 0, 0, .55);
+  display: flex; align-items: center; justify-content: center; padding: 20px;
+}
+.setup-modal {
+  width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column;
+  background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
+}
+.setup-modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border-3); }
+.setup-modal-head .glyph { color: var(--accent); }
+.setup-modal-title { font-weight: 600; font-size: 14px; flex: 1; }
+.setup-modal-x { background: none; border: none; color: var(--dim-a); font-size: 15px; cursor: pointer; padding: 2px 6px; }
+.setup-modal-x:hover { color: var(--fg); }
+.setup-modal-body { padding: 14px 16px; overflow-y: auto; }
+.setup-modal-body .setup-field:last-child { margin-bottom: 0; }
+.setup-modal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-3); }
+.setup-modal-foot .spacer { flex: 1; }
 
 @media (max-width: 640px) {
   .setup-gate { padding: 24px 14px; }