@songsid/agend 2.2.0-beta.7 → 2.2.0-beta.8

package/dist/ui/panel-settings.js

@@ -718,13 +718,14 @@ function WebSection({ ctx, staged }) {
   const overPublicLink = globalThis.document?.body?.dataset?.publicLink === "1";
   const original = useMemo(() => ({
     echo: web.echo_to_channel ?? true,
+    log: web.log_tab === true,                                                  // #1218: off by default
     pub: { allow_public: (web.public_link && web.public_link.allow_public) ?? true, ttl_minutes: (web.public_link && web.public_link.ttl_minutes) ?? 120, protocol: (web.public_link && web.public_link.protocol) ?? "http2" },
     session: { absolute_hours: local.absolute_hours ?? null, idle_hours: local.idle_hours ?? null },
     terminal: { enabled: term.enabled ?? null, ttl_minutes: term.ttl_minutes ?? null },
   }), []);
   const text = (v) => (v === null || v === undefined ? "" : String(v));
   const [f, setF] = useState(() => ({
-    echo: original.echo, pub: original.pub.allow_public, ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol,
+    echo: original.echo, log: original.log, pub: original.pub.allow_public, ttl: String(original.pub.ttl_minutes), protocol: original.pub.protocol,
     abs: text(original.session.absolute_hours), idle: text(original.session.idle_hours),
     termOn: original.terminal.enabled !== false, termTtl: text(original.terminal.ttl_minutes),
   }));
@@ -752,12 +753,14 @@ function WebSection({ ctx, staged }) {
       ttl_minutes: value(f.termTtl) }, original.terminal);
     const body = {
       ...(f.echo !== original.echo ? { echo_to_channel: f.echo } : {}),
+      ...(f.log !== original.log ? { log_tab: f.log } : {}),
       ...(Object.keys(publicPatch).length ? { public_link: publicPatch } : {}),
       ...(Object.keys(sessionPatch).length ? { session: { local: sessionPatch } } : {}),
       ...(Object.keys(terminalPatch).length ? { web_terminal: terminalPatch } : {}),
     };
     const fields = [
       ...(body.echo_to_channel !== undefined ? ["web.echo_to_channel"] : []),
+      ...(body.log_tab !== undefined ? ["web.log_tab"] : []),
       ...Object.keys(publicPatch).map((k) => `web.public_link.${k}`),
       ...Object.keys(sessionPatch).map((k) => `web.session.local.${k}`),
       ...Object.keys(terminalPatch).map((k) => `web_terminal.${k}`),
@@ -797,6 +800,8 @@ function WebSection({ ctx, staged }) {
     <section class="card"><h3>${tn("webChat")}</h3>
       <label class="check"><input id="webEchoToChannel" type="checkbox" checked=${f.echo} onChange=${(e) => set("echo")(e.target.checked)} /><span>${tn("webEcho")}</span><${Impact} schema=${schema} field="web.echo_to_channel" /></label>
       <p class="note">${tn("webEchoHint")}</p>
+      <label class="check"><input id="webLogTab" type="checkbox" checked=${f.log} onChange=${(e) => set("log")(e.target.checked)} /><span>${tn("webLogTab")}</span><${Impact} schema=${schema} field="web.log_tab" /></label>
+      <p class="note">${tn("webLogTabHint")}</p>
       <label class="check"><input id="publicWebLink" type="checkbox" checked=${f.pub} onChange=${(e) => set("pub")(e.target.checked)} /><span>${tn("publicLink")}</span><${Impact} schema=${schema} field="web.public_link.allow_public" /></label>
       <p class="note">${tn("publicLinkHint")}</p>
       <div class="grid2">

package/dist/ui/settings-strings.js

@@ -15,6 +15,7 @@ register("settings", {
     publicProtocol: "Tunnel protocol",
     webEcho: "Web echo",
     webEchoHint: "Copies web messages to the bound Telegram or Discord topic. ClassicBot rooms are excluded.",
+    webLogTab: "Log tab: each agent's steps", webLogTabHint: "Shows each instance's prompts, replies, tool calls and results, and fleet events in its Log tab, read from its own transcript only while the tab is open. Secret values are masked. Also over the public link. Turning it on waits for a fleet admin's confirmation.",
     general: "General Settings",
     advanced: "Advanced",
     new: "New",
@@ -405,6 +406,7 @@ register("settings", {
     publicProtocol: "Tunnel 協定",
     webEcho: "Web 同步",
     webEchoHint: "將網頁訊息複製到綁定的 Telegram 或 Discord 主題，不包含 ClassicBot 群組。",
+    webLogTab: "紀錄分頁：每個 agent 的步驟", webLogTabHint: "在每個 instance 的「紀錄」分頁顯示提示、回覆、工具呼叫與結果，以及 fleet 事件；只在分頁開著時從它自己的對話紀錄讀取。機密值會遮蔽。公開連結也看得到。開啟需 fleet admin 確認。",
     general: "一般設定",
     advanced: "進階",
     new: "新增",

package/dist/ui/shared/app-i18n.js

@@ -66,7 +66,7 @@ register("app", {
     names: "Names", namesNickname: "Nickname first", namesInstance: "Real name first",
     theme: "Theme", themeSystem: "System", themeLight: "Light", themeDark: "Dark", language: "Language",
     previews: "Allow HTML previews", tour: "Tour", tourTitle: "Show the web chat tour again",
-    needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", instanceViews: "Views of {0}",
+    needsYou: "needs you", approxNote: "Read from the terminal, so approximate", chat: "Chat", details: "Details", log: "Log", instanceViews: "Views of {0}",
     textSize: "Text size: {0}", textSize_s: "S", textSize_m: "M", textSize_l: "L", textSize_fit: "Fit", usage: "Usage", usageHide: "Hide usage",
     statusRunning: "running", statusStopped: "stopped", statusPaused: "paused", statusCrashed: "crashed", statusWorking: "working", statusStuck: "looks stuck", statusIdle: "idle",
     connReconnecting: "Can't reach AgEnD — it may be restarting. Reconnecting…", connReconnectingIn: "Can't reach AgEnD — it may be restarting. Trying again in {0} s.",
@@ -97,7 +97,7 @@ register("app", {
     names: "名稱", namesNickname: "暱稱優先", namesInstance: "實際名稱優先",
     theme: "主題", themeSystem: "跟隨系統", themeLight: "淺色", themeDark: "深色", language: "語言",
     previews: "允許預覽 HTML", tour: "導覽", tourTitle: "再看一次網頁聊天導覽",
-    needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", instanceViews: "{0} 的檢視",
+    needsYou: "等你回應", approxNote: "從終端畫面判讀，僅供參考", chat: "聊天", details: "詳細資訊", log: "紀錄", instanceViews: "{0} 的檢視",
     textSize: "字級：{0}", textSize_s: "小", textSize_m: "中", textSize_l: "大", textSize_fit: "剛好填滿", usage: "用量", usageHide: "隱藏用量",
     statusRunning: "執行中", statusStopped: "已停止", statusPaused: "已暫停", statusCrashed: "已當掉", statusWorking: "工作中", statusStuck: "似乎卡住", statusIdle: "閒置",
     connReconnecting: "連不上 AgEnD——可能正在重新啟動。正在重新連線…", connReconnectingIn: "連不上 AgEnD——可能正在重新啟動。{0} 秒後再試。",

package/dist/ui/shared/app-route.js

@@ -13,7 +13,7 @@ export function isSafeInstanceName(name) {
 }
 
 /**
- * A path → the route it names: { panel: "chat" | "view" | "details", instance } | { panel: "fleet", tab } |
+ * A path → the route it names: { panel: "chat" | "view" | "details" | "log", instance } | { panel: "fleet", tab } |
  * { panel: "settings", section } | null (not a page of the app: a full load). A malformed name is null too; the
  * server answers it 400.
  */
@@ -28,6 +28,9 @@ export function parseRoute(pathname) {
   if (m) return FLEET_TABS.includes(m[1]) ? { panel: "fleet", tab: m[1] } : null;
   m = /^\/ui\/chat\/([^/]+)$/.exec(pathname);
   if (m) return named("chat", m[1]);
+  // #1218: one instance's Log.
+  m = /^\/ui\/log\/([^/]+)$/.exec(pathname);
+  if (m) return named("log", m[1]);
   if (pathname === "/view") return { panel: "view", instance: null };
   m = /^\/view\/([^/]+)$/.exec(pathname);
   if (m) return named("view", m[1]);
@@ -45,6 +48,7 @@ function named(panel, segment) {
 export function chatPath(instance) { return `/ui/chat/${encodeURIComponent(instance)}`; }
 export function viewPath(instance) { return instance ? `/view/${encodeURIComponent(instance)}` : "/view"; }
 export function detailsPath(instance) { return `/ui/fleet/agent/${encodeURIComponent(instance)}`; }
+export function logPath(instance) { return `/ui/log/${encodeURIComponent(instance)}`; }
 export function fleetPath(tab) { return tab && tab !== "tasks" ? `/ui/fleet/${tab}` : "/ui/fleet"; }
 export const NEEDS_PATH = "/ui/needs";
 export function settingsPath(section) { return section && section !== "agents" ? `/settings/${section}` : "/settings"; }
@@ -55,6 +59,7 @@ export function routePath(route) {
   if (route.panel === "needs") return NEEDS_PATH;
   if (route.panel === "view") return viewPath(route.instance);
   if (route.panel === "details") return detailsPath(route.instance);
+  if (route.panel === "log") return logPath(route.instance);
   return route.instance ? chatPath(route.instance) : "/ui";
 }
 /** One string per route: a change of it is a new navigation (a new lease for the panel, §4). */

package/dist/ui/shared/app-shell.js

@@ -348,11 +348,11 @@ export function PanelHeader({ title, sub, children, headingRef, nav }) {
 }
 
 /**
- * #1523 N2: the instance a page is about — Chat, View or Details of it — or null. With one open, Fleet goes to its
+ * #1523 N2: the instance a page is about — Chat, View, Log (#1218) or Details of it — or null. With one open, Fleet goes to its
  * Details (the user's complaint: Fleet always landed on Tasks), and Chat and View keep it; with none, as before.
  */
 export function openInstanceOf(route) {
-  return route && (route.panel === "chat" || route.panel === "view" || route.panel === "details") && route.instance ? route.instance : null;
+  return route && (route.panel === "chat" || route.panel === "view" || route.panel === "log" || route.panel === "details") && route.instance ? route.instance : null;
 }
 
 function BottomTabs({ route, viewOnly }) {
@@ -366,7 +366,7 @@ function BottomTabs({ route, viewOnly }) {
     <${Icon} name=${icon} size=${20} /><span>${label}</span>${badge ? html`<span class="tab-badge" aria-label=${badgeLabel || t("app.needsYou")}>${badge}</span>` : null}</a>`;
   let lastView = null;
   try { lastView = localStorage.getItem("agend_last_view"); } catch { /* none */ }
-  const viewHref = route && (route.panel === "view" || route.panel === "details") && route.instance ? viewPath(route.instance) : viewPath(lastView);
+  const viewHref = route && (route.panel === "view" || route.panel === "log" || route.panel === "details") && route.instance ? viewPath(route.instance) : viewPath(lastView);
   if (viewOnly) {
     return html`<nav class="tabs" aria-label=${t("app.menu")}>
       ${tab(viewHref, "view", t("app.view"), route && route.panel === "view")}

package/dist/ui/shared/app-stream.js

@@ -29,7 +29,8 @@
 // - a 401 is the session ending: nothing is retried (agend-auth.js says so).
 // - suspend()/resume(): the page is leaving (pagehide) / came back from the back-forward cache.
 
-const EVENTS = ["status", "message", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons"];
+// #1218: steps_tick — an instance's transcript moved while a Log watches it (SSE only: a poll page asks the Log itself).
+const EVENTS = ["status", "message", "delivery", "deliveries", "prompt", "prompts", "prompt_resolved", "activity", "needs", "reply_buttons", "steps_tick"];
 const MAX_HELD = 1000;                    // live events held during one catch-up read; more → read again afterwards
 const RETRY_DELAYS = [1000, 2000, 4000];  // after the first failed catch-up read; then it waits for Retry
 const POLL_LIMIT_MS = 10000;              // a poll that has not answered by then counts as failed

package/dist/ui/shared/app.css

@@ -208,7 +208,7 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 :root { --text-scale: 1; }
 :root[data-text-size="s"] { --text-scale: 0.9; }
 :root[data-text-size="l"] { --text-scale: 1.15; }
-.thread, .p-details .panel-body, .p-fleet .panel-body {
+.thread, .p-details .panel-body, .p-fleet .panel-body, .p-log .panel-body {
   --fs-xs: calc(12px * var(--text-scale)); --lh-xs: calc(16px * var(--text-scale));
   --fs-sm: calc(13px * var(--text-scale)); --lh-sm: calc(18px * var(--text-scale));
   --fs-md: calc(15px * var(--text-scale)); --lh-md: calc(24px * var(--text-scale));
@@ -217,10 +217,40 @@ html:has(.shell), html:has(.shell) body { overflow: hidden; }
 }
 /* #1523 N2: Details. */
 .p-details .d-tags { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
+/* #1218: an instance's Log — one column of steps, newest at the bottom; the filter bar above it. Classes only (#1300). */
+.p-log .log-bar { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--border); flex: none; }
+.p-log .log-bar .chip-btn.on { color: var(--text); background: var(--surface-2); font-weight: var(--fw-semibold); }
+.p-log .log-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }
+.p-log .log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
+.p-log .log-item { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); min-width: 0; overflow-wrap: anywhere; }
+.p-log .log-item.turn-start { margin-top: var(--s-4); }
+.p-log .log-item.k-user { background: var(--user-bubble); }
+.p-log .log-item.k-turn_end, .p-log .log-item.k-state, .p-log .log-item.k-event { background: transparent; color: var(--text-3); padding-block: 2px; font-size: var(--fs-sm); }
+.p-log .log-item.k-error, .p-log .log-item.s-failed { border-left: 3px solid var(--danger); }
+.p-log .log-head { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; }
+.p-log .log-icon { flex: none; }
+.p-log .log-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.p-log .log-cat { font-weight: var(--fw-semibold); }
+.p-log .log-subject { font-size: var(--fs-sm); }
+.p-log .log-time { flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
+.p-log .log-status { flex: none; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
+.p-log .log-status.done { color: var(--ok); }
+.p-log .log-status.failed { color: var(--danger); }
+.p-log .log-status.interrupted { color: var(--warn, var(--text-3)); }
+.p-log .log-status .spinner { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
+.p-log .log-repeat { flex: none; font-size: var(--fs-xs); padding: 0 6px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); }
+.p-log .log-text { white-space: pre-wrap; margin-top: var(--s-1); font-size: var(--fs-sm); }
+.p-log .log-text.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
+.p-log .log-text.folded { max-height: 10.5em; overflow: hidden; mask-image: linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); }
+.p-log .link-btn { border: 0; background: none; padding: 2px 0; color: var(--accent); cursor: pointer; font-size: var(--fs-xs); }
+.p-log .log-detail { margin-top: var(--s-1); display: flex; flex-direction: column; gap: var(--s-2); }
+.p-log .log-sec-h { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
+.p-log .log-older, .p-log .log-start { text-align: center; margin: var(--s-2) 0; }
+.p-log .log-off { padding: var(--s-6) var(--s-4); }
 .p-details .d-edit { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
 @media (max-width: 899px) {
   .panel-head:has(.inst-switch) { flex-wrap: wrap; }
-  .inst-switch.seg { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 0 var(--s-1); }
+  .inst-switch.seg { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 0 var(--s-1); }
   .inst-switch .seg-item { justify-content: center; border-radius: var(--r-sm); }
 }
 .panel-body { flex: 1; min-height: 0; overflow-y: auto; }
@@ -655,11 +685,16 @@ body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-s
 .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 group of checkboxes under its header (#1700). */
-.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); }
+/* #1776: the "N / M" count is on the headers' row, at its right end — not a row of its own. The headers (and an open
+   group's list, the reset) wrap in their own box beside it, so a filter's summary or a narrow sidebar moves a header
+   down, never the count; the count is as tall as a header, so the row does not grow. */
+.nav-facets { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-1) 0; }
+.nav-facet-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-2); flex: 1 1 auto; min-width: 0; }
+.nav-facets .nav-shown { flex: none; margin: 0 0 0 auto; padding: 2px 0; white-space: nowrap; }
+.nav-facet { font-size: var(--fs-xs); color: var(--text-2); min-width: 0; max-width: 100%; }
 /* #1700: a facet group's header — the whole row toggles its list; folded with a filter set, a short summary. */
 .nav-facet-head { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; padding: 2px var(--s-2); border: 0; border-radius: var(--r-sm);
-  background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
+  background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; white-space: nowrap; }
 .nav-facet-head:hover { background: var(--hover); }
 .nav-facet-head:focus-visible { outline: 2px solid var(--accent); }
 .nav-facet-head .caret { color: var(--text-3); flex: none; }

package/dist/ui/shared/app.js

@@ -51,6 +51,8 @@ if (mode === "full") {
   stream.on("hydration", (hydration) => appStore.set({ hydration }));
   appStore.set({ retryHydration: () => stream.catchUp() });
   stream.on("needs", (d) => appStore.set({ needs: Array.isArray(d && d.items) ? d.items : [] }));
+  // #1218: a panel's way to hear one stream event (the Log's steps_tick), unsubscribed by its lease.
+  appStore.set({ streamOn: (name, fn) => stream.on(name, fn) });
   appStore.set({ connection: stream.connection() });
 
   // The chat's store must hear every message from the first frame, whatever panel is open: its module boots once,
@@ -67,6 +69,7 @@ if (mode === "full") {
   const loadSettings = retryable((a) => import(retryUrl("/ui/js/panel-settings.js", a)));
   const loadNeeds = retryable((a) => import(retryUrl("/ui/js/panel-needs.js", a)));
   const loadDetails = retryable((a) => import(retryUrl("/ui/js/panel-details.js", a)));
+  const loadLog = retryable((a) => import(retryUrl("/ui/js/panel-log.js", a)));
   // The stream opens once the chat listens, so the frames sent on connect (status, open prompts, ticks) reach it too.
   // If the chat cannot load (a session that just ended), the stream still opens for the sidebar.
   const chatBoot = loadChat();
@@ -80,6 +83,8 @@ if (mode === "full") {
   panels.set("needs", { load: () => loadNeeds().then((m) => m.NeedsPanel) });
   // #1523 N2: one instance's Details (/ui/fleet/agent/<name>).
   panels.set("details", { load: () => loadDetails().then((m) => m.DetailsPanel) });
+  // #1218: one instance's Log (/ui/log/<name>).
+  panels.set("log", { load: () => loadLog().then((m) => m.LogPanel) });
   // #1386 §6.3: desktop notifications for new "Needs you" items, in any panel, while this signed-in page is open.
   startNeedsNotifier({ open: (instance) => navigate(chatPath(instance)) });
   // #1665: this device's first upload of its own choices (once), then another device's changes at each status frame.

package/dist/ui/shared/fonts/README.md

@@ -8,7 +8,7 @@
   - The optical-size axis is fixed at its text size (`opsz=14`).
   - The font is subset to Latin, with the same range as `unicode-range` in `tokens.css`.
   - It is saved as WOFF2. About 44 KB, against 352 KB for the full variable font.
-- Chinese and other scripts fall back to the system fonts named in `--font-ui` (PingFang TC → Noto Sans TC → Microsoft JhengHei → the system stack).
+- Chinese and other scripts fall back to the system fonts named in `--font-ui` (PingFang TC → PingFang SC → Noto Sans TC → Noto Sans SC → Noto Sans CJK TC → Noto Sans CJK SC → Microsoft JhengHei → Microsoft YaHei → the system stack).
 
 Rebuilt with fontTools 4.59 (and `brotli` for WOFF2):
 

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

@@ -10,7 +10,7 @@
 import { html, useLayoutEffect, useRef, useState } from "./app-html.js";
 import { t } from "./app-i18n.js";
 import { appStore, createStore, useStore } from "./app-store.js";
-import { chatPath, detailsPath, viewPath } from "./app-route.js";
+import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 import { Icon } from "./ui-icons.js";
 import { Skeleton } from "./ui-states.js";
 import { viewStore } from "./view-roster-store.js";
@@ -353,8 +353,9 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
   // 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.
   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;
-  const active = route && (route.panel === "chat" || route.panel === "view" || route.panel === "details") ? route.instance : null;
+  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]));
@@ -478,11 +479,13 @@ export function InstanceNav({ route, items, loaded = true, exec = {}, awaiting =
           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 class="nav-facet-groups">
+          ${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 nav-shown" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
       </div>
-      <p class="note" aria-live="polite">${shown.shown} / ${shown.total}${shown.active ? ` ${tn("filterShown")}` : ""}</p>
     </div>
   </div>`;
 }

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

@@ -1,16 +1,16 @@
 // #1523 N2 (§3.2): the instance view switch — Chat | View | Details of ONE instance. Each segment is a link to that
 // view's URL for the same instance, so switching keeps the instance (and the sidebar, which is never remounted).
-// Desktop: links in the header; a phone: the same three as top tabs under it (app.css). The anonymous View reader
+// Desktop: links in the header; a phone: the same four as top tabs under it (app.css). The anonymous View reader
 // gets none (Chat and Details need a session): the caller does not render it there.
 import { html } from "./app-html.js";
 import { t } from "./app-i18n.js";
-import { chatPath, detailsPath, viewPath } from "./app-route.js";
+import { chatPath, detailsPath, logPath, viewPath } from "./app-route.js";
 
-/** current: "chat" | "view" | "details". */
+/** current: "chat" | "view" | "log" | "details". #1218: Log sits between View and Details. */
 export function InstanceSwitch({ name, current }) {
   const seg = (key, href, label) => html`<a key=${key} class=${`seg-item${current === key ? " active" : ""}`} href=${href}
     aria-current=${current === key ? "page" : undefined}>${label}</a>`;
   return html`<nav class="inst-switch seg" aria-label=${t("app.instanceViews", name)}>
-    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}${seg("details", detailsPath(name), t("app.details"))}
+    ${seg("chat", chatPath(name), t("app.chat"))}${seg("view", viewPath(name), t("app.view"))}${seg("log", logPath(name), t("app.log"))}${seg("details", detailsPath(name), t("app.details"))}
   </nav>`;
 }

package/dist/ui/shared/tokens.css

@@ -22,7 +22,7 @@
 
 :root {
   /* ── Type ── */
-  --font-ui: Inter, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-ui: Inter, "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC", "Noto Sans CJK TC", "Noto Sans CJK SC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   --fs-xs: 12px;  --lh-xs: 16px;
   --fs-sm: 13px;  --lh-sm: 18px;

package/dist/web-api.d.ts

@@ -148,6 +148,8 @@ export interface WebApiContext {
     needsYouItems?(): unknown[];
     /** #1389: the org chart's structure (fleet.yaml's teams, General, descriptions, thread links); absent: an empty chart. */
     orgChart?(): unknown;
+    /** #1218: an instance's Log steps, read on demand (null: no such instance; `{ enabled: false }`: the Log is off). */
+    logSteps?(name: string, q: import("./log-service.js").LogQuery): Promise<unknown>;
     /** #1468: the prompt-cache expiry analysis for a window ("24h" | "7d" | "30d"); absent: not offered. */
     cacheReport?(window: string): Promise<unknown>;
     /** #1269: an instance's chat command from the web chat (web-commands.ts); absent: not offered. */
@@ -253,6 +255,7 @@ export interface AppShellContext {
     readonly fleetConfig?: {
         web?: {
             usage_panel?: boolean;
+            log_tab?: boolean;
         };
     } | null;
     /** #1665: the host's theme and language go into the page itself, so a device paints them before any script reads. */

package/dist/web-api.js

@@ -347,6 +347,45 @@ export function handleWebRequest(req, res, url, ctx) {
         json(res, 200, { messages: ctx.webChatHistory?.list(instance, limit) ?? [], boot: ctx.webChatHistory?.boot ?? null, lastId: ctx.webChatHistory?.lastId ?? 0 });
         return true;
     }
+    // ── #1218: the Log tab ─────────────────────────────────
+    // An instance's steps, read on demand from its own transcript (log-service.ts). Read-only, and offered on the public
+    // link on purpose (the user's decision): the same masking applies to every viewer. Passive (web-auth.ts).
+    if (method === "GET" && path === "/ui/steps") {
+        const p = url.searchParams;
+        const instance = p.get("instance") ?? "";
+        const num = (k) => {
+            const v = p.get(k);
+            if (v === null)
+                return undefined;
+            const n = Number(v);
+            return /^\d{1,15}$/.test(v) && Number.isSafeInteger(n) ? n : null;
+        };
+        const after = num("after"), before = num("before"), ev = num("ev"), limit = num("limit");
+        const key = p.get("key");
+        if (!instance || instance.length > 128 || after === null || before === null || ev === null || limit === null
+            || (limit !== undefined && (limit < 1 || limit > 200)) || (key !== null && !/^\d{1,20}-\d{1,20}$/.test(key))) {
+            json(res, 400, { error: "instance (1-128 chars); after, before, ev: offsets; limit 1-200; key: <dev>-<ino>" });
+            return true;
+        }
+        if (!ctx.logSteps) {
+            json(res, 404, { error: "not available" });
+            return true;
+        }
+        ctx.logSteps(instance, {
+            ...(after !== undefined ? { after } : {}), ...(before !== undefined ? { before } : {}), ...(ev !== undefined ? { ev } : {}),
+            ...(limit !== undefined ? { limit } : {}), ...(key !== null ? { key } : {}),
+            skip: p.get("skip") === "1", watch: p.get("watch") === "1",
+        }).then(answer => {
+            if (answer === null)
+                json(res, 404, { error: `Instance not found: ${instance}` });
+            else
+                json(res, 200, answer);
+        }).catch(err => {
+            ctx.logger.error({ err: err.message, instance }, "Log steps read failed");
+            json(res, 500, { error: "could not read the steps" });
+        });
+        return true;
+    }
     // ── Send message ───────────────────────────────────────
     if (method === "POST" && path === "/ui/send") {
         handleSendMessage(req, res, ctx);
@@ -1612,6 +1651,8 @@ function shellBodyTag(req, ctx, mode) {
         + `${p?.detail ? ` data-preview-detail="${attr(p.detail)}"` : ""}`
         // #1523 N3: whether the fleet serves /api/ai-usage (web.usage_panel), for every page's ◔.
         + ` data-usage-panel="${ctx.fleetConfig?.web?.usage_panel === false ? "0" : "1"}"`
+        // #1218: whether the Log tab is on (web.log_tab; off by default): the tab says so and offers to turn it on.
+        + ` data-log-tab="${ctx.fleetConfig?.web?.log_tab === true ? "1" : "0"}"`
         // #1770: the fleet's zone (chat-logs' and fleet.log's), in which the chat reads its message times and days.
         + ` data-fleet-tz="${attr(resolveTz())}"`
         // #1589: the public link shows attachments as downloads only (no inline text or media): its scope is unchanged.