@zq-silk/yui 2.3.0 → 2.4.0

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

@@ -0,0 +1,130 @@
+export const TASK_RUNTIME_SCRIPT = String.raw `
+// Task › Runtime: what is live now — Roles and their Sessions, the redirect
+// 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 { 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 { 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(controlCard(data.task, roleEntries, t, ctx));
+  panel.append(runsCard(data, t, locale, ctx));
+  panel.append(jobsCard(data, t, locale, ctx));
+  panel.append(usageCard(data, t));
+  panel.append(diagnosticsCard(data.core, t));
+}
+
+// --- Roles -------------------------------------------------------------------
+function rolesCard(data, roleEntries, 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" } })
+  });
+  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")));
+  return roles;
+}
+
+// Active runs already read exactly (this view or an earlier render).
+function knownRuns(data) {
+  return entriesOf(data.core, "run").map(function (entry) {
+    const hit = cachedExact(data.viewState.exact, entry);
+    return hit ? hit.value : null;
+  }).filter(Boolean);
+}
+
+// A Role card with the slots the observation fills: its live status in the
+// head and its native Session line below it.
+function roleRow(entry, data, runs, t, locale, ctx) {
+  const role = entry.value;
+  const active = runs.find(function (run) { return run.roleName === role.name && run.status === "active"; });
+  const runtimeRole = ((data.runtime && data.runtime.roles) || []).find(function (item) { return item.name === role.name; });
+  const element = roleCard(role, t, locale, {
+    runtimeRole: runtimeRole,
+    retry: entry.providerRetry,
+    launchDrift: active && active.effective && active.effective.sourceDesiredRevision !== role.launchRevision,
+    onOpen: data.task.status === "archived" ? null : ctx.openSession
+  });
+  const head = element.querySelector(".role-head");
+  head.append(h("span", { dataset: { roleStatus: role.name } }));
+  head.after(h("div.role-session", { dataset: { roleSession: role.name } }));
+  return element;
+}
+
+function controlCard(task, roleEntries, t, ctx) {
+  const redirect = cardDisclosure("detail-control", t("control.title"), "control", t("control.meta"));
+  redirect.body.append(note(t("control.help")), controlForm(task, t, ctx, roleEntries.map(function (entry) { return entry.ref.refId; })));
+  return redirect;
+}
+
+// --- 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);
+    }));
+  });
+  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
+  });
+  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 jobRecord(job, task, t, locale) {
+  return h("article.record", null,
+    h("header.record-head", null, dot(tone("job", job.status)), mono(task.id + "/" + job.id), h("span.spacer"),
+      statusBadge(t, "job", "job", job.status)),
+    h("p.small", null, t("job." + job.status + ".note", t("job.terminal.note"))),
+    h("p.faint.small", null, (job.steps || []).map(function (step) { return step.name; }).join(" → ")),
+    timeTag(job.terminalAt || job.startedAt || job.createdAt, locale, t));
+}
+
+// --- Usage and diagnostics -------------------------------------------------------
+function usageCard(data, t) {
+  const usage = card({ id: "detail-usage", title: t("usage.title"), icon: "clock" });
+  const metrics = data.runtime && observabilityMetricCard(data.runtime.observability, t, data.viewState);
+  usage.body.append(h("div", { dataset: { slot: "usage" } }, metrics || emptyState(t("usage.unavailable"))));
+  return usage;
+}
+
+function diagnosticsCard(core, t) {
+  const diagnostics = cardDisclosure("detail-diagnostics", t("diagnostics.title"), "diagnostics", t("diagnostics.meta"));
+  diagnostics.body.append(note(t("observation.help")));
+  (core.observations || []).forEach(function (observation) {
+    diagnostics.body.append(h("p.small.mono-line", null,
+      observation.source + " · " + observation.status + " · " + observation.coverage + " · " + observation.observedAt));
+  });
+  diagnostics.body.append(h("div.stack", { dataset: { slot: "session-facts" } }),
+    h("p.faint.small", { dataset: { slot: "runtime-status" } }), h("pre.code-block", { dataset: { slot: "runtime-raw" } }));
+  return diagnostics;
+}
+`;

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

