clairo 0.2.0 → 0.4.0

package/dist/cli.js

@@ -4,13 +4,14 @@
 import meow from "meow";
 
 // src/app.tsx
-import { useState as useState9 } from "react";
-import { Box as Box13, useApp, useInput as useInput11 } from "ink";
+import { useState as useState8 } from "react";
+import { Box as Box13, useApp, useInput as useInput10 } from "ink";
 
 // src/components/github/GitHubView.tsx
-import { useCallback, useEffect as useEffect3, useState as useState4 } from "react";
+import { exec as exec3 } from "child_process";
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
 import { TitledBox as TitledBox4 } from "@mishieck/ink-titled-box";
-import { Box as Box5, Text as Text5, useInput as useInput5 } from "ink";
+import { Box as Box5, Text as Text5, useInput as useInput4 } from "ink";
 
 // src/lib/config/index.ts
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
@@ -127,8 +128,6 @@ function getCurrentBranch() {
 
 // src/lib/github/index.ts
 import { exec } from "child_process";
-import { existsSync as existsSync2, readFileSync as readFileSync2 } from "fs";
-import { join as join2 } from "path";
 import { promisify } from "util";
 var execAsync = promisify(exec);
 async function isGhInstalled() {
@@ -241,177 +240,124 @@ async function getPRDetails(prNumber, repo) {
     };
   }
 }
-function getPRTemplate(repoPath) {
-  const templatePaths = [
-    ".github/PULL_REQUEST_TEMPLATE.md",
-    ".github/pull_request_template.md",
-    "PULL_REQUEST_TEMPLATE.md",
-    "pull_request_template.md",
-    "docs/PULL_REQUEST_TEMPLATE.md"
-  ];
-  for (const templatePath of templatePaths) {
-    const fullPath = join2(repoPath, templatePath);
-    if (existsSync2(fullPath)) {
-      try {
-        return readFileSync2(fullPath, "utf-8");
-      } catch {
-        continue;
+
+// src/components/github/PRDetailsBox.tsx
+import { useRef } from "react";
+import open from "open";
+import { TitledBox } from "@mishieck/ink-titled-box";
+import { Box as Box2, Text as Text2, useInput } from "ink";
+import { ScrollView } from "ink-scroll-view";
+
+// src/components/ui/Markdown.tsx
+import { Box, Text } from "ink";
+import Link from "ink-link";
+import { marked } from "marked";
+import Table from "cli-table3";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Markdown({ children }) {
+  const tokens = marked.lexer(children);
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: tokens.map((token, idx) => /* @__PURE__ */ jsx(TokenRenderer, { token }, idx)) });
+}
+function TokenRenderer({ token }) {
+  var _a, _b;
+  switch (token.type) {
+    case "heading":
+      return /* @__PURE__ */ jsx(Box, { marginTop: token.depth === 1 ? 0 : 1, children: /* @__PURE__ */ jsx(Text, { bold: true, underline: token.depth === 1, children: renderInline(token.tokens) }) });
+    case "paragraph": {
+      const hasLinks = (_a = token.tokens) == null ? void 0 : _a.some((t) => {
+        var _a2;
+        return t.type === "link" || t.type === "strong" && "tokens" in t && ((_a2 = t.tokens) == null ? void 0 : _a2.some((st) => st.type === "link"));
+      });
+      if (hasLinks) {
+        return /* @__PURE__ */ jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: renderInline(token.tokens) });
       }
+      return /* @__PURE__ */ jsx(Text, { children: renderInline(token.tokens) });
     }
+    case "code":
+      return /* @__PURE__ */ jsx(Box, { marginY: 1, paddingX: 1, borderStyle: "single", borderColor: "gray", children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: token.text }) });
+    case "blockquote":
+      return /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
+        /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2502 " }),
+        /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: (_b = token.tokens) == null ? void 0 : _b.map((t, idx) => /* @__PURE__ */ jsx(TokenRenderer, { token: t }, idx)) })
+      ] });
+    case "list":
+      return /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginY: 1, children: token.items.map((item, idx) => /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Text, { children: token.ordered ? `${idx + 1}. ` : "\u2022 " }),
+        /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: item.tokens.map((t, i) => /* @__PURE__ */ jsx(TokenRenderer, { token: t }, i)) })
+      ] }, idx)) });
+    case "table":
+      return /* @__PURE__ */ jsx(TableRenderer, { token });
+    case "hr":
+      return /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500".repeat(40) });
+    case "space":
+      return null;
+    default:
+      if ("text" in token && typeof token.text === "string") {
+        return /* @__PURE__ */ jsx(Text, { children: token.text });
+      }
+      return null;
   }
-  return null;
 }
