@zq-silk/yui 2.0.0 → 2.1.0

package/dist/web/assets/client/detail.js

@@ -0,0 +1,333 @@
+export const DETAIL_SCRIPT = String.raw `
+// Task detail: header, section tabs and the Overview section. The runtime
+// observation arrives separately from the Context snapshot, so every fact it
+// feeds lives in a [data-slot] that updateObservation() can redraw in place.
+import { h, icon, clear } from "/assets/js/dom.js";
+import { formatDateTime, formatClock, relativeTime } from "/assets/js/format.js";
+import {
+  badge, statusBadge, label, tone, card, disclosure, richText, bulletList, emptyState,
+  note, button, chip, mono, inputCard, kv, dot, timeTag
+} from "/assets/js/components.js";
+import { entriesOf, valuesOf, recordCard } from "/assets/js/records.js";
+import { renderWork, renderExecution, renderHistory, renderDetails } from "/assets/js/sections.js";
+
+export const TABS = ["overview", "work", "execution", "history", "details"];
+const TAB_ICONS = { overview: "target", work: "layers", execution: "pulse", history: "history", details: "dots" };
+const SESSION_GROUPS = ["active", "waiting", "background", "quiet", "diagnostic", "stopped", "unknown", "idle"];
+
+export function renderTaskDetail(container, data, t, locale, ctx) {
+  clear(container);
+  const task = data.task;
+  const core = data.core;
+  container.dataset.taskId = task.id;
+  const page = h("div.page.task-page");
+
+  // --- Header ----------------------------------------------------------------
+  const bar = h("div.task-bar", null,
+    h("button.icon-btn.back-btn", { type: "button", "aria-label": t("actions.back"), title: t("actions.back"), onclick: ctx.onBack }, icon("back")),
+    h("nav.crumbs", { "aria-label": t("crumbs.label") },
+      h("button.crumb", { type: "button", onclick: ctx.onBack }, t("crumbs.tasks")),
+      h("span.crumb-sep", { "aria-hidden": "true" }, "/"),
+      h("code.crumb-current", null, task.id)),
+    h("span.spacer"),
+    h("button.btn.btn-ghost.dock-toggle", {
+      type: "button", dataset: { dockToggle: "discussion" }, title: t("dock.discussion") + " · D",
+      onclick: function () { ctx.showDock("discussion"); }
+    }, icon("chat"), h("span", null, t("dock.discussion"))),
+    h("button.btn.btn-ghost.dock-toggle", {
+      type: "button", dataset: { dockToggle: "session" }, title: t("dock.session"),
+      onclick: function () { ctx.showDock("session"); }
+    }, icon("terminal"), h("span", null, t("dock.session"))));
+
+  const meta = h("div.task-meta", null,
+    statusBadge(t, "task", "status", task.status),
+    h("span", { dataset: { slot: "exec-badge" } }),
+    task.priority ? badge(label(t, "priority", task.priority), task.priority === "urgent" || task.priority === "high" ? "accent" : "idle") : null,
+    (task.tags || []).map(function (tag) { return chip("#" + tag); }),
+    h("span.meta-item", null, icon("clock", "icon-sm"), t("task.updated") + " ", timeTag(task.updatedAt, locale, t)),
+    (task.projectBindings || []).length ? h("span.meta-item", null, icon("layers", "icon-sm"),
+      task.projectBindings.map(function (binding) { return binding.projectId; }).join(", ")) : null);
+
+  const counts = {
+    work: entriesOf(core, "work-item").length,
+    execution: entriesOf(core, "run").length,
+    history: entriesOf(core, "task-decision").length + entriesOf(core, "task-milestone").length + entriesOf(core, "task-message").length
+  };
+  const tabs = h("nav.tabs", { role: "tablist", "aria-label": t("tabs.label") }, TABS.map(function (tab, index) {
+    return h("button.tab", {
+      type: "button", role: "tab", id: "tab-" + tab,
+      "aria-controls": "panel-" + tab,
+      "aria-selected": String(ctx.activeTab === tab),
+      tabIndex: ctx.activeTab === tab ? 0 : -1,
+      title: t("tabs." + tab) + " · " + (index + 1),
+      dataset: { tab: tab },
+      onclick: function () { ctx.onTab(tab); }
+    }, icon(TAB_ICONS[tab], "icon-sm"), h("span", null, t("tabs." + tab)),
+    counts[tab] ? h("span.count", null, String(counts[tab])) : null);
+  }));
+  tabs.addEventListener("keydown", function (event) {
+    if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+    event.preventDefault();
+    const selected = tabs.querySelector('[aria-selected="true"]');
+    const index = TABS.indexOf(selected.dataset.tab);
+    const next = TABS[(index + (event.key === "ArrowRight" ? 1 : TABS.length - 1)) % TABS.length];
+    ctx.onTab(next);
+    const button = tabs.querySelector('[data-tab="' + next + '"]');
+    if (button) button.focus();
+  });
+
+  page.append(h("header.task-header", null, bar),
+    h("div.task-hero", null, h("h1.task-title", null, task.title), meta),
+    h("div.tabs-wrap", null, tabs));
+
+  // --- Panels ------------------------------------------------------------------
+  const panels = {};
+  TABS.forEach(function (tab) {
+    panels[tab] = h("section.tab-panel", { id: "panel-" + tab, role: "tabpanel", "aria-labelledby": "tab-" + tab, hidden: ctx.activeTab !== tab });
+    page.append(panels[tab]);
+  });
+  renderOverviewPanel(panels.overview, data, t, locale, ctx);
+  renderWork(panels.work, data, t, locale, ctx);
+  renderExecution(panels.execution, data, t, locale, ctx);
+  renderHistory(panels.history, data, t, locale, ctx);
+  renderDetails(panels.details, data, t, locale, ctx);
+  container.append(page);
+  updateObservation(container, data, t, locale, ctx);
+}
+
+export function selectTab(container, tab) {
+  container.querySelectorAll(".tab").forEach(function (button) {
+    const active = button.dataset.tab === tab;
+    button.setAttribute("aria-selected", String(active));
+    button.tabIndex = active ? 0 : -1;
+  });
+  container.querySelectorAll(".tab-panel").forEach(function (panel) { panel.hidden = panel.id !== "panel-" + tab; });
+}
+
+function renderOverviewPanel(panel, data, t, locale, ctx) {
+  const task = data.task;
+  const core = data.core;
+  // Now: the derived execution status (observation) plus the open questions.
+  const now = card({ className: "now-card" });
+  now.body.append(h("div", { dataset: { slot: "now" } }));
+  panel.append(now);
+
+  // Needs you: open InputRequests with their answer controls.
+  const inputs = entriesOf(core, "input-request").filter(function (entry) { return !entry.omitted && entry.value.status === "open"; });
+  const missing = core.attention.openInputs.refs.filter(function (ref) {
+    return !inputs.some(function (entry) { return entry.ref.refId === ref.refId; });
+  });
+  const inputCount = core.attention.openInputs.count;
+  if (inputCount) {
+    const needs = card({ title: t("overview.needsYou"), icon: "inbox", count: inputCount, className: "needs-card" });
+    needs.id = "detail-attention";
+    inputs.forEach(function (entry) { needs.body.append(inputCard(entry.value, t, locale, ctx.answerInput)); });
+    missing.forEach(function (ref) { needs.body.append(recordCard({ ref: ref, omitted: true }, task.id, t, ctx)); });
+    if (inputCount > inputs.length + missing.length) {
+      needs.body.append(note(t("overview.moreInputs"), "warn"), h("pre.code-block", null, "yui task input list " + task.id));
+    }
+    panel.append(needs);
+  }
+
+  const grid = h("div.card-grid");
+  grid.append(progressCard(data, t, locale, ctx));
+  const sessions = card({ title: t("sessions.title"), icon: "terminal", hint: t("sessions.hint") });
+  sessions.body.append(h("div", { dataset: { slot: "sessions" } }));
+  grid.append(sessions);
+  grid.append(goalCard(data, t, ctx));
+  grid.append(decisionsCard(data, t, locale, ctx));
+  panel.append(grid);
+  if (task.status === "draft") panel.append(planningCard(data, t, locale));
+}
+
+function progressCard(data, t, locale, ctx) {
+  const task = data.task;
+  const element = card({ title: t("progress.title"), icon: "flag" });
+  const working = task.status === "draft" || task.status === "active";
+  if (task.completionSummary) element.body.append(richText(t("progress.completion"), task.completionSummary, t, { className: "callout.tone-ok" }));
+  if (task.retirementSummary) element.body.append(richText(t("progress.retirement"), task.retirementSummary, t, { className: "callout" }));
+  if (task.archiveSummary || task.archiveReason) element.body.append(richText(t("progress.archive"), [task.archiveSummary, task.archiveReason].filter(Boolean).join("\n\n"), t, { className: "callout" }));
+  const briefEntry = entriesOf(data.core, "task-brief")[0];
+  const brief = valuesOf(data.core, "task-brief")[0];
+  if (brief) {
+    element.body.append(richText(t(working ? "progress.focus" : "progress.lastFocus"), brief.currentFocus, t));
+    element.body.append(richText(t(working ? "progress.report" : "progress.lastReport"), brief.leaderSummary, t, { muted: true }));
+    element.body.append(h("p.faint.small", null, t("progress.briefUpdated") + " " + formatDateTime(brief.updatedAt, locale)));
+  } else if (briefEntry) element.body.append(recordCard(briefEntry, task.id, t, ctx, { compact: true }));
+  else element.body.append(emptyState(t("progress.none")));
+  element.body.append(h("p.next-line", { dataset: { slot: "next" } }));
+  return element;
+}
+
+function goalCard(data, t, ctx) {
+  const task = data.task;
+  const brief = valuesOf(data.core, "task-brief")[0];
+  const element = card({ title: t("goal.title"), icon: "target" });
+  if (brief && brief.objective) element.body.append(richText(null, brief.objective, t));
+  if (brief && brief.boundaries && brief.boundaries.length) {
+    element.body.append(h("div.prose-block", null, h("h4.prose-label", null, t("goal.boundaries")), bulletList(brief.boundaries)));
+  }
+  if (brief && brief.technicalApproach) {
+    const approach = disclosure(t("goal.approach"), "approach");
+    approach.body.append(richText(null, brief.technicalApproach, t));
+    element.body.append(approach);
+  }
+  if (task.description) {
+    const requirements = disclosure(t("goal.requirements"), "requirements");
+    requirements.body.append(richText(null, task.description, t));
+    element.body.append(requirements);
+  }
+  if (!element.body.childNodes.length) element.body.append(emptyState(t("goal.none")));
+  return element;
+}
+
+function decisionsCard(data, t, locale, ctx) {
+  const entries = entriesOf(data.core, "task-decision");
+  const active = entries.filter(function (entry) { return !entry.omitted && entry.value.status === "active"; });
+  const element = card({ title: t("decisions.title"), icon: "check", count: active.length || null, hint: t("decisions.hint") });
+  active.slice(0, 3).forEach(function (entry) {
+    const value = entry.value;
+    element.body.append(h("article.decision", null,
+      h("header.decision-head", null, dot("ok"), h("strong", null, value.title), timeTag(value.createdAt, locale, t)),
+      value.rationale ? richText(null, value.rationale, t, { muted: true, threshold: 260 }) : null));
+  });
+  if (!active.length) element.body.append(emptyState(t("decisions.none")));
+  if (active.length > 3 || data.core.omitted.records || entries.some(function (entry) { return entry.omitted; })) {
+    element.body.append(button(t("decisions.more"), { variant: "link", icon: "chevron", onClick: function () { ctx.onTab("history"); } }));
+  }
+  return element;
+}
+
+// A Draft's Leader conversation is its planning Turn. Report the snapshot's
+// real planning facts; a withheld value is reported as withheld, never as
+// "not dispatched".
+function planningCard(data, t, locale) {
+  const runEntries = entriesOf(data.core, "run");
+  const planning = valuesOf(data.core, "run").filter(function (run) { return run.roleName === "leader" && run.purpose === "planning"; });
+  const turn = planning[planning.length - 1] || null;
+  const withheld = turn === null && runEntries.some(function (entry) { return entry.omitted; });
+  const live = ((data.runtime && data.runtime.roles) || []).find(function (role) { return role.name === "leader"; }) || null;
+  const element = card({ title: t("planning.title"), icon: "sparkle", className: "planning-card" });
+  element.dataset.planning = turn ? turn.status : withheld ? "withheld" : "not-dispatched";
+  element.body.append(note(withheld ? t("planning.withheld") : turn === null ? t("planning.none")
+    : turn.status === "active" ? t("planning.open") : t("planning.settled").replace("{status}", turn.status)));
+  const environment = turn && turn.effective && turn.effective.executionEnvironment;
+  element.body.append(kv([
+    [t("planning.run"), turn ? mono(turn.id + " (" + turn.status + ")") : withheld ? t("planning.withheldValue") : t("common.none")],
+    [t("planning.providerTerminal"), (turn && turn.result && turn.result.provider && turn.result.provider.status) || t("common.notReported")],
+    [t("planning.conversation"), (turn && turn.result && turn.result.provider && turn.result.provider.conversationId) || t("common.notReported")],
+    [t("planning.liveSession"), (live && live.runtimeSession && live.runtimeSession.nativeSessionId) || t("planning.notRunning")],
+    [t("planning.environment"), (environment && environment.environmentRef) || t("planning.emptyEnvironment")],
+    [t("planning.updated"), turn ? formatDateTime((turn.result && turn.result.completedAt) || turn.updatedAt, locale) : t("common.unknown")]
+  ]));
+  return element;
+}
+
+// --- Observation slots -------------------------------------------------------
+export function updateObservation(container, data, t, locale, ctx) {
+  const available = data.runtimeStatus === "available" && data.runtime;
+  const execution = available ? data.runtime.execution : null;
+  const execBadge = container.querySelector('[data-slot="exec-badge"]');
+  if (execBadge) {
+    clear(execBadge);
+    if (execution && execution.status !== data.task.status) execBadge.append(statusBadge(t, "exec", "exec.status", execution.status));
+  }
+  const now = container.querySelector('[data-slot="now"]');
+  if (now && !now.contains(document.activeElement)) drawNow(now, data, execution, t, locale);
+  const next = container.querySelector('[data-slot="next"]');
+  if (next) {
+    clear(next);
+    if (execution && !(execution.next.owner === "none" && execution.next.action === "none")) next.append(icon("flag", "icon-sm"), h("span", null, t("now.nextOwner") + " "),
+      h("strong", null, label(t, "exec.owner", execution.next.owner)), h("span", null, " · " + label(t, "exec.action", execution.next.action)));
+  }
+  const sessions = container.querySelector('[data-slot="sessions"]');
+  if (sessions && !sessions.contains(document.activeElement)) {
+    const open = sessions.querySelector("details") && sessions.querySelector("details").open;
+    drawSessions(sessions, available ? data.runtime.sessions : null, t, locale);
+    if (open && sessions.querySelector("details")) sessions.querySelector("details").open = true;
+  }
+  const raw = container.querySelector('[data-slot="runtime-raw"]');
+  if (raw) raw.textContent = available ? JSON.stringify({ roles: data.runtime.roles, runtimeHealth: data.runtime.runtimeHealth }, null, 2) : "";
+  const rawStatus = container.querySelector('[data-slot="runtime-status"]');
+  if (rawStatus) rawStatus.textContent = t("observation." + data.runtimeStatus) + " · " + formatDateTime(data.runtimeObservedAt, locale);
+  container.querySelectorAll("[data-role-status]").forEach(function (slot) {
+    const role = available ? (data.runtime.roles || []).find(function (item) { return item.name === slot.dataset.roleStatus; }) : null;
+    clear(slot);
+    if (role) slot.append(statusBadge(t, "role", "role", role.status));
+  });
+}
+
+function drawNow(slot, data, execution, t, locale) {
+  clear(slot);
+  const inputCount = data.core.attention.openInputs.count;
+  if (!execution) {
+    slot.append(h("div.now-head", null,
+      badge(t("observation." + data.runtimeStatus), data.runtimeStatus === "unavailable" ? "bad" : "idle", { dot: true }),
+      h("span.now-owner", null, inputCount ? t("now.inputs").replace("{count}", String(inputCount)) : t("now.noInputs"))));
+    slot.append(h("p.now-note", null, data.runtimeStatus === "waiting" ? t("now.reading") : t("now.unavailable")));
+    return;
+  }
+  const head = h("div.now-head", null,
+    statusBadge(t, "exec", "exec.status", execution.status),
+    execution.owner === "none" && execution.action === "none" ? null
+      : h("span.now-owner", null, label(t, "exec.owner", execution.owner) + " · " + label(t, "exec.action", execution.action)));
+  if (execution.activeRuns && execution.activeRuns.length) head.append(badge(execution.activeRuns.length + " " + t("now.activeRuns"), "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) },
+    t("now.observed") + " " + formatClock(data.runtimeObservedAt, locale)));
+  slot.append(head);
+  if (execution.summary) slot.append(h("p.now-summary", null, execution.summary));
+  if (execution.reason) slot.append(h("p.now-reason", null, execution.reason));
+  const signals = [];
+  (execution.attention || []).forEach(function (item) {
+    signals.push(h("li.signal-row.tone-warn", null, icon("alert", "icon-sm"),
+      h("span.signal-kind", null, label(t, "exec.attention", item.kind)), h("span", null, item.summary),
+      item.owner ? h("span.faint.small", null, label(t, "exec.owner", item.owner)) : null));
+  });
+  (execution.blockers || []).forEach(function (item) {
+    signals.push(h("li.signal-row.tone-bad", null, icon("alert", "icon-sm"),
+      h("span.signal-kind", null, label(t, "exec.blocker", item.kind)), h("span", null, item.summary),
+      h("span.faint.small", null, label(t, "exec.owner", item.owner))));
+  });
+  const sessions = (data.runtime.sessions && data.runtime.sessions.sessions) || [];
+  sessions.filter(function (session) { return session.group === "waiting" && ["user", "permission"].includes(session.waitingReason); })
+    .forEach(function (session) {
+      signals.push(h("li.signal-row.tone-warn", null, icon("user", "icon-sm"),
+        h("span.signal-kind", null, session.roleName), h("span", null, t("now.nativeWait"))));
+    });
+  if (signals.length) slot.append(h("ul.signal-list", null, signals));
+  else slot.append(h("p.now-note", null, inputCount ? t("now.inputs").replace("{count}", String(inputCount)) : t("now.clear")));
+}
+
+function drawSessions(slot, observation, t, locale) {
+  clear(slot);
+  if (!observation) { slot.append(emptyState(t("sessions.unavailable"))); return; }
+  const chips = SESSION_GROUPS.filter(function (group) { return observation.counts[group]; }).map(function (group) {
+    return badge(observation.counts[group] + " " + t("session." + group), tone("session", group), { dot: true });
+  });
+  if (chips.length) slot.append(h("div.chip-row", null, chips));
+  if (!observation.sessions.length) { slot.append(note(t("sessions.none"))); return; }
+  slot.append(h("ul.session-list", null, observation.sessions.map(function (session) {
+    return h("li.session-row", null,
+      h("div.session-row-head", null, dot(tone("session", session.group)), h("strong", null, session.roleName),
+        h("span.faint", null, t("session." + session.group)), h("span.spacer"),
+        h("span.faint.small", null, session.lastActivityAt ? relativeTime(session.lastActivityAt, locale, t) : t("sessions.unobserved"))),
+      h("p.small", null, session.reason),
+      session.waitingReason ? h("p.small", null, t("sessions.waitingFor") + " " + session.waitingReason) : null);
+  })));
+  const facts = disclosure(t("sessions.facts"), "sessions");
+  observation.sessions.forEach(function (session) {
+    facts.body.append(kv([
+      [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.identity"), mono([session.nativeSessionId, session.nativeTurnId, session.attemptId].filter(Boolean).join(" / "))]
+    ]));
+  });
+  facts.body.append(h("p.faint.small", null, t("sessions.scope") + " " + formatDateTime(observation.readAt, locale)));
+  slot.append(facts);
+}
+`;

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