@@ -0,0 +1,190 @@
+export const TASK_TIMELINE_SCRIPT = String.raw `
+// Task › Records › History: one timeline over four Context families, read as
+// paged summaries. Messages live in the Discussion dock. Ascending families
+// are read in full (bounded); descending runs page on request, and older rows
+// of other families are held back until the run pages reach them so the
+// merged order stays honest.
+import { h, icon, clear, markSelected } from "/assets/js/lib/dom.js";
+import { button, chip, emptyState, mono, note, timeTag } from "/assets/js/ui/primitives.js";
+import { card, filterChips, loadedNote, moreButton } from "/assets/js/ui/containers.js";
+import { richText } from "/assets/js/ui/text.js";
+import { label, statusBadge } from "/assets/js/domain/vocab.js";
+import { exactCache, familyState, loadFamily, summaryFields } from "/assets/js/domain/context.js";
+import { lazyRow } from "/assets/js/domain/records.js";
+import { runBody } from "/assets/js/domain/runs.js";
+
+const TIMELINE = [
+  { kind: "decision", store: "task-decision", icon: "check", ascending: true },
+  { kind: "milestone", store: "task-milestone", icon: "flag", ascending: true },
+  { kind: "run", store: "run", icon: "pulse", ascending: false },
+  { kind: "question", store: "input-request", icon: "inbox", ascending: true }
+];
+const FULL_PAGES = 5;
+
+function at(item) { return Date.parse(item.createdAt || 0) || 0; }
+
+// The History card. It becomes the panel's redraw(), and showing the panel
+// reads the family pages for the current Context cursor.
+export function historyCard(panel, data, t, locale, ctx) {
+  const view = data.viewState;
+  view.panels = view.panels || {};
+  view.panels.records = panel;
+  exactCache(view);
+  view.openRows = view.openRows || {};
+  if (!TIMELINE.some(function (family) { return family.kind === view.recordsFilter; })) view.recordsFilter = "all";
+  const history = card({
+    id: "detail-history", title: t("history.title"), icon: "history", hint: t("history.hint"),
+    actions: filterChips(t("history.filter"), [{ value: "all", label: t("history.all") }].concat(TIMELINE.map(function (family) {
+      return { value: family.kind, label: t("history." + family.kind) };
+    })), view.recordsFilter, function (value) { view.recordsFilter = value; draw(); })
+  });
+  const scope = {
+    view: view, core: data.core, task: data.task, t: t, locale: locale, ctx: ctx, history: history,
+    known: knownValues(data.core), list: h("ol.timeline"), foot: h("div.list-foot")
+  };
+  history.body.append(scope.list, scope.foot);
+  function draw() { drawTimeline(scope); }
+  panel.redraw = draw;
+  panel.onShow = function () { show(scope, false); };
+  draw();
+  return history;
+}
+
+// Values the current snapshot already carries need no read.
+function knownValues(core) {
+  const known = {};
+  core.records.forEach(function (entry) { if (!entry.omitted) known[entry.ref.store + "/" + entry.ref.refId] = entry; });
+  return known;
+}
+
+function drawTimeline(scope) {
+  const view = scope.view;
+  const t = scope.t;
+  clear(scope.list);
+  clear(scope.foot);
+  markSelected(scope.history.querySelectorAll(".chip-tab"), "aria-pressed", function (chipButton) { return chipButton.dataset.filter === view.recordsFilter; });
+  const states = TIMELINE.filter(function (family) { return view.recordsFilter === "all" || view.recordsFilter === family.kind; })
+    .map(function (family) { return { family: family, state: familyState(view, family.store) }; });
+  const items = mergedItems(states);
+  const loading = states.some(function (row) { return row.state.pending && !row.state.pages; });
+  const loaded = states.every(function (row) { return row.state.pages || row.state.error; });
+  states.forEach(function (row) {
+    if (row.state.error) scope.list.append(h("li.timeline-empty", null, note(t("history." + row.family.kind) + " · " + t("records.unavailable") + " " + row.state.error, "bad")));
+  });
+  if (!items.length) {
+    scope.list.append(h("li.timeline-empty", null, emptyState(loading || !loaded ? t("history.loading") : t("records.none"), "history")));
+  }
+  items.forEach(function (row) { scope.list.append(timelineItem(scope, row.family, row.item)); });
+  if (loaded) drawFoot(scope, states, items.length);
+}
+
+// Newest first. While a descending family has more pages, rows older than
+// its oldest loaded row wait for those pages.
+function mergedItems(states) {
+  let horizon = -Infinity;
+  states.forEach(function (row) {
+    if (row.state.nextCursor && !row.family.ascending && row.state.items.length) {
+      horizon = Math.max(horizon, Math.min.apply(null, row.state.items.map(at)));
+    }
+  });
+  const items = [];
+  states.forEach(function (row) {
+    row.state.items.forEach(function (item) { if (at(item) >= horizon) items.push({ family: row.family, item: item }); });
+  });
+  return items.sort(function (a, b) { return at(b.item) - at(a.item); });
+}
+
+function drawFoot(scope, states, shown) {
+  const t = scope.t;
+  const total = states.reduce(function (sum, row) { return sum + (row.state.total || 0); }, 0);
+  scope.foot.append(loadedNote(t, shown, total));
+  const stale = states.some(function (row) { return row.state.key && row.state.key !== scope.core.coreCursor; });
+  if (stale) {
+    scope.foot.append(button(t("history.stale"), { icon: "refresh", variant: "ghost", onClick: function () { show(scope, true); } }));
+  }
+  if (!states.some(function (row) { return row.state.nextCursor; })) return;
+  scope.foot.append(moreButton(t, function () {
+    Promise.all(states.filter(function (row) { return row.state.nextCursor; }).map(function (row) {
+      return loadFamily(scope.view, scope.task.id, row.family.store, row.state.key, scope.ctx, { more: true, limit: 40 });
+    })).then(function () { refresh(scope); });
+  }));
+}
+
+// --- Rows ----------------------------------------------------------------------
+function timelineItem(scope, family, item) {
+  const t = scope.t;
+  const fields = summaryFields(item.summary);
+  const entry = scope.known[item.ref.store + "/" + item.ref.refId];
+  const value = entry && entry.ref.digest === item.ref.digest ? entry.value : null;
+  const element = h("li.timeline-item.kind-" + family.kind);
+  element.append(h("span.timeline-mark", { "aria-hidden": "true" }, icon(family.icon, "icon-sm")));
+  const title = timelineTitle(family, item, fields, t);
+  const head = h("div.timeline-summary", null, h("header.timeline-head", null, h("strong.timeline-title", null, title),
+    family.kind === "run" ? mono(item.ref.refId) : null,
+    item.workItemId ? chip(item.workItemId) : null,
+    item.history === "retired" ? chip(t("history.retired")) : null,
+    item.status ? timelineStatus(family, item, t) : null, h("span.spacer"), timeTag(item.createdAt, scope.locale, t)));
+  const preview = value && family.kind === "decision" ? value.rationale : fields.summary !== title ? fields.summary : null;
+  if (preview) head.append(h("p.small.muted.timeline-preview", null, preview));
+  // The row opens in place; its exact record is read on first open.
+  element.append(h("div.timeline-body", null, lazyRow(item, scope.task.id, t, scope.ctx, {
+    cache: scope.view.exact, openRows: scope.view.openRows, head: head,
+    render: function (exact, result) { return timelineDetail(family, exact, result, t, scope.locale); }
+  })));
+  return element;
+}
+
+function timelineTitle(family, item, fields, t) {
+  if (family.kind === "run") return [item.roleName || t("store.run"), item.purpose ? label(t, "run.purpose", item.purpose) : null].filter(Boolean).join(" · ");
+  if (family.kind === "question") return fields.question || fields.title || item.ref.refId;
+  return fields.title || item.ref.refId;
+}
+
+function timelineStatus(family, item, t) {
+  if (family.kind === "decision") return statusBadge(t, "decision", "decision", item.status);
+  if (family.kind === "run") return statusBadge(t, "run", "run", item.status);
+  if (family.kind === "question") return statusBadge(t, "input", "inputStatus", item.status);
+  return null;
+}
+
+function timelineDetail(family, exact, result, t, locale) {
+  if (family.kind === "run") return h("div.stack", null, runBody({ ...exact, execution: result && result.execution }, t, locale));
+  if (family.kind === "decision") return h("div.stack", null,
+    exact.rationale ? richText(t("record.rationale"), exact.rationale, t, { muted: true }) : null,
+    exact.supersededReason ? richText(t("history.superseded"), exact.supersededReason, t, { muted: true }) : null);
+  if (family.kind === "milestone") return h("div.stack", null, exact.summary ? richText(null, exact.summary, t) : null);
+  if (family.kind !== "question") return null;
+  const answer = exact.resolution && exact.resolution.answer;
+  return h("div.stack", null, exact.question ? richText(null, exact.question, t) : null,
+    answer ? richText(t("history.answer") + " · " + label(t, "answeredBy", exact.resolution.answeredBy),
+      answer.text || answer.choiceKey, t, { muted: true }) : null,
+    exact.cancellation ? note(exact.cancellation.reason) : null);
+}
+
+// --- Reads -----------------------------------------------------------------------
+// Reads redraw whichever Records panel is current.
+function refresh(scope) {
+  const current = scope.view.panels.records;
+  if (current && current.isConnected) current.redraw();
+}
+
+function loadFull(scope, family, key) {
+  return loadFamily(scope.view, scope.task.id, family.store, key, scope.ctx, { limit: 40 }).then(function (state) {
+    if (!family.ascending || !state.nextCursor || state.pages >= FULL_PAGES || state.error) return state;
+    return loadFamily(scope.view, scope.task.id, family.store, key, scope.ctx, { more: true, limit: 40 }).then(function () { return loadFull(scope, family, key); });
+  });
+}
+
+// A stale first page re-reads silently; once the user paged further, the
+// read waits for an explicit refresh so their position is kept.
+function show(scope, force) {
+  const key = scope.core.coreCursor;
+  TIMELINE.forEach(function (family) {
+    const state = familyState(scope.view, family.store);
+    if (state.pending || state.key === key || (!force && state.errorKey === key)) return;
+    if (!force && state.key && !family.ascending && state.pages > 1) return;
+    loadFull(scope, family, key).then(function () { refresh(scope); });
+  });
+  refresh(scope);
+}
+`;

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

