@ebowwa/coder 0.2.1 → 0.7.64

package/dist/interfaces/ui/terminal/shared/status-line.js

@@ -0,0 +1,267 @@
+/**
+ * Status Line Component for Coder CLI
+ *
+ * Displays:
+ * - Context left until auto-compact (%)
+ * - Token count
+ * - Permission mode (with cycle hint)
+ * - Version number
+ */
+import chalk from "chalk";
+import { getContextWindow as getContextWindowBase, getModelDisplayName as getModelDisplayNameBase, MODEL_DISPLAY_NAMES, } from "../../../../core/models.js";
+// ============================================
+// VERSION INFO
+// ============================================
+export const VERSION = "0.2.0";
+export const BUILD_TIME = new Date().toISOString();
+// ============================================
+// PERMISSION MODE DISPLAY
+// ============================================
+const permissionModeDisplay = {
+    default: { symbol: "○", label: "default", color: "gray" },
+    acceptEdits: { symbol: "●", label: "accept edits", color: "green" },
+    bypassPermissions: { symbol: "⏵⏵", label: "bypass permissions", color: "yellow" },
+    plan: { symbol: "◐", label: "plan", color: "cyan" },
+    dontAsk: { symbol: "■", label: "don't ask", color: "red" },
+    interactive: { symbol: "◉", label: "interactive", color: "blue" },
+};
+/**
+ * Get display info for a permission mode
+ */
+export function getPermissionModeDisplay(mode) {
+    return permissionModeDisplay[mode] || permissionModeDisplay.default;
+}
+/**
+ * Format permission mode with cycle hint
+ */
+export function formatPermissionMode(mode) {
+    const display = getPermissionModeDisplay(mode);
+    const colorFn = chalk[display.color] ?? chalk.gray;
+    // Show cycle hint only for certain modes
+    const cycleHint = mode === "bypassPermissions" || mode === "acceptEdits"
+        ? chalk.dim(" (shift+tab to cycle)")
+        : "";
+    return `${colorFn(display.symbol)} ${colorFn(display.label + " on")}${cycleHint}`;
+}
+/**
+ * Format permission mode without cycle hint (simplified)
+ */
+function formatPermissionModeSimple(mode) {
+    const display = getPermissionModeDisplay(mode);
+    const colorFn = chalk[display.color] ?? chalk.gray;
+    return `${colorFn(display.symbol)} ${colorFn(display.label)}`;
+}
+// ============================================
+// CONTEXT CALCULATIONS
+// ============================================
+/** Context window sizes by model */
+const modelContextWindows = {
+    "claude-opus-4-6": 200_000,
+    "claude-sonnet-4-6": 200_000,
+    "claude-haiku-4-5-20251001": 200_000,
+    "claude-haiku-4-5": 200_000,
+    "claude-opus-4-5": 200_000,
+    "claude-sonnet-4-5": 200_000,
+    "claude-3-5-sonnet": 200_000,
+    "claude-3-opus": 200_000,
+    "claude-3-sonnet": 200_000,
+    "claude-3-haiku": 200_000,
+    "glm-5": 200_000, // GLM-5: 200K context, 128K max output
+};
+/** Default context window if model not found */
+const DEFAULT_CONTEXT_WINDOW = 200_000;
+/** Buffer percentage for auto-compact (compact when < 8% remaining) */
+const AUTO_COMPACT_THRESHOLD = 0.08;
+/**
+ * Get the context window size for a model
+ */
+export function getContextWindow(model) {
+    // Check for exact match first
+    if (modelContextWindows[model]) {
+        return modelContextWindows[model];
+    }
+    // Check for partial matches (e.g., "opus" in model name)
+    const modelLower = model.toLowerCase();
+    for (const [key, value] of Object.entries(modelContextWindows)) {
+        if (modelLower.includes(key.split("-")[1] ?? "")) {
+            return value;
+        }
+    }
+    return DEFAULT_CONTEXT_WINDOW;
+}
+/**
+ * Calculate context information
+ */
+export function calculateContextInfo(tokensUsed, model) {
+    const maxTokens = getContextWindow(model);
+    const remaining = maxTokens - tokensUsed;
+    const percentRemaining = Math.max(0, Math.min(100, (remaining / maxTokens) * 100));
+    return {
+        percentRemaining: Math.round(percentRemaining * 10) / 10,
+        tokenDisplay: formatTokenCount(tokensUsed),
+        isLow: percentRemaining < 15,
+        isCritical: percentRemaining < 8,
+    };
+}
+/**
+ * Format token count for display
+ */
+export function formatTokenCount(tokens) {
+    if (tokens < 1000) {
+        return `${tokens} tokens`;
+    }
+    else if (tokens < 1_000_000) {
+        return `${(tokens / 1000).toFixed(1)}k tokens`;
+    }
+    else {
+        return `${(tokens / 1_000_000).toFixed(2)}M tokens`;
+    }
+}
+/**
+ * Format context remaining percentage
+ */
+export function formatContextPercent(percentRemaining) {
+    if (percentRemaining < 5) {
+        return chalk.red(`${percentRemaining.toFixed(1)}%`);
+    }
+    else if (percentRemaining < 15) {
+        return chalk.yellow(`${percentRemaining.toFixed(1)}%`);
+    }
+    else if (percentRemaining < 30) {
+        return chalk.dim(`${percentRemaining.toFixed(1)}%`);
+    }
+    return chalk.dim(`${percentRemaining.toFixed(1)}%`);
+}
+// ============================================
+// STATUS LINE RENDERING
+// ============================================
+/**
+ * Render the full status line
+ * Simplified format: "Context left until auto-compact: 8%, 0 tokens, ○ default"
+ */
+export function renderStatusLine(options) {
+    const { tokensUsed, model, permissionMode, isLoading = false, } = options;
+    const contextInfo = calculateContextInfo(tokensUsed, model);
+    // Build status parts
+    const parts = [];
+    // 1. Context left until auto-compact (with color based on remaining %)
+    const contextValue = contextInfo.isCritical
+        ? chalk.red(`${contextInfo.percentRemaining.toFixed(0)}%`)
+        : contextInfo.isLow
+            ? chalk.yellow(`${contextInfo.percentRemaining.toFixed(0)}%`)
+            : `${contextInfo.percentRemaining.toFixed(0)}%`;
+    parts.push(`Context left until auto-compact: ${contextValue}`);
+    parts.push(tokensUsed === 0 ? "0 tokens" : `${tokensUsed} tokens`);
+    // 2. Add permission mode
+    parts.push(formatPermissionMode(permissionMode));
+    // Join with comma-space
+    let statusLine = parts.join(", ");
+    // Add loading indicator
+    if (isLoading) {
+        statusLine = `${chalk.cyan("⠋")} ${statusLine}`;
+    }
+    return statusLine;
+}
+/**
+ * Render a compact status line for narrow displays
+ */
+export function renderCompactStatusLine(options) {
+    const { tokensUsed, model, isLoading = false } = options;
+    const contextInfo = calculateContextInfo(tokensUsed, model);
+    // Compact: "8% | 0 tokens"
+    const parts = [
+        formatContextPercent(contextInfo.percentRemaining),
+        contextInfo.tokenDisplay.split(" ")[0] ?? "0", // Just the number
+    ];
+    let line = parts.join(chalk.dim(" | "));
+    if (isLoading) {
+        line = `${chalk.cyan("⠋")} ${line}`;
+    }
+    return line;
+}
+/**
+ * Render minimal status (just context percentage)
+ */
+export function renderMinimalStatusLine(permissionMode) {
+    // Just return empty or a simple indicator - permission mode no longer shown
+    return "";
+}
+// ============================================
+// AUTO-COMPACT WARNING
+// ============================================
+/**
+ * Check if auto-compact warning should be shown
+ */
+export function shouldShowAutoCompactWarning(contextInfo) {
+    return contextInfo.percentRemaining < 15;
+}
+/**
+ * Render auto-compact warning message
+ */
+export function renderAutoCompactWarning(contextInfo) {
+    if (contextInfo.isCritical) {
+        return chalk.red(`\n⚠ Context critical: ${contextInfo.percentRemaining.toFixed(1)}% remaining. Auto-compact imminent.`);
+    }
+    else if (contextInfo.isLow) {
+        return chalk.yellow(`\n⚠ Context low: ${contextInfo.percentRemaining.toFixed(1)}% remaining.`);
+    }
+    return "";
+}
+// ============================================
+// FOOTER STATUS
+// ============================================
+/**
+ * Render footer status line (shown at bottom of screen)
+ */
+export function renderFooterStatus(options) {
+    const { permissionMode, tokensUsed, model, isLoading = false } = options;
+    const contextInfo = calculateContextInfo(tokensUsed, model);
+    const permDisplay = getPermissionModeDisplay(permissionMode);
+    const colorFn = chalk[permDisplay.color] ?? chalk.gray;
+    // Build compact footer
+    const contextStr = contextInfo.isCritical
+        ? chalk.red(`${contextInfo.percentRemaining.toFixed(0)}%`)
+        : contextInfo.isLow
+            ? chalk.yellow(`${contextInfo.percentRemaining.toFixed(0)}%`)
+            : chalk.dim(`${contextInfo.percentRemaining.toFixed(0)}%`);
+    const permStr = `${colorFn(permDisplay.symbol)} ${permDisplay.label}`;
+    const parts = [
+        `Context: ${contextStr}`,
+        permStr,
+    ];
+    let footer = parts.join(chalk.dim(" | "));
+    if (isLoading) {
+        footer = `${chalk.cyan("⠋")} ${footer}`;
+    }
+    return footer;
+}
+// ============================================
+// MODEL DISPLAY
+// ============================================
+/**
+ * Get display name for a model
+ * Re-exports from models.ts for backwards compatibility
+ */
+export function getModelDisplayName(model) {
+    return getModelDisplayNameBase(model);
+}
+// ============================================
+// EXPORTS
+// ============================================
+export default {
+    VERSION,
+    BUILD_TIME,
+    renderStatusLine,
+    renderCompactStatusLine,
+    renderMinimalStatusLine,
+    renderFooterStatus,
+    renderAutoCompactWarning,
+    calculateContextInfo,
+    formatPermissionMode,
+    formatTokenCount,
+    formatContextPercent,
+    getContextWindow,
+    shouldShowAutoCompactWarning,
+    getModelDisplayName,
+    getPermissionModeDisplay,
+};

