@felixdotgo/aidlc-kit 0.1.1 → 0.3.0

package/dist/src/ui/sse.js

@@ -0,0 +1,281 @@
+/** `/api/events`: the loop event logs as a Server-Sent Events stream. */
+import { lstatSync, statSync } from "node:fs";
+import { readRange } from "./files.js";
+import { sendJson } from "./http.js";
+import { join } from "node:path";
+import { eventsLogPath, legacyTaskEventsDir, legacyTaskEventsLogPath, loopDataDir, TASK_ID_PATTERN, taskEventsLogPath, taskRuntimeDir, tasksDataDir } from "./options.js";
+/** On a fresh connection the SSE stream replays at most this many lines. */
+export const SSE_REPLAY_LINES = 200;
+const SSE_REPLAY_BYTES = 256 * 1024;
+const SSE_CHUNK_BYTES = 1024 * 1024;
+/**
+ * Calls `onLine(line, endOffset)` for each complete (newline-terminated) line of
+ * `path` after `cursor.position`, reading at most one chunk, and advances the
+ * cursor past them. A half-written last line waits for the next call; a line
+ * longer than a chunk is skipped.
+ */
+const readLines = (path, size, cursor, noFollow, onLine) => {
+    if (size <= cursor.position)
+        return;
+    const end = Math.min(size, cursor.position + SSE_CHUNK_BYTES);
+    let buffer = readRange(path, cursor.position, end, noFollow);
+    if (cursor.discarding) {
+        // Drop the rest of an oversized line up to and including its newline.
+        const newline = buffer.indexOf(0x0a);
+        if (newline < 0) {
+            cursor.position = end;
+            return;
+        }
+        cursor.position += newline + 1;
+        buffer = buffer.subarray(newline + 1);
+        cursor.discarding = false;
+    }
+    const last = buffer.lastIndexOf(0x0a);
+    if (last < 0) {
+        if (buffer.length >= SSE_CHUNK_BYTES) {
+            cursor.position = end;
+            cursor.discarding = true;
+        }
+        return;
+    }
+    for (let start = 0; start <= last;) {
+        const newline = buffer.indexOf(0x0a, start);
+        if (newline > start)
+            onLine(buffer.subarray(start, newline).toString("utf8"), cursor.position + newline + 1);
+        start = newline + 1;
+    }
+    cursor.position += last + 1;
+};
+/** Complete lines in the last `budget` bytes of `path` (a cut-off first line is dropped) and the
+ * offset just after the last newline (the window start when there is none). */
+const tailLines = (path, size, budget, noFollow) => {
+    const start = Math.max(0, size - budget);
+    const buffer = readRange(path, start, size, noFollow);
+    const last = buffer.lastIndexOf(0x0a);
+    if (last < 0)
+        return { lines: [], end: start, whole: start === 0 };
+    let lines = buffer.subarray(0, last).toString("utf8").split("\n");
+    if (start > 0)
+        lines = lines.slice(1);
+    return { lines: lines.filter((line) => line.length > 0), end: start + last + 1, whole: start === 0 };
+};
+/**
+ * The global sidecar (`ui-events.jsonl`), optionally filtered to one task id
+ * (logs written before per-task files existed). Event ids are `<inode>:<offset>`.
+ * A stale Last-Event-ID (rotated-away file) replays the tail like a fresh
+ * connection; a rotation seen while streaming follows the new file from 0.
+ */
+const globalLogTicker = (root, taskFilter, lastEventId, send) => {
+    const path = eventsLogPath(root);
+    const resume = /^(\d+):(\d+)$/.exec(lastEventId);
+    let inode = resume ? Number(resume[1]) : null;
+    const cursor = { position: resume ? Number(resume[2]) : -1, discarding: false };
+    let firstTick = true;
+    const matches = (line) => {
+        if (!taskFilter)
+            return true;
+        try {
+            return JSON.parse(line).taskId === taskFilter;
+        }
+        catch {
+            return false;
+        }
+    };
+    return () => {
+        let stat;
+        try {
+            stat = statSync(path);
+        }
+        catch {
+            return;
+        }
+        if (inode !== null && stat.ino !== inode) {
+            cursor.position = firstTick ? -1 : 0;
+            cursor.discarding = false;
+        }
+        firstTick = false;
+        inode = stat.ino;
+        const ino = stat.ino;
+        if (cursor.position < 0) {
+            const tail = tailLines(path, stat.size, SSE_REPLAY_BYTES, false);
+            cursor.position = tail.end;
+            for (const line of tail.lines.filter(matches).slice(-SSE_REPLAY_LINES))
+                send(line, `${ino}:${cursor.position}`);
+            return;
+        }
+        if (stat.size < cursor.position) {
+            cursor.position = 0;
+            cursor.discarding = false;
+        }
+        readLines(path, stat.size, cursor, false, (line, end) => { if (matches(line))
+            send(line, `${ino}:${end}`); });
+    };
+};
+/** lstat of a real directory / regular file; undefined when missing, a symlink, or another kind. */
+const realDirectory = (path) => { try {
+    return lstatSync(path).isDirectory();
+}
+catch {
+    return false;
+} };
+const regularFile = (path) => { try {
+    const stat = lstatSync(path);
+    return stat.isFile() ? stat : undefined;
+}
+catch {
+    return undefined;
+} };
+/** The per-task log files, refusing symlinked directories or files (like the
+ * writer does). The task's `runtime/events.jsonl` wins when it (or its `.1`
+ * generation) exists; otherwise the pre-runtime `.agents/data/loop/events/`
+ * copy is read until `loop migrate-data` has moved it. */
+const taskLogFiles = (root, taskId) => {
+    const runtime = taskRuntimeDir(root, taskId);
+    const runtimeDirs = () => realDirectory(tasksDataDir(root)) && realDirectory(join(tasksDataDir(root), taskId)) && realDirectory(runtime);
+    const legacyDirs = () => realDirectory(loopDataDir(root)) && realDirectory(legacyTaskEventsDir(root));
+    const current = taskEventsLogPath(root, taskId);
+    if (runtimeDirs() && (regularFile(current) || regularFile(`${current}.1`)))
+        return { path: current, rotated: `${current}.1`, stat: (file) => runtimeDirs() ? regularFile(file) : undefined };
+    const legacy = legacyTaskEventsLogPath(root, taskId);
+    if (legacyDirs() && (regularFile(legacy) || regularFile(`${legacy}.1`)))
+        return { path: legacy, rotated: `${legacy}.1`, stat: (file) => legacyDirs() ? regularFile(file) : undefined };
+    return { path: current, rotated: `${current}.1`, stat: (file) => runtimeDirs() ? regularFile(file) : undefined };
+};
+/**
+ * One task's own history (`events/<taskId>.jsonl`, one rotated `.1` generation).
+ * Event ids are `t:<inode>:<offset>` (never confused with global-log ids). A fresh
+ * connection, or a Last-Event-ID naming neither generation, sends a `reset` event
+ * (the client clears its lines) and replays the tail of `.1` then the current file.
+ * A Last-Event-ID inside `.1` (or a rotation seen while streaming) finishes the
+ * old generation first, then follows the new file from 0.
+ */
+const taskLogTicker = (root, taskId, lastEventId, send, reset) => {
+    const { path, rotated, stat: fileStat } = taskLogFiles(root, taskId);
+    const id = (ino, offset) => `t:${ino}:${offset}`;
+    let inode = null;
+    const cursor = { position: -1, discarding: false };
+    let drain = null;
+    const resume = /^t:(\d+):(\d+)$/.exec(lastEventId);
+    if (resume) {
+        const ino = Number(resume[1]);
+        const offset = Number(resume[2]);
+        if (fileStat(path)?.ino === ino) {
+            inode = ino;
+            cursor.position = offset;
+        }
+        else if (fileStat(rotated)?.ino === ino) {
+            drain = { inode: ino, cursor: { position: offset, discarding: false } };
+            cursor.position = 0;
+        }
+    }
+    const replay = () => {
+        const current = fileStat(path);
+        let lines = [];
+        let used = 0;
+        let whole = true;
+        inode = current ? current.ino : null;
+        cursor.position = 0;
+        cursor.discarding = false;
+        if (current) {
+            const tail = tailLines(path, current.size, SSE_REPLAY_BYTES, true);
+            ({ lines, whole } = tail);
+            cursor.position = tail.end;
+            used = Math.min(current.size, SSE_REPLAY_BYTES);
+        }
+        if (whole && lines.length < SSE_REPLAY_LINES && used < SSE_REPLAY_BYTES) {
+            const old = fileStat(rotated);
+            if (old)
+                lines = [...tailLines(rotated, old.size, SSE_REPLAY_BYTES - used, true).lines, ...lines];
+        }
+        reset();
+        const at = id(inode ?? 0, cursor.position);
+        for (const line of lines.slice(-SSE_REPLAY_LINES))
+            send(line, at);
+    };
+    const tick = () => {
+        if (cursor.position < 0) {
+            replay();
+            return;
+        }
+        if (drain) {
+            const old = fileStat(rotated);
+            const before = drain.cursor.position;
+            if (old && old.ino === drain.inode && old.size > before) {
+                readLines(rotated, old.size, drain.cursor, true, (line, end) => send(line, id(old.ino, end)));
+                // More of the old generation next tick; a trailing partial line never completes.
+                if (drain.cursor.position < old.size && drain.cursor.position !== before)
+                    return;
+            }
+            drain = null;
+        }
+        const current = fileStat(path);
+        if (!current)
+            return;
+        if (inode !== null && current.ino !== inode) {
+            // Rotated while streaming: finish the old generation (now `.1`) first, then the new file.
+            const previous = inode;
+            drain = fileStat(rotated)?.ino === previous ? { inode: previous, cursor: { ...cursor } } : null;
+            inode = null;
+            cursor.position = 0;
+            cursor.discarding = false;
+            if (drain) {
+                tick();
+                return;
+            }
+        }
+        inode = current.ino;
+        if (current.size < cursor.position) {
+            cursor.position = 0;
+            cursor.discarding = false;
+        }
+        readLines(path, current.size, cursor, true, (line, end) => send(line, id(current.ino, end)));
+    };
+    return tick;
+};
+/**
+ * Streams loop events as SSE. Tracks byte offsets (no full re-read per tick),
+ * emits only newline-terminated lines (a half-written line waits for the next
+ * tick), handles truncation and rotation (inode change), and replays only the
+ * last SSE_REPLAY_LINES on a fresh connection. `?task-id=<id>` (a canonical task
+ * id, else 400) reads that task's own history file when it exists, and falls
+ * back to filtering the global sidecar (older logs) when it does not. Event ids
+ * let EventSource reconnects (`Last-Event-ID`) resume exactly.
+ */
+export const streamEvents = (options, res, req, url) => {
+    const taskId = url.searchParams.get("task-id") ?? "";
+    if (taskId && !TASK_ID_PATTERN.test(taskId))
+        return sendJson(res, 400, { ok: false, error: "task-id must be a canonical task id" });
+    res.writeHead(200, {
+        "content-type": "text/event-stream; charset=utf-8",
+        "cache-control": "no-store",
+        "connection": "keep-alive",
+    });
+    // Flush headers immediately (an empty log would otherwise leave the client
+    // waiting for the first event) and keep idle connections alive.
+    res.write(": connected\n\n");
+    const lastEventId = String(req.headers["last-event-id"] ?? "");
+    const send = (line, id) => { res.write(`id: ${id}\ndata: ${line}\n\n`); };
+    const files = taskId ? taskLogFiles(options.root, taskId) : undefined;
+    const tick = files && (files.stat(files.path) || files.stat(files.rotated))
+        ? taskLogTicker(options.root, taskId, lastEventId, send, () => res.write("event: reset\ndata: replay\n\n"))
+        : globalLogTicker(options.root, taskId, lastEventId, send);
+    const emit = () => {
+        try {
+            tick();
+        }
+        catch { /* transient read errors are ignored until the next poll */ }
+    };
+    let idleTicks = 0;
+    emit();
+    const timer = setInterval(() => {
+        emit();
+        idleTicks += 1;
+        if (idleTicks >= 30) {
+            idleTicks = 0;
+            res.write(": keep-alive\n\n");
+        }
+    }, 500);
+    const cleanup = () => clearInterval(timer);
+    req.on("close", cleanup);
+    res.on("close", cleanup);
+};

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

