@felixdotgo/aidlc-kit 0.1.1 → 0.3.0

package/dist/src/ui/views/components.d.ts

@@ -0,0 +1,56 @@
+export declare const PHASES: readonly ["clarify", "plan", "build", "wrap", "done"];
+export declare const summarize: (counts: Record<string, number> | undefined) => string;
+export declare const GATE_LABELS: Record<string, string>;
+export declare const PHASE_GATE: Record<string, string>;
+export declare const STATUS_META: Record<string, {
+    label: string;
+    tone: string;
+}>;
+export declare const RISK_TONE: Record<string, string>;
+export declare const RESULT_TONE: Record<string, string>;
+export declare const DECISION_TONE: Record<string, string>;
+export declare const ITEM_TONE: Record<string, string>;
+export declare const gateLabel: (gate: string) => string;
+export declare const pill: (label: string, tone?: string, title?: string, dot?: boolean) => string;
+export declare const statusPill: (status: string, handedOff?: boolean) => string;
+export declare const gatePill: (gate: string) => string;
+/** Human feedback recorded at a gate and not yet followed by that gate's approval. */
+export declare const feedbackPill: (count: number) => string;
+export declare const riskPill: (risk: string) => string;
+export declare const phaseSteps: (phase: string) => string;
+/** Horizontal phase stepper shown above the artifacts (detail page and drawer). A pulse
+ * ring marks the current step while the task is live; `stalled` (handed off) suppresses it. */
+export declare const phaseStepper: (phase: string, gate: string, status: string, stalled?: boolean) => string;
+/** Server-rendered relative time; the absolute ISO value stays in the title. */
+export declare const relativeTime: (iso: string | undefined) => string;
+export interface GateViewData {
+    icon?: string;
+    title?: string;
+    gate?: string;
+    action?: string;
+    task?: {
+        id?: string;
+        title?: string;
+        status?: string;
+        risk?: string;
+        areas?: string[];
+    };
+    artifacts?: Array<{
+        name?: string;
+        path?: string;
+    }>;
+    decisions?: Record<string, number>;
+    execution?: Record<string, number>;
+    evidence?: Array<{
+        kind?: string;
+        result?: string;
+        source?: string;
+    }>;
+    diagnostics?: Array<{
+        level?: string;
+        code?: string;
+        message?: string;
+    }>;
+}
+/** `actions`: extra trusted HTML (e.g. a link to the task's changes) shown above the action callout. */
+export declare const renderGateViewHtml: (view: unknown, actions?: string) => string;

package/dist/src/ui/views/components.js

