@songsid/agend 2.3.0-beta.1 → 2.3.0-beta.3

package/dist/ui/shared/effect-trial-shadow.js

@@ -0,0 +1,62 @@
+/** #2039: fixed host-only closed shadow shell. Owner CSS has no exported parts or slots into it. */
+const roots = new WeakMap();
+const clear = root => { while (root.firstChild) root.removeChild(root.firstChild); };
+function sheetOf(host, record) {
+  try {
+    const link = record.link, sheet = link?.sheet;
+    return record.ready && !record.dead && roots.get(record.panel)?.current === record && record.root.mode === "closed" && record.root.host === record.panel
+      && link.getRootNode() === record.root && link.isConnected && link.disabled === false && sheet?.ownerNode === link && sheet.disabled === false
+      && sheet.href === new URL("/assets/effect-trial.css", host.location.origin).href && typeof sheet.insertRule === "function" && typeof sheet.deleteRule === "function" && sheet.cssRules ? sheet : null;
+  } catch { return null; }
+}
+/** Reflect only a shell issued here, after its fixed same-origin stylesheet loaded. Never a serialized capability. */
+export function effectTrialShadow(host, panel) {
+  const record = roots.get(panel)?.current;
+  return record && sheetOf(host, record) === record.proof?.sheet ? record.proof : null;
+}
+export function createEffectTrialShadow({ window: host, panel, title, labels, onStop, onClose, onReady, onError } = {}) {
+  if (!host?.document || panel?.ownerDocument !== host.document || typeof panel.attachShadow !== "function" || typeof onReady !== "function" || typeof onError !== "function") return null;
+  let slot = roots.get(panel), cleanup = null;
+  const clock = () => (host.performance ?? globalThis.performance).now(), later = host.setTimeout?.bind(host) ?? globalThis.setTimeout, cancel = host.clearTimeout?.bind(host) ?? globalThis.clearTimeout;
+  try {
+    if (slot?.current && !slot.current.dead) return null;
+    if (!slot) { slot = { root: panel.attachShadow({ mode: "closed" }), current: null }; roots.set(panel, slot); }
+    const root = slot.root; clear(root);
+    const doc = host.document, element = (tag, cls) => { const el = doc.createElement(tag); el.className = cls; return el; };
+    const link = element("link", "effect-trial-style"); link.setAttribute("rel", "stylesheet"); link.setAttribute("href", "/assets/effect-trial.css");
+    const head = element("header", "effect-trial-head"), label = element("strong", "effect-trial-label"), name = element("span", "effect-trial-title"), close = element("button", "effect-trial-close"), controls = element("div", "effect-trial-controls"), stop = element("button", "effect-trial-stop"), body = element("div", "effect-trial-body"), stage = element("div", "effect-trial-stage"), note = element("p", "effect-trial-note");
+    close.setAttribute("type", "button"); stop.setAttribute("type", "button"); stage.setAttribute("aria-hidden", "true");
+    head.append(label, name, close); controls.append(stop); body.append(stage);
+    const nodes = [head, controls, body, note]; for (const el of nodes) el.setAttribute("hidden", "");
+    const began = clock(); if (!Number.isFinite(began) || began < 0) return null;
+    let timer = null;
+    const record = { panel, root, link, stage, head, controls, body, note, close, stop, ready: false, dead: false, proof: null }; slot.current = record;
+    const text = (nextTitle, nextLabels) => {
+      if (record.dead || !nextLabels) return;
+      label.textContent = nextLabels.label; name.textContent = typeof nextTitle === "string" ? nextTitle : "";
+      close.textContent = nextLabels.close; stop.textContent = nextLabels.stop; note.textContent = nextLabels.note;
+      panel.setAttribute("data-effect-trial-theme", doc.documentElement.dataset.theme === "dark" ? "dark" : "light");
+    };
+    const failed = () => { if (!record.dead) { dispose(); try { onError("stage_unavailable"); } catch { /* cleanup already owns failure */ } } };
+    const loaded = () => {
+      if (record.dead || record.ready || slot.current !== record) return;
+      const at = clock(); if (!Number.isFinite(at) || at < began || at - began >= 10000) { failed(); return; }
+      record.ready = true; const sheet = sheetOf(host, record);
+      if (!sheet) { failed(); return; }
+      cancel(timer); timer = null;
+      record.proof = Object.freeze({ panel, root, link, sheet, stage, head, controls, body, note, close, stop });
+      for (const el of nodes) el.removeAttribute("hidden");
+      try { onReady(record.proof); } catch { failed(); }
+    };
+    const stopClick = () => { if (!record.dead) onStop?.(); }, closeClick = () => { if (!record.dead) onClose?.(); };
+    function dispose() {
+      if (record.dead) return; record.dead = true; cancel(timer); timer = null;
+      link.removeEventListener("load", loaded); link.removeEventListener("error", failed); stop.removeEventListener("click", stopClick); close.removeEventListener("click", closeClick);
+      if (slot.current === record) { slot.current = null; clear(root); }
+    }
+    cleanup = dispose;
+    link.addEventListener("load", loaded); link.addEventListener("error", failed); stop.addEventListener("click", stopClick); close.addEventListener("click", closeClick);
+    text(title, labels); timer = later(failed, 10000); root.append(link, ...nodes);
+    return Object.freeze({ dispose, text });
+  } catch { cleanup?.(); return null; }
+}