@@ -0,0 +1,7 @@
+import type { WorkflowState } from "../../model.js";
+import { type UiOptions } from "../options.js";
+/** The done column shows this many cards until "Show more" (or a filter) reveals the rest. */
+export declare const DONE_COLUMN_LIMIT = 8;
+/** Toolbar, kanban, and list (or the empty state): the dashboard's `board` live region. */
+export declare const renderBoard: (state: WorkflowState) => string;
+export declare const renderDashboard: (options: UiOptions) => Promise<string>;

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

@@ -0,0 +1,131 @@
+import { listTaskSummaries } from "../../state.js";
+import { pendingFeedback, readUiState } from "../data.js";
+import { escapeHtml } from "../http.js";
+import { uiMode } from "../options.js";
+import { feedbackPill, gateLabel, gatePill, PHASES, phaseSteps, relativeTime, RISK_TONE, riskPill, STATUS_META, statusPill } from "./components.js";
+import { liveRegion, pageHead, pageScripts, renderHeader, renderModals, reviewQueue } from "./layout.js";
+/** Per-status action: a paused task can be re-activated for the daemon; a task
+ * waiting at a human gate links to the detail page that hosts gate approval. */
+const taskAction = (task, handedOff = false) => {
+    if (handedOff)
+        return `<a class="button is-small is-danger ad-soft" href="/tasks/${encodeURIComponent(task.id)}" title="handed off: follow the handoff actions">handoff</a>`;
+    if (task.status === "paused")
+        return `<button class="button is-small is-link ad-soft" data-resume="${escapeHtml(task.id)}">resume</button>`;
+    if (task.status === "blocked_on_user")
+        return `<a class="button is-small is-warning" href="/tasks/${encodeURIComponent(task.id)}" title="open the review: send feedback or approve">review</a>`;
+    return "";
+};
+/** Upper bound on dashboard cards (matches the `listTaskSummaries` page cap). */
+const DASHBOARD_LIMIT = 100;
+/** Lower-cased haystack for client-side search (escaped when rendered). */
+const searchText = (task) => [task.id, task.title, task.phase, task.gate, gateLabel(task.gate), task.status, STATUS_META[task.status]?.label ?? "", task.risk, ...task.areas].join(" ").toLowerCase();
+const itemAttrs = (task, handedOff) => `data-task-item data-task-id="${escapeHtml(task.id)}" data-status="${escapeHtml(task.status)}" data-risk="${escapeHtml(task.risk)}"${handedOff ? ' data-handoff="true"' : ""} data-search="${escapeHtml(searchText(task))}"`;
+/** Statuses a kanban column cannot express (the column already says the phase, and
+ * "needs review" is the card's attention ring plus its review button). */
+const CARD_FLAG_STATUSES = new Set(["paused", "closed", "superseded"]);
+const cardFlag = (status, handedOff) => handedOff || CARD_FLAG_STATUSES.has(status) ? statusPill(status, handedOff) : "";
+/** Kanban card: the title leads; the column is the phase, so no id, phase bar, gate, or
+ * routine status badge. The whole card is a click target (`data-card-href`): a plain
+ * click opens the side panel, ctrl/cmd/middle-click a new tab, shift-click this tab. */
+const renderTaskCard = (task, handedOff = false) => {
+    const href = `/tasks/${encodeURIComponent(task.id)}`;
+    const attention = task.status === "blocked_on_user" && !handedOff;
+    const meta = [cardFlag(task.status, handedOff), task.risk !== "normal" ? riskPill(task.risk) : "", feedbackPill(task.feedbackPending ?? 0)].join("");
+    return `<article class="ad-card${attention ? " is-attention" : ""}" data-key="card:${escapeHtml(task.id)}" data-card-href="${href}" ${itemAttrs(task, handedOff)}>
+    <div class="ad-card-title"><a href="${href}" data-task-link="${escapeHtml(task.id)}" title="${escapeHtml(task.id)}">${escapeHtml(task.title)}</a></div>
+    ${meta ? `<div class="ad-card-meta">${meta}</div>` : ""}
+    <div class="ad-card-foot"><span class="ad-areas" title="areas: ${escapeHtml(task.areas.join(", "))}">${escapeHtml(task.areas.join(", "))}</span>${task.updatedAt ? `<span>· ${relativeTime(task.updatedAt)}</span>` : ""}${taskAction(task, handedOff)}</div>
+  </article>`;
+};
+/** List row: the title is the link (id on hover); the id column is gone. */
+const renderListRow = (task, handedOff) => `<tr data-key="row:${escapeHtml(task.id)}" data-card-href="/tasks/${encodeURIComponent(task.id)}" ${itemAttrs(task, handedOff)}>
+  <td class="has-text-weight-semibold ad-row-title"><a href="/tasks/${encodeURIComponent(task.id)}" data-task-link="${escapeHtml(task.id)}" title="${escapeHtml(task.id)}">${escapeHtml(task.title)}</a></td>
+  <td><div class="is-size-7 mb-1">${escapeHtml(task.phase)}</div>${phaseSteps(task.phase)}</td>
+  <td>${gatePill(task.gate) || '<span class="has-text-grey">—</span>'}</td>
+  <td>${statusPill(task.status, handedOff)}${feedbackPill(task.feedbackPending ?? 0)}</td>
+  <td>${riskPill(task.risk)}</td>
+  <td class="is-size-7">${escapeHtml(task.areas.join(", "))}</td>
+  <td class="is-size-7 has-text-grey">${relativeTime(task.updatedAt)}</td>
+  <td class="has-text-right">${taskAction(task, handedOff)}</td>
+</tr>`;
+const renderToolbar = () => `<div class="ad-toolbar">
+  <div class="ad-search">
+    <svg class="ad-search-icon" aria-hidden="true" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="8.5" cy="8.5" r="5.5"/><path d="m13 13 4 4"/></svg>
+    <input id="task-search" class="input" type="search" placeholder="Search title, id, area…" aria-label="Search tasks" autocomplete="off">
+    <kbd>/</kbd>
+  </div>
+  <div class="select"><select id="filter-status" aria-label="Filter by status">
+    <option value="">All statuses</option>
+    ${Object.entries(STATUS_META).map(([value, meta]) => `<option value="${value}">${escapeHtml(meta.label)}</option>`).join("")}
+  </select></div>
+  <div class="select"><select id="filter-risk" aria-label="Filter by risk">
+    <option value="">Any risk</option>
+    ${Object.keys(RISK_TONE).map((risk) => `<option value="${risk}">${risk}</option>`).join("")}
+  </select></div>
+  <div class="ad-toolbar-end">
+    <span id="result-count" class="ad-result-count" aria-live="polite"></span>
+    <div class="ad-segmented" role="group" aria-label="View">
+      <button type="button" data-view-toggle="kanban" aria-pressed="true">▦ Kanban</button>
+      <button type="button" data-view-toggle="list" aria-pressed="false">☰ List</button>
+    </div>
+  </div>
+</div>`;
+/** The done column shows this many cards until "Show more" (or a filter) reveals the rest. */
+export const DONE_COLUMN_LIMIT = 8;
+/** Toolbar, kanban, and list (or the empty state): the dashboard's `board` live region. */
+export const renderBoard = (state) => {
+    /* Terminal tasks (done/closed/superseded) are moved to the archive catalog on
+     * save; list them too so they survive a reload. Active tasks keep priority
+     * within the display limit; archived ones fill the remaining room. */
+    const active = listTaskSummaries(state, { limit: DASHBOARD_LIMIT }).items;
+    const archived = active.length < DASHBOARD_LIMIT
+        ? listTaskSummaries({ ...state, tasks: {} }, { includeArchive: true, limit: DASHBOARD_LIMIT - active.length }).items
+        : [];
+    const items = [...active, ...archived].map((task) => {
+        const full = state.tasks[task.id];
+        return full ? { ...task, feedbackPending: pendingFeedback(full).length } : task;
+    });
+    const handedOff = new Set(Object.values(state.tasks).filter((task) => task.handoff).map((task) => task.id));
+    if (!items.length)
+        return `<div class="ad-empty">
+      <div class="ad-empty-icon" aria-hidden="true">🌱</div>
+      <h2>No tasks yet</h2>
+      <p>Describe a requirement and the loop will create the task and drive it through clarify → plan → build → wrap.</p>
+      <button class="button is-primary" data-open="new-task-drawer">＋ New task</button>
+    </div>`;
+    const kanban = PHASES.map((phase, index) => {
+        const tasks = items.filter((task) => task.phase === phase);
+        const cards = tasks.map((task) => renderTaskCard(task, handedOff.has(task.id))).join("\n");
+        // The client hides cards past the limit (unless expanded or filtering) and labels the button.
+        const collapse = phase === "done" ? ` data-collapse="${DONE_COLUMN_LIMIT}"` : "";
+        const more = phase === "done" ? `<button type="button" class="ad-column-more" data-column-more${tasks.length > DONE_COLUMN_LIMIT ? "" : " hidden"}>Show ${Math.max(0, tasks.length - DONE_COLUMN_LIMIT)} more</button>` : "";
+        return `<section class="ad-column" data-key="column:${phase}" data-phase-column="${phase}"${collapse}>
+      <header class="ad-column-head"><span class="ad-step-index">${index + 1}</span><span class="ad-column-title">${escapeHtml(phase)}</span><span class="ad-count" data-column-count>${tasks.length}</span></header>
+      <div class="ad-column-body">${cards}<p class="ad-column-empty" data-column-empty${tasks.length ? " hidden" : ""}>No tasks</p>${more}</div>
+    </section>`;
+    }).join("\n");
+    const rows = items.map((task) => renderListRow(task, handedOff.has(task.id))).join("\n");
+    return `${renderToolbar()}
+    <div id="kanban-view"><div class="ad-board">${kanban}</div></div>
+    <div id="list-view">
+      <div class="ad-table-wrap"><table class="table ad-table is-fullwidth">
+        <thead><tr><th>title</th><th>phase</th><th>gate</th><th>status</th><th>risk</th><th>areas</th><th>updated</th><th></th></tr></thead>
+        <tbody>${rows}</tbody>
+      </table></div>
+    </div>
+    <p class="ad-no-match" data-no-match>No tasks match the current filters. <button type="button" id="filter-clear" class="button is-small is-text">Clear filters</button></p>`;
+};
+export const renderDashboard = async (options) => {
+    const state = await readUiState(options);
+    return `${pageHead("Loop")}
+${renderHeader(options.root, uiMode(options), reviewQueue(state))}
+<main class="section ad-main">
+  <div class="container is-fluid">
+    ${liveRegion("board", renderBoard(state))}
+  </div>
+</main>
+${renderModals()}
+${pageScripts("common", "dashboard", "live-log")}
+</body>
+</html>`;
+};

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