@@ -0,0 +1,113 @@
+/**
+ * Presentation helpers shared by the dashboard, task pages, and live regions:
+ * labels, pills, phase stepper, relative time, and the structured gate view.
+ */
+import { escapeHtml } from "../http.js";
+export const PHASES = ["clarify", "plan", "build", "wrap", "done"];
+export const summarize = (counts) => Object.entries(counts ?? {}).map(([k, n]) => `${n} ${k}`).join(" · ") || "none";
+/* ---------------------------------------------------------------------------
+ * Presentation helpers: labels, pills, phase stepper, relative time.
+ * Colour is never the only signal; every pill carries a text label.
+ * ------------------------------------------------------------------------- */
+export const GATE_LABELS = {
+    G0_confirm: "Confirm requirements",
+    G1_review: "Approve plan",
+    G2_codereview: "Review implementation",
+};
+export const PHASE_GATE = { clarify: "G0_confirm", plan: "G1_review", build: "G2_codereview" };
+export const STATUS_META = {
+    active: { label: "Active", tone: "is-info" },
+    blocked_on_user: { label: "Needs review", tone: "is-warning" },
+    paused: { label: "Paused", tone: "" },
+    done: { label: "Done", tone: "is-success" },
+    closed: { label: "Closed", tone: "is-danger" },
+    superseded: { label: "Superseded", tone: "is-danger" },
+};
+export const RISK_TONE = { low: "is-success", normal: "", high: "is-warning", regulated: "is-danger" };
+export const RESULT_TONE = { pass: "is-success", fail: "is-danger", skip: "is-warning" };
+export const DECISION_TONE = { approved: "is-success", changed: "is-info", dropped: "is-ghost", unresolved: "is-warning" };
+export const ITEM_TONE = { done: "is-success", in_progress: "is-info", todo: "", deferred: "is-warning" };
+export const gateLabel = (gate) => GATE_LABELS[gate] ?? gate;
+export const pill = (label, tone = "", title = "", dot = true) => `<span class="ad-pill ${tone}"${title ? ` title="${escapeHtml(title)}"` : ""}>${dot ? '<span class="ad-dot"></span>' : ""}${escapeHtml(label)}</span>`;
+export const statusPill = (status, handedOff = false) => {
+    if (handedOff)
+        return pill("Handed off", "is-danger", `status: ${status} · handed off`);
+    const meta = STATUS_META[status] ?? { label: status, tone: "" };
+    return pill(meta.label, meta.tone, `status: ${status}`);
+};
+export const gatePill = (gate) => gate && gate !== "none" ? pill(gateLabel(gate), "is-ghost", `gate: ${gate}`, false) : "";
+/** Human feedback recorded at a gate and not yet followed by that gate's approval. */
+export const feedbackPill = (count) => count > 0 ? `<span class="ad-pill is-info" data-feedback-pending="${count}" title="${count} human feedback item${count === 1 ? "" : "s"} not yet followed by an approval">✎ feedback pending${count > 1 ? ` · ${count}` : ""}</span>` : "";
+export const riskPill = (risk) => pill(`${risk} risk`, RISK_TONE[risk] ?? "", `risk: ${risk}`);
+export const phaseSteps = (phase) => {
+    const current = PHASES.indexOf(phase);
+    const done = phase === "done";
+    const bars = PHASES.map((name, index) => {
+        const state = done || index < current ? "is-complete" : index === current ? "is-current" : "";
+        return `<span class="${state}" title="${escapeHtml(name)}"></span>`;
+    }).join("");
+    return `<div class="ad-steps${done ? " is-done" : ""}" role="img" aria-label="Phase ${current + 1} of ${PHASES.length}: ${escapeHtml(phase)}">${bars}</div>`;
+};
+/** Statuses whose current step shows the "radioactive" pulse: the task is moving
+ * (`active`) or waiting for a human (`blocked_on_user`, pulsed in the warning tone). */
+const PULSE_STATUSES = new Set(["active", "blocked_on_user"]);
+/** Horizontal phase stepper shown above the artifacts (detail page and drawer). A pulse
+ * ring marks the current step while the task is live; `stalled` (handed off) suppresses it. */
+export const phaseStepper = (phase, gate, status, stalled = false) => {
+    const current = PHASES.indexOf(phase);
+    const pulse = !stalled && phase !== "done" && PULSE_STATUSES.has(status)
+        ? `<span class="ad-pulse${status === "blocked_on_user" ? " is-waiting" : ""}" aria-hidden="true"></span>`
+        : "";
+    return `<ol class="ad-stepper" aria-label="Progress">${PHASES.map((name, index) => {
+        const complete = phase === "done" || index < current;
+        const isCurrent = !complete && index === current;
+        const phaseGate = PHASE_GATE[name];
+        const note = isCurrent && status === "blocked_on_user" && gate !== "none"
+            ? `waiting at ${gateLabel(gate)}`
+            : phaseGate ? `gate · ${gateLabel(phaseGate)}` : name === "done" ? "complete" : "no gate";
+        return `<li class="${complete ? "is-complete" : isCurrent ? "is-current" : ""}"${isCurrent ? ' aria-current="step"' : ""}><span class="ad-stepper-marker">${isCurrent ? pulse : ""}${complete ? "✓" : index + 1}</span><span class="ad-stepper-text"><strong>${escapeHtml(name)}</strong><small>${escapeHtml(note)}</small></span></li>`;
+    }).join("")}</ol>`;
+};
+/** Server-rendered relative time; the absolute ISO value stays in the title. */
+export const relativeTime = (iso) => {
+    if (!iso)
+        return "";
+    const at = Date.parse(iso);
+    if (Number.isNaN(at))
+        return escapeHtml(iso);
+    const seconds = Math.max(0, Math.round((Date.now() - at) / 1000));
+    const text = seconds < 60 ? "just now"
+        : seconds < 3600 ? `${Math.floor(seconds / 60)}m ago`
+            : seconds < 86400 ? `${Math.floor(seconds / 3600)}h ago`
+                : `${Math.floor(seconds / 86400)}d ago`;
+    return `<time datetime="${escapeHtml(iso)}" title="${escapeHtml(iso)}">${text}</time>`;
+};
+/** `actions`: extra trusted HTML (e.g. a link to the task's changes) shown above the action callout. */
+export const renderGateViewHtml = (view, actions = "") => {
+    const v = view;
+    const task = v.task ?? {};
+    const artifacts = v.artifacts ?? [];
+    const evidence = v.evidence ?? [];
+    const diagnostics = v.diagnostics ?? [];
+    const levelTone = (level) => level === "ERROR" ? "is-danger" : level === "WARN" ? "is-warning" : "is-info";
+    const cell = (label, value) => `<div class="ad-gate-cell"><small>${escapeHtml(label)}</small><span>${value}</span></div>`;
+    return `<section class="ad-panel is-warning" data-key="gate-view">
+    <header class="ad-panel-head"><span aria-hidden="true">${escapeHtml(String(v.icon ?? ""))}</span><h2>${escapeHtml(String(v.title ?? ""))}</h2><span class="ad-pill is-warning ad-panel-tools" title="gate">${escapeHtml(String(v.gate ?? ""))}</span></header>
+    <div class="ad-panel-body">
+      <div class="ad-gate-grid">
+        ${cell("Status", escapeHtml(task.status ?? ""))}
+        ${cell("Risk", escapeHtml(task.risk ?? ""))}
+        ${cell("Areas", escapeHtml((task.areas ?? []).join(", ")))}
+        ${cell("Decisions", escapeHtml(summarize(v.decisions)))}
+        ${cell("Execution", escapeHtml(summarize(v.execution)))}
+      </div>
+      <h3 class="ad-subhead">Review artifacts</h3>
+      ${artifacts.length ? `<ul class="ad-plain-list">${artifacts.map((a) => `<li><strong>${escapeHtml(a.name ?? "")}</strong><code>${escapeHtml(a.path ?? "")}</code></li>`).join("")}</ul>` : '<p class="has-text-grey">none</p>'}
+      <h3 class="ad-subhead">Verification evidence</h3>
+      ${evidence.length ? `<ul class="ad-plain-list">${evidence.map((e) => `<li>${pill(e.result ?? "", RESULT_TONE[e.result ?? ""] ?? "")} <strong>${escapeHtml(e.kind ?? "")}</strong> <span class="has-text-grey">${escapeHtml(e.source ?? "")}</span></li>`).join("")}</ul>` : '<p class="has-text-grey">none yet</p>'}
+      ${diagnostics.length ? `<h3 class="ad-subhead">Diagnostics</h3><ul class="ad-plain-list">${diagnostics.map((d) => `<li>${pill(d.level ?? "", levelTone(d.level))} <code>${escapeHtml(d.code ?? "")}</code> ${escapeHtml(d.message ?? "")}</li>`).join("")}</ul>` : ""}
+      ${actions}
+      <div class="ad-callout"><span aria-hidden="true">→</span><span>Action required: ${escapeHtml(String(v.action ?? ""))}</span></div>
+    </div>
+  </section>`;
+};

