@songsid/agend 2.2.0-alpha.1 → 2.2.0-alpha.3

package/dist/ui/shared/app.css

@@ -54,7 +54,11 @@ a { color: inherit; text-decoration: none; }
 .link:hover { text-decoration: underline; }
 
 /* ── The frame ── */
-.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
+/* The page itself never scrolls: only its panes do. The shell is the containing block of anything absolutely positioned
+   inside it (an .sr-only label), so its overflow: hidden clips it — an absolute element whose containing block is the
+   viewport escapes every scroll container and made the whole page scroll (alpha.2: two scrollbars on /ui/chat). */
+.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; position: relative; }
+html:has(.shell), html:has(.shell) body { overflow: hidden; }
 .skip { position: absolute; left: var(--s-2); top: -60px; z-index: 100; background: var(--accent-fill); color: var(--on-accent); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
 .skip:focus { top: var(--s-2); }
 
@@ -76,7 +80,7 @@ a { color: inherit; text-decoration: none; }
 .side-row .meta { color: var(--text-3); font-size: var(--fs-xs); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .side-row.toggle { cursor: pointer; color: var(--text-2); }
 .side-row.toggle input { margin: 0; accent-color: var(--accent); }
-.side-section { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-2) var(--s-2); }
+.side-section { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-2) var(--s-2); position: relative; }   /* its .sr-only labels scroll (and clip) with it */
 /* The sidebar's list scroller: thin and in the theme's colours, not the UA's light bar with arrows. WebKit/Blink take
    the pseudo-elements; Chromium ignores them once scrollbar-color is set, so the standard properties are Firefox-only. */
 .side-section::-webkit-scrollbar { width: 10px; }
@@ -127,7 +131,7 @@ a { color: inherit; text-decoration: none; }
 .dot.warn { background: var(--warn); }
 .dot.bad { background: var(--danger); }
 .dot.off { background: var(--text-3); }
-@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
+@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }   /* never near-invisible on a dark surface */
 
 .scrim { display: none; }
 .main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
@@ -159,6 +163,10 @@ a { color: inherit; text-decoration: none; }
 .empty-title { color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
 .empty-hint { font-size: var(--fs-sm); }
 .empty .btn { margin-top: var(--s-3); }
+/* #1519 P7: the first-run card (a fleet with no chat connection), above an empty chat or a Settings list. */
+.first-run-stack { width: 100%; max-width: var(--col); }
+.first-run h3 { display: flex; align-items: center; gap: var(--s-2); }
+.first-run p { color: var(--text-2); font-size: var(--fs-sm); }
 .error-state { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-4); color: var(--danger); text-align: center; }
 .error-state p { color: var(--text); }
 .skeleton { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5); max-width: var(--col); margin: 0 auto; width: 100%; opacity: 0; animation: appear 0s linear 300ms forwards; }
