@tecet/ollm 0.1.3

package/dist/ui/components/layout/SystemBar.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import { useChat } from '../../../features/context/ChatContext.js';
+import { useContextManager } from '../../../features/context/ContextManagerContext.js';
+import { useModel } from '../../../features/context/ModelContext.js';
+import { useUI } from '../../../features/context/UIContext.js';
+import { useInputRouting } from '../../contexts/InputRoutingContext.js';
+import { InputRoutingIndicator } from '../InputRoutingIndicator.js';
+/**
+ * SystemBar (Row 3)
+ * Displays "OLLM: Status", "Context Tokens", and "Input Routing" in 3 separate boxes.
+ */
+export function SystemBar({ height }) {
+    const { state: chatState } = useChat();
+    const { modelLoading, warmupStatus } = useModel();
+    const { state: uiState } = useUI();
+    const { theme } = uiState;
+    const { activeDestination } = useInputRouting();
+    const { state: contextState } = useContextManager();
+    const { streaming, waitingForResponse } = chatState;
+    const [spinnerIndex, setSpinnerIndex] = useState(0);
+    const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    useEffect(() => {
+        // Show spinner when model is loading OR when streaming (LLM is typing) OR waiting for response OR compressing
+        if (!modelLoading && !streaming && !waitingForResponse && !contextState.compressing)
+            return;
+        const interval = setInterval(() => {
+            setSpinnerIndex((prev) => (prev + 1) % spinnerFrames.length);
+        }, 80);
+        return () => clearInterval(interval);
+    }, [modelLoading, streaming, waitingForResponse, contextState.compressing, spinnerFrames.length]);
+    // Determine status text based only on input destination
+    let displayStatus = ' ';
+    const isTerminalMode = activeDestination === 'terminal1' || activeDestination === 'terminal2';
+    if (contextState.compressing && contextState.compressionProgress) {
+        // Show compression progress
+        const { stage, progress } = contextState.compressionProgress;
+        displayStatus = `Compressing (${stage} ${progress}%) ${spinnerFrames[spinnerIndex]}`;
+    }
+    else if (contextState.compressing) {
+        // Show generic compression status
+        displayStatus = `Compressing context ${spinnerFrames[spinnerIndex]}`;
+    }
+    else if (activeDestination === 'editor') {
+        displayStatus = 'Editor';
+    }
+    else if (activeDestination === 'terminal2') {
+        displayStatus = 'Terminal 2';
+    }
+    else if (activeDestination === 'terminal1') {
+        displayStatus = 'Terminal 1';
+    }
+    else if (warmupStatus?.active) {
+        const elapsedSeconds = Math.max(0, Math.floor(warmupStatus.elapsedMs / 1000));
+        displayStatus = `Warming model (try ${warmupStatus.attempt}, ${elapsedSeconds}s) ${spinnerFrames[spinnerIndex]}`;
+    }
+    else if (modelLoading) {
+        displayStatus = `Loading Model ${spinnerFrames[spinnerIndex]}`;
+    }
+    else if (streaming) {
+        displayStatus = `Typing ${spinnerFrames[spinnerIndex]}`;
+    }
+    else if (waitingForResponse) {
+        displayStatus = `Thinking ${spinnerFrames[spinnerIndex]}`;
+    }
+    else {
+        displayStatus = 'LLM Chat';
+    }
+    // Get context usage
+    const contextUsed = contextState.usage.currentTokens || 0;
+    const contextLimit = contextState.usage.maxTokens || 8192;
+    return (_jsxs(Box, { height: height, width: "100%", flexDirection: "row", gap: 1, children: [_jsxs(Box, { flexGrow: 1, borderStyle: theme.border.style, borderColor: theme.border.primary, paddingX: 1, alignItems: "center", justifyContent: "flex-start", children: [_jsx(Text, { color: theme.text.accent, bold: true, children: "OLLM:" }), _jsx(Text, { children: " " }), _jsx(Text, { color: isTerminalMode ? 'cyan' : theme.text.primary, children: displayStatus })] }), _jsxs(Box, { borderStyle: theme.border.style, borderColor: theme.border.primary, paddingX: 1, alignItems: "center", justifyContent: "center", children: [_jsx(Text, { color: theme.text.secondary, children: "Context: " }), _jsx(Text, { color: theme.text.accent, children: contextUsed }), _jsx(Text, { color: theme.text.secondary, children: "/" }), _jsx(Text, { color: theme.text.primary, children: contextLimit })] }), _jsx(Box, { borderStyle: theme.border.style, borderColor: theme.border.primary, paddingX: 1, alignItems: "center", justifyContent: "center", children: _jsx(InputRoutingIndicator, { activeDestination: activeDestination, theme: theme, compact: true }) })] }));
+}
+//# sourceMappingURL=SystemBar.js.map

