clairo 3.1.1 → 3.1.2

package/dist/cli.js

@@ -9,8 +9,8 @@ import { Box as Box24, Text as Text23, useApp, useInput as useInput19 } from "in
 
 // src/components/github/GitHubView.tsx
 import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef5, useState as useState12 } from "react";
-import { TitledBox as TitledBox3 } from "@mishieck/ink-titled-box";
-import { Box as Box6, Text as Text7, useInput as useInput4 } from "ink";
+import { TitledBox as TitledBox4 } from "@mishieck/ink-titled-box";
+import { Box as Box7, Text as Text8, useInput as useInput4 } from "ink";
 import { ScrollView as ScrollView4 } from "ink-scroll-view";
 
 // src/hooks/github/useGitRepo.ts
@@ -1555,7 +1555,7 @@ ${detail}
 // src/components/github/PRDetailsBox.tsx
 import open from "open";
 import { useRef as useRef2 } from "react";
-import { Box as Box3, Text as Text3, useInput, useStdout } from "ink";
+import { Box as Box4, Text as Text4, useInput } from "ink";
 import { ScrollView } from "ink-scroll-view";
 import Spinner from "ink-spinner";
 
@@ -1700,9 +1700,61 @@ function renderInlineToString(tokens) {
   }).join("");
 }
 