package/dist/src/ui/views/docs.d.ts

@@ -0,0 +1,15 @@
+import { type UiOptions } from "../options.js";
+/** GitHub-style heading anchor, so the docs' own `#section` links resolve in-app. */
+export declare const headingSlug: (text: string) => string;
+export interface TocEntry {
+    level: number;
+    id: string;
+    text: string;
+}
+/** Markdown → HTML plus heading ids, in-app links, and GitHub-style callouts. */
+export declare const renderDocHtml: (markdown: string) => {
+    html: string;
+    toc: TocEntry[];
+};
+/** The full docs page, or undefined for an unknown slug (the route answers 404). */
+export declare const renderDocsPage: (options: UiOptions, slug: string) => Promise<string | undefined>;

package/dist/src/ui/views/docs.js

@@ -0,0 +1,64 @@
+/**
+ * `/docs` and `/docs/<slug>`: the packaged guides rendered with the dashboard's markdown
+ * renderer, a page sidebar, and an on-page table of contents.
+ */
+import { DOC_PAGES, readDoc } from "../docs.js";
+import { readUiState } from "../data.js";
+import { escapeHtml } from "../http.js";
+import { markdownToHtml } from "../markdown.js";
+import { uiMode } from "../options.js";
+import { pageHead, pageScripts, renderHeader, renderModals, reviewQueue } from "./layout.js";
+const REPO_DOCS = "https://github.com/felixdotgo/aidlc-kit/blob/main/docs/";
+/** GitHub-style heading anchor, so the docs' own `#section` links resolve in-app. */
+export const headingSlug = (text) => text.replace(/<[^>]+>/g, "").replace(/&[a-z]+;|&#\d+;/g, "").toLowerCase().replace(/[^\p{L}\p{N}\s_-]/gu, "").trim().replace(/\s/g, "-");
+const CALLOUTS = { NOTE: "Note", TIP: "Tip", IMPORTANT: "Important", WARNING: "Warning", CAUTION: "Caution" };
+/** Markdown → HTML plus heading ids, in-app links, and GitHub-style callouts. */
+export const renderDocHtml = (markdown) => {
+    const toc = [];
+    const seen = new Map();
+    let html = markdownToHtml(markdown).replace(/<h([1-4])>([\s\S]*?)<\/h\1>/g, (_match, level, inner) => {
+        const base = headingSlug(inner) || "section";
+        const count = seen.get(base) ?? 0;
+        seen.set(base, count + 1);
+        const id = count ? `${base}-${count}` : base;
+        // `inner` is already escaped by the renderer; the tags are dropped, the entities kept as-is.
+        if (level === "2" || level === "3")
+            toc.push({ level: Number(level), id, text: inner.replace(/<[^>]+>/g, "") });
+        return `<h${level} id="${id}"><a class="ad-doc-anchor" href="#${id}" aria-hidden="true">#</a>${inner}</h${level}>`;
+    });
+    // Relative links between guides stay in the app; other repo docs open on GitHub.
+    html = html.replace(/href="(?:\.\/)?([A-Za-z0-9-]+)\.md(#[^"]*)?"/g, (_match, slug, hash = "") => DOC_PAGES.some((page) => page.slug === slug) ? `href="/docs/${slug}${hash}"` : `href="${REPO_DOCS}${slug}.md${hash}" target="_blank" rel="noopener"`);
+    html = html.replace(/<blockquote>\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/g, (_match, kind) => `<blockquote class="ad-doc-callout is-${kind.toLowerCase()}"><strong class="ad-doc-callout-title">${CALLOUTS[kind] ?? kind}</strong> `);
+    return { html, toc };
+};
+/** The full docs page, or undefined for an unknown slug (the route answers 404). */
+export const renderDocsPage = async (options, slug) => {
+    const doc = readDoc(slug);
+    if (!doc)
+        return undefined;
+    const { html, toc } = renderDocHtml(doc.markdown);
+    const state = await readUiState(options);
+    const nav = DOC_PAGES.map((page) => `<li><a href="/docs/${page.slug}"${page.slug === slug ? ' class="is-active" aria-current="page"' : ""}>${escapeHtml(page.label)}</a></li>`).join("");
+    const contents = toc.length
+        ? `<p class="ad-docs-nav-title">On this page</p><ul class="ad-docs-toc">${toc.map((entry) => `<li class="is-level-${entry.level}"><a href="#${entry.id}">${entry.text}</a></li>`).join("")}</ul>`
+        : "";
+    return `${pageHead(`${doc.page.label} · Docs · Loop`)}
+${renderHeader(options.root, uiMode(options), reviewQueue(state))}
+<main class="section ad-main">
+  <div class="container is-fluid">
+    <nav class="breadcrumb is-small mb-3" aria-label="breadcrumbs"><ul><li><a href="/">Loop</a></li><li><a href="/docs">Docs</a></li><li class="is-active"><a href="/docs/${doc.page.slug}" aria-current="page">${escapeHtml(doc.page.label)}</a></li></ul></nav>
+    <div class="ad-docs">
+      <aside class="ad-docs-nav" aria-label="Documentation">
+        <p class="ad-docs-nav-title">Guides</p>
+        <ul class="ad-docs-pages">${nav}</ul>
+        ${contents}
+      </aside>
+      <article class="ad-panel ad-docs-body"><div class="content artifact">${html}</div></article>
+    </div>
+  </div>
+</main>
+${renderModals()}
+${pageScripts("common")}
+</body>
+</html>`;
+};

