@allpepper/task-orchestrator-tui 1.0.0

package/src/tui/components/kanban-board.tsx

@@ -0,0 +1,335 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import type { FeatureBoardColumn } from '../../ui/lib/types';
+import { KanbanColumn } from './kanban-column';
+import { ColumnFilterBar } from './column-filter-bar';
+import { FEATURE_KANBAN_STATUSES } from '../../ui/hooks/use-feature-kanban';
+import { useTheme } from '../../ui/context/theme-context';
+
+const MAX_VISIBLE_COLUMNS = 3;
+
+interface KanbanBoardProps {
+  columns: FeatureBoardColumn[];
+  activeColumnIndex: number;
+  selectedFeatureIndex: number;
+  expandedFeatureId: string | null;
+  selectedTaskIndex: number;
+  onColumnChange: (index: number) => void;
+  onFeatureChange: (index: number) => void;
+  onExpandFeature: (featureId: string | null) => void;
+  onTaskChange: (index: number) => void;
+  onSelectTask: (taskId: string) => void;
+  onMoveFeature?: (featureId: string, newStatus: string) => void;
+  isActive?: boolean;
+  availableHeight?: number;
+  availableWidth?: number;
+  // Filter props
+  activeStatuses: Set<string>;
+  isFilterMode: boolean;
+  filterCursorIndex: number;
+  onToggleStatus: (status: string) => void;
+  onFilterCursorChange: (index: number) => void;
+  onFilterModeChange: (isFilterMode: boolean) => void;
+}
+
+export function KanbanBoard({
+  columns,
+  activeColumnIndex,
+  selectedFeatureIndex,
+  expandedFeatureId,
+  selectedTaskIndex,
+  onColumnChange,
+  onFeatureChange,
+  onExpandFeature,
+  onTaskChange,
+  onSelectTask,
+  onMoveFeature,
+  isActive = true,
+  availableHeight,
+  availableWidth,
+  activeStatuses,
+  isFilterMode,
+  filterCursorIndex,
+  onToggleStatus,
+  onFilterCursorChange,
+  onFilterModeChange,
+}: KanbanBoardProps) {
+  const [isMoveMode, setIsMoveMode] = useState(false);
+  const { theme } = useTheme();
+
+  const isTaskMode = expandedFeatureId !== null;
+
+  // Compute viewport window (3 columns max)
+  const totalCols = columns.length;
+  const visibleCount = Math.min(MAX_VISIBLE_COLUMNS, totalCols);
+
+  let viewportStart = 0;
+  if (totalCols > MAX_VISIBLE_COLUMNS) {
+    // Center activeColumnIndex in viewport when possible
+    viewportStart = Math.max(0, activeColumnIndex - Math.floor(visibleCount / 2));
+    viewportStart = Math.min(viewportStart, totalCols - visibleCount);
+  }
+  const viewportEnd = viewportStart + visibleCount;
+
+  const hiddenLeft = viewportStart;
+  const hiddenRight = totalCols - viewportEnd;
+
+  // Dynamic column width
+  const termWidth = availableWidth ?? 120;
+  const columnWidth = Math.floor((termWidth - 4) / Math.min(MAX_VISIBLE_COLUMNS, Math.max(1, totalCols)));
+
+  useInput(
+    (input, key) => {
+      if (!isActive || columns.length === 0) return;
+
+      // Filter mode handling
+      if (isFilterMode) {
+        if (key.escape) {
+          onFilterModeChange(false);
+          return;
+        }
+        if (input === 'h' || key.leftArrow) {
+          const newIdx = (filterCursorIndex - 1 + FEATURE_KANBAN_STATUSES.length) % FEATURE_KANBAN_STATUSES.length;
+          onFilterCursorChange(newIdx);
+          return;
+        }
+        if (input === 'l' || key.rightArrow) {
+          const newIdx = (filterCursorIndex + 1) % FEATURE_KANBAN_STATUSES.length;
+          onFilterCursorChange(newIdx);
+          return;
+        }
+        if (input === ' ') {
+          const status = FEATURE_KANBAN_STATUSES[filterCursorIndex];
+          if (status) {
+            onToggleStatus(status.status);
+          }
+          return;
+        }
+        return; // Absorb all other keys while in filter mode
+      }
+
+      const activeColumn = columns[activeColumnIndex];
+
+      // Move mode handling
+      if (isMoveMode) {
+        const activeFeature = activeColumn?.features[selectedFeatureIndex];
+
+        if (key.escape) {
+          setIsMoveMode(false);
+          return;
+        }
+
+        if (!onMoveFeature || !activeFeature) {
+          setIsMoveMode(false);
+          return;
+        }
+
+        // Move feature left
+        if (input === 'h' || key.leftArrow) {
+          if (activeColumnIndex > 0) {
+            const targetColumn = columns[activeColumnIndex - 1];
+            if (targetColumn) {
+              onMoveFeature(activeFeature.id, targetColumn.status);
+              setIsMoveMode(false);
+            }
+          }
+          return;
+        }
+
+        // Move feature right
+        if (input === 'l' || key.rightArrow) {
+          if (activeColumnIndex < columns.length - 1) {
+            const targetColumn = columns[activeColumnIndex + 1];
+            if (targetColumn) {
+              onMoveFeature(activeFeature.id, targetColumn.status);
+              setIsMoveMode(false);
+            }
+          }
+          return;
+        }
+
+        return;
+      }
+
+      // ---- Task mode (expanded feature) ----
+      if (isTaskMode) {
+        const expandedFeature = activeColumn?.features.find(
+          (f) => f.id === expandedFeatureId
+        );
+        if (!expandedFeature) return;
+
+        const taskCount = expandedFeature.tasks.length;
+
+        // Collapse back to feature mode
+        if (key.escape || (input === 'h' && !key.leftArrow)) {
+          onExpandFeature(null);
+          onTaskChange(-1);
+          return;
+        }
+
+        // Navigate tasks
+        if (input === 'j' || key.downArrow) {
+          if (taskCount > 0) {
+            const newIndex = selectedTaskIndex >= taskCount - 1 ? 0 : selectedTaskIndex + 1;
+            onTaskChange(newIndex);
+          }
+          return;
+        }
+
+        if (input === 'k' || key.upArrow) {
+          if (taskCount > 0) {
+            const newIndex = selectedTaskIndex <= 0 ? taskCount - 1 : selectedTaskIndex - 1;
+            onTaskChange(newIndex);
+          }
+          return;
+        }
+
+        // Select task → open TaskDetail
+        if (key.return) {
+          const task = expandedFeature.tasks[selectedTaskIndex];
+          if (task) {
+            onSelectTask(task.id);
+          }
+          return;
+        }
+
+        return;
+      }
+
+      // ---- Feature mode (default) ----
+      if (!activeColumn) return;
+
+      // Enter filter mode
+      if (input === 'f') {
+        onFilterModeChange(true);
+        return;
+      }
+
+      // Enter move mode
+      if (input === 'm') {
+        if (activeColumn.features.length > 0 && selectedFeatureIndex >= 0) {
+          setIsMoveMode(true);
+        }
+        return;
+      }
+
+      // Column navigation
+      if (input === 'h' || key.leftArrow) {
+        const newIndex = (activeColumnIndex - 1 + columns.length) % columns.length;
+        onColumnChange(newIndex);
+        const newColumn = columns[newIndex];
+        if (newColumn && newColumn.features.length > 0) {
+          onFeatureChange(0);
+        } else {
+          onFeatureChange(-1);
+        }
+        return;
+      }
+
+      if (input === 'l' || key.rightArrow) {
+        const newIndex = (activeColumnIndex + 1) % columns.length;
+        onColumnChange(newIndex);
+        const newColumn = columns[newIndex];
+        if (newColumn && newColumn.features.length > 0) {
+          onFeatureChange(0);
+        } else {
+          onFeatureChange(-1);
+        }
+        return;
+      }
+
+      // Feature navigation within column
+      if (activeColumn.features.length === 0) return;
+
+      if (input === 'j' || key.downArrow) {
+        const maxIndex = activeColumn.features.length - 1;
+        const newIndex = selectedFeatureIndex >= maxIndex ? 0 : selectedFeatureIndex + 1;
+        onFeatureChange(newIndex);
+        return;
+      }
+
+      if (input === 'k' || key.upArrow) {
+        const maxIndex = activeColumn.features.length - 1;
+        const newIndex = selectedFeatureIndex <= 0 ? maxIndex : selectedFeatureIndex - 1;
+        onFeatureChange(newIndex);
+        return;
+      }
+
+      // Expand feature (Enter)
+      if (key.return) {
+        const feature = activeColumn.features[selectedFeatureIndex];
+        if (feature) {
+          onExpandFeature(feature.id);
+          onTaskChange(feature.tasks.length > 0 ? 0 : -1);
+        }
+        return;
+      }
+    },
+    { isActive }
+  );
+
+  const visibleColumns = columns.slice(viewportStart, viewportEnd);
+
+  return (
+    <Box flexDirection="column">
+      {/* Filter chip bar */}
+      {isFilterMode && (
+        <ColumnFilterBar
+          allStatuses={FEATURE_KANBAN_STATUSES}
+          activeStatuses={activeStatuses}
+          isFilterMode={isFilterMode}
+          filterCursorIndex={filterCursorIndex}
+        />
+      )}
+
+      {/* Scroll indicators + Columns */}
+      <Box flexDirection="row" alignItems="center">
+        {/* Left scroll indicator */}
+        {hiddenLeft > 0 ? (
+          <Box width={3} justifyContent="center">
+            <Text color={theme.colors.muted}>{'← '}{hiddenLeft}</Text>
+          </Box>
+        ) : totalCols > MAX_VISIBLE_COLUMNS ? (
+          <Box width={3} />
+        ) : null}
+
+        {/* Visible columns */}
+        {visibleColumns.map((column, index) => {
+          const actualIndex = viewportStart + index;
+          const isColumnActive = isActive && actualIndex === activeColumnIndex;
+
+          return (
+            <KanbanColumn
+              key={column.id}
+              column={column}
+              isActiveColumn={isColumnActive}
+              selectedFeatureIndex={isColumnActive ? selectedFeatureIndex : -1}
+              expandedFeatureId={isColumnActive ? expandedFeatureId : null}
+              selectedTaskIndex={isColumnActive ? selectedTaskIndex : -1}
+              availableHeight={availableHeight}
+              columnWidth={columnWidth}
+            />
+          );
+        })}
+
+        {/* Right scroll indicator */}
+        {hiddenRight > 0 ? (
+          <Box width={3} justifyContent="center">
+            <Text color={theme.colors.muted}>{hiddenRight}{' →'}</Text>
+          </Box>
+        ) : totalCols > MAX_VISIBLE_COLUMNS ? (
+          <Box width={3} />
+        ) : null}
+      </Box>
+
+      {/* Move mode indicator */}
+      {isMoveMode && (
+        <Box marginTop={1} borderStyle="round" borderColor="yellow" paddingX={1}>
+          <Text color="yellow" bold>
+            MOVE: ←/→ to move, Esc cancel
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { BoardTask } from '../../ui/lib/types';
+import { PriorityBadge } from './priority-badge';
+
+export interface KanbanCardProps {
+  task: BoardTask;
+  isSelected: boolean;
+  compact?: boolean;
+}
+
+/**
+ * KanbanCard Component
+ *
+ * Displays a single task as a card in the Kanban board.
+ *
+ * Normal mode:
+ * ┌──────────────────────┐
+ * │ Task title here...   │
+ * │ ●●○ HIGH  #tag1      │
+ * └──────────────────────┘
+ *
+ * Compact mode:
+ * │ Task title...  ●●○   │
+ */
+export function KanbanCard({ task, isSelected, compact = false }: KanbanCardProps) {
+  const truncateText = (text: string, maxLength: number): string => {
+    if (text.length <= maxLength) return text;
+    return text.slice(0, maxLength - 3) + '...';
+  };
+
+  const featureLabel = task.featureName ?? '—';
+
+  if (compact) {
+    // Compact mode: single line with title and priority dots
+    const title = truncateText(task.title, 30);
+    return (
+      <Box paddingX={1}>
+        <Text bold={isSelected}>
+          {title}  <PriorityBadge priority={task.priority} />
+        </Text>
+      </Box>
+    );
+  }
+
+  // Normal mode: bordered card with title, priority, and tag
+  // Card fills column width; content area = column content (26) - card borders (2) - card padding (2) = 22
+  const title = truncateText(task.title, 22);
+
+  return (
+    <Box
+      borderStyle="single"
+      paddingX={1}
+      flexDirection="column"
+    >
+      <Text bold={isSelected}>
+        {title}
+      </Text>
+      <Box gap={1}>
+        <PriorityBadge priority={task.priority} />
+        <Text bold={isSelected} dimColor>
+          {task.priority}
+        </Text>
+        <Text bold={isSelected} dimColor>
+          [{featureLabel}]
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/kanban-column.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { FeatureBoardColumn } from '../../ui/lib/types';
+import { FeatureKanbanCard, getFeatureCardHeight } from './feature-kanban-card';
+import { getStatusColor } from '../../ui/lib/colors';
+import { useTheme } from '../../ui/context/theme-context';
+
+interface KanbanColumnProps {
+  column: FeatureBoardColumn;
+  isActiveColumn: boolean;
+  selectedFeatureIndex: number;
+  expandedFeatureId: string | null;
+  selectedTaskIndex: number;
+  availableHeight?: number;
+  columnWidth?: number;
+}
+
+/**
+ * KanbanColumn Component
+ *
+ * Displays a single column in the feature-based Kanban board.
+ * Uses variable-height scrolling based on actual card line counts.
+ */
+export function KanbanColumn({
+  column,
+  isActiveColumn,
+  selectedFeatureIndex,
+  expandedFeatureId,
+  selectedTaskIndex,
+  availableHeight,
+  columnWidth: columnWidthProp,
+}: KanbanColumnProps) {
+  const { theme } = useTheme();
+  const statusColor = getStatusColor(column.status, theme);
+  const featureCount = column.features.length;
+  const effectiveHeight = availableHeight ?? 30;
+  const COLUMN_WIDTH = columnWidthProp ?? 40;
+
+  // Chrome overhead: column border (2) + padding (2) + header (2) + gap (1) = ~7
+  const columnChromeLines = 7;
+  const maxContentLines = effectiveHeight - columnChromeLines;
+  const maxTaskHeight = Math.max(2, Math.floor((effectiveHeight - columnChromeLines) / 3));
+
+  // Compute heights for all cards
+  const cardHeights = column.features.map((feature) =>
+    getFeatureCardHeight(
+      feature,
+      feature.id === expandedFeatureId,
+      maxTaskHeight,
+      COLUMN_WIDTH - 4 // inner content width (column border + padding)
+    ) + 1 // +1 for gap between cards
+  );
+
+  // Variable-height sliding window
+  let windowStart = 0;
+  let windowEnd = featureCount;
+
+  if (featureCount > 0 && selectedFeatureIndex >= 0) {
+    // Try to fit as many cards as possible around the selected one
+    // First, find a window that includes the selected feature
+    let totalLines = 0;
+
+    // Start from selected and expand outward
+    windowStart = selectedFeatureIndex;
+    windowEnd = selectedFeatureIndex + 1;
+    totalLines = cardHeights[selectedFeatureIndex] ?? 0;
+
+    // Expand upward and downward alternately
+    let expandUp = true;
+    while (true) {
+      if (expandUp && windowStart > 0) {
+        const nextHeight = cardHeights[windowStart - 1] ?? 0;
+        if (totalLines + nextHeight <= maxContentLines) {
+          windowStart--;
+          totalLines += nextHeight;
+          expandUp = false;
+          continue;
+        }
+      }
+      if (!expandUp && windowEnd < featureCount) {
+        const nextHeight = cardHeights[windowEnd] ?? 0;
+        if (totalLines + nextHeight <= maxContentLines) {
+          windowEnd++;
+          totalLines += nextHeight;
+          expandUp = true;
+          continue;
+        }
+      }
+      // Try the other direction if current didn't work
+      if (expandUp && windowEnd < featureCount) {
+        const nextHeight = cardHeights[windowEnd] ?? 0;
+        if (totalLines + nextHeight <= maxContentLines) {
+          windowEnd++;
+          totalLines += nextHeight;
+          continue;
+        }
+      }
+      if (!expandUp && windowStart > 0) {
+        const nextHeight = cardHeights[windowStart - 1] ?? 0;
+        if (totalLines + nextHeight <= maxContentLines) {
+          windowStart--;
+          totalLines += nextHeight;
+          continue;
+        }
+      }
+      break;
+    }
+  }
+
+  const visibleFeatures = column.features.slice(windowStart, windowEnd);
+  const hasFeaturesAbove = windowStart > 0;
+  const hasFeaturesBelow = windowEnd < featureCount;
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle={isActiveColumn ? 'bold' : 'round'}
+      borderColor={isActiveColumn ? theme.colors.accent : theme.colors.border}
+      width={COLUMN_WIDTH}
+      height={effectiveHeight}
+      paddingX={1}
+      paddingY={1}
+    >
+      {/* Column header */}
+      <Box marginBottom={1}>
+        <Text color={statusColor} bold={isActiveColumn}>
+          {column.title} ({featureCount})
+        </Text>
+      </Box>
+
+      {/* Feature list */}
+      {featureCount === 0 ? (
+        <Box justifyContent="center" paddingY={2}>
+          <Text dimColor>No features</Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column" gap={1}>
+          {/* Top scroll indicator */}
+          {hasFeaturesAbove && (
+            <Box justifyContent="center">
+              <Text dimColor>↑ {windowStart} more</Text>
+            </Box>
+          )}
+
+          {/* Visible features */}
+          {visibleFeatures.map((feature, index) => {
+            const actualIndex = windowStart + index;
+            const isFeatureSelected = isActiveColumn && actualIndex === selectedFeatureIndex;
+
+            return (
+              <FeatureKanbanCard
+                key={feature.id}
+                feature={feature}
+                isSelected={isFeatureSelected}
+                isExpanded={feature.id === expandedFeatureId}
+                selectedTaskIndex={isFeatureSelected ? selectedTaskIndex : -1}
+                maxTaskHeight={maxTaskHeight}
+                columnWidth={COLUMN_WIDTH - 4}
+              />
+            );
+          })}
+
+          {/* Bottom scroll indicator */}
+          {hasFeaturesBelow && (
+            <Box justifyContent="center">
+              <Text dimColor>↓ {featureCount - windowEnd} more</Text>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text } from 'ink';
+import { getPriorityColor, getPriorityDots } from '../../ui/lib/colors';
+import { useTheme } from '../../ui/context/theme-context';
+
+interface PriorityBadgeProps {
+  priority: string;
+  isSelected?: boolean;
+}
+
+export function PriorityBadge({ priority }: PriorityBadgeProps) {
+  const { theme } = useTheme();
+  const color = getPriorityColor(priority as any, theme);
+  const dots = getPriorityDots(priority as any);
+  return <Text color={color}>{dots}</Text>;
+}

package/src/tui/components/section-list.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import type { Section } from 'task-orchestrator-bun/src/domain/types';
+import { useTheme } from '../../ui/context/theme-context';
+
+export interface SectionListProps {
+  sections: Section[];
+  selectedIndex: number;
+  onSelectedIndexChange: (index: number) => void;
+  isActive?: boolean;
+}
+
+export function SectionList({
+  sections,
+  selectedIndex,
+  onSelectedIndexChange,
+  isActive = true,
+}: SectionListProps) {
+  const { theme } = useTheme();
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(
+    new Set(sections.map(s => s.id))
+  );
+
+  useInput((input, key) => {
+    if (!isActive || sections.length === 0) return;
+
+    // Navigation: j/down or k/up
+    if (input === 'j' || key.downArrow) {
+      const nextIndex = (selectedIndex + 1) % sections.length;
+      onSelectedIndexChange(nextIndex);
+    } else if (input === 'k' || key.upArrow) {
+      const prevIndex = (selectedIndex - 1 + sections.length) % sections.length;
+      onSelectedIndexChange(prevIndex);
+    } else if ((key.return || input === ' ') && sections[selectedIndex]) {
+      // Toggle expansion: Enter or Space
+      const section = sections[selectedIndex];
+      setExpandedSections(prev => {
+        const next = new Set(prev);
+        if (next.has(section.id)) {
+          next.delete(section.id);
+        } else {
+          next.add(section.id);
+        }
+        return next;
+      });
+    }
+  });
+
+  if (sections.length === 0) {
+    return (
+      <Box>
+        <Text dimColor>No sections available</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {sections.map((section, index) => {
+        const isSelected = index === selectedIndex;
+        const isExpanded = expandedSections.has(section.id);
+        const expandIcon = isExpanded ? '▼' : '▶';
+
+        return (
+          <Box key={section.id} flexDirection="column">
+            {/* Section Header */}
+            <Box>
+              <Text color={isSelected ? theme.colors.highlight : undefined}>
+                {isSelected ? '▎' : '  '}
+              </Text>
+              <Text bold={isSelected} dimColor={!isExpanded}>
+                {expandIcon} {section.title}
+              </Text>
+            </Box>
+
+            {/* Section Content (when expanded) */}
+            {isExpanded && (
+              <Box marginLeft={2} flexDirection="column">
+                {section.usageDescription && (
+                  <Box marginBottom={1}>
+                    <Text italic dimColor>
+                      {section.usageDescription}
+                    </Text>
+                  </Box>
+                )}
+                <Box>
+                  <Text>{section.content}</Text>
+                </Box>
+              </Box>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}