micro-models-agent 2.15.0 → 2.16.0

package/dist/assets/js/tabs.js

@@ -8,7 +8,7 @@ el, icon,
 import { api } from "./api.js";
 import { t } from "./i18n.js";
 import { S, MAX_IMAGES, MAX_IMAGE_BYTES } from "./store.js";
-import { relTime, contextLabel } from "./format.js";
+import { relTime, contextLabel, matchesQuery } from "./format.js";
 import {
 makeFeed, showEmptyFeed, activeFeed, liveFeed, appendTo,
 clearEmpty, showBusy, clearFeed, finishMd, resetTurnText,
@@ -204,18 +204,70 @@ document.getElementById("sessRefresh").addEventListener("click", () => {
   loadSessions();
 });
 
+// Live filter text of the sessions dropdown. Module-level so the 2s
+// `renderState` poll and the 15s `loadSessions` poll (both re-render the lists)
+// never wipe an in-progress query: the `<input id="sessSearch">` itself lives
+// statically in `index.html` and only the row lists are redrawn.
+let sessQuery = "";
+let sessSearchWired = false;
+
+// One-time wiring for the static `#sessSearch` input: placeholder follows the
+// locale on every render, listeners attach once. Returns the input or null.
+function ensureSessSearch() {
+  const search = document.getElementById("sessSearch");
+  if (!search) return null;
+  search.placeholder = t("web.sessions.search");
+  search.setAttribute("aria-label", t("web.sessions.search"));
+  if (!sessSearchWired) {
+    sessSearchWired = true;
+    search.addEventListener("click", (e) => e.stopPropagation());
+    search.addEventListener("input", () => {
+      sessQuery = search.value;
+      renderSessionsDropdown();
+      // Re-render must not steal the caret: the input node itself survives
+      // (only the lists redraw), but re-query it to be safe.
+      const again = document.getElementById("sessSearch");
+      if (again && document.activeElement !== again) again.focus();
+    });
+    search.addEventListener("keydown", (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        if (search.value) {
+          e.preventDefault();
+          search.value = "";
+          sessQuery = "";
+          renderSessionsDropdown();
+          search.focus();
+        } else {
+          setSessOpen(false);
+        }
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const first = document.querySelector("#sessActiveList .si-row .dd-row-main, #sessRecentList .si-row .dd-row-main");
+        if (first) first.focus();
+      }
+    });
+  }
+  return search;
+}
+
 export function renderSessionsDropdown() {
+  ensureSessSearch();
   const activeList = document.getElementById("sessActiveList");
   const recentList = document.getElementById("sessRecentList");
+  const activeHeader = document.getElementById("sessActiveHeader");
+  const recentHeader = document.getElementById("sessRecentHeader");
   activeList.textContent = "";
   recentList.textContent = "";
+  const q = sessQuery.trim();
   const activeId = S.state.activeSessionId;
   const sorted = S.state.sessions.slice().sort((a, b) => {
     const at = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
     const bt = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
     return bt - at;
-  });
+  }).filter((s) => matchesQuery((s.name || "") + " " + String(s.id || ""), q));
   let activePlaced = false;
+  let recentPlaced = false;
   sorted.forEach((s) => {
     const isActive = s.id === activeId;
     const row = sessionRow(s, isActive);
@@ -224,13 +276,27 @@ export function renderSessionsDropdown() {
       activePlaced = true;
     } else {
       recentList.appendChild(row);
+      recentPlaced = true;
     }
   });
