santree 0.3.0 → 0.5.0

package/dist/lib/dashboard/DiffOverlay.d.ts

@@ -0,0 +1,50 @@
+import type { DiffFile } from "./types.js";
+interface Props {
+    width: number;
+    height: number;
+    ticketId: string;
+    baseBranch: string;
+    files: DiffFile[];
+    fileIndex: number;
+    fileScrollOffset: number;
+    content: string | null;
+    contentScrollOffset: number;
+    loadingFiles: boolean;
+    loadingContent: boolean;
+    error: string | null;
+    /** Theme-adapted selection background. Falls back to dark navy. */
+    selectionBg?: string;
+}
+interface RenderedRow {
+    prefix: string;
+    label: string;
+    color?: string;
+    dim?: boolean;
+    bold?: boolean;
+    fileIndex: number | null;
+}
+export declare function flattenTreeFiles(files: DiffFile[]): DiffFile[];
+export interface DiffLayout {
+    bodyHeight: number;
+    leftWidth: number;
+    rightWidth: number;
+    rows: RenderedRow[];
+    effectiveScroll: number;
+    selectedRowIdx: number;
+}
+/**
+ * Computes the diff overlay layout — body height, pane widths, rendered tree
+ * rows, and the effective scroll offset (clamped to keep selection visible).
+ *
+ * Shared between DiffOverlay (rendering) and the dashboard mouse handler
+ * (mapping click coords back to file indices).
+ */
+export declare function computeDiffLayout(opts: {
+    width: number;
+    height: number;
+    files: DiffFile[];
+    fileIndex: number;
+    fileScrollOffset: number;
+}): DiffLayout;
+export default function DiffOverlay({ width, height, ticketId, baseBranch, files, fileIndex, fileScrollOffset, content, contentScrollOffset, loadingFiles, loadingContent, error, selectionBg, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/dashboard/DiffOverlay.js

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+function buildTree(files) {
+    const root = { kind: "dir", name: "", children: [] };
+    for (const file of files) {
+        const parts = file.path.split("/");
+        let cursor = root;
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            const isLeaf = i === parts.length - 1;
+            if (isLeaf) {
+                cursor.children.push({ kind: "file", name: part, file });
+            }
+            else {
+                let next = cursor.children.find((c) => c.kind === "dir" && c.name === part);
+                if (!next) {
+                    next = { kind: "dir", name: part, children: [] };
+                    cursor.children.push(next);
+                }
+                cursor = next;
+            }
+        }
+    }
+    // Collapse single-child directory chains for compactness.
+    collapseChains(root);
+    return root;
+}
+function collapseChains(dir) {
+    for (const child of dir.children) {
+        if (child.kind !== "dir")
+            continue;
+        while (child.children.length === 1 && child.children[0].kind === "dir") {
+            const only = child.children[0];
+            child.name = `${child.name}/${only.name}`;
+            child.children = only.children;
+        }
+        collapseChains(child);
+    }
+}
+function statusColor(status) {
+    switch (status) {
+        case "A":
+            return "green";
+        case "D":
+            return "red";
+        case "M":
+            return "yellow";
+        case "R":
+            return "magenta";
+        case "C":
+            return "blue";
+        default:
+            return "gray";
+    }
+}
+function renderTree(dir, depth, rows, fileCounter) {
+    const sorted = [...dir.children].sort((a, b) => {
+        // Directories first, then files
+        if (a.kind !== b.kind)
+            return a.kind === "dir" ? -1 : 1;
+        return a.name.localeCompare(b.name);
+    });
+    const indent = "  ".repeat(depth);
+    for (const child of sorted) {
+        if (child.kind === "dir") {
+            rows.push({
+                prefix: indent,
+                label: `${child.name}/`,
+                color: "blue",
+                bold: true,
+                fileIndex: null,
+            });
+            renderTree(child, depth + 1, rows, fileCounter);
+        }
+        else {
+            const idx = fileCounter.value++;
+            rows.push({
+                prefix: indent,
+                label: `${child.file.status} ${child.name}`,
+                color: statusColor(child.file.status),
+                fileIndex: idx,
+            });
+        }
+    }
+}
+// Flatten files in the same order as the rendered tree, so fileIndex matches
+// the order users see when navigating with j/k.
+export function flattenTreeFiles(files) {
+    const tree = buildTree(files);
+    const ordered = [];
+    const walk = (dir) => {
+        const sorted = [...dir.children].sort((a, b) => {
+            if (a.kind !== b.kind)
+                return a.kind === "dir" ? -1 : 1;
+            return a.name.localeCompare(b.name);
+        });
+        for (const c of sorted) {
+            if (c.kind === "dir")
+                walk(c);
+            else
+                ordered.push(c.file);
+        }
+    };
+    walk(tree);
+    return ordered;
+}
+/**
+ * Computes the diff overlay layout — body height, pane widths, rendered tree
+ * rows, and the effective scroll offset (clamped to keep selection visible).
+ *
+ * Shared between DiffOverlay (rendering) and the dashboard mouse handler
+ * (mapping click coords back to file indices).
+ */
+export function computeDiffLayout(opts) {
+    const headerHeight = 2;
+    const footerHeight = 1;
+    const bodyHeight = Math.max(3, opts.height - headerHeight - footerHeight);
+    const leftWidth = Math.min(48, Math.max(24, Math.floor(opts.width * 0.32)));
+    const rightWidth = Math.max(20, opts.width - leftWidth - 1);
+    const rows = [];
+    const tree = buildTree(opts.files);
+    renderTree(tree, 0, rows, { value: 0 });
+    const selectedRowIdx = rows.findIndex((r) => r.fileIndex === opts.fileIndex);
+    const totalRows = rows.length;
+    const maxScroll = Math.max(0, totalRows - bodyHeight);
+    let effectiveScroll = Math.min(opts.fileScrollOffset, maxScroll);
+    if (selectedRowIdx >= 0) {
+        if (selectedRowIdx < effectiveScroll) {
+            effectiveScroll = selectedRowIdx;
+        }
+        else if (selectedRowIdx >= effectiveScroll + bodyHeight) {
+            effectiveScroll = selectedRowIdx - bodyHeight + 1;
+        }
+    }
+    return { bodyHeight, leftWidth, rightWidth, rows, effectiveScroll, selectedRowIdx };
+}
+function colorizeDiffLine(line) {
+    if (line.startsWith("diff --git") || line.startsWith("index ")) {
+        return { text: line, color: "yellow", bold: true };
+    }
+    if (line.startsWith("+++") || line.startsWith("---")) {
+        return { text: line, color: "yellow", dim: true };
+    }
+    if (line.startsWith("@@")) {
+        return { text: line, color: "cyan" };
+    }
+    if (line.startsWith("+")) {
+        return { text: line, color: "green" };
+    }
+    if (line.startsWith("-")) {
+        return { text: line, color: "red" };
+    }
+    return { text: line };
+}
+// Content from external diff tools (delta, diff-so-fancy, etc.) ships its own
+// ANSI escapes. Detecting them lets us skip our manual colorize and render the
+// raw text — Ink passes ANSI through to the terminal natively.
+function looksLikeAnsi(text) {
+    return /\x1b\[[0-9;]*[A-Za-z]/.test(text);
+}
+const ANSI_RE = /\x1b\[[0-9;]*[A-Za-z]/g;
+/**
+ * Truncate a line to `max` visible columns, preserving any ANSI escape
+ * sequences along the way. Ink's built-in `wrap="truncate"` measures by string
+ * length (counting escapes as visible chars) and stops short or, with very long
+ * lines, lets content bleed past the box's right edge — which on the diff
+ * pane caused lines to spill into the column to the right. Doing the math
+ * ourselves avoids both bugs.
+ */
+function truncateVisible(s, max) {
+    if (max <= 0)
+        return "";
+    if (s.replace(ANSI_RE, "").length <= max)
+        return s;
+    let out = "";
+    let visible = 0;
+    let i = 0;
+    while (i < s.length && visible < max - 1) {
+        const ch = s[i];
+        if (ch === "\x1b" && s[i + 1] === "[") {
+            ANSI_RE.lastIndex = i;
+            const m = ANSI_RE.exec(s);
+            if (m && m.index === i) {
+                out += m[0];
+                i += m[0].length;
+                continue;
+            }
+        }
+        out += ch;
+        visible++;
+        i++;
+    }
+    return out + "…";
+}
+// ── Component ─────────────────────────────────────────────────────────
+export default function DiffOverlay({ width, height, ticketId, baseBranch, files, fileIndex, fileScrollOffset, content, contentScrollOffset, loadingFiles, loadingContent, error, selectionBg = "#1e3a5f", }) {
+    const layout = computeDiffLayout({ width, height, files, fileIndex, fileScrollOffset });
+    const { bodyHeight, leftWidth, rightWidth, rows, effectiveScroll, selectedRowIdx } = layout;
+    const visibleRows = rows.slice(effectiveScroll, effectiveScroll + bodyHeight);
+    // Right pane: split content into lines and slice for scroll. If the content
+    // already carries ANSI escapes (from an external diff tool), pass them
+    // through as-is; otherwise apply our built-in line-prefix colorization.
+    // Clamp scroll so the deepest position lands the last line at the bottom.
+    const isExternalContent = content ? looksLikeAnsi(content) : false;
+    const rawLines = content ? content.split("\n") : [];
+    const allLines = isExternalContent
+        ? rawLines.map((text) => ({ text }))
+        : rawLines.map(colorizeDiffLine);
+    const maxContentScroll = Math.max(0, allLines.length - bodyHeight);
+    const effectiveContentScroll = Math.min(Math.max(0, contentScrollOffset), maxContentScroll);
+    const visibleLines = allLines.slice(effectiveContentScroll, effectiveContentScroll + bodyHeight);
+    const totalFiles = files.length;
+    const currentFile = files[fileIndex];
+    // Pre-compute path truncation. Letting each <Text> rely on wrap="truncate"
+    // inside a flex row caused the path to wrap onto a new line when the row
+    // overflowed — pushing the tabs above off-screen. Manual truncation on the
+    // only variable-length segment keeps the header strictly one line.
+    const filesLabel = `(${totalFiles} ${totalFiles === 1 ? "file" : "files"})`;
+    const meta = `  ${ticketId} vs ${baseBranch}  ${filesLabel}`;
+    const sep = "  •  ";
+    const consumed = "Diff".length + meta.length;
+    const pathRoom = Math.max(0, width - consumed - sep.length);
+    let truncatedPath = "";
+    if (currentFile) {
+        const p = currentFile.path;
+        truncatedPath = p.length > pathRoom ? "…" + p.slice(-Math.max(0, pathRoom - 1)) : p;
+    }
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, overflow: "hidden", children: [_jsxs(Box, { flexShrink: 0, width: width, children: [_jsx(Text, { bold: true, color: "cyan", children: "Diff" }), _jsx(Text, { dimColor: true, children: meta }), currentFile && pathRoom > 0 && _jsx(Text, { dimColor: true, children: sep }), currentFile && pathRoom > 0 && _jsx(Text, { children: truncatedPath })] }), _jsx(Box, { flexShrink: 0, width: width, children: _jsx(Text, { dimColor: true, wrap: "truncate", children: "─".repeat(width) }) }), _jsxs(Box, { height: bodyHeight, flexShrink: 0, overflow: "hidden", children: [_jsx(Box, { flexDirection: "column", width: leftWidth, height: bodyHeight, overflow: "hidden", paddingRight: 1, children: loadingFiles ? (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { dimColor: true, children: " Loading files..." })] })) : error ? (_jsx(Text, { color: "red", children: error })) : files.length === 0 ? (_jsx(Text, { dimColor: true, children: "No changes" })) : (visibleRows.map((row, i) => {
+                            const absIdx = effectiveScroll + i;
+                            const isSelected = absIdx === selectedRowIdx;
+                            const text = `${row.prefix}${row.label}`;
+                            // Selected row keeps its own color (file-status hue or directory
+                            // blue) but gets the theme-aware selection bg + bold so it stays
+                            // readable in light and dark modes alike.
+                            return (_jsx(Text, { color: row.color, backgroundColor: isSelected ? selectionBg : undefined, bold: row.bold || isSelected, dimColor: row.dim, wrap: "truncate", children: text }, i));
+                        })) }), _jsx(Box, { flexDirection: "column", height: bodyHeight, children: Array.from({ length: bodyHeight }).map((_, i) => (_jsx(Text, { dimColor: true, children: "\u2502" }, i))) }), _jsx(Box, { flexDirection: "column", width: rightWidth, height: bodyHeight, overflow: "hidden", paddingLeft: 1, children: loadingContent ? (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), _jsx(Text, { dimColor: true, children: " Loading diff..." })] })) : !currentFile ? (_jsx(Text, { dimColor: true, children: "Select a file" })) : visibleLines.length === 0 ? (_jsx(Text, { dimColor: true, children: "(empty diff)" })) : (visibleLines.map((line, i) => {
+                            // rightWidth includes the paddingLeft={1} of the wrapper Box,
+                            // so usable column count is rightWidth - 1.
+                            const cell = truncateVisible(line.text || " ", Math.max(1, rightWidth - 1));
+                            return (_jsx(Text, { color: line.color, bold: line.bold, dimColor: line.dim, children: cell }, i));
+                        })) })] }), _jsx(Box, { flexShrink: 0, width: width, children: _jsx(Text, { dimColor: true, wrap: "truncate", children: "j/k file \u2022 J/K scroll \u2022 g/G top/bot \u2022 click select \u2022 wheel scroll \u2022 q close" }) })] }));
+}

