@sascha384/tic 4.8.0 → 5.0.0

package/dist/components/WorkItemList.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { Box, Text, useInput, useApp } from 'ink';
 import { navigationStore, useNavigationStore, } from '../stores/navigationStore.js';
@@ -9,6 +9,7 @@ import { configStore, useConfigStore } from '../stores/configStore.js';
 import { uiStore, useUIStore, getOverlayTargetIds } from '../stores/uiStore.js';
 import { getMarkedDistribution } from './getMarkedDistribution.js';
 import { TableLayout } from './TableLayout.js';
+import { ColorPill } from './ColorPill.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 import { useScrollViewport } from '../hooks/useScrollViewport.js';
 import { useBackendDataStore, backendDataStore, } from '../stores/backendDataStore.js';
@@ -18,12 +19,108 @@ import { getVisibleCommands, } from '../commands.js';
 import { OverlayPanel } from './OverlayPanel.js';
 import { DetailPanel } from './DetailPanel.js';
 import { undoStore } from '../stores/undoStore.js';
-import { recentCommandsStore, useRecentCommandsStore, } from '../stores/recentCommandsStore.js';
+import { CommandBar } from './CommandBar.js';
 import { isSoftDeleteBackend } from '../backends/types.js';
 import { filterStore, useFilterStore } from '../stores/filterStore.js';
 import { useThemeStore } from '../stores/themeStore.js';
 import { applyFilters, countActiveFilters, summarizeFilters, } from '../filters.js';
 const EMPTY_VIEWS = [];