-async function createPR(repo, title, body, baseBranch) {
-  if (!await isGhInstalled()) {
-    return {
-      success: false,
-      error: "GitHub CLI (gh) is not installed",
-      errorType: "not_installed"
-    };
-  }
-  if (!await isGhAuthenticated()) {
-    return {
-      success: false,
-      error: "Not authenticated. Run 'gh auth login'",
-      errorType: "not_authenticated"
-    };
-  }
-  try {
-    const baseArg = baseBranch ? `--base "${baseBranch}"` : "";
-    const fields = "number,title,state,author,createdAt,isDraft";
-    const escapedTitle = title.replace(/"/g, '\\"');
-    const escapedBody = body.replace(/"/g, '\\"');
-    const { stdout } = await execAsync(
-      `gh pr create --title "${escapedTitle}" --body "${escapedBody}" ${baseArg} --repo "${repo}" --json ${fields}`
-    );
-    const pr = JSON.parse(stdout);
-    return { success: true, data: pr };
-  } catch (err) {
-    const message = err instanceof Error ? err.message : "Failed to create PR";
-    return {
-      success: false,
-      error: message,
-      errorType: "api_error"
-    };
+function TableRenderer({ token }) {
+  const table = new Table({
+    head: token.header.map((cell) => renderInlineToString(cell.tokens)),
+    style: { head: ["cyan"], border: ["gray"] }
+  });
+  for (const row of token.rows) {
+    table.push(row.map((cell) => renderInlineToString(cell.tokens)));
   }
+  return /* @__PURE__ */ jsx(Text, { children: table.toString() });
 }
-
-// src/components/github/CreatePRModal.tsx
-import { useState } from "react";
-import { Box, Text, useInput } from "ink";
-
-// src/lib/editor.ts
-import { spawnSync } from "child_process";
-import { mkdtempSync, readFileSync as readFileSync3, rmSync, writeFileSync as writeFileSync2 } from "fs";
-import { tmpdir } from "os";
-import { join as join3 } from "path";
-function openInEditor(content, filename) {
-  const editor = process.env.VISUAL || process.env.EDITOR || "vi";
-  const tempDir = mkdtempSync(join3(tmpdir(), "clairo-"));
-  const tempFile = join3(tempDir, filename);
-  try {
-    writeFileSync2(tempFile, content);
-    const result = spawnSync(editor, [tempFile], {
-      stdio: "inherit"
-    });
-    process.stdout.write("\x1B[2J\x1B[H");
-    process.stdout.emit("resize");
-    if (result.status !== 0) {
-      return null;
-    }
-    return readFileSync3(tempFile, "utf-8");
-  } finally {
-    try {
-      rmSync(tempDir, { recursive: true });
-    } catch {
+function renderInline(tokens) {
+  if (!tokens) return null;
+  return tokens.map((token, idx) => {
+    switch (token.type) {
+      case "text":
+        return /* @__PURE__ */ jsx(Text, { children: token.text }, idx);
+      case "strong":
+        return /* @__PURE__ */ jsx(Text, { bold: true, children: renderInline(token.tokens) }, idx);
+      case "em":
+        return /* @__PURE__ */ jsx(Text, { italic: true, children: renderInline(token.tokens) }, idx);
+      case "codespan":
+        return /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
+          "`",
+          token.text,
+          "`"
+        ] }, idx);
+      case "link":
+        return /* @__PURE__ */ jsx(Link, { url: token.href, children: /* @__PURE__ */ jsx(Text, { color: "blue", children: renderInlineToString(token.tokens) }) }, idx);
+      case "image":
+        return /* @__PURE__ */ jsxs(Text, { color: "blue", children: [
+          "[Image: ",
+          token.text || token.href,
+          "]"
+        ] }, idx);
+      case "br":
+        return /* @__PURE__ */ jsx(Text, { children: "\n" }, idx);
+      case "del":
+        return /* @__PURE__ */ jsx(Text, { strikethrough: true, children: renderInline(token.tokens) }, idx);
+      default:
+        if ("text" in token && typeof token.text === "string") {
+          return /* @__PURE__ */ jsx(Text, { children: token.text }, idx);
+        }
+        return null;
     }
-  }
+  });
 }
-
-// src/components/github/CreatePRModal.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function CreatePRModal({ template, onSubmit, onCancel, loading, error }) {
-  const [title, setTitle] = useState("");
-  const [body, setBody] = useState(template ?? "");
-  const [selectedItem, setSelectedItem] = useState("title");
-  const items = ["title", "body", "submit"];
-  useInput(
-    (input, key) => {
-      if (loading) return;
-      if (key.escape) {
-        onCancel();
-        return;
-      }
-      if (key.upArrow || input === "k") {
-        setSelectedItem((prev) => {
-          const idx = items.indexOf(prev);
-          return items[Math.max(0, idx - 1)];
-        });
-        return;
-      }
-      if (key.downArrow || input === "j") {
-        setSelectedItem((prev) => {
-          const idx = items.indexOf(prev);
-          return items[Math.min(items.length - 1, idx + 1)];
-        });
-        return;
-      }
-      if (key.return) {
-        if (selectedItem === "title") {
-          const newTitle = openInEditor(title, "PR_TITLE.txt");
-          if (newTitle !== null) {
-            setTitle(newTitle.split("\n")[0].trim());
-          }
-        } else if (selectedItem === "body") {
-          const newBody = openInEditor(body, "PR_DESCRIPTION.md");
-          if (newBody !== null) {
-            setBody(newBody);
-          }
-        } else if (selectedItem === "submit") {
-          if (title.trim()) {
-            onSubmit(title.trim(), body);
-          }
-        }
-      }
-    },
-    { isActive: !loading }
-  );
-  const renderItem = (item, label, value) => {
-    const isSelected = selectedItem === item;
-    const prefix = isSelected ? "> " : "  ";
-    const color = isSelected ? "yellow" : void 0;
-    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs(Text, { color, bold: isSelected, children: [
-        prefix,
-        label
-      ] }),
-      value !== void 0 && /* @__PURE__ */ jsx(Box, { marginLeft: 4, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: value || "(empty - press Enter to edit)" }) })
-    ] });
-  };
-  const truncatedBody = body ? body.split("\n").slice(0, 2).join(" ").slice(0, 60) + (body.length > 60 ? "..." : "") : "";
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, paddingY: 1, children: [
-    /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "Create Pull Request" }),
-    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Up/Down to select, Enter to edit, Esc to cancel" }),
-    /* @__PURE__ */ jsx(Box, { marginTop: 1 }),
-    error && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: "red", children: error }) }),
-    renderItem("title", "Title", title),
-    /* @__PURE__ */ jsx(Box, { marginTop: 1 }),
-    renderItem("body", "Description", truncatedBody),
-    /* @__PURE__ */ jsx(Box, { marginTop: 1 }),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: selectedItem === "submit" ? "green" : void 0, bold: selectedItem === "submit", children: [
-      selectedItem === "submit" ? "> " : "  ",
-      title.trim() ? "[Submit PR]" : "[Enter title first]"
-    ] }) }),
-    loading && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "Creating PR..." }) })
-  ] });
+function renderInlineToString(tokens) {
+  if (!tokens) return "";
+  return tokens.map((token) => {
+    if ("text" in token && typeof token.text === "string") {
+      return token.text;
+    }
+    if ("tokens" in token && Array.isArray(token.tokens)) {
+      return renderInlineToString(token.tokens);
+    }
+    return "";
+  }).join("");
 }
 
 // src/components/github/PRDetailsBox.tsx