package/dist/ui/components/layout/SystemBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SystemBar.js","sourceRoot":"","sources":["../../../../src/ui/components/layout/SystemBar.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components/layout/TabBar.d.ts

@@ -0,0 +1,19 @@
+import { Theme } from '../../../config/types.js';
+import { TabType } from '../../../features/context/UIContext.js';
+export interface Tab {
+    id: TabType;
+    label: string;
+    icon: string;
+    shortcut: string;
+}
+export declare const tabs: Tab[];
+export interface TabBarProps {
+    activeTab: TabType;
+    onTabChange: (tab: TabType) => void;
+    notifications: Map<TabType, number>;
+    theme: Theme;
+}
+export declare function TabBar({ activeTab, onTabChange, notifications, theme, noBorder, }: TabBarProps & {
+    noBorder?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/dist/ui/components/layout/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/layout/TabBar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAGjD,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AAGjE,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,OAAO,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,IAAI,EAAE,GAAG,EAWrB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,aAAa,EAAE,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACpC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,WAAW,EACX,aAAa,EACb,KAAK,EACL,QAAQ,GACT,EAAE,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CA0DtC"}

package/dist/ui/components/layout/TabBar.js

@@ -0,0 +1,53 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useFocusManager } from '../../../features/context/FocusContext.js';
+import { useKeybinds } from '../../../features/context/KeybindsContext.js';
+import { isKey } from '../../utils/keyUtils.js';
+export const tabs = [
+    { id: 'chat', label: 'Chat', icon: '💬', shortcut: 'Ctrl+1' },
+    { id: 'tools', label: 'Tools', icon: '🛠️', shortcut: 'Ctrl+2' },
+    { id: 'hooks', label: 'Hooks', icon: '🔗', shortcut: 'Ctrl+3' },
+    { id: 'files', label: 'Files', icon: '📁', shortcut: 'Ctrl+4' },
+    { id: 'search', label: 'Search', icon: '🔍', shortcut: 'Ctrl+5' },
+    { id: 'docs', label: 'Docs', icon: '📚', shortcut: 'Ctrl+6' },
+    { id: 'github', label: 'GitHub', icon: '🐙', shortcut: 'Ctrl+7' },
+    { id: 'mcp', label: 'MCP', icon: '🔌', shortcut: 'Ctrl+8' },
+    { id: 'settings', label: 'Settings', icon: '⚙️', shortcut: 'Ctrl+9' },
+    { id: 'bug-report', label: 'Bug Report', icon: '🐛', shortcut: 'Ctrl+0' },
+];
+export function TabBar({ activeTab, onTabChange, notifications, theme, noBorder, }) {
+    const { isFocused, activateContent, setFocus: _setFocus } = useFocusManager();
+    const hasFocus = isFocused('nav-bar');
+    const { activeKeybinds } = useKeybinds();
+    useInput((input, key) => {
+        if (!hasFocus)
+            return;
+        if (isKey(input, key, activeKeybinds.navigation.left)) {
+            const currentIndex = tabs.findIndex((t) => t.id === activeTab);
+            const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+            onTabChange(tabs[prevIndex].id);
+        }
+        if (isKey(input, key, activeKeybinds.navigation.right)) {
+            const currentIndex = tabs.findIndex((t) => t.id === activeTab);
+            const nextIndex = (currentIndex + 1) % tabs.length;
+            onTabChange(tabs[nextIndex].id);
+        }
+        if (isKey(input, key, activeKeybinds.navigation.select)) {
+            // Activate current tab content (switch to active mode)
+            activateContent(activeTab);
+        }
+    }, { isActive: hasFocus });
+    return (_jsx(Box, { flexDirection: "row", justifyContent: "center", alignItems: "center", paddingX: 1, ...(!noBorder && {
+            borderStyle: theme.border.style,
+            borderColor: hasFocus ? theme.border.active : theme.border.primary,
+        }), children: tabs.map((tab, index) => {
+            const isActive = tab.id === activeTab;
+            const notificationCount = notifications.get(tab.id) || 0;
+            const hasNotifications = notificationCount > 0;
+            // Active Text Color: Accent if active (focused or not), Secondary otherwise
+            const textColor = isActive ? theme.text.accent : theme.text.secondary;
+            // Efficient spacing: Left padding only ensures separation and alignment without double gaps
+            return (_jsx(Box, { paddingLeft: index === 0 ? 0 : 1, children: _jsxs(Text, { color: textColor, bold: isActive, children: [tab.icon, " ", tab.label, hasNotifications && _jsxs(Text, { color: theme.text.accent, children: [" (", notificationCount, ")"] })] }) }, tab.id));
+        }) }));
+}
+//# sourceMappingURL=TabBar.js.map

package/dist/ui/components/layout/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../../../src/ui/components/layout/TabBar.tsx"],"names":[],"mappings":"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"}

package/dist/ui/components/layout/TabContainer.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Standard tab container component
+ *
+ * Provides a consistent wrapper for tab content with:
+ * - Focus-aware border styling
+ * - Consistent padding and layout
+ * - Optional title and help text
+ * - Keyboard navigation integration
+ *
+ * @example
+ * ```typescript
+ * <TabContainer
+ *   focusId="tools-panel"
+ *   title="Tools Configuration"
+ *   height={20}
+ *   width={80}
+ *   theme={theme}
+ * >
+ *   <ToolsPanel />
+ * </TabContainer>
+ * ```
+ */
+import React from 'react';
+import type { Theme } from '../../../config/types.js';
+import type { FocusableId } from '../../../features/context/FocusContext.js';
+export interface TabContainerProps {
+    /** Focus ID for this tab */
+    focusId: FocusableId;
+    /** Tab content */
+    children: React.ReactNode;
+    /** Optional title displayed at the top */
+    title?: string;
+    /** Optional help text displayed below title */
+    helpText?: string;
+    /** Container height */
+    height?: number;
+    /** Container width */
+    width?: number;
+    /** Theme for styling */
+    theme: Theme;
+    /** Whether to show border (default: true) */
+    showBorder?: boolean;
+    /** Custom border color (overrides focus-based color) */
+    borderColor?: string;
+    /** Padding inside the container (default: 1) */
+    padding?: number;
+}
+/**
+ * Standard tab container with focus-aware styling
+ *
+ * Features:
+ * - Automatic border color based on focus state
+ * - Optional title and help text
+ * - Consistent padding and layout
+ * - Theme-aware styling
+ */
+export declare const TabContainer: React.FC<TabContainerProps>;
+//# sourceMappingURL=TabContainer.d.ts.map

package/dist/ui/components/layout/TabContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContainer.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/layout/TabContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAE7E,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,OAAO,EAAE,WAAW,CAAC;IACrB,kBAAkB;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+CpD,CAAC"}

package/dist/ui/components/layout/TabContainer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useFocusedBorder } from '../../hooks/useFocusedBorder.js';
+/**
+ * Standard tab container with focus-aware styling
+ *
+ * Features:
+ * - Automatic border color based on focus state
+ * - Optional title and help text
+ * - Consistent padding and layout
+ * - Theme-aware styling
+ */
+export const TabContainer = ({ focusId, children, title, helpText, height, width, theme, showBorder = true, borderColor, padding = 1, }) => {
+    // Get focus-aware border color
+    const focusedBorderColor = useFocusedBorder(focusId);
+    const finalBorderColor = borderColor || focusedBorderColor;
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, borderStyle: showBorder ? 'single' : undefined, borderColor: finalBorderColor, padding: padding, children: [title && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.text.primary, children: title }) })), helpText && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.text.secondary, children: helpText }) })), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: children })] }));
+};
+//# sourceMappingURL=TabContainer.js.map