@@ -295,6 +303,55 @@ a { color: inherit; text-decoration: none; }
 .pv-holder:empty { display: none; }
 .pv-holder { margin-top: var(--s-2); }
 .preview-frame { display: block; width: 100%; border: 2px solid var(--warn-line); border-radius: var(--r-sm); background: #ffffff; }
+/* #1481: the preview beside the conversation. A split on a wide screen (width: --pv-w, set by the divider through
+   CSSOM), a full-screen sheet on a narrow one. The frame is the card's (preview.js), sized by the panel here. */
+.chat-split { flex: 1; min-height: 0; display: flex; }
+.chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.pv-divider { flex: 0 0 8px; cursor: col-resize; background: var(--bg); border-left: 1px solid var(--border); touch-action: none; position: relative; }
+.pv-divider::after { content: ""; position: absolute; top: 50%; left: 2px; width: 3px; height: 32px; margin-top: -16px; border-radius: 2px; background: var(--border-strong); }
+.pv-divider:hover::after, .pv-divider:focus-visible::after, .chat-split.resizing .pv-divider::after { background: var(--accent); }
+.pv-divider:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.chat-split.resizing { cursor: col-resize; user-select: none; }
+.chat-split.resizing .preview-frame { pointer-events: none; }   /* a frame under the pointer would end the drag */
+.pv-panel { flex: 0 0 var(--pv-w, 45%); width: var(--pv-w, 45%); min-width: 320px; max-width: calc(100% - 368px); min-height: 0;
+  display: flex; flex-direction: column; background: var(--bg); container-type: inline-size; }
+.pv-panel-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); }
+.pv-panel-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-sm); }
+.pv-source { all: unset; cursor: pointer; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pv-source:hover { color: var(--text); text-decoration: underline; }
+.pv-source:focus-visible { outline: 2px solid var(--accent); border-radius: var(--r-sm); }
+.pv-panel-bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); flex-wrap: wrap; }
+.pv-panel-bar .grow { flex: 1; }
+.pv-panel > .pv-banner, .pv-panel > .pv-note, .pv-newer { margin: 0 var(--s-3) var(--s-2); }
+.pv-panel > .pv-note { margin-top: 0; }
+.pv-newer { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
+  background: var(--surface); font-size: var(--fs-xs); }
+.pv-newer > span { flex: 1; min-width: 0; }
+.pv-newer > .pv-newer-note { flex-basis: 100%; color: var(--text-3); }
+.pv-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--s-3) var(--s-3); }
+.pv-panel-body .pv-holder { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; }
+.pv-panel-body.show-code .pv-holder { display: none; }
+.preview-frame.fill { flex: 1; height: 100%; min-height: 0; }
+.pv-code { flex: 1; min-height: 0; margin: 0; overflow: auto; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
+  background: var(--surface); border-radius: var(--r-sm); padding: var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
+.msg.flash { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); transition: outline-color var(--t-med); }
+@media (max-width: 899px) {
+  .only-wide { display: none; }
+  .pv-divider { display: none; }
+  .pv-panel { position: fixed; inset: 0; z-index: 37; width: auto; min-width: 0; max-width: none;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
+}
+/* A narrow panel (a phone, or the divider dragged right): the run controls keep their icons, titles and screen-reader
+   names — except Preview, which the panel's note names. */
+@container (max-width: 560px) {
+  .pv-panel-bar :not(.pv-panel-run) > .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+}
+/* #1266: an agent reply's buttons — choices under the text; one answers for everyone. */
+.rb-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
+.rb-btn { max-width: 100%; white-space: normal; text-align: left; }
+.rb-btn.chosen, .rb-btn.chosen:disabled { border-color: var(--ok); color: var(--text); background: color-mix(in srgb, var(--ok) 14%, transparent); font-weight: var(--fw-semibold); opacity: 1; }
+.rb-btn:disabled:not(.chosen) { opacity: 0.55; }
+.rb-note { font-size: var(--fs-xs); color: var(--text-3); }
 .pv-menu { position: relative; }
 .pv-menu > summary { list-style: none; cursor: pointer; padding: 2px var(--s-2); border-radius: var(--r-sm); color: var(--text-3); }
 .pv-menu > summary::-webkit-details-marker { display: none; }
@@ -334,6 +391,8 @@ a { color: inherit; text-decoration: none; }
 .composer textarea::placeholder { color: var(--text-3); }
 .btn-send { width: 36px; padding: 0; }
 .btn-send .send-label { display: none; }
+/* A narrow phone: Stop reply beside Send leaves the message box no room — the label is for screen readers there. */
+@media (max-width: 479px) { .btn-stop .stop-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
 .btn-stop { background: var(--bg); }
 .hint { font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
 .pending-files { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
@@ -401,7 +460,8 @@ a { color: inherit; text-decoration: none; }
   .dlg-box { max-height: 90vh; }
   .dlg-actions { padding-bottom: max(var(--s-5), env(safe-area-inset-bottom)); }
   .dlg-actions .btn { flex: 1; min-height: var(--tap); }
-  .row-item .btn { min-height: var(--tap); }
+  .row-item .btn, .s-row .btn, .n-actions .btn { min-height: var(--tap); }
+  .s-row .icon-btn { min-width: var(--tap); min-height: var(--tap); }
   .kv { flex-direction: column; align-items: flex-start; gap: 2px; }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -439,6 +499,19 @@ a { color: inherit; text-decoration: none; }
 .v-filter-box input::placeholder { color: var(--text-3); }
 .v-filter-clear { width: 28px; height: 28px; }
 .v-filter .note { padding: var(--s-1) var(--s-1) 0; font-variant-numeric: tabular-nums; }
+/* alpha.2 (N1): status and CLI chips under the filter box — each a <details> with checkboxes. */
+.nav-facets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); padding: var(--s-2) var(--s-1) 0; }
+.nav-facet { font-size: var(--fs-xs); color: var(--text-2); }
+.nav-facet > summary { cursor: pointer; list-style: none; padding: 2px var(--s-2); border-radius: var(--r-sm); }
+.nav-facet > summary::-webkit-details-marker { display: none; }
+.nav-facet > summary::after { content: " ▾"; color: var(--text-3); }
+.nav-facet[open] > summary::after { content: " ▴"; }
+.nav-facet > summary:hover { background: var(--hover); }
+.nav-facet > summary:focus-visible { outline: 2px solid var(--accent); }
+.nav-facet-n { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent, #fff); text-align: center; font-variant-numeric: tabular-nums; }
+.nav-facet-list { display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2); }
+.nav-chip { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; color: var(--text); }
+.nav-facet-reset { font-size: var(--fs-xs); }
 
 .p-view .panel-actions .btn { gap: var(--s-1); }
 .v-term { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 5px 6px; background: #000000; position: relative; }
@@ -511,6 +584,11 @@ a { color: inherit; text-decoration: none; }
   .s-row.s-conn { grid-template-columns: minmax(0, 1fr) auto; }
   .s-conn .s-facts { grid-column: 1 / -1; grid-row: 2; }
 }
+/* A narrow phone: the cluster (token, state, Settings) goes under the facts, so the name keeps its line (alpha.2 sweep). */
+@media (max-width: 479px) {
+  .s-row.s-conn { grid-template-columns: minmax(0, 1fr); }
+  .s-conn .s-actions { grid-column: 1; grid-row: 3; flex-wrap: wrap; }
+}
 .s-state { font-size: var(--fs-xs); }
 .s-state.ok { color: var(--ok); }
 .s-state.bad { color: var(--danger); }
@@ -537,6 +615,10 @@ a { color: inherit; text-decoration: none; }
 .chip-x:hover { color: var(--text); background: var(--surface); }
 .dlg-impact { margin-right: auto; align-self: center; }
 .dlg-inline-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
+/* #1519 P1: the bot-token field — the input and its show/hide button on one row. */
+.token-row { display: flex; align-items: center; gap: var(--s-1); }
+.token-row input { flex: 1; min-width: 0; }
+.feedback.ok { color: var(--ok, var(--text)); }
 .seg-inline { display: inline-flex; gap: var(--s-1); }
 .btn.on { background: var(--surface-2); color: var(--text); font-weight: var(--fw-semibold); }
 .card h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
@@ -549,6 +631,30 @@ a { color: inherit; text-decoration: none; }
 .s-yaml { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s-3);
   overflow: auto; max-height: 60vh; white-space: pre; margin: 0; color: var(--text); }
 textarea.s-yaml { width: 100%; min-height: 50vh; resize: vertical; }
+/* Lines too long for the box scroll sideways; a shadow at an edge says there is more that way (alpha.2 sweep). */
+.s-yaml {
+  background:
+    linear-gradient(to right, var(--bg) 30%, transparent) left / 24px 100% no-repeat local,
+    linear-gradient(to left, var(--bg) 30%, transparent) right / 24px 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) left / 10px 100% no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) right / 10px 100% no-repeat scroll,
+    var(--bg);
+}
+textarea.s-yaml { white-space: pre; overflow-x: auto; }
+.s-br { display: none; }
+@media (max-width: 479px) {
+  /* Settings → Developer: one toolbar row, icons only (names stay as titles and for screen readers). */
+  .s-dev-bar { flex-wrap: nowrap; }
+  .s-dev-bar .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  /* An agent's row: name and model on the first line, its tags and buttons from the second, on every row alike. */
+  .s-br { display: block; flex-basis: 100%; height: 0; }
+  /* View: the profile line wraps to two lines instead of hiding the model and context. */
+  .v-card-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+  /* A text button in Needs you lines up with the text above it, first in its row or wrapped onto a line of its own;
+     a row's trailing Delete sits at the right. */
+  .n-actions > .btn-ghost { padding-left: 0; padding-right: 0; margin-left: -1px; }
+  .row-item > .btn-ghost:last-child { margin-left: auto; margin-right: calc(-1 * var(--s-3) - 1px); }
+}
 .s-pending { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-5);
   background: var(--bg); border-top: 1px solid var(--border); box-shadow: var(--shadow-2); }
 .s-pending .grow { flex: 1; }
