@ebowwa/coder 0.7.63 → 0.7.64

package/dist/interfaces/ui/terminal/tui/components/MultilineInput.js

@@ -0,0 +1,399 @@
+/** @jsx React.createElement */
+/**
+ * Multiline Input Component
+ * Enhanced text input with:
+ * - Multi-line support (Ctrl+Enter for newline)
+ * - Command autocomplete
+ * - Input history navigation
+ * - Syntax highlighting for input
+ */
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Box, Text, useStdout } from "ink";
+// ============================================
+// COMMAND AUTOCOMPLETE DEFINITIONS
+// ============================================
+const COMMAND_SUGGESTIONS = [
+    // Session commands
+    { id: "/help", label: "/help", description: "Show help", category: "session" },
+    { id: "/exit", label: "/exit", description: "Exit session", category: "session" },
+    { id: "/new", label: "/new", description: "Start new session", category: "session" },
+    { id: "/clear", label: "/clear", description: "Clear conversation", category: "session" },
+    { id: "/status", label: "/status", description: "Show session status", category: "session" },
+    { id: "/cost", label: "/cost", description: "Show total cost", category: "session" },
+    // Model commands
+    { id: "/model", label: "/model", description: "Switch model", category: "model" },
+    { id: "/models", label: "/models", description: "List available models", category: "model" },
+    { id: "/tools", label: "/tools", description: "List available tools", category: "model" },
+    // Context commands
+    { id: "/compact", label: "/compact", description: "Force context compaction", category: "context" },
+    { id: "/export", label: "/export", description: "Export session", category: "context" },
+    { id: "/checkpoint", label: "/checkpoint", description: "Save checkpoint", category: "context" },
+    { id: "/checkpoints", label: "/checkpoints", description: "List checkpoints", category: "context" },
+    { id: "/restore", label: "/restore", description: "Restore checkpoint", category: "context" },
+    { id: "/undo", label: "/undo", description: "Undo last action", category: "context" },
+    { id: "/redo", label: "/redo", description: "Redo action", category: "context" },
+    // Session management
+    { id: "/resume", label: "/resume", description: "Resume session", category: "sessions" },
+    { id: "/sessions", label: "/sessions", description: "List sessions", category: "sessions" },
+];
+/**
+ * Filter autocomplete suggestions based on prefix
+ */
+export function filterSuggestions(prefix) {
+    if (!prefix || !prefix.startsWith("/")) {
+        return [];
+    }
+    const query = prefix.toLowerCase();
+    return COMMAND_SUGGESTIONS.filter((cmd) => {
+        return (cmd.id.toLowerCase().startsWith(query) ||
+            cmd.label.toLowerCase().includes(query) ||
+            (cmd.description?.toLowerCase().includes(query) ?? false));
+    }).slice(0, 5);
+}
+/**
+ * Syntax highlight code block
+ * Returns highlighted segments for display
+ */
+export function highlightSyntax(text) {
+    const segments = [];
+    // Code block detection (``` ... ```)
+    const codeBlockRegex = /```[\s\S]*?```/g;
+    // Keywords
+    const keywords = /\b(const|let|var|function|return|if|else|for|while|class|interface|type|import|export|from|async|await)\b/g;
+    // Strings
+    const strings = /(["'`])(?:(?!\1)[\s\S])*?\1/g;
+    // Numbers
+    const numbers = /\b(\d+\.?\d*)\b/g;
+    // Comments
+    const comments = /(\/\/.*$|\/\*[\s\S]*?\*\/|#.*$)/gm;
+    // Check for code blocks first
+    if (codeBlockRegex.test(text)) {
+        segments.push({ text, color: "green" });
+        return segments;
+    }
+    // Otherwise return as-is
+    segments.push({ text, color: "white" });
+    return segments;
+}
+// ============================================
+// MULTILINE INPUT COMPONENT
+// ============================================
+export function MultilineInput({ value, cursorPos, currentLine = 0, placeholder = "Type your message... (/help for commands)", isActive = true, showAutocomplete = false, autocompleteSuggestions = [], autocompleteIndex = 0, inputHistory = [], historyIndex = -1, onChange, onSubmit, maxLines = 5, showLineNumbers = false, width: propWidth, }) {
+    const { stdout } = useStdout();
+    const width = propWidth ?? stdout.columns ?? 80;
+    // Split value into lines
+    const lines = value.split("\n");
+    const displayLines = lines.slice(-maxLines);
+    // Calculate cursor display position
+    const cursorLineIndex = Math.min(currentLine, displayLines.length - 1);
+    const currentLineText = displayLines[cursorLineIndex] ?? "";
+    const cursorColInLine = cursorPos;
+    // Build line display
+    const renderLines = displayLines.map((line, i) => {
+        const lineNum = showLineNumbers
+            ? `${String(lines.length - displayLines.length + i + 1).padStart(3, " ")} `
+            : "";
+        const isCurrentLine = i === cursorLineIndex;
+        if (isCurrentLine) {
+            const beforeCursor = line.slice(0, cursorColInLine);
+            const cursorChar = line[cursorColInLine] ?? " ";
+            const afterCursor = line.slice(cursorColInLine + 1);
+            return (React.createElement(Box, { key: i },
+                React.createElement(Text, { dimColor: true }, lineNum),
+                React.createElement(Text, null, beforeCursor),
+                React.createElement(Text, { backgroundColor: "cyan", color: "black" }, cursorChar),
+                React.createElement(Text, null, afterCursor)));
+        }
+        return (React.createElement(Box, { key: i },
+            React.createElement(Text, { dimColor: true }, lineNum),
+            React.createElement(Text, { dimColor: line.length === 0 }, line || " ")));
+    });
+    // Render autocomplete dropdown
+    const renderAutocomplete = () => {
+        if (!showAutocomplete || autocompleteSuggestions.length === 0) {
+            return null;
+        }
+        return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginTop: 1 },
+            React.createElement(Text, { dimColor: true }, "Suggestions (Tab to select):"),
+            autocompleteSuggestions.map((suggestion, i) => (React.createElement(Box, { key: suggestion.id },
+                React.createElement(Text, { color: i === autocompleteIndex ? "yellow" : "white", bold: i === autocompleteIndex }, suggestion.label),
+                suggestion.description && (React.createElement(Text, { dimColor: true },
+                    " - ",
+                    suggestion.description)))))));
+    };
+    // Line indicator
+    const lineIndicator = lines.length > 1 ? (React.createElement(Text, { dimColor: true },
+        " [Line ",
+        currentLine + 1,
+        "/",
+        lines.length,
+        "]")) : null;
+    return (React.createElement(Box, { flexDirection: "column", width: "100%", borderStyle: "round", borderColor: isActive ? "cyan" : "gray", paddingX: 1 },
+        React.createElement(Box, null,
+            React.createElement(Text, { bold: true, color: "cyan" }, "You:"),
+            lineIndicator),
+        React.createElement(Box, { flexDirection: "column" }, lines.length === 0 || (lines.length === 1 && lines[0] === "") ? (React.createElement(Text, { dimColor: true }, placeholder)) : (renderLines)),
+        renderAutocomplete(),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true }, "Ctrl+Enter: newline | up/down: history | Tab: autocomplete"))));
+}
+// ============================================
+// INPUT HANDLER HOOK
+// ============================================
+export function useMultilineInputHandler({ isActive = true, onSubmit, onRequestAutocomplete, inputHistory = [], }) {
+    const [state, setState] = useState({
+        value: "",
+        cursorPos: 0,
+        currentLine: 0,
+        historyIndex: -1,
+        savedInput: "",
+        showAutocomplete: false,
+        autocompleteSuggestions: [],
+        autocompleteIndex: 0,
+    });
+    const handleKeyEvent = useCallback((event) => {
+        if (!isActive)
+            return "unhandled";
+        const { code, ctrl, shift } = event;
+        // Update helper
+        const update = (updates) => {
+            setState((prev) => ({ ...prev, ...updates }));
+        };
+        // Get current state
+        const { value, cursorPos, currentLine, historyIndex, showAutocomplete } = state;
+        // Split into lines for calculations
+        const lines = value.split("\n");
+        // Autocomplete navigation
+        if (showAutocomplete) {
+            if (code === "tab" || code === "down") {
+                const suggestions = state.autocompleteSuggestions;
+                const newIndex = (state.autocompleteIndex + 1) % suggestions.length;
+                update({ autocompleteIndex: newIndex });
+                return "handled";
+            }
+            if (code === "up") {
+                const suggestions = state.autocompleteSuggestions;
+                const newIndex = (state.autocompleteIndex - 1 + suggestions.length) %
+                    suggestions.length;
+                update({ autocompleteIndex: newIndex });
+                return "handled";
+            }
+            if (code === "enter" || code === "return") {
+                const suggestion = state.autocompleteSuggestions[state.autocompleteIndex];
+                if (suggestion) {
+                    // Replace current word with suggestion
+                    const words = value.split(" ");
+                    words[words.length - 1] = suggestion.id;
+                    const newValue = words.join(" ");
+                    update({
+                        value: newValue,
+                        cursorPos: newValue.length,
+                        showAutocomplete: false,
+                        autocompleteSuggestions: [],
+                    });
+                }
+                return "handled";
+            }
+            if (code === "escape") {
+                update({ showAutocomplete: false, autocompleteSuggestions: [] });
+                return "handled";
+            }
+        }
+        // Submit (Enter without Ctrl = submit if single line, with Ctrl = always submit)
+        if (code === "enter" || code === "return") {
+            if (ctrl) {
+                // Ctrl+Enter = submit even in multiline
+                if (value.trim() && onSubmit) {
+                    onSubmit(value);
+                    update({
+                        value: "",
+                        cursorPos: 0,
+                        currentLine: 0,
+                        historyIndex: -1,
+                        savedInput: "",
+                    });
+                }
+                return "handled";
+            }
+            // Regular Enter
+            if (lines.length === 1) {
+                // Single line mode - submit
+                if (value.trim() && onSubmit) {
+                    onSubmit(value);
+                    update({
+                        value: "",
+                        cursorPos: 0,
+                        currentLine: 0,
+                        historyIndex: -1,
+                        savedInput: "",
+                    });
+                }
+            }
+            else {
+                // Multiline mode - insert newline
+                const newValue = value.slice(0, cursorPos) + "\n" + value.slice(cursorPos);
+                const newCursorPos = cursorPos + 1;
+                update({
+                    value: newValue,
+                    cursorPos: newCursorPos,
+                    currentLine: currentLine + 1,
+                });
+            }
+            return "handled";
+        }
+        // Backspace
+        if (code === "backspace") {
+            if (cursorPos > 0) {
+                const newValue = value.slice(0, cursorPos - 1) + value.slice(cursorPos);
+                const newCursorPos = cursorPos - 1;
+                const newCurrentLine = newValue.slice(0, newCursorPos).split("\n").length - 1;
+                update({
+                    value: newValue,
+                    cursorPos: newCursorPos,
+                    currentLine: newCurrentLine,
+                });
+                // Check for autocomplete
+                if (newValue.startsWith("/") && onRequestAutocomplete) {
+                    const suggestions = onRequestAutocomplete(newValue);
+                    update({
+                        showAutocomplete: suggestions.length > 0,
+                        autocompleteSuggestions: suggestions,
+                        autocompleteIndex: 0,
+                    });
+                }
+            }
+            return "handled";
+        }
+        // Delete
+        if (code === "delete") {
+            if (cursorPos < value.length) {
+                const newValue = value.slice(0, cursorPos) + value.slice(cursorPos + 1);
+                update({ value: newValue });
+            }
+            return "handled";
+        }
+        // Arrow keys
+        if (code === "left") {
+            update({ cursorPos: Math.max(0, cursorPos - 1) });
+            return "handled";
+        }
+        if (code === "right") {
+            update({ cursorPos: Math.min(value.length, cursorPos + 1) });
+            return "handled";
+        }
+        if (code === "up") {
+            // History navigation
+            if (inputHistory.length > 0) {
+                const newIndex = historyIndex === -1 ? 0 : Math.min(historyIndex + 1, inputHistory.length - 1);
+                const historyValue = inputHistory[newIndex] ?? "";
+                update({
+                    historyIndex: newIndex,
+                    value: historyValue,
+                    cursorPos: historyValue.length,
+                    currentLine: historyValue.split("\n").length - 1,
+                });
+            }
+            return "handled";
+        }
+        if (code === "down") {
+            if (historyIndex > 0) {
+                const newIndex = historyIndex - 1;
+                const historyValue = inputHistory[newIndex] ?? "";
+                update({
+                    historyIndex: newIndex,
+                    value: historyValue,
+                    cursorPos: historyValue.length,
+                    currentLine: historyValue.split("\n").length - 1,
+                });
+            }
+            else if (historyIndex === 0) {
+                // Restore saved input
+                update({
+                    historyIndex: -1,
+                    value: state.savedInput,
+                    cursorPos: state.savedInput.length,
+                    currentLine: state.savedInput.split("\n").length - 1,
+                });
+            }
+            return "handled";
+        }
+        // Home/End
+        if (code === "home" || (code === "a" && ctrl)) {
+            // Go to start of current line
+            const lineStart = value.slice(0, cursorPos).lastIndexOf("\n") + 1;
+            update({ cursorPos: lineStart });
+            return "handled";
+        }
+        if (code === "end" || (code === "e" && ctrl)) {
+            // Go to end of current line
+            const lineEnd = value.indexOf("\n", cursorPos);
+            update({ cursorPos: lineEnd === -1 ? value.length : lineEnd });
+            return "handled";
+        }
+        // Ctrl+U - clear line
+        if (code === "u" && ctrl) {
+            const lineStart = value.slice(0, cursorPos).lastIndexOf("\n") + 1;
+            const lineEnd = value.indexOf("\n", cursorPos);
+            const newValue = value.slice(0, lineStart) +
+                (lineEnd === -1 ? "" : value.slice(lineEnd + 1));
+            update({
+                value: newValue,
+                cursorPos: lineStart,
+            });
+            return "handled";
+        }
+        // Ctrl+W - delete word
+        if (code === "w" && ctrl) {
+            const beforeCursor = value
+                .slice(0, cursorPos)
+                .replace(/\s+\S*$/, "");
+            const newValue = beforeCursor + value.slice(cursorPos);
+            update({
+                value: newValue,
+                cursorPos: beforeCursor.length,
+            });
+            return "handled";
+        }
+        // Regular printable character
+        if (code.length === 1 && !ctrl) {
+            const newValue = value.slice(0, cursorPos) + code + value.slice(cursorPos);
+            const newCursorPos = cursorPos + 1;
+            update({
+                value: newValue,
+                cursorPos: newCursorPos,
+                historyIndex: -1, // Reset history navigation on typing
+            });
+            // Check for autocomplete trigger
+            if (newValue.startsWith("/") && onRequestAutocomplete) {
+                const suggestions = onRequestAutocomplete(newValue);
+                update({
+                    showAutocomplete: suggestions.length > 0,
+                    autocompleteSuggestions: suggestions,
+                    autocompleteIndex: 0,
+                });
+            }
+            else {
+                update({ showAutocomplete: false });
+            }
+            return "handled";
+        }
+        return "unhandled";
+    }, [isActive, onSubmit, onRequestAutocomplete, inputHistory, state]);
+    return {
+        state,
+        handleKeyEvent,
+        // Convenience helpers
+        setValue: (value) => setState((prev) => ({ ...prev, value })),
+        reset: () => setState({
+            value: "",
+            cursorPos: 0,
+            currentLine: 0,
+            historyIndex: -1,
+            savedInput: "",
+            showAutocomplete: false,
+            autocompleteSuggestions: [],
+            autocompleteIndex: 0,
+        }),
+    };
+}
+export default MultilineInput;

