tlc-claude-code 1.2.26 → 1.2.28

package/dashboard/dist/components/ActivityFeed.d.ts

@@ -0,0 +1,17 @@
+export type ActivityType = 'commit' | 'claim' | 'complete' | 'review' | 'comment' | 'release';
+export interface Activity {
+    id: string;
+    type: ActivityType;
+    user: string;
+    message: string;
+    timestamp: string;
+    ref?: string;
+}
+export interface ActivityFeedProps {
+    activities: Activity[];
+    filterUser?: string;
+    filterType?: ActivityType;
+    limit?: number;
+    compact?: boolean;
+}
+export declare function ActivityFeed({ activities, filterUser, filterType, limit, compact, }: ActivityFeedProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/ActivityFeed.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+const typeIcons = {
+    commit: { icon: '⊕', color: 'green' },
+    claim: { icon: '◉', color: 'cyan' },
+    complete: { icon: '✓', color: 'green' },
+    review: { icon: '⬡', color: 'magenta' },
+    comment: { icon: '◇', color: 'yellow' },
+    release: { icon: '○', color: 'gray' },
+};
+export function ActivityFeed({ activities, filterUser, filterType, limit, compact = false, }) {
+    // Filter activities
+    const filteredActivities = useMemo(() => {
+        let result = activities;
+        if (filterUser) {
+            result = result.filter((a) => a.user === filterUser);
+        }
+        if (filterType) {
+            result = result.filter((a) => a.type === filterType);
+        }
+        return result;
+    }, [activities, filterUser, filterType]);
+    // Apply limit
+    const displayActivities = limit
+        ? filteredActivities.slice(0, limit)
+        : filteredActivities;
+    const hasMore = limit && filteredActivities.length > limit;
+    const remainingCount = filteredActivities.length - (limit || 0);
+    // Empty state
+    if (activities.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Activity" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No activity yet - it's quiet here" }) })] }));
+    }
+    // No matches
+    if (filteredActivities.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Activity" }), filterUser && _jsxs(Text, { dimColor: true, children: [" - @", filterUser] }), filterType && _jsxs(Text, { dimColor: true, children: [" - ", filterType] })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "No matching activity" }) })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Activity " }), _jsxs(Text, { dimColor: true, children: ["(", filteredActivities.length, ")"] }), filterUser && _jsxs(Text, { color: "cyan", children: [" @", filterUser] }), filterType && _jsxs(Text, { color: "magenta", children: [" [", filterType, "]"] })] }), displayActivities.map((activity) => {
+                const { icon, color } = typeIcons[activity.type];
+                return (_jsxs(Box, { marginBottom: compact ? 0 : 1, flexDirection: compact ? 'row' : 'column', children: [_jsxs(Box, { children: [_jsxs(Text, { color: color, children: [icon, " "] }), _jsxs(Text, { color: "cyan", children: ["@", activity.user] }), _jsxs(Text, { children: [' ', compact ? activity.message.slice(0, 40) : activity.message, compact && activity.message.length > 40 && '...'] })] }), !compact && (_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { dimColor: true, children: activity.timestamp }), activity.ref && (_jsxs(Text, { dimColor: true, children: [" \u2022 ", activity.ref] }))] })), compact && (_jsxs(Text, { dimColor: true, children: [" (", activity.timestamp, ")"] }))] }, activity.id));
+            }), hasMore && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["+", remainingCount, " more activities..."] }) }))] }));
+}