@@ -575,6 +681,8 @@ textarea.s-yaml { width: 100%; min-height: 50vh; resize: vertical; }
 .se-default { opacity: 0.7; }
 /* #1423: requests waiting for a fleet admin, in any panel */
 .pending-stack { position: fixed; right: var(--s-4); top: calc(var(--header-h) + var(--s-2)); z-index: 40; display: flex; flex-direction: column; gap: var(--s-2); width: min(360px, calc(100vw - 32px)); }
+/* In Settings the cards sit in the column, right under the operation — every width (alpha.2 sweep). */
+.pending-stack.inline, .shell:has(.s-pending) .pending-stack.inline { position: static; width: auto; margin-bottom: var(--s-4); }
 .pending-card { background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); }
 .pending-card.applied { border-color: var(--ok); }
 .pending-card.rejected, .pending-card.expired, .pending-card.stale, .pending-card.failed { border-color: var(--danger-line); }
@@ -586,6 +694,8 @@ textarea.s-yaml { width: 100%; min-height: 50vh; resize: vertical; }
 .pending-actions { display: flex; justify-content: flex-end; }
 /* Settings' pending bar sits at the bottom of the page: toasts and request cards stand above it, never on its buttons. */
 .shell:has(.s-pending) .toasts { bottom: calc(var(--s-6) + 64px); }