package/dist/interfaces/ui/terminal/tui/components/PaneManager.d.ts

@@ -0,0 +1,59 @@
+/** @jsx React.createElement */
+/**
+ * Pane Manager Component
+ * Resizable split pane layout for TUI
+ *
+ * Supports:
+ * - Horizontal and vertical splits
+ * - Keyboard-driven resize (Ctrl+Arrow keys when focused)
+ * - Collapsible panes
+ * - Min/max widths
+ */
+import React from "react";
+export type PaneDirection = "horizontal" | "vertical";
+export interface PaneConfig {
+    id: string;
+    /** Initial size (width for horizontal, height for vertical) as percentage or absolute */
+    size: number;
+    /** Size unit: "percent" or "fixed" */
+    sizeUnit?: "percent" | "fixed";
+    /** Minimum size in cells */
+    minSize?: number;
+    /** Maximum size in cells */
+    maxSize?: number;
+    /** Whether pane can be collapsed */
+    collapsible?: boolean;
+    /** Whether pane starts collapsed */
+    collapsed?: boolean;
+    /** Pane label for header */
+    label?: string;
+}
+export interface PaneManagerProps {
+    direction?: PaneDirection;
+    panes: PaneConfig[];
+    children: React.ReactNode[];
+    /** Active pane index for resize focus */
+    activePane?: number;
+    /** Show resize handles */
+    showHandles?: boolean;
+    /** Handle character */
+    handleChar?: string;
+    /** Handle color */
+    handleColor?: string;
+    /** Called when pane sizes change */
+    onPaneChange?: (sizes: number[]) => void;
+}
+export interface PaneContextValue {
+    width: number;
+    height: number;
+    isActive: boolean;
+    paneId: string;
+}
+export declare const PaneContext: React.Context<PaneContextValue>;
+/** Hook to access current pane context */
+export declare function usePaneContext(): PaneContextValue;
+/** Alias for usePaneContext for convenience */
+export declare const usePane: typeof usePaneContext;
+export declare function PaneManager({ direction, panes, children, activePane, showHandles, handleChar, handleColor, onPaneChange, }: PaneManagerProps): React.JSX.Element;
+export default PaneManager;
+//# sourceMappingURL=PaneManager.d.ts.map