package/dashboard/dist/components/ActivityFeed.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dashboard/dist/components/ActivityFeed.test.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ActivityFeed } from './ActivityFeed.js';
+const sampleActivities = [
+    {
+        id: 'a1',
+        type: 'commit',
+        user: 'alice',
+        message: 'Added user authentication',
+        timestamp: '2 min ago',
+        ref: 'abc1234',
+    },
+    {
+        id: 'a2',
+        type: 'claim',
+        user: 'bob',
+        message: 'Claimed Task 5: Add validation',
+        timestamp: '5 min ago',
+        ref: 'task-5',
+    },
+    {
+        id: 'a3',
+        type: 'complete',
+        user: 'carol',
+        message: 'Completed Task 3: Create schema',
+        timestamp: '10 min ago',
+        ref: 'task-3',
+    },
+    {
+        id: 'a4',
+        type: 'review',
+        user: 'alice',
+        message: 'Requested review on PR #42',
+        timestamp: '15 min ago',
+        ref: 'pr-42',
+    },
+    {
+        id: 'a5',
+        type: 'comment',
+        user: 'dave',
+        message: 'Commented on Task 3',
+        timestamp: '20 min ago',
+        ref: 'task-3',
+    },
+];
+describe('ActivityFeed', () => {
+    describe('Activity Display', () => {
+        it('shows recent activities', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('Added user authentication');
+            expect(lastFrame()).toContain('Claimed Task 5');
+        });
+        it('shows activity user', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('alice');
+            expect(lastFrame()).toContain('bob');
+        });
+        it('shows activity timestamp', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('2 min ago');
+            expect(lastFrame()).toContain('5 min ago');
+        });
+        it('shows activity type icon', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            // Should have icons for different types
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Activity Types', () => {
+        it('shows commit activities', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('Added user authentication');
+        });
+        it('shows claim activities', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('Claimed Task 5');
+        });
+        it('shows complete activities', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('Completed Task 3');
+        });
+        it('shows review activities', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('PR #42');
+        });
+        it('shows comment activities', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('Commented');
+        });
+    });
+    describe('User Filter', () => {
+        it('filters by user', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, filterUser: "alice" }));
+            expect(lastFrame()).toContain('alice');
+            expect(lastFrame()).not.toContain('bob');
+        });
+        it('shows filter indicator', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, filterUser: "alice" }));
+            expect(lastFrame()).toMatch(/filter|alice/i);
+        });
+    });
+    describe('Type Filter', () => {
+        it('filters by activity type', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, filterType: "commit" }));
+            expect(lastFrame()).toContain('Added user authentication');
+            expect(lastFrame()).not.toContain('Claimed Task 5');
+        });
+        it('shows type filter indicator', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, filterType: "commit" }));
+            expect(lastFrame()).toMatch(/commit|filter/i);
+        });
+    });
+    describe('Combined Filters', () => {
+        it('filters by user and type', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, filterUser: "alice", filterType: "commit" }));
+            expect(lastFrame()).toContain('Added user authentication');
+            expect(lastFrame()).not.toContain('PR #42');
+        });
+    });
+    describe('References', () => {
+        it('shows reference links', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toMatch(/abc1234|task-5|pr-42/);
+        });
+    });
+    describe('Empty State', () => {
+        it('shows message when no activities', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: [] }));
+            expect(lastFrame()).toMatch(/no.*activity|quiet|empty/i);
+        });
+        it('shows message when filter matches nothing', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, filterUser: "nonexistent" }));
+            expect(lastFrame()).toMatch(/no.*activity|no.*match/i);
+        });
+    });
+    describe('Limit', () => {
+        it('limits number of activities shown', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, limit: 2 }));
+            const output = lastFrame() || '';
+            // Should only show first 2 activities
+            expect(output).toContain('Added user authentication');
+            expect(output).toContain('Claimed Task 5');
+        });
+        it('shows "more" indicator when limited', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, limit: 2 }));
+            expect(lastFrame()).toMatch(/more|\+\d|\.\.\.|\d+.*remaining/i);
+        });
+    });
+    describe('Compact Mode', () => {
+        it('supports compact display', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities, compact: true }));
+            expect(lastFrame()).toContain('alice');
+        });
+    });
+    describe('Header', () => {
+        it('shows activity count', () => {
+            const { lastFrame } = render(_jsx(ActivityFeed, { activities: sampleActivities }));
+            expect(lastFrame()).toContain('5');
+        });
+    });
+});

package/dashboard/dist/components/BranchSelector.d.ts