package/dist/interfaces/ui/terminal/shared/system-prompt.d.ts

@@ -0,0 +1,38 @@
+/**
+ * System Prompt Building
+ * Shared between CLI and TUI modes
+ */
+export interface GitStatusInfo {
+    branch: string;
+    ahead: number;
+    behind: number;
+    staged: string[];
+    unstaged: string[];
+    untracked: string[];
+}
+/**
+ * Build the default system prompt with optional git status and CLAUDE.md content
+ */
+export declare function buildDefaultSystemPrompt(workingDirectory: string, options?: {
+    gitStatus?: GitStatusInfo | null;
+    teammateMode?: boolean;
+    agentId?: string;
+    agentName?: string;
+    teamName?: string;
+}): Promise<string>;
+/**
+ * Get git status for the working directory
+ */
+export declare function fetchGitStatus(workingDirectory: string): Promise<GitStatusInfo | null>;
+/**
+ * Build complete system prompt with all options
+ */
+export declare function buildCompleteSystemPrompt(workingDirectory: string, options?: {
+    systemPrompt?: string;
+    appendSystemPrompt?: string;
+    teammateMode?: boolean;
+    agentId?: string;
+    agentName?: string;
+    teamName?: string;
+}): Promise<string>;
+//# sourceMappingURL=system-prompt.d.ts.map