-import { useRef } from "react";
-import open from "open";
-import { TitledBox } from "@mishieck/ink-titled-box";
-import { Box as Box2, Text as Text2, useInput as useInput2 } from "ink";
-import { ScrollView } from "ink-scroll-view";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function getCheckColor(check) {
   const conclusion = check.conclusion ?? check.state;
@@ -450,7 +396,7 @@ function PRDetailsBox({ pr, loading, error, isFocused }) {
     return { text: pr.mergeable ?? "UNKNOWN", color: "yellow" };
   };
   const mergeDisplay = getMergeDisplay();
-  useInput2(
+  useInput(
     (input, key) => {
       var _a2, _b2;
       if (key.upArrow || input === "k") {
@@ -466,7 +412,7 @@ function PRDetailsBox({ pr, loading, error, isFocused }) {
     },
     { isActive: isFocused }
   );
-  return /* @__PURE__ */ jsx2(TitledBox, { borderStyle: "round", titles: [displayTitle], borderColor, flexGrow: 2, children: /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, overflow: "hidden", children: /* @__PURE__ */ jsx2(ScrollView, { ref: scrollRef, flexGrow: 1, children: /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, children: [
+  return /* @__PURE__ */ jsx2(TitledBox, { borderStyle: "round", titles: [displayTitle], borderColor, flexGrow: 1, children: /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx2(ScrollView, { ref: scrollRef, children: /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, children: [
     loading && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Loading details..." }),
     error && /* @__PURE__ */ jsx2(Text2, { color: "red", children: error }),
     !loading && !error && !pr && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Select a PR to view details" }),
@@ -518,16 +464,16 @@ function PRDetailsBox({ pr, loading, error, isFocused }) {
       ] }),
       pr.body && /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
         /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Description:" }),
-        /* @__PURE__ */ jsx2(Text2, { children: pr.body })
+        /* @__PURE__ */ jsx2(Markdown, { children: pr.body })
       ] })
     ] })
   ] }) }) }) });
 }
 
 // src/components/github/PullRequestsBox.tsx
