santree 0.3.0 → 0.5.0

package/dist/commands/worktree/diff.js

@@ -0,0 +1,76 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Text, Box, useApp } from "ink";
+import { z } from "zod";
+import { spawn } from "child_process";
+import { findRepoRoot, getCurrentBranch, getBaseBranch, getDiffTool } from "../../lib/git.js";
+import { run } from "../../lib/exec.js";
+export const description = "View worktree diff against its base branch (uses delta if installed)";
+export const options = z.object({
+    staged: z.boolean().optional().describe("Show only staged changes"),
+    unstaged: z.boolean().optional().describe("Show only unstaged changes (working tree vs index)"),
+    commits: z.boolean().optional().describe("Show only committed changes (base...HEAD)"),
+    base: z.string().optional().describe("Override base branch"),
+});
+export default function Diff({ options: opts }) {
+    const [status, setStatus] = useState({ state: "running" });
+    const { exit } = useApp();
+    useEffect(() => {
+        const repoRoot = findRepoRoot();
+        if (!repoRoot) {
+            setStatus({ state: "error", message: "Not inside a git repository" });
+            return;
+        }
+        const branch = getCurrentBranch();
+        if (!branch) {
+            setStatus({ state: "error", message: "Could not determine current branch" });
+            return;
+        }
+        const baseBranch = opts.base ?? getBaseBranch(branch);
+        // Use merge-base (not base tip) so upstream-only changes are excluded —
+        // matches GitHub PR diff semantics. Falls back to baseBranch if merge-base
+        // can't be resolved (e.g. unrelated histories).
+        const mergeBase = run(`git -C "${repoRoot}" merge-base "${baseBranch}" HEAD`) ?? baseBranch;
+        // Resolve diff range based on flags. Defaults to merge-base..working-tree
+        // (everything on this branch including uncommitted work, branch-only).
+        // Honor SANTREE_DIFF_TOOL by overriding core.pager just for this invocation
+        // — `-c` config takes precedence over the user's global git config.
+        const tool = getDiffTool();
+        const args = ["-C", repoRoot];
+        if (tool) {
+            args.push("-c", `core.pager=${tool}`);
+        }
+        args.push("diff");
+        if (opts.staged) {
+            args.push("--staged");
+        }
+        else if (opts.unstaged) {
+            // working tree vs index — no extra arg
+        }
+        else if (opts.commits) {
+            args.push(`${mergeBase}..HEAD`);
+        }
+        else {
+            args.push(mergeBase);
+        }
+        const child = spawn("git", args, { stdio: "inherit" });
+        child.on("error", (err) => {
+            setStatus({ state: "error", message: err.message });
+            exit();
+        });
+        child.on("close", (code) => {
+            setStatus({ state: "done", exitCode: code ?? 0 });
+            exit();
+        });
+        return () => {
+            if (!child.killed)
+                child.kill();
+        };
+    }, []);
+    if (status.state === "error") {
+        return (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["\u2717 ", status.message] }) }));
+    }
+    // While running: render nothing so git/delta own the terminal.
+    // On done: render nothing — git's output already filled the screen.
+    return null;
+}

package/dist/lib/ai.d.ts

@@ -37,8 +37,18 @@ export declare function fetchAndRenderPR(branch: string): Promise<string | null>
  */
 export declare function fetchAndRenderDiff(branch: string): Promise<string>;
 /**
- * Check if claude CLI is available on PATH.
- * Returns "claude" or null if not installed.
+ * Resolve the path to the Claude CLI binary, preferring cmux's bundled copy
+ * when running inside cmux. Falls back to PATH lookup, then to Anthropic's
+ * standard installer location (`~/.claude/local/claude`). Returns null if
+ * none of those resolve.
+ *
+ * Used by every santree code path that needs to invoke or report the Claude
+ * binary — version display, doctor checks, and interactive launches.
+ */
+export declare function resolveClaudeBinary(): string | null;
+/**
+ * @deprecated Use `resolveClaudeBinary()` directly. Kept as an alias because
+ * existing call sites pass the return value straight to spawn args.
  */
 export declare function resolveAgentBinary(): string | null;
 /**

package/dist/lib/ai.js

@@ -1,7 +1,8 @@
 import { execSync, spawn, spawnSync } from "child_process";
-import { writeFileSync } from "fs";
+import { existsSync, writeFileSync } from "fs";
 import { join } from "path";
-import { tmpdir } from "os";
+import { homedir, tmpdir } from "os";
+import { getMultiplexer } from "./multiplexer/index.js";
 import { getCurrentBranch, extractTicketId, findRepoRoot, findMainRepoRoot, getBaseBranch, } from "./git.js";
 import { renderPrompt, renderTicket, renderDiff, renderPR } from "./prompts.js";
 import { getTicketContent, cleanupImages } from "./linear.js";
@@ -105,17 +106,47 @@ export async function fetchAndRenderDiff(branch) {
     });
 }
 /**
- * Check if claude CLI is available on PATH.
- * Returns "claude" or null if not installed.
+ * cmux ships its own Claude CLI shim wired to the active cmux workspace. When
+ * we run inside cmux, the system `claude` (if any) talks to a different
+ * session — confusing for the user. See manaflow-ai/cmux#2048.
  */