package/dist/ui/components/layout/TabContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContainer.js","sourceRoot":"","sources":["../../../../src/ui/components/layout/TabContainer.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AA4BnE;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,UAAU,GAAG,IAAI,EACjB,WAAW,EACX,OAAO,GAAG,CAAC,GACZ,EAAE,EAAE;IACH,+BAA+B;IAC/B,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,WAAW,IAAI,kBAAkB,CAAC;IAE3D,OAAO,CACL,MAAC,GAAG,IACF,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC9C,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE,OAAO,aAGf,KAAK,IAAI,CACR,KAAC,GAAG,IAAC,YAAY,EAAE,CAAC,YAClB,KAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,YACjC,KAAK,GACD,GACH,CACP,EAGA,QAAQ,IAAI,CACX,KAAC,GAAG,IAAC,YAAY,EAAE,CAAC,YAClB,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,YAAG,QAAQ,GAAQ,GAChD,CACP,EAGD,KAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,YACpC,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/ui/components/layout/TwoColumnLayout.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Reusable two-column layout component
+ *
+ * Provides a standardized two-column layout used across multiple tabs
+ * (HooksTab, MCPTab, SearchTab, SettingsTab). Handles width calculations
+ * and consistent styling.
+ *
+ * @example
+ * ```typescript
+ * <TwoColumnLayout
+ *   leftColumn={<HooksList />}
+ *   rightColumn={<HookDetails />}
+ *   leftWidth={30}
+ *   height={20}
+ *   theme={theme}
+ * />
+ * ```
+ */
+import React from 'react';
+import type { Theme } from '../../../config/types.js';
+export interface TwoColumnLayoutProps {
+    /** Content for the left column */
+    leftColumn: React.ReactNode;
+    /** Content for the right column */
+    rightColumn: React.ReactNode;
+    /** Width percentage for left column (0-100, default: 30) */
+    leftWidth?: number;
+    /** Total height of the layout */
+    height?: number;
+    /** Total width of the layout */
+    width?: number;
+    /** Theme for styling */
+    theme: Theme;
+    /** Border color for left column */
+    leftBorderColor?: string;
+    /** Border color for right column */
+    rightBorderColor?: string;
+    /** Whether to show borders (default: true) */
+    showBorders?: boolean;
+    /** Gap between columns (default: 0) */
+    gap?: number;
+}
+/**
+ * Two-column layout component with configurable widths
+ *
+ * Features:
+ * - Percentage-based width for left column
+ * - Automatic right column width calculation
+ * - Optional borders with theme colors
+ * - Configurable gap between columns
+ * - Responsive to terminal size
+ */
+export declare const TwoColumnLayout: React.FC<TwoColumnLayoutProps>;
+//# sourceMappingURL=TwoColumnLayout.d.ts.map

