@allpepper/task-orchestrator-tui 1.0.0

package/src/tui/components/status-actions.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { StatusBadge } from './status-badge';
+import { useTheme } from '../../ui/context/theme-context';
+
+export interface StatusActionsProps {
+  currentStatus: string;
+  allowedTransitions: string[];
+  onTransition: (newStatus: string) => void;
+  isActive?: boolean;
+  loading?: boolean;
+}
+
+export function StatusActions({
+  currentStatus,
+  allowedTransitions,
+  onTransition,
+  isActive = true,
+  loading = false,
+}: StatusActionsProps) {
+  const { theme } = useTheme();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useInput((input, key) => {
+    if (!isActive || loading || allowedTransitions.length === 0) return;
+
+    if (input === 'j' || key.downArrow) {
+      const nextIndex = (selectedIndex + 1) % allowedTransitions.length;
+      setSelectedIndex(nextIndex);
+    } else if (input === 'k' || key.upArrow) {
+      const prevIndex = (selectedIndex - 1 + allowedTransitions.length) % allowedTransitions.length;
+      setSelectedIndex(prevIndex);
+    } else if (key.return) {
+      const selectedStatus = allowedTransitions[selectedIndex];
+      if (selectedStatus !== undefined) {
+        onTransition(selectedStatus);
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      {/* Current Status */}
+      <Box marginBottom={1}>
+        <Text>Status: </Text>
+        <StatusBadge status={currentStatus} />
+      </Box>
+
+      {/* Loading Indicator */}
+      {loading && (
+        <Box>
+          <Text dimColor>Loading...</Text>
+        </Box>
+      )}
+
+      {/* Transitions Section */}
+      {!loading && (
+        <>
+          {allowedTransitions.length === 0 ? (
+            <Box>
+              <Text dimColor>No transitions available</Text>
+            </Box>
+          ) : (
+            <Box flexDirection="column">
+              <Box marginBottom={1}>
+                <Text>Change to:</Text>
+              </Box>
+              {allowedTransitions.map((status, index) => {
+                const isSelected = index === selectedIndex;
+                return (
+                  <Box key={status} marginLeft={2}>
+                    <Text color={isSelected ? theme.colors.highlight : undefined}>
+                      {isSelected ? '▎' : '  '}
+                    </Text>
+                    <Text bold={isSelected}>
+                      {' '}{status}
+                    </Text>
+                  </Box>
+                );
+              })}
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/status-badge.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'ink';
+import { getStatusColor } from '../../ui/lib/colors';
+import { useTheme } from '../../ui/context/theme-context';
+import { formatStatus } from '../../ui/lib/format';
+
+interface StatusBadgeProps {
+  status: string;
+  isSelected?: boolean;
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  const { theme } = useTheme();
+  const color = getStatusColor(status, theme);
+  const formattedStatus = formatStatus(status);
+
+  return (
+    <Text color={color}>
+      ● {formattedStatus}
+    </Text>
+  );
+}

package/src/tui/components/tree-view.tsx

@@ -0,0 +1,295 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { StatusBadge } from './status-badge';
+import { PriorityBadge } from './priority-badge';
+import { useTheme } from '../../ui/context/theme-context';
+import type { Feature, Task } from 'task-orchestrator-bun/src/domain/types';
+
+export type TreeRow =
+  | { type: 'feature'; feature: Feature; taskCount: number; expanded: boolean; expandable?: boolean }
+  | { type: 'task'; task: Task; isLast: boolean; featureName?: string; depth?: number }
+  | { type: 'separator'; label: string }
+  | { type: 'group'; id: string; label: string; status: string; taskCount: number; expanded: boolean; depth?: number; expandable?: boolean; featureId?: string };
+
+export interface TreeViewProps {
+  rows: TreeRow[];
+  selectedIndex: number;
+  onSelectedIndexChange: (index: number) => void;
+  onToggleFeature: (featureId: string) => void;
+  onToggleGroup?: (groupId: string) => void;
+  onSelectTask: (taskId: string) => void;
+  onSelectFeature?: (featureId: string) => void;
+  onBack?: () => void;
+  isActive?: boolean;
+}
+
+export function TreeView({
+  rows,
+  selectedIndex,
+  onSelectedIndexChange,
+  onToggleFeature,
+  onToggleGroup,
+  onSelectTask,
+  onSelectFeature,
+  onBack,
+  isActive = true,
+}: TreeViewProps) {
+  const { theme } = useTheme();
+  const getRowDepth = (row: TreeRow): number => {
+    if (row.type === 'group') return row.depth ?? 0;
+    if (row.type === 'task') return row.depth ?? 1;
+    return 0;
+  };
+
+  const isRowExpandable = (row: TreeRow): boolean => {
+    if (row.type === 'feature') {
+      return row.expandable ?? row.taskCount > 0;
+    }
+    if (row.type === 'group') {
+      return row.expandable ?? row.taskCount > 0;
+    }
+    return false;
+  };
+
+  const toggleRow = (row: TreeRow) => {
+    if (row.type === 'feature') {
+      onToggleFeature(row.feature.id);
+    } else if (row.type === 'group' && onToggleGroup) {
+      onToggleGroup(row.id);
+    }
+  };
+
+  const findFirstChildIndex = (index: number): number => {
+    const current = rows[index];
+    if (!current) return -1;
+    const currentDepth = getRowDepth(current);
+
+    for (let i = index + 1; i < rows.length; i++) {
+      const nextDepth = getRowDepth(rows[i]!);
+      if (nextDepth <= currentDepth) return -1;
+      if (nextDepth === currentDepth + 1) return i;
+    }
+
+    return -1;
+  };
+
+  const findParentIndex = (index: number): number => {
+    const current = rows[index];
+    if (!current) return -1;
+    const currentDepth = getRowDepth(current);
+    if (currentDepth <= 0) return -1;
+
+    for (let i = index - 1; i >= 0; i--) {
+      if (getRowDepth(rows[i]!) === currentDepth - 1) {
+        return i;
+      }
+    }
+
+    return -1;
+  };
+
+  const handleNavigateRight = () => {
+    const row = rows[selectedIndex];
+    if (!row) return;
+
+    if (row.type === 'task') {
+      onSelectTask(row.task.id);
+      return;
+    }
+
+    if (row.type === 'separator') return;
+
+    const expandable = isRowExpandable(row);
+    if (expandable && !row.expanded) {
+      toggleRow(row);
+      return;
+    }
+
+    if (row.type === 'feature') {
+      onSelectFeature?.(row.feature.id);
+      return;
+    }
+
+    const childIndex = findFirstChildIndex(selectedIndex);
+    if (childIndex >= 0) {
+      onSelectedIndexChange(childIndex);
+    }
+  };
+
+  const handleNavigateLeft = () => {
+    const row = rows[selectedIndex];
+    if (!row) return;
+
+    if (row.type === 'task') {
+      const parentIndex = findParentIndex(selectedIndex);
+      if (parentIndex >= 0) {
+        const parentRow = rows[parentIndex];
+        if (
+          parentRow &&
+          (parentRow.type === 'feature' || parentRow.type === 'group') &&
+          isRowExpandable(parentRow) &&
+          parentRow.expanded
+        ) {
+          toggleRow(parentRow);
+        }
+        onSelectedIndexChange(parentIndex);
+        return;
+      }
+
+      onBack?.();
+      return;
+    }
+
+    if ((row.type === 'feature' || row.type === 'group') && isRowExpandable(row) && row.expanded) {
+      toggleRow(row);
+      return;
+    }
+
+    const parentIndex = findParentIndex(selectedIndex);
+    if (parentIndex >= 0) {
+      onSelectedIndexChange(parentIndex);
+      return;
+    }
+
+    onBack?.();
+  };
+
+  useInput((input, key) => {
+    if (!isActive) return;
+    if (rows.length === 0) return;
+
+    // Navigation: j/down or k/up
+    if (input === 'j' || key.downArrow) {
+      const nextIndex = (selectedIndex + 1) % rows.length;
+      onSelectedIndexChange(nextIndex);
+    } else if (input === 'k' || key.upArrow) {
+      const prevIndex = (selectedIndex - 1 + rows.length) % rows.length;
+      onSelectedIndexChange(prevIndex);
+    } else if (input === 'l' || key.rightArrow) {
+      handleNavigateRight();
+    } else if (input === 'h' || key.leftArrow) {
+      handleNavigateLeft();
+    } else if ((key.return || key.tab || input === ' ') && rows[selectedIndex]) {
+      // Selection: Enter or Space
+      const row = rows[selectedIndex];
+      if (row.type === 'feature') {
+        if (isRowExpandable(row)) {
+          onToggleFeature(row.feature.id);
+        }
+      } else if (row.type === 'group' && onToggleGroup) {
+        if (isRowExpandable(row)) {
+          onToggleGroup(row.id);
+        }
+      } else if (row.type === 'task') {
+        onSelectTask(row.task.id);
+      }
+      // Separator rows do nothing on selection
+    }
+  }, { isActive });
+
+  const renderRow = (row: TreeRow, index: number) => {
+    const isSelected = index === selectedIndex;
+
+    if (row.type === 'separator') {
+      return (
+        <Box key={`separator-${index}`} width="100%">
+          {/* Selection gutter */}
+          <Text color={isSelected ? theme.colors.highlight : undefined}>
+            {isSelected ? '▎' : '  '}
+          </Text>
+          <Text dimColor bold={isSelected}>
+            ─────────── {row.label} ───────────
+          </Text>
+        </Box>
+      );
+    }
+
+    if (row.type === 'group') {
+      const expandable = isRowExpandable(row);
+      const expandIcon = row.expanded ? '▼' : '▶';
+      const indent = row.depth ? '  '.repeat(row.depth) : '';
+      return (
+        <Box key={row.id} width="100%">
+          {/* Selection gutter */}
+          <Text color={isSelected ? theme.colors.highlight : undefined}>
+            {isSelected ? '▎' : '  '}
+          </Text>
+          <Text color={theme.colors.muted}>
+            {indent}
+          </Text>
+          {expandable && (
+            <Text color={theme.colors.muted}>
+              {expandIcon}{' '}
+            </Text>
+          )}
+          <Text bold={isSelected}>
+            {row.label}
+            {'  '}
+          </Text>
+          <StatusBadge status={row.status} />
+          <Text bold={isSelected}>
+            {'  '}
+            ({row.taskCount})
+          </Text>
+        </Box>
+      );
+    }
+
+    if (row.type === 'feature') {
+      const expandable = isRowExpandable(row);
+      const expandIcon = row.expanded ? '▼' : '▶';
+      return (
+        <Box key={row.feature.id} width="100%">
+          {/* Selection gutter */}
+          <Text color={isSelected ? theme.colors.highlight : undefined}>
+            {isSelected ? '▎' : '  '}
+          </Text>
+          {expandable && (
+            <Text color={theme.colors.muted}>
+              {expandIcon}{' '}
+            </Text>
+          )}
+          <Text bold={isSelected}>
+            {row.feature.name}
+            {'  '}
+          </Text>
+          <StatusBadge status={row.feature.status} />
+          <Text bold={isSelected}>
+            {'  '}
+            {row.taskCount} tasks
+          </Text>
+        </Box>
+      );
+    }
+
+    if (row.type === 'task') {
+      const indent = row.depth ? '  '.repeat(row.depth) : '';
+      const treePrefix = row.isLast ? '└─ ' : '├─ ';
+      return (
+        <Box key={row.task.id} width="100%">
+          {/* Selection gutter */}
+          <Text color={isSelected ? theme.colors.highlight : undefined}>
+            {isSelected ? '▎' : '  '}
+          </Text>
+          <Text color={theme.colors.muted}>
+            {indent}  {treePrefix}
+          </Text>
+          <Text bold={isSelected}>
+            {row.task.title}
+            {row.featureName !== undefined && (row.featureName ? `  [${row.featureName}]` : '  [unassigned]')}
+            {'  '}
+          </Text>
+          <PriorityBadge priority={row.task.priority} />
+        </Box>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Box flexDirection="column">
+      {rows.map((row, index) => renderRow(row, index))}
+    </Box>
+  );
+}

package/src/tui/components/view-mode-chips.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface ViewModeChipsProps {
+  modes: Array<{ key: string; label: string }>;
+  activeMode: string;
+  onModeChange: (mode: string) => void;
+}
+
+export function ViewModeChips({ modes, activeMode }: ViewModeChipsProps) {
+  return (
+    <Box flexDirection="row" gap={1}>
+      {modes.map((mode) => {
+        const isActive = mode.key === activeMode;
+        return (
+          <Text key={mode.key} inverse={isActive} dimColor={!isActive}>
+            {isActive ? `[${mode.label}]` : ` ${mode.label} `}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}

package/src/tui/index.tsx

@@ -0,0 +1,33 @@
+#!/usr/bin/env bun
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+
+// Set default DB path BEFORE dynamically importing modules that read it
+if (!process.env.DATABASE_PATH) {
+  process.env.DATABASE_PATH = join(homedir(), '.task-orchestrator', 'tasks.db');
+}
+
+async function main() {
+  // Check if we're in a TTY environment
+  if (!process.stdin.isTTY) {
+    console.error('TUI requires an interactive terminal. Run directly in a terminal, not through a pipe.');
+    process.exit(1);
+  }
+
+  // Dynamic imports so DATABASE_PATH is set before db/client.ts loads
+  const [{ render }, React, { runMigrations }, { App }] = await Promise.all([
+    import('ink'),
+    import('react'),
+    import('task-orchestrator-bun/src/db/migrate'),
+    import('./app'),
+  ]);
+
+  // Run database migrations first
+  await runMigrations();
+
+  // Render the TUI
+  const { waitUntilExit } = render(<App />);
+  await waitUntilExit();
+}
+
+main().catch(console.error);