@@ -0,0 +1,19 @@
+// Layout geometry shared by the static shell (separator ARIA ranges), the
+// stylesheets (breakpoints, default widths) and the client layout controller
+// (clamping and keyboard steps), so the three can never drift apart.
+export const BREAKPOINTS = Object.freeze({
+    // ≤ wide: compact sidebar default and a three-column metric strip.
+    wide: 1200,
+    // ≤ narrow: master–detail; the dock becomes a full-screen sheet.
+    narrow: 900,
+    // ≤ small: phone layout for page content.
+    small: 620
+});
+export const SIDEBAR = Object.freeze({ min: 240, max: 560, compact: 264, step: 16 });
+export const DOCK = Object.freeze({ min: 320, max: 760, initial: 440, step: 24 });
+// The task column never shrinks below this while a divider is dragged.
+export const CENTER_MIN = 420;
+export const DIVIDER_WIDTH = 9;
+export const LAYOUT_GEOMETRY = Object.freeze({
+    narrow: BREAKPOINTS.narrow, sidebar: SIDEBAR, dock: DOCK, centerMin: CENTER_MIN, divider: DIVIDER_WIDTH
+});

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

@@ -0,0 +1,8 @@
+// Task page sections, shared by the shell's shortcut list and the client.
+// Overview: where it stands. Delivery: what it produced. Runtime: what is live
+// now. Records: what happened. Retired section names stay addressable.
+export const TASK_TABS = ["overview", "delivery", "runtime", "records"];
+export const TASK_TAB_ICONS = {
+    overview: "target", delivery: "package", runtime: "pulse", records: "history"
+};
+export const TASK_TAB_ALIASES = Object.freeze({ work: "delivery", execution: "runtime", history: "records", details: "records" });

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