package/dist/interfaces/ui/terminal/tui/components/PaneManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaneManager.d.ts","sourceRoot":"","sources":["../../../../../../packages/src/interfaces/ui/terminal/tui/components/PaneManager.tsx"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B;;;;;;;;;GASG;AAEH,OAAO,KAAmE,MAAM,OAAO,CAAC;AAOxF,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAEtD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC/B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC1C;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,iCAKtB,CAAC;AAEH,0CAA0C;AAC1C,wBAAgB,cAAc,IAAI,gBAAgB,CAEjD;AAED,+CAA+C;AAC/C,eAAO,MAAM,OAAO,uBAAiB,CAAC;AAiGtC,wBAAgB,WAAW,CAAC,EAC1B,SAAwB,EACxB,KAAK,EACL,QAAQ,EACR,UAAc,EACd,WAAkB,EAClB,UAAgB,EAChB,WAAoB,EACpB,YAAY,GACb,EAAE,gBAAgB,qBAqJlB;AAED,eAAe,WAAW,CAAC"}

package/dist/interfaces/ui/terminal/tui/components/PaneManager.js

@@ -0,0 +1,139 @@
+/** @jsx React.createElement */
+/**
+ * Pane Manager Component
+ * Resizable split pane layout for TUI
+ *
+ * Supports:
+ * - Horizontal and vertical splits
+ * - Keyboard-driven resize (Ctrl+Arrow keys when focused)
+ * - Collapsible panes
+ * - Min/max widths
+ */
+import React, { useState, useCallback, useRef, createContext, useContext } from "react";
+import { Box, Text, useStdout } from "ink";
+export const PaneContext = createContext({
+    width: 80,
+    height: 24,
+    isActive: false,
+    paneId: "",
+});
+/** Hook to access current pane context */
+export function usePaneContext() {
+    return useContext(PaneContext);
+}
+/** Alias for usePaneContext for convenience */
+export const usePane = usePaneContext;
+function ResizeHandle({ direction, color = "gray", char = "│", isFocused }) {
+    const handleColor = isFocused ? "cyan" : color;
+    const displayChar = direction === "horizontal" ? char : "─";
+    return (React.createElement(Box, null,
+        React.createElement(Text, { color: handleColor }, displayChar)));
+}
+function CollapsedPane({ config, onToggle }) {
+    return (React.createElement(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, width: 3, flexDirection: "column" },
+        React.createElement(Text, { dimColor: true, bold: true }, config.label?.charAt(0) || "P"),
+        React.createElement(Text, { dimColor: true }, config.collapsed ? "▶" : "◀")));
+}
+function Pane({ config, width, height, isActive, children, showHeader = true }) {
+    return (React.createElement(PaneContext.Provider, { value: { width, height, isActive, paneId: config.id } },
+        React.createElement(Box, { flexDirection: "column", width: width, height: height, borderStyle: isActive ? "double" : "single", borderColor: isActive ? "cyan" : "gray" },
+            showHeader && config.label && (React.createElement(Box, { paddingX: 1, ...(isActive ? { backgroundColor: "cyan" } : {}) },
+                React.createElement(Text, { bold: true, inverse: isActive, color: isActive ? "black" : "white" }, config.label))),
+            React.createElement(Box, { flexGrow: 1, overflow: "hidden" }, children))));
+}
+// ============================================
+// PANE MANAGER COMPONENT
+// ============================================
+export function PaneManager({ direction = "horizontal", panes, children, activePane = 0, showHandles = true, handleChar = "│", handleColor = "gray", onPaneChange, }) {
+    const { stdout } = useStdout();
+    const totalWidth = stdout.columns || 80;
+    const totalHeight = stdout.rows || 24;
+    const [sizes, setSizes] = useState(() => panes.map(p => p.size));
+    const [collapsedPanes, setCollapsedPanes] = useState(() => new Set(panes.filter(p => p.collapsed).map(p => p.id)));
+    const containerRef = useRef(0);
+    // Calculate actual sizes
+    const calculateSizes = useCallback(() => {
+        const availableSpace = direction === "horizontal" ? totalWidth : totalHeight;
+        const visiblePanes = panes.filter(p => !collapsedPanes.has(p.id));
+        const handleCount = showHandles ? Math.max(0, visiblePanes.length - 1) : 0;
+        const handleSpace = handleCount * 1; // 1 char per handle
+        const usableSpace = availableSpace - handleSpace;
+        const calculated = [];
+        let remainingSpace = usableSpace;
+        let percentTotal = 0;
+        panes.forEach((pane, i) => {
+            if (collapsedPanes.has(pane.id)) {
+                calculated.push(3); // Collapsed width
+                return;
+            }
+            const size = sizes[i] ?? pane.size;
+            const unit = pane.sizeUnit ?? "percent";
+            if (unit === "fixed") {
+                calculated.push(size);
+                remainingSpace -= size;
+            }
+            else {
+                percentTotal += size;
+            }
+        });
+        // Distribute remaining space by percentage
+        let percentSpace = remainingSpace;
+        panes.forEach((pane, i) => {
+            if (collapsedPanes.has(pane.id))
+                return;
+            if (pane.sizeUnit === "fixed")
+                return;
+            const size = sizes[i] ?? pane.size;
+            const actualSize = Math.round((size / percentTotal) * percentSpace);
+            // Apply min/max constraints
+            const constrained = Math.max(pane.minSize ?? 10, Math.min(pane.maxSize ?? availableSpace, actualSize));
+            calculated[i] = constrained;
+        });
+        return calculated;
+    }, [panes, sizes, collapsedPanes, direction, totalWidth, totalHeight, showHandles]);
+    const actualSizes = calculateSizes();
+    // Toggle pane collapse
+    const togglePane = useCallback((paneId) => {
+        setCollapsedPanes(prev => {
+            const next = new Set(prev);
+            if (next.has(paneId)) {
+                next.delete(paneId);
+            }
+            else {
+                next.add(paneId);
+            }
+            return next;
+        });
+    }, []);
+    // Resize pane (keyboard-driven)
+    const resizePane = useCallback((paneIndex, delta) => {
+        setSizes(prev => {
+            const next = [...prev];
+            const currentSize = next[paneIndex] ?? panes[paneIndex]?.size ?? 50;
+            const newSize = Math.max(panes[paneIndex]?.minSize ?? 10, Math.min(panes[paneIndex]?.maxSize ?? 90, currentSize + delta));
+            next[paneIndex] = newSize;
+            onPaneChange?.(next);
+            return next;
+        });
+    }, [panes, onPaneChange]);
+    // Build layout
+    const elements = [];
+    let childIndex = 0;
+    panes.forEach((pane, i) => {
+        const isCollapsed = collapsedPanes.has(pane.id);
+        const size = actualSizes[i] ?? 10;
+        if (isCollapsed) {
+            elements.push(React.createElement(CollapsedPane, { key: pane.id, config: pane, onToggle: () => togglePane(pane.id) }));
+        }
+        else {
+            elements.push(React.createElement(Pane, { key: pane.id, config: pane, width: direction === "horizontal" ? size : totalWidth, height: direction === "vertical" ? size : totalHeight, isActive: i === activePane }, children[childIndex]));
+            childIndex++;
+        }
+        // Add resize handle between panes
+        if (showHandles && i < panes.length - 1 && !isCollapsed) {
+            elements.push(React.createElement(ResizeHandle, { key: `handle-${i}`, direction: direction, color: handleColor, char: handleChar, isFocused: i === activePane - 1 || i === activePane }));
+        }
+    });
+    return (React.createElement(Box, { ref: containerRef, flexDirection: direction === "horizontal" ? "row" : "column", width: totalWidth, height: totalHeight }, elements));
+}
+export default PaneManager;