package/dist/ui/components/layout/TwoColumnLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoColumnLayout.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/layout/TwoColumnLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,kCAAkC;IAClC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mCAAmC;IACnC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8C1D,CAAC"}

package/dist/ui/components/layout/TwoColumnLayout.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+/**
+ * Two-column layout component with configurable widths
+ *
+ * Features:
+ * - Percentage-based width for left column
+ * - Automatic right column width calculation
+ * - Optional borders with theme colors
+ * - Configurable gap between columns
+ * - Responsive to terminal size
+ */
+export const TwoColumnLayout = ({ leftColumn, rightColumn, leftWidth = 30, height, width, theme, leftBorderColor, rightBorderColor, showBorders = true, gap = 0, }) => {
+    // Calculate column widths
+    const leftColumnWidth = width ? Math.floor((width * leftWidth) / 100) : undefined;
+    const rightColumnWidth = width && leftColumnWidth ? width - leftColumnWidth - gap : undefined;
+    // Default border colors from theme
+    const leftBorder = leftBorderColor || theme.border.primary;
+    const rightBorder = rightBorderColor || theme.border.primary;
+    return (_jsxs(Box, { flexDirection: "row", height: height, width: width, children: [_jsx(Box, { width: leftColumnWidth, flexDirection: "column", borderStyle: showBorders ? 'single' : undefined, borderColor: leftBorder, children: leftColumn }), gap > 0 && _jsx(Box, { width: gap }), _jsx(Box, { width: rightColumnWidth, flexDirection: "column", borderStyle: showBorders ? 'single' : undefined, borderColor: rightBorder, children: rightColumn })] }));
+};
+//# sourceMappingURL=TwoColumnLayout.js.map

