@allpepper/task-orchestrator-tui 1.0.0

package/src/tui/components/entity-table.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useTheme } from '../../ui/context/theme-context';
+
+export interface Column<T> {
+  key: keyof T | string;
+  label: string;
+  width?: number;
+  render?: (value: unknown, row: T, context?: { isSelected: boolean }) => React.ReactNode;
+}
+
+export interface EntityTableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  selectedIndex: number;
+  onSelectedIndexChange: (index: number) => void;
+  onSelect?: (row: T) => void;
+  onBack?: () => void;
+  isActive?: boolean;
+  getRowKey?: (row: T, index: number) => string;
+}
+
+export function EntityTable<T>({
+  columns,
+  data,
+  selectedIndex,
+  onSelectedIndexChange,
+  onSelect,
+  onBack,
+  isActive = true,
+  getRowKey,
+}: EntityTableProps<T>) {
+  const { theme } = useTheme();
+
+  useInput((input, key) => {
+    if (!isActive || data.length === 0) return;
+
+    if (input === 'j' || key.downArrow) {
+      const nextIndex = (selectedIndex + 1) % data.length;
+      onSelectedIndexChange(nextIndex);
+    } else if (input === 'k' || key.upArrow) {
+      const prevIndex = (selectedIndex - 1 + data.length) % data.length;
+      onSelectedIndexChange(prevIndex);
+    } else if ((key.return || input === 'l' || key.rightArrow) && onSelect) {
+      const row = data[selectedIndex];
+      if (row !== undefined) {
+        onSelect(row);
+      }
+    } else if (input === 'h' || key.leftArrow) {
+      onBack?.();
+    }
+  }, { isActive });
+
+  const renderCellValue = (column: Column<T>, row: T, isSelected: boolean): React.ReactNode => {
+    const value = row[column.key as keyof T];
+
+    if (column.render) {
+      return column.render(value, row, { isSelected });
+    }
+
+    if (value === null || value === undefined) {
+      return '';
+    }
+
+    return String(value);
+  };
+
+  const getDefaultRowKey = (row: T, index: number): string => {
+    // Try to use 'id' field if available
+    if (row && typeof row === 'object' && 'id' in row) {
+      return String(row.id);
+    }
+    return `row-${index}`;
+  };
+
+  const rowKeyFn = getRowKey || getDefaultRowKey;
+
+  return (
+    <Box flexDirection="column">
+      {/* Header Row */}
+      <Box>
+        {/* Gutter space for selection indicator */}
+        <Box width={2} marginRight={1}>
+          <Text> </Text>
+        </Box>
+        {columns.map((column) => (
+          <Box key={String(column.key)} width={column.width} marginRight={1}>
+            <Text bold dimColor>
+              {column.label}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+
+      {/* Data Rows */}
+      {data.map((row, rowIndex) => {
+        const isSelected = rowIndex === selectedIndex;
+        const rowKey = rowKeyFn(row, rowIndex);
+
+        return (
+          <Box key={rowKey}>
+            {/* Selection gutter */}
+            <Box width={2} marginRight={1}>
+              <Text color={isSelected ? theme.colors.highlight : undefined}>
+                {isSelected ? '▎' : '  '}
+              </Text>
+            </Box>
+            {columns.map((column) => (
+              <Box key={`${rowKey}-${String(column.key)}`} width={column.width} marginRight={1}>
+                <Text bold={isSelected}>
+                  {renderCellValue(column, row, isSelected)}
+                </Text>
+              </Box>
+            ))}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/tui/components/error-message.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useTheme } from '../../ui/context/theme-context';
+
+interface ErrorMessageProps {
+  message: string;
+  onDismiss?: () => void;
+  timeoutMs?: number;
+  isActive?: boolean;
+}
+
+export function ErrorMessage({
+  message,
+  onDismiss,
+  timeoutMs = 4000,
+  isActive = true,
+}: ErrorMessageProps) {
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    if (!onDismiss || timeoutMs <= 0) return;
+    const timer = setTimeout(onDismiss, timeoutMs);
+    return () => clearTimeout(timer);
+  }, [onDismiss, timeoutMs, message]);
+
+  useInput((input, key) => {
+    if (!isActive) return;
+    if (key.escape || input === 'x') {
+      onDismiss?.();
+    }
+  }, { isActive });
+
+  return (
+    <Box borderStyle="round" borderColor={theme.colors.danger} paddingX={1} marginY={1}>
+      <Text color={theme.colors.danger}>
+        ! {message}
+      </Text>
+    </Box>
+  );
+}
+

package/src/tui/components/feature-kanban-card.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { BoardFeature } from '../../ui/lib/types';
+import type { Task } from 'task-orchestrator-bun/src/domain/types';
+import { PriorityBadge } from './priority-badge';
+import { StatusBadge } from './status-badge';
+import { useTheme } from '../../ui/context/theme-context';
+
+export interface FeatureKanbanCardProps {
+  feature: BoardFeature;
+  isSelected: boolean;
+  isExpanded: boolean;
+  selectedTaskIndex: number;
+  maxTaskHeight: number;
+  columnWidth: number;
+}
+
+/**
+ * Calculate the rendered line count for a feature card.
+ * Used by the column to compute variable-height scroll windows.
+ */
+export function getFeatureCardHeight(
+  feature: BoardFeature,
+  isExpanded: boolean,
+  maxTaskHeight: number,
+  columnWidth: number
+): number {
+  // Content width inside the card border (border 2 + padding 2 = 4)
+  const contentWidth = columnWidth - 4;
+
+  // Collapsed: border-top + name lines + status line + border-bottom
+  const nameLines = Math.ceil(feature.name.length / contentWidth) || 1;
+  const collapsedHeight = 2 + nameLines + 1; // borders + name + status row
+
+  if (!isExpanded) return collapsedHeight;
+
+  // Expanded: collapsed chrome + separator + task rows
+  const tasks = feature.tasks;
+  if (tasks.length === 0) return collapsedHeight;
+
+  let taskLines = 1; // separator line
+  const visibleCount = Math.min(tasks.length, maxTaskHeight);
+  const hasAbove = false; // initially scroll starts at 0
+  const hasBelow = tasks.length > visibleCount;
+
+  if (hasAbove) taskLines += 1;
+  if (hasBelow) taskLines += 1;
+
+  for (let i = 0; i < visibleCount; i++) {
+    const task = tasks[i]!;
+    const taskTitleLines = Math.ceil(task.title.length / (contentWidth - 4)) || 1; // indent for tree chrome
+    taskLines += taskTitleLines + 1; // title lines + status line
+  }
+
+  // Account for gap={1} between task rows
+  if (visibleCount > 1) {
+    taskLines += visibleCount - 1;
+  }
+
+  return collapsedHeight + taskLines;
+}
+
+/**
+ * FeatureKanbanCard Component
+ *
+ * Collapsed:
+ * ┌──────────────────────────────────┐
+ * │ Feature Name Wraps If Needed     │
+ * │ ● In Development  ●●●  3/8      │
+ * └──────────────────────────────────┘
+ *
+ * Expanded (tasks visible, internal scroll):
+ * ┌──────────────────────────────────┐
+ * │ Feature Name                     │
+ * │ ● In Development  ●●●  3/8      │
+ * │ ─────────────────────────────    │
+ * │   ↑ 2 more                      │
+ * │ ▎├─ Selected task title wraps    │
+ * │    ● Pending  ●●○               │
+ * │  └─ Another task                 │
+ * │    ● Blocked  ●○○               │
+ * │   ↓ 3 more                      │
+ * └──────────────────────────────────┘
+ */
+export function FeatureKanbanCard({
+  feature,
+  isSelected,
+  isExpanded,
+  selectedTaskIndex,
+  maxTaskHeight,
+  columnWidth,
+}: FeatureKanbanCardProps) {
+  const { theme } = useTheme();
+  const contentWidth = columnWidth - 4; // border + padding
+  const { total, completed } = feature.taskCounts;
+
+  // Task internal scroll
+  const tasks = feature.tasks;
+  const taskCount = tasks.length;
+
+  let windowStart = 0;
+  let windowEnd = Math.min(taskCount, maxTaskHeight);
+
+  if (isExpanded && taskCount > maxTaskHeight && selectedTaskIndex >= 0) {
+    const halfWindow = Math.floor(maxTaskHeight / 2);
+    windowStart = Math.max(0, selectedTaskIndex - halfWindow);
+    windowEnd = Math.min(taskCount, windowStart + maxTaskHeight);
+    if (windowEnd === taskCount) {
+      windowStart = Math.max(0, windowEnd - maxTaskHeight);
+    }
+  }
+
+  const visibleTasks = isExpanded ? tasks.slice(windowStart, windowEnd) : [];
+  const hasTasksAbove = windowStart > 0;
+  const hasTasksBelow = windowEnd < taskCount;
+
+  return (
+    <Box
+      borderStyle={isSelected ? 'double' : 'single'}
+      borderColor={isSelected ? theme.colors.accent : theme.colors.border}
+      flexDirection="column"
+      paddingX={1}
+      width={columnWidth}
+    >
+      {/* Feature name - full wrap, no truncation */}
+      <Text bold={isSelected} wrap="wrap">
+        {feature.name}
+      </Text>
+
+      {/* Status + priority + task count */}
+      <Box gap={1}>
+        <StatusBadge status={feature.status} />
+        <PriorityBadge priority={feature.priority} />
+        <Text dimColor>{completed}/{total}</Text>
+      </Box>
+
+      {/* Expanded: show tasks */}
+      {isExpanded && taskCount > 0 && (
+        <Box flexDirection="column">
+          {/* Separator */}
+          <Text dimColor>{'─'.repeat(Math.max(1, contentWidth - 2))}</Text>
+
+          {/* Scroll-up indicator */}
+          {hasTasksAbove && (
+            <Text dimColor>  ↑ {windowStart} more</Text>
+          )}
+
+          {/* Visible tasks */}
+          <Box flexDirection="column" gap={1}>
+            {visibleTasks.map((task, index) => {
+              const actualIndex = windowStart + index;
+              const isTaskSelected = actualIndex === selectedTaskIndex;
+              const isLast = actualIndex === taskCount - 1;
+              const treeChar = isLast ? '└─' : '├─';
+
+              return (
+                <TaskRow
+                  key={task.id}
+                  task={task}
+                  isSelected={isTaskSelected}
+                  treeChar={treeChar}
+                  accentColor={theme.colors.accent}
+                  mutedColor={theme.colors.muted}
+                />
+              );
+            })}
+          </Box>
+
+          {/* Scroll-down indicator */}
+          {hasTasksBelow && (
+            <Text dimColor>  ↓ {taskCount - windowEnd} more</Text>
+          )}
+        </Box>
+      )}
+
+      {/* Expanded with no tasks */}
+      {isExpanded && taskCount === 0 && (
+        <Box flexDirection="column">
+          <Text dimColor>{'─'.repeat(Math.max(1, contentWidth - 2))}</Text>
+          <Text dimColor>  No tasks</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function TaskRow({
+  task,
+  isSelected,
+  treeChar,
+  accentColor,
+  mutedColor,
+}: {
+  task: Task;
+  isSelected: boolean;
+  treeChar: string;
+  accentColor: string;
+  mutedColor: string;
+}) {
+  return (
+    <Box flexDirection="column">
+      <Box>
+        {isSelected && <Text color={accentColor}>▎</Text>}
+        <Text color={mutedColor}>{treeChar} </Text>
+        <Text bold={isSelected} wrap="wrap">
+          {task.title}
+        </Text>
+      </Box>
+      <Box paddingLeft={isSelected ? 4 : 3}>
+        <StatusBadge status={task.status} />
+        <Text> </Text>
+        <PriorityBadge priority={task.priority} />
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/footer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from '../../ui/context/theme-context';
+
+export interface FooterProps {
+  shortcuts: Array<{ key: string; label: string }>;
+}
+
+export const Footer: React.FC<FooterProps> = ({ shortcuts }) => {
+  const { theme } = useTheme();
+
+  return (
+    <Box flexDirection="column">
+      <Box
+        borderStyle="single"
+        borderTop
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+      >
+        <Text> </Text>
+      </Box>
+      <Box paddingX={1} flexWrap="wrap">
+        {shortcuts.map((shortcut, i) => (
+          <Box key={`${shortcut.key}-${shortcut.label}`}>
+            {i > 0 ? <Text dimColor> · </Text> : null}
+            <Text color={theme.colors.accent} bold>{shortcut.key}</Text>
+            <Text> {shortcut.label}</Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};