@@ -0,0 +1,19 @@
+/**
+ * `/tasks/:id/changes`: a task's code changes, rendered server-side (every diff line
+ * and file name escaped) so the page works without JavaScript; `changes.js` only
+ * filters items in place, scrolls to files, and applies the diff display settings
+ * (`diffWrap` toggles `is-wrapped` on the diff containers; `diffIgnoreWs` reloads
+ * with `?ws=ignore`, which the server maps to `git diff -w`).
+ */
+import { type ChangesQuery } from "../changes.js";
+import { type UiOptions } from "../options.js";
+/** Link to a task's changes page (task detail, G2 gate panel, side panel). */
+export declare const changesHref: (taskId: string) => string;
+/** Splits a unified patch into per-file sections (each starts at `diff --git`). */
+export declare const patchSections: (patch: string) => string[][];
+/** Diff display styles the page needs beyond dashboard.css: `is-wrapped` is toggled by changes.js from the `diffWrap` setting. */
+/** The full changes page and its HTTP status (400 malformed id or `ws` value, 404 unknown task/item). */
+export declare const renderChangesPage: (options: UiOptions, taskId: string, itemId: string | null, query?: ChangesQuery) => Promise<{
+    status: number;
+    html: string;
+}>;

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

@@ -0,0 +1,154 @@
+/**
+ * `/tasks/:id/changes`: a task's code changes, rendered server-side (every diff line
+ * and file name escaped) so the page works without JavaScript; `changes.js` only
+ * filters items in place, scrolls to files, and applies the diff display settings
+ * (`diffWrap` toggles `is-wrapped` on the diff containers; `diffIgnoreWs` reloads
+ * with `?ws=ignore`, which the server maps to `git diff -w`).
+ */
+import { ID_PATTERN, INTEGRATION_ITEM, MAX_FILES, MAX_PATCH_BYTES, MAX_TASK_PATCH_BYTES, TASK_RANGE_ITEM, taskChanges, WORKING_TREE_ITEM } from "../changes.js";
+import { readUiState } from "../data.js";
+import { escapeHtml } from "../http.js";
+import { uiMode } from "../options.js";
+import { gatePill, statusPill } from "./components.js";
+import { pageHead, pageScripts, renderHeader, renderModals, reviewQueue } from "./layout.js";
+/** Link to a task's changes page (task detail, G2 gate panel, side panel). */
+export const changesHref = (taskId) => `/tasks/${encodeURIComponent(taskId)}/changes`;
+const SOURCE_LABEL = {
+    assignments: "loop assignments",
+    fleet: "fleet review snapshot",
+    "task-range": "task range",
+    "working-tree": "working tree",
+    none: "unavailable",
+};
+const STATUS_TONE = { added: "is-success", deleted: "is-danger", modified: "is-info", renamed: "is-link", copied: "is-link", untracked: "is-warning" };
+const statusBadge = (status) => `<span class="ad-pill ad-diff-status ${STATUS_TONE[status] ?? ""}" title="${escapeHtml(status)}">${escapeHtml(status)}</span>`;
+const short = (sha) => sha.slice(0, 7);
+/** `task` item: `base <short> → <short>` once the task is done, `base <short> → HEAD + working tree` while open. */
+const itemTitle = (item) => item.itemId === WORKING_TREE_ITEM ? "Working tree (uncommitted, not task-scoped)"
+    : item.itemId === INTEGRATION_ITEM ? "Integration commit"
+        : item.itemId === TASK_RANGE_ITEM ? `Task range · base ${short(item.base ?? "")} → ${item.workingTree ? "HEAD + working tree" : short(item.commit)}`
+            : `Item · ${item.itemId}`;
+const lineClass = (line) => line.startsWith("@@") ? "ad-diff-hunk"
+    : line.startsWith("+++ ") || line.startsWith("--- ") || line === "+++" || line === "---" ? "ad-diff-meta"
+        : line.startsWith("+") ? "ad-diff-add"
+            : line.startsWith("-") ? "ad-diff-del"
+                : line.startsWith(" ") || line === "" ? "ad-diff-ctx"
+                    : "ad-diff-meta";
+/** Splits a unified patch into per-file sections (each starts at `diff --git`). */
+export const patchSections = (patch) => {
+    const sections = [];
+    const lines = patch.split("\n");
+    if (lines[lines.length - 1] === "")
+        lines.pop();
+    for (const line of lines) {
+        if (line.startsWith("diff --git ") || !sections.length)
+            sections.push([]);
+        sections[sections.length - 1].push(line);
+    }
+    return sections;
+};
+const renderLines = (lines) => `<div class="ad-diff" role="presentation">${lines.map((line) => `<div class="ad-diff-line ${lineClass(line)}">${escapeHtml(line)}</div>`).join("")}</div>`;
+const fileBody = (file, section, truncated, omitted = false) => {
+    if (file.status === "untracked")
+        return '<p class="ad-diff-note">Untracked file: not in git yet, content not shown.</p>';
+    if (file.binary)
+        return '<p class="ad-diff-note">Binary file changed.</p>';
+    if (file.whitespaceOnly)
+        return '<p class="ad-diff-note">Whitespace-only changes (hidden while whitespace is ignored).</p>';
+    if (!section && omitted)
+        return '<p class="ad-diff-note">Diff not loaded in the whole-task view: select this item to see it.</p>';
+    if (!section)
+        return `<p class="ad-diff-note">${truncated ? "Diff not shown: the patch exceeds the display limit." : "No textual changes."}</p>`;
+    const changed = section.some((line) => line.startsWith("@@"));
+    return changed ? renderLines(section) : `${renderLines(section)}<p class="ad-diff-note">No textual changes (mode or metadata only).</p>`;
+};
+const renderItem = (item, index, hidden) => {
+    const sections = patchSections(item.patch);
+    const added = item.files.reduce((sum, file) => sum + file.added, 0);
+    const removed = item.files.reduce((sum, file) => sum + file.removed, 0);
+    const anchor = (fileIndex) => `c-${index}-${fileIndex}`;
+    const commit = item.commit ? `<code title="${escapeHtml(item.commit)}">${escapeHtml(item.commit.slice(0, 12))}</code>${item.workingTree ? " + working tree" : ""}` : "";
+    const base = item.base ? `<code title="${escapeHtml(item.base)}">${escapeHtml(item.base.slice(0, 12))}</code> → ` : "";
+    const worker = item.workerId ? `<span class="ad-pill is-ghost" title="worker">${escapeHtml(item.workerId)}</span>` : "";
+    const banner = item.patchOmitted
+        ? `<div class="ad-callout is-info ad-changes-banner" data-changes-omitted><span aria-hidden="true">ℹ</span><span>Patch omitted: the whole-task view shows at most ${MAX_TASK_PATCH_BYTES / (1024 * 1024)} MiB of diff. Select this item to see it.</span></div>`
+        : item.truncated
+            ? `<div class="ad-callout ad-changes-banner" data-changes-truncated><span aria-hidden="true">⚠</span><span>Diff truncated: this item exceeds the display limit (${MAX_FILES} files or ${MAX_PATCH_BYTES / (1024 * 1024)} MiB of patch). ${item.commit ? `Inspect it locally with <code>git show ${escapeHtml(item.commit)}</code>.` : "Inspect it locally with git."}</span></div>`
+            : "";
+    const note = item.note ? `<div class="ad-callout is-info ad-changes-banner" data-changes-note><span aria-hidden="true">ℹ</span><span>${escapeHtml(item.note)}</span></div>` : "";
+    const list = item.files.length
+        ? `<ul>${item.files.map((file, fileIndex) => `<li><a href="#${anchor(fileIndex)}" data-changes-file>${statusBadge(file.status)}<span class="ad-diff-path" title="${escapeHtml(file.oldPath ? `${file.oldPath} → ${file.path}` : file.path)}">${escapeHtml(file.path)}</span>${file.binary ? '<span class="ad-diff-stat">binary</span>' : file.whitespaceOnly ? '<span class="ad-diff-stat">whitespace</span>' : file.status === "untracked" ? "" : `<span class="ad-diff-stat"><span class="ad-diff-plus">+${file.added}</span> <span class="ad-diff-minus">−${file.removed}</span></span>`}</a></li>`).join("")}</ul>`
+        : '<p class="ad-empty-line">No changed files.</p>';
+    // Untracked and whitespace-only files never have a patch section; the others keep git's order.
+    let sectionIndex = 0;
+    const blocks = item.files.map((file, fileIndex) => {
+        const section = file.status === "untracked" || file.whitespaceOnly ? undefined : sections[sectionIndex++];
+        const head = `${statusBadge(file.status)}<code class="ad-diff-path">${file.oldPath ? `${escapeHtml(file.oldPath)} → ` : ""}${escapeHtml(file.path)}</code>`;
+        return `<article class="ad-diff-file" id="${anchor(fileIndex)}"><header class="ad-diff-file-head">${head}</header>${fileBody(file, section, item.truncated, item.patchOmitted)}</article>`;
+    }).join("");
+    return `<section class="ad-panel ad-changes-item" data-change-item="${escapeHtml(item.itemId)}"${item.patchOmitted ? " data-patch-omitted" : ""}${hidden ? " hidden" : ""}>
+  <header class="ad-panel-head"><h2>${escapeHtml(itemTitle(item))}</h2>${worker}<span class="ad-changes-commit">${base}${commit}</span><span class="ad-count ad-panel-tools">${item.files.length} file${item.files.length === 1 ? "" : "s"} · +${added} −${removed}</span></header>
+  <div class="ad-panel-body is-flush">
+    ${banner}${note}
+    <div class="ad-changes">
+      <nav class="ad-changes-files" aria-label="Changed files">${list}</nav>
+      <div class="ad-changes-diff is-wrapped">${blocks || '<p class="ad-empty-line">Nothing to show.</p>'}</div>
+    </div>
+  </div>
+</section>`;
+};
+const errorPage = (options, title, message, reviews) => `${pageHead(`${title} · Loop`)}${renderHeader(options.root, uiMode(options), reviews)}<main class="section ad-main"><div class="container is-fluid"><div class="ad-empty"><div class="ad-empty-icon" aria-hidden="true">🔍</div><h2>${escapeHtml(title)}</h2><p>${escapeHtml(message)}</p><a class="button" href="/">← Back to dashboard</a></div></div></main>${renderModals()}${pageScripts("common")}</body></html>`;
+/** Diff display styles the page needs beyond dashboard.css: `is-wrapped` is toggled by changes.js from the `diffWrap` setting. */
+/** The full changes page and its HTTP status (400 malformed id or `ws` value, 404 unknown task/item). */
+export const renderChangesPage = async (options, taskId, itemId, query = {}) => {
+    const state = await readUiState(options);
+    const reviews = reviewQueue(state);
+    if (itemId !== null && !ID_PATTERN.test(itemId))
+        return { status: 400, html: errorPage(options, "Invalid request", "Invalid item id", reviews) };
+    // The page always renders every item; `?item=` only selects which one is visible.
+    const result = await taskChanges(options, taskId, null, state, itemId, query);
+    if (result.status !== 200)
+        return { status: result.status, html: errorPage(options, result.status === 400 ? "Invalid request" : "Task not found", result.payload.error, reviews) };
+    const { payload, task } = result;
+    if (itemId !== null && !payload.items.some((item) => item.itemId === itemId))
+        return { status: 404, html: errorPage(options, "Item not found", `No changes recorded for item ${itemId}`, reviews) };
+    const taskHref = `/tasks/${encodeURIComponent(task.id)}`;
+    const itemOptions = payload.items.map((item) => `<option value="${escapeHtml(item.itemId)}"${item.itemId === itemId ? " selected" : ""}>${escapeHtml(itemTitle(item))}${item.workerId ? ` · ${escapeHtml(item.workerId)}` : ""}</option>`).join("");
+    const ignoreWs = query.ws === "ignore";
+    const selector = payload.items.length > 1 || itemId !== null
+        ? `<form class="ad-changes-form" method="get" action="${changesHref(task.id)}" data-changes-form>
+      <label class="label is-small mb-0" for="changes-item">Show</label>
+      <div class="select is-small"><select id="changes-item" name="item" data-changes-select><option value=""${itemId === null ? " selected" : ""}>Whole task</option>${itemOptions}</select></div>${ignoreWs ? '<input type="hidden" name="ws" value="ignore">' : ""}
+      <button type="submit" class="button is-small" data-changes-submit>Apply</button>
+    </form>`
+        : "";
+    // Display options need JavaScript (they live in localStorage); changes.js reveals them.
+    const displayOptions = payload.items.length
+        ? `<span class="ad-changes-options" data-changes-options hidden>
+      <label><input type="checkbox" data-changes-wrap checked> Wrap lines</label>
+      <label><input type="checkbox" data-changes-ws${ignoreWs ? " checked" : ""}> Ignore whitespace</label>
+    </span>`
+        : "";
+    const toolbar = selector || displayOptions ? `<div class="ad-changes-toolbar">${selector}${displayOptions}</div>` : "";
+    const note = payload.note ? `<div class="ad-callout is-info ad-changes-banner" data-changes-note><span aria-hidden="true">ℹ</span><span>${escapeHtml(payload.note)}</span></div>` : "";
+    const items = payload.items.length
+        ? payload.items.map((item, index) => renderItem(item, index, itemId !== null && item.itemId !== itemId)).join("\n")
+        : '<div class="ad-empty"><div class="ad-empty-icon" aria-hidden="true">∅</div><h2>No changes to show</h2><p>No commits are recorded for this task yet.</p></div>';
+    const html = `${pageHead(`Changes · ${task.title} · Loop`, task.id)}
+${renderHeader(options.root, uiMode(options), reviews, task.id)}
+<main class="section ad-main">
+  <div class="container is-fluid">
+    <a class="ad-breadcrumb" href="${taskHref}">← Task</a>
+    <h1 class="ad-page-title">Changes · ${escapeHtml(task.title)}</h1>
+    <div class="ad-page-sub"><code>${escapeHtml(task.id)}</code>${statusPill(task.status, Boolean(task.handoff))}${gatePill(task.gate)}<span class="ad-pill is-ghost" data-changes-source="${payload.source}" title="where these changes come from">source · ${escapeHtml(SOURCE_LABEL[payload.source])}</span><a class="button is-small ml-auto" href="${taskHref}">Back to task</a></div>
+    ${note}
+    ${toolbar}
+    ${items}
+  </div>
+</main>
+${renderModals()}
+${pageScripts("common", "changes", "live-log")}
+</body>
+</html>`;
+    return { status: 200, html };
+};