package/dist/ui/components/layout/TwoColumnLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoColumnLayout.js","sourceRoot":"","sources":["../../../../src/ui/components/layout/TwoColumnLayout.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AA2B1B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,UAAU,EACV,WAAW,EACX,SAAS,GAAG,EAAE,EACd,MAAM,EACN,KAAK,EACL,KAAK,EACL,eAAe,EACf,gBAAgB,EAChB,WAAW,GAAG,IAAI,EAClB,GAAG,GAAG,CAAC,GACR,EAAE,EAAE;IACH,0BAA0B;IAC1B,MAAM,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAClF,MAAM,gBAAgB,GAAG,KAAK,IAAI,eAAe,CAAC,CAAC,CAAC,KAAK,GAAG,eAAe,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9F,mCAAmC;IACnC,MAAM,UAAU,GAAG,eAAe,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;IAC3D,MAAM,WAAW,GAAG,gBAAgB,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;IAE7D,OAAO,CACL,MAAC,GAAG,IAAC,aAAa,EAAC,KAAK,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,aAEnD,KAAC,GAAG,IACF,KAAK,EAAE,eAAe,EACtB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/C,WAAW,EAAE,UAAU,YAEtB,UAAU,GACP,EAGL,GAAG,GAAG,CAAC,IAAI,KAAC,GAAG,IAAC,KAAK,EAAE,GAAG,GAAI,EAG/B,KAAC,GAAG,IACF,KAAK,EAAE,gBAAgB,EACvB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC/C,WAAW,EAAE,WAAW,YAEvB,WAAW,GACR,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/ui/components/layout/WorkspacePanel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * WorkspacePanel - 3-panel workspace view for the side panel
+ *
+ * Layout:
+ * - Top (Blue): Focused files panel - shows files focused for LLM context
+ * - Middle (Yellow): File tree explorer - navigate and focus files
+ * - Bottom (Red): Keybinds legend - keyboard shortcuts
+ */
+import { Theme } from '../../../config/types.js';
+export interface WorkspacePanelProps {
+    theme: Theme;
+    height: number;
+    width: number;
+    hasFocus: boolean;
+}
+export declare function WorkspacePanel({ theme, hasFocus }: WorkspacePanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WorkspacePanel.d.ts.map

package/dist/ui/components/layout/WorkspacePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspacePanel.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/layout/WorkspacePanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAQjD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAsVtE"}

package/dist/ui/components/layout/WorkspacePanel.js

@@ -0,0 +1,264 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * WorkspacePanel - 3-panel workspace view for the side panel
+ *
+ * Layout:
+ * - Top (Blue): Focused files panel - shows files focused for LLM context
+ * - Middle (Yellow): File tree explorer - navigate and focus files
+ * - Bottom (Red): Keybinds legend - keyboard shortcuts
+ */
+import { readFile } from 'fs/promises';
+import { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useInput, measureElement } from 'ink';
+import { useFocusManager } from '../../../features/context/FocusContext.js';
+import { useServices } from '../../../features/context/ServiceContext.js';
+import { useUI } from '../../../features/context/UIContext.js';
+import { useFileFocus, FileTreeService, FocusSystem } from '../file-explorer/index.js';
+export function WorkspacePanel({ theme, hasFocus }) {
+    const fileFocusContext = useFileFocus();
+    const { container } = useServices();
+    const _focusManager = useFocusManager();
+    const { openFileViewer } = useUI();
+    const [fileTree, setFileTree] = useState(null);
+    const [flattenedFiles, setFlattenedFiles] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [isLoading, setIsLoading] = useState(true);
+    const [containerHeight, setContainerHeight] = useState(30); // Default height
+    // Initialize file explorer services
+    const [fileTreeService] = useState(() => new FileTreeService());
+    const [focusSystem] = useState(() => new FocusSystem(container?.getHookService()?.getMessageBus()));
+    // Calculate panel heights based on container height
+    const panelHeights = useMemo(() => {
+        const topHeight = Math.max(3, Math.floor(containerHeight * 0.15)); // 15% for focused files
+        const bottomHeight = 3; // Fixed 3 lines for keybinds
+        const middleHeight = Math.max(10, containerHeight - topHeight - bottomHeight - 6); // Subtract borders
+        return {
+            top: topHeight,
+            middle: middleHeight,
+            bottom: bottomHeight,
+        };
+    }, [containerHeight]);
+    // Rebuild flattened list whenever tree changes
+    const rebuildFlattenedList = (tree) => {
+        if (!tree || !tree.children) {
+            setFlattenedFiles([]);
+            return;
+        }
+        const flattened = [];
+        const flatten = (node, depth = 0) => {
+            const nodeWithDepth = Object.assign({}, node, { depth });
+            flattened.push(nodeWithDepth);
+            // If it's an expanded directory with children, add them
+            if (node.type === 'directory' && node.expanded && node.children && node.children.length > 0) {
+                node.children.forEach((child) => flatten(child, depth + 1));
+            }
+        };
+        // Start with root's children, not the root itself
+        tree.children.forEach((child) => flatten(child, 0));
+        setFlattenedFiles(flattened);
+    };
+    // Build the file tree on mount
+    useEffect(() => {
+        const buildTree = async () => {
+            try {
+                setIsLoading(true);
+                const rootPath = process.cwd();
+                const tree = await fileTreeService.buildTree({
+                    rootPath,
+                    maxDepth: 5,
+                    excludePatterns: ['node_modules', '.git', 'dist', 'coverage', '.test-snapshots'],
+                });
+                // Expand the root directory to load its children
+                if (tree && tree.type === 'directory') {
+                    await fileTreeService.expandDirectory(tree, [
+                        'node_modules',
+                        '.git',
+                        'dist',
+                        'coverage',
+                        '.test-snapshots',
+                    ]);
+                }
+                setFileTree(tree);
+                rebuildFlattenedList(tree);
+                setIsLoading(false);
+            }
+            catch (error) {
+                console.error('Failed to build file tree:', error);
+                setIsLoading(false);
+            }
+        };
+        buildTree();
+    }, [fileTreeService]);
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (!hasFocus)
+            return;
+        const visibleHeight = panelHeights.middle - 1; // Subtract header line
+        // Allow navigation even when viewer is open
+        if (key.upArrow) {
+            // Move selection up
+            setSelectedIndex((prev) => {
+                const newIndex = Math.max(0, prev - 1);
+                // Auto-scroll if needed
+                if (newIndex < scrollOffset) {
+                    setScrollOffset(newIndex);
+                }
+                return newIndex;
+            });
+        }
+        else if (key.downArrow) {
+            // Move selection down
+            setSelectedIndex((prev) => {
+                const newIndex = Math.min(flattenedFiles.length - 1, prev + 1);
+                // Auto-scroll if needed
+                if (newIndex >= scrollOffset + visibleHeight) {
+                    setScrollOffset(newIndex - visibleHeight + 1);
+                }
+                return newIndex;
+            });
+        }
+        else if (key.return) {
+            const selectedFile = flattenedFiles[selectedIndex];
+            if (!selectedFile)
+                return;
+            if (selectedFile.type === 'directory') {
+                // Toggle directory expansion on Enter
+                const actualNode = fileTree
+                    ? fileTreeService.findNodeByPath(fileTree, selectedFile.path)
+                    : null;
+                if (actualNode && actualNode.type === 'directory') {
+                    if (actualNode.expanded) {
+                        // Collapse if already expanded
+                        actualNode.expanded = false;
+                        fileTreeService.collapseDirectory(actualNode);
+                        rebuildFlattenedList(fileTree);
+                    }
+                    else {
+                        // Expand if collapsed
+                        fileTreeService
+                            .expandDirectory(actualNode, [
+                            'node_modules',
+                            '.git',
+                            'dist',
+                            'coverage',
+                            '.test-snapshots',
+                        ])
+                            .then(() => {
+                            actualNode.expanded = true;
+                            rebuildFlattenedList(fileTree);
+                        })
+                            .catch((err) => {
+                            console.error('Failed to expand directory:', err);
+                        });
+                    }
+                }
+            }
+            else if (selectedFile.type === 'file') {
+                // Open file in main panel viewer
+                readFile(selectedFile.path, 'utf-8')
+                    .then((content) => {
+                    openFileViewer(selectedFile.path, content);
+                })
+                    .catch((err) => {
+                    console.error('Failed to read file:', err);
+                });
+            }
+        }
+        else if (key.rightArrow && !key.ctrl && !key.meta) {
+            // Expand directory on right arrow (only expand, don't collapse)
+            const selectedFile = flattenedFiles[selectedIndex];
+            if (selectedFile && selectedFile.type === 'directory' && !selectedFile.expanded) {
+                // Find the actual node in the tree
+                const actualNode = fileTree
+                    ? fileTreeService.findNodeByPath(fileTree, selectedFile.path)
+                    : null;
+                if (actualNode && actualNode.type === 'directory') {
+                    // Expand the directory
+                    fileTreeService
+                        .expandDirectory(actualNode, [
+                        'node_modules',
+                        '.git',
+                        'dist',
+                        'coverage',
+                        '.test-snapshots',
+                    ])
+                        .then(() => {
+                        actualNode.expanded = true;
+                        // Rebuild the flattened list to show the expanded children
+                        rebuildFlattenedList(fileTree);
+                    })
+                        .catch((err) => {
+                        console.error('Failed to expand directory:', err);
+                    });
+                }
+            }
+        }
+        else if (key.leftArrow && !key.ctrl && !key.meta) {
+            // Collapse directory on left arrow
+            const selectedFile = flattenedFiles[selectedIndex];
+            if (selectedFile && selectedFile.type === 'directory' && selectedFile.expanded) {
+                // Find the actual node in the tree
+                const actualNode = fileTree
+                    ? fileTreeService.findNodeByPath(fileTree, selectedFile.path)
+                    : null;
+                if (actualNode && actualNode.type === 'directory') {
+                    actualNode.expanded = false;
+                    fileTreeService.collapseDirectory(actualNode);
+                    // Rebuild the flattened list to hide the collapsed children
+                    rebuildFlattenedList(fileTree);
+                }
+            }
+        }
+        else if (input === 'f' || input === 'F') {
+            // Toggle focus/unfocus for the selected file
+            const selectedFile = flattenedFiles[selectedIndex];
+            if (selectedFile && selectedFile.type === 'file') {
+                // Check if file is already focused
+                const isAlreadyFocused = fileFocusContext.isFocused(selectedFile.path);
+                if (isAlreadyFocused) {
+                    // Unfocus the file
+                    fileFocusContext.removeFocusedFile(selectedFile.path);
+                }
+                else {
+                    // Focus the file
+                    focusSystem
+                        .focusFile(selectedFile.path)
+                        .then((focusedFile) => {
+                        // Add to the global FileFocusContext
+                        fileFocusContext.addFocusedFile(focusedFile);
+                    })
+                        .catch((err) => {
+                        console.error('Failed to focus file:', err);
+                    });
+                }
+            }
+        }
+    }, { isActive: hasFocus });
+    // Get focused files array - access from state property
+    const focusedFiles = fileFocusContext.state.focusedFiles;
+    const focusedFilesArray = Array.from(focusedFiles.values());
+    // Calculate visible files for the middle panel
+    const visibleFiles = useMemo(() => {
+        const visibleHeight = panelHeights.middle - 1; // Subtract header
+        return flattenedFiles.slice(scrollOffset, scrollOffset + visibleHeight);
+    }, [flattenedFiles, scrollOffset, panelHeights.middle]);
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", flexGrow: 1, ref: (ref) => {
+            if (ref) {
+                const measured = measureElement(ref);
+                if (measured.height && measured.height !== containerHeight) {
+                    setContainerHeight(measured.height);
+                }
+            }
+        }, children: [_jsxs(Box, { height: panelHeights.top, flexShrink: 0, borderStyle: "round", borderColor: "blue", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { color: "blue", bold: true, children: ["\uD83D\uDCCC Focused Files (", focusedFilesArray.length, ")"] }), focusedFilesArray.length === 0 ? (_jsx(Text, { dimColor: true, children: "No files focused" })) : (focusedFilesArray.slice(0, panelHeights.top - 2).map((file, index) => (_jsx(Text, { color: theme.text.primary, children: file.path.split('/').pop() || file.path }, index))))] }), _jsxs(Box, { flexGrow: 1, borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { color: "yellow", bold: true, children: ["\uD83D\uDCC2 Workspace Files (", flattenedFiles.length, " items)"] }), isLoading ? (_jsx(Text, { color: "yellow", children: "Loading file tree..." })) : flattenedFiles.length === 0 ? (_jsx(Text, { dimColor: true, children: "No files found" })) : (_jsx(Box, { flexDirection: "column", children: visibleFiles.map((file, index) => {
+                            const actualIndex = scrollOffset + index;
+                            const isSelected = actualIndex === selectedIndex;
+                            const indent = '  '.repeat(file.depth || 0);
+                            const isDir = file.type === 'directory';
+                            const icon = isDir ? (file.expanded ? '📂' : '📁') : '📄';
+                            const focusIndicator = hasFocus && isSelected ? '→ ' : '  ';
+                            const isFocusedFile = fileFocusContext.isFocused(file.path);
+                            return (_jsxs(Text, { color: isSelected ? 'cyan' : theme.text.primary, backgroundColor: isSelected ? 'blue' : undefined, children: [focusIndicator, indent, icon, " ", file.name, isFocusedFile ? ' 📌' : ''] }, actualIndex));
+                        }) }))] }), _jsxs(Box, { height: panelHeights.bottom, flexShrink: 0, borderStyle: "round", borderColor: "red", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { color: "red", bold: true, children: "\u2328\uFE0F Keybinds" }), _jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: "cyan", children: "\u2191\u2193" }), " Navigate ", _jsx(Text, { color: "cyan", children: "\u2190\u2192" }), " Collapse/Expand", ' ', _jsx(Text, { color: "cyan", children: "Enter" }), " View ", _jsx(Text, { color: "cyan", children: "F" }), " Focus"] })] })] }));
+}
+//# sourceMappingURL=WorkspacePanel.js.map