@@ -0,0 +1,16 @@
+export interface Branch {
+    name: string;
+    isCurrent?: boolean;
+    ahead?: number;
+    behind?: number;
+    lastCommit?: string;
+}
+export interface BranchSelectorProps {
+    branches: Branch[];
+    currentBranch?: string;
+    initialSelected?: number;
+    filter?: string;
+    compact?: boolean;
+    onSelect?: (branch: Branch) => void;
+}
+export declare function BranchSelector({ branches, currentBranch, initialSelected, filter, compact, onSelect, }: BranchSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/BranchSelector.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+export function BranchSelector({ branches, currentBranch, initialSelected = 0, filter = '', compact = false, onSelect, }) {
+    const [selectedIndex, setSelectedIndex] = useState(initialSelected);
+    // Filter branches
+    const filteredBranches = useMemo(() => {
+        if (!filter)
+            return branches;
+        const lowerFilter = filter.toLowerCase();
+        return branches.filter((b) => b.name.toLowerCase().includes(lowerFilter));
+    }, [branches, filter]);
+    // Determine current branch
+    const current = useMemo(() => {
+        const fromProp = branches.find((b) => b.name === currentBranch);
+        if (fromProp)
+            return fromProp.name;
+        const fromFlag = branches.find((b) => b.isCurrent);
+        return fromFlag?.name;
+    }, [branches, currentBranch]);
+    // Handle keyboard navigation
+    useInput((input, key) => {
+        if (filteredBranches.length === 0)
+            return;
+        if (key.downArrow || input === 'j') {
+            setSelectedIndex((prev) => Math.min(prev + 1, filteredBranches.length - 1));
+        }
+        else if (key.upArrow || input === 'k') {
+            setSelectedIndex((prev) => Math.max(prev - 1, 0));
+        }
+        else if (key.return && onSelect) {
+            onSelect(filteredBranches[selectedIndex]);
+        }
+    });
+    // Empty state
+    if (branches.length === 0) {
+        return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsx(Text, { dimColor: true, children: "No branches found" }) }));
+    }
+    // No matches for filter
+    if (filteredBranches.length === 0) {
+        return (_jsx(Box, { flexDirection: "column", padding: 1, children: _jsxs(Text, { dimColor: true, children: ["No branches matching \"", filter, "\""] }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: [filteredBranches.length, " branch", filteredBranches.length !== 1 ? 'es' : '', filter && ` matching "${filter}"`] }) }), filteredBranches.map((branch, index) => {
+                const isSelected = index === selectedIndex;
+                const isCurrent = branch.name === current || branch.isCurrent;
+                const isSynced = (branch.ahead || 0) === 0 && (branch.behind || 0) === 0;
+                return (_jsxs(Box, { marginBottom: compact ? 0 : 1, children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▶ ' : '  ' }), _jsx(Text, { color: "green", children: isCurrent ? '* ' : '  ' }), _jsx(Text, { bold: isSelected || isCurrent, color: isSelected ? 'cyan' : isCurrent ? 'green' : 'white', children: branch.name }), _jsxs(Box, { marginLeft: 1, children: [branch.ahead !== undefined && branch.ahead > 0 && (_jsxs(Text, { color: "green", children: ["\u2191", branch.ahead] })), branch.behind !== undefined && branch.behind > 0 && (_jsxs(Text, { color: "yellow", children: [" \u2193", branch.behind] })), isSynced && isCurrent && (_jsx(Text, { color: "green", children: " \u2713" }))] }), !compact && branch.lastCommit && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { dimColor: true, children: ["(", branch.lastCommit, ")"] }) }))] }, branch.name));
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u2022 Enter switch" }) })] }));
+}

package/dashboard/dist/components/BranchSelector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dashboard/dist/components/BranchSelector.test.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { BranchSelector } from './BranchSelector.js';
+const sampleBranches = [
+    {
+        name: 'main',
+        isCurrent: true,
+        ahead: 0,
+        behind: 0,
+        lastCommit: '2 hours ago',
+    },
+    {
+        name: 'feature/auth',
+        isCurrent: false,
+        ahead: 3,
+        behind: 1,
+        lastCommit: '30 min ago',
+    },
+    {
+        name: 'feature/dashboard',
+        isCurrent: false,
+        ahead: 5,
+        behind: 0,
+        lastCommit: '1 hour ago',
+    },
+    {
+        name: 'bugfix/login',
+        isCurrent: false,
+        ahead: 1,
+        behind: 2,
+        lastCommit: '3 hours ago',
+    },
+];
+describe('BranchSelector', () => {
+    describe('Current Branch', () => {
+        it('shows current branch name', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('main');
+        });
+        it('highlights current branch', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            // Current branch should have indicator
+            expect(lastFrame()).toContain('*');
+        });
+        it('shows current branch when no branches marked current', () => {
+            const branches = sampleBranches.map(b => ({ ...b, isCurrent: false }));
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: branches, currentBranch: "main" }));
+            expect(lastFrame()).toContain('main');
+        });
+    });
+    describe('Branch List', () => {
+        it('shows all branches', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('main');
+            expect(lastFrame()).toContain('feature/auth');
+            expect(lastFrame()).toContain('feature/dashboard');
+            expect(lastFrame()).toContain('bugfix/login');
+        });
+        it('shows last commit time', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('2 hours ago');
+            expect(lastFrame()).toContain('30 min ago');
+        });
+        it('shows branch count', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('4');
+        });
+    });
+    describe('Ahead/Behind Status', () => {
+        it('shows ahead count', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('↑3');
+        });
+        it('shows behind count', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('↓1');
+        });
+        it('shows both ahead and behind', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            // feature/auth has ahead: 3, behind: 1
+            const output = lastFrame() || '';
+            expect(output).toContain('↑3');
+            expect(output).toContain('↓1');
+        });
+        it('hides zero ahead/behind', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            // main has ahead: 0, behind: 0 - should not show ↑0 ↓0
+            const output = lastFrame() || '';
+            // Count occurrences - main shouldn't add ↑0 or ↓0
+            expect(output).not.toContain('↑0');
+            expect(output).not.toContain('↓0');
+        });
+    });
+    describe('Selection', () => {
+        it('first branch is selected by default', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('▶');
+        });
+        it('accepts initialSelected prop', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches, initialSelected: 2 }));
+            // Third branch (feature/dashboard) should be selected
+            expect(lastFrame()).toContain('▶');
+        });
+        it('calls onSelect when branch selected', () => {
+            const onSelect = vi.fn();
+            render(_jsx(BranchSelector, { branches: sampleBranches, onSelect: onSelect }));
+            // Selection happens on Enter key - tested via stdin
+        });
+    });
+    describe('Navigation', () => {
+        it('shows navigation hint', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('↑/k');
+            expect(lastFrame()).toContain('↓/j');
+        });
+        it('shows switch hint', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches }));
+            expect(lastFrame()).toContain('Enter');
+        });
+    });
+    describe('Empty State', () => {
+        it('shows message when no branches', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: [] }));
+            expect(lastFrame()).toContain('No branches');
+        });
+    });
+    describe('Filter', () => {
+        it('filters branches by name', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches, filter: "feature" }));
+            expect(lastFrame()).toContain('feature/auth');
+            expect(lastFrame()).toContain('feature/dashboard');
+            expect(lastFrame()).not.toContain('bugfix/login');
+        });
+        it('shows filter hint when filtering', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches, filter: "feature" }));
+            expect(lastFrame()).toContain('feature');
+        });
+        it('shows no results when filter matches nothing', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches, filter: "nonexistent" }));
+            expect(lastFrame()).toContain('No branches matching');
+        });
+    });
+    describe('Compact Mode', () => {
+        it('supports compact display', () => {
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: sampleBranches, compact: true }));
+            expect(lastFrame()).toContain('main');
+        });
+    });
+    describe('Status Indicators', () => {
+        it('shows clean status for synced branch', () => {
+            const syncedBranches = [
+                { name: 'main', isCurrent: true, ahead: 0, behind: 0 },
+            ];
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: syncedBranches }));
+            expect(lastFrame()).toContain('✓');
+        });
+        it('shows warning for behind branch', () => {
+            const behindBranches = [
+                { name: 'old-branch', isCurrent: true, ahead: 0, behind: 5 },
+            ];
+            const { lastFrame } = render(_jsx(BranchSelector, { branches: behindBranches }));
+            expect(lastFrame()).toContain('↓5');
+        });
+    });
+});