package/dist/lib/dashboard/IssueList.d.ts

@@ -6,8 +6,25 @@ interface Props {
     scrollOffset: number;
     height: number;
     width: number;
-    creatingForTicket: string | null;
-    deletingForTicket: string | null;
+    /** Theme-adapted selection background (light/dark). Falls back to dark navy. */
+    selectionBg?: string;
 }
-export default function IssueList({ groups, flatIssues, selectedIndex, scrollOffset, height, width, creatingForTicket, deletingForTicket, }: Props): import("react/jsx-runtime").JSX.Element;
+export type ListRow = {
+    kind: "header";
+    name: string;
+    count: number;
+    isFirst: boolean;
+} | {
+    kind: "status-header";
+    name: string;
+    type: string;
+    count: number;
+} | {
+    kind: "issue";
+    issue: DashboardIssue;
+    flatIndex: number;
+    depth: number;
+};
+export declare function buildIssueListRows(groups: ProjectGroup[], flatIssues: DashboardIssue[]): ListRow[];
+export default function IssueList({ groups, flatIssues, selectedIndex, scrollOffset, height, width, selectionBg, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lib/dashboard/IssueList.js

@@ -21,130 +21,101 @@ function stateColor(type, name) {
             return "yellow";
     }
 }
-function priorityIndicator(priority) {
-    switch (priority) {
-        case 1:
-            return { text: "!!!", color: "red" };
-        case 2:
-            return { text: "!! ", color: "yellow" };
-        case 3:
-            return { text: "!  ", color: "blue" };
-        case 4:
-            return { text: "·  ", color: "gray" };
-        default:
-            return { text: "   ", color: "gray" };
-    }
+/**
+ * One-character priority marker, only rendered for urgent (P1) and high (P2)
+ * — everything else is a single space so columns still align. This is one of
+ * the few places we use color, so it stands out without shouting.
+ */
+function priorityMarker(priority) {
+    if (priority === 1)
+        return { glyph: "▎", color: "red" };
+    if (priority === 2)
+        return { glyph: "▎", color: "yellow" };
+    return { glyph: " ", color: "gray" };
+}
+function workIndicator(wt) {
+    if (!wt)
+        return { glyph: "·", color: "gray" };
+    return { glyph: "✓", color: "green" };
 }
-function checksIndicator(checks) {
+function ciIndicator(checks) {
     if (!checks || checks.length === 0)
-        return { text: "-", color: "gray" };
+        return { glyph: "·", color: "gray" };
     if (checks.some((c) => c.bucket === "fail"))
-        return { text: "✗", color: "red" };
+        return { glyph: "✗", color: "red" };
     if (checks.every((c) => c.bucket === "pass"))
-        return { text: "✓", color: "green" };
-    return { text: "●", color: "yellow" };
+        return { glyph: "✓", color: "green" };
+    return { glyph: "●", color: "yellow" };
 }
-function prIndicator(pr) {
-    if (!pr)
-        return { text: "-", color: "gray" };
-    const label = `#${pr.number}`;
-    if (pr.state === "MERGED")
-        return { text: label, color: "magenta" };
-    if (pr.state === "CLOSED")
-        return { text: label, color: "red" };
-    if (pr.isDraft)
-        return { text: label, color: "gray" };
-    return { text: label, color: "green" };
-}
-function sessionIndicator(wt, isCreating, isDeleting) {
-    if (isDeleting)
-        return { text: " deleting", color: "red" };
-    if (isCreating)
-        return { text: " creating", color: "yellow" };
-    if (!wt)
-        return { text: " -", color: "gray" };
-    // Session state takes priority over session ID
-    if (wt.sessionState === "waiting")
-        return { text: " waiting!", color: "red" };
-    if (wt.sessionState === "active")
-        return { text: " active", color: "green" };
-    if (wt.sessionState === "idle")
-        return { text: " idle", color: "yellow" };
-    if (wt.sessionId)
-        return { text: " " + wt.sessionId.slice(0, 8), color: "cyan" };
-    return { text: " none", color: "red" };
-}
-function buildRows(groups, flatIssues) {
-    const rows = [{ kind: "columns" }];
-    // Build a map from issue identifier to flat index
+export function buildIssueListRows(groups, flatIssues) {
+    const rows = [];
     const indexMap = new Map();
     flatIssues.forEach((di, i) => indexMap.set(di.issue.identifier, i));
     function pushIssueWithChildren(di, depth) {
-        rows.push({
-            kind: "issue",
-            issue: di,
-            flatIndex: indexMap.get(di.issue.identifier) ?? -1,
-            depth,
-        });
+        const flatIndex = indexMap.get(di.issue.identifier) ?? -1;
+        rows.push({ kind: "issue", issue: di, flatIndex, depth });
         if (di.children) {
             for (const child of di.children) {
                 pushIssueWithChildren(child, depth + 1);
             }
         }
     }
-    for (const group of groups) {
+    groups.forEach((group, gi) => {
         const totalIssues = group.statusGroups.reduce((sum, sg) => sum + sg.issues.length, 0);
-        rows.push({ kind: "header", name: group.name, count: totalIssues });
+        rows.push({ kind: "header", name: group.name, count: totalIssues, isFirst: gi === 0 });
         for (const sg of group.statusGroups) {
             rows.push({ kind: "status-header", name: sg.name, type: sg.type, count: sg.issues.length });
             for (const di of sg.issues) {
                 pushIssueWithChildren(di, 0);
             }
         }
-    }
+    });
     return rows;
 }
-const FOOTER_HEIGHT = 2;
-export default function IssueList({ groups, flatIssues, selectedIndex, scrollOffset, height, width, creatingForTicket, deletingForTicket, }) {
-    const rows = buildRows(groups, flatIssues);
-    const listHeight = height - FOOTER_HEIGHT;
-    const visible = rows.slice(scrollOffset, scrollOffset + listHeight);
-    // 2 cursor + 2 dot + 4 priority + 11 id + title + 9 session + 1 space + 6 pr + 1 space + 2 checks
-    const prColWidth = 6;
-    const checksColWidth = 2;
-    const sessionColWidth = 9;
-    const priorityColWidth = 4;
-    const fixedWidth = 2 + 2 + priorityColWidth + 11 + sessionColWidth + 1 + prColWidth + 1 + checksColWidth;
-    const titleMaxWidth = Math.max(width - fixedWidth, 10);
-    const footerRule = "─".repeat(width);
-    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, children: [_jsx(Box, { flexDirection: "column", height: listHeight, children: visible.map((row, i) => {
-                    if (row.kind === "columns") {
-                        const labelPad = 14 + priorityColWidth + titleMaxWidth;
-                        return (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "".padEnd(labelPad) }), _jsx(Text, { dimColor: true, children: "session".padStart(sessionColWidth) }), _jsx(Text, { dimColor: true, children: " " }), _jsx(Text, { dimColor: true, children: "pr".padStart(prColWidth) }), _jsx(Text, { dimColor: true, children: " " }), _jsx(Text, { dimColor: true, children: "ci".padStart(checksColWidth) })] }, "col-header"));
-                    }
-                    if (row.kind === "header") {
-                        return (_jsx(Box, { children: _jsxs(Text, { dimColor: true, bold: true, children: ["── ", row.name, " (", row.count, ")", " ──"] }) }, `h-${i}`));
-                    }
-                    if (row.kind === "status-header") {
-                        return (_jsx(Box, { children: _jsxs(Text, { color: stateColor(row.type, row.name), dimColor: true, children: ["   ", row.name, " (", row.count, ")"] }) }, `sh-${i}`));
-                    }
-                    const { issue, flatIndex, depth } = row;
-                    const selected = flatIndex === selectedIndex;
-                    const di = issue;
-                    const sc = stateColor(di.issue.state.type, di.issue.state.name);
-                    const isCreating = di.issue.identifier === creatingForTicket;
-                    const isDeleting = di.issue.identifier === deletingForTicket;
-                    const sess = sessionIndicator(di.worktree, isCreating, isDeleting);
-                    const ci = checksIndicator(di.checks);
-                    const pr = prIndicator(di.pr);
-                    const prio = priorityIndicator(di.issue.priority);
-                    const cursor = selected ? ">" : " ";
-                    const nestPrefix = depth > 0 ? "  ".repeat(depth - 1) + "└ " : "";
-                    const adjustedTitleWidth = Math.max(titleMaxWidth - nestPrefix.length, 5);
-                    const title = di.issue.title.length > adjustedTitleWidth
-                        ? di.issue.title.slice(0, adjustedTitleWidth - 1) + "…"
-                        : di.issue.title;
-                    const bg = selected ? "#1e3a5f" : undefined;
-                    return (_jsxs(Box, { width: width, children: [_jsxs(Text, { backgroundColor: bg, color: selected ? "cyan" : undefined, bold: selected, children: [cursor, " "] }), _jsx(Text, { backgroundColor: bg, color: sc, children: "\u25CF" }), _jsxs(Text, { backgroundColor: bg, color: prio.color, children: [" ", prio.text] }), _jsxs(Text, { backgroundColor: bg, color: selected ? "cyan" : undefined, bold: selected, children: [nestPrefix, di.issue.identifier.padEnd(10)] }), _jsx(Text, { backgroundColor: bg, color: selected ? "white" : undefined, bold: selected, children: title.padEnd(adjustedTitleWidth) }), _jsx(Text, { backgroundColor: bg, color: selected ? (sess.color === "gray" ? "gray" : sess.color) : sess.color, children: sess.text.padStart(sessionColWidth) }), _jsx(Text, { backgroundColor: bg, children: " " }), _jsx(Text, { backgroundColor: bg, color: selected ? (pr.color === "gray" ? "gray" : pr.color) : pr.color, children: pr.text.padStart(prColWidth) }), _jsx(Text, { backgroundColor: bg, children: " " }), _jsx(Text, { backgroundColor: bg, color: selected ? (ci.color === "gray" ? "gray" : ci.color) : ci.color, children: ci.text.padStart(checksColWidth) })] }, di.issue.identifier));
-                }) }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: footerRule }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", bold: true, children: "j/k" }), _jsx(Text, { color: "white", children: " Navigate" }), "   ", _jsx(Text, { color: "cyan", bold: true, children: "Shift + \u2191\u2193" }), _jsx(Text, { color: "white", children: " Scroll detail" }), "   ", _jsx(Text, { color: "cyan", bold: true, children: "E" }), _jsx(Text, { color: "white", children: " Workspace" }), "   ", _jsx(Text, { color: "cyan", bold: true, children: "R" }), _jsx(Text, { color: "white", children: " Refresh" }), "   ", _jsx(Text, { color: "cyan", bold: true, children: "q" }), _jsx(Text, { color: "white", children: " Quit" })] })] })] }));
+// Issue row anatomy:
+//   priority(1) │ space(1) │ dot(1) │ space(2) │ id(11) │ space(1) │ title(rest) │ pad │ WT(2) │ space(2) │ CI(2)
+// Each right-side column is 2 chars wide (matching the 2-char header label).
+// Glyphs are 1 char and rendered right-aligned within their column.
+const LEFT_FIXED = 1 + 1 + 1 + 2 + 11; // 16 — left-aligned columns
+const RIGHT_FIXED = 2 + 2 + 2; // 6 — WT + 2 spaces + CI
+const TITLE_GAP = 2; // minimum spacing between title and the right columns
+export default function IssueList({ groups, flatIssues, selectedIndex, scrollOffset, height, width, selectionBg = "#1e3a5f", }) {
+    const rows = buildIssueListRows(groups, flatIssues);
+    const visible = rows.slice(scrollOffset, scrollOffset + height);
+    const titleMaxWidth = Math.max(width - LEFT_FIXED - 1 /* leading space */ - RIGHT_FIXED - TITLE_GAP, 10);
+    return (_jsx(Box, { flexDirection: "column", width: width, height: height, children: _jsx(Box, { flexDirection: "column", height: height, children: visible.map((row, i) => {
+                if (row.kind === "header") {
+                    // On the first project header, also render the WT/CI column
+                    // labels right-aligned to the worktree/CI glyph columns —
+                    // keeps the labels discoverable without burning a row.
+                    // Label "WT CI" is 5 chars; the "W" lines up with the WT
+                    // glyph at column (width - RIGHT_FIXED + 1).
+                    const namePart = `${row.name}  ${row.count}`;
+                    const labelText = "WT CI";
+                    const labelPad = row.isFirst
+                        ? Math.max(2, width - namePart.length - labelText.length)
+                        : 0;
+                    return (_jsxs(Box, { marginTop: i === 0 ? 0 : 1, children: [_jsx(Text, { bold: true, children: row.name }), _jsxs(Text, { dimColor: true, children: ["  ", row.count] }), row.isFirst && _jsx(Text, { dimColor: true, children: `${" ".repeat(labelPad)}${labelText}` })] }, `h-${i}`));
+                }
+                if (row.kind === "status-header") {
+                    return (_jsxs(Box, { children: [_jsxs(Text, { color: stateColor(row.type, row.name), children: ["  ", row.name] }), _jsxs(Text, { dimColor: true, children: ["  ", row.count] })] }, `sh-${i}`));
+                }
+                const { issue, flatIndex, depth } = row;
+                const selected = flatIndex === selectedIndex;
+                const di = issue;
+                const sc = stateColor(di.issue.state.type, di.issue.state.name);
+                const prio = priorityMarker(di.issue.priority);
+                const work = workIndicator(di.worktree);
+                const ci = ciIndicator(di.checks);
+                const nestPrefix = depth > 0 ? "  ".repeat(depth - 1) + "└ " : "";
+                const adjustedTitleWidth = Math.max(titleMaxWidth - nestPrefix.length, 5);
+                const title = di.issue.title.length > adjustedTitleWidth
+                    ? di.issue.title.slice(0, adjustedTitleWidth - 1) + "…"
+                    : di.issue.title;
+                const bg = selected ? selectionBg : undefined;
+                // Pad between title and the right columns so the W/CI markers stay
+                // pinned to the right edge regardless of title length.
+                const trailingPad = Math.max(0, width - LEFT_FIXED - 1 - nestPrefix.length - title.length - RIGHT_FIXED);
+                return (_jsxs(Box, { width: width, children: [_jsx(Text, { backgroundColor: bg, color: prio.color, children: prio.glyph }), _jsx(Text, { backgroundColor: bg, children: " " }), _jsx(Text, { backgroundColor: bg, color: sc, children: "\u25CF" }), _jsx(Text, { backgroundColor: bg, children: "  " }), _jsxs(Text, { backgroundColor: bg, dimColor: true, children: [nestPrefix, di.issue.identifier.padEnd(10)] }), _jsxs(Text, { backgroundColor: bg, bold: selected, children: [" ", title] }), _jsx(Text, { backgroundColor: bg, children: " ".repeat(trailingPad) }), _jsx(Text, { backgroundColor: bg, children: " " }), _jsx(Text, { backgroundColor: bg, color: work.color, children: work.glyph }), _jsx(Text, { backgroundColor: bg, children: "  " }), _jsx(Text, { backgroundColor: bg, children: " " }), _jsx(Text, { backgroundColor: bg, color: ci.color, children: ci.glyph })] }, di.issue.identifier));
+            }) }) }));
 }