-// src/components/github/PRDetailsBox.tsx
+// src/components/ui/TitledBox.tsx
+import { Box as Box3, Spacer, Text as Text3, useStdout } from "ink";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function PRDetailsBox({ pr, loading, error, isActive, title = "[3] PR Details" }) {
+function TitledBox({
+  title,
+  borderColor,
+  scrollRatio = null,
+  fillColor = "#CC6600",
+  footer,
+  children
+}) {
+  const { stdout } = useStdout();
+  const terminalWidth = (stdout == null ? void 0 : stdout.columns) ?? 80;
+  const columnWidth = Math.floor(terminalWidth / 2);
+  const titlePart = `\u256D ${title} `;
+  const totalDashes = Math.max(0, columnWidth - titlePart.length - 1);
+  const topBorder = scrollRatio !== null && scrollRatio >= 0 ? /* @__PURE__ */ jsxs3(Text3, { children: [
+    /* @__PURE__ */ jsx4(Text3, { color: borderColor, children: titlePart }),
+    /* @__PURE__ */ jsx4(Text3, { color: fillColor, children: "\u2500".repeat(Math.round(scrollRatio * totalDashes)) }),
+    /* @__PURE__ */ jsxs3(Text3, { color: borderColor, children: [
+      "\u2500".repeat(totalDashes - Math.round(scrollRatio * totalDashes)),
+      "\u256E"
+    ] })
+  ] }) : /* @__PURE__ */ jsxs3(Text3, { color: borderColor, children: [
+    titlePart,
+    "\u2500".repeat(totalDashes),
+    "\u256E"
+  ] });
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", flexGrow: 1, children: [
+    topBorder,
+    /* @__PURE__ */ jsxs3(
+      Box3,
+      {
+        flexDirection: "column",
+        flexGrow: 1,
+        flexBasis: 0,
+        overflow: "hidden",
+        borderStyle: "round",
+        borderTop: false,
+        borderColor,
+        children: [
+          children,
+          footer && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsx4(Spacer, {}),
+            footer
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/github/PRDetailsBox.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function PRDetailsBox({ pr, loading, error, isActive, title = "[3] PR Details", footer }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const scrollRef = useRef2(null);
   const borderColor = isActive ? "yellow" : void 0;
@@ -1725,134 +1777,113 @@ function PRDetailsBox({ pr, loading, error, isActive, title = "[3] PR Details" }
     },
     { isActive }
   );
-  const { stdout } = useStdout();
-  const terminalWidth = (stdout == null ? void 0 : stdout.columns) ?? 80;
-  const columnWidth = Math.floor(terminalWidth / 2);
-  const titlePart = `\u256D ${displayTitle} `;
-  const dashCount = Math.max(0, columnWidth - titlePart.length - 1);
-  const topBorder = `${titlePart}${"\u2500".repeat(dashCount)}\u256E`;
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx4(Text3, { color: borderColor, children: topBorder }),
-    /* @__PURE__ */ jsx4(
-      Box3,
-      {
-        flexDirection: "column",
-        flexGrow: 1,
-        flexBasis: 0,
-        overflow: "hidden",
-        borderStyle: "round",
-        borderTop: false,
-        borderColor,
-        children: /* @__PURE__ */ jsx4(ScrollView, { ref: scrollRef, children: /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", paddingX: 1, children: [
-          loading && /* @__PURE__ */ jsxs3(Text3, { color: "yellow", children: [
-            /* @__PURE__ */ jsx4(Spinner, { type: "dots" }),
-            " Loading details..."
-          ] }),
-          error && /* @__PURE__ */ jsx4(Text3, { color: "red", children: error }),
-          !loading && !error && !pr && /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "Select a PR to view details" }),
-          !loading && !error && pr && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-            /* @__PURE__ */ jsxs3(Box3, { children: [
-              /* @__PURE__ */ jsxs3(Text3, { bold: true, children: [
-                pr.title,
-                " "
-              ] }),
-              /* @__PURE__ */ jsx4(Badge, { color: "black", background: mergeDisplay.color, children: mergeDisplay.text })
-            ] }),
-            /* @__PURE__ */ jsxs3(Box3, { children: [
-              /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-                pr.baseRefName,
-                " \u2190 ",
-                pr.headRefName,
-                " | by ",
-                ((_a = pr.author) == null ? void 0 : _a.login) ?? "unknown",
-                " | ",
-                ((_b = pr.commits) == null ? void 0 : _b.length) ?? 0,
-                " ",
-                "commits",
-                pr.createdAt && ` | opened ${timeAgo(pr.createdAt)}`,
-                " |",
-                " "
-              ] }),
-              /* @__PURE__ */ jsxs3(Text3, { color: "green", children: [
-                "+",
-                pr.additions
-              ] }),
-              /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: " " }),
-              /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
-                "-",
-                pr.deletions
-              ] })
-            ] }),
-            (((_c = pr.labels) == null ? void 0 : _c.length) ?? 0) > 0 && /* @__PURE__ */ jsx4(Box3, { gap: 1, children: pr.labels.map((l) => /* @__PURE__ */ jsx4(Box3, { children: /* @__PURE__ */ jsx4(Badge, { color: "black", background: "gray", children: l.name }) }, l.name)) }),
-            /* @__PURE__ */ jsx4(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx4(Divider, {}) }),
-            (((_d = pr.assignees) == null ? void 0 : _d.length) ?? 0) > 0 && /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, children: [
-              /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "Assignees: " }),
-              /* @__PURE__ */ jsx4(Text3, { children: pr.assignees.map((a) => a.login).join(", ") })
-            ] }),
-            ((((_e = pr.reviews) == null ? void 0 : _e.length) ?? 0) > 0 || (((_f = pr.reviewRequests) == null ? void 0 : _f.length) ?? 0) > 0) && /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
-              /* @__PURE__ */ jsxs3(Box3, { children: [
-                /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "Reviews: " }),
-                /* @__PURE__ */ jsx4(Text3, { color: reviewDisplay.color, children: reviewDisplay.text })
-              ] }),
-              (_g = pr.reviews) == null ? void 0 : _g.map((review, idx) => {
-                const color = review.state === "APPROVED" ? "green" : review.state === "CHANGES_REQUESTED" ? "red" : review.state === "COMMENTED" ? "blue" : "yellow";
-                const icon = review.state === "APPROVED" ? "\u2713" : review.state === "CHANGES_REQUESTED" ? "\u2717" : review.state === "COMMENTED" ? "\u{1F4AC}" : "\u25CB";
-                return /* @__PURE__ */ jsxs3(Text3, { color, children: [
-                  "  ",
-                  icon,
-                  " ",
-                  review.author.login
-                ] }, idx);
-              }),
-              (_h = pr.reviewRequests) == null ? void 0 : _h.map((r, idx) => /* @__PURE__ */ jsxs3(Text3, { color: "yellow", children: [
-                "  ",
-                "\u25CB ",
-                r.login ?? r.name ?? r.slug ?? "Team",
-                " ",
-                /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "(pending)" })
-              ] }, `pending-${idx}`))
-            ] }),
-            (((_i = pr.statusCheckRollup) == null ? void 0 : _i.length) ?? 0) > 0 && /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
-              /* @__PURE__ */ jsx4(Divider, {}),
-              /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "Checks:" }),
-              Array.from(
-                ((_j = pr.statusCheckRollup) == null ? void 0 : _j.reduce((acc, check) => {
-                  const key = check.name ?? check.context ?? "";
-                  const existing = acc.get(key);
-                  if (!existing || (check.startedAt ?? "") > (existing.startedAt ?? "")) {
-                    acc.set(key, check);
-                  }
-                  return acc;
-                }, /* @__PURE__ */ new Map()).values()) ?? []
-              ).sort((a, b) => CHECK_SORT_ORDER[resolveCheckStatus(a)] - CHECK_SORT_ORDER[resolveCheckStatus(b)]).map((check, idx) => {
-                const jobName = check.name ?? check.context;
-                const displayName = check.workflowName ? `${check.workflowName} / ${jobName}` : jobName;
-                const status = resolveCheckStatus(check);
-                return /* @__PURE__ */ jsxs3(Text3, { color: CHECK_COLORS[status], children: [
-                  "  ",
-                  CHECK_ICONS[status],
-                  " ",
-                  displayName
-                ] }, idx);
-              })
-            ] }),
-            pr.body && /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
-              /* @__PURE__ */ jsx4(Divider, {}),
-              /* @__PURE__ */ jsx4(Text3, { dimColor: true, children: "Description:" }),
-              /* @__PURE__ */ jsx4(Markdown, { children: pr.body })
-            ] })
-          ] })
-        ] }) })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx5(TitledBox, { title: displayTitle, borderColor, footer, children: /* @__PURE__ */ jsx5(Box4, { flexDirection: "column", flexGrow: 1, flexBasis: 0, overflow: "hidden", children: /* @__PURE__ */ jsx5(ScrollView, { ref: scrollRef, children: /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, children: [
+    loading && /* @__PURE__ */ jsxs4(Text4, { color: "yellow", children: [
+      /* @__PURE__ */ jsx5(Spinner, { type: "dots" }),
+      " Loading details..."
+    ] }),
+    error && /* @__PURE__ */ jsx5(Text4, { color: "red", children: error }),
+    !loading && !error && !pr && /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: "Select a PR to view details" }),
+    !loading && !error && pr && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsxs4(Text4, { bold: true, children: [
+          pr.title,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx5(Badge, { color: "black", background: mergeDisplay.color, children: mergeDisplay.text })
+      ] }),
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+          pr.baseRefName,
+          " \u2190 ",
+          pr.headRefName,
+          " | by ",
+          ((_a = pr.author) == null ? void 0 : _a.login) ?? "unknown",
+          " | ",
+          ((_b = pr.commits) == null ? void 0 : _b.length) ?? 0,
+          " ",
+          "commits",
+          pr.createdAt && ` | opened ${timeAgo(pr.createdAt)}`,
+          " |",
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs4(Text4, { color: "green", children: [
+          "+",
+          pr.additions
+        ] }),
+        /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: " " }),
+        /* @__PURE__ */ jsxs4(Text4, { color: "red", children: [
+          "-",
+          pr.deletions
+        ] })
+      ] }),
+      (((_c = pr.labels) == null ? void 0 : _c.length) ?? 0) > 0 && /* @__PURE__ */ jsx5(Box4, { gap: 1, children: pr.labels.map((l) => /* @__PURE__ */ jsx5(Box4, { children: /* @__PURE__ */ jsx5(Badge, { color: "black", background: "gray", children: l.name }) }, l.name)) }),
+      /* @__PURE__ */ jsx5(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx5(Divider, {}) }),
+      (((_d = pr.assignees) == null ? void 0 : _d.length) ?? 0) > 0 && /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: "Assignees: " }),
+        /* @__PURE__ */ jsx5(Text4, { children: pr.assignees.map((a) => a.login).join(", ") })
+      ] }),
+      ((((_e = pr.reviews) == null ? void 0 : _e.length) ?? 0) > 0 || (((_f = pr.reviewRequests) == null ? void 0 : _f.length) ?? 0) > 0) && /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs4(Box4, { children: [
+          /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: "Reviews: " }),
+          /* @__PURE__ */ jsx5(Text4, { color: reviewDisplay.color, children: reviewDisplay.text })
+        ] }),
+        (_g = pr.reviews) == null ? void 0 : _g.map((review, idx) => {
+          const color = review.state === "APPROVED" ? "green" : review.state === "CHANGES_REQUESTED" ? "red" : review.state === "COMMENTED" ? "blue" : "yellow";
+          const icon = review.state === "APPROVED" ? "\u2713" : review.state === "CHANGES_REQUESTED" ? "\u2717" : review.state === "COMMENTED" ? "\u{1F4AC}" : "\u25CB";
+          return /* @__PURE__ */ jsxs4(Text4, { color, children: [
+            "  ",
+            icon,
+            " ",
+            review.author.login
+          ] }, idx);
+        }),
+        (_h = pr.reviewRequests) == null ? void 0 : _h.map((r, idx) => /* @__PURE__ */ jsxs4(Text4, { color: "yellow", children: [
+          "  ",
+          "\u25CB ",
+          r.login ?? r.name ?? r.slug ?? "Team",
+          " ",
+          /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: "(pending)" })
+        ] }, `pending-${idx}`))
+      ] }),
+      (((_i = pr.statusCheckRollup) == null ? void 0 : _i.length) ?? 0) > 0 && /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx5(Divider, {}),
+        /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: "Checks:" }),
+        Array.from(
+          ((_j = pr.statusCheckRollup) == null ? void 0 : _j.reduce((acc, check) => {
+            const key = check.name ?? check.context ?? "";
+            const existing = acc.get(key);
+            if (!existing || (check.startedAt ?? "") > (existing.startedAt ?? "")) {
+              acc.set(key, check);
+            }
+            return acc;
+          }, /* @__PURE__ */ new Map()).values()) ?? []
+        ).sort((a, b) => CHECK_SORT_ORDER[resolveCheckStatus(a)] - CHECK_SORT_ORDER[resolveCheckStatus(b)]).map((check, idx) => {
+          const jobName = check.name ?? check.context;
+          const displayName = check.workflowName ? `${check.workflowName} / ${jobName}` : jobName;
+          const status = resolveCheckStatus(check);
+          return /* @__PURE__ */ jsxs4(Text4, { color: CHECK_COLORS[status], children: [
+            "  ",
+            CHECK_ICONS[status],
+            " ",
+            displayName
+          ] }, idx);
+        })
+      ] }),
+      pr.body && /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx5(Divider, {}),
+        /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: "Description:" }),
+        /* @__PURE__ */ jsx5(Markdown, { children: pr.body })
+      ] })
+    ] })
+  ] }) }) }) });
 }
 
 // src/components/github/PullRequestsBox.tsx
 import open2 from "open";
 import { useState as useState11 } from "react";