package/dist/ui/shared/effect-trial-stage.js

@@ -1,4 +1,5 @@
 /** #1629: host-issued LOCAL trial paint receipt. No authority, loader, frame factory or pool is created here. */
+import { effectTrialShadow } from "./effect-trial-shadow.js";
 import { effectHostStyle } from "./effect-host-style.js";
 import { effectStockSnapshot } from "./effect-stock-snapshot.js";
 import { STOCK_EFFECT_BARRIERS } from "./effect-stock-trust.js";
@@ -58,10 +59,11 @@ export function effectTrialStage(receipt, expected, stock) {
 }
 
 /** Only the fixed host TrialPanel supplies these elements and a current server-run lease. Not an agent manifest. */
-export function createEffectTrialStage({ window: host, panel, stage, binding: raw, current, ownerCss, onStop = () => {} } = {}) {
+export function createEffectTrialStage({ window: host, panel, stage, binding: raw, current, onStop = () => {} } = {}) {
   const own = binding(raw);
-  if (!own || typeof current !== "function" || typeof ownerCss !== "function" || typeof onStop !== "function" || !host?.document || !panel || !stage || owners.has(stage)) return null;
-  let sheet; try { sheet = effectHostStyle(host); if (!sheet || host.CSS?.supports("contain", "paint") !== true || host.CSS.supports("overflow", "clip") !== true) return null; } catch { return null; }
+  if (!own || typeof current !== "function" || typeof onStop !== "function" || !host?.document || !panel || !stage || owners.has(stage)) return null;
+  const shell = effectTrialShadow(host, panel), hostSheet = effectHostStyle(host);
+  let sheet; try { sheet = shell?.sheet; if (!shell || shell.stage !== stage || !hostSheet || !sheet || host.CSS?.supports("contain", "paint") !== true || host.CSS.supports("overflow", "clip") !== true) return null; } catch { return null; }
   const receipt = Object.freeze(Object.create(null)), frames = new Set(), listeners = new Set(); let dead = false, constraint = null;
   const identity = Object.freeze({ key: own.key, id: own.id, instance: own.instance, generation: own.generation, serial: ++serial });
   const invalidate = reason => {
@@ -76,23 +78,27 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
   function check(stock) {
     try {
       // This callback may reenter disposal or replace the owner. Recheck identity after it returns.
-      if (dead || current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || ownerCss() !== "off" || dead) return null;
+      if (dead || current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead) return null;
       const proof = effectStockSnapshot(stock), doc = host.document;
-      if (effectHostStyle(host) !== sheet) return null;
+      if (effectHostStyle(host) !== hostSheet || effectTrialShadow(host, panel) !== shell) return null;
       // The own panel MUST still suppress ordinary foreground effects. Never synthesize front:true.
       if (!proof || proof.front !== false || doc.visibilityState !== "visible" || doc.hasFocus?.() !== true || doc.fullscreenElement || doc.pictureInPictureElement) return null;
       const split = doc.querySelector(".main > .p-chat > .chat-split");
       if (!split || doc.querySelectorAll(".main > .p-chat").length !== 1 || doc.querySelectorAll(".chat-split > .pv-panel").length !== 1
         || panel.parentElement !== split || panel.ownerDocument !== doc || panel.isConnected !== true || panel.className !== "pv-panel effect-trial-panel" || panel.getAttribute("data-trust") !== "preview") return null;
-      const children = [...panel.children], names = ["effect-trial-head", "effect-trial-controls", "effect-trial-body", "effect-trial-note"];
-      if (children.length !== names.length || children.some((el, i) => el.className !== names[i]) || children[2].children.length !== 1 || children[2].firstElementChild !== stage
+      const children = [...shell.root.children], names = ["effect-trial-style", "effect-trial-head", "effect-trial-controls", "effect-trial-body", "effect-trial-note"];
+      if (panel.children.length !== 0 || children.length !== names.length || children.some((el, i) => el.className !== names[i]) || children[3].children.length !== 1 || children[3].firstElementChild !== stage
         || stage.className !== "effect-trial-stage" || stage.ownerDocument !== doc || stage.isConnected !== true || stage.hasAttribute("tabindex") || stage.hasAttribute("contenteditable")) return null;
+      for (const control of [shell.head, shell.controls, shell.close, shell.stop, shell.note]) {
+        const style = host.getComputedStyle(control);
+        if (style.display === "none" || style.visibility !== "visible" || style.opacity !== "1" || !rect(control)) return null;
+      }
       if ([...doc.querySelectorAll(STOCK_EFFECT_BARRIERS)].some(el => el !== panel && visible(host, el))
         || [...doc.querySelectorAll(".pv-panel")].some(el => el !== panel && visible(host, el))) return null;
       const active = doc.activeElement;
       if (active && active !== doc.body && active !== doc.documentElement && (active.matches("input,select,textarea,[contenteditable]") || active.isContentEditable)) return null;
       let el = stage, depth = 0;
-      while (el) { const s = host.getComputedStyle(el); if (++depth > 128 || el.ownerDocument !== doc || !neutral(s) || s.opacity !== "1" || s.visibility !== "visible" || s.display === "none" || s.contain !== (el === stage ? "paint" : "none")) return null; if (el === doc.documentElement) break; el = el.parentElement; }
+      while (el) { const s = host.getComputedStyle(el); if (++depth > 128 || el.ownerDocument !== doc || !neutral(s) || s.opacity !== "1" || s.visibility !== "visible" || s.display === "none" || s.contain !== (el === stage ? "paint" : "none")) return null; if (el === doc.documentElement) break; el = el.parentElement ?? (el.getRootNode?.() === shell.root ? panel : null); }
       if (el !== doc.documentElement) return null;
       const s = host.getComputedStyle(stage), r = rect(stage), p = rect(panel);
       if (!r || !p || s.position !== "relative" || s.zIndex !== "0" || s.overflowX !== "clip" || s.overflowY !== "clip"
@@ -103,7 +109,7 @@ export function createEffectTrialStage({ window: host, panel, stage, binding: ra
       if ([...stage.children].some(child => ![...frames].some(f => f.element === child))) return null;
       const width = Math.floor(r.width), height = Math.floor(r.height);
       if (width < 1 || height < 1 || width > 4096 || height > 4096 || width * height > 8388608 || dead || owners.get(stage) !== receipt) return null;
-      if (current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || ownerCss() !== "off" || dead || stage.isConnected !== true || panel.parentElement !== split) return null;
+      if (current(own) !== true || constraint !== null && constraint() !== true || dead || owners.get(stage) !== receipt || dead || stage.isConnected !== true || panel.parentElement !== split) return null;
       return { x: r.x, y: r.y, width, height };
     } catch { return null; }
   }

package/dist/ui/shared/effect-trial.css

@@ -0,0 +1,40 @@
+/* #2039: fixed closed-shadow Trial chrome; no inherited owner-CSS typography, parts or slots. */
+:host {
+  all: initial !important;
+  box-sizing: border-box !important;
+  display: flex !important;
+  flex: 0 0 45% !important;
+  flex-direction: column !important;
+  align-self: stretch !important;
+  width: 45% !important;
+  min-width: 320px !important;
+  max-width: calc(100% - 368px) !important;
+  min-height: 0 !important;
+  height: auto !important;
+  position: relative !important;
+  z-index: 1 !important;
+  overflow: clip !important;
+  background: #ffffff !important;
+  color: #1b1b1f !important;
+  font: 400 16px/1.4 system-ui, sans-serif !important;
+  direction: ltr !important;
+  unicode-bidi: isolate !important;
+  text-align: start !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+:host([data-effect-trial-theme="dark"]) { background: #202024 !important; color: #f0f0f4 !important; }
+:host::before, :host::after { all: initial !important; content: none !important; display: none !important; }
+*, *::before, *::after { box-sizing: border-box; }
+[hidden] { display: none !important; }
+.effect-trial-head, .effect-trial-controls, .effect-trial-note { position: relative; z-index: 1; padding: 12px; margin: 0; }
+.effect-trial-head { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; }
+.effect-trial-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+button { appearance: auto; display: inline-block; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
+button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.effect-trial-body { flex: 1; min-height: 0; display: flex; padding: 12px; }
+.effect-trial-stage { position: relative; z-index: 0; flex: 1; min-width: 0; min-height: 0; contain: paint; overflow: clip; padding: 0; border: 0; outline: none; box-shadow: none; }
+.effect-trial-note { font-size: 14px; }
+@media (max-width: 899px) {
+  :host { position: fixed !important; inset: 0 !important; z-index: 37 !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important; }
+}

package/dist/ui/shared/identity-card.js

@@ -135,7 +135,8 @@ function SizeControl({ name, size }) {
 }
 
 /**
- * The card. `compact`: the chat header's own small size (no size control). Nothing when the card is empty. The
+ * The card. `compact`: the chat header's own small size (no size control; the banner still follows the size choice,
+ * #2038). Nothing when the card is empty. The
  * tagline and bio say whose they are (title), since a person's field wins over the agent's.
  */
 export function IdentityCard({ name, card, compact = false, sizeControl = !compact }) {
@@ -143,10 +144,12 @@ export function IdentityCard({ name, card, compact = false, sizeControl = !compa
   const [broken, setBroken] = useState({});
   if (!card) return null;
   const size = compact ? "c" : cardSizeFor(name);
+  // #2038: the chat header's card is its own small size, but its banner follows the person's size choice too.
+  const bannerSize = compact ? ` bs-${cardSizeFor(name)}` : "";
   const whose = (f) => t(f.by === "human" ? "card.byHuman" : "card.byAgent");
   const pic = (slot, cls, alt) => card[slot] && broken[slot] !== card[slot].src
     ? html`<img class=${cls} src=${card[slot].src} alt=${alt} title=${whose(card[slot])} decoding="async" onError=${() => setBroken({ ...broken, [slot]: card[slot].src })} />` : null;
-  return html`<section class=${`id-card card-${size}`} aria-label=${t("card.label", name)}>
+  return html`<section class=${`id-card card-${size}${bannerSize}`} aria-label=${t("card.label", name)}>
     ${pic("banner", "id-banner", "")}
     <div class="id-row">
       ${pic("portrait", "id-portrait", t("card.portraitAlt", name))}

package/dist/ui/shared/identity-color.js

@@ -3,7 +3,7 @@
 // (`color`, `color_show`); this module resolves them as src/web-identity-color.ts does (a test pins the two equal),
 // paints the sidebar row through the CSSOM (no style attribute, #1300), and holds the Color dialog.
 //   colour: a person's pick > the agent's (themes shown) > its own bot's role colour > automatic (a few soft colours)
-//   places: a person's choice > the agent's (themes shown) > this host's default (color.show) > ring + bar
+//   places: a person's choice > the agent's (themes shown) > this host's default (color.show) > all three (#2056)
 //   Settings → Web appearance can turn colours off for the host (color.off): nothing is painted, every pick is kept.
 import { html, useEffect, useState } from "./app-html.js";
 import { createStore, useStore } from "./app-store.js";
@@ -30,7 +30,7 @@ export const AUTO_PALETTE = [
   { id: "moss", light: "#5b7340", dark: "#a9c48d" }, { id: "slate", light: "#5f6b78", dark: "#aeb8c4" },
 ];
 export const PLACEMENTS = ["name", "bar", "ring"];
-export const DEFAULT_PLACEMENTS = ["bar", "ring"];
+export const DEFAULT_PLACEMENTS = ["name", "bar", "ring"];   // #2056: all three where nobody chose (was ring + bar)
 const HEX = /^#[0-9a-f]{6}$/;
 const presetOf = (c) => (typeof c === "string" && c.startsWith("preset:") ? IDENTITY_PALETTE.find((p) => p.id === c.slice(7)) : undefined);
 const autoOf = (c) => (typeof c === "string" && c.startsWith("auto:") ? AUTO_PALETTE.find((p) => p.id === c.slice(5)) : undefined);
@@ -115,7 +115,7 @@ export function colorsOff() {
   const f = prefInForce("color.off");
   return f ? f.value === true : readLocal("agend_color_off") === "on";
 }
-/** The default places (null: back to ring + bar). */
+/** The default places (null: back to all three, #2056). */
 export function setDefaultPlaces(list) {
   const v = list === null ? null : placesOk(list);
   const same = v && v.length === DEFAULT_PLACEMENTS.length && v.every((p, i) => p === DEFAULT_PLACEMENTS[i]);

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

@@ -36,6 +36,22 @@ export function groupOf(it) {
   if (tags.length) return tags[0];
   return "Other";
 }
+/** A group's heading: the fallback group ("Other") is a key, shown in the page's language; a tag is shown as it is. */
+export function groupLabel(g) { return g === "Other" ? tn("groupOther") : g; }
+/**
+ * #2050: the model as a person reads it. The server's resolver writes English for a model it has not resolved yet
+ * ("default (detected when it starts)") and for a CLI's own default ("x (default)"); those are shown in the page's language.
+ */
+export function modelText(it, raw = it && it.model) {
+  if (!raw || typeof raw !== "string") return raw;
+  if (it.model_source === "unresolved") {
+    const why = /^default \((.*)\)$/.exec(raw)?.[1];
+    const reason = why === "detected when it starts" ? tn("modelWhyStart") : why === "this CLI does not report a default" ? tn("modelWhyCli") : why;
+    return reason ? tn("modelDefaultWhy", { reason }) : raw === "default" ? tn("modelDefault") : raw;
+  }
+  if (it.model_source === "cli-default") { const m = /^(.*) \(default\)$/.exec(raw); if (m) return tn("modelCliDefault", { model: m[1] }); }
+  return raw;
+}
 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));
@@ -93,8 +109,8 @@ export function instanceTooltip(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)));
+  const src = (s) => (s === "instance" || s === "classic" ? tn("srcConfigured") : s === "fleet-default" ? tn("srcFleetDefault") : "");
+  lines.push(line("tooltipModel", (modelText(it) || 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)));
@@ -224,6 +240,8 @@ function writeFacetsOpen(open) { try { localStorage.setItem(FACETS_KEY, JSON.str
 
 /** The Favorites group's key among the tag groups: no tag can be it (a group name is never a control character). */
 const FAV_GROUP = "\u0000favorites";
+/** #1936: the open instance, pinned on top while a filter is on. */
+const PINNED_GROUP = "\u0000pinned";
 function persistOrder(groupNames, instByGroup) {
   const rows = [];
   groupNames.forEach((g, i) => rows.push({ item_type: "group", item_name: g, sort_index: i, group_name: null }));
@@ -356,13 +374,12 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   // #1664: "☆ Edit" — the stars on every row (on a phone the only way to them) and ↑ ↓ on the favorites — only on the
   // full list, as drag: in a filtered one the row above may not be the one above in the list (#1677 review).
   const [editing, setEditing] = useState(false);
-  // Where a row goes: the view the page is in (#1523 §3.1). View → View; Details, or a Fleet tab (Q4 = A), → Details;
-  // everywhere else → Chat. The anonymous reader only ever has View.
+  // Where a row goes: the view the page is in (#1523 §3.1). View → View; Details → Details; everywhere else, a Fleet tab
+  // included (#1917: the user's call, replacing Q4 = A), → Chat. The anonymous reader only ever has View.
   const rowPath = viewOnly || (route && route.panel === "view") ? viewPath
     : route && route.panel === "log" ? logPath                                  // #1218: Log → Log
-    : route && (route.panel === "details" || route.panel === "fleet") ? detailsPath : chatPath;
+    : route && route.panel === "details" ? detailsPath : chatPath;
   const active = route && (route.panel === "chat" || route.panel === "view" || route.panel === "log" || route.panel === "details") ? 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);
@@ -379,6 +396,12 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   if (favs.length) shownInsts.set(FAV_GROUP, favs);
   const f = nav.filter;
   const shown = filterSidebar(shownGroups, shownInsts, byName, f.q, backendLabel, { status: f.status, cli: f.cli, statusOf: facetOf });
+  // #1936: while a filter is on, the instance you have open stays on top, pinned and marked "Current", whether or not
+  // it matches; a match is not repeated below. "N / M" still counts the filter's matches (the pinned row counts only
+  // when it is one). Clearing the filter puts it back in its place, and the list scrolls to it again.
+  const pinned = shown.active && active && byName.has(active) ? active : null;
+  const listed = pinned ? shown.groups.map((x) => ({ ...x, names: x.names.filter((n) => n !== pinned) })).filter((x) => x.names.length) : shown.groups;
+  useLayoutEffect(() => { keepActiveInView(list.current); }, [active, items.length, loaded, shown.active]);
   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.
@@ -463,7 +486,10 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       ${canStar && items.length ? html`<button type="button" class="chip-btn fav-edit" aria-pressed=${editing ? "true" : "false"} onClick=${() => setEditing(!editing)}>
         ${editing ? tn("favDone") : html`<${Icon} name="star" size=${12} />${tn("favEdit")}`}</button>` : null}</div>
     ${!loaded ? html`<${Skeleton} lines=${4} />` : !items.length ? html`<p class="side-empty">${t("app.noInstances")}</p>` : null}
-    ${shown.groups.map(({ group: g, names }) => {
+    ${pinned ? html`<div key=${PINNED_GROUP} class="v-group v-pinned" role="group" aria-label=${tn("pinnedLabel")}>
+      <div class="v-group-head pinned-head"><span class="grow">${tn("pinnedCurrent")}</span></div>
+      <ul class="inst-list">${row(pinned, PINNED_GROUP, 0, 1)}</ul></div>` : null}
+    ${listed.map(({ group: g, names }) => {
       // #1664: Favorites — always open, not dragged (↑ ↓ in Edit), named in the page's language.
       if (g === FAV_GROUP) return html`<div key=${g} class="v-group v-fav" role="group" aria-label=${tn("favorites")}>
         <div class="v-group-head fav-head"><${Icon} name="star" size=${14} cls="fav-mark" /><span class="grow">${tn("favorites")}</span><span class="count">${names.length}</span></div>
@@ -471,8 +497,8 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
       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>
+          title=${tn(folded ? "expandGroup" : "collapseGroup", { group: groupLabel(g) })} ...${dragProps({ type: "group", name: g })}>
+          <${Icon} name="chevron" size=${14} cls=${folded ? "caret folded" : "caret"} /><span class="grow">${groupLabel(g)}</span><span class="count">${names.length}</span></button>
         ${folded ? null : html`<ul class="inst-list">${names.map((name, i) => row(name, g, i, names.length))}</ul>`}
       </div>`;
     })}

package/dist/ui/shared/panel-view.js

@@ -16,7 +16,7 @@ import { HeaderTools, VIEW_SCALE, textSizeStore } from "./header-tools.js";
 import { readStream } from "./read-stream.js";
 // The usage dialog's metric row lives with the dialog now (usage-dialog.js); re-exported for what imported it here.
 export { UsageMetric } from "./usage-dialog.js";
-import { backendLabel, STATUS_KEYS } from "./instance-nav.js";
+import { backendLabel, modelText, STATUS_KEYS } from "./instance-nav.js";
 import { viewStore } from "./view-roster-store.js";
 
 /** #1580: the app's stream says the fleet is not answering (a restart): the View's polls skip their turn until it is. */
@@ -305,7 +305,7 @@ function Card({ it, viewOnly, onEdit }) {
     <div class="v-avatar">${it.has_avatar ? html`<img ref=${avatar} alt="" />` : html`<span class="v-initial" aria-hidden="true">${initial}</span>`}</div>
     <div class="v-card-body">
       <div class="v-card-line"><strong>${it.display_name || it.instance_name}</strong>${it.role ? html`<span class="v-role">${it.role}</span>` : null}</div>
-      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${it.model}` : ""}${ctx}</div>
+      <div class="v-card-meta">${it.instance_name} · ${backendLabel(it.backend)}${it.model ? ` · ${modelText(it)}` : ""}${ctx}</div>
       ${open && it.description ? html`<p class="v-card-desc">${it.description}</p>` : null}
     </div>
     <button type="button" class="icon-btn" onClick=${toggle} aria-expanded=${open ? "true" : "false"} aria-label=${tn(open ? "collapseProfile" : "expandProfile")} title=${tn(open ? "collapseProfile" : "expandProfile")}>

package/dist/ui/shared/usage-dialog.js

@@ -66,7 +66,17 @@ export function UsageMetric({ m }) {
   const sub = [note, expiryText(m.expiresAt)].filter(Boolean).join(" · ");
   return html`<div class="u-metric"><div class="u-row"><span class="u-label">${label}</span><span class="u-val">${val}</span></div>${sub ? html`<div class="u-sub">${sub}</div>` : null}</div>`;
 }
-/** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
+/**
+ * #2014: a row's title. A credential profile's row (`profile`; its API `name` is "Claude (<profile>)") shows the
+ * provider name on the title line beside the plan badge, and the profile on its own full-width muted line under it;
+ * the full name is the tooltip, and the dialog shows the profile unclipped. Any other row: its name.
+ */
+export function providerTitle(p) {
+  const name = String((p && p.name) || ""), profile = p && typeof p.profile === "string" && p.profile ? p.profile : "";
+  const suffix = ` (${profile})`;
+  return profile && name.endsWith(suffix) ? { base: name.slice(0, -suffix.length), profile } : { base: name, profile };
+}
+
 /**
  * #1749: a plan as its badge reads — one short line. "Name [Tier] (N×)" (Claude's "Team Premium (6.25x)", "Max (20x)")
  * becomes "Name ×N"; anything else (Pro, Codex's and muse's labels) as it is. The full name stays on the badge's
@@ -76,6 +86,7 @@ export function planBadge(plan) {
   const m = /^(\S+)(?: [^()]+)? \((\d+(?:\.\d+)?)x\)$/i.exec(String(plan || "").trim());
   return m ? `${m[1]} ×${m[2]}` : String(plan || "");
 }
+/** "Updated 3 min ago" (#1585): how old the numbers are — the panel may show the last snapshot while a fresh one comes. */
 export function updatedAgo(fetchedAt, now = Date.now()) {
   const ms = now - new Date(fetchedAt).getTime();
   if (!Number.isFinite(ms) || ms < 60_000) return tn("usageUpdatedJustNow");
@@ -134,11 +145,12 @@ export function UsageBody({ owner }) {
     const providers = ordered(data.providers);
     content = html`${!providers.length ? html`<p class="note">${tn("usage.empty_active")}</p>` : null}
       ${providers.map((p, i) => html`<section key=${key(p)} class="u-provider">
-        <div class="u-head"><strong title=${p.name}>${p.name}</strong>${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
+        <div class="u-head"><strong title=${p.name}>${providerTitle(p).base}</strong>${p.plan ? html`<span class="pill u-plan" title=${p.plan}><span aria-hidden="true">${planBadge(p.plan)}</span><span class="sr-only">${p.plan}</span></span>` : null}
           <span class="u-order">
             <button type="button" class="icon-btn" disabled=${i === 0} aria-label=${tn("usageMoveUp")} title=${tn("usageMoveUp")} onClick=${() => move(key(p), -1, data.providers)}><${Icon} name="up" size=${14} /></button>
             <button type="button" class="icon-btn" disabled=${i === providers.length - 1} aria-label=${tn("usageMoveDown")} title=${tn("usageMoveDown")} onClick=${() => move(key(p), 1, data.providers)}><${Icon} name="down" size=${14} /></button>
           </span></div>
+        ${providerTitle(p).profile ? html`<div class="u-profile" title=${p.name}>${providerTitle(p).profile}</div>` : null}
         ${p.stale ? html`<p class="note">${usageText(p.hint || "", p.hintI18n)}</p>` : null}
         ${p.status === "error" && !p.transient ? html`<p class="u-err">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`
           : p.status === "error" && p.transient ? html`<p class="note">${usageText(p.error || tn("usage.error_fallback"), p.errorI18n)}</p>`

package/dist/ui/shared/view-strings.js

@@ -51,6 +51,14 @@ register("view", {
   "tooltipEffort": "Effort: {value}",
   "tooltipCost": "Cost: {value}",
   "tooltipUnavailable": "Unavailable",
+  "srcConfigured": " (configured)",
+  "srcFleetDefault": " (fleet default)",
+  "modelDefault": "default",
+  "modelDefaultWhy": "default ({reason})",
+  "modelCliDefault": "{model} (default)",
+  "modelWhyStart": "detected when it starts",
+  "modelWhyCli": "this CLI does not report a default",
+  "groupOther": "Other",
   "statusRunning": "Running",
   "statusPaused": "Paused",
   "statusStopped": "Stopped",
@@ -197,7 +205,9 @@ register("view", {
   "favUp": "Move {name} up",
   "favDown": "Move {name} down",
   "favFull": "Favorites are full ({max})",
-  "favFiltered": "Clear the filter to reorder favorites"
+  "favFiltered": "Clear the filter to reorder favorites",
+  "pinnedCurrent": "Current",
+  "pinnedLabel": "The instance you have open"
  },
  "zh-TW": {
   "editProfile": "編輯個人資料",
@@ -246,6 +256,14 @@ register("view", {
   "tooltipEffort": "推理強度：{value}",
   "tooltipCost": "費用：{value}",
   "tooltipUnavailable": "無資料",
+  "srcConfigured": "（設定值）",
+  "srcFleetDefault": "（fleet 預設）",
+  "modelDefault": "預設",
+  "modelDefaultWhy": "預設（{reason}）",
+  "modelCliDefault": "{model}（預設）",
+  "modelWhyStart": "啟動時偵測",
+  "modelWhyCli": "這個 CLI 不提供預設值",
+  "groupOther": "其他",
   "statusRunning": "運行中",
   "statusPaused": "已暫停",
   "statusStopped": "已停止",
@@ -392,6 +410,8 @@ register("view", {
   "favUp": "把 {name} 上移",
   "favDown": "把 {name} 下移",
   "favFull": "最愛已滿（{max} 個）",
-  "favFiltered": "清除篩選後才能調整最愛順序"
+  "favFiltered": "清除篩選後才能調整最愛順序",
+  "pinnedCurrent": "目前",
+  "pinnedLabel": "你目前開著的 instance"
  }
 });

package/dist/ui/signin.html

@@ -55,7 +55,7 @@
     <div id="msg" role="alert" aria-live="polite"></div>
     <div class="hint" data-i18n="hint">No code? Send /web in General, then press a sign-in button to get one.</div>
     <details class="help"><summary data-i18n="nobot">No chat bot?</summary><p data-i18n="nobot_body">Ask the operator to run <code>agend web --code</code> on the AgEnD computer.</p></details>
-    <details class="help"><summary data-i18n="safe">Page looks wrong after signing in?</summary><p data-i18n="safe_body">Your custom CSS may be hiding something. Add ?safe=1 to the end of the address to load the page without it, then fix it or turn it off in Settings → Appearance.</p></details>
+    <details class="help"><summary data-i18n="safe">Page looks wrong after signing in?</summary><p data-i18n="safe_body">Your custom CSS may be hiding something. Add ?safe=1 to the end of the address to load the page without it, then fix it or turn it off in Settings → Web appearance.</p></details>
   </form>
   <noscript>This page needs JavaScript to sign you in.</noscript>
 </main>

package/dist/usage/providers.d.ts

@@ -34,6 +34,8 @@ export interface UsageMetric {
 export interface ProviderUsage {
     id: string;
     name: string;
+    /** #2014: the credential profile this row reads (its `name` ends in ` (<profile>)`); the page shows it on its own line. */
+    profile?: string;
     status: "ok" | "error" | "no-credentials";
     /** A non-metered subscription whose entitlement is unlimited (not 0/100%). */
     unlimited?: boolean;
@@ -221,6 +223,7 @@ export declare function fetchKiroUsage(storeHome?: string): Promise<Omit<Provide
 type UsageProvider = {
     id: string;
     name: string;
+    profile?: string;
     fetch: (storeHome?: string, scope?: ClaudeUsageScope) => Promise<Omit<ProviderUsage, "id" | "name">>;
 };
 type UsageFleetConfig = Parameters<typeof listConfiguredProfiles>[0];

package/dist/usage/providers.js

@@ -1458,6 +1458,7 @@ export function providersForConfig(config, base = DEFAULT_PROVIDERS) {
         rows.push(...profiles.map(profile => ({
             id: `${provider.id}:${profile}`,
             name: `${provider.name} (${profile})`,
+            profile,
             fetch: () => provider.fetch(credentialProfileStoreHome(getAgendHome(), backendName, profile), { profile }),
         })));
         return rows;
@@ -1644,16 +1645,16 @@ export async function fetchAllUsage(config) {
                 // Fail soft: this row says it could not be read, the rest still answer,
                 // and the snapshot returns in bounded time.
                 return {
-                    id: p.id, name: p.name, status: "error",
+                    id: p.id, name: p.name, ...(p.profile ? { profile: p.profile } : {}), status: "error",
                     error: `Could not reach ${p.name}.`,
                     errorI18n: i18n("usage.error.unreachable", p.name),
                     metrics: [],
                 };
             }
-            return { id: p.id, name: p.name, ...outcome };
+            return { id: p.id, name: p.name, ...(p.profile ? { profile: p.profile } : {}), ...outcome };
         }
         catch (err) {
-            return { id: p.id, name: p.name, status: "error", error: String(err?.message ?? err), metrics: [] };
+            return { id: p.id, name: p.name, ...(p.profile ? { profile: p.profile } : {}), status: "error", error: String(err?.message ?? err), metrics: [] };
         }
     }));
     return {