package/dist/src/ui/views/layout.d.ts

@@ -0,0 +1,44 @@
+import type { WorkflowState } from "../../model.js";
+import { type ClientScript } from "../assets.js";
+import type { UiAuthorityMode } from "../options.js";
+/** `task` marks a task detail page: live updates refresh that task's regions. The
+ * inline head scripts apply the saved kanban/list view and the saved theme
+ * (`localStorage["aidlc-settings"].theme`, see `assets/ui/common.js`) before first
+ * paint; `system` leaves `data-theme` unset so the OS preference applies. */
+export declare const pageHead: (title: string, task?: string) => string;
+/** Classic `<script src>` tags in load order (`common` first; page scripts after it). */
+export declare const pageScripts: (...names: ClientScript[]) => string;
+/** Region names `/api/live` can render; anything else in `known` is ignored. */
+export declare const LIVE_REGIONS: readonly ["notify", "daemon", "board", "detail", "drawer"];
+export type LiveRegion = (typeof LIVE_REGIONS)[number];
+export declare const regionHash: (html: string) => string;
+/** Wrapper is `display: contents`, so it never affects layout (e.g. header flex items). */
+export declare const liveRegion: (name: LiveRegion, html: string) => string;
+/** Daemon state for the header: running/stopped, plus unresolved turn or poll
+ * errors (from the event log) while it runs, so failures are not buried in logs. */
+export declare const renderDaemonPill: (root: string) => string;
+/** A task waiting at a human gate (not handed off): shown as a header notification. */
+export interface ReviewItem {
+    id: string;
+    title: string;
+    gate: string;
+    updatedAt?: string;
+    feedbackPending: number;
+}
+/** Every task waiting at a human gate, newest first. Handed-off tasks follow their
+ * handoff actions instead, and terminal (archived) tasks never wait at a gate. */
+export declare const reviewQueue: (state: WorkflowState) => ReviewItem[];
+/** Notifications shown at first; "Load more" adds this many at a time. The client
+ * reads it from `<body data-notify-page>` (see pageHead). */
+export declare const NOTIFY_PAGE = 5;
+export declare const notifyLimit: (raw: string | null) => number;
+/** Header bell: a count badge plus a dropdown whose items open the task detail
+ * page (where gate feedback and approval live). Shows `limit` items and a
+ * "Load more" button for the rest. The panel's `hidden` and the toggle's
+ * `aria-expanded` are client state that live updates preserve. */
+export declare const renderNotifications: (reviews: ReviewItem[], currentTask?: string, limit?: number) => string;
+export declare const renderHeader: (root: string, mode?: UiAuthorityMode, reviews?: ReviewItem[], currentTask?: string) => string;
+/** Settings dialog: client-side preferences stored in this browser (`aidlc-settings`,
+ * see `assets/ui/common.js` `aidlcSettings`). The form is read and written by the
+ * client; every control id is `settings-<key>`. */
+export declare const renderModals: () => string;

package/dist/src/ui/views/layout.js