package/dist/interfaces/ui/terminal/tui/components/Sidebar.d.ts

@@ -0,0 +1,68 @@
+/** @jsx React.createElement */
+/**
+ * Sidebar Component
+ * Collapsible sidebar for sessions, files, todos, and tools
+ *
+ * Features:
+ * - Collapsible with keyboard shortcut
+ * - Tabbed sections (sessions, files, todos, tools)
+ * - Keyboard navigation
+ * - Context-aware content
+ */
+import React from "react";
+export type SidebarTab = "sessions" | "files" | "todos" | "tools";
+export interface SidebarSession {
+    id: string;
+    messageCount: number;
+    lastActivity?: number;
+    model?: string;
+    preview?: string;
+}
+export interface SidebarFile {
+    path: string;
+    status: "modified" | "added" | "deleted" | "untracked";
+    lineCount?: number;
+}
+export interface SidebarTodo {
+    id: string;
+    text: string;
+    status: "pending" | "in_progress" | "completed";
+}
+export interface SidebarTool {
+    name: string;
+    server: string;
+    status: "available" | "running" | "error";
+}
+export interface SidebarProps {
+    /** Whether sidebar is visible */
+    isOpen: boolean;
+    /** Current active tab */
+    activeTab?: SidebarTab;
+    /** Width in columns */
+    width?: number;
+    /** Sessions list */
+    sessions?: SidebarSession[];
+    /** Modified files list */
+    files?: SidebarFile[];
+    /** Todos list */
+    todos?: SidebarTodo[];
+    /** Available tools list */
+    tools?: SidebarTool[];
+    /** Current session ID */
+    currentSessionId?: string;
+    /** Called when tab changes */
+    onTabChange?: (tab: SidebarTab) => void;
+    /** Called when session selected */
+    onSessionSelect?: (sessionId: string) => void;
+    /** Called when file selected */
+    onFileSelect?: (path: string) => void;
+    /** Called when todo toggled */
+    onTodoToggle?: (todoId: string) => void;
+    /** Called when tool selected */
+    onToolSelect?: (toolName: string) => void;
+    /** Called when close requested */
+    onClose?: () => void;
+}
+export declare function Sidebar({ isOpen, activeTab, width, sessions, files, todos, tools, currentSessionId, onTabChange, onSessionSelect, onFileSelect, onTodoToggle, onToolSelect, onClose, }: SidebarProps): React.JSX.Element;
+export default Sidebar;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/interfaces/ui/terminal/tui/components/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../../../packages/src/interfaces/ui/terminal/tui/components/Sidebar.tsx"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B;;;;;;;;;GASG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,CAAC;CACjD;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,yBAAyB;IACzB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,iBAAiB;IACjB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8BAA8B;IAC9B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,mCAAmC;IACnC,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,+BAA+B;IAC/B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAmZD,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,SAAsB,EACtB,KAAU,EACV,QAAa,EACb,KAAU,EACV,KAAU,EACV,KAAU,EACV,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,OAAO,GACR,EAAE,YAAY,qBAqEd;AAuCD,eAAe,OAAO,CAAC"}