-import { useEffect, useState as useState2 } from "react";
+import { useEffect, useState } from "react";
 import { TitledBox as TitledBox2 } from "@mishieck/ink-titled-box";
-import { Box as Box3, Text as Text3, useInput as useInput3 } from "ink";
+import { Box as Box3, Text as Text3, useInput as useInput2 } from "ink";
 
 // src/lib/clipboard.ts
 import { exec as exec2 } from "child_process";
@@ -563,13 +509,13 @@ function PullRequestsBox({
   repoSlug,
   isFocused
 }) {
-  const [highlightedIndex, setHighlightedIndex] = useState2(0);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
   const totalItems = prs.length + 1;
   useEffect(() => {
     const idx = prs.findIndex((p) => p.number === (selectedPR == null ? void 0 : selectedPR.number));
     if (idx >= 0) setHighlightedIndex(idx);
   }, [selectedPR, prs]);
-  useInput3(
+  useInput2(
     (input, key) => {
       if (!isFocused) return;
       if (key.upArrow || input === "k") {
@@ -623,17 +569,17 @@ function PullRequestsBox({
 }
 
 // src/components/github/RemotesBox.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { TitledBox as TitledBox3 } from "@mishieck/ink-titled-box";
-import { Box as Box4, Text as Text4, useInput as useInput4 } from "ink";
+import { Box as Box4, Text as Text4, useInput as useInput3 } from "ink";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function RemotesBox({ remotes, selectedRemote, onSelect, loading, error, isFocused }) {
-  const [highlightedIndex, setHighlightedIndex] = useState3(0);
+  const [highlightedIndex, setHighlightedIndex] = useState2(0);
   useEffect2(() => {
     const idx = remotes.findIndex((r) => r.name === selectedRemote);
     if (idx >= 0) setHighlightedIndex(idx);
   }, [selectedRemote, remotes]);
-  useInput4(
+  useInput3(
     (input, key) => {
       if (!isFocused || remotes.length === 0) return;
       if (key.upArrow || input === "k") {
@@ -671,37 +617,25 @@ function RemotesBox({ remotes, selectedRemote, onSelect, loading, error, isFocus
 
 // src/components/github/GitHubView.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
-  const [isRepo, setIsRepo] = useState4(null);
-  const [repoPath, setRepoPath] = useState4(null);
-  const [remotes, setRemotes] = useState4([]);
-  const [currentBranch, setCurrentBranch] = useState4(null);
-  const [currentRepoSlug, setCurrentRepoSlug] = useState4(null);
-  const [selectedRemote, setSelectedRemote] = useState4(null);
-  const [selectedPR, setSelectedPR] = useState4(null);
-  const [prs, setPrs] = useState4([]);
-  const [prDetails, setPrDetails] = useState4(null);
-  const [loading, setLoading] = useState4({
+function GitHubView({ isFocused, onKeybindingsChange }) {
+  const [isRepo, setIsRepo] = useState3(null);
+  const [repoPath, setRepoPath] = useState3(null);
+  const [remotes, setRemotes] = useState3([]);
+  const [currentBranch, setCurrentBranch] = useState3(null);
+  const [currentRepoSlug, setCurrentRepoSlug] = useState3(null);
+  const [selectedRemote, setSelectedRemote] = useState3(null);
+  const [selectedPR, setSelectedPR] = useState3(null);
+  const [prs, setPrs] = useState3([]);
+  const [prDetails, setPrDetails] = useState3(null);
+  const [loading, setLoading] = useState3({
     remotes: true,
     prs: false,
-    details: false,
-    createPR: false
+    details: false
   });
-  const [errors, setErrors] = useState4({});
-  const [showCreatePR, setShowCreatePR] = useState4(false);
-  const [prTemplate, setPrTemplate] = useState4(null);
-  const [focusedBox, setFocusedBox] = useState4("remotes");
+  const [errors, setErrors] = useState3({});
+  const [focusedBox, setFocusedBox] = useState3("remotes");
   useEffect3(() => {
     if (!isFocused) {
-      setShowCreatePR(false);
-      setErrors((prev) => ({ ...prev, createPR: void 0 }));
-    }
-  }, [isFocused]);
-  useEffect3(() => {
-    onModalChange == null ? void 0 : onModalChange(showCreatePR);
-  }, [showCreatePR, onModalChange]);
-  useEffect3(() => {
-    if (!isFocused || showCreatePR) {
       onKeybindingsChange == null ? void 0 : onKeybindingsChange([]);
       return;
     }
@@ -710,13 +644,15 @@ function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
       bindings.push({ key: "Enter", label: "Select Remote" });
     } else if (focusedBox === "prs") {
       bindings.push({ key: "n", label: "New PR", color: "green" });
+      bindings.push({ key: "r", label: "Refresh" });
       bindings.push({ key: "o", label: "Open", color: "green" });
       bindings.push({ key: "y", label: "Copy Link" });
     } else if (focusedBox === "details") {
+      bindings.push({ key: "r", label: "Refresh" });
       bindings.push({ key: "o", label: "Open", color: "green" });
     }
     onKeybindingsChange == null ? void 0 : onKeybindingsChange(bindings);
-  }, [isFocused, focusedBox, showCreatePR, onKeybindingsChange]);
+  }, [isFocused, focusedBox, onKeybindingsChange]);
   useEffect3(() => {
     const gitRepoCheck = isGitRepo();
     setIsRepo(gitRepoCheck);
@@ -728,8 +664,6 @@ function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
     const rootResult = getRepoRoot();
     if (rootResult.success) {
       setRepoPath(rootResult.data);
-      const template = getPRTemplate(rootResult.data);
-      setPrTemplate(template);
     }
     const branchResult = getCurrentBranch();
     if (branchResult.success) {
@@ -746,6 +680,43 @@ function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
     }
     setLoading((prev) => ({ ...prev, remotes: false }));
   }, []);
+  const refreshPRs = useCallback(async () => {
+    if (!currentBranch || !currentRepoSlug) return;
+    setLoading((prev) => ({ ...prev, prs: true }));
+    try {
+      const result = await listPRsForBranch(currentBranch, currentRepoSlug);
+      if (result.success) {
+        setPrs(result.data);
+        if (result.data.length > 0) {
+          setSelectedPR((prev) => prev ?? result.data[0]);
+        }
+        setErrors((prev) => ({ ...prev, prs: void 0 }));
+      } else {
+        setErrors((prev) => ({ ...prev, prs: result.error }));
+      }
+    } catch (err) {
+      setErrors((prev) => ({ ...prev, prs: String(err) }));
+    } finally {
+      setLoading((prev) => ({ ...prev, prs: false }));
+    }
+  }, [currentBranch, currentRepoSlug]);
+  const refreshDetails = useCallback(async () => {
+    if (!selectedPR || !currentRepoSlug) return;
+    setLoading((prev) => ({ ...prev, details: true }));
+    try {
+      const result = await getPRDetails(selectedPR.number, currentRepoSlug);
+      if (result.success) {
+        setPrDetails(result.data);
+        setErrors((prev) => ({ ...prev, details: void 0 }));
+      } else {
+        setErrors((prev) => ({ ...prev, details: result.error }));
+      }
+    } catch (err) {
+      setErrors((prev) => ({ ...prev, details: String(err) }));
+    } finally {
+      setLoading((prev) => ({ ...prev, details: false }));
+    }
+  }, [selectedPR, currentRepoSlug]);
   useEffect3(() => {
     if (!selectedRemote || !currentBranch) return;
     const remote = remotes.find((r) => r.name === selectedRemote);
@@ -753,52 +724,21 @@ function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
     const repo = getRepoFromRemote(remote.url);
     if (!repo) return;
     setCurrentRepoSlug(repo);
-    setLoading((prev) => ({ ...prev, prs: true }));
     setPrs([]);
     setSelectedPR(null);
-    const fetchPRs = async () => {
-      try {
-        const result = await listPRsForBranch(currentBranch, repo);
-        if (result.success) {
-          setPrs(result.data);
-          if (result.data.length > 0) {
-            setSelectedPR(result.data[0]);
-          }
-          setErrors((prev) => ({ ...prev, prs: void 0 }));
-        } else {
-          setErrors((prev) => ({ ...prev, prs: result.error }));
-        }
-      } catch (err) {
-        setErrors((prev) => ({ ...prev, prs: String(err) }));
-      } finally {
-        setLoading((prev) => ({ ...prev, prs: false }));
-      }
-    };
-    fetchPRs();
   }, [selectedRemote, currentBranch, remotes]);
+  useEffect3(() => {
+    if (currentRepoSlug && currentBranch) {
+      refreshPRs();
+    }
+  }, [currentRepoSlug, currentBranch, refreshPRs]);
   useEffect3(() => {
     if (!selectedPR || !currentRepoSlug) {
       setPrDetails(null);
       return;
     }
-    setLoading((prev) => ({ ...prev, details: true }));
-    const fetchDetails = async () => {
-      try {
-        const result = await getPRDetails(selectedPR.number, currentRepoSlug);
-        if (result.success) {
-          setPrDetails(result.data);
-          setErrors((prev) => ({ ...prev, details: void 0 }));
-        } else {
-          setErrors((prev) => ({ ...prev, details: result.error }));
-        }
-      } catch (err) {
-        setErrors((prev) => ({ ...prev, details: String(err) }));
-      } finally {
-        setLoading((prev) => ({ ...prev, details: false }));
-      }
-    };
-    fetchDetails();
-  }, [selectedPR, currentRepoSlug]);
+    refreshDetails();
+  }, [selectedPR, currentRepoSlug, refreshDetails]);
   const handleRemoteSelect = useCallback(
     (remoteName) => {
       setSelectedRemote(remoteName);
@@ -812,51 +752,21 @@ function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
     setSelectedPR(pr);
   }, []);
   const handleCreatePR = useCallback(() => {
-    setShowCreatePR(true);
-    setErrors((prev) => ({ ...prev, createPR: void 0 }));
-  }, []);
-  const handleCreatePRSubmit = useCallback(
-    async (title, body) => {
-      if (!currentRepoSlug) return;
-      setLoading((prev) => ({ ...prev, createPR: true }));
-      setErrors((prev) => ({ ...prev, createPR: void 0 }));
-      try {
-        const result = await createPR(currentRepoSlug, title, body);
-        if (result.success) {
-          setShowCreatePR(false);
-          if (currentBranch) {
-            const prsResult = await listPRsForBranch(currentBranch, currentRepoSlug);
-            if (prsResult.success) {
-              setPrs(prsResult.data);
-              const newPR = prsResult.data.find((p) => p.number === result.data.number);
-              if (newPR) {
-                setSelectedPR(newPR);
-              }
-            }
-          }
-        } else {
-          setErrors((prev) => ({ ...prev, createPR: result.error }));
-        }
-      } catch (err) {
-        setErrors((prev) => ({ ...prev, createPR: String(err) }));
-      } finally {
-        setLoading((prev) => ({ ...prev, createPR: false }));
-      }
-    },
-    [currentRepoSlug, currentBranch]
-  );
-  const handleCreatePRCancel = useCallback(() => {
-    setShowCreatePR(false);
-    setErrors((prev) => ({ ...prev, createPR: void 0 }));
+    exec3("gh pr create --web", () => {
+      process.stdout.emit("resize");
+    });
   }, []);
-  useInput5(
+  useInput4(
     (input) => {
-      if (showCreatePR) return;
       if (input === "1") setFocusedBox("remotes");
       if (input === "2") setFocusedBox("prs");
       if (input === "3") setFocusedBox("details");
+      if (input === "r") {
+        if (focusedBox === "prs") refreshPRs();
+        if (focusedBox === "details") refreshDetails();
+      }
     },
-    { isActive: isFocused && !showCreatePR }
+    { isActive: isFocused }
   );
   if (isRepo === false) {
     return /* @__PURE__ */ jsx5(TitledBox4, { borderStyle: "round", titles: ["Error"], flexGrow: 1, children: /* @__PURE__ */ jsx5(Text5, { color: "red", children: "Current directory is not a git repository" }) });
@@ -870,7 +780,7 @@ function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
         onSelect: handleRemoteSelect,
         loading: loading.remotes,
         error: errors.remotes,
-        isFocused: isFocused && !showCreatePR && focusedBox === "remotes"
+        isFocused: isFocused && focusedBox === "remotes"
       }
     ),
     /* @__PURE__ */ jsx5(
@@ -884,17 +794,7 @@ function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
         error: errors.prs,
         branch: currentBranch,
         repoSlug: currentRepoSlug,
-        isFocused: isFocused && !showCreatePR && focusedBox === "prs"
-      }
-    ),
-    showCreatePR && /* @__PURE__ */ jsx5(
-      CreatePRModal,
-      {
-        template: prTemplate,
-        onSubmit: handleCreatePRSubmit,
-        onCancel: handleCreatePRCancel,
-        loading: loading.createPR,
-        error: errors.createPR
+        isFocused: isFocused && focusedBox === "prs"
       }
     ),
     /* @__PURE__ */ jsx5(
@@ -903,17 +803,17 @@ function GitHubView({ isFocused, onModalChange, onKeybindingsChange }) {
         pr: prDetails,
         loading: loading.details,
         error: errors.details,
-        isFocused: isFocused && !showCreatePR && focusedBox === "details"
+        isFocused: isFocused && focusedBox === "details"
       }
     )
   ] });
 }
 
 // src/components/jira/JiraView.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useState as useState7 } from "react";
 import open2 from "open";
 import { TitledBox as TitledBox5 } from "@mishieck/ink-titled-box";
-import { Box as Box11, Text as Text11, useInput as useInput10 } from "ink";
+import { Box as Box11, Text as Text11, useInput as useInput9 } from "ink";
 
 // src/lib/jira/parser.ts
 var TICKET_KEY_PATTERN = /^[A-Z][A-Z0-9]+-\d+$/;
@@ -1139,15 +1039,15 @@ async function applyTransition(auth, ticketKey, transitionId) {
 }
 
 // src/components/jira/ChangeStatusModal.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
-import { Box as Box6, Text as Text6, useInput as useInput6 } from "ink";
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { Box as Box6, Text as Text6, useInput as useInput5 } from "ink";
 import SelectInput from "ink-select-input";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ChangeStatusModal({ repoPath, ticketKey, currentStatus, onComplete, onCancel }) {
-  const [transitions, setTransitions] = useState5([]);
-  const [loading, setLoading] = useState5(true);
-  const [applying, setApplying] = useState5(false);
-  const [error, setError] = useState5(null);
+  const [transitions, setTransitions] = useState4([]);
+  const [loading, setLoading] = useState4(true);
+  const [applying, setApplying] = useState4(false);
+  const [error, setError] = useState4(null);
   useEffect4(() => {
     const fetchTransitions = async () => {
       const siteUrl = getJiraSiteUrl(repoPath);
@@ -1189,7 +1089,7 @@ function ChangeStatusModal({ repoPath, ticketKey, currentStatus, onComplete, onC
       setApplying(false);
     }
   };
-  useInput6(
+  useInput5(
     (_input, key) => {
       if (key.escape && !applying) {
         onCancel();
@@ -1217,8 +1117,38 @@ function ChangeStatusModal({ repoPath, ticketKey, currentStatus, onComplete, onC
 }
 
 // src/components/jira/ConfigureJiraSiteModal.tsx
-import { useState as useState6 } from "react";
-import { Box as Box7, Text as Text7, useInput as useInput7 } from "ink";
+import { useState as useState5 } from "react";
+import { Box as Box7, Text as Text7, useInput as useInput6 } from "ink";
+
+// src/lib/editor.ts
+import { spawnSync } from "child_process";
+import { mkdtempSync, readFileSync as readFileSync2, rmSync, writeFileSync as writeFileSync2 } from "fs";
+import { tmpdir } from "os";
+import { join as join2 } from "path";
+function openInEditor(content, filename) {
+  const editor = process.env.VISUAL || process.env.EDITOR || "vi";
+  const tempDir = mkdtempSync(join2(tmpdir(), "clairo-"));
+  const tempFile = join2(tempDir, filename);
+  try {
+    writeFileSync2(tempFile, content);
+    const result = spawnSync(editor, [tempFile], {
+      stdio: "inherit"
+    });
+    process.stdout.write("\x1B[2J\x1B[H");
+    process.stdout.emit("resize");
+    if (result.status !== 0) {
+      return null;
+    }
+    return readFileSync2(tempFile, "utf-8");
+  } finally {
+    try {
+      rmSync(tempDir, { recursive: true });
+    } catch {
+    }
+  }
+}
+
+// src/components/jira/ConfigureJiraSiteModal.tsx
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function ConfigureJiraSiteModal({
   initialSiteUrl,
@@ -1228,13 +1158,13 @@ function ConfigureJiraSiteModal({
   loading,
   error
 }) {
-  const [siteUrl, setSiteUrl] = useState6(initialSiteUrl ?? "");
-  const [email, setEmail] = useState6(initialEmail ?? "");
-  const [apiToken, setApiToken] = useState6("");
-  const [selectedItem, setSelectedItem] = useState6("siteUrl");
+  const [siteUrl, setSiteUrl] = useState5(initialSiteUrl ?? "");
+  const [email, setEmail] = useState5(initialEmail ?? "");
+  const [apiToken, setApiToken] = useState5("");
+  const [selectedItem, setSelectedItem] = useState5("siteUrl");
   const items = ["siteUrl", "email", "apiToken", "submit"];
   const canSubmit = siteUrl.trim() && email.trim() && apiToken.trim();
-  useInput7(
+  useInput6(
     (input, key) => {
       if (loading) return;
       if (key.escape) {
@@ -1312,14 +1242,14 @@ function ConfigureJiraSiteModal({
 }
 
 // src/components/jira/LinkTicketModal.tsx
-import { useState as useState7 } from "react";
-import { Box as Box9, Text as Text9, useInput as useInput9 } from "ink";
+import { useState as useState6 } from "react";
+import { Box as Box9, Text as Text9, useInput as useInput8 } from "ink";
 
 // src/components/ui/TextInput.tsx
-import { Box as Box8, Text as Text8, useInput as useInput8 } from "ink";
+import { Box as Box8, Text as Text8, useInput as useInput7 } from "ink";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function TextInput({ value, onChange, placeholder, isActive, mask }) {
-  useInput8(
+  useInput7(
     (input, key) => {
       if (key.backspace || key.delete) {
         if (value.length > 0) {
@@ -1347,9 +1277,9 @@ function TextInput({ value, onChange, placeholder, isActive, mask }) {
 // src/components/jira/LinkTicketModal.tsx
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function LinkTicketModal({ onSubmit, onCancel, loading, error }) {
-  const [ticketInput, setTicketInput] = useState7("");
+  const [ticketInput, setTicketInput] = useState6("");
   const canSubmit = ticketInput.trim().length > 0;
-  useInput9(
+  useInput8(
     (_input, key) => {
       if (loading) return;
       if (key.escape) {
@@ -1406,17 +1336,17 @@ function TicketItem({ ticketKey, summary, status, isHighlighted, isSelected }) {
 // src/components/jira/JiraView.tsx
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function JiraView({ isFocused, onModalChange, onKeybindingsChange }) {
-  const [repoPath, setRepoPath] = useState8(null);
-  const [currentBranch, setCurrentBranch] = useState8(null);
-  const [isRepo, setIsRepo] = useState8(null);
-  const [jiraState, setJiraState] = useState8("not_configured");
-  const [tickets, setTickets] = useState8([]);
-  const [highlightedIndex, setHighlightedIndex] = useState8(0);
-  const [showConfigureModal, setShowConfigureModal] = useState8(false);
-  const [showLinkModal, setShowLinkModal] = useState8(false);
-  const [showStatusModal, setShowStatusModal] = useState8(false);
-  const [loading, setLoading] = useState8({ configure: false, link: false });
-  const [errors, setErrors] = useState8({});
+  const [repoPath, setRepoPath] = useState7(null);
+  const [currentBranch, setCurrentBranch] = useState7(null);
+  const [isRepo, setIsRepo] = useState7(null);
+  const [jiraState, setJiraState] = useState7("not_configured");
+  const [tickets, setTickets] = useState7([]);
+  const [highlightedIndex, setHighlightedIndex] = useState7(0);
+  const [showConfigureModal, setShowConfigureModal] = useState7(false);
+  const [showLinkModal, setShowLinkModal] = useState7(false);
+  const [showStatusModal, setShowStatusModal] = useState7(false);
+  const [loading, setLoading] = useState7({ configure: false, link: false });
+  const [errors, setErrors] = useState7({});
   useEffect5(() => {
     if (!isFocused) {
       setShowConfigureModal(false);
@@ -1579,7 +1509,7 @@ function JiraView({ isFocused, onModalChange, onKeybindingsChange }) {
       });
     }
   }, [repoPath, tickets, highlightedIndex]);
-  useInput10(
+  useInput9(
     (input, key) => {
       if (showConfigureModal || showLinkModal || showStatusModal) return;
       if (input === "c" && jiraState === "not_configured") {
@@ -1711,10 +1641,10 @@ function KeybindingsBar({ contextBindings = [], modalOpen = false }) {
 import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function App() {
   const { exit } = useApp();
-  const [focusedView, setFocusedView] = useState9("github");
-  const [modalOpen, setModalOpen] = useState9(false);
-  const [contextBindings, setContextBindings] = useState9([]);
-  useInput11(
+  const [focusedView, setFocusedView] = useState8("github");
+  const [modalOpen, setModalOpen] = useState8(false);
+  const [contextBindings, setContextBindings] = useState8([]);
+  useInput10(
     (input, key) => {
       if (key.ctrl && input === "c") {
         exit();
@@ -1733,7 +1663,6 @@ function App() {
       GitHubView,
       {
         isFocused: focusedView === "github",
-        onModalChange: setModalOpen,
         onKeybindingsChange: focusedView === "github" ? setContextBindings : void 0
       }
     ),
@@ -1754,7 +1683,7 @@ import { render as inkRender } from "ink";
 
 // src/lib/Screen.tsx
 import { Box as Box14, useStdout } from "ink";
-import { useCallback as useCallback3, useEffect as useEffect6, useState as useState10 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function Screen({ children }) {
   const { stdout } = useStdout();
@@ -1762,7 +1691,7 @@ function Screen({ children }) {
     () => ({ height: stdout.rows, width: stdout.columns }),
     [stdout]
   );
-  const [size, setSize] = useState10(getSize);
+  const [size, setSize] = useState9(getSize);
   useEffect6(() => {
     const onResize = () => setSize(getSize());
     stdout.on("resize", onResize);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clairo",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,9 +22,12 @@
   ],
   "dependencies": {
     "@mishieck/ink-titled-box": "^0.4.2",
+    "cli-table3": "^0.6.5",
     "ink": "^6.6.0",
+    "ink-link": "^5.0.0",
     "ink-scroll-view": "^0.3.5",
     "ink-select-input": "^6.2.0",
+    "marked": "^17.0.1",
     "meow": "^11.0.0",
     "open": "^11.0.0",
     "react": "^19.2.4"