package/dashboard/dist/components/CommandPalette.d.ts

@@ -0,0 +1,17 @@
+export interface Command {
+    id: string;
+    name: string;
+    description: string;
+    shortcut?: string;
+    category?: string;
+}
+export interface CommandPaletteProps {
+    commands: Command[];
+    query?: string;
+    recentIds?: string[];
+    isActive?: boolean;
+    onSelect: (command: Command) => void;
+    onQueryChange?: (query: string) => void;
+    onClose?: () => void;
+}
+export declare function CommandPalette({ commands, query, recentIds, isActive, onSelect, onQueryChange, onClose, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/CommandPalette.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+function fuzzyMatch(text, query) {
+    const lowerText = text.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    return lowerText.includes(lowerQuery);
+}
+function groupByCategory(commands) {
+    const groups = {};
+    for (const cmd of commands) {
+        const category = cmd.category || 'general';
+        if (!groups[category]) {
+            groups[category] = [];
+        }
+        groups[category].push(cmd);
+    }
+    return Object.entries(groups).map(([category, commands]) => ({
+        category,
+        commands,
+    }));
+}
+export function CommandPalette({ commands, query = '', recentIds = [], isActive = true, onSelect, onQueryChange, onClose, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [internalQuery, setInternalQuery] = useState(query);
+    const effectiveQuery = query || internalQuery;
+    // Filter commands by query
+    const filteredCommands = useMemo(() => {
+        if (!effectiveQuery)
+            return commands;
+        return commands.filter((cmd) => fuzzyMatch(cmd.name, effectiveQuery) ||
+            fuzzyMatch(cmd.description, effectiveQuery) ||
+            fuzzyMatch(cmd.id, effectiveQuery));
+    }, [commands, effectiveQuery]);
+    // Sort with recent commands first
+    const sortedCommands = useMemo(() => {
+        if (recentIds.length === 0)
+            return filteredCommands;
+        const recent = [];
+        const others = [];
+        for (const cmd of filteredCommands) {
+            if (recentIds.includes(cmd.id)) {
+                recent.push(cmd);
+            }
+            else {
+                others.push(cmd);
+            }
+        }
+        return [...recent, ...others];
+    }, [filteredCommands, recentIds]);
+    // Group commands
+    const groupedCommands = useMemo(() => {
+        if (recentIds.length > 0 && !effectiveQuery) {
+            // Show recent section separately
+            const recent = sortedCommands.filter((c) => recentIds.includes(c.id));
+            const others = sortedCommands.filter((c) => !recentIds.includes(c.id));
+            const groups = [];
+            if (recent.length > 0) {
+                groups.push({ category: 'recent', commands: recent });
+            }
+            groups.push(...groupByCategory(others));
+            return groups;
+        }
+        return groupByCategory(sortedCommands);
+    }, [sortedCommands, recentIds, effectiveQuery]);
+    // Flatten for navigation
+    const flatCommands = sortedCommands;
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Close on Escape
+        if (key.escape) {
+            onClose?.();
+            return;
+        }
+        // Execute on Enter
+        if (key.return && flatCommands[selectedIndex]) {
+            onSelect(flatCommands[selectedIndex]);
+            return;
+        }
+        // Navigation
+        if (key.downArrow || input === 'j') {
+            setSelectedIndex((prev) => Math.min(prev + 1, flatCommands.length - 1));
+        }
+        else if (key.upArrow || input === 'k') {
+            setSelectedIndex((prev) => Math.max(prev - 1, 0));
+        }
+        // Backspace
+        else if (key.backspace || key.delete) {
+            const newQuery = internalQuery.slice(0, -1);
+            setInternalQuery(newQuery);
+            onQueryChange?.(newQuery);
+            setSelectedIndex(0);
+        }
+        // Regular character input
+        else if (input && !key.ctrl && !key.meta && input.length === 1) {
+            const newQuery = internalQuery + input;
+            setInternalQuery(newQuery);
+            onQueryChange?.(newQuery);
+            setSelectedIndex(0);
+        }
+    }, { isActive });
+    // Empty commands
+    if (commands.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Command Palette" }) }), _jsx(Text, { dimColor: true, children: "No commands available" })] }));
+    }
+    // No matches
+    if (filteredCommands.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: "> " }), _jsx(Text, { children: effectiveQuery }), _jsx(Text, { color: "cyan", children: "\u258F" })] }), _jsxs(Text, { color: "yellow", children: ["No commands matching \"", effectiveQuery, "\""] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Esc close" }) })] }));
+    }
+    let commandIndex = 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: "> " }), _jsx(Text, { children: effectiveQuery }), _jsx(Text, { color: "cyan", children: "\u258F" }), effectiveQuery && (_jsxs(Text, { dimColor: true, children: [" (", filteredCommands.length, " commands)"] }))] }), groupedCommands.map((group) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "gray", children: group.category.toUpperCase() }) }), group.commands.map((cmd) => {
+                        const isSelected = commandIndex === selectedIndex;
+                        const currentIndex = commandIndex;
+                        commandIndex++;
+                        return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▶ ' : '  ' }), cmd.shortcut && (_jsxs(Text, { color: "yellow", children: ["[", cmd.shortcut, "] "] })), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : 'white', children: cmd.name }), _jsxs(Text, { dimColor: true, children: [" - ", cmd.description] })] }, cmd.id));
+                    })] }, group.category))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u2022 Enter execute \u2022 Esc close" }) })] }));
+}

package/dashboard/dist/components/CommandPalette.test.d.ts

@@ -0,0 +1 @@
+export {};