-  if (!activePlaced) {
-    activeList.appendChild(el("div", "si", t("web.sessions.none_active")));
-  }
-  if (!recentList.childNodes.length) {
-    recentList.appendChild(el("div", "si", t("web.sessions.none")));
+  if (q) {
+    // Filtered view: empty sections hide with their headers; zero hits total
+    // show a single no-matches row instead of the unfiltered placeholders.
+    if (activeHeader) activeHeader.hidden = !activePlaced;
+    if (recentHeader) recentHeader.hidden = !recentPlaced;
+    if (!activePlaced && !recentPlaced) {
+      if (recentHeader) recentHeader.hidden = true;
+      recentList.appendChild(el("div", "si dim", t("web.settings.no_matches")));
+    }
+  } else {
+    if (activeHeader) activeHeader.hidden = false;
+    if (recentHeader) recentHeader.hidden = false;
+    if (!activePlaced) {
+      activeList.appendChild(el("div", "si", t("web.sessions.none_active")));
+    }
+    if (!recentPlaced) {
+      recentList.appendChild(el("div", "si", t("web.sessions.none")));
+    }
   }
   if (S.state.sessionsError) {
     recentList.appendChild(el("div", "dd-err", S.state.sessionsError));
@@ -304,11 +370,28 @@ const sessBtn = document.getElementById("sessBtn");
 export function setSessOpen(open) {
   sessDD.classList.toggle("open", !!open);
   sessBtn.setAttribute("aria-expanded", open ? "true" : "false");
+  if (!open && sessQuery) {
+    // Closing wipes the filter so the next opening starts from the full list.
+    sessQuery = "";
+    const search = document.getElementById("sessSearch");
+    if (search && search.value) {
+      search.value = "";
+      renderSessionsDropdown();
+    }
+  }
+}
+function focusSessSearch() {
+  setTimeout(() => {
+    const search = document.getElementById("sessSearch");
+    if (search) search.focus();
+  }, 0);
 }
 sessBtn.addEventListener("click", (e) => {
   e.stopPropagation();
   document.querySelectorAll("[data-sel]").forEach((s) => s.classList.remove("open"));
-  setSessOpen(!sessDD.classList.contains("open"));
+  const willOpen = !sessDD.classList.contains("open");
+  setSessOpen(willOpen);
+  if (willOpen) focusSessSearch();
 });
 
 // --- mobile session sub-header -------------------------------------------
@@ -370,7 +453,9 @@ if (sessCloseBtn) sessCloseBtn.addEventListener("click", () => {
 if (sessNameBtn) sessNameBtn.addEventListener("click", (e) => {
   e.stopPropagation();
   document.querySelectorAll("[data-sel]").forEach((s) => s.classList.remove("open"));
-  setSessOpen(!sessDD.classList.contains("open"));
+  const willOpen = !sessDD.classList.contains("open");
+  setSessOpen(willOpen);
+  if (willOpen) focusSessSearch();
 });
 if (typeof window.matchMedia === "function") {
   const narrowMq = window.matchMedia("(max-width: 760px)");
@@ -627,11 +712,8 @@ async function send() {
   const images = S.attachments.slice();
   if (!text && !images.length) return;
   const feed = liveFeed() || activeFeed();
-  if (S.state.busy) {
-    // Don't drop the input silently: tell the user a turn is still running.
-    if (feed) appendTo(feed, el("div", "warnline", "⚠ " + t("web.input.busy")));
-    return;
-  }
+  // No client-side busy gate: a message sent mid-turn is queued server-side
+  // (`202 {queued: n}`) and runs after the current turn, in order.
   clearEmpty(feed);
   finishMd();
   resetTurnText();
@@ -672,13 +754,18 @@ async function send() {
   if (images.length) body.images = images;
   const r = await api("/api/message", { method: "POST", body });
   if (!r.ok) {
-    const msg = (r.data && r.data.error) || r.status;
+    const err = (r.data && r.data.error) || r.status;
+    const msg = err === "queue_full" ? t("web.input.queue_full") : err;
     appendTo(feed, el("div", "warnline", "⚠ " + msg));
   } else {
     if (images.length) clearAttachments();
-    // Delay the spinner so fast first tokens never flash it: `showBusy`
-    // itself skips when a stream/think block already started.
-    window.setTimeout(() => showBusy(feed), 180);
+    if (r.data && r.data.queued) {
+      appendTo(feed, el("div", "detail", "↳ " + t("web.input.queued", { n: r.data.queued })));
+    } else {
+      // Delay the spinner so fast first tokens never flash it: `showBusy`
+      // itself skips when a stream/think block already started.
+      window.setTimeout(() => showBusy(feed), 180);
+    }
   }
 }
 

package/dist/assets/styles.css

@@ -244,11 +244,14 @@ body[data-font="large"] { font-size: 17px; }
 
 /* chat */
 .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: 1; overflow-y: auto; overflow-x: hidden; padding: 0 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`
-   column gap so turns are separated instead of running together */
-.feed { display: flex; flex-direction: column; gap: 11px; }
+   column gap so turns are separated instead of running together.
+   Vertical breathing lives on `.feed`, NOT on the scroller: sticky edge fades
+   are constrained to the content box, so scroller padding would offset them
+   from the header/composer edges. */
+.feed { display: flex; flex-direction: column; gap: 11px; padding: 18px 0; }
 .feed > * { flex-shrink: 0; min-height: fit-content; }
 .u {
   color: var(--u-fg); background: var(--u-bg); border-left: 2px solid var(--u-border);
@@ -270,7 +273,7 @@ body[data-font="large"] { font-size: 17px; }
   font-size: 12.5px; overflow-wrap: anywhere;
 }
 .metaln.warn { color: var(--yellow); }
-.act { display: flex; gap: 8px; min-width: 0; }
+.act { display: flex; gap: 8px; min-width: 0; line-height: 1.35; }
 .act .lab { white-space: nowrap; }
 .act .args { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
 .act.recon .g, .act.recon .lab { color: var(--cyan); }
@@ -311,7 +314,15 @@ body.light .code { border: 1px solid var(--border); }
 .toolout .more { color: var(--dim-b); cursor: pointer; font-size: 12px; }
 .toolout .more:hover { color: var(--dim-a); }
 
-/* markdown answers (streamed by md.js) — lines and glyphs, no boxes */
+/* markdown answers (streamed by md.js) — lines and glyphs, no boxes.
+   Top-level answers carry a quiet accent rail (mirrors the user's `> ` block),
+   so the finished message reads instantly apart from the dim work process
+   (tool/think rows stay plain). Scoped to `.feed >` — code blocks inside keep
+   their own styling. */
+.feed > .md, .feed > .ans {
+  border-left: 2px solid var(--accent);
+  padding-left: 12px;
+}
 .md { color: var(--ans); overflow-wrap: anywhere; }
 .md > * { flex-shrink: 0; }
 .md p { margin: 4px 0; white-space: pre-wrap; }
@@ -391,7 +402,14 @@ 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; }
-.filerow { margin-left: 26px; display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 12.5px; color: var(--muted); }
+.filerow { margin-left: 26px; display: flex; gap: 8px; align-items: baseline; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
+/* Compact tool lists: consecutive action/file rows sit tight (~4px visual),
+// while turns keep the airy 11px feed gap. Negative margin compensates the
+// `.feed { gap: 11px }` only between siblings in a run. */
+.feed > .filerow + .filerow,
+.feed > .act + .act,
+.feed > .filerow + .act,
+.feed > .act + .filerow { margin-top: -7px; }
 .filerow .g { flex: 0 0 auto; }
 .filerow.recon .g, .filerow.recon .lab { color: var(--cyan); }
 .filerow.mutate .g, .filerow.mutate .lab { color: var(--magenta); }
@@ -404,10 +422,6 @@ body.light .imgcard .ph { background: var(--ph-light); }
 @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; }
@@ -522,6 +536,16 @@ body.light .sel > button { border: 1px solid var(--border); }
   color: var(--fg); font: inherit; font-size: 12.5px; padding: 4px 8px;
 }
 .menu .ctx-custom .linkbtn { flex: 0 0 auto; }
+/* Dropdown search fields (composer model menu, sessions menu): sticky on top
+   so the query stays visible while the list scrolls underneath. */
+.menu .searchbox {
+  margin-bottom: 4px; position: sticky; top: 0; z-index: 1;
+}
+.model-menu-list { display: contents; }
+.dd-menu .searchbox {
+  margin: 2px 2px 6px; width: calc(100% - 4px);
+  position: sticky; top: 0; z-index: 1;
+}
 
 .inp {
   width: 100%; padding: 12px 14px; resize: none; display: block;
@@ -619,7 +643,7 @@ body.light .sel > button { border: 1px solid var(--border); }
 
 /* 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,
+.feed > :is(.u, .md, .act, .think, .q, .filerow, .planblock, .imgcard, .linkline,
   .toolout, .metric, .detail, .metaln, .warnline, .errline, .cmdout, .sysline,
   .startbanner, .grouped, .msg-actions, .busy) {
   animation: rise .18s ease-out;
@@ -646,20 +670,25 @@ body.light .sel > button { border: 1px solid var(--border); }
 .overlay.open .modal { animation: rise .18s ease-out; }
 
 /* hover/active blends */
-.sel > button, .menu .mi, .stab, .q .qopt, .q .qsend, .filerow, .filegroup, .icon-btn,
+.sel > button, .menu .mi, .stab, .q .qopt, .q .qsend, .filerow, .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) */
+/* scroll edge fades on the transcript (classes from the feed scroll hook).
+   Sticky in-flow pseudos glued exactly to the scrollport edges: they sit in
+   the scroller's padding-free content box (breathing lives on `.feed`), so
+   `top: 0` / `bottom: 0` meet the header above and the composer below with
+   no visible offset. Negative margins neutralize their flow height plus the
+   flex gap, so hidden fades take no space. */
 .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::before { top: 0; margin-bottom: -33px; background: linear-gradient(var(--bg), transparent); }
+.msgs::after { bottom: 0; margin-top: -33px; background: linear-gradient(transparent, var(--bg)); }
 .msgs.scrolled::before { opacity: 1; }
 .msgs.unfollowed::after { opacity: 1; }
 
@@ -734,12 +763,16 @@ body.light .sel > button { border: 1px solid var(--border); }
 @keyframes rlFlash { 0% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
 
 /* ---- sidebar — plan / usage / environment sections ---- */
+/* Sidebar never scrolls horizontally, in any tab: long paths / model names /
+   ids wrap or ellipsize inside their rows, never widening the pane. */
 .sb {
   width: 340px; min-width: 340px; display: flex; flex-direction: column;
   border-left: 1px solid var(--border); background: var(--sb-bg); min-height: 0;
+  overflow-x: hidden;
 }
 .sec {
-  display: flex; flex-direction: column; min-height: 0;
+  display: flex; flex-direction: column; min-height: 0; min-width: 0;
+  max-width: 100%; overflow-x: hidden;
   border-bottom: 1px solid var(--border);
 }
 .sec:last-child { border-bottom: none; }
@@ -751,8 +784,8 @@ body.light .sel > button { border: 1px solid var(--border); }
 .sec-h:hover { color: var(--sec-h-hover); }
 .sec-h .n { margin-left: auto; color: var(--dim-b); }
 .sec-body {
-  overflow-y: auto; padding: 0 16px 12px;
-  min-height: 0;
+  overflow-y: auto; overflow-x: hidden; padding: 0 16px 12px;
+  min-height: 0; min-width: 0; max-width: 100%;
 }
 .sec-body.collapsed { display: none; }
 /* plan section takes the lion's share and scrolls */
@@ -786,7 +819,7 @@ body.light .sel > button { border: 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 { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; max-width: 100%; overflow-x: hidden; }
 .sb-pane[hidden] { display: none; }
 
 /* master-detail expansion */
@@ -794,25 +827,26 @@ body.light .sel > button { border: 1px solid var(--border); }
 .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; }
+.trace-list { flex: 1; min-width: 0; max-width: 100%; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 1px; }
+.trace-turn { color: var(--dim-c); font-size: 11px; margin: 8px 6px 2px; overflow-wrap: anywhere; }
+.trc { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; font-size: 12px; color: var(--muted); border-radius: 4px; cursor: pointer; min-width: 0; max-width: 100%; overflow: hidden; }
 .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 .lab { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
 .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 { display: flex; flex-direction: column; flex: 0 0 340px; min-width: 0; max-width: 100%; overflow-x: hidden; 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 { 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; min-width: 0; max-width: 100%; overflow: hidden; }
 .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 { padding: 10px 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; min-width: 0; max-width: 100%; }
+.detail-b .code { max-width: 100%; }
 .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; }
@@ -832,8 +866,15 @@ body.light .sel > button { border: 1px solid var(--border); }
 .plan-step::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--plan-line); }
 .plan-step .sub { display: block; color: var(--dim-b); font-size: 11.5px; padding-left: 0; }
 
-.kv { display: flex; justify-content: space-between; padding: 2px 0; color: var(--muted); gap: 10px; }
-.kv b { font-weight: 400; color: var(--fg); text-align: right; }
+.kv { display: flex; justify-content: space-between; padding: 2px 0; color: var(--muted); gap: 10px; min-width: 0; max-width: 100%; }
+.kv > * { min-width: 0; }
+/* Подпись строки никогда не сжимается — иначе её текст наезжает на значение. */
+.kv > span:first-child { flex-shrink: 0; }
+.kv b { font-weight: 400; color: var(--fg); text-align: right; overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; }
+/* Корень карты: подпись сверху, длинный путь снизу на всю ширину. */
+.map-path { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; min-width: 0; max-width: 100%; color: var(--muted); }
+.map-path .dim { color: var(--dim-a); }
+.map-path b { font-weight: 400; color: var(--fg); overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; }
 body.light .kv b { color: var(--fg); }
 .kv .dim { color: var(--dim-a); }
 .kv .wn { color: var(--yellow); }
@@ -1372,7 +1413,8 @@ button.toggle:disabled { opacity: .5; cursor: default; }
     border-left: 1px solid var(--border); border-top: none;
     box-shadow: var(--shadow-dd);
   }
-  .msgs { padding: 14px; }
+  .msgs { padding: 0 14px; }
+  .feed { padding: 14px 0; }
   .input-area { margin: 10px 14px 12px; }
   .inp-meta { flex-wrap: wrap; gap: 8px; }
 }
@@ -1395,7 +1437,8 @@ button.toggle:disabled { opacity: .5; cursor: default; }
   .content-col { padding: 14px; }
   .row { font-size: 12.5px; }
   .input-area { margin: 8px 10px 10px; }
-  .msgs { padding: 12px 10px; }
+  .msgs { padding: 0 10px; }
+  .feed { padding: 12px 0; }
   /* narrow phones: rail stacks vertically, track takes the full row */
   .rail-wrap.l-line, .rail-wrap.l-meta {
     flex-direction: column; align-items: stretch; gap: 6px;

package/dist/i18n/en.json

@@ -1087,6 +1087,18 @@
   "web.sidebar.trace_text": "composing… {count} chars",
   "web.sidebar.trace_plan": "plan update",
   "web.sidebar.trace_question": "question",
+  "web.sidebar.trace_status": "status",
+  "web.sidebar.trace_log": "log · {level}",
+  "web.sidebar.trace_retract": "draft retracted",
+  "web.sidebar.trace_index": "index · {phase}",
+  "web.sidebar.trace_critic": "critic · {status}",
+  "web.sidebar.trace_moe": "moe",
+  "web.sidebar.trace_compaction": "compaction",
+  "web.sidebar.trace_probe": "context probe",
+  "web.sidebar.trace_usage": "llm usage",
+  "web.sidebar.trace_audit": "audit",
+  "web.sidebar.trace_claim": "claim retry · {kind}",
+  "web.sidebar.trace_output": "output",
   "web.sidebar.detail_metadata": "metadata",
   "web.sidebar.detail_arguments": "arguments",
   "web.sidebar.detail_output": "output",
@@ -1101,6 +1113,10 @@
   "web.sidebar.detail_time": "time",
   "web.sidebar.detail_tool_call": "tool call",
   "web.sidebar.detail_session": "session",
+  "web.sidebar.detail_turn": "turn",
+  "web.sidebar.detail_iteration": "iteration",
+  "web.sidebar.detail_provenance": "session-log provenance",
+  "web.sidebar.detail_provenance_count": "{n} assistant messages in log",
   "web.env.dir": "dir",
   "web.env.agents": "AGENTS.md",
   "web.env.map": "map",
@@ -1420,9 +1436,10 @@
   "web.input.shift_enter": "Shift+Enter — newline",
   "web.input.esc": "Esc — stop",
   "web.input.attach": "Ctrl+V — attach",
-  "web.input.busy": "still working — Esc to stop",
   "web.input.send": "send",
   "web.input.stop": "stop",
+  "web.input.queued": "queued · position {n}",
+  "web.input.queue_full": "message queue is full — wait for the turn to end",
   "web.empty.title": "new chat",
   "web.empty.hint": "type a message below · / — commands · model and context are chosen above the input",
   "web.attach.title": "attach image",
@@ -1439,6 +1456,7 @@
   "web.sessions.none_active": "— no active session —",
   "web.sessions.none": "— none —",
   "web.sessions.delete": "delete",
+  "web.sessions.search": "search sessions…",
   "web.sessions.create_failed": "session create failed",
   "web.sessions.delete_failed": "delete failed",
   "web.sessions.confirm_title": "Delete session?",
@@ -1451,6 +1469,7 @@
   "web.selectors.switch_busy": "switch in progress, please wait",
   "web.selectors.reasoning_off": "off (backend ignores it)",
   "web.selectors.no_models": "no models",
+  "web.selectors.search_models": "search models…",
   "web.selectors.refresh_list": "↻ refresh list",
   "web.selectors.custom": "custom…",
   "web.selectors.current": "current",

package/dist/i18n/ru.json

@@ -1090,6 +1090,18 @@
   "web.sidebar.trace_text": "печатает… {count} симв.",
   "web.sidebar.trace_plan": "обновление плана",
   "web.sidebar.trace_question": "вопрос",
+  "web.sidebar.trace_status": "статус",
+  "web.sidebar.trace_log": "лог · {level}",
+  "web.sidebar.trace_retract": "черновик отозван",
+  "web.sidebar.trace_index": "индекс · {phase}",
+  "web.sidebar.trace_critic": "критик · {status}",
+  "web.sidebar.trace_moe": "moe",
+  "web.sidebar.trace_compaction": "компакция",
+  "web.sidebar.trace_probe": "проба контекста",
+  "web.sidebar.trace_usage": "расход llm",
+  "web.sidebar.trace_audit": "аудит",
+  "web.sidebar.trace_claim": "перепроверка · {kind}",
+  "web.sidebar.trace_output": "вывод",
   "web.sidebar.detail_metadata": "метаданные",
   "web.sidebar.detail_arguments": "аргументы",
   "web.sidebar.detail_output": "вывод",
@@ -1104,6 +1116,10 @@
   "web.sidebar.detail_time": "время",
   "web.sidebar.detail_tool_call": "вызов тула",
   "web.sidebar.detail_session": "сессия",
+  "web.sidebar.detail_turn": "ход",
+  "web.sidebar.detail_iteration": "итерация",
+  "web.sidebar.detail_provenance": "сверка с логом",
+  "web.sidebar.detail_provenance_count": "assistant-сообщений в логе: {n}",
   "web.env.dir": "директория",
   "web.env.agents": "AGENTS.md",
   "web.env.map": "карта",
@@ -1396,9 +1412,10 @@
   "web.input.shift_enter": "Shift+Enter — новая строка",
   "web.input.esc": "Esc — стоп",
   "web.input.attach": "Ctrl+V — вложить",
-  "web.input.busy": "ещё работаю — Esc для остановки",
   "web.input.send": "отправить",
   "web.input.stop": "остановить",
+  "web.input.queued": "в очереди · позиция {n}",
+  "web.input.queue_full": "очередь сообщений полна — дождись конца хода",
   "web.empty.title": "новый чат",
   "web.empty.hint": "введи сообщение ниже · / — команды · модель и контекст выбираются над полем",
   "web.attach.title": "прикрепить изображение",
@@ -1415,6 +1432,7 @@
   "web.sessions.none_active": "— нет активной сессии —",
   "web.sessions.none": "— нет —",
   "web.sessions.delete": "удалить",
+  "web.sessions.search": "поиск сессий…",
   "web.sessions.create_failed": "не удалось создать сессию",
   "web.sessions.delete_failed": "не удалось удалить",
   "web.sessions.confirm_title": "Удалить сессию?",
@@ -1427,6 +1445,7 @@
   "web.selectors.switch_busy": "переключение уже идёт, подождите",
   "web.selectors.reasoning_off": "выкл (бэкенд игнорирует)",
   "web.selectors.no_models": "нет моделей",
+  "web.selectors.search_models": "поиск моделей…",
   "web.selectors.refresh_list": "↻ обновить список",
   "web.selectors.custom": "другое…",
   "web.selectors.current": "текущее",