-import { TitledBox } from "@mishieck/ink-titled-box";
-import { Box as Box4, Text as Text5, useInput as useInput3 } from "ink";
+import { TitledBox as TitledBox2 } from "@mishieck/ink-titled-box";
+import { Box as Box5, Text as Text6, useInput as useInput3 } from "ink";
 import { ScrollView as ScrollView2 } from "ink-scroll-view";
 
 // src/hooks/jira/useJiraTickets.ts
@@ -3163,8 +3194,8 @@ var source_default = chalk;
 
 // src/components/ui/AnimatedText.tsx
 import { useEffect as useEffect8, useState as useState10 } from "react";
-import { Text as Text4 } from "ink";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { Text as Text5 } from "ink";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function hexToRgb(hex) {
   const h = hex.replace("#", "");
   const n = h.length === 3 ? parseInt(h[0] + h[0] + h[1] + h[1] + h[2] + h[2], 16) : parseInt(h, 16);
@@ -3320,11 +3351,11 @@ function AnimatedText({
   if (underline) animated = source_default.underline(animated);
   if (strikethrough) animated = source_default.strikethrough(animated);
   if (dimColor) animated = source_default.dim(animated);
-  return /* @__PURE__ */ jsx5(Text4, { children: animated });
+  return /* @__PURE__ */ jsx6(Text5, { children: animated });
 }
 
 // src/components/github/PullRequestsBox.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function PullRequestsBox({
   prs,
   selectedPR,
@@ -3374,40 +3405,40 @@ function PullRequestsBox({
   const subtitle = branch ? ` (${branch})` : "";
   const copiedIndicator = copied ? " [Copied!]" : "";
   const borderColor = isActive ? "yellow" : void 0;
-  return /* @__PURE__ */ jsx6(
-    TitledBox,
+  return /* @__PURE__ */ jsx7(
+    TitledBox2,
     {
       borderStyle: "round",
       titles: [`${title}${subtitle}${copiedIndicator}`],
       borderColor,
       height: 5,
-      children: /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, flexGrow: 1, overflow: "hidden", children: [
-        loading && /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: "Loading PRs..." }),
-        error && /* @__PURE__ */ jsx6(Text5, { color: "red", children: error }),
-        isGeneratingPR && /* @__PURE__ */ jsx6(AnimatedText, { name: "radar", config: { baseColor: "#CC6600" }, children: "Generating PR with Claude... (Esc to cancel)" }),
-        !loading && !error && /* @__PURE__ */ jsxs4(ScrollView2, { ref: scrollRef, children: [
-          prs.length === 0 && /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: "No PRs for this branch" }, "empty"),
+      children: /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 1, flexGrow: 1, overflow: "hidden", children: [
+        loading && /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Loading PRs..." }),
+        error && /* @__PURE__ */ jsx7(Text6, { color: "red", children: error }),
+        isGeneratingPR && /* @__PURE__ */ jsx7(AnimatedText, { name: "radar", config: { baseColor: "#CC6600" }, children: "Generating PR with Claude... (Esc to cancel)" }),
+        !loading && !error && /* @__PURE__ */ jsxs5(ScrollView2, { ref: scrollRef, children: [
+          prs.length === 0 && /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "No PRs for this branch" }, "empty"),
           prs.map((pr, idx) => {
             const isHighlighted = isActive && idx === highlightedIndex;
             const isSelected = pr.number === (selectedPR == null ? void 0 : selectedPR.number);
             const cursor = isHighlighted ? ">" : " ";
             const indicator = isSelected ? " *" : "";
-            return /* @__PURE__ */ jsxs4(Box4, { children: [
-              /* @__PURE__ */ jsxs4(Text5, { color: isHighlighted ? "yellow" : void 0, children: [
+            return /* @__PURE__ */ jsxs5(Box5, { children: [
+              /* @__PURE__ */ jsxs5(Text6, { color: isHighlighted ? "yellow" : void 0, children: [
                 cursor,
                 " "
               ] }),
-              /* @__PURE__ */ jsxs4(Text5, { color: isSelected ? "green" : void 0, children: [
+              /* @__PURE__ */ jsxs5(Text6, { color: isSelected ? "green" : void 0, children: [
                 "#",
                 pr.number,
                 " ",
                 pr.isDraft ? "[Draft] " : "",
                 pr.title
               ] }),
-              /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: indicator })
+              /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: indicator })
             ] }, pr.number);
           }),
-          /* @__PURE__ */ jsxs4(Text5, { color: "blue", children: [
+          /* @__PURE__ */ jsxs5(Text6, { color: "blue", children: [
             isActive && highlightedIndex === prs.length ? "> " : "  ",
             "+ Create new PR"
           ] }, "create")
@@ -3418,10 +3449,10 @@ function PullRequestsBox({
 }
 
 // src/components/github/RemotesBox.tsx
-import { TitledBox as TitledBox2 } from "@mishieck/ink-titled-box";
-import { Box as Box5, Text as Text6 } from "ink";
+import { TitledBox as TitledBox3 } from "@mishieck/ink-titled-box";
+import { Box as Box6, Text as Text7 } from "ink";
 import { ScrollView as ScrollView3 } from "ink-scroll-view";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function RemotesBox({ remotes, selectedRemote, onSelect, loading, error, isActive }) {
   const selectedIndex = remotes.findIndex((r) => r.name === selectedRemote);
   const { highlightedIndex, scrollRef } = useListNavigation({
@@ -3432,34 +3463,34 @@ function RemotesBox({ remotes, selectedRemote, onSelect, loading, error, isActiv
   });
   const title = "[1] Remotes";
   const borderColor = isActive ? "yellow" : void 0;
-  return /* @__PURE__ */ jsx7(TitledBox2, { borderStyle: "round", titles: [title], borderColor, height: 5, children: /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 1, flexGrow: 1, overflow: "hidden", children: [
-    loading && /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Loading..." }),
-    error && /* @__PURE__ */ jsx7(Text6, { color: "red", children: error }),
-    !loading && !error && remotes.length === 0 && /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "No remotes configured" }),
-    !loading && !error && remotes.length > 0 && /* @__PURE__ */ jsx7(ScrollView3, { ref: scrollRef, children: remotes.map((remote, idx) => {
+  return /* @__PURE__ */ jsx8(TitledBox3, { borderStyle: "round", titles: [title], borderColor, height: 5, children: /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 1, flexGrow: 1, overflow: "hidden", children: [
+    loading && /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "Loading..." }),
+    error && /* @__PURE__ */ jsx8(Text7, { color: "red", children: error }),
+    !loading && !error && remotes.length === 0 && /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "No remotes configured" }),
+    !loading && !error && remotes.length > 0 && /* @__PURE__ */ jsx8(ScrollView3, { ref: scrollRef, children: remotes.map((remote, idx) => {
       const isHighlighted = isActive && idx === highlightedIndex;
       const isSelected = remote.name === selectedRemote;
       const cursor = isHighlighted ? ">" : " ";
       const indicator = isSelected ? " *" : "";
-      return /* @__PURE__ */ jsxs5(Box5, { children: [
-        /* @__PURE__ */ jsxs5(Text6, { color: isHighlighted ? "yellow" : void 0, children: [
+      return /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsxs6(Text7, { color: isHighlighted ? "yellow" : void 0, children: [
           cursor,
           " "
         ] }),
-        /* @__PURE__ */ jsxs5(Text6, { color: isSelected ? "green" : void 0, children: [
+        /* @__PURE__ */ jsxs6(Text7, { color: isSelected ? "green" : void 0, children: [
           remote.name,
           " (",
           remote.url,
           ")"
         ] }),
-        /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: indicator })
+        /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: indicator })
       ] }, remote.name);
     }) })
   ] }) });
 }
 
 // src/components/github/GitHubView.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function GitHubView({ isActive, onFocusedBoxChange, onLogUpdated }) {
   const repo = useGitRepo();
   const pullRequests = usePullRequests();
@@ -3675,10 +3706,10 @@ ${body}`;
     { isActive }
   );
   if (repo.isRepo === false) {
-    return /* @__PURE__ */ jsx8(TitledBox3, { borderStyle: "round", titles: ["Error"], flexGrow: 1, children: /* @__PURE__ */ jsx8(Text7, { color: "red", children: "Current directory is not a git repository" }) });
+    return /* @__PURE__ */ jsx9(TitledBox4, { borderStyle: "round", titles: ["Error"], flexGrow: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "red", children: "Current directory is not a git repository" }) });
   }
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx9(
       RemotesBox,
       {
         remotes: repo.remotes,
@@ -3689,7 +3720,7 @@ ${body}`;
         isActive: isActive && !prPreview && focusedBox === "remotes"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       PullRequestsBox,
       {
         prs: pullRequests.prs,
@@ -3704,7 +3735,7 @@ ${body}`;
         isGeneratingPR
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       PRDetailsBox,
       {
         pr: pullRequests.prDetails,
@@ -3713,13 +3744,13 @@ ${body}`;
         isActive: isActive && !prPreview && focusedBox === "details"
       }
     ),
-    prPreview && /* @__PURE__ */ jsx8(TitledBox3, { borderStyle: "round", titles: ["PR Preview"], borderColor: "yellow", flexGrow: 1, flexBasis: 0, children: /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 1, flexGrow: 1, flexBasis: 0, overflow: "hidden", children: [
-      /* @__PURE__ */ jsx8(Box6, { flexGrow: 1, flexBasis: 0, overflow: "hidden", children: /* @__PURE__ */ jsx8(ScrollView4, { ref: previewScrollRef, children: /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsx8(Text7, { bold: true, children: prPreview.title }),
-        /* @__PURE__ */ jsx8(Text7, { children: "" }),
-        /* @__PURE__ */ jsx8(Text7, { children: prPreview.body })
+    prPreview && /* @__PURE__ */ jsx9(TitledBox4, { borderStyle: "round", titles: ["PR Preview"], borderColor: "yellow", flexGrow: 1, flexBasis: 0, children: /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 1, flexGrow: 1, flexBasis: 0, overflow: "hidden", children: [
+      /* @__PURE__ */ jsx9(Box7, { flexGrow: 1, flexBasis: 0, overflow: "hidden", children: /* @__PURE__ */ jsx9(ScrollView4, { ref: previewScrollRef, children: /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx9(Text8, { bold: true, children: prPreview.title }),
+        /* @__PURE__ */ jsx9(Text8, { children: "" }),
+        /* @__PURE__ */ jsx9(Text8, { children: prPreview.body })
       ] }) }) }),
-      /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "Enter to apply, Esc to dismiss, j/k to scroll" })
+      /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "Enter to apply, Esc to dismiss, j/k to scroll" })
     ] }) })
   ] });
 }
@@ -3730,11 +3761,11 @@ import { Box as Box13, useInput as useInput10 } from "ink";
 
 // src/components/jira-browser/AddViewModal.tsx
 import { useState as useState13 } from "react";
-import { Box as Box8, Text as Text9, useInput as useInput6 } from "ink";
+import { Box as Box9, Text as Text10, useInput as useInput6 } from "ink";
 
 // src/components/ui/TextInput.tsx
-import { Box as Box7, Text as Text8, useInput as useInput5 } from "ink";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Box as Box8, Text as Text9, useInput as useInput5 } from "ink";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function TextInput({ value, onChange, placeholder, isActive, mask }) {
   useInput5(
     (input, key) => {
@@ -3758,14 +3789,14 @@ function TextInput({ value, onChange, placeholder, isActive, mask }) {
   );
   const displayValue = mask ? "*".repeat(value.length) : value;
   const showPlaceholder = value.length === 0 && placeholder;
-  return /* @__PURE__ */ jsx9(Box7, { children: /* @__PURE__ */ jsxs7(Text8, { children: [
-    showPlaceholder ? /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: placeholder }) : /* @__PURE__ */ jsx9(Text8, { children: displayValue }),
-    isActive && /* @__PURE__ */ jsx9(Text8, { backgroundColor: "yellow", children: " " })
+  return /* @__PURE__ */ jsx10(Box8, { children: /* @__PURE__ */ jsxs8(Text9, { children: [
+    showPlaceholder ? /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: placeholder }) : /* @__PURE__ */ jsx10(Text9, { children: displayValue }),
+    isActive && /* @__PURE__ */ jsx10(Text9, { backgroundColor: "yellow", children: " " })
   ] }) });
 }
 
 // src/components/jira-browser/AddViewModal.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function AddViewModal({ onSubmit, onCancel, loading, error }) {
   const [url, setUrl] = useState13("");
   const [name, setName] = useState13("");
@@ -3789,14 +3820,14 @@ function AddViewModal({ onSubmit, onCancel, loading, error }) {
     },
     { isActive: !loading }
   );
-  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 1, children: [
-    /* @__PURE__ */ jsx10(Text9, { bold: true, color: "yellow", children: "Add Jira View" }),
-    /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: "Tab to switch fields, Enter to save, Esc to cancel" }),
-    /* @__PURE__ */ jsx10(Box8, { marginTop: 1 }),
-    error && /* @__PURE__ */ jsx10(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsx10(Text9, { color: "red", children: error }) }),
-    /* @__PURE__ */ jsxs8(Box8, { children: [
-      /* @__PURE__ */ jsx10(Text9, { color: "blue", children: "URL: " }),
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 1, children: [
+    /* @__PURE__ */ jsx11(Text10, { bold: true, color: "yellow", children: "Add Jira View" }),
+    /* @__PURE__ */ jsx11(Text10, { dimColor: true, children: "Tab to switch fields, Enter to save, Esc to cancel" }),
+    /* @__PURE__ */ jsx11(Box9, { marginTop: 1 }),
+    error && /* @__PURE__ */ jsx11(Box9, { marginBottom: 1, children: /* @__PURE__ */ jsx11(Text10, { color: "red", children: error }) }),
+    /* @__PURE__ */ jsxs9(Box9, { children: [
+      /* @__PURE__ */ jsx11(Text10, { color: "blue", children: "URL: " }),
+      /* @__PURE__ */ jsx11(
         TextInput,
         {
           value: url,
@@ -3806,9 +3837,9 @@ function AddViewModal({ onSubmit, onCancel, loading, error }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, children: [
-      /* @__PURE__ */ jsx10(Text9, { color: "blue", children: "Name: " }),
-      /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs9(Box9, { marginTop: 1, children: [
+      /* @__PURE__ */ jsx11(Text10, { color: "blue", children: "Name: " }),
+      /* @__PURE__ */ jsx11(
         TextInput,
         {
           value: name,
@@ -3818,8 +3849,8 @@ function AddViewModal({ onSubmit, onCancel, loading, error }) {
         }
       )
     ] }),
-    loading && /* @__PURE__ */ jsx10(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text9, { color: "yellow", children: "Validating view..." }) }),
-    /* @__PURE__ */ jsx10(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: "Supports: filter URLs, JQL URLs, board URLs" }) })
+    loading && /* @__PURE__ */ jsx11(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx11(Text10, { color: "yellow", children: "Validating view..." }) }),
+    /* @__PURE__ */ jsx11(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx11(Text10, { dimColor: true, children: "Supports: filter URLs, JQL URLs, board URLs" }) })
   ] });
 }
 
@@ -3830,45 +3861,6 @@ import { Box as Box11, Text as Text12, useInput as useInput8 } from "ink";
 import { ScrollView as ScrollView6 } from "ink-scroll-view";
 import Spinner3 from "ink-spinner";
 
-// src/components/ui/TitledBox.tsx
-import { Box as Box9, Text as Text10, useStdout as useStdout2 } from "ink";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-function TitledBox4({ title, borderColor, scrollRatio = null, fillColor = "#CC6600", children }) {
-  const { stdout } = useStdout2();
-  const terminalWidth = (stdout == null ? void 0 : stdout.columns) ?? 80;
-  const columnWidth = Math.floor(terminalWidth / 2);
-  const titlePart = `\u256D ${title} `;
-  const totalDashes = Math.max(0, columnWidth - titlePart.length - 1);
-  const topBorder = scrollRatio !== null && scrollRatio >= 0 ? /* @__PURE__ */ jsxs9(Text10, { children: [
-    /* @__PURE__ */ jsx11(Text10, { color: borderColor, children: titlePart }),
-    /* @__PURE__ */ jsx11(Text10, { color: fillColor, children: "\u2500".repeat(Math.round(scrollRatio * totalDashes)) }),
-    /* @__PURE__ */ jsxs9(Text10, { color: borderColor, children: [
-      "\u2500".repeat(totalDashes - Math.round(scrollRatio * totalDashes)),
-      "\u256E"
-    ] })
-  ] }) : /* @__PURE__ */ jsxs9(Text10, { color: borderColor, children: [
-    titlePart,
-    "\u2500".repeat(totalDashes),
-    "\u256E"
-  ] });
-  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", flexGrow: 1, children: [
-    topBorder,
-    /* @__PURE__ */ jsx11(
-      Box9,
-      {
-        flexDirection: "column",
-        flexGrow: 1,
-        flexBasis: 0,
-        overflow: "hidden",
-        borderStyle: "round",
-        borderTop: false,
-        borderColor,
-        children
-      }
-    )
-  ] });
-}
-
 // src/components/jira-browser/JiraIssueDetailView.tsx
 import open3 from "open";
 import { useEffect as useEffect10, useRef as useRef6, useState as useState14 } from "react";
@@ -4122,7 +4114,7 @@ function getStatusColor(status) {
 }
 
 // src/components/jira-browser/JiraSavedViewBrowserBox.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function groupBySprint(issues) {
   const groups = /* @__PURE__ */ new Map();
   for (const issue of issues) {
@@ -4362,7 +4354,7 @@ function JiraSavedViewBrowserBox({
   if (assigneeFilter === "unassigned") filterParts.push("unassigned");
   if (assigneeFilter === "me") filterParts.push("mine");
   if (searchText) filterParts.push(`"${searchText}"`);
-  return /* @__PURE__ */ jsx13(TitledBox4, { title: displayTitle, borderColor, scrollRatio, children: /* @__PURE__ */ jsx13(Box11, { flexDirection: "column", flexGrow: 1, children: detailIssue && auth ? /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx13(TitledBox, { title: displayTitle, borderColor, scrollRatio, children: /* @__PURE__ */ jsx13(Box11, { flexDirection: "column", flexGrow: 1, children: detailIssue && auth ? /* @__PURE__ */ jsx13(
     JiraIssueDetailView,
     {
       issueKey: detailIssue.key,
@@ -4376,13 +4368,13 @@ function JiraSavedViewBrowserBox({
       onIssueUpdated: handleIssueUpdated,
       onLogUpdated
     }
-  ) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+  ) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
     (isFiltering || hasActiveFilters) && /* @__PURE__ */ jsxs11(Box11, { paddingX: 1, children: [
       /* @__PURE__ */ jsx13(Text12, { color: "blue", children: "Search: " }),
-      isFiltering ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      isFiltering ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
         /* @__PURE__ */ jsx13(Text12, { children: inputText }),
         /* @__PURE__ */ jsx13(Text12, { backgroundColor: "yellow", children: " " })
-      ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+      ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
         /* @__PURE__ */ jsx13(Text12, { children: filterParts.join(" + ") }),
         /* @__PURE__ */ jsxs11(Text12, { dimColor: true, children: [
           " ",
@@ -4454,7 +4446,7 @@ import { useEffect as useEffect12, useState as useState16 } from "react";
 import { TitledBox as TitledBox5 } from "@mishieck/ink-titled-box";
 import { Box as Box12, Text as Text13, useInput as useInput9 } from "ink";
 import { ScrollView as ScrollView7 } from "ink-scroll-view";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function JiraSavedViewsBox({
   views,
   selectedViewId,
@@ -4537,7 +4529,7 @@ function JiraSavedViewsBox({
           cursor,
           " "
         ] }),
-        isRenaming ? /* @__PURE__ */ jsx14(TextInput, { value: renameValue, onChange: setRenameValue, isActive: true }) : /* @__PURE__ */ jsxs12(Fragment4, { children: [
+        isRenaming ? /* @__PURE__ */ jsx14(TextInput, { value: renameValue, onChange: setRenameValue, isActive: true }) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
           /* @__PURE__ */ jsx14(Text13, { color: nameColor, children: view.name }),
           /* @__PURE__ */ jsx14(Text13, { dimColor: true, children: indicator })
         ] })
@@ -5510,7 +5502,7 @@ async function checkoutPR(prNumber, repo) {
 }
 
 // src/components/pull-requests/AllPullRequestsView.tsx
-import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var STATE_CYCLE = ["open", "closed", "all"];
 function computeOverallCheck(checks) {
   if (!checks || checks.length === 0) return null;
@@ -5727,34 +5719,29 @@ function AllPullRequestsView({ isActive, onModalChange }) {
     return "Open";
   };
   if (detailPR) {
-    return /* @__PURE__ */ jsxs22(Box22, { flexDirection: "column", flexGrow: 1, children: [
-      /* @__PURE__ */ jsx24(
-        PRDetailsBox,
-        {
-          pr: prDetails,
-          loading: detailsLoading,
-          error: detailsError,
-          isActive,
-          title: "[5] Pull Requests"
-        }
-      ),
-      checkoutLoading ? /* @__PURE__ */ jsxs22(Text21, { color: "yellow", children: [
-        " ",
-        /* @__PURE__ */ jsx24(Spinner4, { type: "dots" }),
-        " Checking out..."
-      ] }) : checkoutResult ? /* @__PURE__ */ jsxs22(Text21, { color: checkoutResult.success ? "green" : "red", children: [
-        " ",
-        checkoutResult.message
-      ] }) : /* @__PURE__ */ jsx24(Text21, { dimColor: true, children: " Esc back \xB7 j/k scroll \xB7 o open \xB7 y copy \xB7 c checkout" })
-    ] });
+    const hintFooter = checkoutLoading ? /* @__PURE__ */ jsx24(Box22, { paddingX: 1, children: /* @__PURE__ */ jsxs22(Text21, { color: "yellow", children: [
+      /* @__PURE__ */ jsx24(Spinner4, { type: "dots" }),
+      " Checking out..."
+    ] }) }) : checkoutResult ? /* @__PURE__ */ jsx24(Box22, { paddingX: 1, children: /* @__PURE__ */ jsx24(Text21, { color: checkoutResult.success ? "green" : "red", children: checkoutResult.message }) }) : /* @__PURE__ */ jsx24(Box22, { paddingX: 1, children: /* @__PURE__ */ jsx24(Text21, { dimColor: true, children: "Esc back \xB7 j/k scroll \xB7 o open \xB7 y copy \xB7 c checkout" }) });
+    return /* @__PURE__ */ jsx24(
+      PRDetailsBox,
+      {
+        pr: prDetails,
+        loading: detailsLoading,
+        error: detailsError,
+        isActive,
+        title: "[5] Pull Requests",
+        footer: hintFooter
+      }
+    );
   }
-  return /* @__PURE__ */ jsx24(TitledBox4, { title: "[5] Pull Requests", borderColor, scrollRatio, children: /* @__PURE__ */ jsxs22(Box22, { flexDirection: "column", paddingX: 1, flexGrow: 1, flexBasis: 0, overflow: "hidden", children: [
+  return /* @__PURE__ */ jsx24(TitledBox, { title: "[5] Pull Requests", borderColor, scrollRatio, children: /* @__PURE__ */ jsxs22(Box22, { flexDirection: "column", paddingX: 1, flexGrow: 1, flexBasis: 0, overflow: "hidden", children: [
     (isSearching || hasActiveFilters) && /* @__PURE__ */ jsxs22(Box22, { children: [
       /* @__PURE__ */ jsx24(Text21, { color: "blue", children: "Filter: " }),
-      isSearching ? /* @__PURE__ */ jsxs22(Fragment5, { children: [
+      isSearching ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
         /* @__PURE__ */ jsx24(Text21, { children: inputText }),
         /* @__PURE__ */ jsx24(Text21, { backgroundColor: "yellow", children: " " })
-      ] }) : /* @__PURE__ */ jsxs22(Fragment5, { children: [
+      ] }) : /* @__PURE__ */ jsxs22(Fragment6, { children: [
         /* @__PURE__ */ jsx24(Text21, { children: filterParts.join(" + ") }),
         /* @__PURE__ */ jsxs22(Text21, { dimColor: true, children: [
           " (",
@@ -6095,10 +6082,10 @@ import { render as inkRender } from "ink";
 
 // src/lib/Screen.tsx
 import { useCallback as useCallback13, useEffect as useEffect19, useState as useState24 } from "react";
-import { Box as Box25, useStdout as useStdout3 } from "ink";
+import { Box as Box25, useStdout as useStdout2 } from "ink";
 import { jsx as jsx27 } from "react/jsx-runtime";
 function Screen({ children }) {
-  const { stdout } = useStdout3();
+  const { stdout } = useStdout2();
   const getSize = useCallback13(() => ({ height: stdout.rows, width: stdout.columns }), [stdout]);
   const [size, setSize] = useState24(getSize);
   useEffect19(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clairo",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "license": "MIT",
   "repository": {
     "type": "git",