@zq-silk/yui 2.4.0 → 2.6.0

package/dist/web/assets/client/lib/api.js

@@ -70,6 +70,9 @@ export const api = {
   context: function (taskId) { return requestJson(task(taskId) + "/context"); },
   workbench: function (taskId) { return requestJson(task(taskId) + "/workbench"); },
   observation: function (taskId) { return requestJson(task(taskId) + "?compact=true", { signal: AbortSignal.timeout(1500) }); },
+  activity: function (taskId, options) {
+    return requestJson(task(taskId) + "/activity?" + new URLSearchParams(options || {}));
+  },
   projects: function (after) { return requestJson("/api/projects" + (after ? "?after=" + encodeURIComponent(after) : "")); },
   createTask: function (input) { return submitMutation("task/create", "/api/tasks", input); },
   taskAction: function (taskId, action, requestId) {
@@ -99,7 +102,7 @@ export const api = {
   // One page of a Context family: summaries and exact references, no bodies.
   list: function (taskId, store, options) {
     const query = new URLSearchParams({ store: store });
-    ["status", "cursor", "limit"].forEach(function (key) {
+    ["view", "status", "cursor", "limit"].forEach(function (key) {
       if (options && options[key] !== undefined && options[key] !== null) query.set(key, String(options[key]));
     });
     return requestJson(task(taskId) + "/list?" + query);

package/dist/web/assets/client/lib/theme.js

@@ -1,20 +1,41 @@
 import { DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME, THEME_OPTIONS } from "../../shared/themes.js";
+// Shared by the parser-blocking head script and the later settings controller.
+// Both resolve the same browser preference without publishing global state.
+const THEME_PREFERENCE_SCRIPT = String.raw `
+const IDS = ${JSON.stringify(THEME_OPTIONS.map(theme => theme.id))};
+const DEFAULT_DARK = ${JSON.stringify(DEFAULT_DARK_THEME.id)};
+const DEFAULT_LIGHT = ${JSON.stringify(DEFAULT_LIGHT_THEME.id)};
+
+function storedPreference() {
+  try {
+    const saved = localStorage.getItem("yui.theme");
+    return IDS.includes(saved) ? saved : "system";
+  } catch { return "system"; }
+}
+
+function resolveTheme(preference, media) {
+  return preference === "system" ? (media.matches ? DEFAULT_LIGHT : DEFAULT_DARK) : preference;
+}
+`;
+// A same-origin classic script runs before styles/body, unlike the deferred
+// application module graph. No inline script or weaker CSP is needed.
+export const THEME_BOOTSTRAP_SCRIPT = String.raw `
+(function () {
+${THEME_PREFERENCE_SCRIPT}
+  document.documentElement.dataset.theme = resolveTheme(
+    storedPreference(), window.matchMedia("(prefers-color-scheme: light)")
+  );
+})();
+`;
 export const THEME_SCRIPT = String.raw `
 // Theme preference. "system" follows prefers-color-scheme and resolves to the
 // default dark or light theme; the resolved id is stamped on <html> so its
 // token block applies. Options and swatches come from shared/themes.ts.
 import { h, markSelected } from "/assets/js/lib/dom.js";
-import { readPreference, writePreference } from "/assets/js/lib/prefs.js";
+import { writePreference } from "/assets/js/lib/prefs.js";
 
 const THEMES = Object.freeze(${JSON.stringify(THEME_OPTIONS)});
-const IDS = THEMES.map(function (theme) { return theme.id; });
-const DEFAULT_DARK = ${JSON.stringify(DEFAULT_DARK_THEME.id)};
-const DEFAULT_LIGHT = ${JSON.stringify(DEFAULT_LIGHT_THEME.id)};
-
-function storedPreference() {
-  const saved = readPreference("yui.theme", "system");
-  return IDS.includes(saved) ? saved : "system";
-}
+${THEME_PREFERENCE_SCRIPT}
 
 function themeOption(theme, t, onPick) {
   const swatch = h("span.theme-swatch", { "aria-hidden": "true" }, theme.swatch.map(function (color, index) {
@@ -36,7 +57,7 @@ export function createThemeController(container, t) {
   const listeners = new Set();
 
   function resolved() {
-    return preference === "system" ? (media.matches ? DEFAULT_LIGHT : DEFAULT_DARK) : preference;
+    return resolveTheme(preference, media);
   }
   function apply() {
     document.documentElement.dataset.theme = resolved();

package/dist/web/assets/client/views/task/actions.js

@@ -1,36 +1,53 @@
 export const TASK_ACTIONS_SCRIPT = String.raw `
+// Next step: one compact action bar. A short prompt on the left, the actions
+// on the right (secondary first, primary last), and a single status line
+// below that appears only when it carries a condition, a block or a receipt.
 import { h } from "/assets/js/lib/dom.js";
-import { button, note } from "/assets/js/ui/primitives.js";
+import { button } from "/assets/js/ui/primitives.js";
 import { card } from "/assets/js/ui/containers.js";
 import { receiptLine, setReceipt, submitWrite } from "/assets/js/ui/forms.js";
 
 export function taskActions(task, t, ctx) {
-  const element = card({ title: t("workbench.next"), icon: "chat" });
-  element.body.append(button(t("workbench.continue"), { variant: "primary", onClick: function () { ctx.openConversation(); } }));
   const action = task.status === "draft" ? "activate"
     : ["completed", "cancelled"].includes(task.status) ? "archive" : null;
+  const element = card({ className: "next-card" });
+  const continueButton = button(t("workbench.continue"), {
+    icon: "chat", variant: action ? "" : "primary", onClick: function () { ctx.openConversation(); }
+  });
+  const buttons = h("div.next-actions", null, continueButton);
+  const lead = h("div.next-lead", null,
+    h("p.next-kicker", null, t("workbench.next")),
+    h("p.next-prompt", null, t("workbench.prompt." + (action || "running"))));
+  element.body.append(h("div.next-row", null, lead, buttons));
   if (!action) return element;
+
   const activation = task.activationRequest;
   const blocked = action === "activate" && (task.executionGate.state !== "enabled"
     || activation && ["pending", "failed"].includes(activation.disposition));
-  const receipt = receiptLine(blocked ? (activation && activation.outcome || t("workbench.activationBlocked")) : t("receipt.notSubmitted"));
-  const control = button(t("workbench." + action), { disabled: !!blocked, onClick: function () {
-    if (!window.confirm(t("workbench." + action + "Confirm"))) return;
-    submitWrite({
-      control: control, receipt: receipt, form: element.body, t: t,
-      send: function (requestId) { return ctx.taskAction(task.id, action, requestId); },
-      saved: function (value) {
-        const result = value.result;
-        const text = action === "activate" ? result.operationRef + " · " + result.request.disposition
-          : result.task.id + " · " + result.task.status;
-        setReceipt(receipt, text, "ok");
-        return true;
-      },
-      rejectedKey: "receipt.notSubmittedBecause", unknownKey: "workbench.unknown",
-      afterWrite: ctx.afterWrite
-    });
-  } });
-  element.body.append(control, note(t("workbench." + action + "Hint")), receipt);
+  // Idle receipts stay empty (hidden); only real state is shown.
+  const receipt = receiptLine(blocked ? (activation && activation.outcome || t("workbench.activationBlocked")) : "", blocked ? "warn" : "");
+  const control = button(t("workbench." + action), {
+    icon: action === "activate" ? "play" : "archive", variant: "primary", disabled: !!blocked,
+    title: t("workbench." + action + "Hint"),
+    onClick: function () {
+      if (!window.confirm(t("workbench." + action + "Confirm"))) return;
+      submitWrite({
+        control: control, receipt: receipt, form: element.body, t: t,
+        send: function (requestId) { return ctx.taskAction(task.id, action, requestId); },
+        saved: function (value) {
+          const result = value.result;
+          const text = action === "activate" ? result.operationRef + " · " + result.request.disposition
+            : result.task.id + " · " + result.task.status;
+          setReceipt(receipt, text, "ok");
+          return true;
+        },
+        rejectedKey: "receipt.notSubmittedBecause", unknownKey: "workbench.unknown",
+        afterWrite: ctx.afterWrite
+      });
+    }
+  });
+  buttons.append(control);
+  element.body.append(h("div.next-foot", null, h("p.next-hint", null, t("workbench." + action + "Hint")), receipt));
   return element;
 }
 `;

package/dist/web/assets/client/views/task/observation.js

@@ -73,6 +73,14 @@ function nowHead(data, execution, t, locale) {
       : h("span.now-owner", null, label(t, "exec.owner", execution.owner) + " · " + label(t, "exec.action", execution.action)));
   const activeCount = execution.activeRunCount === undefined ? (execution.activeRuns || []).length : execution.activeRunCount;
   if (activeCount) head.append(badge(activeCount + " " + t("now.activeRuns"), "info"));
+  if (execution.activity) {
+    const jobs = execution.activity.jobs, native = execution.activity.native;
+    head.append(badge(t("jobs.title") + " · " + t("job.running") + " " + jobs.running
+      + " / " + t("job.queued") + " " + jobs.queued + " / " + t("detail.unobserved") + " " + jobs.unknown, jobs.unknown ? "warn" : "info"));
+    head.append(badge(t("activity.native") + " · " + (native.active + native.waiting)
+      + " / " + t("sessions.background") + " " + native.background
+      + " / " + t("detail.unobserved") + " " + native.unknown, native.unknown ? "warn" : "info"));
+  }
   if (execution.monitoring === "stopped") head.append(badge(t("now.monitoringStopped"), "warn"));
   if (execution.failClosed) head.append(badge(t("now.failClosed"), "bad"));
   head.append(h("span.spacer"), h("span.faint.small", { title: formatDateTime(data.runtimeObservedAt, locale) },
@@ -123,7 +131,8 @@ function drawSessions(container, observation, t, locale) {
 function drawRoleSession(slot, session, observation, t, locale) {
   clear(slot);
   if (!session) {
-    slot.append(h("span.faint.small", null, observation ? t("session.noneRecorded") : t("sessions.unavailable")));
+    slot.append(h("span.faint.small", null, !observation ? t("sessions.unavailable")
+      : observation.total > observation.sessions.length ? t("activity.notLoaded") : t("session.noneRecorded")));
     return;
   }
   slot.append(h("div.role-session-head", null, dot(tone("session", session.group)),
@@ -143,8 +152,8 @@ function drawSessionFacts(facts, observation, sessions, t, locale) {
       [t("sessions.role"), session.roleName],
       [t("sessions.lastActivity"), session.lastActivityAt ? formatDateTime(session.lastActivityAt, locale) : t("sessions.unobserved")],
       [t("sessions.inputUpdated"), formatDateTime(session.sourceUpdatedAt, locale)],
-      [t("sessions.operations"), session.operations.length ? session.operations.join(", ") : null],
-      [t("sessions.background"), session.background.length ? session.background.map(function (item) { return item.id + " · " + item.execution; }).join(", ") : null],
+      [t("sessions.operations"), (session.operationCount ?? session.operations.length) + " · " + session.operations.join(", ")],
+      [t("sessions.background"), (session.backgroundCount ?? session.background.length) + " · " + session.background.map(function (item) { return item.id + " · " + item.execution; }).join(", ")],
       [t("sessions.identity"), mono([session.nativeSessionId, session.nativeTurnId, session.attemptId].filter(Boolean).join(" / "))]
     ]));
   });

package/dist/web/assets/client/views/task/overview.js

@@ -7,8 +7,8 @@ import { formatDateTime } from "/assets/js/lib/format.js";
 import { bulletList, button, codeBlock, dot, emptyState, note, timeTag } from "/assets/js/ui/primitives.js";
 import { card, disclosure } from "/assets/js/ui/containers.js";
 import { richText } from "/assets/js/ui/text.js";
-import { entriesOf, exactCache, totalOf, valuesOf } from "/assets/js/domain/context.js";
-import { lazyRow, recordCard } from "/assets/js/domain/records.js";
+import { entriesOf, totalOf, valuesOf } from "/assets/js/domain/context.js";
+import { currentRecordCard, recordCard } from "/assets/js/domain/records.js";
 import { inputCard } from "/assets/js/domain/work.js";
 import { taskActions } from "/assets/js/views/task/actions.js";
 
@@ -30,45 +30,12 @@ export function renderOverviewPanel(panel, data, t, locale, ctx) {
 // Needs you: open InputRequests with their answer controls. Open questions
 // the bounded read did not carry are listed by reference.
 function needsCard(data, t, locale, ctx) {
-  const task = data.task;
-  const openInputs = data.core.attention.openInputs;
-  const inputs = entriesOf(data.core, "input-request").filter(function (entry) { return !entry.omitted && entry.value.status === "open"; });
-  const missing = openInputs.refs.filter(function (ref) {
-    return !inputs.some(function (entry) { return entry.ref.refId === ref.refId; });
+  return currentRecordCard(data, "input-request", t, ctx, {
+    id: "detail-attention", title: t("overview.needsYou"), icon: "inbox",
+    render: function (value) {
+      return value.status === "open" ? inputCard(value, t, locale, ctx.answerInput) : note(value.id + " · " + value.status);
+    }
   });
-  const needs = card({ title: t("overview.needsYou"), icon: "inbox", count: openInputs.count, className: "needs-card" });
-  needs.id = "detail-attention";
-  inputs.forEach(function (entry) { needs.body.append(inputCard(entry.value, t, locale, ctx.answerInput)); });
-  const seen = new Set(inputs.map(function (entry) { return entry.ref.refId; }));
-  function deferredInput(item) {
-    seen.add(item.ref.refId);
-    return lazyRow(item, task.id, t, ctx, {
-      head: h("span", null, item.summary || item.ref.refId),
-      cache: exactCache(data.viewState),
-      render: function (value) {
-        return value.status === "open" ? inputCard(value, t, locale, ctx.answerInput)
-          : note(value.id + " · " + value.status);
-      }
-    });
-  }
-  missing.forEach(function (ref) {
-    const entry = entriesOf(data.core, "input-request").find(function (entry) { return entry.ref.refId === ref.refId; });
-    needs.body.append(deferredInput({ ref: ref, summary: entry && entry.summary }));
-  });
-  if (openInputs.count > inputs.length + missing.length) {
-    let cursor;
-    const more = button(t("overview.moreInputs"), { onClick: async function () {
-      more.disabled = true;
-      try {
-        const page = await ctx.list(task.id, "input-request", { status: "open", limit: 20, cursor: cursor });
-        page.items.forEach(function (item) { if (!seen.has(item.ref.refId)) needs.body.insertBefore(deferredInput(item), more); });
-        cursor = page.nextCursor;
-        more.disabled = !cursor;
-      } catch (error) { needs.body.append(note(error.message, "bad")); more.disabled = false; }
-    } });
-    needs.body.append(more);
-  }
-  return needs;
 }
 
 function briefOf(data) {

package/dist/web/assets/client/views/task/runtime.js

@@ -3,38 +3,36 @@ export const TASK_RUNTIME_SCRIPT = String.raw `
 // control, open execution, open operations, usage and diagnostics. Session
 // lines, counts and raw facts are [data-slot]s the observation fills in.
 import { h } from "/assets/js/lib/dom.js";
-import { fill } from "/assets/js/lib/format.js";
-import { dot, emptyState, mono, note, timeTag } from "/assets/js/ui/primitives.js";
-import { card, cardDisclosure, listCard } from "/assets/js/ui/containers.js";
+import { dot, button, emptyState, mono, note, timeTag } from "/assets/js/ui/primitives.js";
+import { card, cardDisclosure } from "/assets/js/ui/containers.js";
 import { observabilityMetricCard } from "/assets/js/ui/metrics.js";
 import { statusBadge, tone } from "/assets/js/domain/vocab.js";
-import { cachedExact, entriesOf, exactCache, totalOf } from "/assets/js/domain/context.js";
-import { exactRow, recordCard } from "/assets/js/domain/records.js";
+import { cachedExact, entriesOf, exactCache } from "/assets/js/domain/context.js";
+import { currentRecordCard } from "/assets/js/domain/records.js";
 import { roleCard, runCard } from "/assets/js/domain/runs.js";
 import { controlForm } from "/assets/js/domain/taskForms.js";
 
 export function renderRuntime(panel, data, t, locale, ctx) {
   exactCache(data.viewState);
   const roleEntries = entriesOf(data.core, "role");
-  panel.append(rolesCard(data, roleEntries, t, locale, ctx));
+  panel.append(rolesCard(data, t, locale, ctx));
   panel.append(controlCard(data.task, roleEntries, t, ctx));
   panel.append(runsCard(data, t, locale, ctx));
   panel.append(jobsCard(data, t, locale, ctx));
+  panel.append(currentRecordCard(data, "review-round", t, ctx, { id: "detail-reviews", title: t("activity.reviews") }));
+  panel.append(nativeCard(data, t, ctx));
   panel.append(usageCard(data, t));
   panel.append(diagnosticsCard(data.core, t));
 }
 
 // --- Roles -------------------------------------------------------------------
-function rolesCard(data, roleEntries, t, locale, ctx) {
+function rolesCard(data, t, locale, ctx) {
   const runs = knownRuns(data);
-  const roles = listCard({
-    id: "detail-roles", title: t("roles.title"), icon: "user", count: totalOf(data.core, "role"), hint: t("roles.hint"),
-    actions: h("div.chip-row", { dataset: { slot: "session-counts" } })
+  const roles = currentRecordCard(data, "role", t, ctx, {
+    id: "detail-roles", title: t("roles.title"), icon: "user",
+    render: function (role, result, entry) { return roleRow({ ...entry, value: role }, data, runs, t, locale, ctx); }
   });
-  roleEntries.forEach(function (entry) {
-    roles.list.append(entry.omitted ? recordCard(entry, data.task.id, t, ctx) : roleRow(entry, data, runs, t, locale, ctx));
-  });
-  if (!roleEntries.length) roles.list.append(emptyState(t("records.none")));
+  roles.list.prepend(h("div.chip-row", { dataset: { slot: "session-counts" } }));
   return roles;
 }
 
@@ -72,31 +70,70 @@ function controlCard(task, roleEntries, t, ctx) {
 
 // --- Execution and operations --------------------------------------------------
 function runsCard(data, t, locale, ctx) {
-  const runEntries = entriesOf(data.core, "run");
-  const runTotal = totalOf(data.core, "run");
-  const runList = listCard({ id: "detail-exec", title: t("runs.title"), icon: "pulse", count: runTotal || null, hint: t("runs.hint") });
-  if (!runEntries.length) runList.list.append(emptyState(t("runs.none"), "pulse"));
-  runEntries.forEach(function (entry) {
-    runList.list.append(exactRow(entry, data.task.id, t, ctx, data.viewState.exact, function (value, result) {
-      return runCard({ ...value, execution: (result && result.execution) || entry.execution }, t, locale);
-    }));
+  return currentRecordCard(data, "run", t, ctx, {
+    id: "detail-exec", title: t("runs.title"),
+    render: function (value, result) { return runCard({ ...value, execution: result && result.execution }, t, locale); }
   });
-  if (runTotal > runEntries.length) runList.list.append(note(fill(t("runs.more"), { count: runTotal - runEntries.length })));
-  return runList;
 }
 
 function jobsCard(data, t, locale, ctx) {
-  const jobs = entriesOf(data.core, "job");
-  const jobTotal = totalOf(data.core, "job");
-  const jobList = listCard({
-    id: "detail-operations", title: t("jobs.title"), icon: "refresh", count: jobTotal || null,
-    hint: jobTotal ? t("jobs.hint") : null
+  return currentRecordCard(data, "job", t, ctx, {
+    id: "detail-operations", title: t("jobs.title"), icon: "refresh",
+    render: function (job) { return jobRecord(job, data.task, t, locale); }
   });
-  if (!jobs.length) jobList.list.append(emptyState(t("jobs.none")));
-  jobs.forEach(function (entry) {
-    jobList.list.append(exactRow(entry, data.task.id, t, ctx, data.viewState.exact, function (job) { return jobRecord(job, data.task, t, locale); }));
-  });
-  return jobList;
+}
+
+function nativeCard(data, t, ctx) {
+  const element = card({ id: "detail-native-activity", title: t("activity.native"), icon: "pulse" });
+  let state = data.viewState.nativeActivity;
+  if (!state) {
+    state = data.viewState.nativeActivity = { key: data.core.coreCursor, items: [], page: null, pending: false, error: null };
+  }
+  const revalidate = state.page && state.key !== data.core.coreCursor;
+  state.key = data.core.coreCursor;
+  function draw() {
+    element.body.replaceChildren(note(t("activity.scope")));
+    if (!state.page) element.body.append(note(t("activity.notLoaded")));
+    else {
+      element.body.append(note(t("activity.loaded") + " " + state.items.length + " / " + state.page.total
+        + " · " + state.page.coverage + " · " + state.page.readAt));
+      if (!state.page.total) element.body.append(note(t("activity.none")));
+    }
+    state.items.forEach(function (item) {
+      element.body.append(h("article.record", null,
+        h("header.record-head", null, mono(item.roleName + " / " + item.kind), h("span.spacer"), item.status),
+        h("p.small", null, item.summary),
+        h("p.faint.small.mono-line", null, [item.nativeSessionId, item.runId, item.sourceUpdatedAt].filter(Boolean).join(" · ")),
+        button(t("activity.openSession"), { onClick: function () { ctx.openSession(item.roleName); } })));
+    });
+    if (state.error) element.body.append(note(state.error + " · " + t("activity.refreshHint"), "bad"));
+    const controls = h("div.chip-row");
+    if (!state.page || state.page.nextCursor) controls.append(button(t("activity.more"), {
+      disabled: state.pending, onClick: function () { load(!!state.page); }
+    }));
+    controls.append(button(t("activity.refresh"), { disabled: state.pending, onClick: function () { load(false); } }));
+    element.body.append(controls);
+    element.dataset.reading = String(state.pending);
+  }
+  async function load(more) {
+    if (state.pending) return;
+    state.pending = true; draw();
+    try {
+      const page = await ctx.activity(data.task.id, { limit: 20, ...(more ? { cursor: state.page.nextCursor } : {}) });
+      if (!more && state.page && state.page.digest === page.digest) {
+        // Refresh observation metadata without discarding unchanged loaded pages.
+        state.page = { ...page, nextCursor: state.page.nextCursor };
+      } else {
+        state.items = more ? state.items.concat(page.items) : page.items;
+        state.page = page;
+      }
+      state.error = null;
+    } catch (error) { state.error = error.message; }
+    finally { state.pending = false; draw(); }
+  }
+  draw();
+  if (revalidate) load(false);
+  return element;
 }
 
 function jobRecord(job, task, t, locale) {

package/dist/web/assets/shared/icons.js

@@ -32,6 +32,8 @@ export const ICON_PATHS = Object.freeze({
     user: ["M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", "M4 20a8 8 0 0 1 16 0"],
     eye: ["M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z", "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"],
     plus: ["M12 5v14", "M5 12h14"],
+    play: ["M8 5v14l11-7z"],
+    archive: ["M3 5h18v4H3z", "M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9", "M10 13h4"],
     target: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z", "M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", "M12 12h.01"],
     flag: ["M5 21V4", "M5 4h11l-2 4 2 4H5"],
     sparkle: ["M12 3v4", "M12 17v4", "M3 12h4", "M17 12h4", "M6 6l2.5 2.5", "M15.5 15.5L18 18", "M18 6l-2.5 2.5", "M8.5 15.5L6 18"]

package/dist/web/assets/shell/index.js

@@ -17,6 +17,7 @@ export const DASHBOARD_HTML = `<!doctype html>
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
   <meta name="yui-web-token" content="__YUI_WEB_TOKEN__">
+  <script src="/assets/theme.js"></script>
   <link rel="icon" href="data:,">
   <title>Yui</title>
   <link rel="preload" href="/assets/fonts/inter-500.woff2" as="font" type="font/woff2" crossorigin>

package/dist/web/assets/shell/settings.js

@@ -5,6 +5,7 @@ export const SETTINGS_HTML = `<!doctype html>
 <head>
   <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="yui-web-token" content="__YUI_WEB_TOKEN__">
+  <script src="/assets/theme.js"></script>
   <link rel="icon" href="data:,"><title>Yui · Settings</title>
   ${STYLESHEETS.map(s => `<link rel="stylesheet" href="/assets/css/${s.name}.css">`).join("\n")}
 </head>

package/dist/web/assets/styles/views/task.js

@@ -53,6 +53,20 @@ export const TASK_STYLES = `
 .next-line .icon{color:var(--accent)}
 .next-line strong{color:var(--ink)}
 
+/* Next step: a compact action bar — prompt left, actions right; the foot
+   (condition + receipt) is one quiet line under a hairline. */
+.next-card>.card-body{gap:0;padding:14px 16px 14px 20px}
+.next-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
+.next-lead{display:grid;gap:3px;flex:1 1 280px;min-width:0}
+.next-kicker{color:var(--ink-4);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
+.next-prompt{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
+.next-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none}
+.next-actions .btn{height:34px;padding:0 14px}
+.next-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
+.next-hint{flex:1 1 320px;min-width:0;color:var(--ink-4);font-size:var(--fs-xs);line-height:1.5}
+.next-foot .receipt:empty{display:none}
+@media(max-width:560px){.next-actions{flex:1 1 100%}.next-actions .btn{flex:1 1 0}}
+
 /* Needs you / input requests */
 .needs-card{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
 .needs-card .card-icon{background:var(--warn-soft);color:var(--warn)}

package/dist/web/webConversation.js

@@ -170,7 +170,7 @@ export function createWebConversationSurface(store, surface, plan, readPage = re
                 return [item];
             let messages = [];
             if (owner.scope === "task") {
-                const ref = /^Yui Task notification: task=([A-Za-z0-9_-]+) wake=([A-Za-z0-9_-]+)\.\nRead current context: /m.exec(item.text);
+                const ref = /^Yui Task notification: task=([A-Za-z0-9_-]+) wake=([A-Za-z0-9_-]+)\.$/m.exec(item.text);
                 if (ref?.[1] === owner.taskId) {
                     const wake = store.listTaskWakes(owner.taskId).find(w => w.id === ref[2] && w.status === "consumed");
                     const ids = new Set(wake?.refs?.filter(r => r.type === "message").map(r => r.id));
@@ -178,7 +178,7 @@ export function createWebConversationSurface(store, surface, plan, readPage = re
                 }
             }
             else {
-                const ref = /^Yui Global Message: role=([A-Za-z0-9_-]+) message=([A-Za-z0-9_-]+)\.\nRead your Session Context/m.exec(item.text);
+                const ref = /^Yui Global Message: role=([A-Za-z0-9_-]+) message=([A-Za-z0-9_-]+)\.$/m.exec(item.text);
                 if (ref?.[1] === owner.roleName)
                     messages = store.listGlobalRoleMessages(owner.roleName)
                         .filter(m => m.id === ref[2] && m.delivery?.via === "provider" && m.deliveryTarget?.nativeSessionId === id);

package/dist/web/webServer.js

@@ -5,6 +5,7 @@ import { CliError, usageError } from "../errors/cliError.js";
 import { parseTaskCatalogOptions } from "../context/taskCatalog.js";
 import { parseTaskSearchOptions, searchTaskBodies } from "../context/taskSearch.js";
 import { readTaskUsage } from "../runtime/taskUsageQuery.js";
+import { readWebTaskActivity } from "./webTaskActivity.js";
 import { WebRequestRejected } from "./webMutation.js";
 import { SETTINGS_HTML } from "./assets/shell/settings.js";
 import { TASK_SUBMISSION_INTENTS } from "../message/message.js";
@@ -484,6 +485,7 @@ async function handleHttpRequest(request, response, store, dependencies, token,
                     throw new WebRequestRejected("Invalid list limit.");
                 value = dependencies.surface.list(taskId, {
                     store: query.get("store") ?? "",
+                    ...(query.has("view") ? { view: query.get("view") } : {}),
                     ...(query.has("status") ? { status: query.get("status") } : {}),
                     ...(query.has("cursor") ? { cursor: query.get("cursor") } : {}),
                     ...(limit === null ? {} : { limit: Number(limit) })
@@ -552,6 +554,16 @@ async function handleHttpRequest(request, response, store, dependencies, token,
                     : buildWebTaskCatalog(store, options);
                 sendJson(response, 200, snapshot, method === "HEAD");
             }
+            else if (/^\/api\/tasks\/[^/]+\/activity$/u.test(pathname)) {
+                const taskId = decodeURIComponent(pathname.split("/")[3]);
+                const query = new URL(request.url, "http://localhost").searchParams;
+                if ([...query.keys()].some(key => !["limit", "cursor"].includes(key)))
+                    throw usageError("Invalid activity option.");
+                sendJson(response, 200, readWebTaskActivity(store, taskId, {
+                    ...(query.has("limit") ? { limit: Number(query.get("limit")) } : {}),
+                    ...(query.has("cursor") ? { cursor: query.get("cursor") } : {})
+                }, now()), method === "HEAD");
+            }
             else if (/^\/api\/tasks\/[^/]+\/usage$/u.test(pathname)) {
                 const taskId = decodeURIComponent(pathname.split("/")[3]);
                 const query = new URL(request.url, "http://localhost").searchParams;