@ebowwa/coder 0.7.64 → 0.7.66

package/packages/src/interfaces/ui/terminal/tui/components/Sidebar.tsx

@@ -1,604 +0,0 @@
-/** @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, { useState, useEffect, useCallback, useRef } from "react";
-import { Box, Text, useStdout } from "ink";
-import chalk from "chalk";
-
-// ============================================
-// TYPES
-// ============================================
-
-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;
-}
-
-// ============================================
-// TAB CONFIGURATION
-// ============================================
-
-const TABS: { id: SidebarTab; label: string; icon: string }[] = [
-  { id: "sessions", label: "Sessions", icon: "◈" },
-  { id: "files", label: "Files", icon: "◇" },
-  { id: "todos", label: "Todos", icon: "○" },
-  { id: "tools", label: "Tools", icon: "◆" },
-];
-
-// ============================================
-// SUB-COMPONENTS
-// ============================================
-
-interface TabBarProps {
-  activeTab: SidebarTab;
-  onTabChange: (tab: SidebarTab) => void;
-}
-
-function TabBar({ activeTab, onTabChange }: TabBarProps) {
-  return (
-    <Box flexDirection="row" borderBottom>
-      {TABS.map((tab) => {
-        const isActive = tab.id === activeTab;
-        return (
-          <Box
-            key={tab.id}
-            paddingX={1}
-            borderStyle={isActive ? "single" : undefined}
-            borderBottom={isActive}
-          >
-            <Text
-              color={isActive ? "cyan" : "gray"}
-              bold={isActive}
-            >
-              {tab.icon} {tab.label}
-            </Text>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-// ============================================
-// SESSIONS TAB
-// ============================================
-
-interface SessionsTabProps {
-  sessions: SidebarSession[];
-  currentSessionId?: string;
-  onSelect?: (sessionId: string) => void;
-}
-
-function SessionsTab({ sessions, currentSessionId, onSelect }: SessionsTabProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  useEffect(() => {
-    const handleKey = (data: Buffer) => {
-      const key = data.toString();
-
-      if (key === "\x1b[A" || key === "k") {
-        setSelectedIndex((prev) => Math.max(0, prev - 1));
-      } else if (key === "\x1b[B" || key === "j") {
-        setSelectedIndex((prev) => Math.min(sessions.length - 1, prev + 1));
-      } else if (key === "\r" || key === "\n" || key === "l") {
-        const session = sessions[selectedIndex];
-        if (session) {
-          onSelect?.(session.id);
-        }
-      }
-    };
-
-    process.stdin.on("data", handleKey);
-    return () => {
-      process.stdin.off("data", handleKey);
-    };
-  }, [sessions, selectedIndex, onSelect]);
-
-  if (sessions.length === 0) {
-    return (
-      <Box paddingX={1}>
-        <Text dimColor>No recent sessions</Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="column">
-      {sessions.slice(0, 15).map((session, index) => {
-        const isSelected = index === selectedIndex;
-        const isCurrent = session.id === currentSessionId;
-
-        const timeAgo = session.lastActivity
-          ? formatTimeAgo(session.lastActivity)
-          : "unknown";
-
-        return (
-          <Box
-            key={session.id}
-            paddingX={1}
-            flexDirection="column"
-          >
-            <Box>
-              {isSelected && <Text color="cyan">→ </Text>}
-              {!isSelected && <Text>  </Text>}
-              {isCurrent && <Text color="green">● </Text>}
-              {!isCurrent && <Text dimColor>○ </Text>}
-              <Text
-                color={isSelected ? "cyan" : "white"}
-                bold={isSelected}
-              >
-                {session.id.slice(0, 8)}
-              </Text>
-              <Text dimColor> {session.model?.slice(0, 10) || "unknown"}</Text>
-            </Box>
-            <Box marginLeft={3}>
-              <Text dimColor>
-                {session.messageCount} msgs · {timeAgo}
-              </Text>
-            </Box>
-            {session.preview && (
-              <Box marginLeft={3}>
-                <Text dimColor>
-                  {session.preview.slice(0, 30)}
-                </Text>
-              </Box>
-            )}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-// ============================================
-// FILES TAB
-// ============================================
-
-const FILE_STATUS_COLORS: Record<string, string> = {
-  modified: "yellow",
-  added: "green",
-  deleted: "red",
-  untracked: "gray",
-};
-
-const FILE_STATUS_ICONS: Record<string, string> = {
-  modified: "M",
-  added: "A",
-  deleted: "D",
-  untracked: "?",
-};
-
-interface FilesTabProps {
-  files: SidebarFile[];
-  onSelect?: (path: string) => void;
-}
-
-function FilesTab({ files, onSelect }: FilesTabProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  useEffect(() => {
-    const handleKey = (data: Buffer) => {
-      const key = data.toString();
-
-      if (key === "\x1b[A" || key === "k") {
-        setSelectedIndex((prev) => Math.max(0, prev - 1));
-      } else if (key === "\x1b[B" || key === "j") {
-        setSelectedIndex((prev) => Math.min(files.length - 1, prev + 1));
-      } else if (key === "\r" || key === "\n" || key === "l") {
-        const file = files[selectedIndex];
-        if (file) {
-          onSelect?.(file.path);
-        }
-      }
-    };
-
-    process.stdin.on("data", handleKey);
-    return () => {
-      process.stdin.off("data", handleKey);
-    };
-  }, [files, selectedIndex, onSelect]);
-
-  if (files.length === 0) {
-    return (
-      <Box paddingX={1}>
-        <Text dimColor>No modified files</Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="column">
-      {files.slice(0, 15).map((file, index) => {
-        const isSelected = index === selectedIndex;
-        const color = FILE_STATUS_COLORS[file.status];
-        const icon = FILE_STATUS_ICONS[file.status];
-
-        return (
-          <Box key={file.path} paddingX={1}>
-            {isSelected && <Text color="cyan">→ </Text>}
-            {!isSelected && <Text>  </Text>}
-            <Text color={color} bold>{icon} </Text>
-            <Text color={isSelected ? "cyan" : "white"}>
-              {truncatePath(file.path, 25)}
-            </Text>
-            {file.lineCount && (
-              <Text dimColor> ({file.lineCount} lines)</Text>
-            )}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-// ============================================
-// TODOS TAB
-// ============================================
-
-const TODO_STATUS_COLORS: Record<string, string> = {
-  pending: "gray",
-  in_progress: "yellow",
-  completed: "green",
-};
-
-const TODO_STATUS_ICONS: Record<string, string> = {
-  pending: "○",
-  in_progress: "◐",
-  completed: "●",
-};
-
-interface TodosTabProps {
-  todos: SidebarTodo[];
-  onToggle?: (todoId: string) => void;
-}
-
-function TodosTab({ todos, onToggle }: TodosTabProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  useEffect(() => {
-    const handleKey = (data: Buffer) => {
-      const key = data.toString();
-
-      if (key === "\x1b[A" || key === "k") {
-        setSelectedIndex((prev) => Math.max(0, prev - 1));
-      } else if (key === "\x1b[B" || key === "j") {
-        setSelectedIndex((prev) => Math.min(todos.length - 1, prev + 1));
-      } else if (key === "\r" || key === "\n" || key === " " || key === "l") {
-        const todo = todos[selectedIndex];
-        if (todo) {
-          onToggle?.(todo.id);
-        }
-      }
-    };
-
-    process.stdin.on("data", handleKey);
-    return () => {
-      process.stdin.off("data", handleKey);
-    };
-  }, [todos, selectedIndex, onToggle]);
-
-  if (todos.length === 0) {
-    return (
-      <Box paddingX={1}>
-        <Text dimColor>No active todos</Text>
-      </Box>
-    );
-  }
-
-  const pending = todos.filter((t) => t.status === "pending").length;
-  const completed = todos.filter((t) => t.status === "completed").length;
-
-  return (
-    <Box flexDirection="column">
-      <Box paddingX={1} marginBottom={1}>
-        <Text dimColor>
-          {completed}/{todos.length} completed · {pending} pending
-        </Text>
-      </Box>
-      {todos.slice(0, 15).map((todo, index) => {
-        const isSelected = index === selectedIndex;
-        const color = TODO_STATUS_COLORS[todo.status];
-        const icon = TODO_STATUS_ICONS[todo.status];
-
-        return (
-          <Box key={todo.id} paddingX={1}>
-            {isSelected && <Text color="cyan">→ </Text>}
-            {!isSelected && <Text>  </Text>}
-            <Text color={color}>{icon} </Text>
-            <Text
-              color={isSelected ? "cyan" : "white"}
-              dimColor={todo.status === "completed"}
-              strikethrough={todo.status === "completed"}
-            >
-              {truncateText(todo.text, 28)}
-            </Text>
-          </Box>
-        );
-      })}
-    </Box>
-  );
-}
-
-// ============================================
-// TOOLS TAB
-// ============================================
-
-const TOOL_STATUS_COLORS: Record<string, string> = {
-  available: "green",
-  running: "yellow",
-  error: "red",
-};
-
-const TOOL_STATUS_ICONS: Record<string, string> = {
-  available: "●",
-  running: "◐",
-  error: "○",
-};
-
-interface ToolsTabProps {
-  tools: SidebarTool[];
-  onSelect?: (toolName: string) => void;
-}
-
-function ToolsTab({ tools, onSelect }: ToolsTabProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  useEffect(() => {
-    const handleKey = (data: Buffer) => {
-      const key = data.toString();
-
-      if (key === "\x1b[A" || key === "k") {
-        setSelectedIndex((prev) => Math.max(0, prev - 1));
-      } else if (key === "\x1b[B" || key === "j") {
-        setSelectedIndex((prev) => Math.min(tools.length - 1, prev + 1));
-      } else if (key === "\r" || key === "\n" || key === "l") {
-        const tool = tools[selectedIndex];
-        if (tool) {
-          onSelect?.(tool.name);
-        }
-      }
-    };
-
-    process.stdin.on("data", handleKey);
-    return () => {
-      process.stdin.off("data", handleKey);
-    };
-  }, [tools, selectedIndex, onSelect]);
-
-  if (tools.length === 0) {
-    return (
-      <Box paddingX={1}>
-        <Text dimColor>No tools available</Text>
-      </Box>
-    );
-  }
-
-  // Group by server
-  const byServer = tools.reduce((acc, tool) => {
-    const server = tool.server;
-    if (!acc[server]) acc[server] = [];
-    acc[server].push(tool);
-    return acc;
-  }, {} as Record<string, SidebarTool[]>);
-
-  return (
-    <Box flexDirection="column">
-      {Object.entries(byServer).map(([server, serverTools]) => (
-        <Box key={server} flexDirection="column" marginBottom={1}>
-          <Box paddingX={1}>
-            <Text dimColor bold>{server}</Text>
-          </Box>
-          {serverTools.slice(0, 10).map((tool) => {
-            const index = tools.indexOf(tool);
-            const isSelected = index === selectedIndex;
-            const color = TOOL_STATUS_COLORS[tool.status];
-            const icon = TOOL_STATUS_ICONS[tool.status];
-
-            return (
-              <Box key={tool.name} paddingX={1}>
-                {isSelected && <Text color="cyan">→ </Text>}
-                {!isSelected && <Text>  </Text>}
-                <Text color={color}>{icon} </Text>
-                <Text color={isSelected ? "cyan" : "white"}>
-                  {tool.name}
-                </Text>
-              </Box>
-            );
-          })}
-        </Box>
-      ))}
-    </Box>
-  );
-}
-
-// ============================================
-// MAIN SIDEBAR COMPONENT
-// ============================================
-
-export function Sidebar({
-  isOpen,
-  activeTab = "sessions",
-  width = 30,
-  sessions = [],
-  files = [],
-  todos = [],
-  tools = [],
-  currentSessionId,
-  onTabChange,
-  onSessionSelect,
-  onFileSelect,
-  onTodoToggle,
-  onToolSelect,
-  onClose,
-}: SidebarProps) {
-  const [internalTab, setInternalTab] = useState<SidebarTab>(activeTab);
-  const { stdout } = useStdout();
-
-  useEffect(() => {
-    setInternalTab(activeTab);
-  }, [activeTab]);
-
-  // Tab change handler
-  const handleTabChange = useCallback((tab: SidebarTab) => {
-    setInternalTab(tab);
-    onTabChange?.(tab);
-  }, [onTabChange]);
-
-  if (!isOpen) {
-    return (
-      <Box width={3} borderStyle="single" borderColor="gray">
-        <Text dimColor>│</Text>
-      </Box>
-    );
-  }
-
-  const sidebarWidth = Math.min(width, (stdout.columns || 80) - 20);
-
-  return (
-    <Box
-      flexDirection="column"
-      width={sidebarWidth}
-      borderStyle="single"
-      borderColor="gray"
-    >
-      {/* Header */}
-      <Box borderBottom borderStyle="single" borderColor="gray" paddingX={1}>
-        <Text bold color="cyan">Coder</Text>
-        <Text dimColor> | </Text>
-        <Text dimColor>Ctrl+B to close</Text>
-      </Box>
-
-      {/* Tab bar */}
-      <TabBar activeTab={internalTab} onTabChange={handleTabChange} />
-
-      {/* Tab content */}
-      <Box flexDirection="column" flexGrow={1} paddingY={1}>
-        {internalTab === "sessions" && (
-          <SessionsTab
-            sessions={sessions}
-            currentSessionId={currentSessionId}
-            onSelect={onSessionSelect}
-          />
-        )}
-        {internalTab === "files" && (
-          <FilesTab files={files} onSelect={onFileSelect} />
-        )}
-        {internalTab === "todos" && (
-          <TodosTab todos={todos} onToggle={onTodoToggle} />
-        )}
-        {internalTab === "tools" && (
-          <ToolsTab tools={tools} onSelect={onToolSelect} />
-        )}
-      </Box>
-
-      {/* Footer */}
-      <Box borderTop borderStyle="single" borderColor="gray" paddingX={1}>
-        <Text dimColor>
-          Tab: switch | ↑↓: nav | Enter: select
-        </Text>
-      </Box>
-    </Box>
-  );
-}
-
-// ============================================
-// HELPERS
-// ============================================
-
-function formatTimeAgo(timestamp: number): string {
-  const seconds = Math.floor((Date.now() - timestamp) / 1000);
-
-  if (seconds < 60) return "just now";
-  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
-  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
-  return `${Math.floor(seconds / 86400)}d ago`;
-}
-
-function truncatePath(path: string, maxLength: number): string {
-  if (path.length <= maxLength) return path;
-
-  const filename = path.split("/").pop() || path;
-  if (filename.length >= maxLength - 3) {
-    return `...${filename.slice(-(maxLength - 3))}`;
-  }
-
-  const parts = path.split("/");
-  const firstPart = parts[0];
-  const remaining = parts.slice(1).join("/");
-
-  if (firstPart && remaining) {
-    return `${firstPart}/.../${parts.pop()}`;
-  }
-
-  return `...${path.slice(-(maxLength - 3))}`;
-}
-
-function truncateText(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return `${text.slice(0, maxLength - 3)}...`;
-}
-
-export default Sidebar;

