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

package/dist/ui/chat-thread.js

@@ -19,12 +19,19 @@ export const msgKey = (x) => `${x.boot}-${x.id}`;
 
 /**
  * Bind a renderer to `list` (the thread element) inside `scroller`. opts: { t, tf, isUser(x), onJump({show, unseen}),
- * setPreviewOptIn(on), copyText(text) → Promise<boolean>, download(code) }.
+ * setPreviewOptIn(on), copyText(text) → Promise<boolean>, download(code), panel? }. panel (#1481): { shown() → the card
+ * key the side panel shows, or null; open(spec, { run }) } — without it a card has no "Open in panel".
  */
 export function createThread(list, scroller, opts) {
   const nodes = new Map();          // key → { html, node }
   let msgs = [];
   let unseen = 0;
+  // The reader is at the newest message. While pinned, content that grows after it was drawn — an image loading, a
+  // preview card, the composer growing — keeps the view at the bottom (#1269); a reader who scrolled up is never moved.
+  // Only a move UP unpins: the browser's own scroll anchoring also fires scroll events when content grows (the view
+  // moves down or stays), and those must not count as the reader leaving the bottom. Reaching the bottom pins again.
+  let pinned = true;
+  let lastTop = 0;
   const cardRefresh = new WeakMap(); // card node → re-read availability (weak: a card that left takes its source with it)
   const tr = opts.t, trf = opts.tf;
   const stopIn = (node) => (P() ? P().stopIn(node) : []);
@@ -89,12 +96,15 @@ export function createThread(list, scroller, opts) {
       const run = el("button", "btn btn-sm pv-run", tr("chat.pvPreview")); run.type = "button";
       const stopB = el("button", "btn btn-sm pv-stop", tr("chat.pvStop")); stopB.type = "button"; stopB.hidden = true;
       const dl = el("button", "btn btn-sm btn-ghost pv-dl", tr("chat.pvDownload")); dl.type = "button";
+      const panel = opts.panel || null;
+      const toPanel = panel ? el("button", "btn btn-sm btn-ghost pv-open", tr("chat.pvOpenPanel")) : null;
+      if (toPanel) toPanel.type = "button";
       const menu = el("details", "pv-menu");
       const sum = el("summary", null, "⋯"); sum.title = tr("chat.pvMenu"); sum.setAttribute("aria-label", tr("chat.pvMenu"));
       const optB = el("button", "chip-btn pv-opt"); optB.type = "button";
       const neverB = el("button", "chip-btn pv-never"); neverB.type = "button";
       menu.append(sum, optB, neverB);
-      head.append(label, run, stopB, dl, menu);
+      head.append(label, run, stopB, ...(toPanel ? [toPanel] : []), dl, menu);
       const note = el("div", "pv-note");
       const banner = el("div", "pv-banner", P().BANNER); banner.hidden = true;
       const holder = el("div", "pv-holder");
@@ -103,16 +113,25 @@ export function createThread(list, scroller, opts) {
       const refresh = (reason) => {
         const a = P().availability();
         const going = state === "starting" || state === "running";
-        run.hidden = !a.ok || going;
+        const inPanel = !!panel && panel.shown() === key;   // #1481: the panel shows this block; the card points there
+        run.hidden = !a.ok || going || inPanel;
+        if (toPanel) toPanel.hidden = inPanel;
         stopB.hidden = !going;
         banner.hidden = !going;
-        note.textContent = reason != null ? reason : going ? (state === "starting" ? tr("chat.pvStarting") : "") : a.ok ? "" : a.reason;
+        note.textContent = reason != null ? reason : going ? (state === "starting" ? tr("chat.pvStarting") : "") : inPanel ? tr("chat.pvInPanel") : a.ok ? "" : a.reason;
         optB.textContent = P().optedIn() ? tr("chat.pvDisallow") : tr("chat.pvAllow");
         neverB.textContent = P().never() ? tr("chat.pvNeverUndo") : tr("chat.pvNever");
       };
       const ui = { state: (name, reason) => { state = name === "starting" || name === "running" ? name : "idle"; refresh(reason || null); } };
       run.onclick = () => P().start(key, holder, fence.code, ui);
       stopB.onclick = () => P().stop(key, "stopped", "");
+      // A running preview moves: it stops here and starts in the panel (the click that ran it). An idle one opens the
+      // panel with its own Preview to click.
+      if (toPanel) toPanel.onclick = () => {
+        const moving = P().running(key);
+        if (moving) P().stop(key, "stopped", "");
+        panel.open({ key, instance: x.instance, msgKey: msgKey(x), n, code: fence.code, sender: x.sender, ts: x.ts }, { run: moving });
+      };
       dl.onclick = () => opts.download(fence.code);
       optB.onclick = () => { menu.open = false; opts.setPreviewOptIn(!P().optedIn()); };
       neverB.onclick = () => { menu.open = false; P().setNever(!P().never()); refreshCards(); };
@@ -127,10 +146,15 @@ export function createThread(list, scroller, opts) {
 
   const nearBottom = () => R().isNearBottom(scroller.scrollTop, scroller.clientHeight, scroller.scrollHeight);
   function reportJump() { opts.onJump({ show: !nearBottom(), unseen }); }
+  function toBottom() { scroller.scrollTop = scroller.scrollHeight; pinned = true; lastTop = scroller.scrollTop; }
+  // Sizes change without a scroll event (layout after the render): follow them while pinned.
+  const resized = () => { if (pinned && !nearBottom()) toBottom(); reportJump(); };
+  const ro = typeof ResizeObserver === "function" ? new ResizeObserver(resized) : null;
+  if (ro) { ro.observe(list); ro.observe(scroller); }
 
   /** Draw `next` (this instance's messages). `restore`: the scroll position to return to (null = the bottom). */
   function render(next, renderOpts = {}) {
-    const stick = nearBottom();
+    const stick = pinned || nearBottom();
     msgs = next || [];
     if (!msgs.length) {
       for (const v of nodes.values()) stopIn(v.node);
@@ -159,19 +183,31 @@ export function createThread(list, scroller, opts) {
     }
     if ("restore" in renderOpts) {
       unseen = 0;
-      scroller.scrollTop = renderOpts.restore == null ? scroller.scrollHeight : renderOpts.restore;
-    } else if (stick) scroller.scrollTop = scroller.scrollHeight;
+      if (renderOpts.restore == null) toBottom();
+      else { scroller.scrollTop = renderOpts.restore; pinned = nearBottom(); lastTop = scroller.scrollTop; }
+    } else if (stick) toBottom();
     else unseen += added;
     reportJump();
   }
 
   function onScroll() {
-    const bottom = nearBottom();
+    const bottom = nearBottom(), top = scroller.scrollTop;
+    if (bottom) pinned = true;
+    else if (top < lastTop) pinned = false;
+    lastTop = top;
     if (bottom) unseen = 0;
     reportJump();
     return bottom ? null : scroller.scrollTop;
   }
-  function jumpLatest() { scroller.scrollTop = scroller.scrollHeight; unseen = 0; reportJump(); }
+  function jumpLatest() { toBottom(); unseen = 0; reportJump(); }
+  /** Show one message (the panel's "from …" link, #1481): scrolled into view and briefly marked. */
+  function reveal(key) {
+    const have = nodes.get(key); if (!have) return false;
+    if (typeof have.node.scrollIntoView === "function") have.node.scrollIntoView({ block: "center" });
+    have.node.classList.add("flash");
+    setTimeout(() => { have.node.classList.remove("flash"); }, 1600);
+    return true;
+  }
 
   async function copyFrom(button, text) {
     const ok = await opts.copyText(text);
@@ -201,9 +237,10 @@ export function createThread(list, scroller, opts) {
 
   /** The thread goes (the chat left, or another instance opened): every preview in it stops first. */
   function dispose() {
+    if (ro) ro.disconnect();
     if (P()) P().stopAll("leave");
     nodes.clear();
   }
 
-  return { render, onScroll, onClick, jumpLatest, refreshCards, dispose, nodes, get unseen() { return unseen; } };
+  return { render, onScroll, onClick, jumpLatest, reveal, refreshCards, dispose, nodes, get unseen() { return unseen; } };
 }

package/dist/ui/fleet-cache.js

@@ -0,0 +1,168 @@
+// #1468: Fleet → Cache (/ui/fleet/cache) — how often each instance's prompt cache expires between requests, what
+// that costs, and whether keeping it warm would pay off. Behind the session gate (/ui/js/), imported by the Fleet
+// panel. Read-only (Discord-first): it recommends, it changes nothing.
+//
+// One GET /ui/cache?window=… per opening or per choice of window (a person's navigation); no timer re-reads it
+// (#1374). While the server is still reading transcripts the page says so and offers Refresh.
+import { html } from "/assets/app-html.js";
+import { t, register } from "/assets/app-i18n.js";
+import { Empty } from "/assets/ui-states.js";
+import { Icon } from "/assets/ui-icons.js";
+
+register("cache", {
+  en: {
+    title: "Cache", w24h: "24 h", w7d: "7 days", w30d: "30 days", window: "Window",
+    fleetExpiry: "Expiry cost", fleetSaving: "Keep-warm would save", fleetRecommended: "Recommended", ofN: "{0} of {1}",
+    pricesNote: "List prices checked {0}.", quotaNote: "Subscriptions: Anthropic and OpenAI do not publish how cache reads weigh against a plan's quota, so savings are exact at list price and an estimate in quota terms.",
+    estimateNote: "Estimate: Codex does not record cache writes, so a write is taken as the request's uncached input.",
+    notPricedNote: "Some models are not in the price table; those instances are compared in input-price units.",
+    scanning: "Still reading transcripts — {0} left. Refresh to see more.", scanningFirst: "Reading transcripts for the first time — Refresh to see more.", refresh: "Refresh",
+    keepWarm: "Keep warm", leaveOff: "Leave off", estimate: "estimate", notPriced: "not priced",
+    requests: "Requests", pastTtl: "Past the TTL ({0})", expired: "Expired (rewrote)", rewritten: "Tokens rewritten",
+    expiryCost: "Expiry cost", share: "{0} of its cost", pings: "Keep-warm pings", pingsAfter: "{0} after its last request",
+    pingCost: "Ping cost", net: "Net with keep-warm", gaps: "Gaps between requests", ttlLine: "TTL {0}",
+    quiet: "Too little activity in this window to tell.",
+    neverExpired: "No gap outlasted the {0} cache.", survived: "{0} gaps outlasted the {1} TTL, but the cache was still there.",
+    onlyIdle: "No request ever came back to an expired cache: each session went quiet for good. Keep-warm would only send {0} pings nobody reads.",
+    saves: "Often idle past the {0} TTL and then used again: keep-warm would save {1} ({2} of the expiry cost).",
+    costsMore: "Keep-warm would send about {0} pings per expired request — it would cost {1} more than it saves.",
+    costsMoreUnits: "Keep-warm would send about {0} pings per expired request — it would cost more than it saves.",
+    unavailable: "Not available", creditBilled: "credit-billed; no cache data", unsupported: "no cache data from this CLI", noData: "no requests read yet",
+    shared: "shares its working directory with {0}; their transcripts cannot be told apart",
+    empty: "No instances", emptyHint: "Instances show here once the fleet has them.",
+    b0: "≤5m", b1: "≤30m", b2: "≤1h", b3: "≤2h", b4: "≤6h", b5: "≤24h", b6: ">24h", tokensUnit: "input-token equivalents",
+  },
+  "zh-TW": {
+    title: "快取", w24h: "24 小時", w7d: "7 天", w30d: "30 天", window: "期間",
+    fleetExpiry: "過期成本", fleetSaving: "保溫可省", fleetRecommended: "建議保溫", ofN: "{1} 個中的 {0} 個",
+    pricesNote: "牌價查證日期：{0}。", quotaNote: "訂閱方案：Anthropic 與 OpenAI 未公布快取讀取如何計入方案額度，因此節省金額以牌價計算為準，換算成額度則是估算。",
+    estimateNote: "估算：Codex 不記錄快取寫入，寫入量以該次請求未命中快取的輸入估算。",
+    notPricedNote: "有些模型不在價目表中，這些 instance 以「輸入價格單位」比較。",
+    scanning: "仍在讀取 transcript——還剩 {0}。重新整理可看到更多。", scanningFirst: "第一次讀取 transcript 中——重新整理可看到更多。", refresh: "重新整理",
+    keepWarm: "建議保溫", leaveOff: "不需保溫", estimate: "估算", notPriced: "未定價",
+    requests: "請求數", pastTtl: "超過 TTL（{0}）", expired: "已過期（重寫）", rewritten: "重寫的 token",
+    expiryCost: "過期成本", share: "占其成本 {0}", pings: "保溫 ping 次數", pingsAfter: "其中 {0} 次在最後一次請求之後",
+    pingCost: "ping 成本", net: "保溫後淨額", gaps: "請求間隔", ttlLine: "TTL {0}",
+    quiet: "這段期間活動太少，無法判斷。",
+    neverExpired: "沒有任何間隔超過 {0} 的快取時效。", survived: "有 {0} 個間隔超過 {1} TTL，但快取仍在。",
+    onlyIdle: "沒有任何請求在快取過期後回來使用：每個 session 閒置後就不再使用。保溫只會送出 {0} 次沒人讀的 ping。",
+    saves: "常閒置超過 {0} TTL 後又再使用：保溫可省 {1}（過期成本的 {2}）。",
+    costsMore: "每次過期約需送 {0} 次 ping——保溫的花費比省下的多 {1}。",
+    costsMoreUnits: "每次過期約需送 {0} 次 ping——保溫的花費比省下的多。",
+    unavailable: "不提供", creditBilled: "以 credit 計費，沒有快取資料", unsupported: "這個 CLI 沒有快取資料", noData: "尚未讀到任何請求",
+    shared: "與 {0} 共用工作目錄，無法分辨各自的 transcript",
+    empty: "沒有 instance", emptyHint: "fleet 有 instance 後會顯示在這裡。",
+    b0: "≤5分", b1: "≤30分", b2: "≤1時", b3: "≤2時", b4: "≤6時", b5: "≤24時", b6: ">24時", tokensUnit: "輸入 token 當量",
+  },
+});
+const tc = (k, ...v) => t(`cache.${k}`, ...v);
+
+export const CACHE_WINDOWS = ["24h", "7d", "30d"];
+const EDGES = [300, 1800, 3600, 7200, 21600, 86400];
+
+export function money(usd) {
+  if (!(usd > 0)) return "$0";
+  if (usd < 0.01) return "<$0.01";
+  return usd >= 100 ? `$${Math.round(usd).toLocaleString("en-US")}` : `$${usd.toFixed(2)}`;
+}
+export function tokens(n) {
+  if (n >= 1e9) return `${(n / 1e9).toFixed(1)}B`;
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${Math.round(n / 1e3)}k`;
+  return String(Math.round(n));
+}
+export function bytes(n) { return n >= 1e9 ? `${(n / 1e9).toFixed(1)} GB` : n >= 1e6 ? `${Math.round(n / 1e6)} MB` : `${Math.max(1, Math.round(n / 1e3))} KB`; }
+export function ttlText(sec) { return sec >= 3600 ? `${sec / 3600} h` : `${Math.round(sec / 60)} min`; }
+const pct = (x) => `${x >= 0.1 ? Math.round(x * 100) : (x * 100).toFixed(1)}%`;
+
+/** The one line under an instance's recommendation. */
+export function reasonText(a) {
+  const r = a.recommendation, ttl = ttlText(a.ttlSec);
+  if (r.reason === "quiet") return tc("quiet");
+  if (r.reason === "never_expired") {
+    if (a.sim.pastTtl) return tc("survived", a.sim.pastTtl, ttl);
+    return a.sim.tailPings ? tc("onlyIdle", a.sim.tailPings.toLocaleString("en-US")) : tc("neverExpired", ttl);
+  }
+  if (r.reason === "saves") return tc("saves", ttl, a.priced ? money(a.sim.net) : `${tokens(a.sim.net * 1e6)} ${tc("tokensUnit")}`, a.sim.expiryCost > 0 ? pct(a.sim.net / a.sim.expiryCost) : "—");
+  return a.priced ? tc("costsMore", r.pingsPerExpiry ?? 0, money(-a.sim.net)) : tc("costsMoreUnits", r.pingsPerExpiry ?? 0);
+}
+
+/** Gap histogram: one bar per bucket (square-root scale: a thousand short gaps must not flatten the few long ones). */
+function Histogram({ buckets, ttlSec }) {
+  const W = 280, H = 84, top = 14, base = 66, slot = W / buckets.length, bw = slot - 8;
+  const max = Math.max(1, ...buckets);
+  const ttlAt = EDGES.indexOf(ttlSec);
+  const label = `${tc("gaps")}: ${buckets.map((n, i) => `${tc(`b${i}`)} ${n}`).join(", ")}`;
+  return html`<svg class="ch-hist" viewBox=${`0 0 ${W} ${H}`} role="img" aria-label=${label} preserveAspectRatio="none">
+    ${buckets.map((n, i) => {
+      const h = n ? Math.max(2, Math.round((base - top) * Math.sqrt(n / max))) : 0;
+      const x = i * slot + 4;
+      return html`<g key=${i} class=${ttlAt >= 0 && i > ttlAt ? "ch-col past" : "ch-col"}>
+        <rect x=${x} y=${base - h} width=${bw} height=${h} rx="2" />
+        <text class="ch-n" x=${x + bw / 2} y=${base - h - 3} text-anchor="middle">${n || ""}</text>
+        <text class="ch-l" x=${x + bw / 2} y=${H - 4} text-anchor="middle">${tc(`b${i}`)}</text></g>`;
+    })}
+    ${ttlAt >= 0 ? html`<g class="ch-ttl"><line x1=${(ttlAt + 1) * slot} x2=${(ttlAt + 1) * slot} y1="4" y2=${base} />
+      <text x=${(ttlAt + 1) * slot + 3} y="11">${tc("ttlLine", ttlText(ttlSec))}</text></g>` : null}
+  </svg>`;
+}
+
+function Metric({ label, value, sub }) {
+  return html`<div class="ch-metric"><dt>${label}</dt><dd>${value}${sub ? html`<span class="ch-sub">${sub}</span>` : null}</dd></div>`;
+}
+
+function InstanceCard({ r }) {
+  const a = r.analysis, s = a.sim, $ = (v) => (a.priced ? money(v) : "—");
+  const on = a.recommendation.on;
+  return html`<article class=${`ch-card${on ? " on" : ""}`} aria-labelledby=${`ch-${r.name}`}>
+    <header class="ch-head">
+      <div class="ch-id"><h3 id=${`ch-${r.name}`} class="mono">${r.name}</h3>
+        <span class="ch-models">${r.backend}${a.models.length ? ` · ${a.models.join(", ")}` : ""}</span></div>
+      <span class=${`ch-rec${on ? " on" : ""}`}>${on ? tc("keepWarm") : tc("leaveOff")}</span>
+    </header>
+    <p class="ch-reason">${reasonText(a)}${a.estimate ? html` <span class="ch-tag">${tc("estimate")}</span>` : null}${a.priced ? null : html` <span class="ch-tag">${tc("notPriced")}</span>`}</p>
+    <dl class="ch-metrics">
+      <${Metric} label=${tc("requests")} value=${a.requests.toLocaleString("en-US")} />
+      <${Metric} label=${tc("pastTtl", ttlText(a.ttlSec))} value=${s.pastTtl} />
+      <${Metric} label=${tc("expired")} value=${s.expired} />
+      <${Metric} label=${tc("rewritten")} value=${tokens(s.rewriteTokens)} />
+      <${Metric} label=${tc("expiryCost")} value=${$(s.expiryCost)} sub=${a.share != null && a.priced && s.expiryCost > 0 ? tc("share", pct(a.share)) : null} />
+      <${Metric} label=${tc("pings")} value=${(s.pings + s.tailPings).toLocaleString("en-US")} sub=${s.tailPings ? tc("pingsAfter", s.tailPings) : null} />
+      <${Metric} label=${tc("pingCost")} value=${$(s.pingCost + s.tailCost)} />
+      <${Metric} label=${tc("net")} value=${a.priced ? `${s.net >= 0 ? "+" : "−"}${money(Math.abs(s.net))}` : "—"} />
+    </dl>
+    <${Histogram} buckets=${a.gapBuckets} ttlSec=${a.ttlSec} />
+  </article>`;
+}
+
+/** The tab's body. `report`: GET /ui/cache's answer; `win`/`setWin`: the window; `refresh`: read again. */
+export function CacheReport({ report, win, setWin, refresh }) {
+  const ok = report.instances.filter((r) => r.status === "ok")
+    .sort((x, y) => (y.analysis.priced - x.analysis.priced) || (y.analysis.sim.expiryCost - x.analysis.sim.expiryCost));
+  const rest = report.instances.filter((r) => r.status !== "ok");
+  const f = report.fleet;
+  const anyEstimate = ok.some((r) => r.analysis.estimate);
+  return html`<div class="ch">
+    <div class="ch-bar">
+      <div class="seg-inline" role="group" aria-label=${tc("window")}>${CACHE_WINDOWS.map((w) => html`<button key=${w} type="button"
+        class=${`btn btn-sm${w === win ? " btn-primary" : ""}`} aria-pressed=${w === win ? "true" : "false"} onClick=${() => setWin(w)}>${tc(`w${w}`)}</button>`)}</div>
+      ${!report.scanning.caughtUp || report.scanning.pendingBytes > 0 ? html`<div class="ch-scan" role="status"><span>${report.scanning.pendingBytes > 0
+        ? tc("scanning", bytes(report.scanning.pendingBytes)) : tc("scanningFirst")}</span>
+        <button type="button" class="btn btn-sm" onClick=${refresh}><${Icon} name="restart" size=${14} />${tc("refresh")}</button></div>` : null}
+    </div>
+    ${report.instances.length ? html`<section class="ch-fleet card">
+      <${Metric} label=${tc("fleetExpiry")} value=${money(f.expiryCost)} />
+      <${Metric} label=${tc("fleetSaving")} value=${money(f.saving)} />
+      <${Metric} label=${tc("fleetRecommended")} value=${tc("ofN", f.recommended, f.analysed)} />
+    </section>` : html`<${Empty} icon="chart" title=${tc("empty")} hint=${tc("emptyHint")} />`}
+    <div class="ch-notes note">
+      <p>${tc("pricesNote", report.pricesChecked)} ${tc("quotaNote")}</p>
+      ${anyEstimate ? html`<p>${tc("estimateNote")}</p>` : null}
+      ${f.priced ? null : html`<p>${tc("notPricedNote")}</p>`}
+    </div>
+    <div class="ch-cards">${ok.map((r) => html`<${InstanceCard} key=${r.name} r=${r} />`)}</div>
+    ${rest.length ? html`<ul class="rows ch-rest">${rest.map((r) => html`<li key=${r.name} class="row-item">
+      <span class="grow strong mono">${r.name}</span><span class="muted">${r.backend} · ${r.status === "no_data" ? tc("noData")
+        : `${tc("unavailable")} (${r.status === "credit_billed" ? tc("creditBilled") : r.status === "shared" ? tc("shared", (r.with || []).join(", ")) : tc("unsupported")})`}</span></li>`)}</ul>` : null}
+  </div>`;
+}

package/dist/ui/panel-chat.js

@@ -21,7 +21,9 @@ import { confirmDialog } from "/assets/ui-confirm.js";
 import "./chat-strings.js";
 import { confirmedWrite } from "./settings-confirm.js";
 import { createChatStore } from "./chat-store.js";
-import { createThread } from "./chat-thread.js";
+import { createThread, msgKey } from "./chat-thread.js";
+import { PreviewPanel, openPanel, panelStore, shownKey } from "./preview-panel.js";
+import { needsArgument, paletteFor, parseCommandLine } from "./chat-commands.js";
 import { installTour, refreshTourSpot, startTour } from "./chat-tour.js";
 
 const R = () => globalThis.AgendChatRender;
@@ -56,7 +58,7 @@ export async function setPreviewOptIn(on) {
 export function boot({ stream, boot: bootData, deps = {} }) {
   if (store) return store;
   store = createChatStore({
-    fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), ...deps,
+    fetch: (...a) => fetch(...a), toast, announce, t, setTimeout: (fn, ms) => setTimeout(fn, ms), confirm: confirmDialog, ...deps,
   });
   store.attach(stream);
   // #1306: what the server said about previews for this load. The page-wide message and storage listeners this adds
@@ -146,7 +148,7 @@ function NotFound({ name }) {
 function ChatView({ name, inst, lease, exec, awaiting }) {
   const [dialog, setDialog] = useState(null);       // "details" | "delete" | null
   const [wrap, setWrap] = useState(codeWrap);
-  const view = useRef(null);
+  const view = useRef(null), split = useRef(null), thread = useRef(null);
   useEffect(() => { wrapListeners.add(setWrap); return () => wrapListeners.delete(setWrap); }, []);
   // First visit to this instance's chat on this page: its history (a navigation — it counts as use). Back again: nothing.
   useEffect(() => { store.openHistory(name, lease); }, [name]);
@@ -189,11 +191,21 @@ function ChatView({ name, inst, lease, exec, awaiting }) {
     { key: "delete", label: t("chat.delete"), icon: "trash", danger: true, onSelect: () => setDialog("delete") },
   ];
   const cls = statusClass(inst, exec, awaiting);
-  const sub = html`<span class="status"><span class=${`dot ${cls}`} aria-hidden="true"></span>${statusLabel(inst, exec, awaiting)}</span>`;
+  // #1269 quick actions: the model and effort it runs, each a way to /model or /effort (the same pick list).
+  const pick = (command) => store.runCommand(name, command, "", { alive: () => lease.current() });
+  const sub = html`<span class="status"><span class=${`dot ${cls}`} aria-hidden="true"></span>${statusLabel(inst, exec, awaiting)}</span>
+    ${inst.model ? html`<button type="button" class="hd-chip" title=${t("chat.chipModel", inst.model)} aria-label=${t("chat.chipModel", inst.model)} onClick=${() => pick("model")}>${inst.model}</button>` : null}
+    ${inst.effort ? html`<button type="button" class="hd-chip" title=${t("chat.chipEffort", inst.effort)} aria-label=${t("chat.chipEffort", inst.effort)} onClick=${() => pick("effort")}>${inst.effort}</button>` : null}`;
   return html`<div class=${`panel p-chat${wrap ? " wrap-code" : ""}`} ref=${view}>
     <${PanelHeader} title=${name} sub=${sub}><${Menu} items=${items} label=${t("app.more")} /></${PanelHeader}>
-    <${Thread} name=${name} />
-    <${Dock} name=${name} lease=${lease} exec=${exec} awaiting=${awaiting} />
+    <div class="chat-split" ref=${split}>
+      <div class="chat-main">
+        <${Thread} name=${name} th=${thread} />
+        <${Dock} name=${name} inst=${inst} lease=${lease} exec=${exec} awaiting=${awaiting} />
+      </div>
+      <${PreviewPanel} name=${name} split=${split} msgs=${() => store.state.msgs[name] || []} subscribe=${(fn) => store.subscribe(fn)}
+        keyOf=${msgKey} reveal=${(k) => thread.current && thread.current.reveal(k)} download=${downloadHtml} />
+    </div>
     <div class="drop-overlay" aria-hidden="true"><div class="drop-card"><${Icon} name="attach" size=${32} /><span>${t("chat.dropHere")}</span></div></div>
     ${dialog === "details" ? html`<${DetailsDialog} name=${name} onClose=${() => setDialog(null)} />` : null}
     ${dialog === "delete" ? html`<${DeleteDialog} name=${name} onClose=${() => setDialog(null)} />` : null}
@@ -201,14 +213,15 @@ function ChatView({ name, inst, lease, exec, awaiting }) {
 }
 
 /** The thread: Preact owns the elements, the keyed renderer owns what is inside the list (chat-thread.js). */
-function Thread({ name }) {
-  const scroller = useRef(null), list = useRef(null), th = useRef(null);
+function Thread({ name, th }) {
+  const scroller = useRef(null), list = useRef(null);
   const [jump, setJump] = useState({ show: false, unseen: 0 });
   const [empty, setEmpty] = useState(false);
   useLayoutEffect(() => {
     const thread = createThread(list.current, scroller.current, {
       t, tf: t, isUser: (x) => store.isUser(x, name), onJump: setJump, onEmpty: setEmpty,
       setPreviewOptIn, copyText, download: downloadHtml, toggleWrap,
+      panel: { shown: shownKey, open: (spec, o) => openPanel(spec, o) },   // #1481
     });
     th.current = thread;
     thread.render(store.state.msgs[name] || [], { restore: store.state.scrollMemo[name] ?? null });
@@ -218,12 +231,13 @@ function Thread({ name }) {
       else if (kind === "sent") thread.jumpLatest();
     });
     const offPv = P() ? P().onChange(() => thread.refreshCards()) : () => {};
+    const offPanel = panelStore.subscribe(() => thread.refreshCards());   // a card shows whether the panel has its block
     const onScroll = () => { store.state.scrollMemo[name] = thread.onScroll(); };
     const sc = scroller.current, ls = list.current;
     sc.addEventListener("scroll", onScroll, { passive: true });
     ls.addEventListener("click", thread.onClick);
     return () => {
-      off(); offPv();
+      off(); offPv(); offPanel();
       sc.removeEventListener("scroll", onScroll);
       ls.removeEventListener("click", thread.onClick);
       thread.dispose();                     // the whole thread goes: every preview in it stops first
@@ -239,20 +253,51 @@ function Thread({ name }) {
 }
 
 /** Everything under the thread: prompts, the working line, a failed send, files waiting, and the composer. */
-function Dock({ name, lease, exec, awaiting }) {
+function Dock({ name, inst, lease, exec, awaiting }) {
   useChatTick(name, ["state"]);
   const s = store.state;
   return html`<div class="dock"><div class="dock-col">
     <${Prompts} name=${name} />
     <${WorkBar} name=${name} lease=${lease} exec=${exec} awaiting=${awaiting} />
+    <${CommandCard} name=${name} lease=${lease} />
+    <${QuickActions} name=${name} inst=${inst} lease=${lease} />
     ${s.failedSends[name] ? html`<div class="failed-send" role="alert"><span>${t("chat.notSent")}</span><span class="txt">${s.failedSends[name]}</span>
       <button type="button" class="btn btn-primary btn-sm" onClick=${() => store.putBack(name)}>${t("chat.putBack")}</button>
       <button type="button" class="btn btn-sm" onClick=${() => store.discardFailed(name)}>${t("chat.discard")}</button></div>` : null}
-    <${Composer} name=${name} busy=${R().isBusy(exec)} />
+    <${Composer} name=${name} lease=${lease} busy=${R().isBusy(exec)} />
     <p class="hint">${t("chat.composerHint")}</p>
   </div></div>`;
 }
 
+/** #1269: what the last chat command answered — its text, why it was refused, or a list to choose from. */
+function CommandCard({ name, lease }) {
+  const c = store.state.commands[name];
+  if (!c) return null;
+  const run = (args) => store.runCommand(name, c.command, args, { alive: () => lease.current() });
+  return html`<div class=${`cmd-card${c.error ? " bad" : ""}`} role=${c.error ? "alert" : "status"}>
+    <div class="cmd-head"><span class="cmd-name mono">/${c.command}</span>
+      ${c.busy ? html`<span class="wait">${t("chat.cmdRunning", c.command)}</span>` : html`<button type="button" class="icon-btn" title=${t("chat.cmdDismiss")}
+        aria-label=${t("chat.cmdDismiss")} onClick=${() => store.dismissCommand(name)}><${Icon} name="close" size=${14} /></button>`}</div>
+    ${c.error ? html`<p class="cmd-text">${c.error}</p>` : null}
+    ${c.text ? html`<pre class="cmd-text">${c.text}</pre>` : null}
+    ${c.choices ? html`<div class="cmd-choices" role="group" aria-label=${t("chat.cmdChoose")}>${c.choices.options.map((o) => html`<button key=${o.id} type="button"
+      class=${`btn btn-sm${o.id === c.choices.current ? " current" : ""}`} aria-current=${o.id === c.choices.current ? "true" : undefined} onClick=${() => run(o.id)}>${o.label}</button>`)}</div>` : null}
+  </div>`;
+}
+
+/** #1269 quick actions: Compact and Clear… once the instance's context is 70% used (from the status it already has). */
+function QuickActions({ name, inst, lease }) {
+  const pct = inst && typeof inst.context_pct === "number" ? Math.round(inst.context_pct) : null;
+  if (pct == null || pct < 70) return null;
+  const busy = !!(store.state.commands[name] && store.state.commands[name].busy);
+  const run = (command) => store.runCommand(name, command, "", { alive: () => lease.current() });
+  return html`<div class="quick-actions" role="group" aria-label=${t("chat.chipContext", pct)}>
+    <span class="qa-ctx">${t("chat.chipContext", pct)}</span>
+    <button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => run("compact")}>${t("chat.chipCompact")}</button>
+    <button type="button" class="btn btn-sm" disabled=${busy} onClick=${() => run("clear")}>${t("chat.chipClear")}</button>
+  </div>`;
+}
+
 function Prompts({ name }) {
   const list = store.promptsFor(name);
   if (!list.length) return null;
@@ -281,20 +326,53 @@ function WorkBar({ name, lease, exec, awaiting }) {
       : html`<span class="elapsed" title=${t("chat.elapsedTitle")} aria-hidden="true">${since == null ? "" : R().formatElapsed(performance.now() - since)}</span>`}</div>`;
 }
 
-function Composer({ name, busy }) {
+function Composer({ name, lease, busy }) {
   const s = store.state;
   const input = useRef(null), fileIn = useRef(null);
   const [, tick] = useState(0);
+  const [sel, setSel] = useState(0);
+  const [closedFor, setClosedFor] = useState(null);    // the draft the palette was closed on (Esc); it opens again on change
   const value = s.drafts[name] || "";
   const files = s.pendingFiles[name] || [];
   const content = !!value.trim() || files.length > 0;
+  // A file waiting: what goes is a message with its file, never a command (no palette, no command line).
+  const palette = files.length || closedFor === value ? null : paletteFor(value);
+  const pick = palette && palette.length ? palette[Math.min(sel, palette.length - 1)] : null;
   // Grow with the text, up to a limit: set through the CSSOM, never a style attribute (#1300).
   useLayoutEffect(() => { const el = input.current; if (!el) return; el.style.height = "auto"; el.style.height = `${Math.min(el.scrollHeight, 240)}px`; }, [value]);
   useEffect(() => { if (input.current) input.current.focus(); }, [name]);
   useEffect(() => { refreshTourSpot(); });
-  const send = () => store.send(name);
-  const onKeyDown = (e) => { if (R().composerKey(e) === "send") { e.preventDefault(); send(); } };
-  const onInput = (e) => { store.setDraft(name, e.target.value); tick(n => n + 1); };
+  const setValue = (v) => { store.setDraft(name, v); setSel(0); tick(n => n + 1); };
+  // #1269: a command line runs the command (POST /ui/command); anything else — "/" included — is sent as before.
+  // The draft is consumed only by a command that starts: one still out keeps the new line in the composer (#1476 review).
+  const runLine = (cmd) => {
+    if (!store.commandFree(name)) return;
+    setValue("");
+    store.runCommand(name, cmd.command, cmd.args, { alive: () => lease.current() });
+  };
+  const complete = (c) => setValue(`/${c.name}${c.arg ? " " : ""}`);
+  const submit = () => {
+    if (pick) {
+      if (value === `/${pick.name}` && !needsArgument(pick.name)) runLine({ command: pick.name, args: "" });
+      else complete(pick);
+      return;
+    }
+    const cmd = files.length ? null : parseCommandLine(value);
+    if (cmd && needsArgument(cmd.command) && !cmd.args) { setValue(`/${cmd.command} `); return; }
+    if (cmd) { runLine(cmd); return; }
+    store.send(name);
+  };
+  const onKeyDown = (e) => {
+    if (palette && palette.length && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      e.preventDefault();
+      setSel((n) => (Math.min(n, palette.length - 1) + (e.key === "ArrowDown" ? 1 : palette.length - 1)) % palette.length);
+      return;
+    }
+    if (pick && e.key === "Tab" && !e.shiftKey) { e.preventDefault(); complete(pick); return; }
+    if (palette && e.key === "Escape" && !e.isComposing) { e.preventDefault(); setClosedFor(value); return; }
+    if (R().composerKey(e) === "send") { e.preventDefault(); submit(); }
+  };
+  const onInput = (e) => { setValue(e.target.value); };
   // Files in a paste are attached; a very long text paste goes as a text file — only once it is really attached.
   const onPaste = (e) => {
     const list = e.clipboardData && e.clipboardData.files;
@@ -302,18 +380,26 @@ function Composer({ name, busy }) {
     if (list && list.length) { store.addFiles(name, list); if (!text) e.preventDefault(); return; }
     if (R().isLongPaste(text) && store.attachPastedText(name, text)) e.preventDefault();
   };
+  const optId = (c) => `cmd-${c.name}`;
   return html`<div class="composer-box">
+    ${palette ? html`<ul class="cmd-palette" id="cmdPalette" role="listbox" aria-label=${t("chat.cmdCommands")}>
+      ${palette.length ? palette.map((c) => html`<li key=${c.name} id=${optId(c)} role="option" aria-selected=${c === pick ? "true" : "false"}
+          class=${c === pick ? "on" : ""} onMouseDown=${(e) => { e.preventDefault(); complete(c); }}>
+          <span class="cmd-name mono">/${c.name}${c.arg ? html` <span class="cmd-arg">${c.arg}</span>` : null}</span><span class="cmd-desc">${t(`chat.cmd_${c.name}`)}</span></li>`)
+        : html`<li class="cmd-none" role="option" aria-selected="false">${t("chat.cmdNotCommand")}</li>`}
+    </ul>` : null}
     ${files.length ? html`<div class="pending-files">${files.map((f, i) => html`<${FileChip} key=${`${f.name}-${i}`} f=${f} i=${i} name=${name} />`)}</div>` : null}
     <div class="composer">
       <button id="attachBtn" type="button" class="icon-btn" title=${t("chat.attachTitle")} aria-label=${t("chat.attachTitle")} onClick=${() => fileIn.current && fileIn.current.click()}><${Icon} name="attach" /></button>
       <input ref=${fileIn} type="file" multiple hidden accept="image/png,image/jpeg,image/gif,image/webp,application/pdf,text/*,.md,.csv,.json,.log,.yaml,.yml"
         onChange=${(e) => { store.addFiles(name, e.target.files); e.target.value = ""; }} />
       <textarea id="msgIn" ref=${input} rows="1" value=${value} placeholder=${t("chat.composerPlaceholder", name)} aria-label=${t("chat.composerPlaceholder", name)}
-        autocomplete="off" onInput=${onInput} onKeyDown=${onKeyDown} onPaste=${onPaste}></textarea>
+        autocomplete="off" aria-controls=${palette ? "cmdPalette" : undefined} aria-expanded=${palette ? "true" : "false"}
+        aria-activedescendant=${pick ? optId(pick) : undefined} onInput=${onInput} onKeyDown=${onKeyDown} onPaste=${onPaste}></textarea>
       <button id="stopBtn" type="button" class="btn btn-stop" hidden=${!busy} title=${t("chat.stopReplyTitle")}
-        disabled=${!!s.cancelling[name]} onClick=${() => store.cancelReply(name)}><${Icon} name="stop" size=${14} />${t("chat.stopReply")}</button>
+        disabled=${!!s.cancelling[name]} onClick=${() => store.cancelReply(name)}><${Icon} name="stop" size=${14} /><span class="stop-label">${t("chat.stopReply")}</span></button>
       <button id="sendBtn" type="button" class="btn btn-primary btn-send" hidden=${busy && !content} disabled=${!content || !!s.sending[name]}
-        aria-label=${t("chat.send")} title=${t("chat.send")} onClick=${send}><${Icon} name="send" size=${16} /><span class="send-label">${t("chat.send")}</span></button>
+        aria-label=${t("chat.send")} title=${t("chat.send")} onClick=${submit}><${Icon} name="send" size=${16} /><span class="send-label">${t("chat.send")}</span></button>
     </div></div>`;
 }