package/dist/interfaces/ui/terminal/shared/system-prompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-prompt.d.ts","sourceRoot":"","sources":["../../../../../packages/src/interfaces/ui/terminal/shared/system-prompt.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAMD;;GAEG;AACH,wBAAsB,wBAAwB,CAC5C,gBAAgB,EAAE,MAAM,EACxB,OAAO,CAAC,EAAE;IACR,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GACA,OAAO,CAAC,MAAM,CAAC,CAqDjB;AAED;;GAEG;AACH,wBAAsB,cAAc,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAO5F;AAED;;GAEG;AACH,wBAAsB,yBAAyB,CAC7C,gBAAgB,EAAE,MAAM,EACxB,OAAO,CAAC,EAAE;IACR,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GACA,OAAO,CAAC,MAAM,CAAC,CA4BjB"}

package/dist/interfaces/ui/terminal/shared/system-prompt.js

@@ -0,0 +1,102 @@
+/**
+ * System Prompt Building
+ * Shared between CLI and TUI modes
+ */
+import { loadClaudeMd, buildClaudeMdPrompt } from "../../../../core/claude-md.js";
+import { getGitStatus } from "../../../../core/git-status.js";
+// ============================================
+// SYSTEM PROMPT BUILDER
+// ============================================
+/**
+ * Build the default system prompt with optional git status and CLAUDE.md content
+ */
+export async function buildDefaultSystemPrompt(workingDirectory, options) {
+    let prompt = `You are Coder, an AI coding assistant.
+
+You help users with software engineering tasks:
+- Reading, writing, and editing code
+- Running commands and scripts
+- Searching and exploring codebases
+- Debugging and fixing issues
+
+Guidelines:
+1. Be helpful, direct, and thorough
+2. Explain your reasoning when asked
+3. Follow user preferences and project conventions
+4. Use tools effectively to accomplish tasks
+5. Ask clarifying questions when needed
+
+Available tools:
+- Read: Read file contents
+- Write: Write new files
+- Edit: Make precise edits to files
+- Bash: Execute shell commands
+- Glob: Find files by pattern
+- Grep: Search file contents
+
+Working directory: ${workingDirectory}`;
+    // Add git status information if available
+    if (options?.gitStatus) {
+        const { branch, ahead, behind, staged, unstaged, untracked } = options.gitStatus;
+        prompt += `\n\nGit Status:`;
+        prompt += `\nBranch: ${branch}`;
+        if (ahead > 0 || behind > 0) {
+            prompt += ` (${ahead} ahead, ${behind} behind)`;
+        }
+        if (staged.length > 0 || unstaged.length > 0 || untracked.length > 0) {
+            prompt += `\nChanges: ${staged.length} staged, ${unstaged.length} unstaged, ${untracked.length} untracked`;
+        }
+    }
+    // Load CLAUDE.md files
+    const claudeMdContent = await buildClaudeMdPrompt();
+    if (claudeMdContent) {
+        prompt += `\n\n${claudeMdContent}`;
+    }
+    // Teammate mode adjustments
+    if (options?.teammateMode && options.teamName) {
+        prompt += `\n\nYou are running as a teammate agent in the "${options.teamName}" team.`;
+        prompt += `\nAgent ID: ${options.agentId}`;
+        prompt += `\nAgent Name: ${options.agentName}`;
+    }
+    return prompt;
+}
+/**
+ * Get git status for the working directory
+ */
+export async function fetchGitStatus(workingDirectory) {
+    try {
+        const status = await getGitStatus(workingDirectory);
+        return status;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Build complete system prompt with all options
+ */
+export async function buildCompleteSystemPrompt(workingDirectory, options) {
+    // Use custom system prompt if provided
+    if (options?.systemPrompt) {
+        let prompt = options.systemPrompt;
+        if (options.appendSystemPrompt) {
+            prompt += `\n\n${options.appendSystemPrompt}`;
+        }
+        return prompt;
+    }
+    // Get git status
+    const gitStatus = await fetchGitStatus(workingDirectory);
+    // Build default prompt
+    let prompt = await buildDefaultSystemPrompt(workingDirectory, {
+        gitStatus,
+        teammateMode: options?.teammateMode,
+        agentId: options?.agentId,
+        agentName: options?.agentName,
+        teamName: options?.teamName,
+    });
+    // Append additional prompt if provided
+    if (options?.appendSystemPrompt) {
+        prompt += `\n\n${options.appendSystemPrompt}`;
+    }
+    return prompt;
+}

package/dist/interfaces/ui/terminal/tui/HelpPanel.d.ts

@@ -0,0 +1,39 @@
+/** @jsx React.createElement */
+/**
+ * Help Panel Component
+ * Displays contextual help with tabbed sections
+ */
+import React from "react";
+/**
+ * Help section definition
+ */
+export interface HelpSection {
+    id: string;
+    title: string;
+    content: string;
+}
+/**
+ * Help panel props
+ */
+export interface HelpPanelProps {
+    activeSection?: string;
+    onClose?: () => void;
+}
+/**
+ * Help Panel Component
+ */
+export declare function HelpPanel({ activeSection, onClose }: HelpPanelProps): React.JSX.Element | null;
+/**
+ * Get all help sections
+ */
+export declare function getHelpSections(): HelpSection[];
+/**
+ * Get help text for a specific section (for non-interactive display)
+ */
+export declare function getHelpText(section?: string): string;
+/**
+ * Get compact help text (single line per command)
+ */
+export declare function getCompactHelpText(): string;
+export default HelpPanel;
+//# sourceMappingURL=HelpPanel.d.ts.map

package/dist/interfaces/ui/terminal/tui/HelpPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpPanel.d.ts","sourceRoot":"","sources":["../../../../../packages/src/interfaces/ui/terminal/tui/HelpPanel.tsx"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B;;;GAGG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAgJD;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,aAAyB,EAAE,OAAO,EAAE,EAAE,cAAc,4BAwD/E;AAED;;GAEG;AACH,wBAAgB,eAAe,IAAI,WAAW,EAAE,CAE/C;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAQpD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAM3C;AAED,eAAe,SAAS,CAAC"}

package/dist/interfaces/ui/terminal/tui/HelpPanel.js

@@ -0,0 +1,215 @@
+/** @jsx React.createElement */
+/**
+ * Help Panel Component
+ * Displays contextual help with tabbed sections
+ */
+import React, { useState, useEffect } from "react";
+import { Box, Text, useStdout } from "ink";
+import chalk from "chalk";
+/**
+ * General help section - basic usage
+ */
+const GENERAL_HELP = `
+${chalk.bold.cyan("Claude understands your codebase, makes edits with your permission,")}
+${chalk.bold.cyan("and executes commands — right from your terminal.")}
+
+${chalk.gray("─").repeat(60)}
+
+${chalk.yellow("Input Features:")}
+  ${chalk.green("@")} <path>       ${chalk.gray("Reference files or directories")}
+  ${chalk.green("&")}              ${chalk.gray("Run command in background")}
+  ${chalk.green("#")} <memory>     ${chalk.gray("Add to persistent memory")}
+
+${chalk.yellow("Keyboard Shortcuts:")}
+  ${chalk.cyan("ctrl + o")}        ${chalk.gray("Toggle verbose output")}
+  ${chalk.cyan("meta + o")}        ${chalk.gray("Toggle fast mode")}
+  ${chalk.cyan("shift + ⏎")}       ${chalk.gray("Insert newline")}
+  ${chalk.cyan("ctrl + c")}        ${chalk.gray("Exit session")}
+  ${chalk.cyan("ctrl + b")}        ${chalk.gray("Background task menu")}
+
+${chalk.gray("─").repeat(60)}
+
+${chalk.dim("For more help:")} ${chalk.blue.underline("https://code.claude.com/docs/en/overview")}
+`;
+/**
+ * Commands help section
+ */
+const COMMANDS_HELP = `
+${chalk.bold.yellow("Session Commands:")}
+  ${chalk.green("/help")}, ${chalk.green("/?")}     Show this help
+  ${chalk.green("/exit")}, ${chalk.green("/q")}     Exit the session
+  ${chalk.green("/new")}              Start a fresh session
+  ${chalk.green("/clear")}            Clear conversation history
+  ${chalk.green("/status")}           Show session status
+  ${chalk.green("/cost")}             Show total cost
+
+${chalk.bold.yellow("Model Commands:")}
+  ${chalk.green("/model")} <name>     Switch model
+  ${chalk.green("/models")}           List available models
+  ${chalk.green("/tools")}            List available tools
+
+${chalk.bold.yellow("Context Commands:")}
+  ${chalk.green("/compact")}          Force context compaction
+  ${chalk.green("/export")} [fmt]     Export session (json/md/jsonl)
+
+${chalk.bold.yellow("Session Management:")}
+  ${chalk.green("/resume")} [id]      Resume session
+  ${chalk.green("/sessions")}         List recent sessions
+`;
+/**
+ * Checkpoint commands help section
+ */
+const CHECKPOINTS_HELP = `
+${chalk.bold.magenta("Checkpoint Commands:")}
+${chalk.gray("Save and restore conversation + code state")}
+
+  ${chalk.green("/checkpoint")} <label>   Save checkpoint
+  ${chalk.green("/checkpoints")}          List saved checkpoints
+  ${chalk.green("/restore")} <id>         Restore checkpoint
+  ${chalk.green("/restore-chat")} <id>    Restore chat only
+  ${chalk.green("/undo")}                 Go back to previous state
+  ${chalk.green("/redo")}                 Go forward
+  ${chalk.green("/cps-status")}           Navigation status
+
+${chalk.gray("─").repeat(60)}
+
+${chalk.dim("Checkpoints capture:")}
+  ${chalk.gray("• Conversation history")}
+  ${chalk.gray("• File snapshots")}
+  ${chalk.gray("• Git state")}
+  ${chalk.gray("• Cost/tokens used")}
+`;
+/**
+ * Custom commands help section
+ */
+const CUSTOM_HELP = `
+${chalk.bold.blue("Custom Commands & Skills:")}
+${chalk.gray("Extend Coder with your own commands")}
+
+${chalk.yellow("Skills:")}
+  ${chalk.green("/commit")}            Create a git commit
+  ${chalk.green("/review-pr")}         Review a pull request
+  ${chalk.green("/git")}               Git workflow helper
+  ${chalk.green("/mcp-builder")}       Build MCP servers
+
+${chalk.yellow("Configuration:")}
+  ${chalk.cyan("~/.claude/CLAUDE.md")}     ${chalk.gray("Global instructions")}
+  ${chalk.cyan(".claude/CLAUDE.md")}       ${chalk.gray("Project instructions")}
+  ${chalk.cyan("~/.claude.json")}          ${chalk.gray("MCP servers config")}
+  ${chalk.cyan("~/.claude/settings.json")} ${chalk.gray("Hooks & permissions")}
+  ${chalk.cyan("~/.claude/keybindings.json")} ${chalk.gray("Custom keybindings")}
+
+${chalk.gray("─").repeat(60)}
+
+${chalk.dim("Create custom skills in:")} ${chalk.cyan("~/.claude/skills/")}
+`;
+/**
+ * Keybindings help section
+ */
+const KEYBINDINGS_HELP = `
+${chalk.bold.green("Keyboard Shortcuts")}
+
+${chalk.yellow("Input Editing:")}
+  ${chalk.cyan("← →")}                 Move cursor
+  ${chalk.cyan("Home / End")}          Jump to start/end
+  ${chalk.cyan("ctrl + a")}            Jump to start
+  ${chalk.cyan("ctrl + e")}            Jump to end
+  ${chalk.cyan("ctrl + u")}            Clear line
+  ${chalk.cyan("ctrl + w")}            Delete word
+
+${chalk.yellow("Navigation:")}
+  ${chalk.cyan("Page Up / Down")}      Scroll messages
+  ${chalk.cyan("shift + ↑ ↓")}         Scroll one line
+  ${chalk.cyan("tab")}                 Cycle help sections
+  ${chalk.cyan("← →")}                 Cycle sections (in help)
+
+${chalk.yellow("Session:")}
+  ${chalk.cyan("ctrl + c")}            Exit session
+  ${chalk.cyan("ctrl + d")}            Exit (alternative)
+  ${chalk.cyan("ctrl + b")}            Background tasks
+
+${chalk.gray("─").repeat(60)}
+
+${chalk.dim("Customize:")} ${chalk.green("/keybindings")}
+`;
+/**
+ * All help sections
+ */
+const HELP_SECTIONS = [
+    { id: "general", title: "general", content: GENERAL_HELP },
+    { id: "commands", title: "commands", content: COMMANDS_HELP },
+    { id: "checkpoints", title: "checkpoints", content: CHECKPOINTS_HELP },
+    { id: "custom", title: "custom-commands", content: CUSTOM_HELP },
+    { id: "keybindings", title: "keybindings", content: KEYBINDINGS_HELP },
+];
+/**
+ * Help Panel Component
+ */
+export function HelpPanel({ activeSection = "general", onClose }) {
+    const [currentSection, setCurrentSection] = useState(0);
+    const { stdout } = useStdout();
+    // Find initial section index
+    useEffect(() => {
+        const index = HELP_SECTIONS.findIndex(s => s.id === activeSection);
+        if (index >= 0) {
+            setCurrentSection(index);
+        }
+    }, [activeSection]);
+    const section = HELP_SECTIONS[currentSection];
+    if (!section)
+        return null;
+    // Build tab bar
+    const tabBar = HELP_SECTIONS.map((s, i) => {
+        const isActive = i === currentSection;
+        const label = s.title;
+        if (isActive) {
+            return chalk.bgCyan.black(` ${label} `);
+        }
+        return chalk.dim(` ${label} `);
+    }).join(chalk.gray("│"));
+    // Navigation hint
+    const navHint = chalk.dim("←/→ or tab to cycle");
+    return (React.createElement(Box, { flexDirection: "column", width: stdout.columns || 80 },
+        React.createElement(Box, null,
+            React.createElement(Text, null,
+                chalk.gray("─").repeat(3),
+                chalk.bold.cyan(" Coder "),
+                chalk.gray("v0.2.0 ─ "),
+                tabBar,
+                chalk.gray(" ─ "),
+                navHint,
+                chalk.gray("─".repeat(Math.max(0, (stdout.columns || 80) - 60))))),
+        React.createElement(Box, { flexDirection: "column", paddingX: 1 },
+            React.createElement(Text, null, section.content)),
+        React.createElement(Box, null,
+            React.createElement(Text, { dimColor: true }, chalk.gray("─").repeat(Math.min((stdout.columns || 80), 80))))));
+}
+/**
+ * Get all help sections
+ */
+export function getHelpSections() {
+    return HELP_SECTIONS;
+}
+/**
+ * Get help text for a specific section (for non-interactive display)
+ */
+export function getHelpText(section) {
+    if (section) {
+        const s = HELP_SECTIONS.find(s => s.id === section || s.title === section);
+        if (s)
+            return s.content;
+    }
+    // Return all sections combined
+    return HELP_SECTIONS.map(s => s.content).join("\n");
+}
+/**
+ * Get compact help text (single line per command)
+ */
+export function getCompactHelpText() {
+    return `
+Commands: /help /exit /new /clear /compact /model /models /tools /cost /status /resume
+Checkpoints: /checkpoint /checkpoints /restore /undo /redo /cps-status
+Export: /export [json|md|jsonl]
+`;
+}
+export default HelpPanel;