package/packages/src/interfaces/ui/terminal/tui/components/index.ts

@@ -1,118 +0,0 @@
-/**
- * TUI Components Module
- * Composable components for building rich terminal UIs
- *
- * Components:
- * - PaneManager: Resizable split pane layout
- * - MultilineInput: Enhanced text input with autocomplete
- * - Toast: Notification messages
- * - Modal: Dialog overlays
- * - SelectableList: Keyboard-navigable lists
- * - Link: OSC 8 hyperlinks
- * - Sidebar: Collapsible sidebar with tabs
- *
- * IMPORTANT: All keyboard input is handled via InputContext.
- * Do NOT use process.stdin directly - it conflicts with the main input loop.
- */
-
-// ============================================
-// INPUT CONTEXT (centralized input management)
-// ============================================
-
-export {
-  InputProvider,
-  useInputContext,
-  useInputRegistration,
-  useInputRegistration as useInputHandler,
-  useInputFocus,
-  useInputBlock,
-  InputPriority,
-  type InputHandler,
-  type InputHandlerOptions,
-  type InputContextValue,
-  type NativeKeyEvent,
-} from "../InputContext.js";
-
-// ============================================
-// PANE MANAGER
-// ============================================
-
-export {
-  PaneManager,
-  type PaneConfig,
-  type PaneDirection,
-  type PaneManagerProps,
-  usePane,
-  PaneContext,
-} from "./PaneManager.js";
-
-// ============================================
-// MULTILINE INPUT
-// ============================================
-
-export {
-  MultilineInput,
-  useMultilineInputHandler,
-  filterSuggestions,
-  highlightSyntax,
-  type MultilineInputProps,
-  type MultilineInputState,
-  type UseMultilineInputOptions,
-  type AutocompleteSuggestion,
-} from "./MultilineInput.js";
-
-// ============================================
-// INTERACTIVE ELEMENTS
-// ============================================
-
-export {
-  // Toast
-  Toast,
-  useToast,
-  type ToastMessage,
-  type ToastType,
-  type ToastProps,
-  type ToastManager,
-
-  // Modal
-  Modal,
-  ConfirmModal,
-  type ModalAction,
-  type ModalProps,
-  type ConfirmModalProps,
-
-  // SelectableList
-  SelectableList,
-  type SelectableItem,
-  type SelectableListProps,
-
-  // Link
-  Link,
-  createOsc8Link,
-  type LinkProps,
-
-  // Context
-  InteractiveProvider,
-  useInteractive,
-} from "./InteractiveElements.js";
-
-// ============================================
-// SIDEBAR
-// ============================================
-
-export {
-  Sidebar,
-  type SidebarTab,
-  type SidebarSession,
-  type SidebarFile,
-  type SidebarTodo,
-  type SidebarTool,
-  type SidebarProps,
-} from "./Sidebar.js";
-
-// ============================================
-// RE-EXPORT INK COMPONENTS (convenience)
-// ============================================
-
-// Re-export commonly used Ink components for convenience
-export { Box, Text, useApp, useInput, useStdout, type Key } from "ink";