@@ -0,0 +1,233 @@
+/**
+ * Page chrome shared by the dashboard and task pages: document head, live-region
+ * wrappers, header (daemon pill, review bell), dialogs, and client script tags.
+ */
+import { createHash } from "node:crypto";
+import { scriptTag, stylesheetTag } from "../assets.js";
+import { daemonHealth, daemonStatus } from "../daemon.js";
+import { pendingFeedback } from "../data.js";
+import { escapeHtml } from "../http.js";
+import { feedbackPill, gateLabel, pill, relativeTime } from "./components.js";
+/** `task` marks a task detail page: live updates refresh that task's regions. The
+ * inline head scripts apply the saved kanban/list view and the saved theme
+ * (`localStorage["aidlc-settings"].theme`, see `assets/ui/common.js`) before first
+ * paint; `system` leaves `data-theme` unset so the OS preference applies. */
+export const pageHead = (title, task = "") => `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+<meta name="color-scheme" content="light dark">
+${stylesheetTag("bulma")}
+${stylesheetTag("dashboard")}
+<script>try { document.documentElement.setAttribute("data-view", localStorage.getItem("aidlc-view") === "list" ? "list" : "kanban"); } catch (error) { /* storage disabled */ }</script>
+<script>try { const theme = JSON.parse(localStorage.getItem("aidlc-settings") || "{}").theme; if (theme === "light" || theme === "dark") document.documentElement.setAttribute("data-theme", theme); } catch (error) { /* storage disabled or malformed */ }</script>
+</head>
+<body${task ? ` data-task="${escapeHtml(task)}"` : ""} data-notify-page="${NOTIFY_PAGE}">`;
+/** Classic `<script src>` tags in load order (`common` first; page scripts after it). */
+export const pageScripts = (...names) => names.map(scriptTag).join("\n");
+/* ---------------------------------------------------------------------------
+ * Live regions: server-rendered fragments the client polls and morphs in place.
+ * Each region carries a content hash; `/api/live` returns only regions whose
+ * hash differs from the one the client already shows.
+ * ------------------------------------------------------------------------- */
+/** Region names `/api/live` can render; anything else in `known` is ignored. */
+export const LIVE_REGIONS = ["notify", "daemon", "board", "detail", "drawer"];
+export const regionHash = (html) => createHash("sha1").update(html).digest("base64url").slice(0, 16);
+/** Wrapper is `display: contents`, so it never affects layout (e.g. header flex items). */
+export const liveRegion = (name, html) => `<div class="ad-live" data-live="${name}" data-live-hash="${regionHash(html)}">${html}</div>`;
+/** Daemon state for the header: running/stopped, plus unresolved turn or poll
+ * errors (from the event log) while it runs, so failures are not buried in logs. */
+export const renderDaemonPill = (root) => {
+    const daemon = daemonStatus(root);
+    if (!daemon.running)
+        return `<span class="ad-pill is-ghost" data-daemon="stopped" title="start it with: aidlc-kit loop start (or New task)"><span class="ad-dot"></span>daemon stopped</span>`;
+    const errors = daemonHealth(root);
+    if (!errors.length)
+        return `<span class="ad-pill is-success is-live" data-daemon="running" title="started ${escapeHtml(daemon.startedAt ?? "")}"><span class="ad-dot"></span>daemon running · pid ${daemon.pid}</span>`;
+    const describe = (error) => `${error.taskId ? `${error.taskId}: ` : "poll: "}${error.message}${error.retryInMs ? ` (retry in ${Math.round(error.retryInMs / 1000)}s)` : ""}`;
+    const title = `daemon running · pid ${daemon.pid}\n${errors.map(describe).join("\n")}`;
+    const label = `<span class="ad-dot"></span>daemon · ${errors.length} error${errors.length === 1 ? "" : "s"}`;
+    const only = errors.length === 1 ? errors[0]?.taskId : undefined;
+    return only
+        ? `<a class="ad-pill is-warning is-live" data-daemon="error" href="/tasks/${encodeURIComponent(only)}" title="${escapeHtml(title)}">${label}</a>`
+        : `<span class="ad-pill is-warning is-live" data-daemon="error" title="${escapeHtml(title)}">${label}</span>`;
+};
+/** Every task waiting at a human gate, newest first. Handed-off tasks follow their
+ * handoff actions instead, and terminal (archived) tasks never wait at a gate. */
+export const reviewQueue = (state) => Object.values(state.tasks)
+    .filter((task) => task.status === "blocked_on_user" && task.gate !== "none" && !task.handoff)
+    .map((task) => ({ id: task.id, title: task.title, gate: task.gate, updatedAt: task.updatedAt, feedbackPending: pendingFeedback(task).length }))
+    .sort((a, b) => (b.updatedAt ?? "").localeCompare(a.updatedAt ?? ""));
+/** Notifications shown at first; "Load more" adds this many at a time. The client
+ * reads it from `<body data-notify-page>` (see pageHead). */
+export const NOTIFY_PAGE = 5;
+const NOTIFY_MAX = 100;
+export const notifyLimit = (raw) => {
+    const value = Number(raw);
+    return Number.isSafeInteger(value) && value > 0 ? Math.min(NOTIFY_MAX, Math.max(NOTIFY_PAGE, value)) : NOTIFY_PAGE;
+};
+/** Header bell: a count badge plus a dropdown whose items open the task detail
+ * page (where gate feedback and approval live). Shows `limit` items and a
+ * "Load more" button for the rest. The panel's `hidden` and the toggle's
+ * `aria-expanded` are client state that live updates preserve. */
+export const renderNotifications = (reviews, currentTask = "", limit = NOTIFY_PAGE) => {
+    const count = reviews.length;
+    const shown = reviews.slice(0, limit);
+    const remaining = count - shown.length;
+    const label = count ? `${count} task${count === 1 ? "" : "s"} waiting for your review` : "Nothing waiting for your review";
+    const items = count
+        ? `<ul class="ad-notify-list">${shown.map((task) => `<li data-key="review:${escapeHtml(task.id)}"><a class="ad-notify-item" href="/tasks/${encodeURIComponent(task.id)}" data-review-item="${escapeHtml(task.id)}"${task.id === currentTask ? ' aria-current="page"' : ""}>
+        <span class="ad-notify-row">${pill(gateLabel(task.gate), "is-warning", `gate: ${task.gate}`, false)}${task.feedbackPending ? feedbackPill(task.feedbackPending) : ""}<span class="ad-notify-time">${relativeTime(task.updatedAt)}</span></span>
+        <span class="ad-notify-title">${escapeHtml(task.title)}</span>
+        <code class="ad-notify-id">${escapeHtml(task.id)}</code>
+      </a></li>`).join("")}</ul>${remaining > 0 ? `<button type="button" class="ad-notify-more" data-notify-more>Load more <span class="has-text-grey">(${remaining} more)</span></button>` : ""}`
+        : '<p class="ad-notify-empty">Nothing waiting for your review.</p>';
+    return `<div class="ad-notify" data-notify>
+      <button type="button" class="button is-small ad-notify-toggle${count ? " has-reviews" : ""}" id="notify-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="notify-panel" aria-label="${escapeHtml(label)}" title="${escapeHtml(label)}" data-live-preserve="aria-expanded">
+        <svg aria-hidden="true" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8a5 5 0 0 1 10 0c0 4 1.5 5.5 1.5 5.5h-13S5 12 5 8Z"/><path d="M8.5 16.5a1.6 1.6 0 0 0 3 0"/></svg>
+        ${count ? `<span class="ad-notify-badge" data-review-count="${count}">${count}</span>` : ""}
+      </button>
+      <div class="ad-notify-panel" id="notify-panel" role="region" aria-label="Needs your review" hidden data-live-preserve="hidden">
+        <header class="ad-notify-head"><strong>Needs your review</strong><span class="ad-count">${count}</span></header>
+        ${items}
+      </div>
+    </div>`;
+};
+export const renderHeader = (root, mode = "local", reviews = [], currentTask = "") => `<header class="ad-header">
+  <div class="container is-fluid ad-header-inner">
+    <a class="ad-brand" href="/" title="Loop · AI-DLC dashboard"><span class="ad-logo" aria-hidden="true">L</span>Loop</a>
+    <span class="ad-pill ${mode === "fleet" ? "is-link" : "is-ghost"}" data-authority="${mode}" title="${mode === "fleet" ? "Canonical state lives in the coordination service" : "Canonical state lives in this checkout"}">authority · ${mode}</span>
+    ${liveRegion("daemon", renderDaemonPill(root))}
+    <span id="live-status" class="ad-pill is-warning" role="status" title="Live updates paused: the dashboard server is unreachable; retrying" hidden><span class="ad-dot"></span>reconnecting…</span>
+    <div class="ad-header-actions">
+      ${liveRegion("notify", renderNotifications(reviews, currentTask))}
+      <a class="button is-small" href="/docs" title="Guides: setup, configuration, commands, troubleshooting">?<span class="ad-hide-mobile ml-1">Docs</span></a>
+      <button class="button is-small" data-open="settings-modal" title="Settings">⚙<span class="ad-hide-mobile ml-1">Settings</span></button>
+      <button class="button is-small is-primary" data-open="new-task-drawer">＋ New task<kbd class="ad-hide-mobile">N</kbd></button>
+    </div>
+  </div>
+</header>`;
+/** Settings dialog: client-side preferences stored in this browser (`aidlc-settings`,
+ * see `assets/ui/common.js` `aidlcSettings`). The form is read and written by the
+ * client; every control id is `settings-<key>`. */
+export const renderModals = () => `
+<div id="settings-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="settings-title">
+  <div class="modal-background" data-close></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title" id="settings-title">Settings</p>
+      <button class="delete" aria-label="close" data-close></button>
+    </header>
+    <section class="modal-card-body">
+      <form id="settings-form" class="ad-settings" novalidate>
+        <fieldset class="ad-settings-group">
+          <legend class="label">Appearance</legend>
+          <div class="field">
+            <div class="control ad-settings-radios" role="radiogroup" aria-label="Theme">
+              <label class="radio"><input type="radio" name="settings-theme" id="settings-theme-system" value="system" data-autofocus> System</label>
+              <label class="radio"><input type="radio" name="settings-theme" id="settings-theme-light" value="light"> Light</label>
+              <label class="radio"><input type="radio" name="settings-theme" id="settings-theme-dark" value="dark"> Dark</label>
+            </div>
+            <p class="help">System follows the operating system's light/dark preference.</p>
+          </div>
+        </fieldset>
+        <fieldset class="ad-settings-group">
+          <legend class="label">Live updates</legend>
+          <div class="field">
+            <label class="label is-small" for="settings-livePoll">Refresh every</label>
+            <div class="control"><div class="select is-small"><select id="settings-livePoll"><option value="1500">1.5 seconds</option><option value="3000">3 seconds</option><option value="0">Paused</option></select></div></div>
+            <p class="help">How often the page asks the server for changes. Paused keeps the page as it is until you reload or change this.</p>
+          </div>
+          <div class="field">
+            <label class="checkbox"><input type="checkbox" id="settings-notify"> Browser notification when a task waits for your review</label>
+            <p class="help" id="settings-notify-state"></p>
+          </div>
+        </fieldset>
+        <fieldset class="ad-settings-group">
+          <legend class="label">Live log</legend>
+          <div class="field">
+            <label class="label is-small" for="settings-logFilter">Default filter</label>
+            <div class="control"><div class="select is-small"><select id="settings-logFilter"><option value="important">Important</option><option value="all">All events</option></select></div></div>
+          </div>
+          <div class="field">
+            <label class="checkbox"><input type="checkbox" id="settings-logRaw"> Show raw JSON by default</label>
+            <p class="help">Used when a page has no log preference of its own yet.</p>
+          </div>
+        </fieldset>
+        <fieldset class="ad-settings-group">
+          <legend class="label">Code changes</legend>
+          <div class="field">
+            <label class="checkbox"><input type="checkbox" id="settings-diffWrap"> Wrap long lines</label>
+          </div>
+          <div class="field">
+            <label class="checkbox"><input type="checkbox" id="settings-diffIgnoreWs"> Ignore whitespace changes</label>
+          </div>
+        </fieldset>
+        <fieldset class="ad-settings-group">
+          <legend class="label">Containers</legend>
+          <div class="field">
+            <label class="label is-small" for="settings-logTailKb">Container log tail</label>
+            <div class="control"><div class="select is-small"><select id="settings-logTailKb"><option value="64">64 KiB</option><option value="256">256 KiB</option><option value="1024">1024 KiB</option></select></div></div>
+          </div>
+        </fieldset>
+        <fieldset class="ad-settings-group">
+          <legend class="label">Board</legend>
+          <div class="field">
+            <label class="label is-small" for="settings-openCards">Clicking a card opens</label>
+            <div class="control"><div class="select is-small"><select id="settings-openCards"><option value="panel">The side panel</option><option value="page">The task page</option></select></div></div>
+            <p class="help">Ctrl/Cmd-click and middle-click always open the task page in a new tab; shift-click in this tab.</p>
+          </div>
+        </fieldset>
+      </form>
+    </section>
+    <footer class="modal-card-foot">
+      <span class="ad-foot-start">Stored in this browser only</span>
+      <button type="button" id="settings-reset" class="button is-light">Reset to defaults</button>
+      <button type="button" id="settings-save" class="button is-primary">Save</button>
+    </footer>
+  </div>
+</div>
+<div id="new-task-drawer" class="ad-drawer is-compose" role="dialog" aria-modal="true" aria-labelledby="new-task-title" hidden>
+  <div class="ad-drawer-backdrop" data-drawer-close></div>
+  <aside class="ad-drawer-panel" tabindex="-1">
+    <header class="ad-drawer-head">
+      <h2 id="new-task-title" class="ad-drawer-heading">New task</h2>
+      <button type="button" class="delete" aria-label="Close the new task panel" data-drawer-close></button>
+    </header>
+    <div class="ad-drawer-body">
+      <p class="ad-compose-intro">Describe the feature, bug fix, or change. The first line becomes the task title; the loop creates the task and starts the daemon if it is not running.</p>
+      <div class="ad-editor" data-editor>
+        <div class="ad-editor-bar">
+          <div class="ad-editor-tabs" role="tablist" aria-label="Editor mode">
+            <button type="button" role="tab" id="new-task-tab-write" aria-selected="true" aria-controls="new-task-requirement" data-editor-tab="write">Write</button>
+            <button type="button" role="tab" id="new-task-tab-preview" aria-selected="false" aria-controls="new-task-preview" data-editor-tab="preview">Preview</button>
+          </div>
+          <div class="ad-editor-tools" role="toolbar" aria-label="Formatting"><button type="button" class="ad-editor-tool" data-md="heading" title="Heading" aria-label="Heading">H</button><button type="button" class="ad-editor-tool" data-md="bold" title="Bold (Ctrl+B)" aria-label="Bold"><b>B</b></button><button type="button" class="ad-editor-tool" data-md="italic" title="Italic (Ctrl+I)" aria-label="Italic"><i>I</i></button><button type="button" class="ad-editor-tool" data-md="code" title="Inline code" aria-label="Inline code">&lt;/&gt;</button><button type="button" class="ad-editor-tool" data-md="codeblock" title="Code block" aria-label="Code block">{ }</button><button type="button" class="ad-editor-tool" data-md="ul" title="Bulleted list" aria-label="Bulleted list">•≡</button><button type="button" class="ad-editor-tool" data-md="ol" title="Numbered list" aria-label="Numbered list">1≡</button><button type="button" class="ad-editor-tool" data-md="quote" title="Quote" aria-label="Quote">❝</button><button type="button" class="ad-editor-tool" data-md="link" title="Link (Ctrl+K)" aria-label="Link">🔗</button></div>
+        </div>
+        <label class="is-sr-only" for="new-task-requirement">Requirement (Markdown)</label>
+        <textarea id="new-task-requirement" class="ad-editor-input" rows="16" spellcheck="true" placeholder="Short title on the first line&#10;&#10;What should change, why, and how to tell it works. Markdown is supported." data-autofocus></textarea>
+        <div id="new-task-preview" class="ad-editor-preview content artifact" role="tabpanel" aria-labelledby="new-task-tab-preview" hidden></div>
+      </div>
+      <div class="ad-field-hint"><span>Markdown · <kbd>Ctrl</kbd>+<kbd>B</kbd> <kbd>I</kbd> <kbd>K</kbd> · the draft is kept in this browser</span><span id="new-task-count">0 / 8192 bytes</span></div>
+    </div>
+    <footer class="ad-drawer-foot">
+      <span class="ad-foot-start"><kbd>Ctrl</kbd>+<kbd>Enter</kbd> to create</span>
+      <button type="button" class="button" data-drawer-close>Cancel</button>
+      <button type="button" id="new-task-submit" class="button is-primary">Create task</button>
+    </footer>
+  </aside>
+</div>
+<div id="task-drawer" class="ad-drawer" role="dialog" aria-modal="true" aria-labelledby="task-drawer-title" hidden>
+  <div class="ad-drawer-backdrop" data-drawer-close></div>
+  <aside class="ad-drawer-panel" tabindex="-1">
+    <header class="ad-drawer-head">
+      <button type="button" id="task-drawer-title" class="ad-copy ad-drawer-id" data-copy="" title="Copy task ID"><code>Task</code><svg aria-hidden="true" viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="8.5" height="8.5" rx="1.5"/><path d="M10.5 5V3.5A1.5 1.5 0 0 0 9 2H3.5A1.5 1.5 0 0 0 2 3.5V9a1.5 1.5 0 0 0 1.5 1.5H5"/></svg></button>
+      <a id="task-drawer-open" class="button is-small" href="#" target="_blank" rel="noopener">Open full page ↗</a>
+      <button type="button" class="delete" aria-label="Close task panel" data-drawer-close></button>
+    </header>
+    <div class="ad-drawer-body" id="task-drawer-body" data-live="drawer" data-live-hash=""><p class="has-text-grey">Loading…</p></div>
+  </aside>
+</div>
+<div id="toasts" class="ad-toasts" aria-live="polite"></div>`;

