santree 0.4.0 → 0.5.0

package/dist/lib/dashboard/DetailPanel.js

@@ -49,10 +49,12 @@ function fileColor(xy) {
         return "gray";
     return "yellow";
 }
-function buildActions(di) {
+/** Returns the context-sensitive action key list for the selected issue.
+ * Lifted out of the panel so the dashboard can render it on the same row as
+ * the global command bar (so left- and right-pane key hints align). */
+export function buildIssueActions(di) {
     const { worktree, pr, issue } = di;
     const items = [];
-    // Work/Resume
     if (worktree?.sessionId) {
         items.push({ key: "↵", label: "Resume", color: "cyan" });
     }
@@ -63,15 +65,15 @@ function buildActions(di) {
     else {
         items.push({ key: "w", label: "Work", color: "cyan" });
     }
-    // Editor
     if (worktree) {
         items.push({ key: "e", label: "Editor", color: "cyan" });
     }
-    // Commit
     if (worktree?.dirty) {
         items.push({ key: "C", label: "Commit", color: "cyan" });
     }
-    // PR actions
+    if (worktree) {
+        items.push({ key: "v", label: "View diff", color: "cyan" });
+    }
     if (worktree && !pr) {
         items.push({ key: "c", label: "Create PR", color: "cyan" });
     }
@@ -79,17 +81,26 @@ function buildActions(di) {
         items.push({ key: "f", label: "Fix PR", color: "cyan" });
         items.push({ key: "r", label: "Review", color: "cyan" });
     }
-    // Links
     if (issue.url) {
         items.push({ key: "o", label: "Linear", color: "gray" });
     }
     if (pr)
         items.push({ key: "p", label: "Open PR", color: "gray" });
-    // Destructive
     if (worktree) {
         items.push({ key: "d", label: "Remove", color: "red" });
     }
-    return [items];
+    return items;
+}
+/** Section title with a colored leading icon and a bold name. Kept consistent
+ * across all sections so the eye can immediately find the next block. */
+function sectionHeader(icon, label, iconColor = "cyan") {
+    return {
+        text: "",
+        segments: [
+            { text: `${icon} `, color: iconColor, bold: true },
+            { text: label, bold: true },
+        ],
+    };
 }
 export default function DetailPanel({ issue, scrollOffset, height, width, creatingForTicket, creationLogs, }) {
     // Show creation logs when selected issue is being created
@@ -106,116 +117,227 @@ export default function DetailPanel({ issue, scrollOffset, height, width, creati
     const { issue: li, worktree, pr } = issue;
     const lines = [];
     const rule = "─".repeat(width);
-    // ── Hero: identifier + title ──────────────────────────────────────
+    const ruleLine = { text: rule, dim: true };
+    // ── Hero: identifier + title, then a status pill row ───────────────
     lines.push({ text: `${li.identifier}  ${li.title}`, bold: true });
-    const meta = [];
-    meta.push(li.state.name);
-    meta.push(li.priorityLabel);
-    if (li.labels.length > 0)
-        meta.push(li.labels.join(", "));
-    lines.push({ text: meta.join(" · "), color: stateColor(li.state.type) });
+    const sc = stateColor(li.state.type);
+    const heroSegs = [
+        { text: "● ", color: sc },
+        { text: li.state.name, color: sc },
+        { text: "  ·  ", dim: true },
+        { text: li.priorityLabel },
+    ];
+    if (li.labels.length > 0) {
+        heroSegs.push({ text: "  ·  ", dim: true });
+        heroSegs.push({ text: li.labels.join(", "), dim: true });
+    }
+    lines.push({ text: "", segments: heroSegs });
     // ── Description ───────────────────────────────────────────────────
     if (li.description) {
-        lines.push({ text: rule, dim: true });
         lines.push({ text: "" });
         for (const dLine of li.description.trimEnd().split("\n")) {
             lines.push({ text: dLine });
         }
-        lines.push({ text: "" });
     }
-    // ── Worktree (enhanced) ───────────────────────────────────────────
-    lines.push({ text: rule, dim: true });
-    lines.push({ text: "WORKTREE", dim: true });
+    // ── Worktree ──────────────────────────────────────────────────────
+    lines.push(ruleLine);
     if (worktree) {
+        // Header carries a quick status badge (clean / dirty) so the user can tell
+        // at a glance without reading further.
+        const dirty = worktree.dirty;
+        lines.push({
+            text: "",
+            segments: [
+                { text: "⎇ ", color: "cyan", bold: true },
+                { text: "Worktree", bold: true },
+                { text: "   " },
+                {
+                    text: dirty ? "● dirty" : "✓ clean",
+                    color: dirty ? "yellow" : "green",
+                },
+            ],
+        });
         lines.push({ text: `  ${worktree.branch}` });
         lines.push({ text: `  ${worktree.path}`, dim: true });
-        const gs = parseGitStatus(worktree.gitStatus);
-        const statusParts = [];
-        if (gs.staged > 0)
-            statusParts.push(`+${gs.staged} staged`);
-        if (gs.unstaged > 0)
-            statusParts.push(`~${gs.unstaged} unstaged`);
-        if (gs.untracked > 0)
-            statusParts.push(`?${gs.untracked} untracked`);
-        if (worktree.commitsAhead > 0)
-            statusParts.push(`+${worktree.commitsAhead} ahead`);
-        if (statusParts.length > 0) {
-            lines.push({
-                text: `  ${statusParts.join("  ")}`,
-                color: worktree.dirty ? "yellow" : "green",
-            });
-        }
-        else {
-            lines.push({ text: "  ✓ clean", color: "green" });
-        }
-        // Show individual files (up to 8)
-        const maxFiles = 8;
-        for (let i = 0; i < Math.min(gs.files.length, maxFiles); i++) {
-            const f = gs.files[i];
-            lines.push({ text: `    ${f.xy} ${f.file}`, color: fileColor(f.xy) });
-        }
-        if (gs.files.length > maxFiles) {
-            lines.push({ text: `    +${gs.files.length - maxFiles} more`, dim: true });
-        }
-        if (worktree.sessionId) {
-            lines.push({ text: `  session: ${worktree.sessionId}`, color: "cyan" });
+        // Single metric row: files / +ins / -dels / commits ahead.
+        const ds = worktree.diffStats;
+        if (ds && (ds.insertions > 0 || ds.deletions > 0 || ds.filesChanged > 0)) {
+            const segs = [{ text: "  " }];
+            if (ds.filesChanged > 0) {
+                segs.push({
+                    text: `${ds.filesChanged} file${ds.filesChanged === 1 ? "" : "s"}`,
+                });
+            }
+            if (ds.insertions > 0) {
+                if (segs.length > 1)
+                    segs.push({ text: "   " });
+                segs.push({ text: `+${ds.insertions}`, color: "green" });
+            }
+            if (ds.deletions > 0) {
+                if (segs.length > 1)
+                    segs.push({ text: "   " });
+                segs.push({ text: `−${ds.deletions}`, color: "red" });
+            }
+            if (worktree.commitsAhead > 0) {
+                if (segs.length > 1)
+                    segs.push({ text: "   " });
+                segs.push({ text: `↑ ${worktree.commitsAhead}`, color: "cyan" });
+            }
+            lines.push({ text: "", segments: segs });
         }
-        else {
-            lines.push({ text: "  session: none", color: "red" });
+        // Per-status counts only when there's something dirty — when the tree is
+        // clean the badge in the section header already says so.
+        const gs = parseGitStatus(worktree.gitStatus);
+        if (dirty) {
+            const statusSegs = [{ text: "  " }];
+            if (gs.staged > 0) {
+                if (statusSegs.length > 1)
+                    statusSegs.push({ text: "   " });
+                statusSegs.push({ text: `+${gs.staged} staged`, color: "green" });
+            }
+            if (gs.unstaged > 0) {
+                if (statusSegs.length > 1)
+                    statusSegs.push({ text: "   " });
+                statusSegs.push({ text: `~${gs.unstaged} unstaged`, color: "yellow" });
+            }
+            if (gs.untracked > 0) {
+                if (statusSegs.length > 1)
+                    statusSegs.push({ text: "   " });
+                statusSegs.push({ text: `?${gs.untracked} untracked`, color: "gray" });
+            }
+            if (statusSegs.length > 1) {
+                lines.push({ text: "", segments: statusSegs });
+            }
+            // Show individual files (up to 8)
+            const maxFiles = 8;
+            for (let i = 0; i < Math.min(gs.files.length, maxFiles); i++) {
+                const f = gs.files[i];
+                lines.push({ text: `    ${f.xy} ${f.file}`, color: fileColor(f.xy) });
+            }
+            if (gs.files.length > maxFiles) {
+                lines.push({ text: `    +${gs.files.length - maxFiles} more`, dim: true });
+            }
         }
+        // Session state — single line, color reflects state.
         if (worktree.sessionState === "waiting") {
             const msg = worktree.sessionMessage
                 ? `NEEDS INPUT: ${worktree.sessionMessage}`
                 : "NEEDS INPUT";
-            lines.push({ text: `  ${msg}`, color: "red" });
+            lines.push({
+                text: "",
+                segments: [
+                    { text: "  ◆ ", color: "red" },
+                    { text: msg, color: "red", bold: true },
+                ],
+            });
+        }
+        else if (worktree.sessionState === "active") {
+            lines.push({
+                text: "",
+                segments: [
+                    { text: "  ◆ ", color: "green" },
+                    { text: "session active", color: "green" },
+                ],
+            });
         }
         else if (worktree.sessionState === "idle") {
-            lines.push({ text: "  session idle (waiting for prompt)", color: "yellow" });
+            lines.push({
+                text: "",
+                segments: [
+                    { text: "  ◆ ", color: "yellow" },
+                    { text: "session idle", color: "yellow" },
+                    { text: "  (waiting for prompt)", dim: true },
+                ],
+            });
         }
-        else if (worktree.sessionState === "active") {
-            lines.push({ text: "  session active (working)", color: "green" });
+        else if (worktree.sessionId) {
+            lines.push({
+                text: "",
+                segments: [
+                    { text: "  ◇ ", color: "cyan" },
+                    { text: "session ", dim: true },
+                    { text: worktree.sessionId.slice(0, 8), color: "cyan" },
+                ],
+            });
+        }
+        else {
+            lines.push({
+                text: "",
+                segments: [
+                    { text: "  ◇ ", dim: true },
+                    { text: "no session", dim: true },
+                ],
+            });
         }
     }
     else {
-        lines.push({ text: "  –", dim: true });
+        lines.push(sectionHeader("⎇", "Worktree"));
+        lines.push({ text: "  no worktree for this ticket", dim: true });
     }
     // ── Pull Request ──────────────────────────────────────────────────
     const { checks, reviews } = issue;
-    lines.push({ text: rule, dim: true });
-    lines.push({ text: "PULL REQUEST", dim: true });
+    lines.push(ruleLine);
     if (pr) {
-        const sc = pr.state === "MERGED" ? "magenta" : pr.state === "OPEN" ? "green" : "red";
-        const draft = pr.isDraft ? " draft" : "";
-        lines.push({ text: `  #${pr.number} ${pr.state}${draft}`, color: sc });
+        const prColor = pr.state === "MERGED" ? "magenta" : pr.state === "OPEN" ? "green" : "red";
+        const draft = pr.isDraft ? " · draft" : "";
+        lines.push({
+            text: "",
+            segments: [
+                { text: "◉ ", color: "cyan", bold: true },
+                { text: "Pull Request", bold: true },
+                { text: "   " },
+                { text: `#${pr.number}`, color: prColor, bold: true },
+                { text: "  " },
+                { text: pr.state, color: prColor },
+                { text: draft, dim: true },
+            ],
+        });
         if (pr.url) {
             lines.push({ text: `  ${pr.url}`, dim: true });
         }
     }
     else {
-        lines.push({ text: "  –", dim: true });
+        lines.push(sectionHeader("◉", "Pull Request"));
+        lines.push({ text: "  no PR yet", dim: true });
     }
     // ── Checks ────────────────────────────────────────────────────────
     if (checks && checks.length > 0) {
-        const passCount = checks.filter((c) => c.bucket === "pass").length;
-        lines.push({ text: rule, dim: true });
-        lines.push({ text: `CHECKS  ${passCount}/${checks.length} passing`, dim: true });
-        for (const check of checks) {
-            if (check.bucket === "pass") {
-                lines.push({ text: `  ✓ ${check.name}`, color: "green" });
-            }
-            else if (check.bucket === "fail") {
-                const desc = check.description ? ` — ${check.description}` : "";
-                lines.push({ text: `  ✗ ${check.name}${desc}`, color: "red" });
-            }
-            else {
-                lines.push({ text: `  ● ${check.name} (pending)`, color: "yellow" });
-            }
+        const passing = checks.filter((c) => c.bucket === "pass");
+        const failing = checks.filter((c) => c.bucket === "fail");
+        const pending = checks.filter((c) => c.bucket !== "pass" && c.bucket !== "fail");
+        const headerColor = failing.length > 0 ? "red" : pending.length > 0 ? "yellow" : "green";
+        lines.push(ruleLine);
+        const headerSegs = [
+            { text: "✓ ", color: "cyan", bold: true },
+            { text: "Checks", bold: true },
+            { text: "   " },
+            { text: `${passing.length}/${checks.length} passing`, color: headerColor },
+        ];
+        if (failing.length > 0) {
+            headerSegs.push({ text: "  ·  ", dim: true });
+            headerSegs.push({ text: `${failing.length} failing`, color: "red" });
+        }
+        if (pending.length > 0) {
+            headerSegs.push({ text: "  ·  ", dim: true });
+            headerSegs.push({ text: `${pending.length} pending`, color: "yellow" });
+        }
+        lines.push({ text: "", segments: headerSegs });
+        // Order: failing first (most important), then pending, then passing.
+        for (const check of failing) {
+            const desc = check.description ? ` — ${check.description}` : "";
+            lines.push({ text: `  ✗ ${check.name}${desc}`, color: "red" });
+        }
+        for (const check of pending) {
+            lines.push({ text: `  ● ${check.name}`, color: "yellow" });
+        }
+        for (const check of passing) {
+            lines.push({ text: `  ✓ ${check.name}`, color: "green" });
         }
     }
     // ── Reviews ───────────────────────────────────────────────────────
     if (reviews && reviews.length > 0) {
-        lines.push({ text: rule, dim: true });
-        lines.push({ text: "REVIEWS", dim: true });
+        lines.push(ruleLine);
+        lines.push(sectionHeader("★", "Reviews"));
         for (const review of reviews) {
             const author = review.author.login;
             const rc = review.state === "APPROVED"
@@ -223,18 +345,18 @@ export default function DetailPanel({ issue, scrollOffset, height, width, creati
                 : review.state === "CHANGES_REQUESTED"
                     ? "red"
                     : "yellow";
-            lines.push({ text: `  ${author}  ${review.state}`, color: rc });
+            lines.push({
+                text: "",
+                segments: [{ text: `  ${author}` }, { text: "   " }, { text: review.state, color: rc }],
+            });
         }
     }
-    // ── Build actions footer ──────────────────────────────────────────
-    const actionRows = buildActions(issue);
-    // +1 for the separator line
-    const actionsHeight = actionRows.length + 1;
-    const scrollableHeight = height - actionsHeight;
-    // ── Render scrollable content ─────────────────────────────────────
+    // Action footer is rendered by the dashboard one row outside the panel,
+    // alongside the global command bar, so left- and right-pane key hints sit
+    // on the same row. The panel itself uses its full height for content.
     const totalLines = lines.length;
-    const canScroll = totalLines > scrollableHeight;
-    const contentRows = canScroll ? scrollableHeight - 2 : scrollableHeight;
+    const canScroll = totalLines > height;
+    const contentRows = canScroll ? height - 2 : height;
     const clampedOffset = Math.min(scrollOffset, Math.max(0, totalLines - contentRows));
     const visible = lines.slice(clampedOffset, clampedOffset + contentRows);
     let scrollArrow = null;
@@ -243,5 +365,29 @@ export default function DetailPanel({ issue, scrollOffset, height, width, creati
         const atBottom = clampedOffset + contentRows >= totalLines;
         scrollArrow = atTop ? "↓ scroll" : atBottom ? "↑ scroll" : "↑↓ scroll";
     }
-    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, children: [visible.map((line, i) => (_jsx(Box, { children: _jsx(Text, { color: line.color, bold: line.bold, dimColor: line.dim, children: line.text || " " }) }, i))), scrollArrow && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: " " }) })), scrollArrow && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: scrollArrow }) })), _jsx(Box, { flexGrow: 1 }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: rule }) }), actionRows.map((row, i) => (_jsx(Box, { children: row.map((item, j) => (_jsxs(Text, { children: ["  ", _jsx(Text, { color: item.color, bold: true, children: item.key }), _jsxs(Text, { color: item.color === "gray" ? "gray" : "white", children: [" ", item.label] })] }, j))) }, `a-${i}`)))] }));
+    // Pre-truncate to keep long URLs/paths/descriptions from wrapping into the
+    // row below — Ink's Text wrap is unreliable at the box's right edge and was
+    // causing content to bleed into the next line and shift everything down.
+    const clamp = (s) => (s.length > width ? s.slice(0, Math.max(0, width - 1)) + "…" : s);
+    const clampSegments = (segs) => {
+        let remaining = width;
+        const out = [];
+        for (const seg of segs) {
+            if (remaining <= 0)
+                break;
+            if (seg.text.length <= remaining) {
+                out.push(seg);
+                remaining -= seg.text.length;
+            }
+            else {
+                out.push({
+                    ...seg,
+                    text: seg.text.slice(0, Math.max(0, remaining - 1)) + "…",
+                });
+                remaining = 0;
+            }
+        }
+        return out;
+    };
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, children: [visible.map((line, i) => (_jsx(Box, { children: line.segments ? (_jsx(Text, { children: clampSegments(line.segments).map((seg, j) => (_jsx(Text, { color: seg.color, bold: seg.bold, dimColor: seg.dim, children: seg.text }, j))) })) : (_jsx(Text, { color: line.color, bold: line.bold, dimColor: line.dim, children: line.text ? clamp(line.text) : " " })) }, i))), scrollArrow && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: " " }) })), scrollArrow && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: scrollArrow }) }))] }));
 }

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 {};