@@ -0,0 +1,93 @@
+// The theme registry: one typed source for every theme's colour and effect
+// tokens. tokens.css, the settings swatches and the client's theme list are
+// generated from it, so adding a theme is one entry here and tsc rejects an
+// entry that omits a token.
+//   sumi  (墨) graphite dark, vermilion accent — default dark
+//   washi (和紙) warm paper light, vermilion accent — default light
+//   ai    (藍) deep indigo dark, periwinkle accent
+// "system" is not a theme: the client resolves it to the default dark or
+// light theme from prefers-color-scheme.
+export const THEME_TOKENS = [
+    "canvas", "surface", "surface-2", "surface-3", "sunken",
+    "line", "line-2", "line-3",
+    "ink", "ink-2", "ink-3", "ink-4",
+    "accent", "accent-ink", "accent-soft", "accent-line",
+    "info", "info-soft", "ok", "ok-soft", "warn", "warn-soft", "bad", "bad-soft", "idle", "idle-soft",
+    "shadow-1", "shadow-2",
+    "term-bg", "term-fg", "term-cursor", "term-sel"
+];
+const SUMI = {
+    id: "sumi",
+    scheme: "dark",
+    tokens: {
+        canvas: "#0e0f11", surface: "#141518", "surface-2": "#191a1e", "surface-3": "#202126", sunken: "#0b0c0d",
+        line: "rgba(255,255,255,.065)", "line-2": "rgba(255,255,255,.11)", "line-3": "rgba(255,255,255,.18)",
+        ink: "#ececee", "ink-2": "#b4b5bb", "ink-3": "#85868e", "ink-4": "#5c5d64",
+        accent: "#ff7a52", "accent-ink": "#1a0c06", "accent-soft": "rgba(255,122,82,.12)", "accent-line": "rgba(255,122,82,.38)",
+        info: "#6cb6ff", "info-soft": "rgba(108,182,255,.13)",
+        ok: "#4fd18b", "ok-soft": "rgba(79,209,139,.13)",
+        warn: "#f5c065", "warn-soft": "rgba(245,192,101,.14)",
+        bad: "#ff6b7a", "bad-soft": "rgba(255,107,122,.13)",
+        idle: "#8e8f97", "idle-soft": "rgba(142,143,151,.14)",
+        "shadow-1": "0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.35)",
+        "shadow-2": "0 12px 40px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35)",
+        "term-bg": "#0b0c0d", "term-fg": "#e6e6e8", "term-cursor": "#ff7a52", "term-sel": "#3a2a24"
+    }
+};
+const WASHI = {
+    id: "washi",
+    scheme: "light",
+    tokens: {
+        canvas: "#f4f2ed", surface: "#fbfaf7", "surface-2": "#ffffff", "surface-3": "#f1eee7", sunken: "#ebe8e0",
+        line: "rgba(40,32,20,.08)", "line-2": "rgba(40,32,20,.13)", "line-3": "rgba(40,32,20,.22)",
+        ink: "#1d1b18", "ink-2": "#45413b", "ink-3": "#77726a", "ink-4": "#a39e95",
+        accent: "#d24a26", "accent-ink": "#ffffff", "accent-soft": "rgba(210,74,38,.09)", "accent-line": "rgba(210,74,38,.34)",
+        info: "#1f6fd1", "info-soft": "rgba(31,111,209,.09)",
+        ok: "#17844f", "ok-soft": "rgba(23,132,79,.1)",
+        warn: "#a86500", "warn-soft": "rgba(168,101,0,.1)",
+        bad: "#c72f45", "bad-soft": "rgba(199,47,69,.09)",
+        idle: "#7a756c", "idle-soft": "rgba(122,117,108,.11)",
+        "shadow-1": "0 1px 2px rgba(40,32,20,.06)",
+        "shadow-2": "0 16px 40px rgba(40,32,20,.16),0 2px 8px rgba(40,32,20,.08)",
+        "term-bg": "#1b1a18", "term-fg": "#efece6", "term-cursor": "#ff8a63", "term-sel": "#4a3a32"
+    }
+};
+const AI = {
+    id: "ai",
+    scheme: "dark",
+    tokens: {
+        canvas: "#0a0e1a", surface: "#0f1424", "surface-2": "#141a2e", "surface-3": "#1a2139", sunken: "#080b15",
+        line: "rgba(160,180,255,.08)", "line-2": "rgba(160,180,255,.13)", "line-3": "rgba(160,180,255,.22)",
+        ink: "#e7eaf6", "ink-2": "#b0b7d2", "ink-3": "#8088a8", "ink-4": "#565e7d",
+        accent: "#8fa8ff", "accent-ink": "#0a0e1a", "accent-soft": "rgba(143,168,255,.13)", "accent-line": "rgba(143,168,255,.4)",
+        info: "#6fd3ff", "info-soft": "rgba(111,211,255,.12)",
+        ok: "#5ad6a0", "ok-soft": "rgba(90,214,160,.12)",
+        warn: "#f2c46d", "warn-soft": "rgba(242,196,109,.13)",
+        bad: "#ff7d93", "bad-soft": "rgba(255,125,147,.13)",
+        idle: "#8a91ad", "idle-soft": "rgba(138,145,173,.14)",
+        "shadow-1": "0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.4)",
+        "shadow-2": "0 14px 44px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4)",
+        "term-bg": "#080b15", "term-fg": "#e2e6f5", "term-cursor": "#8fa8ff", "term-sel": "#26305a"
+    }
+};
+export const THEMES = [SUMI, WASHI, AI];
+export const DEFAULT_DARK_THEME = SUMI;
+export const DEFAULT_LIGHT_THEME = WASHI;
+// The default dark theme's block also matches :root, so the page has colours
+// before the client stamps the resolved theme on <html>.
+export function themeTokenStyles() {
+    return THEMES.map(theme => {
+        const selector = theme === DEFAULT_DARK_THEME ? `:root,[data-theme="${theme.id}"]` : `[data-theme="${theme.id}"]`;
+        const tokens = THEME_TOKENS.map(token => `--${token}:${theme.tokens[token]};`).join("");
+        return `${selector}{color-scheme:${theme.scheme};${tokens}}`;
+    }).join("\n");
+}
+// Settings options for the client: each swatch shows canvas, raised surface
+// and accent; "system" pairs the default dark and light surfaces.
+export const THEME_OPTIONS = [
+    {
+        id: "system",
+        swatch: [DEFAULT_DARK_THEME.tokens.surface, DEFAULT_LIGHT_THEME.tokens.surface, DEFAULT_DARK_THEME.tokens.accent]
+    },
+    ...THEMES.map(theme => ({ id: theme.id, swatch: [theme.tokens.canvas, theme.tokens["surface-2"], theme.tokens.accent] }))
+];

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

