clairo 0.1.0

package/README.md

@@ -0,0 +1,254 @@
+# clairo
+
+## Overview
+
+clairo is a terminal-based user interface (TUI) application that consolidates GitHub pull requests, Jira ticket management, and personal daily logging into a single keyboard-driven interface. Built with TypeScript, it auto-detects your current git context and eliminates context-switching between web UIs, preventing tasks from falling through the cracks.
+
+## Problem Statement
+
+Software engineers working with GitHub and Jira face constant context-switching:
+
+- Opening GitHub web UI to create/manage PRs
+- Navigating to Jira web UI to update ticket statuses
+- Maintaining personal work logs in separate text files
+- Forgetting to update systems (e.g., merged PR but ticket still "In Progress")
+
+This fragmented workflow leads to:
+
+- Wasted time switching between tools
+- Incomplete/outdated ticket statuses
+- Lost context about what was worked on
+- Mental overhead tracking multiple systems
+
+## Target User
+
+Software engineers (particularly full-stack developers) who:
+
+- Work with both GitHub and Jira daily
+- Prefer terminal/keyboard-driven workflows
+- Maintain personal work logs
+- Want to reduce context-switching overhead
+
+## User Stories
+
+### Core Workflows
+
+1. **As a developer**, I want clairo to auto-detect my current git branch and repository, so it knows what I'm working on without manual input
+2. **As a developer**, I want to see if a PR already exists for my current branch, so I don't accidentally create duplicates
+3. **As a developer**, I want to create GitHub PRs linked to Jira tickets from the TUI, so I don't have to open a browser
+4. **As a developer**, I want to view and modify existing PRs for my branch, so I can update them without leaving the terminal
+5. **As a developer**, I want to browse my Jira tickets using saved views/filters, so I can quickly find relevant work
+6. **As a developer**, I want to maintain daily work logs in markdown, so I have a record of what I accomplished
+7. **As a developer**, I want optional prompts to log PR/ticket actions, so I can choose when to document my work
+8. **As a developer**, I want to view previous logs easily, so I can reference what I did on past days
+
+### Quality of Life
+
+9. **As a developer**, I want all navigation to be keyboard-driven with tabs, so I can stay in flow
+10. **As a developer**, I want the tool to handle GitHub 2FA via PAT, so authentication is seamless
+11. **As a developer**, I want my credentials stored securely locally, so I don't re-authenticate constantly
+12. **As a developer**, I want clairo to handle multiple PRs from the same branch, so I can work with different base branches
+
+## Features
+
+### MVP (v1.0)
+
+#### Core Interface Structure
+
+clairo uses a tab-based navigation system with three main tabs:
+
+**Tab 1: PR View**
+
+- Auto-detects current git branch and repository (via git remote parsing)
+- Shows different states:
+  - **No git repo**: Display "Not in a git repository" message
+  - **No PR exists**: Show "Create PR" interface
+  - **Single PR exists**: Display PR details with edit capabilities
+  - **Multiple PRs exist**: List all PRs from current branch (different base branches), allow selection
+- Create PR flow:
+  - Pre-populate branch information
+  - Link to Jira ticket (searchable dropdown)
+  - Title and description fields
+  - Optional: auto-fill title/description from selected Jira ticket
+- View/Edit PR:
+  - PR title, description, status
+  - CI/CD checks status
+  - Reviewers
+  - Option to update PR details
+
+**Tab 2: Jira View**
+
+- Display saved Jira views/filters (configured in setup)
+- Browse tickets in a scrollable list (title, key, status, assignee)
+- Select ticket to view details:
+  - Full description
+  - Current status
+  - Comments (read-only for v1)
+  - Available transitions
+- Update ticket status (transition to different states)
+- Search/filter within current view
+
+**Tab 3: Logs View**
+
+- Split-pane layout:
+  - **Left pane**: Today's log file (editable markdown)
+  - **Right pane**: List of previous log files (by date)
+- Navigate to previous days by selecting from right pane
+- Auto-create today's log if it doesn't exist
+- Optional prompt after PR/ticket actions: "Log this? (y/n)"
+  - Auto-append timestamped entries to today's log
+  - Format: `## HH:MM - Action description`
+
+#### Git Context Detection
+
+- Parse `git remote get-url origin` to extract owner/repo
+- Fallback handling:
+  - If `origin` doesn't exist, list all remotes
+  - Filter for GitHub URLs
+  - Prompt user to select if multiple GitHub remotes exist
+- Cache repo context per session to avoid repeated parsing
+- Handle non-GitHub repositories gracefully
+
+#### GitHub Integration
+
+- Query PRs by head branch: `GET /repos/{owner}/{repo}/pulls?head={user}:{branch}&state=open`
+- Create new PRs: `POST /repos/{owner}/{repo}/pulls`
+- Update PR details: `PATCH /repos/{owner}/{repo}/pulls/{number}`
+- Fetch PR status, checks, and reviewers
+- Handle authentication via Personal Access Token (PAT)
+
+#### Jira Integration
+
+- Authenticate via API token
+- Fetch saved views/filters (JQL queries configured in setup)
+- Search issues: `GET /rest/api/3/search`
+- Get issue details: `GET /rest/api/3/issue/{issueKey}`
+- Get available transitions: `GET /rest/api/3/issue/{issueKey}/transitions`
+- Transition issue: `POST /rest/api/3/issue/{issueKey}/transitions`
+- **Note**: Transition IDs are fetched dynamically (workflow-dependent)
+
+#### Daily Logging
+
+- Markdown files stored at `~/.clairo/logs/YYYY-MM-DD.md`
+- Auto-create file for current day if missing
+- Simple text editor within TUI (Ink text input component)
+- Optional auto-logging after actions:
+
+  - Prompt: "Log this? (y/n)"
+  - Auto-generated format:
+
+    ```markdown
+    ## 14:23 - Created PR #234
+
+    Fixed auth bug in user service
+    Jira: PROJ-123
+    ```
+
+- Navigate historical logs via right pane
+
+#### Configuration & Setup
+
+- First-run setup wizard:
+  - GitHub PAT creation guide
+  - Jira API token creation guide
+  - Jira instance URL
+  - Configure Jira saved views (JQL queries)
+  - Set default auto-log behavior (prompt/always/never)
+- Configuration stored at `~/.clairo/config.json`
+- Settings accessible via settings menu in TUI
+
+### Future Enhancements (Post-MVP)
+
+- **CLI quick actions**: `clairo pr create`, `clairo ticket update PROJ-123 done`
+- Notifications for PR review requests
+- PR templates
+- Inline PR review workflow
+- GitHub Actions status visualization
+- Batch ticket operations
+- Export logs to different formats
+- Customizable keybindings
+- Support for GitLab, Bitbucket
+- Support for Linear, Asana
+- Multi-repo workspace mode
+- Offline mode with cache
+
+## Technical Architecture
+
+### Tech Stack
+
+- **Language**: TypeScript
+- **TUI Framework**: Ink (React for CLIs)
+- **GitHub API**: `@octokit/rest`
+- **Jira API**: `axios` or `node-fetch` (direct REST calls)
+- **Configuration**: `conf` package or custom JSON file handling
+- **File System**: Node.js built-in `fs/promises`
+
+### Data Storage
+
+```
+~/.clairo/
+├── config.json              # API tokens, settings, preferences
+└── logs/
+    ├── 2026-02-07.md        # Daily log files
+    ├── 2026-02-06.md
+    └── ...
+```
+
+### API Integration Details
+
+#### Git Context Detection
+
+- Parse git remote URL using `git remote get-url origin`
+- Extract owner/repo from URLs:
+  - HTTPS: `https://github.com/owner/repo.git`
+  - SSH: `git@github.com:owner/repo.git`
+- Fallback strategy:
+  1. Try `origin` remote first
+  2. If not found, run `git remote` to list all remotes
+  3. Filter for GitHub URLs
+  4. If multiple GitHub remotes, prompt user to select
+  5. Cache selection for current session
+- Get current branch: `git rev-parse --abbrev-ref HEAD`
+
+#### GitHub
+
+- Authentication: Personal Access Token (PAT)
+- Permissions needed: `repo` scope
+- Key endpoints:
+  - List PRs by branch: `GET /repos/{owner}/{repo}/pulls?head={user}:{branch}&state=open`
+  - Create PR: `POST /repos/{owner}/{repo}/pulls`
+  - Get PR details: `GET /repos/{owner}/{repo}/pulls/{number}`
+  - Update PR: `PATCH /repos/{owner}/{repo}/pulls/{number}`
+
+#### Jira
+
+- Authentication: API Token
+- Key endpoints:
+  - Search issues (using JQL): `GET /rest/api/3/search?jql={query}`
+  - Get issue: `GET /rest/api/3/issue/{issueKey}`
+  - Get transitions: `GET /rest/api/3/issue/{issueKey}/transitions`
+  - Transition issue: `POST /rest/api/3/issue/{issueKey}/transitions`
+
+**Note**: Jira transition IDs vary by workflow configuration and must be fetched dynamically.
+
+### Security Considerations
+
+- Store credentials in `~/.clairo/config.json` with restrictive file permissions (0600)
+- Never log tokens/credentials
+- Consider using system keychain in future iterations
+- # Validate all user inputs before API calls
+
+### Important (High Priority)
+
+3. **Jira Saved Views Configuration**: How should users configure their saved views during setup? Manual JQL entry, or UI to build queries?
+4. **PR Title Auto-fill**: When creating a PR linked to a Jira ticket, should title come from ticket title, ticket key + title, or be fully manual?
+5. **Multiple PRs Handling**: When multiple PRs exist for a branch, should there be a "primary" PR concept, or treat all equally?
+6. **Log Entry Format**: Finalize fields for auto-generated entries (currently: timestamp, action, PR #, Jira key)
+
+## Out of Scope (v1.0)
+
+- CLI quick actions (saved for v2)
+- Real-time notifications
+- Inline code review within TUI
+- Comment creation on Jira tickets (read-only for v1)
+- PR merge functionality (use `gh` CLI or web UI)

package/dist/cli.js

@@ -0,0 +1,902 @@
+#!/usr/bin/env node
+
+// src/cli.tsx
+import meow from "meow";
+
+// src/app.tsx
+import { Box as Box7 } from "ink";
+
+// src/components/github/GitHubView.tsx
+import { useCallback, useEffect as useEffect3, useState as useState4 } from "react";
+import { TitledBox as TitledBox4 } from "@mishieck/ink-titled-box";
+import { Box as Box5, Text as Text5, useInput as useInput4 } from "ink";
+
+// src/lib/config/index.ts
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+import { homedir } from "os";
+import { dirname, join } from "path";
+var CONFIG_PATH = join(homedir(), ".clairo", "config.json");
+var DEFAULT_CONFIG = {};
+function loadConfig() {
+  try {
+    if (!existsSync(CONFIG_PATH)) {
+      return DEFAULT_CONFIG;
+    }
+    const content = readFileSync(CONFIG_PATH, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return DEFAULT_CONFIG;
+  }
+}
+function saveConfig(config) {
+  const dir = dirname(CONFIG_PATH);
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+  writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2));
+}
+
+// src/lib/github/config.ts
+function getRepoConfig(repoPath) {
+  const config = loadConfig();
+  const repos = config.repositories ?? {};
+  return repos[repoPath] ?? {};
+}
+function updateRepoConfig(repoPath, updates) {
+  const config = loadConfig();
+  if (!config.repositories) {
+    config.repositories = {};
+  }
+  config.repositories[repoPath] = {
+    ...config.repositories[repoPath],
+    ...updates
+  };
+  saveConfig(config);
+}
+function getSelectedRemote(repoPath, availableRemotes) {
+  const repoConfig = getRepoConfig(repoPath);
+  if (repoConfig.selectedRemote && availableRemotes.includes(repoConfig.selectedRemote)) {
+    return repoConfig.selectedRemote;
+  }
+  if (availableRemotes.includes("origin")) {
+    return "origin";
+  }
+  return availableRemotes[0] ?? null;
+}
+
+// src/lib/github/git.ts
+import { execSync } from "child_process";
+function isGitRepo() {
+  try {
+    execSync("git rev-parse --is-inside-work-tree", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getRepoRoot() {
+  try {
+    const root = execSync("git rev-parse --show-toplevel", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    return { success: true, data: root };
+  } catch {
+    return { success: false, error: "Not a git repository" };
+  }
+}
+function listRemotes() {
+  try {
+    const output = execSync("git remote -v", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    });
+    const remotes = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const line of output.trim().split("\n")) {
+      if (!line) continue;
+      const match = line.match(/^(\S+)\s+(\S+)\s+\((fetch|push)\)$/);
+      if (match && match[3] === "fetch" && !seen.has(match[1])) {
+        seen.add(match[1]);
+        remotes.push({ name: match[1], url: match[2] });
+      }
+    }
+    return { success: true, data: remotes };
+  } catch {
+    return { success: false, error: "Failed to list remotes" };
+  }
+}
+function getCurrentBranch() {
+  try {
+    const branch = execSync("git branch --show-current", {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    if (!branch) {
+      return { success: false, error: "Detached HEAD state" };
+    }
+    return { success: true, data: branch };
+  } catch {
+    return { success: false, error: "Failed to get current branch" };
+  }
+}
+
+// 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() {
+  try {
+    await execAsync("gh --version");
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function isGhAuthenticated() {
+  try {
+    await execAsync("gh auth status");
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getRepoFromRemote(remoteUrl) {
+  const sshMatch = remoteUrl.match(/git@github\.com:(.+?)(?:\.git)?$/);
+  if (sshMatch) return sshMatch[1].replace(/\.git$/, "");
+  const httpsMatch = remoteUrl.match(
+    /https:\/\/github\.com\/(.+?)(?:\.git)?$/
+  );
+  if (httpsMatch) return httpsMatch[1].replace(/\.git$/, "");
+  return null;
+}
+async function listPRsForBranch(branch, repo) {
+  if (!await isGhInstalled()) {
+    return {
+      success: false,
+      error: "GitHub CLI (gh) is not installed. Install from https://cli.github.com",
+      errorType: "not_installed"
+    };
+  }
+  if (!await isGhAuthenticated()) {
+    return {
+      success: false,
+      error: "Not authenticated. Run 'gh auth login' to authenticate.",
+      errorType: "not_authenticated"
+    };
+  }
+  try {
+    const fields = "number,title,state,author,createdAt,isDraft";
+    const { stdout } = await execAsync(
+      `gh pr list --head "${branch}" --json ${fields} --repo "${repo}"`
+    );
+    const prs = JSON.parse(stdout);
+    return { success: true, data: prs };
+  } catch {
+    return { success: false, error: "Failed to fetch PRs", errorType: "api_error" };
+  }
+}
+async function getPRDetails(prNumber, repo) {
+  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 fields = [
+      "number",
+      "title",
+      "body",
+      "state",
+      "author",
+      "createdAt",
+      "updatedAt",
+      "isDraft",
+      "mergeable",
+      "reviewDecision",
+      "commits",
+      "assignees",
+      "reviewRequests",
+      "reviews",
+      "statusCheckRollup"
+    ].join(",");
+    const { stdout } = await execAsync(
+      `gh pr view ${prNumber} --json ${fields} --repo "${repo}"`
+    );
+    const pr = JSON.parse(stdout);
+    return { success: true, data: pr };
+  } catch {
+    return {
+      success: false,
+      error: "Failed to fetch PR details",
+      errorType: "api_error"
+    };
+  }
+}
+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;
+      }
+    }
+  }
+  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"
+    };
+  }
+}
+
+// src/components/github/CreatePRModal.tsx
+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";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { jsx, jsxs } from "react/jsx-runtime";
+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");
+    if (result.status !== 0) {
+      return null;
+    }
+    return readFileSync3(tempFile, "utf-8");
+  } finally {
+    try {
+      rmSync(tempDir, { recursive: true });
+    } catch {
+    }
+  }
+}
+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 ? "cyan" : 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..." }) })
+  ] });
+}
+
+// src/components/github/PRDetailsBox.tsx
+import { TitledBox } from "@mishieck/ink-titled-box";
+import { Box as Box2, Text as Text2 } from "ink";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getCheckColor(check) {
+  const conclusion = check.conclusion ?? check.state;
+  if (conclusion === "SUCCESS") return "green";
+  if (conclusion === "FAILURE" || conclusion === "ERROR") return "red";
+  if (conclusion === "SKIPPED" || conclusion === "NEUTRAL") return "gray";
+  if (conclusion === "PENDING" || check.status === "IN_PROGRESS" || check.status === "QUEUED" || check.status === "WAITING")
+    return "yellow";
+  if (check.status === "COMPLETED") return "green";
+  return void 0;
+}
+function getCheckIcon(check) {
+  const conclusion = check.conclusion ?? check.state;
+  if (conclusion === "SUCCESS") return "\u2713";
+  if (conclusion === "FAILURE" || conclusion === "ERROR") return "\u2717";
+  if (conclusion === "SKIPPED" || conclusion === "NEUTRAL") return "\u25CB";
+  if (conclusion === "PENDING" || check.status === "IN_PROGRESS" || check.status === "QUEUED" || check.status === "WAITING")
+    return "\u25CF";
+  if (check.status === "COMPLETED") return "\u2713";
+  return "?";
+}
+function PRDetailsBox({ pr, loading, error, isFocused }) {
+  var _a, _b, _c, _d, _e, _f;
+  const title = "3 PR Details";
+  const borderColor = isFocused ? "cyan" : void 0;
+  const displayTitle = pr ? `${title} - #${pr.number}` : title;
+  const reviewStatus = (pr == null ? void 0 : pr.reviewDecision) ?? "PENDING";
+  const reviewColor = reviewStatus === "APPROVED" ? "green" : reviewStatus === "CHANGES_REQUESTED" ? "red" : "yellow";
+  const mergeableColor = (pr == null ? void 0 : pr.mergeable) === "MERGEABLE" ? "green" : (pr == null ? void 0 : pr.mergeable) === "CONFLICTING" ? "red" : "yellow";
+  return /* @__PURE__ */ jsx2(TitledBox, { borderStyle: "round", titles: [displayTitle], borderColor, flexGrow: 2, 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" }),
+    !loading && !error && pr && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(Text2, { bold: true, children: pr.title }),
+      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+        "by ",
+        ((_a = pr.author) == null ? void 0 : _a.login) ?? "unknown",
+        " | ",
+        ((_b = pr.commits) == null ? void 0 : _b.length) ?? 0,
+        " commits"
+      ] }),
+      /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Review: " }),
+        /* @__PURE__ */ jsx2(Text2, { color: reviewColor, children: reviewStatus }),
+        /* @__PURE__ */ jsx2(Text2, { children: " | " }),
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Merge: " }),
+        /* @__PURE__ */ jsx2(Text2, { color: mergeableColor, children: pr.mergeable ?? "UNKNOWN" })
+      ] }),
+      (((_c = pr.assignees) == null ? void 0 : _c.length) ?? 0) > 0 && /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Assignees: " }),
+        /* @__PURE__ */ jsx2(Text2, { children: pr.assignees.map((a) => a.login).join(", ") })
+      ] }),
+      (((_d = pr.reviewRequests) == null ? void 0 : _d.length) ?? 0) > 0 && /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Reviewers: " }),
+        /* @__PURE__ */ jsx2(Text2, { children: pr.reviewRequests.map((r) => r.login ?? r.name ?? r.slug ?? "Team").join(", ") })
+      ] }),
+      (((_e = pr.statusCheckRollup) == null ? void 0 : _e.length) ?? 0) > 0 && /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Checks:" }),
+        (_f = pr.statusCheckRollup) == null ? void 0 : _f.map((check, idx) => /* @__PURE__ */ jsxs2(Text2, { color: getCheckColor(check), children: [
+          "  ",
+          getCheckIcon(check),
+          " ",
+          check.name ?? check.context
+        ] }, idx))
+      ] }),
+      pr.body && /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Description:" }),
+        /* @__PURE__ */ jsx2(Text2, { children: pr.body })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/github/PullRequestsBox.tsx
+import { useEffect, useState as useState2 } from "react";
+import { TitledBox as TitledBox2 } from "@mishieck/ink-titled-box";
+import { Box as Box3, Text as Text3, useInput as useInput2 } from "ink";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PullRequestsBox({
+  prs,
+  selectedPR,
+  onSelect,
+  onCreatePR,
+  loading,
+  error,
+  branch,
+  isFocused
+}) {
+  const [highlightedIndex, setHighlightedIndex] = useState2(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]);
+  useInput2(
+    (input, key) => {
+      if (!isFocused) return;
+      if (key.upArrow || input === "k") {
+        setHighlightedIndex((prev) => Math.max(0, prev - 1));
+      }
+      if (key.downArrow || input === "j") {
+        setHighlightedIndex((prev) => Math.min(totalItems - 1, prev + 1));
+      }
+      if (key.return) {
+        if (highlightedIndex === prs.length) {
+          onCreatePR();
+        } else if (prs[highlightedIndex]) {
+          onSelect(prs[highlightedIndex]);
+        }
+      }
+    },
+    { isActive: isFocused }
+  );
+  const title = "2 Pull Requests";
+  const subtitle = branch ? ` (${branch})` : "";
+  const borderColor = isFocused ? "cyan" : void 0;
+  return /* @__PURE__ */ jsx3(TitledBox2, { borderStyle: "round", titles: [`${title}${subtitle}`], borderColor, children: /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", paddingX: 1, children: [
+    loading && /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Loading PRs..." }),
+    error && /* @__PURE__ */ jsx3(Text3, { color: "red", children: error }),
+    !loading && !error && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      prs.length === 0 && /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "No PRs for this branch" }),
+      prs.map((pr, idx) => {
+        const isHighlighted = isFocused && idx === highlightedIndex;
+        const isSelected = pr.number === (selectedPR == null ? void 0 : selectedPR.number);
+        const prefix = isHighlighted ? "> " : isSelected ? "\u25CF " : "  ";
+        return /* @__PURE__ */ jsxs3(Text3, { color: isSelected ? "green" : void 0, children: [
+          prefix,
+          "#",
+          pr.number,
+          " ",
+          pr.isDraft ? "[Draft] " : "",
+          pr.title
+        ] }, pr.number);
+      }),
+      /* @__PURE__ */ jsxs3(Text3, { color: "blue", children: [
+        isFocused && highlightedIndex === prs.length ? "> " : "  ",
+        "+ Create new PR"
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/github/RemotesBox.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { TitledBox as TitledBox3 } from "@mishieck/ink-titled-box";
+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);
+  useEffect2(() => {
+    const idx = remotes.findIndex((r) => r.name === selectedRemote);
+    if (idx >= 0) setHighlightedIndex(idx);
+  }, [selectedRemote, remotes]);
+  useInput3(
+    (input, key) => {
+      if (!isFocused || remotes.length === 0) return;
+      if (key.upArrow || input === "k") {
+        setHighlightedIndex((prev) => Math.max(0, prev - 1));
+      }
+      if (key.downArrow || input === "j") {
+        setHighlightedIndex((prev) => Math.min(remotes.length - 1, prev + 1));
+      }
+      if (key.return) {
+        onSelect(remotes[highlightedIndex].name);
+      }
+    },
+    { isActive: isFocused }
+  );
+  const title = "1 Remotes";
+  const borderColor = isFocused ? "cyan" : void 0;
+  return /* @__PURE__ */ jsx4(TitledBox3, { borderStyle: "round", titles: [title], borderColor, children: /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, children: [
+    loading && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "Loading..." }),
+    error && /* @__PURE__ */ jsx4(Text4, { color: "red", children: error }),
+    !loading && !error && remotes.length === 0 && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "No remotes configured" }),
+    !loading && !error && remotes.map((remote, idx) => {
+      const isHighlighted = isFocused && idx === highlightedIndex;
+      const isSelected = remote.name === selectedRemote;
+      const prefix = isHighlighted ? "> " : isSelected ? "\u25CF " : "  ";
+      return /* @__PURE__ */ jsxs4(Text4, { color: isSelected ? "green" : void 0, children: [
+        prefix,
+        remote.name,
+        " (",
+        remote.url,
+        ")"
+      ] }, remote.name);
+    })
+  ] }) });
+}
+
+// src/components/github/GitHubView.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function GitHubView() {
+  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({
+    remotes: true,
+    prs: false,
+    details: false,
+    createPR: false
+  });
+  const [errors, setErrors] = useState4({});
+  const [showCreatePR, setShowCreatePR] = useState4(false);
+  const [prTemplate, setPrTemplate] = useState4(null);
+  const [focusedBox, setFocusedBox] = useState4("remotes");
+  useEffect3(() => {
+    const gitRepoCheck = isGitRepo();
+    setIsRepo(gitRepoCheck);
+    if (!gitRepoCheck) {
+      setLoading((prev) => ({ ...prev, remotes: false }));
+      setErrors((prev) => ({ ...prev, remotes: "Not a git repository" }));
+      return;
+    }
+    const rootResult = getRepoRoot();
+    if (rootResult.success) {
+      setRepoPath(rootResult.data);
+      const template = getPRTemplate(rootResult.data);
+      setPrTemplate(template);
+    }
+    const branchResult = getCurrentBranch();
+    if (branchResult.success) {
+      setCurrentBranch(branchResult.data);
+    }
+    const remotesResult = listRemotes();
+    if (remotesResult.success) {
+      setRemotes(remotesResult.data);
+      const remoteNames = remotesResult.data.map((r) => r.name);
+      const defaultRemote = getSelectedRemote(rootResult.success ? rootResult.data : "", remoteNames);
+      setSelectedRemote(defaultRemote);
+    } else {
+      setErrors((prev) => ({ ...prev, remotes: remotesResult.error }));
+    }
+    setLoading((prev) => ({ ...prev, remotes: false }));
+  }, []);
+  useEffect3(() => {
+    if (!selectedRemote || !currentBranch) return;
+    const remote = remotes.find((r) => r.name === selectedRemote);
+    if (!remote) return;
+    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 (!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]);
+  const handleRemoteSelect = useCallback(
+    (remoteName) => {
+      setSelectedRemote(remoteName);
+      if (repoPath) {
+        updateRepoConfig(repoPath, { selectedRemote: remoteName });
+      }
+    },
+    [repoPath]
+  );
+  const handlePRSelect = useCallback((pr) => {
+    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 }));
+  }, []);
+  useInput4(
+    (input) => {
+      if (showCreatePR) return;
+      if (input === "1") setFocusedBox("remotes");
+      if (input === "2") setFocusedBox("prs");
+      if (input === "3") setFocusedBox("details");
+    },
+    { isActive: !showCreatePR }
+  );
+  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" }) });
+  }
+  if (showCreatePR) {
+    return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsx5(
+      CreatePRModal,
+      {
+        template: prTemplate,
+        onSubmit: handleCreatePRSubmit,
+        onCancel: handleCreatePRCancel,
+        loading: loading.createPR,
+        error: errors.createPR
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx5(
+      RemotesBox,
+      {
+        remotes,
+        selectedRemote,
+        onSelect: handleRemoteSelect,
+        loading: loading.remotes,
+        error: errors.remotes,
+        isFocused: focusedBox === "remotes"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      PullRequestsBox,
+      {
+        prs,
+        selectedPR,
+        onSelect: handlePRSelect,
+        onCreatePR: handleCreatePR,
+        loading: loading.prs,
+        error: errors.prs,
+        branch: currentBranch,
+        isFocused: focusedBox === "prs"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      PRDetailsBox,
+      {
+        pr: prDetails,
+        loading: loading.details,
+        error: errors.details,
+        isFocused: focusedBox === "details"
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Tabs.tsx
+import React, { useState as useState5 } from "react";
+import { Box as Box6, Text as Text6, useInput as useInput5 } from "ink";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function TabItem({ children }) {
+  return /* @__PURE__ */ jsx6(Box6, { flexGrow: 1, children });
+}
+function Tabs({ children, defaultTab }) {
+  const childArray = React.Children.toArray(children);
+  const tabNames = childArray.map((child) => child.props.name);
+  const [activeTab, setActiveTab] = useState5(defaultTab ?? tabNames[0]);
+  useInput5((_input, key) => {
+    if (key.tab && activeTab) {
+      const currentIndex = tabNames.indexOf(activeTab);
+      const newIndex = key.shift ? currentIndex === 0 ? tabNames.length - 1 : currentIndex - 1 : (currentIndex + 1) % tabNames.length;
+      setActiveTab(tabNames[newIndex]);
+    }
+  });
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, minHeight: 0, children: [
+    /* @__PURE__ */ jsx6(Box6, { paddingX: 1, gap: 1, flexShrink: 0, children: tabNames.map((name) => /* @__PURE__ */ jsx6(Text6, { inverse: activeTab === name, bold: activeTab === name, children: `${name} ` }, name)) }),
+    /* @__PURE__ */ jsx6(Box6, { flexGrow: 1, marginTop: 1, overflow: "hidden", children: childArray.map((child) => /* @__PURE__ */ jsx6(Box6, { display: child.props.name === activeTab ? "flex" : "none", flexGrow: 1, children: child }, child.props.name)) })
+  ] });
+}
+
+// src/app.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function App() {
+  return /* @__PURE__ */ jsx7(Box7, { flexGrow: 1, flexDirection: "column", overflow: "hidden", children: /* @__PURE__ */ jsx7(Tabs, { children: /* @__PURE__ */ jsx7(TabItem, { name: "GitHub", children: /* @__PURE__ */ jsx7(GitHubView, {}) }) }) });
+}
+
+// src/lib/render.tsx
+import { render as inkRender } from "ink";
+
+// src/lib/Screen.tsx
+import { Box as Box8, useStdout } from "ink";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Screen({ children }) {
+  const { stdout } = useStdout();
+  const getSize = useCallback2(
+    () => ({ height: stdout.rows, width: stdout.columns }),
+    [stdout]
+  );
+  const [size, setSize] = useState6(getSize);
+  useEffect4(() => {
+    const onResize = () => setSize(getSize());
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout, getSize]);
+  return /* @__PURE__ */ jsx8(Box8, { height: size.height, width: size.width, children });
+}
+
+// src/lib/render.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ENTER_ALT_BUFFER = "\x1B[?1049h";
+var EXIT_ALT_BUFFER = "\x1B[?1049l";
+var CLEAR_SCREEN = "\x1B[2J\x1B[H";
+function render(node, options) {
+  process.stdout.write(ENTER_ALT_BUFFER + CLEAR_SCREEN);
+  const element = /* @__PURE__ */ jsx9(Screen, { children: node });
+  const instance = inkRender(element, options);
+  setImmediate(() => instance.rerender(element));
+  const cleanup = () => process.stdout.write(EXIT_ALT_BUFFER);
+  const originalWaitUntilExit = instance.waitUntilExit.bind(instance);
+  instance.waitUntilExit = async () => {
+    await originalWaitUntilExit();
+    cleanup();
+  };
+  process.on("exit", cleanup);
+  const handleSignal = () => {
+    cleanup();
+    instance.unmount();
+    process.exit(0);
+  };
+  process.on("SIGINT", handleSignal);
+  process.on("SIGTERM", handleSignal);
+  return instance;
+}
+
+// src/cli.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+meow(
+  `
+	Usage
+	  $ clairo
+
+	Options
+		--name  Your name
+
+	Examples
+	  $ clairo --name=Jane
+	  Hello, Jane
+`,
+  {
+    importMeta: import.meta,
+    flags: {
+      name: {
+        type: "string"
+      }
+    }
+  }
+);
+render(/* @__PURE__ */ jsx10(App, {}));

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "clairo",
+  "version": "0.1.0",
+  "license": "MIT",
+  "bin": "dist/cli.js",
+  "type": "module",
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsx --watch src/cli.tsx",
+    "start": "node dist/cli.js",
+    "lint": "prettier --write . && eslint . --fix"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@mishieck/ink-titled-box": "^0.4.2",
+    "ink": "^6.6.0",
+    "meow": "^11.0.0",
+    "react": "^19.2.4"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.13",
+    "chalk": "^5.2.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "prettier": "^2.8.7",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.0.3",
+    "typescript-eslint": "^8.0.0"
+  }
+}