package/dist/src/ui/views/task.d.ts

@@ -0,0 +1,25 @@
+import type { TaskState, WorkflowState } from "../../model.js";
+import { type ContainerEntry } from "../containers.js";
+import { type UiOptions } from "../options.js";
+export declare const DRAWER_LOG_LINES = 20;
+/** Task id as a copy-to-clipboard button (handled by the delegated \`[data-copy]\` click in common.js). */
+export declare const copyIdButton: (id: string) => string;
+/** `aidlc-worker-3f2a1b9c-…` → `3f2a1b9c`; names without a uuid are shown whole. */
+export declare const shortContainerName: (name: string) => string;
+/** `endedAt - startedAt` as `4s`, `3m 12s`, or `1h 05m`; empty when either timestamp is unusable. */
+export declare const durationText: (startedAt: string | undefined, endedAt: string | undefined) => string;
+/** The Containers panel: a table of the task's recorded worker containers (newest first) and the log viewer. */
+export declare const renderContainersPanel: (entries: ContainerEntry[], docker: "ok" | "unavailable") => string;
+/**
+ * Task detail body shared by the full page (`detail` live region), the side
+ * panel (`fragment`, `drawer` live region), and `/api/live`. Undefined when the
+ * task does not exist. Keyed panels (`id`/`data-key`) let the client morph them
+ * in place: open artifacts, typed feedback, and the live log survive updates.
+ */
+export declare const renderTaskBody: (options: UiOptions, state: WorkflowState, id: string, fragment: boolean, maxAgeMs?: number) => Promise<{
+    task: TaskState;
+    html: string;
+} | undefined>;
+export declare const taskNotFound: (options: UiOptions, id: string) => string;
+export declare const drawerNotFound: (id: string) => string;
+export declare const renderTaskDetail: (options: UiOptions, id: string, fragment?: boolean) => Promise<string>;