@@ -0,0 +1,63 @@
+import { iconSvg } from "../shared/icons.js";
+import { TASK_TABS } from "../shared/taskTabs.js";
+// Modal dialogs: settings (theme, language, keyboard shortcuts) and the
+// global Role input form. The string keeps its indentation inside <body> and
+// has no trailing newline.
+export const DIALOGS_HTML = `  <dialog id="settings-dialog" class="dialog settings-dialog" aria-labelledby="settings-title">
+    <form method="dialog" class="dialog-body">
+      <header class="dialog-head">
+        <h2 id="settings-title" data-i18n="settings.title">Settings</h2>
+        <button class="icon-btn" value="close" aria-label="Close" data-i18n-aria-label="actions.close">${iconSvg("close")}</button>
+      </header>
+      <fieldset class="field">
+        <legend data-i18n="settings.theme">Theme</legend>
+        <div id="theme-options" class="theme-options"></div>
+      </fieldset>
+      <label class="field">
+        <span data-i18n="settings.language">Language</span>
+        <select id="locale-select">
+          <option value="en">English</option>
+          <option value="zh-CN">简体中文</option>
+        </select>
+      </label>
+      <div class="field">
+        <span data-i18n="settings.shortcuts">Keyboard</span>
+        <dl class="shortcut-list">
+          <dt><kbd>/</kbd></dt><dd data-i18n="shortcut.search">Search tasks</dd>
+          <dt><kbd>R</kbd></dt><dd data-i18n="shortcut.refresh">Refresh</dd>
+          <dt><kbd>D</kbd></dt><dd data-i18n="shortcut.dock">Show or hide the session panel</dd>
+          <dt><kbd>O</kbd></dt><dd data-i18n="shortcut.operator">Operator session</dd>
+          <dt><kbd>1</kbd>–<kbd>${TASK_TABS.length}</kbd></dt><dd data-i18n="shortcut.tabs">Switch task sections</dd>
+          <dt><kbd>Esc</kbd></dt><dd data-i18n="shortcut.escape">Close panel / leave task</dd>
+        </dl>
+      </div>
+    </form>
+  </dialog>
+  <dialog id="global-input-dialog" class="dialog" aria-labelledby="global-input-title">
+    <form id="global-input-form" class="dialog-body">
+      <header class="dialog-head">
+        <div>
+          <h2 id="global-input-title" data-i18n="global.title">Global Role input</h2>
+          <p class="dialog-sub" data-i18n="global.help">Queue is the default. A cancel request does not prove the Turn stopped.</p>
+        </div>
+        <button id="global-input-close" class="icon-btn" type="button" aria-label="Close" data-i18n-aria-label="actions.close">${iconSvg("close")}</button>
+      </header>
+      <div class="field-row">
+        <label class="field"><span data-i18n="global.role">Role</span><input id="global-input-role" value="operator" required pattern="[A-Za-z0-9_-]+"></label>
+        <label class="field"><span data-i18n="control.action">Action</span><select id="global-input-action">
+          <option value="queue" data-i18n="control.queue">Queue</option>
+          <option value="steer" data-i18n="control.steer">Steer</option>
+          <option value="interrupt" data-i18n="control.interrupt">Interrupt</option>
+        </select></label>
+      </div>
+      <label id="global-input-body-label" class="field"><span data-i18n="control.message">Message</span><textarea id="global-input-body" maxlength="8000" required rows="4"></textarea></label>
+      <label id="global-input-target-label" class="field" hidden><span data-i18n="control.expectedTurn">Expected current Turn</span><input id="global-input-target" class="mono"></label>
+      <label id="global-input-then-label" class="field" hidden><span data-i18n="control.then">Then-message reference</span><input id="global-input-then" class="mono"></label>
+      <div class="dialog-actions">
+        <button id="global-input-inspect" type="button" class="btn" data-i18n="global.inspect">Read state</button>
+        <button id="global-input-submit" type="submit" class="btn btn-primary" data-i18n="actions.submit">Submit</button>
+      </div>
+      <p id="global-input-receipt" role="status" class="receipt" data-i18n="receipt.notSubmitted">Not submitted</p>
+      <pre id="global-input-state" class="code-block" hidden></pre>
+    </form>
+  </dialog>`;

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