+/* In a chat the composer owns the bottom (Stop reply, Send): toasts come in under the header instead (alpha.2 sweep). */
+@media (min-width: 900px) { .shell:has(.p-chat) .toasts { top: calc(var(--header-h) + var(--s-2)); bottom: auto; } }
 .op-line { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
 .op-line.ok { color: var(--ok); }
 .op-line.bad { color: var(--danger); }
@@ -672,5 +782,71 @@ strong.org-name { font-size: var(--fs-sm); color: var(--text); }
 }
 /* A phone: Fleet's five tabs fit when only the open one shows its label (the others keep theirs for screen readers). */
 @media (max-width: 479px) {
-  .p-fleet .seg-item:not(.active) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .p-fleet .seg-item:not(.active) > span, .p-settings .seg-item:not(.active) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+}
+
+/* ── Cache analysis (#1468): Fleet → Cache. Bars are SVG attributes; nothing here is an inline style. ── */
+.ch { display: flex; flex-direction: column; gap: var(--s-4); }
+.ch-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
+.ch-scan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
+.ch-fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
+.ch-notes { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-xs); }
+.ch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--s-4); align-items: start; }
+.ch-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); }
+.ch-card.on { border-color: var(--ok); }
+.ch-head { display: flex; align-items: flex-start; gap: var(--s-3); }
+.ch-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.ch-id h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ch-models { font-size: var(--fs-xs); color: var(--text-3); overflow-wrap: anywhere; }
+.ch-rec { flex-shrink: 0; font-size: 11px; line-height: 20px; padding: 0 var(--s-2); border-radius: var(--r-full); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
+.ch-rec.on { color: var(--ok); border-color: var(--ok); font-weight: var(--fw-semibold); }
+.ch-reason { font-size: var(--fs-sm); color: var(--text-2); overflow-wrap: anywhere; }
+.ch-tag { display: inline-block; font-size: 11px; line-height: 18px; padding: 0 var(--s-2); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); }
+.ch-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); }
+.ch-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ch-metric dt { font-size: 11px; color: var(--text-3); line-height: var(--lh-xs); }
+.ch-metric dd { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
+.ch-sub { font-size: 11px; font-weight: var(--fw-regular); color: var(--text-3); }
+.ch-fleet .ch-metric dd { font-size: var(--fs-lg); }
+.ch-hist { display: block; width: 100%; height: 96px; color: var(--text-2); }
+.ch-col rect { fill: var(--accent); opacity: 0.55; }
+.ch-col.past rect { fill: var(--warn); opacity: 0.85; }
+.ch-n, .ch-l { font-size: 9px; fill: currentColor; }
+.ch-ttl line { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 3 3; }
+.ch-ttl text { font-size: 9px; fill: var(--danger); }
+.ch-rest .row-item { font-size: var(--fs-xs); }
+@media (max-width: 899px) {
+  .ch-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ch-fleet { grid-template-columns: minmax(0, 1fr); }
+  .ch-bar .btn { min-height: var(--tap); }
+}
+
+/* ── Chat commands and quick actions (#1269) ── */
+.hd-chip { margin-left: var(--s-2); padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-full); background: transparent; color: var(--text-2);
+  font-size: var(--fs-xs); line-height: 20px; cursor: pointer; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
+.hd-chip:hover { background: var(--surface); color: var(--text); }
+.composer-box { position: relative; }
+.cmd-palette { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--s-1)); z-index: 20; list-style: none; max-height: 280px; overflow-y: auto;
+  padding: var(--s-1); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); box-shadow: var(--shadow-2); }
+.cmd-palette li { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); }
+.cmd-palette li.on, .cmd-palette li:hover { background: var(--surface-2); }
+.cmd-palette .cmd-name { flex-shrink: 0; white-space: nowrap; }
+.cmd-palette .cmd-desc { color: var(--text-3); font-size: var(--fs-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmd-palette .cmd-arg { color: var(--text-3); }
+.cmd-palette .cmd-none { color: var(--text-3); cursor: default; }
+.cmd-card { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); }
+.cmd-card.bad { border-left: 3px solid var(--danger); }
+.cmd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
+.cmd-name { font-weight: var(--fw-semibold); }
+.cmd-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-ui); color: var(--text-2); }
+.cmd-choices { display: flex; flex-wrap: wrap; gap: var(--s-1); max-height: 180px; overflow-y: auto; }
+.cmd-choices .btn.current { border-color: var(--accent); color: var(--accent); }
+.quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
+/* A phone: the instance's name keeps the header; /model and /effort are a "/" away. */
+@media (max-width: 479px) { .hd-chip { display: none; } }
+@media (max-width: 899px) {
+  .hd-chip { max-width: 9em; }
+  .cmd-palette li { min-height: var(--tap); align-items: center; flex-wrap: wrap; row-gap: 0; }
+  .cmd-palette .cmd-desc { white-space: normal; flex-basis: 100%; }
+  .cmd-choices .btn, .quick-actions .btn { min-height: var(--tap); }
 }

package/dist/ui/shared/app.js

@@ -6,7 +6,7 @@
 // reached only by the dynamic imports below, in "full" mode. A test walks the static imports over real HTTP and asserts
 // none of them names /ui/.
 import { html, render } from "./app-html.js";
-import { Shell, handleKey, showDialog, closeDrawer, retryable } from "./app-shell.js";
+import { Shell, handleKey, showDialog, closeDrawer, retryable, setNewInstanceOpener } from "./app-shell.js";
 import { startRouter, navStore, navigate } from "./app-nav.js";
 import { createStream } from "./app-stream.js";
 import { appStore, applyStatus, applyActivity } from "./app-store.js";
@@ -72,6 +72,7 @@ if (mode === "full") {
     try { m = await loadFleet(); } catch { toast(t("app.loadFailed"), false); return; }
     showDialog(m.CreateInstanceDialog);
   };
+  setNewInstanceOpener(onNewInstance);
 } else appStore.set({ connection: "none" });
 
 startRouter(window);

package/dist/ui/shared/instance-nav.js