-export function resolveAgentBinary() {
+const CMUX_CLAUDE_PATH = "/Applications/cmux.app/Contents/Resources/bin/claude";
+/**
+ * Resolve the path to the Claude CLI binary, preferring cmux's bundled copy
+ * when running inside cmux. Falls back to PATH lookup, then to Anthropic's
+ * standard installer location (`~/.claude/local/claude`). Returns null if
+ * none of those resolve.
+ *
+ * Used by every santree code path that needs to invoke or report the Claude
+ * binary — version display, doctor checks, and interactive launches.
+ */
+export function resolveClaudeBinary() {
+    // Inside cmux, the bundled binary is the only one wired to the active
+    // workspace. Always prefer it when present.
+    if (getMultiplexer().kind === "cmux" && existsSync(CMUX_CLAUDE_PATH)) {
+        return CMUX_CLAUDE_PATH;
+    }
+    // PATH lookup
     try {
         execSync("which claude", { stdio: "ignore" });
         return "claude";
     }
     catch {
-        return null;
+        // fall through
     }
+    // Anthropic installer location — Ink renders may not inherit the user's
+    // shell PATH, so check this explicitly.
+    const localClaude = join(homedir(), ".claude", "local", "claude");
+    if (existsSync(localClaude))
+        return localClaude;
+    return null;
+}
+/**
+ * @deprecated Use `resolveClaudeBinary()` directly. Kept as an alias because
+ * existing call sites pass the return value straight to spawn args.
+ */
+export function resolveAgentBinary() {
+    return resolveClaudeBinary();
 }
 // Conservative limit: 200KB leaves room for env vars within macOS 256KB ARG_MAX
 const ARG_MAX_SAFE = 200 * 1024;
@@ -143,12 +174,7 @@ export function launchAgent(prompt, opts) {
         throw new Error("Claude CLI not found. Install: npm install -g @anthropic-ai/claude-code");
     }
     const args = [];
-    if (process.env.SANTREE_SKIP_PERMISSIONS) {
-        args.push("--dangerously-skip-permissions");
-    }
-    if (opts?.planMode) {
-        args.push("--permission-mode", "plan");
-    }
+    args.push("--permission-mode", opts?.planMode ? "plan" : "auto");
     if (opts?.sessionId) {
         if (opts.resume) {
             args.push("--resume", opts.sessionId);
@@ -170,9 +196,17 @@ export function runAgent(prompt, opts) {
     if (!bin) {
         throw new Error("Claude CLI not found. Install: npm install -g @anthropic-ai/claude-code");
     }
-    const skipPerms = process.env.SANTREE_SKIP_PERMISSIONS ? ["--dangerously-skip-permissions"] : [];
     const toolArgs = opts?.allowedTools?.length ? ["--allowedTools", ...opts.allowedTools] : [];
-    const result = spawnSync(bin, [...skipPerms, ...toolArgs, "-p", "--output-format", "text", "--", promptArg(prompt)], {
+    const result = spawnSync(bin, [
+        "--permission-mode",
+        "auto",
+        ...toolArgs,
+        "-p",
+        "--output-format",
+        "text",
+        "--",
+        promptArg(prompt),
+    ], {
         encoding: "utf-8",
         maxBuffer: 10 * 1024 * 1024,
     });

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

@@ -7,5 +7,14 @@ interface Props {
     creatingForTicket: string | null;
     creationLogs: string;
 }
+export type IssueActionItem = {
+    key: string;
+    label: string;
+    color: string;
+};
+/** 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 declare function buildIssueActions(di: DashboardIssue): IssueActionItem[];
 export default function DetailPanel({ issue, scrollOffset, height, width, creatingForTicket, creationLogs, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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 }) }))] }));
 }