@@ -0,0 +1,40 @@
+import { DOCK } from "../shared/geometry.js";
+import { iconSvg } from "../shared/icons.js";
+// The dock divider and the dock region: the Discussion / Live session tabs,
+// their actions, the discussion mount and the terminal pane, whose host,
+// target chips and connection state must survive re-renders.
+// The string keeps its indentation inside .app and has no trailing newline.
+export const DOCK_HTML = `    <div id="dock-divider" class="dock-divider" role="separator" tabindex="0" aria-orientation="vertical" aria-valuemin="${DOCK.min}" aria-valuemax="${DOCK.max}" aria-valuenow="${DOCK.initial}" aria-label="Resize session panel" data-i18n-aria-label="dock.resize" hidden><span aria-hidden="true"></span></div>
+    <aside id="dock" class="dock" aria-label="Session" data-i18n-aria-label="dock.label" hidden>
+      <header class="dock-head">
+        <div class="seg" role="tablist" aria-label="Session view" data-i18n-aria-label="dock.label">
+          <button id="dock-tab-conversation" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-conversation"><span data-i18n="conversation.title">Conversation</span></button>
+          <button id="dock-tab-discussion" class="seg-btn" type="button" role="tab" aria-selected="true" aria-controls="dock-discussion">${iconSvg("chat")}<span data-i18n="dock.discussion">Discussion</span></button>
+          <button id="dock-tab-session" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-session">${iconSvg("terminal")}<span data-i18n="dock.session">Live session</span></button>
+          <button id="dock-tab-preview" class="seg-btn" type="button" role="tab" aria-selected="false" aria-controls="dock-preview" disabled><span data-i18n="preview.title">Preview</span></button>
+        </div>
+        <div class="dock-actions">
+          <button id="dock-swap" class="icon-btn" type="button" aria-label="Swap with task details" data-i18n-aria-label="dock.swap" title="Swap with task details">${iconSvg("swap")}</button>
+          <button id="dock-close" class="icon-btn" type="button" aria-label="Hide session panel" data-i18n-aria-label="dock.hide" title="Hide · D">${iconSvg("close")}</button>
+        </div>
+      </header>
+      <section id="dock-conversation" class="dock-pane dock-discussion" role="tabpanel" aria-labelledby="dock-tab-conversation" hidden></section>
+      <section id="dock-discussion" class="dock-pane dock-discussion" role="tabpanel" aria-labelledby="dock-tab-discussion"></section>
+      <section id="dock-preview" class="dock-pane dock-preview" role="tabpanel" aria-labelledby="dock-tab-preview" hidden></section>
+      <section id="dock-session" class="dock-pane dock-session" role="tabpanel" aria-labelledby="dock-tab-session" hidden>
+        <div class="session-bar">
+          <div id="session-targets" class="session-targets" role="group" aria-label="Session target" data-i18n-aria-label="dock.target"></div>
+          <span id="terminal-state" class="conn" data-state="idle"><i aria-hidden="true"></i><span data-i18n="terminal.idle">Not connected</span></span>
+        </div>
+        <div id="terminal-host" class="terminal-host"></div>
+        <div id="terminal-empty" class="terminal-empty">
+          ${iconSvg("terminal", "icon icon-xl")}
+          <p class="terminal-empty-title" data-i18n="terminal.emptyTitle">Attach to a native Session</p>
+          <p class="terminal-empty-text" data-i18n="terminal.emptyText">Pick a Role above. The panel shows the Session's current screen; attaching never starts or restarts an Agent.</p>
+        </div>
+        <footer class="session-foot">
+          <span data-i18n="terminal.cliHint">Full terminal</span>
+          <code id="terminal-cli">yui operator enter</code>
+        </footer>
+      </section>
+    </aside>`;

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