@@ -0,0 +1,310 @@
+// alpha.2 (docs/design/web-unified-instance-nav.md, N1): the one instance list of the sidebar, on every page — Chat,
+// View, Fleet, Settings, Needs — and for View's anonymous reader. It was two lists: the shell's (live dots, server
+// order, no filter, every row to Chat) and View's roster (tag groups, drag order, a filter, rows to View). Now one:
+// - live state (the status frames the app already receives; no new poll): dots, "needs you", context %, backend;
+// - View's tag groups, folding and drag order, kept by this browser;
+// - the filter — text plus status and CLI chips — kept by this browser and the same on every page;
+// - a row opens the view you are in (View → View, everywhere else → Chat);
+// - the list is never remounted on navigation, and only its own scrollTop follows the active row (#1515).
+// Public (/assets/): an anonymous View reader gets the same list, fed by View's roster read instead of status frames.
+import { html, useLayoutEffect, useRef } from "./app-html.js";
+import { t } from "./app-i18n.js";
+import { appStore, createStore, useStore } from "./app-store.js";
+import { chatPath, viewPath } from "./app-route.js";
+import { Icon } from "./ui-icons.js";
+import { Skeleton } from "./ui-states.js";
+import { viewStore } from "./view-roster-store.js";
+import "./view-strings.js";
+
+/** view.* text with named values. */
+function tn(key, values = {}) {
+  let s = t(`view.${key}`);
+  for (const [k, v] of Object.entries(values)) s = s.split(`{${k}}`).join(String(v));
+  return s;
+}
+const stored = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
+const store = (k, v) => { try { localStorage.setItem(k, v); } catch { /* this page only */ } };
+/** A row's instance name: `name` (status frames) or `instance_name` (View's roster). */
+const nameOf = (it) => (it && (it.name != null ? it.name : it.instance_name)) || "";
+
+// ── Groups, labels, the filter ──
+export function groupOf(it) {
+  const tags = Array.isArray(it.tags) ? it.tags : [];
+  if (tags.includes("classic")) return "Classic";
+  if (tags.length) return tags[0];
+  return "Other";
+}
+const BACKEND_LABELS = { "claude-code": "Claude Code", "kiro-cli": "Kiro CLI", codex: "Codex", grok: "Grok Build", antigravity: "Antigravity", opencode: "OpenCode" };
+export function backendLabel(backend) { return BACKEND_LABELS[backend] || backend || "Unknown"; }
+export const KNOWN_BACKENDS = new Set(Object.keys(BACKEND_LABELS));
+export const STATUS_KEYS = { running: "statusRunning", paused: "statusPaused", stopped: "statusStopped", crashed: "statusCrashed" };
+
+/** The status chips, in order (design Q5): what the row's dot says, in five words. */
+export const STATUS_FACETS = ["working", "needs", "idle", "stopped", "crashed"];
+/** Which status chip a row falls under: needs you first, then crashed, not running, working (or stuck), idle. */
+export function statusFacet(it, exec, awaiting) {
+  if (awaiting != null) return "needs";
+  if (!it || it.status === "crashed") return "crashed";
+  if (it.status !== "running") return "stopped";
+  return exec === "working" || exec === "stuck" ? "working" : "idle";
+}
+
+export function normalizeFilter(query) { return String(query == null ? "" : query).trim().toLowerCase(); }
+/** Case-insensitive substring on name (incl. display name), model and backend. */
+export function instanceMatchesFilter(it, needle, labelOf) {
+  if (!needle) return true;
+  const fields = [nameOf(it), it.display_name, it.model, it.backend, labelOf ? labelOf(it.backend) : null];
+  return fields.some((value) => typeof value === "string" && value.toLowerCase().includes(needle));
+}
+/**
+ * Visible groups in display order, and the "N / M" counts. `facets` (optional): { status: [...], cli: [...],
+ * statusOf(name) } — an empty list does not filter; a non-empty one keeps the rows whose status / backend is in it.
+ */
+export function filterSidebar(groupNames, instByGroup, rosterByName, query, labelOf, facets) {
+  const needle = normalizeFilter(query);
+  const status = new Set(facets && Array.isArray(facets.status) ? facets.status : []);
+  const cli = new Set(facets && Array.isArray(facets.cli) ? facets.cli : []);
+  const keep = (name) => {
+    const it = rosterByName.get(name);
+    if (!instanceMatchesFilter(it, needle, labelOf)) return false;
+    if (status.size && !status.has(facets.statusOf ? facets.statusOf(name) : statusFacet(it))) return false;
+    if (cli.size && !cli.has(it.backend || "")) return false;
+    return true;
+  };
+  const groups = [];
+  let shown = 0, total = 0;
+  for (const g of groupNames) {
+    const names = (instByGroup.get(g) || []).filter((name) => rosterByName.has(name));
+    total += names.length;
+    const visible = names.filter(keep);
+    shown += visible.length;
+    if (visible.length) groups.push({ group: g, names: visible });
+  }
+  return { groups, shown, total, active: needle.length > 0 || status.size > 0 || cli.size > 0 };
+}
+export function instanceTooltip(it) {
+  const context = it.context_pct != null && Number.isFinite(it.context_pct) ? `${Math.round(Math.min(100, Math.max(0, it.context_pct)))}%` : tn("tooltipUnavailable");
+  const status = STATUS_KEYS[it.status] ? tn(STATUS_KEYS[it.status]) : it.status || tn("statusUnknown");
+  const line = (key, value) => tn(key, { value });
+  const lines = [];
+  const name = nameOf(it);
+  if (it.display_name && it.display_name !== name) lines.push(it.display_name, `(${name})`);
+  else lines.push(name);
+  lines.push(line("tooltipBackend", backendLabel(it.backend)));
+  const src = (s) => (s === "instance" || s === "classic" ? " (configured)" : s === "fleet-default" ? " (fleet default)" : "");
+  lines.push(line("tooltipModel", (it.model || tn("tooltipUnavailable")) + src(it.model_source)));
+  lines.push(line("tooltipStatus", status));
+  lines.push(line("tooltipContext", context));
+  if (it.effort) lines.push(line("tooltipEffort", it.effort + src(it.effort_source)));
+  if (typeof it.cost === "number" && it.cost > 0) lines.push(line("tooltipCost", `$${it.cost.toFixed(2)}`));
+  if (typeof it.description === "string" && it.description.trim()) lines.push("", it.description.trim());
+  return lines.join("\n");
+}
+
+// ── This browser's order (drag), folded groups and filter ──
+const SIDEBAR_ORDER_KEY = "agend_view_sidebar_order";   // View's key since #999: everyone's arrangement carries over
+const COLLAPSED_KEY = "agend_instance_collapsed";
+const FILTER_KEY = "agend_instance_filter";
+function readOrder() {
+  const groups = new Map(), insts = new Map();
+  try {
+    const rows = JSON.parse(stored(SIDEBAR_ORDER_KEY) || "[]");
+    if (Array.isArray(rows)) for (const row of rows) {
+      if (row && row.item_type === "group" && typeof row.item_name === "string") groups.set(row.item_name, Number(row.sort_index) || 0);
+      else if (row && row.item_type === "instance" && typeof row.item_name === "string") insts.set(row.item_name, Number(row.sort_index) || 0);
+    }
+  } catch { /* ignore invalid browser-local state */ }
+  return { groups, insts };
+}
+function readCollapsed() {
+  try { const a = JSON.parse(stored(COLLAPSED_KEY) || "[]"); return new Set(Array.isArray(a) ? a.filter((x) => typeof x === "string") : []); } catch { return new Set(); }
+}
+const strings = (a) => (Array.isArray(a) ? a.filter((x) => typeof x === "string") : []);
+function readFilter() {
+  try {
+    const f = JSON.parse(stored(FILTER_KEY) || "{}");
+    return { q: f && typeof f.q === "string" ? f.q : "", status: strings(f && f.status).filter((s) => STATUS_FACETS.includes(s)), cli: strings(f && f.cli) };
+  } catch { return { q: "", status: [], cli: [] }; }
+}
+/** Display order: this browser's saved order first, then new groups/instances by tag and name. */
+export function computeOrder(roster, order) {
+  const groups = new Map();
+  for (const it of roster) { const g = groupOf(it); if (!groups.has(g)) groups.set(g, []); groups.get(g).push(it); }
+  const gidx = (g) => (order.groups.has(g) ? order.groups.get(g) : Infinity);
+  const groupNames = [...groups.keys()].sort((a, b) => {
+    const ia = gidx(a), ib = gidx(b);
+    if (ia !== ib) return ia - ib;
+    if (a === "Other") return 1;
+    if (b === "Other") return -1;
+    return a.localeCompare(b);
+  });
+  const instByGroup = new Map();
+  for (const [g, items] of groups) {
+    instByGroup.set(g, items.map(nameOf).sort((a, b) => {
+      const ia = order.insts.has(a) ? order.insts.get(a) : Infinity, ib = order.insts.has(b) ? order.insts.get(b) : Infinity;
+      return ia - ib;
+    }));
+  }
+  return { groupNames, instByGroup };
+}
+function moveIn(arr, moving, target, before) {
+  if (!arr) return;
+  const from = arr.indexOf(moving);
+  if (from === -1) return;
+  arr.splice(from, 1);
+  let to = arr.indexOf(target);
+  if (to === -1) { arr.push(moving); return; }
+  if (!before) to += 1;
+  arr.splice(to, 0, moving);
+}
+
+/** The list's state for the page's life: this browser's order, folded groups and filter (each also kept in storage). */
+export const navStore = createStore({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter() });
+/** Read them again from this browser's storage — what a page load does (the store above is made that way). */
+export function loadNavPrefs() { navStore.set({ order: readOrder(), collapsed: readCollapsed(), filter: readFilter() }); }
+/** Change the filter ({ q?, status?, cli? }): the same on every page, and kept by this browser. */
+export function setNavFilter(patch) {
+  const filter = { ...navStore.get().filter, ...patch };
+  navStore.set({ filter });
+  store(FILTER_KEY, JSON.stringify(filter));
+}
+function setCollapsed(collapsed) { navStore.set({ collapsed }); store(COLLAPSED_KEY, JSON.stringify([...collapsed])); }
+function persistOrder(groupNames, instByGroup) {
+  const rows = [];
+  groupNames.forEach((g, i) => rows.push({ item_type: "group", item_name: g, sort_index: i, group_name: null }));
+  for (const g of groupNames) (instByGroup.get(g) || []).forEach((n, j) => rows.push({ item_type: "instance", item_name: n, sort_index: j, group_name: g }));
+  store(SIDEBAR_ORDER_KEY, JSON.stringify(rows));
+  navStore.set({ order: { groups: new Map(groupNames.map((g, i) => [g, i])), insts: new Map(rows.filter((r) => r.item_type === "instance").map((r) => [r.item_name, r.sort_index])) } });
+}
+
+// ── The list ──
+
+const statusText = (facet) => (facet === "needs" ? t("app.needsYou") : facet === "working" ? t("app.statusWorking") : facet === "idle" ? t("app.statusIdle")
+  : facet === "crashed" ? t("app.statusCrashed") : t("app.statusStopped"));
+const dotClass = (facet, exec) => (facet === "needs" ? "warn" : facet === "crashed" ? "bad" : facet === "stopped" ? "off" : exec === "stuck" ? "warn" : facet === "working" ? "busy" : "ok");
+
+/**
+ * The sidebar's instance list. `route`: the page's (which instance is open, and which view a row opens). `items`: the
+ * rows (status frames' instances, or View's roster for an anonymous reader); `loaded` false shows a skeleton.
+ * `exec` / `awaiting`: live state by name (empty for the anonymous reader). `onPick`: a row was clicked (the drawer
+ * closes).
+ */
+export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting = {}, viewOnly = false, onPick }) {
+  const nav = useStore(navStore);
+  const filterRef = useRef(null);
+  const list = useRef(null);
+  const drag = useRef(null);
+  const toView = viewOnly || (route && route.panel === "view");
+  const active = route && (route.panel === "chat" || route.panel === "view") ? route.instance : null;
+  useLayoutEffect(() => { keepActiveInView(list.current); }, [active, items.length, loaded]);
+  const own = (map, name) => Object.prototype.hasOwnProperty.call(map, name);
+  const byName = new Map(items.map((it) => [nameOf(it), it]));
+  const facetOf = (name) => statusFacet(byName.get(name), own(exec, name) ? exec[name] : null, own(awaiting, name) ? awaiting[name] : null);
+  const { groupNames, instByGroup } = computeOrder(items, nav.order);
+  const f = nav.filter;
+  const shown = filterSidebar(groupNames, instByGroup, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
+  const backends = [...new Set(items.map((it) => it.backend).filter((b) => typeof b === "string" && b))].sort((a, b) => backendLabel(a).localeCompare(backendLabel(b)));
+  const toggle = (g) => { const c = new Set(navStore.get().collapsed); if (c.has(g)) c.delete(g); else c.add(g); setCollapsed(c); };
+  // From the store, not this render's copy: two clicks before the next render must both count.
+  const flip = (key, value) => { const cur = new Set(navStore.get().filter[key]); if (cur.has(value)) cur.delete(value); else cur.add(value); setNavFilter({ [key]: [...cur] }); };
+  // Drag to reorder: only the full list (a filtered subset would be ambiguous), groups among groups, instances within
+  // their group.
+  const dragProps = (item) => shown.active ? {} : {
+    draggable: "true",
+    onDragStart: (e) => { drag.current = item; e.currentTarget.classList.add("dragging"); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", item.name); } catch { /* Firefox needs data */ } },
+    onDragEnd: (e) => { e.currentTarget.classList.remove("dragging"); drag.current = null; },
+    onDragOver: (e) => {
+      const d = drag.current;
+      if (!d || d.type !== item.type || d.name === item.name || (item.type === "instance" && d.group !== item.group)) return;
+      e.preventDefault();
+      const r = e.currentTarget.getBoundingClientRect();
+      const before = e.clientY < r.top + r.height / 2;
+      e.currentTarget.classList.toggle("drop-before", before);
+      e.currentTarget.classList.toggle("drop-after", !before);
+    },
+    onDragLeave: (e) => e.currentTarget.classList.remove("drop-before", "drop-after"),
+    onDrop: (e) => {
+      e.preventDefault();
+      const before = e.currentTarget.classList.contains("drop-before");
+      e.currentTarget.classList.remove("drop-before", "drop-after");
+      const d = drag.current;
+      if (!d || d.type !== item.type) return;
+      const names = [...groupNames], insts = new Map([...instByGroup].map(([g, n]) => [g, [...n]]));
+      if (item.type === "group") moveIn(names, d.name, item.name, before);
+      else if (d.group === item.group) moveIn(insts.get(item.group), d.name, item.name, before);
+      else return;
+      persistOrder(names, insts);
+    },
+  };
+  const chips = (key, values, label, text) => html`<details class="nav-facet">
+    <summary>${label}${f[key].length ? html` <span class="nav-facet-n">${f[key].length}</span>` : null}</summary>
+    <div class="nav-facet-list" role="group" aria-label=${label}>${values.map((value) => html`<label key=${value} class="nav-chip">
+      <input type="checkbox" checked=${f[key].includes(value)} onChange=${() => flip(key, value)} /><span>${text(value)}</span></label>`)}</div>
+  </details>`;
+  // The list scrolls; the filter under it stays in view (#999), so it sits outside the scrolling section.
+  return html`<div class="view-roster inst-nav">
+    <div class="side-section" id="instanceList" ref=${list}>
+    <h2 class="side-label">${tn("instancesLabel")}</h2>
+    ${!loaded ? html`<${Skeleton} lines=${4} />` : !items.length ? html`<p class="side-empty">${t("app.noInstances")}</p>` : null}
+    ${shown.groups.map(({ group: g, names }) => {
+      const folded = nav.collapsed.has(g);
+      return html`<div key=${g} class="v-group">
+        <button type="button" class="v-group-head" aria-expanded=${folded ? "false" : "true"} onClick=${() => toggle(g)}
+          title=${tn(folded ? "expandGroup" : "collapseGroup", { group: g })} ...${dragProps({ type: "group", name: g })}>
+          <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${g}</span><span class="count">${names.length}</span></button>
+        ${folded ? null : html`<ul class="inst-list">${names.map((name) => {
+          const it = byName.get(name);
+          const alias = typeof it.display_name === "string" && it.display_name.trim() && it.display_name.trim() !== name ? it.display_name.trim() : "";
+          const facet = facetOf(name);
+          const waiting = own(awaiting, name) ? awaiting[name] : null;
+          const on = name === active;
+          return html`<li key=${name}><a class=${`inst v-inst${on ? " active" : ""}`} href=${toView ? viewPath(name) : chatPath(name)} title=${instanceTooltip(it)}
+              aria-current=${on ? "page" : undefined} onClick=${onPick} ...${dragProps({ type: "instance", name, group: g })}>
+            <span class=${`dot ${dotClass(facet, own(exec, name) ? exec[name] : null)}`} aria-hidden="true"></span>
+            <span class="inst-text"><span class="inst-name">${name}</span>
+              ${alias || facet === "needs" ? html`<span class="inst-sub">${alias ? html`<span class="inst-alias">${alias}</span>` : null}
+                ${facet === "needs" ? html`<span class="badge-await" title=${waiting || t("app.approxNote")}>${t("app.needsYou")}</span>` : null}</span>` : null}
+              <span class="sr-only">${statusText(facet)}</span></span>
+            <span class="v-meta">${it.context_pct != null ? `${Math.round(it.context_pct)}%` : ""}</span>
+            <span class=${`cli-icon cli-${KNOWN_BACKENDS.has(it.backend) ? it.backend : "other"}`} title=${backendLabel(it.backend)} aria-label=${tn("tooltipBackend", { value: backendLabel(it.backend) })}></span>
+          </a></li>`;
+        })}</ul>`}
+      </div>`;
+    })}
+    ${loaded && shown.active && !shown.groups.length ? html`<p class="side-empty">${tn("filterNone")}</p>` : null}
+    </div>
+    <div class="v-filter">
+      <label class="v-filter-box"><${Icon} name="search" size=${14} /><span class="sr-only">${tn("filterPh")}</span>
+        <input ref=${filterRef} id="filterInput" type="text" autocomplete="off" spellcheck="false" placeholder=${tn("filterPh")} value=${f.q}
+          onInput=${(e) => setNavFilter({ q: e.target.value })}
+          onKeyDown=${(e) => { if (e.key === "Escape" && f.q) { e.preventDefault(); e.stopPropagation(); setNavFilter({ q: "" }); } }} />
+        ${f.q ? html`<button type="button" class="icon-btn v-filter-clear" aria-label=${tn("filterClear")} title=${tn("filterClear")}
+          onClick=${() => { setNavFilter({ q: "" }); filterRef.current && filterRef.current.focus(); }}><${Icon} name="close" size=${14} /></button>` : null}
+      </label>
+      <div class="nav-facets">
+        ${viewOnly ? null : chips("status", STATUS_FACETS, tn("filterStatus"), statusText)}
+        ${backends.length > 1 || f.cli.length ? chips("cli", backends, tn("filterCli"), backendLabel) : null}
+        ${f.status.length || f.cli.length ? html`<button type="button" class="chip-btn nav-facet-reset" onClick=${() => setNavFilter({ status: [], cli: [] })}>${tn("filterFacetsReset")}</button>` : null}
+      </div>
+      <p class="note" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
+    </div>
+  </div>`;
+}
+
+/**
+ * Keep a sidebar list's current item in view by scrolling that list only (alpha.2): never scrollIntoView, which would
+ * also scroll every scrollable ancestor, the page included. A list the reader scrolled stays where it is otherwise.
+ */
+export function keepActiveInView(container) {
+  const a = container && container.querySelector('[aria-current="page"]');
+  if (!a) return;
+  const c = container.getBoundingClientRect(), r = a.getBoundingClientRect();
+  if (r.top < c.top) container.scrollTop -= c.top - r.top;
+  else if (r.bottom > c.bottom) container.scrollTop += r.bottom - c.bottom;
+}
+
+/** The list fed by View's roster read (/api/profiles): the anonymous View reader's, who has no status frames. */
+export function RosterNav({ route, viewOnly = false, onPick }) {
+  const v = useStore(viewStore);
+  return html`<${InstanceNav} route=${route || { panel: "view", instance: v.current }} items=${v.roster} loaded=${v.loaded} viewOnly=${viewOnly} onPick=${onPick} />`;
+}