@senad-d/branchme 0.1.1

package/src/tools/branchme-tools.ts

@@ -0,0 +1,275 @@
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { Type } from "typebox";
+import {
+  BRANCH_STATUS_TOOL_NAME,
+  CHANGE_BRANCH_TOOL_NAME,
+  CREATE_BRANCH_TOOL_NAME,
+  PULL_REQUEST_TOOL_NAME,
+  PUSH_BRANCH_TOOL_NAME,
+} from "../constants.ts";
+import {
+  changeExistingLocalBranch,
+  createLocalBranch,
+  getBranchStatus,
+  getGitRoot,
+  getLocalBranchCommit,
+  localBranchExists,
+  pushCurrentBranch,
+  validateBranchName,
+  withRepositoryMutationQueue,
+} from "../git.ts";
+import {
+  createGitHubPullRequest,
+  ensureGitHubBranchExists,
+  redactSecrets,
+  repositoryLabel,
+  resolveGitHubRepository,
+  resolveGitHubToken,
+  validatePullRequestBranchRef,
+} from "../github.ts";
+import type { BranchStatusDetails, ChangeBranchDetails, PullRequestDetails } from "../types.ts";
+
+const EmptyParametersSchema = Type.Object({}, { additionalProperties: false });
+
+const CreateBranchParametersSchema = Type.Object(
+  {
+    branchName: Type.String({ minLength: 1, description: "Name of the new branch to create from current HEAD." }),
+  },
+  { additionalProperties: false },
+);
+
+const ChangeBranchParametersSchema = Type.Object(
+  {
+    branchName: Type.String({ minLength: 1, description: "Name of the existing local branch to switch to." }),
+  },
+  { additionalProperties: false },
+);
+
+const PullRequestParametersSchema = Type.Object(
+  {
+    headBranch: Type.String({ minLength: 1, description: "Existing local branch containing the pull request changes." }),
+    baseBranch: Type.String({ minLength: 1, description: "Existing local target branch for the pull request." }),
+    title: Type.String({ minLength: 1, description: "Pull request title." }),
+    body: Type.String({ description: "Pull request body. Pass an empty string only when intentionally blank." }),
+    draft: Type.Boolean({ description: "Whether to create the pull request as a draft." }),
+  },
+  { additionalProperties: false },
+);
+
+// Exported so tests and advanced embedders can inject environment/fetch behavior without mutating globals.
+export interface BranchMeToolOptions {
+  env?: NodeJS.ProcessEnv;
+  fetchImpl?: typeof fetch;
+}
+
+function repositoryText(details: BranchStatusDetails): string {
+  return details.githubRepository ? repositoryLabel(details.githubRepository) : "not resolved";
+}
+
+export function formatBranchStatus(details: BranchStatusDetails): string {
+  const branch = details.detached ? "detached HEAD" : details.currentBranch ?? "unknown branch";
+  const tree = details.hasChanges ? "dirty" : "clean";
+  const upstream = details.upstream ? `upstream ${details.upstream}` : "no upstream";
+  const counts = details.ahead === null || details.behind === null ? "ahead/behind unavailable" : `ahead ${details.ahead}, behind ${details.behind}`;
+  const warning = details.warnings?.length ? `; warning: ${details.warnings.join("; ")}` : "";
+  return `BranchMe status: ${branch}; ${tree}; ${upstream}; ${counts}; GitHub ${repositoryText(details)}${warning}.`;
+}
+
+export function formatChangeBranch(details: ChangeBranchDetails): string {
+  const previous = details.previousDetached ? "detached HEAD" : details.previousBranch ?? "unknown branch";
+  return `Changed branch from ${previous} to ${details.currentBranch}.`;
+}
+
+export function formatPullRequest(details: PullRequestDetails): string {
+  return `Created pull request #${details.number} (${details.state}) for ${repositoryLabel(details.repository)}: ${details.url}`;
+}
+
+async function validateLocalPullRequestBranchName(
+  pi: Pick<ExtensionAPI, "exec">,
+  ctx: { cwd: string },
+  branchName: string,
+  field: "headBranch" | "baseBranch",
+  signal?: AbortSignal,
+): Promise<void> {
+  // Keep PR-specific safety rules and local branch semantics on one path before existence checks.
+  validatePullRequestBranchRef(branchName, field);
+  try {
+    await validateBranchName(pi, ctx, branchName, signal);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new Error(`${field} is not a valid local branch name: ${redactSecrets(message)}.`);
+  }
+}
+
+async function requireExistingValidatedLocalPullRequestBranch(
+  pi: Pick<ExtensionAPI, "exec">,
+  ctx: { cwd: string },
+  branchName: string,
+  field: "headBranch" | "baseBranch",
+  signal?: AbortSignal,
+): Promise<void> {
+  if (await localBranchExists(pi, ctx, branchName, signal)) return;
+  throw new Error(`${field} local branch '${redactSecrets(branchName)}' does not exist.`);
+}
+
+function shortCommit(commit: string): string {
+  return commit.slice(0, 12);
+}
+
+async function requireGitHubHeadMatchesLocalBranch(
+  pi: Pick<ExtensionAPI, "exec">,
+  ctx: { cwd: string },
+  branchName: string,
+  githubCommitSha: string,
+  signal?: AbortSignal,
+): Promise<void> {
+  const localCommit = await getLocalBranchCommit(pi, ctx, branchName, signal);
+  if (localCommit.toLowerCase() === githubCommitSha.toLowerCase()) return;
+  throw new Error(
+    `headBranch local branch '${redactSecrets(branchName)}' points to ${shortCommit(localCommit)}, but GitHub has ${shortCommit(githubCommitSha)}. Run push_branch and wait for it to complete before calling pull_request, then retry.`,
+  );
+}
+
+export function registerBranchMeTools(pi: Pick<ExtensionAPI, "registerTool" | "exec">, options: BranchMeToolOptions = {}): void {
+  pi.registerTool({
+    name: BRANCH_STATUS_TOOL_NAME,
+    label: "Branch Status",
+    description: "branch_status inspects the current git repository, branch, upstream, dirty state, ahead/behind counts, and GitHub repository if available. branch_status is read-only.",
+    promptSnippet: "branch_status: inspect current-repository git branch status without mutating files or git state",
+    promptGuidelines: [
+      "Use branch_status before change_branch, create_branch, push_branch, or pull_request when the user asks about the current branch state.",
+      "Use branch_status only for read-only inspection; branch_status never creates branches, pushes, commits, stages, or edits files.",
+    ],
+    parameters: EmptyParametersSchema,
+    async execute(_toolCallId, _params, signal, _onUpdate, ctx) {
+      const details = await getBranchStatus(pi, ctx, signal);
+
+      try {
+        details.githubRepository = await resolveGitHubRepository(pi, ctx, signal, options.env);
+      } catch {
+        // Repository resolution is optional for branch_status; mutation tools fail closed.
+      }
+
+      return {
+        content: [{ type: "text", text: formatBranchStatus(details) }],
+        details,
+      };
+    },
+  });
+
+  pi.registerTool({
+    name: CREATE_BRANCH_TOOL_NAME,
+    label: "Create Branch",
+    description: "create_branch creates and checks out a new local branch from the current HEAD only. create_branch does not accept a base ref and never stages, commits, pushes, or edits files.",
+    promptSnippet: "create_branch: create and checkout a new branch from current HEAD using an explicit branchName",
+    promptGuidelines: [
+      "Use create_branch only when the user explicitly wants a new branch from current HEAD.",
+      "Use create_branch with only branchName; create_branch never accepts or infers baseRef, commits, stages, pushes, or edits files.",
+    ],
+    parameters: CreateBranchParametersSchema,
+    async execute(_toolCallId, params, signal, _onUpdate, ctx) {
+      const details = await createLocalBranch(pi, ctx, params.branchName, signal);
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Created and checked out branch ${details.newBranch} from ${details.previousBranch}.`,
+          },
+        ],
+        details,
+      };
+    },
+  });
+
+  pi.registerTool({
+    name: CHANGE_BRANCH_TOOL_NAME,
+    label: "Change Branch",
+    description: "change_branch switches to an existing local branch in the current repository only. change_branch rejects dirty worktrees and never creates branches, forces checkout, stashes, stages, commits, pushes, or edits files directly.",
+    promptSnippet: "change_branch: switch to an existing local branch with branchName after a clean-worktree preflight",
+    promptGuidelines: [
+      "Use change_branch only when the user explicitly wants to switch to an existing local branch in the current repository.",
+      "Use change_branch with only branchName; change_branch never accepts baseRef, force, stash, discard, create, owner, repo, or path inputs.",
+      "Use change_branch only on a clean working tree; change_branch rejects dirty worktrees and never stages, commits, pushes, stashes, or force-switches.",
+    ],
+    parameters: ChangeBranchParametersSchema,
+    async execute(_toolCallId, params, signal, _onUpdate, ctx) {
+      const details = await changeExistingLocalBranch(pi, ctx, params.branchName, signal);
+      return {
+        content: [{ type: "text", text: formatChangeBranch(details) }],
+        details,
+      };
+    },
+  });
+
+  pi.registerTool({
+    name: PUSH_BRANCH_TOOL_NAME,
+    label: "Push Branch",
+    description: "push_branch pushes the current branch to its configured upstream remote with an explicit refspec. If the current branch has no upstream, push_branch publishes it to origin with --set-upstream. push_branch never commits, stages, or edits files.",
+    promptSnippet: "push_branch: push or publish the current branch only with an explicit target, without committing or staging",
+    promptGuidelines: [
+      "Use push_branch only after commits already exist; push_branch never commits, stages, or edits files.",
+      "Use push_branch to push only the current branch; push_branch does not accept a branchName parameter.",
+      "Use push_branch by itself before pull_request; wait for push_branch to complete before creating a pull_request.",
+    ],
+    parameters: EmptyParametersSchema,
+    async execute(_toolCallId, _params, signal, _onUpdate, ctx) {
+      const details = await pushCurrentBranch(pi, ctx, signal);
+      const action = details.mode === "publish" ? "Published" : "Pushed";
+      return {
+        content: [{ type: "text", text: `${action} current branch ${details.currentBranch}.` }],
+        details,
+      };
+    },
+  });
+
+  pi.registerTool({
+    name: PULL_REQUEST_TOOL_NAME,
+    label: "Pull Request",
+    description: "pull_request creates a GitHub pull request in the resolved current repository. pull_request requires headBranch and baseBranch to exist as safe local branch names, requires headBranch to match the GitHub-visible branch commit, and requires baseBranch to be visible on GitHub. Owner-prefixed refs, owner, and repo are never accepted as inputs.",
+    promptSnippet: "pull_request: create a GitHub pull request in the current repository with all PR fields explicit",
+    promptGuidelines: [
+      "Use pull_request only when the user provides explicit headBranch, baseBranch, title, body, and draft values.",
+      "Use pull_request only with existing local branches for headBranch and baseBranch; headBranch must match the GitHub-visible branch commit.",
+      "Do not call push_branch and pull_request in the same tool batch; call pull_request only after push_branch has completed.",
+      "Use pull_request only for the resolved current repository; pull_request never accepts owner, repo, or owner-prefixed branch refs.",
+      "Use pull_request with GITHUB_TOKEN or GH_TOKEN from the process environment or local .env fallback; pull_request must not expose token values.",
+    ],
+    parameters: PullRequestParametersSchema,
+    async execute(_toolCallId, params, signal, _onUpdate, ctx) {
+      const repoRoot = await getGitRoot(pi, ctx, signal);
+      const rootCtx = { cwd: repoRoot };
+
+      return withRepositoryMutationQueue(repoRoot, async () => {
+        await validateLocalPullRequestBranchName(pi, rootCtx, params.headBranch, "headBranch", signal);
+        await validateLocalPullRequestBranchName(pi, rootCtx, params.baseBranch, "baseBranch", signal);
+        await requireExistingValidatedLocalPullRequestBranch(pi, rootCtx, params.headBranch, "headBranch", signal);
+        await requireExistingValidatedLocalPullRequestBranch(pi, rootCtx, params.baseBranch, "baseBranch", signal);
+        const repository = await resolveGitHubRepository(pi, rootCtx, signal, options.env);
+        const token = (await resolveGitHubToken(options.env, { cwd: repoRoot, signal })).token;
+
+        try {
+          const headBranch = await ensureGitHubBranchExists(repository, params.headBranch, "headBranch", token, {
+            fetchImpl: options.fetchImpl,
+            signal,
+          });
+          await requireGitHubHeadMatchesLocalBranch(pi, rootCtx, params.headBranch, headBranch.commitSha, signal);
+          await ensureGitHubBranchExists(repository, params.baseBranch, "baseBranch", token, {
+            fetchImpl: options.fetchImpl,
+            signal,
+          });
+          const details = await createGitHubPullRequest(repository, params, token, {
+            fetchImpl: options.fetchImpl,
+            signal,
+          });
+          return {
+            content: [{ type: "text", text: formatPullRequest(details) }],
+            details,
+          };
+        } catch (error) {
+          const message = error instanceof Error ? error.message : String(error);
+          throw new Error(redactSecrets(message, [token]));
+        }
+      });
+    },
+  });
+}

package/src/types.ts

@@ -0,0 +1,76 @@
+export interface GitHubRepository {
+  owner: string;
+  repo: string;
+}
+
+export interface CurrentBranchInfo {
+  currentBranch: string | null;
+  detached: boolean;
+}
+
+export interface AheadBehindCount {
+  ahead: number | null;
+  behind: number | null;
+}
+
+export interface BranchStatusDetails {
+  repoRoot: string;
+  currentBranch: string | null;
+  detached: boolean;
+  upstream: string | null;
+  hasChanges: boolean;
+  ahead: number | null;
+  behind: number | null;
+  warnings?: string[];
+  githubRepository?: GitHubRepository;
+}
+
+export interface CreateBranchDetails {
+  repoRoot: string;
+  previousBranch: string;
+  newBranch: string;
+}
+
+export interface ChangeBranchDetails {
+  repoRoot: string;
+  previousBranch: string | null;
+  previousDetached: boolean;
+  currentBranch: string;
+  hasChangesBeforeSwitch: false;
+}
+
+export interface PushBranchDetails {
+  repoRoot: string;
+  currentBranch: string;
+  upstream: string | null;
+  mode: "push" | "publish";
+  remote: string;
+  remoteRef: string;
+  refspec: string;
+  output: string;
+}
+
+export interface PullRequestDetails {
+  repository: GitHubRepository;
+  number: number;
+  url: string;
+  state: string;
+  head: string;
+  base: string;
+  draft: boolean;
+}
+
+export interface PullRequestInput {
+  headBranch: string;
+  baseBranch: string;
+  title: string;
+  body: string;
+  draft: boolean;
+}
+
+export interface GitExecResult {
+  stdout: string;
+  stderr: string;
+  code: number;
+  killed: boolean;
+}

package/src/ui/branchme-panel.ts

@@ -0,0 +1,345 @@
+import { Key, matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+
+export interface BranchMePanelData {
+  currentBranch: string | null;
+  detached: boolean;
+  githubRepository: string | null;
+  tokenSource: string | null;
+  statusNote?: string;
+  repositoryWarning?: string;
+  tokenWarning?: string;
+}
+
+interface PanelTheme {
+  fg(color: string, value: string): string;
+  bold(value: string): string;
+}
+
+type PanelCell =
+  | string
+  | {
+      text: string;
+      role?: string;
+      bold?: boolean;
+      preserveLeading?: boolean;
+    };
+
+export type BranchMePanelSection = "status" | "workflow";
+
+const NARROW_MIN_WIDTH = 24;
+const WIDE_MIN_WIDTH = 72;
+const MAX_PANEL_WIDTH = 96;
+const MAX_PANEL_HEIGHT = 14;
+const BODY_HEIGHT = 7;
+const PANEL_SECTIONS: BranchMePanelSection[] = ["status", "workflow"];
+const ANSI_RESET = /\u001b\[0m/gu;
+
+function truncateVisible(value: string, width: number, ellipsis = "…", pad = false): string {
+  const truncated = truncateToWidth(value, width, ellipsis, pad);
+  return value.includes("\u001b") ? truncated : truncated.replace(ANSI_RESET, "");
+}
+
+function sanitize(value: string): string {
+  return value.replace(/[\u0000-\u001f\u007f\u009b]/gu, " ").replace(/\s+/gu, " ").trim();
+}
+
+function clip(value: string, width: number): string {
+  if (width <= 0) return "";
+  return truncateVisible(sanitize(value), width);
+}
+
+function pad(value: string, width: number): string {
+  return truncateVisible(sanitize(value), Math.max(0, width), "…", true);
+}
+
+function sanitizeLayout(value: string): string {
+  return value.replace(/[\u0000-\u001f\u007f\u009b]/gu, " ");
+}
+
+function clipLayout(value: string, width: number): string {
+  if (width <= 0) return "";
+  return truncateVisible(sanitizeLayout(value), width);
+}
+
+function padLayout(value: string, width: number): string {
+  return truncateVisible(sanitizeLayout(value), Math.max(0, width), "…", true);
+}
+
+function style(theme: PanelTheme | undefined, role: string, value: string): string {
+  return theme ? theme.fg(role, value) : value;
+}
+
+function formatCell(cell: PanelCell, width: number, theme?: PanelTheme): string {
+  const text = typeof cell === "string" ? cell : cell.text;
+  const rendered = typeof cell === "string" || !cell.preserveLeading ? pad(text, width) : padLayout(text, width);
+  if (typeof cell === "string" || !theme || !cell.role) return rendered;
+
+  const styled = cell.bold ? theme.bold(rendered) : rendered;
+  return theme.fg(cell.role, styled);
+}
+
+function layoutCell(text: string, role?: string, bold = false): PanelCell {
+  return { text, role, bold, preserveLeading: true };
+}
+
+function heading(text: string): PanelCell {
+  return layoutCell(` ${text}`, "accent", true);
+}
+
+function category(text: string, selected: boolean): PanelCell {
+  return {
+    text: `${selected ? "▶" : " "}  ${text}`,
+    role: selected ? "accent" : "dim",
+    bold: selected,
+    preserveLeading: true,
+  };
+}
+
+function border(theme: PanelTheme | undefined, value: string): string {
+  return style(theme, "accent", value);
+}
+
+function horizontal(width: number, left: string, fill: string, right: string, theme?: PanelTheme): string {
+  if (width <= 0) return "";
+  if (width === 1) return border(theme, fill);
+  return border(theme, `${left}${fill.repeat(Math.max(0, width - 2))}${right}`);
+}
+
+function titleBorder(width: number, scope: string, theme?: PanelTheme): string {
+  if (width < 3) return horizontal(width, "╭", "─", "╮", theme);
+
+  const title = " BranchMe ";
+  const scopeText = ` ${scope} `;
+  const innerWidth = width - 2;
+  const showScope = title.length + scopeText.length <= innerWidth;
+  const visibleTitle = title.length <= innerWidth ? title : " BranchMe";
+  const visibleScope = showScope ? scopeText : "";
+  const fillWidth = Math.max(0, innerWidth - visibleTitle.length - visibleScope.length);
+  return border(theme, `╭${visibleTitle}${"─".repeat(fillWidth)}${visibleScope}╮`);
+}
+
+function framedLine(content: PanelCell, width: number, theme?: PanelTheme): string {
+  const innerWidth = Math.max(0, width - 2);
+  return `${border(theme, "│")}${formatCell(content, innerWidth, theme)}${border(theme, "│")}`;
+}
+
+function panelWarnings(data: BranchMePanelData): string[] {
+  return [data.statusNote, data.repositoryWarning, data.tokenWarning].filter((warning): warning is string => Boolean(warning));
+}
+
+function firstPanelWarning(data: BranchMePanelData): string | null {
+  return panelWarnings(data)[0] ?? null;
+}
+
+function statusValue(data: BranchMePanelData): { branch: string; repository: string; token: string } {
+  return {
+    branch: data.detached ? "detached HEAD" : data.currentBranch ?? "unknown",
+    repository: data.repositoryWarning ? `warning: ${data.repositoryWarning}` : data.githubRepository ?? "not resolved",
+    token: data.tokenWarning ? `warning: ${data.tokenWarning}` : getTokenLabel(data.tokenSource),
+  };
+}
+
+function statusDetailRow(label: string, value: string): PanelCell {
+  return layoutCell(`  ${label.padEnd(19, " ")}${sanitize(value)}`);
+}
+
+function workflowDetailRow(tool: string, description: string): PanelCell {
+  return layoutCell(`  ${tool.padEnd(15, " ")}-> ${sanitize(description)}`);
+}
+
+function sectionTitle(section: BranchMePanelSection): string {
+  switch (section) {
+    case "status":
+      return "STATUS";
+    case "workflow":
+      return "WORKFLOW";
+  }
+}
+
+function sectionLabel(section: BranchMePanelSection): string {
+  const title = sectionTitle(section).toLowerCase();
+  return title.charAt(0).toUpperCase() + title.slice(1);
+}
+
+function normalizeSection(section: BranchMePanelSection | undefined): BranchMePanelSection {
+  return section && PANEL_SECTIONS.includes(section) ? section : "status";
+}
+
+function sectionIndex(section: BranchMePanelSection): number {
+  return PANEL_SECTIONS.indexOf(section);
+}
+
+function sectionFooter(section: BranchMePanelSection, data: BranchMePanelData): string {
+  const warning = firstPanelWarning(data);
+  if (warning) return `warning • ${warning}`;
+
+  switch (section) {
+    case "status":
+      return "status • current repository only • tools perform actions";
+    case "workflow":
+      return "workflow • inspect → change/create → push → PR";
+  }
+}
+
+function sectionRows(section: BranchMePanelSection, data: BranchMePanelData): PanelCell[] {
+  const values = statusValue(data);
+
+  switch (section) {
+    case "status":
+      return [
+        heading("STATUS"),
+        statusDetailRow("Current branch:", values.branch),
+        statusDetailRow("GitHub repository:", values.repository),
+        statusDetailRow("GitHub token:", values.token),
+      ];
+    case "workflow":
+      return [
+        heading("WORKFLOW"),
+        workflowDetailRow("branch_status", "inspect"),
+        workflowDetailRow("change_branch", "existing local"),
+        workflowDetailRow("create_branch", "from HEAD"),
+        workflowDetailRow("push_branch", "current branch"),
+        workflowDetailRow("pull_request", "after push"),
+      ];
+  }
+}
+
+function fitLines(lines: string[], width: number): string[] {
+  return lines.map((line) => truncateVisible(line, Math.max(0, width), ""));
+}
+
+function renderTiny(data: BranchMePanelData, width: number): string[] {
+  const values = statusValue(data);
+  const warning = firstPanelWarning(data);
+  return fitLines(
+    [
+      clip("BranchMe", width),
+      clip(`branch: ${values.branch}`, width),
+      clip(`repo: ${values.repository}`, width),
+      clip(warning ? `warning: ${warning}` : "q quit", width),
+    ],
+    width,
+  );
+}
+
+function renderNarrow(data: BranchMePanelData, width: number, selectedSection: BranchMePanelSection, theme?: PanelTheme): string[] {
+  const section = normalizeSection(selectedSection);
+  const rows = sectionRows(section, data).slice(0, BODY_HEIGHT);
+  const counter = `${sectionIndex(section) + 1}/${PANEL_SECTIONS.length}`;
+  const lines = [
+    titleBorder(width, sectionLabel(section), theme),
+    framedLine("current repo only • informational", width, theme),
+    framedLine(layoutCell(" ↑↓ section • q quit • /branchme help"), width, theme),
+    horizontal(width, "├", "─", "┤", theme),
+  ];
+
+  for (let index = 0; index < BODY_HEIGHT; index += 1) {
+    const row = rows[index] ?? "";
+    lines.push(framedLine(row, width, theme));
+  }
+
+  lines.push(
+    horizontal(width, "├", "─", "┤", theme),
+    framedLine(layoutCell(` ${counter} • ${sectionFooter(section, data)}`), width, theme),
+    horizontal(width, "╰", "─", "╯", theme),
+  );
+
+  return fitLines(lines.slice(0, MAX_PANEL_HEIGHT), width);
+}
+
+function paneSeparator(width: number, leftPaneWidth: number, rightPaneWidth: number, middle: string, theme?: PanelTheme): string {
+  return border(theme, `├${"─".repeat(leftPaneWidth)}${middle}${"─".repeat(rightPaneWidth)}┤`);
+}
+
+function paneLine(left: PanelCell, right: PanelCell, leftPaneWidth: number, rightPaneWidth: number, theme?: PanelTheme): string {
+  return `${border(theme, "│")}${formatCell(left, leftPaneWidth, theme)}${border(theme, "│")}${formatCell(right, rightPaneWidth, theme)}${border(theme, "│")}`;
+}
+
+function renderWide(data: BranchMePanelData, width: number, selectedSection: BranchMePanelSection, theme?: PanelTheme): string[] {
+  const section = normalizeSection(selectedSection);
+  const leftPaneWidth = Math.min(22, Math.max(16, Math.floor(width * 0.27)));
+  const rightPaneWidth = Math.max(10, width - leftPaneWidth - 3);
+  const rightRows = sectionRows(section, data).slice(0, BODY_HEIGHT);
+  const leftRows = PANEL_SECTIONS.map((candidate) => category(sectionLabel(candidate), candidate === section));
+
+  const lines = [
+    titleBorder(width, sectionLabel(section), theme),
+    framedLine(layoutCell(" ↑↓ section • q quit • /branchme help"), width, theme),
+    paneSeparator(width, leftPaneWidth, rightPaneWidth, "┬", theme),
+  ];
+
+  for (let index = 0; index < BODY_HEIGHT; index += 1) {
+    lines.push(paneLine(leftRows[index] ?? "", rightRows[index] ?? "", leftPaneWidth, rightPaneWidth, theme));
+  }
+
+  lines.push(
+    paneSeparator(width, leftPaneWidth, rightPaneWidth, "┴", theme),
+    framedLine(layoutCell(` ${sectionIndex(section) + 1}/${PANEL_SECTIONS.length} • ${sectionFooter(section, data)}`), width, theme),
+    horizontal(width, "╰", "─", "╯", theme),
+  );
+
+  return fitLines(lines.slice(0, MAX_PANEL_HEIGHT), width);
+}
+
+export function getTokenLabel(tokenSource: string | null): string {
+  return tokenSource ? "present" : "not set";
+}
+
+export function renderBranchMePanelLines(
+  data: BranchMePanelData,
+  width: number,
+  theme?: PanelTheme,
+  selectedSection: BranchMePanelSection = "status",
+): string[] {
+  const normalizedWidth = Math.max(0, width);
+  if (normalizedWidth < NARROW_MIN_WIDTH) return renderTiny(data, normalizedWidth);
+
+  const panelWidth = Math.min(normalizedWidth, MAX_PANEL_WIDTH);
+  const section = normalizeSection(selectedSection);
+  if (panelWidth >= WIDE_MIN_WIDTH) return renderWide(data, panelWidth, section, theme);
+  return renderNarrow(data, panelWidth, section, theme);
+}
+
+export class BranchMePanel {
+  private readonly data: BranchMePanelData;
+  private readonly theme: PanelTheme | undefined;
+  private readonly onClose: () => void;
+  private readonly onChange: () => void;
+  private selectedSection: BranchMePanelSection = "status";
+
+  constructor(data: BranchMePanelData, theme: PanelTheme | undefined, onClose: () => void, onChange: () => void = () => {}) {
+    this.data = data;
+    this.theme = theme;
+    this.onClose = onClose;
+    this.onChange = onChange;
+  }
+
+  render(width: number): string[] {
+    return renderBranchMePanelLines(this.data, width, this.theme, this.selectedSection);
+  }
+
+  handleInput(data: string): void {
+    if (data === "q" || data === "Q" || matchesKey(data, Key.escape) || matchesKey(data, Key.enter)) {
+      this.onClose();
+      return;
+    }
+
+    if (data === "k" || data === "K" || matchesKey(data, Key.up)) {
+      this.moveSelection(-1);
+      return;
+    }
+
+    if (data === "j" || data === "J" || matchesKey(data, Key.down) || matchesKey(data, Key.tab)) {
+      this.moveSelection(1);
+    }
+  }
+
+  invalidate(): void {}
+
+  private moveSelection(delta: number): void {
+    const currentIndex = sectionIndex(this.selectedSection);
+    const nextIndex = (currentIndex + delta + PANEL_SECTIONS.length) % PANEL_SECTIONS.length;
+    this.selectedSection = PANEL_SECTIONS[nextIndex] ?? "status";
+    this.onChange();
+  }
+}