@@ -0,0 +1,40 @@
+import { DEFAULT_DARK_THEME } from "../shared/themes.js";
+import { STYLESHEETS } from "../styles/index.js";
+import { DIALOGS_HTML } from "./dialogs.js";
+import { DOCK_HTML } from "./dock.js";
+import { SIDEBAR_HTML } from "./sidebar.js";
+// Static application frame. Everything inside #detail, #task-list and the dock
+// panes is rendered by the client modules; the shell only fixes the regions
+// and the controls whose identity must survive re-renders. Stylesheets are
+// linked in registry (cascade) order, followed by the terminal's vendor CSS.
+const STYLESHEET_LINKS = STYLESHEETS
+    .map(sheet => `  <link rel="stylesheet" href="/assets/css/${sheet.name}.css">`)
+    .join("\n");
+export const DASHBOARD_HTML = `<!doctype html>
+<html lang="en" data-theme="${DEFAULT_DARK_THEME.id}">
+<head>
+  <meta charset="utf-8">
+  <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__">
+  <link rel="icon" href="data:,">
+  <title>Yui</title>
+  <link rel="preload" href="/assets/fonts/inter-500.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/assets/fonts/inter-600.woff2" as="font" type="font/woff2" crossorigin>
+${STYLESHEET_LINKS}
+  <link rel="stylesheet" href="/assets/vendor/xterm.css">
+</head>
+<body>
+  <a class="skip-link" href="#center" data-i18n="a11y.skip">Skip to task details</a>
+  <div class="app">
+${SIDEBAR_HTML}
+    <main id="center" class="center" tabindex="-1">
+      <div id="detail" class="detail"></div>
+    </main>
+${DOCK_HTML}
+  </div>
+${DIALOGS_HTML}
+  <div id="toast" class="toast" role="status" aria-live="polite"></div>
+  <script type="module" src="/assets/app.js"></script>
+</body>
+</html>`;

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