+function buildWorkItemColumns(capabilities, collapsedIds, accent) {
+    const columns = [];
+    // ID column
+    columns.push({
+        key: 'id',
+        header: 'ID',
+        width: 4, // overridden dynamically via useMemo
+        required: true,
+        sortable: true,
+        render: (ti, selected) => (_jsx(Text, { color: selected ? accent : undefined, bold: selected, dimColor: ti.isCrossType && !selected, children: ti.item.id })),
+    });
+    // Title column (flex)
+    columns.push({
+        key: 'title',
+        header: 'Title',
+        width: -1,
+        required: true,
+        sortable: true,
+        render: (ti, selected) => {
+            const { item, prefix, isCrossType, hasChildren } = ti;
+            const collapseIndicator = hasChildren
+                ? collapsedIds.has(item.id)
+                    ? '\u25B6 '
+                    : '\u25BC '
+                : '  ';
+            const typeLabel = isCrossType ? ` (${item.type})` : '';
+            return (_jsxs(Text, { color: selected ? accent : undefined, bold: selected, dimColor: isCrossType && !selected, wrap: "truncate", children: [capabilities.relationships ? prefix : '', collapseIndicator, item.title, typeLabel] }));
+        },
+    });
+    // Status column
+    columns.push({
+        key: 'status',
+        header: 'Status',
+        width: 14,
+        hidePriority: 3,
+        sortable: true,
+        render: (ti, selected) => {
+            const hasUnresolvedDeps = ti.item.dependsOn.length > 0;
+            return (_jsxs(_Fragment, { children: [capabilities.fields.dependsOn && hasUnresolvedDeps && (_jsxs(Text, { dimColor: ti.isCrossType && !selected, children: ['\u29D7', " "] })), _jsx(ColorPill, { field: "status", value: ti.item.status })] }));
+        },
+    });
+    // Assignee column (conditional)
+    if (capabilities.fields.assignee) {
+        columns.push({
+            key: 'assignee',
+            header: 'Assignee',
+            width: 20,
+            hidePriority: 4,
+            sortable: true,
+            hasData: (items) => items.some(({ item }) => !!item.assignee),
+            render: (ti, selected) => (_jsx(Text, { color: selected ? accent : undefined, bold: selected, dimColor: ti.isCrossType && !selected, wrap: "truncate", children: ti.item.assignee })),
+        });
+    }
+    // Labels column (conditional)
+    if (capabilities.fields.labels) {
+        columns.push({
+            key: 'labels',
+            header: 'Labels',
+            width: 20,
+            hidePriority: 2,
+            hasData: (items) => items.some(({ item }) => item.labels.length > 0),
+            render: (ti) => {
+                const maxWidth = 20;
+                const rendered = [];
+                let usedWidth = 0;
+                for (const label of ti.item.labels) {
+                    const pillWidth = label.length + 2;
+                    const needed = usedWidth === 0 ? pillWidth : pillWidth + 1;
+                    if (usedWidth + needed > maxWidth) {
+                        const remaining = ti.item.labels.length - rendered.length;
+                        if (remaining > 0) {
+                            return (_jsxs(Box, { gap: 1, children: [rendered.map((l) => (_jsx(ColorPill, { field: "label", value: l }, l))), _jsxs(Text, { dimColor: true, children: ["+", remaining] })] }));
+                        }
+                        break;
+                    }
+                    rendered.push(label);
+                    usedWidth += needed;
+                }
+                return (_jsx(Box, { gap: 1, children: rendered.map((l) => (_jsx(ColorPill, { field: "label", value: l }, l))) }));
+            },
+        });
+    }
+    // Priority column (conditional)
+    if (capabilities.fields.priority) {
+        columns.push({
+            key: 'priority',
+            header: 'Priority',
+            width: 12,
+            hidePriority: 1,
+            sortable: true,
+            hasData: (items) => items.some(({ item }) => !!item.priority),
+            render: (ti) => ti.item.priority ? (_jsx(ColorPill, { field: "priority", value: ti.item.priority })) : (_jsx(Text, { children: " " })),
+        });
+    }
+    return columns;
+}
 export function getTargetIds(markedIds, cursorItem) {
     if (markedIds.size > 0) {
         return [...markedIds];
@@ -102,11 +199,9 @@ export function WorkItemList() {
     const filterCount = useMemo(() => countActiveFilters(activeFilters), [activeFilters]);
     const { setCursor, toggleExpanded, toggleMarked, clearMarked, setMarkedIds, setRangeAnchor, clampCursor, removeDeletedItem, toggleSortColumn, clearSort, } = listViewStore.getState();
     // Local state for inputs and templates
-    const [allSearchItems, setAllSearchItems] = useState([]);
     const [templates, setTemplates] = useState([]);
     const [showFullDescription, setShowFullDescription] = useState(false);
     const [descriptionScrollOffset, setDescriptionScrollOffset] = useState(0);
-    const [commandBarQuery, setCommandBarQuery] = useState('');
     // UI overlay state from store
     const { activeOverlay, warning, toast } = useUIStore(useShallow((s) => ({
         activeOverlay: s.activeOverlay,
@@ -268,25 +363,6 @@ export function WorkItemList() {
         setShowFullDescription(false);
         setDescriptionScrollOffset(0);
     }, [cursor]);
-    useEffect(() => {
-        if (activeOverlay?.type !== 'command-bar' || !backend)
-            return;
-        let cancelled = false;
-        void backend
-            .listWorkItems()
-            .then((items) => {
-            if (!cancelled)
-                setAllSearchItems(items);
-        })
-            .catch((err) => {
-            uiStore
-                .getState()
-                .setToast(err instanceof Error ? err.message : 'Failed to load items');
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [activeOverlay?.type, backend]);
     // Description viewport calculation
     const currentItem = treeItems[cursor]?.item;
     const descriptionLines = currentItem?.description?.split('\n') ?? [];
@@ -520,9 +596,12 @@ export function WorkItemList() {
             const comments = item.comments;
             try {
                 const itemUrl = backend?.getItemUrl(item.id) || '';
+                // Suspend terminal for interactive child process
+                process.stdin.setRawMode?.(false);
                 const result = beginImplementation(item, comments, { branchMode, branchCommand, copyToClipboard }, process.cwd(), { itemUrl });
-                // Restore raw mode after interactive shell changed terminal settings
+                // Restore terminal after interactive shell
                 process.stdin.setRawMode?.(true);
+                console.clear();
                 let msg = result.resumed
                     ? `Resumed work on #${item.id}`
                     : `Started work on #${item.id}`;
@@ -533,6 +612,7 @@ export function WorkItemList() {
             }
             catch (e) {
                 process.stdin.setRawMode?.(true);
+                console.clear();
                 setWarning(e instanceof Error ? e.message : 'Failed to start implementation');
             }
             void backendDataStore
@@ -665,12 +745,6 @@ export function WorkItemList() {
             }
         }
     }, { isActive: activeOverlay === null && !showFullDescription });
-    const handleSearchSelect = (item) => {
-        setCommandBarQuery('');
-        closeOverlay();
-        selectWorkItem(item.id);
-        navigate('form');
-    };
     const commandContext = {
         screen: 'list',
         markedCount: markedIds.size,
@@ -682,6 +756,11 @@ export function WorkItemList() {
         gitAvailable,
         hasActiveFilters: filterCount > 0,
         hasSavedViews: savedViews.length > 0,
+        hasSelectedBranch: false,
+        isCurrentBranch: false,
+        hasWorktree: false,
+        hasPrCreateCapability: false,
+        hasSelectedPr: false,
     };
     const paletteCommands = useMemo(() => getVisibleCommands(commandContext), [
         commandContext.markedCount,
@@ -692,52 +771,6 @@ export function WorkItemList() {
         syncManager,
         gitAvailable,
     ]);
-    const recentIds = useRecentCommandsStore((s) => s.recentIds);
-    const commandBarItems = useMemo(() => {
-        const query = commandBarQuery.toLowerCase();
-        // Build command items (recent + categorized)
-        const commandMap = new Map(paletteCommands.map((c) => [c.id, c]));
-        const recentItems = [];
-        for (const id of recentIds) {
-            const cmd = commandMap.get(id);
-            if (cmd) {
-                recentItems.push({
-                    id: `recent-${cmd.id}`,
-                    label: cmd.label,
-                    value: cmd.id,
-                    category: 'Recent',
-                    kind: 'command',
-                });
-            }
-        }
-        const commandItems = paletteCommands.map((cmd) => ({
-            id: cmd.id,
-            label: cmd.label,
-            value: cmd.id,
-            category: cmd.category,
-            kind: 'command',
-        }));
-        let allItems = [...recentItems, ...commandItems];
-        // Filter commands by query
-        if (query) {
-            allItems = allItems.filter((item) => item.label.toLowerCase().includes(query));
-            // Add up to 5 matching issues
-            const matchingIssues = allSearchItems
-                .filter((item) => item.title.toLowerCase().includes(query) ||
-                item.id.toLowerCase().includes(query))
-                .slice(0, 5)
-                .map((item) => ({
-                id: `issue-${item.id}`,
-                label: `#${item.id} ${item.title}`,
-                value: item.id,
-                hint: item.type,
-                category: 'Issues',
-                kind: 'issue',
-            }));
-            allItems = [...allItems, ...matchingIssues];
-        }
-        return allItems;
-    }, [paletteCommands, recentIds, commandBarQuery, allSearchItems]);
     const sortPickerItems = useMemo(() => {
         const columns = [
             { column: 'id', label: 'ID' },
@@ -874,9 +907,7 @@ export function WorkItemList() {
         return items;
     }, [savedViews, defaultView, activeViewName, lastViewName, filterCount]);
     const handleCommandSelect = (command) => {
-        setCommandBarQuery('');
         closeOverlay();
-        recentCommandsStore.getState().addRecent(command.id);
         switch (command.id) {
             case 'create':
                 selectWorkItem(null);
@@ -914,8 +945,10 @@ export function WorkItemList() {
                     const comments = item.comments;
                     try {
                         const itemUrl = backend?.getItemUrl(item.id) || '';
+                        process.stdin.setRawMode?.(false);
                         const result = beginImplementation(item, comments, { branchMode, branchCommand, copyToClipboard }, process.cwd(), { itemUrl });
                         process.stdin.setRawMode?.(true);
+                        console.clear();
                         let msg = result.resumed
                             ? `Resumed work on #${item.id}`
                             : `Started work on #${item.id}`;
@@ -926,6 +959,7 @@ export function WorkItemList() {
                     }
                     catch (e) {
                         process.stdin.setRawMode?.(true);
+                        console.clear();
                         setWarning(e instanceof Error ? e.message : 'Failed to start implementation');
                     }
                     void backendDataStore
@@ -1068,24 +1102,16 @@ export function WorkItemList() {
         ? activeType.charAt(0).toUpperCase() + activeType.slice(1) + 's'
         : '';
     const visibleTreeItems = useMemo(() => treeItems.slice(viewport.start, viewport.end), [treeItems, viewport.start, viewport.end]);
+    const workItemColumns = useMemo(() => {
+        const maxIdLen = visibleTreeItems.reduce((max, { item }) => Math.max(max, item.id.length), 2);
+        const cols = buildWorkItemColumns(capabilities, collapsedIds, accent);
+        cols[0].width = maxIdLen + 2;
+        return cols;
+    }, [visibleTreeItems, capabilities, collapsedIds, accent]);
     const positionText = treeItems.length > viewport.maxVisible
         ? `${cursor + 1}/${treeItems.length}`
         : '';
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { bold: true, color: accent, children: [typeLabel, " \u2014 ", iteration] }), _jsx(Text, { dimColor: mutedDim, children: ` (${filterCount > 0 ? `${items.length}/${unfilteredCount}` : items.length} item${unfilteredCount === 1 ? '' : 's'})` }), markedCount > 0 && (_jsxs(Text, { color: marked, children: [` ● ${markedCount}`, markedDistribution.above > 0 && ` ↑${markedDistribution.above}`, markedDistribution.below > 0 && ` ↓${markedDistribution.below}`] })), filterCount > 0 && (_jsx(Text, { color: warningColor, children: ` [${filterCount} filter${filterCount === 1 ? '' : 's'}${activeViewName ? `: ${activeViewName}` : ''}]` }))] }) }), _jsx(TableLayout, { treeItems: visibleTreeItems, cursor: viewport.visibleCursor, capabilities: capabilities, collapsedIds: collapsedIds, markedIds: markedIds, terminalWidth: terminalWidth, sortStack: sortStack }), treeItems.length === 0 && !loading && initError && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: errorColor, children: "Failed to connect to backend:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: errorColor, children: initError }) }), _jsx(Text, { dimColor: mutedDim, children: "Press , for settings or q to quit." })] })), treeItems.length === 0 && !loading && !initError && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: mutedDim, children: ["No ", activeType ?? 'item', "s in this iteration. Press c to create, / to search all."] }) })), loading && treeItems.length === 0 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: mutedDim, children: "Loading..." }) })), showDetailPanel && treeItems.length > 0 && treeItems[cursor] && (_jsx(Box, { marginTop: 1, children: _jsx(DetailPanel, { item: treeItems[cursor].item, terminalWidth: terminalWidth, showFullDescription: showFullDescription, descriptionScrollOffset: descriptionScrollOffset, maxDescriptionHeight: maxDescriptionHeight }) })), _jsx(Box, { marginTop: 1, children: showFullDescription ? (_jsxs(Box, { children: [_jsx(Text, { dimColor: mutedDim, children: "\u2191\u2193 scroll space/esc close" }), positionText && _jsxs(Text, { dimColor: mutedDim, children: [" ", positionText] })] })) : activeOverlay?.type === 'command-bar' ? (_jsx(OverlayPanel, { title: "Commands", items: commandBarItems, placeholder: "Type to search...", externalFilter: true, onQueryChange: setCommandBarQuery, onSelect: (item) => {
-                        if (item.kind === 'issue') {
-                            const workItem = allSearchItems.find((i) => i.id === item.value);
-                            if (workItem)
-                                handleSearchSelect(workItem);
-                        }
-                        else {
-                            const cmd = paletteCommands.find((c) => c.id === item.value);
-                            if (cmd)
-                                handleCommandSelect(cmd);
-                        }
-                    }, onCancel: () => {
-                        setCommandBarQuery('');
-                        closeOverlay();
-                    } })) : activeOverlay?.type === 'bulk-menu' ? ((() => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { bold: true, color: accent, children: [typeLabel, " \u2014 ", iteration] }), _jsx(Text, { dimColor: mutedDim, children: ` (${filterCount > 0 ? `${items.length}/${unfilteredCount}` : items.length} item${unfilteredCount === 1 ? '' : 's'})` }), markedCount > 0 && (_jsxs(Text, { color: marked, children: [` ● ${markedCount}`, markedDistribution.above > 0 && ` ↑${markedDistribution.above}`, markedDistribution.below > 0 && ` ↓${markedDistribution.below}`] })), filterCount > 0 && (_jsx(Text, { color: warningColor, children: ` [${filterCount} filter${filterCount === 1 ? '' : 's'}${activeViewName ? `: ${activeViewName}` : ''}]` }))] }) }), _jsx(TableLayout, { items: visibleTreeItems, columns: workItemColumns, cursor: viewport.visibleCursor, terminalWidth: terminalWidth, getKey: (ti) => `${ti.item.id}-${ti.item.type}`, isMarked: (ti) => markedIds.has(ti.item.id), sortStack: sortStack }), treeItems.length === 0 && !loading && initError && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: errorColor, children: "Failed to connect to backend:" }), _jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: errorColor, children: initError }) }), _jsx(Text, { dimColor: mutedDim, children: "Press , for settings or q to quit." })] })), treeItems.length === 0 && !loading && !initError && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: mutedDim, children: ["No ", activeType ?? 'item', "s in this iteration. Press c to create, / to search all."] }) })), loading && treeItems.length === 0 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: mutedDim, children: "Loading..." }) })), showDetailPanel && treeItems.length > 0 && treeItems[cursor] && (_jsx(Box, { marginTop: 1, children: _jsx(DetailPanel, { item: treeItems[cursor].item, terminalWidth: terminalWidth, showFullDescription: showFullDescription, descriptionScrollOffset: descriptionScrollOffset, maxDescriptionHeight: maxDescriptionHeight }) })), _jsx(Box, { marginTop: 1, children: showFullDescription ? (_jsxs(Box, { children: [_jsx(Text, { dimColor: mutedDim, children: "\u2191\u2193 scroll space/esc close" }), positionText && _jsxs(Text, { dimColor: mutedDim, children: [" ", positionText] })] })) : activeOverlay?.type === 'command-bar' ? (_jsx(CommandBar, { commands: paletteCommands, onCommand: handleCommandSelect, onCancel: closeOverlay })) : activeOverlay?.type === 'bulk-menu' ? ((() => {
                     const bulkItems = [];
                     bulkItems.push({
                         id: 'status',