@@ -0,0 +1,225 @@
+export const DOCK_SCRIPT = String.raw `
+// The session dock: the Task discussion (recorded Task messages plus the
+// composer) and the live native Session terminal. The feed is a read-only
+// projection and redraws on every refresh; the composer is kept per Task so a
+// refresh can never discard an unsent draft or a pending receipt.
+import { Terminal } from "/assets/vendor/xterm.mjs";
+import { FitAddon } from "/assets/vendor/addon-fit.mjs";
+import { h, icon, clear } from "/assets/js/dom.js";
+import { formatShort } from "/assets/js/format.js";
+import { label, chip, emptyState, richText, dot } from "/assets/js/components.js";
+import { entriesOf, recordCard, recordReader } from "/assets/js/records.js";
+import { messageComposer } from "/assets/js/forms.js";
+import { pageToken } from "/assets/js/api.js";
+
+export function renderDiscussion(host, data, t, locale, actions) {
+  const task = data.task;
+  const composerKey = task.id + "|" + task.status + "|" + locale;
+  let feed = host.querySelector(".feed");
+  const composerWrap = host.querySelector(".composer-wrap");
+  const composer = composerWrap && composerWrap.firstChild;
+  const keepComposer = host.dataset.taskId === task.id && composer
+    && (composer.dataset.key === composerKey || composer.dataset.unsent === "true" || composer.contains(document.activeElement));
+  const previousScroll = feed ? feed.scrollTop : 0;
+  const atEnd = !feed || host.dataset.taskId !== task.id || feed.scrollHeight - feed.clientHeight - feed.scrollTop < 40;
+  if (host.dataset.taskId !== task.id || !feed) {
+    clear(host);
+    host.append(
+      h("div.dock-sub", null, h("span.dock-sub-title", null, t("discussion.title")), h("span.dock-sub-note", null, t("discussion.source"))),
+      h("div.feed", { "aria-label": t("discussion.feed"), tabIndex: 0 }),
+      h("div.composer-wrap"));
+    feed = host.querySelector(".feed");
+  }
+  host.dataset.taskId = task.id;
+  if (!feed.querySelector('[data-reading="true"]')) drawFeed(feed, data, t, locale, actions);
+  feed.scrollTop = atEnd ? feed.scrollHeight : previousScroll;
+  if (!keepComposer) {
+    const next = messageComposer(task, t, actions);
+    next.dataset.key = composerKey;
+    host.querySelector(".composer-wrap").replaceChildren(next);
+  }
+}
+
+export function discussionHasUnsent(host) {
+  return !!host.querySelector('[data-unsent="true"]');
+}
+
+function drawFeed(feed, data, t, locale, actions) {
+  clear(feed);
+  const core = data.core;
+  const entries = entriesOf(core, "task-message").slice().sort(function (a, b) {
+    return Date.parse((a.value && a.value.createdAt) || 0) - Date.parse((b.value && b.value.createdAt) || 0);
+  });
+  if (core.omitted.records) feed.append(h("p.feed-note", null, t("discussion.omitted")));
+  if (!entries.length) {
+    feed.append(emptyState(t("discussion.empty"), "chat"));
+    return;
+  }
+  let lastDay = "";
+  entries.forEach(function (entry) {
+    if (entry.omitted) { feed.append(recordCard(entry, data.task.id, t, actions, { compact: true })); return; }
+    const value = entry.value;
+    const day = value.createdAt ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(new Date(value.createdAt)) : "";
+    if (day && day !== lastDay) { feed.append(h("div.feed-day", null, h("span", null, day))); lastDay = day; }
+    const type = (value.author && value.author.type) || "system";
+    const author = (value.author && value.author.roleName) || label(t, "author", type);
+    const message = h("article.msg.from-" + (type === "user" || type === "operator" ? "user" : type === "role" ? "role" : "system"));
+    message.append(h("span.msg-avatar", { "aria-hidden": "true" }, String(author).slice(0, 1).toUpperCase()));
+    const main = h("div.msg-main", null,
+      h("header.msg-head", null, h("strong", null, author),
+        value.intent ? chip(label(t, "intent", value.intent)) : null,
+        value.kind === "role-result" ? chip(label(t, "messageKind", value.kind)) : null,
+        h("time", { dateTime: value.createdAt || "" }, formatShort(value.createdAt, locale))),
+      h("div.msg-bubble", null, richText(null, value.body || "", t, { threshold: 900 })));
+    main.append(recordReader(entry, data.task.id, t, actions));
+    message.append(main);
+    feed.append(message);
+  });
+}
+
+// --- Live native Session ----------------------------------------------------------
+function cssVar(name, fallback) {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+function terminalTheme() {
+  return {
+    background: cssVar("--term-bg", "#0b0c0d"),
+    foreground: cssVar("--term-fg", "#e6e6e8"),
+    cursor: cssVar("--term-cursor", "#ff7a52"),
+    selectionBackground: cssVar("--term-sel", "#3a2a24")
+  };
+}
+
+function cliFor(target) {
+  if (target.scope === "task") return "yui task role session inspect " + target.taskId + " " + target.roleName;
+  return target.roleName === "operator" ? "yui operator enter" : "yui session enter " + target.roleName;
+}
+
+export function sameTarget(left, right) {
+  return !!left && !!right && left.scope === right.scope && left.roleName === right.roleName
+    && (left.scope !== "task" || left.taskId === right.taskId);
+}
+
+export function createTerminalController(elements, t, locale, notify) {
+  let session = null;
+  let current = null;
+  let stateKey = "terminal.idle";
+  let targets = [];
+
+  function setState(key, state) {
+    stateKey = key;
+    elements.state.dataset.state = state;
+    elements.state.lastChild.textContent = t(key);
+  }
+  function drawTargets() {
+    clear(elements.targets);
+    targets.forEach(function (target) {
+      elements.targets.append(h("button.target-chip", {
+        type: "button",
+        "aria-pressed": String(sameTarget(target, current)),
+        title: target.scope === "task" ? target.taskId + " / " + target.roleName : t("terminal.global") + " / " + target.roleName,
+        onclick: function () { open(target); }
+      }, target.scope === "task" ? dot(target.live ? "ok" : "idle") : icon("broadcast", "icon-sm"), h("span", null, target.roleName)));
+    });
+    if (!targets.length) elements.targets.append(h("span.faint.small", null, t("terminal.noTargets")));
+  }
+  function dispose() {
+    if (!session) return;
+    const owned = session;
+    session = null;
+    owned.resizeObserver.disconnect();
+    owned.input.dispose();
+    owned.socket.close();
+    owned.terminal.dispose();
+    clear(elements.host);
+  }
+  function close() {
+    dispose();
+    current = null;
+    elements.empty.hidden = false;
+    elements.cli.textContent = "yui operator enter";
+    setState("terminal.idle", "idle");
+    drawTargets();
+  }
+  function open(target) {
+    dispose();
+    current = target;
+    elements.empty.hidden = true;
+    elements.cli.textContent = cliFor(target);
+    setState("terminal.connecting", "connecting");
+    drawTargets();
+    const terminal = new Terminal({
+      cursorBlink: true,
+      scrollback: 0,
+      convertEol: false,
+      fontFamily: '"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace',
+      fontSize: 12.5,
+      lineHeight: 1.15,
+      theme: terminalTheme()
+    });
+    const fit = new FitAddon();
+    terminal.loadAddon(fit);
+    terminal.open(elements.host);
+    try { fit.fit(); } catch {}
+    let writable = false;
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const parameters = new URLSearchParams({
+      scope: target.scope, role: target.roleName, cols: String(terminal.cols), rows: String(terminal.rows), token: pageToken()
+    });
+    if (target.scope === "task") parameters.set("task", target.taskId);
+    const socket = new WebSocket(protocol + "//" + window.location.host + "/api/terminal?" + parameters.toString());
+    const input = terminal.onData(function (data) {
+      if (writable && socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "input", data: data }));
+    });
+    const resizeObserver = new ResizeObserver(function () {
+      if (!session || session.terminal !== terminal || !elements.host.offsetWidth) return;
+      try { fit.fit(); } catch { return; }
+      if (socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({ type: "resize", columns: terminal.cols, rows: terminal.rows }));
+      }
+    });
+    resizeObserver.observe(elements.host);
+    socket.addEventListener("message", function (event) {
+      let message;
+      try { message = JSON.parse(event.data); } catch { return; }
+      if (message.type === "ready") {
+        writable = !message.readOnly;
+        setState(writable ? "terminal.writable" : "terminal.readOnly", writable ? "writable" : "readonly");
+        if (message.history && message.history.limit < message.history.target) {
+          const number = new Intl.NumberFormat(locale());
+          notify(t("terminal.historyLimited").replace("{current}", number.format(message.history.limit))
+            .replace("{target}", number.format(message.history.target)));
+        }
+        terminal.focus();
+      } else if (message.type === "data") terminal.write(message.data);
+      else if (message.type === "exit") setState("terminal.closed", "closed");
+      else if (message.type === "error") {
+        setState("terminal.error", "error");
+        terminal.writeln("\r\n" + message.message);
+      }
+    });
+    socket.addEventListener("close", function () {
+      writable = false;
+      if (stateKey !== "terminal.error") setState("terminal.closed", "closed");
+    });
+    socket.addEventListener("error", function () {
+      writable = false;
+      setState("terminal.error", "error");
+      terminal.writeln(t("terminal.errorDetail"));
+    });
+    session = { terminal, socket, input, resizeObserver };
+  }
+  drawTargets();
+  return {
+    open: open,
+    close: close,
+    current: function () { return current; },
+    connected: function () { return !!session; },
+    setTargets: function (next) { targets = next; drawTargets(); },
+    relabel: function () { setState(stateKey, elements.state.dataset.state); drawTargets(); },
+    retheme: function () { if (session) session.terminal.options.theme = terminalTheme(); }
+  };
+}
+`;