@@ -0,0 +1,34 @@
+import { STYLESHEETS } from "../styles/index.js";
+import { DEFAULT_DARK_THEME } from "../shared/themes.js";
+export const SETTINGS_HTML = `<!doctype html>
+<html lang="en" data-theme="${DEFAULT_DARK_THEME.id}">
+<head>
+  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="yui-web-token" content="__YUI_WEB_TOKEN__">
+  <link rel="icon" href="data:,"><title>Yui · Settings</title>
+  ${STYLESHEETS.map(s => `<link rel="stylesheet" href="/assets/css/${s.name}.css">`).join("\n")}
+</head>
+<body class="settings-body">
+  <main class="settings-page">
+    <header class="settings-header"><a class="btn" href="/">← Yui</a><h1 data-i18n="settings.title">Settings</h1></header>
+    <p data-i18n="settings.scope">Browser preferences apply here immediately. Server settings are desired configuration, not proof that existing Sessions adopted them.</p>
+    <section class="settings-card">
+      <h2 data-i18n="settings.browser">This browser</h2>
+      <div class="settings-grid">
+        <fieldset class="field"><legend data-i18n="settings.theme">Theme</legend><div id="theme-options" class="theme-options"></div></fieldset>
+        <div class="settings-stack">
+          <label class="field"><span data-i18n="settings.language">Language</span><select id="locale-select"><option value="en">English</option><option value="zh-CN">简体中文</option></select></label>
+          <label class="field"><span data-i18n="settings.accessMode">Default session access</span><select id="access-mode"><option value="native" data-i18n="settings.native">Native terminal</option><option value="structured" data-i18n="settings.structured">Structured view</option></select></label>
+          <p data-i18n="settings.accessHelp">Preference for subsequent session selection where supported. It does not switch a live Session.</p>
+          <button id="reset-layout" type="button" class="btn" data-i18n="settings.resetLayout">Reset saved workspace layout</button>
+          <p id="browser-receipt" role="status"></p>
+        </div>
+      </div>
+    </section>
+    <section id="skill-browser" class="settings-card settings-stack"></section>
+    <label class="field settings-search"><span data-i18n="settings.search">Find a setting</span><input id="settings-search" type="search" autocomplete="off"></label>
+    <p id="settings-status" role="status"></p>
+    <div id="settings-groups" class="settings-stack"></div>
+  </main>
+  <script type="module" src="/assets/js/app/settings.js"></script>
+</body></html>`;