package/dist/web/assets/client/dom.js

@@ -1,6 +1,9 @@
-export const DOM_SCRIPT = `
-// Tiny DOM factory shared by every client module. Kept dependency-free so it
-// can be imported by components and views alike.
+import { ICON_PATHS } from "../icons.js";
+export const DOM_SCRIPT = String.raw `
+// Dependency-free DOM helpers shared by every client module.
+const ICONS = ${JSON.stringify(ICON_PATHS)};
+const SVG = "http://www.w3.org/2000/svg";
+
 export function node(tagName, className, textContent) {
   const element = document.createElement(tagName);
   if (className) element.className = className;
@@ -8,6 +11,55 @@ export function node(tagName, className, textContent) {
   return element;
 }
 
+// h("button.btn.btn-primary", { type: "button", onclick }, child, "text", ...)
+// Attributes: "class", "dataset", "on<event>" handlers, boolean props and
+// plain attributes. Children may be nodes, strings, arrays, null or false.
+export function h(spec, attrs) {
+  const parts = String(spec).split(".");
+  const element = document.createElement(parts[0] || "div");
+  if (parts.length > 1) element.className = parts.slice(1).join(" ");
+  const children = Array.prototype.slice.call(arguments, 2);
+  if (attrs && (attrs instanceof Node || typeof attrs !== "object" || Array.isArray(attrs))) {
+    children.unshift(attrs);
+    attrs = null;
+  }
+  if (attrs) {
+    Object.keys(attrs).forEach(function (key) {
+      const value = attrs[key];
+      if (value === undefined || value === null || value === false) return;
+      if (key === "class") element.className = (element.className ? element.className + " " : "") + value;
+      else if (key === "dataset") Object.assign(element.dataset, value);
+      else if (key.startsWith("on") && typeof value === "function") element.addEventListener(key.slice(2), value);
+      else if (key in element && typeof value !== "string") element[key] = value;
+      else element.setAttribute(key, value === true ? "" : String(value));
+    });
+  }
+  append(element, children);
+  return element;
+}
+
+function append(element, children) {
+  children.forEach(function (child) {
+    if (child === undefined || child === null || child === false) return;
+    if (Array.isArray(child)) append(element, child);
+    else element.append(child instanceof Node ? child : document.createTextNode(String(child)));
+  });
+}
+
+export function icon(name, className) {
+  const svg = document.createElementNS(SVG, "svg");
+  svg.setAttribute("class", "icon" + (className ? " " + className : ""));
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  (ICONS[name] || []).forEach(function (d) {
+    const path = document.createElementNS(SVG, "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+  });
+  return svg;
+}
+
 export function clear(element) {
   element.replaceChildren();
 }