@allpepper/task-orchestrator-tui 1.0.0

package/src/tui/screens/kanban-view.tsx

@@ -0,0 +1,251 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import { useFeatureKanban } from '../../ui/hooks/use-feature-kanban';
+import { useAdapter } from '../../ui/context/adapter-context';
+import { KanbanBoard } from '../components/kanban-board';
+
+interface KanbanViewProps {
+  projectId: string;
+  activeColumnIndex: number;
+  onActiveColumnIndexChange: (index: number) => void;
+  selectedFeatureIndex: number;
+  onSelectedFeatureIndexChange: (index: number) => void;
+  expandedFeatureId: string | null;
+  onExpandedFeatureIdChange: (id: string | null) => void;
+  selectedTaskIndex: number;
+  onSelectedTaskIndexChange: (index: number) => void;
+  onSelectTask: (taskId: string) => void;
+  onBack: () => void;
+  // Filter state (lifted to App for persistence)
+  activeStatuses: Set<string>;
+  onActiveStatusesChange: (statuses: Set<string>) => void;
+}
+
+export function KanbanView({
+  projectId,
+  activeColumnIndex,
+  onActiveColumnIndexChange,
+  selectedFeatureIndex,
+  onSelectedFeatureIndexChange,
+  expandedFeatureId,
+  onExpandedFeatureIdChange,
+  selectedTaskIndex,
+  onSelectedTaskIndexChange,
+  onSelectTask,
+  onBack,
+  activeStatuses,
+  onActiveStatusesChange,
+}: KanbanViewProps) {
+  const { adapter } = useAdapter();
+  const { columns, loading, error, refresh, moveFeature } = useFeatureKanban(projectId);
+  const [projectName, setProjectName] = useState<string>('');
+  const { stdout } = useStdout();
+
+  const terminalRows = stdout?.rows ?? 24;
+  const terminalCols = stdout?.columns ?? 120;
+  const availableHeight = Math.max(10, terminalRows - 6);
+
+  // Filter mode state (local — only active while interacting with chips)
+  const [isFilterMode, setIsFilterMode] = useState(false);
+  const [filterCursorIndex, setFilterCursorIndex] = useState(0);
+
+  // Auto-populate activeStatuses from data on first load (only if empty)
+  useEffect(() => {
+    if (activeStatuses.size === 0 && columns.length > 0) {
+      const populated = new Set<string>();
+      for (const col of columns) {
+        if (col.features.length > 0) {
+          populated.add(col.status);
+        }
+      }
+      // If nothing has features, show all columns
+      if (populated.size === 0) {
+        for (const col of columns) {
+          populated.add(col.status);
+        }
+      }
+      onActiveStatusesChange(populated);
+    }
+  }, [columns, activeStatuses.size, onActiveStatusesChange]);
+
+  // Compute filtered columns
+  const filteredColumns = useMemo(() => {
+    if (activeStatuses.size === 0) return columns;
+    return columns.filter((c) => activeStatuses.has(c.status));
+  }, [columns, activeStatuses]);
+
+  // Fetch project name
+  useEffect(() => {
+    const fetchProject = async () => {
+      const result = await adapter.getProject(projectId);
+      if (result.success) {
+        setProjectName(result.data.name);
+      }
+    };
+    fetchProject();
+  }, [adapter, projectId]);
+
+  // Reset selectedFeatureIndex when activeColumnIndex changes
+  useEffect(() => {
+    if (filteredColumns.length > 0 && activeColumnIndex < filteredColumns.length) {
+      const activeColumn = filteredColumns[activeColumnIndex];
+      if (activeColumn) {
+        if (activeColumn.features.length === 0) {
+          onSelectedFeatureIndexChange(-1);
+        } else if (selectedFeatureIndex >= activeColumn.features.length) {
+          onSelectedFeatureIndexChange(0);
+        } else if (selectedFeatureIndex < 0 && activeColumn.features.length > 0) {
+          onSelectedFeatureIndexChange(0);
+        }
+      }
+    }
+  }, [activeColumnIndex, filteredColumns, selectedFeatureIndex, onSelectedFeatureIndexChange]);
+
+  // Collapse expanded feature if it no longer exists in the active column
+  useEffect(() => {
+    if (expandedFeatureId && filteredColumns.length > 0 && activeColumnIndex < filteredColumns.length) {
+      const activeColumn = filteredColumns[activeColumnIndex];
+      if (activeColumn && !activeColumn.features.some((f) => f.id === expandedFeatureId)) {
+        onExpandedFeatureIdChange(null);
+        onSelectedTaskIndexChange(-1);
+      }
+    }
+  }, [filteredColumns, activeColumnIndex, expandedFeatureId, onExpandedFeatureIdChange, onSelectedTaskIndexChange]);
+
+  // Clamp activeColumnIndex when filtered columns change
+  useEffect(() => {
+    if (filteredColumns.length > 0 && activeColumnIndex >= filteredColumns.length) {
+      onActiveColumnIndexChange(Math.max(0, filteredColumns.length - 1));
+    }
+  }, [filteredColumns.length, activeColumnIndex, onActiveColumnIndexChange]);
+
+  // Handle toggle status
+  const handleToggleStatus = (status: string) => {
+    const next = new Set(activeStatuses);
+    if (next.has(status)) {
+      // Don't allow removing the last status
+      if (next.size > 1) {
+        next.delete(status);
+      }
+    } else {
+      next.add(status);
+    }
+    onActiveStatusesChange(next);
+  };
+
+  // Handle keyboard
+  useInput((input, key) => {
+    // Don't handle keys in filter mode — board handles them
+    if (isFilterMode) return;
+
+    if (key.escape) {
+      if (expandedFeatureId) {
+        // Let KanbanBoard handle Esc in task mode
+        return;
+      }
+      onBack();
+      return;
+    }
+    if (input === 'b' && !expandedFeatureId) {
+      onBack();
+      return;
+    }
+    if (input === 'r') {
+      refresh();
+      return;
+    }
+  });
+
+  // Handle move feature
+  const handleMoveFeature = async (featureId: string, newStatus: string) => {
+    await moveFeature(featureId, newStatus);
+    // After move, adjust indices if needed
+    if (filteredColumns.length > 0 && activeColumnIndex < filteredColumns.length) {
+      const activeColumn = filteredColumns[activeColumnIndex];
+      if (activeColumn) {
+        if (activeColumn.features.length === 0) {
+          onSelectedFeatureIndexChange(-1);
+        } else if (selectedFeatureIndex >= activeColumn.features.length) {
+          onSelectedFeatureIndexChange(Math.max(0, activeColumn.features.length - 1));
+        }
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box padding={1}>
+        <Text>Loading kanban board...</Text>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box padding={1}>
+        <Text color="red">Error: {error}</Text>
+      </Box>
+    );
+  }
+
+  // Clamp indices
+  const clampedActiveColumnIndex = Math.min(activeColumnIndex, Math.max(0, filteredColumns.length - 1));
+  const effectiveActiveColumnIndex = filteredColumns.length > 0 ? clampedActiveColumnIndex : 0;
+
+  const activeColumn = filteredColumns[effectiveActiveColumnIndex];
+  const maxFeatureIndex = activeColumn ? Math.max(0, activeColumn.features.length - 1) : 0;
+  const clampedFeatureIndex = activeColumn && activeColumn.features.length > 0
+    ? Math.min(selectedFeatureIndex, maxFeatureIndex)
+    : -1;
+
+  const isTaskMode = expandedFeatureId !== null;
+  const footerHint = isFilterMode
+    ? 'h/l: navigate chips  Space: toggle  Esc: exit filter'
+    : isTaskMode
+      ? 'j/k: tasks  Enter: open task  Esc/h: collapse  r: refresh'
+      : 'h/l: columns  j/k: features  Enter: expand  m: move  f: filter  r: refresh  Esc: back';
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text bold>{projectName}</Text>
+        <Text> - </Text>
+        <Text>Feature Board</Text>
+      </Box>
+
+      {/* Kanban Board */}
+      {filteredColumns.length === 0 ? (
+        <Text dimColor>No features in this project yet.</Text>
+      ) : (
+        <KanbanBoard
+          columns={filteredColumns}
+          activeColumnIndex={effectiveActiveColumnIndex}
+          selectedFeatureIndex={clampedFeatureIndex}
+          expandedFeatureId={expandedFeatureId}
+          selectedTaskIndex={selectedTaskIndex}
+          onColumnChange={onActiveColumnIndexChange}
+          onFeatureChange={onSelectedFeatureIndexChange}
+          onExpandFeature={onExpandedFeatureIdChange}
+          onTaskChange={onSelectedTaskIndexChange}
+          onSelectTask={onSelectTask}
+          onMoveFeature={handleMoveFeature}
+          isActive={true}
+          availableHeight={availableHeight}
+          availableWidth={terminalCols}
+          activeStatuses={activeStatuses}
+          isFilterMode={isFilterMode}
+          filterCursorIndex={filterCursorIndex}
+          onToggleStatus={handleToggleStatus}
+          onFilterCursorChange={setFilterCursorIndex}
+          onFilterModeChange={setIsFilterMode}
+        />
+      )}
+
+      {/* Footer hints */}
+      <Box marginTop={1}>
+        <Text dimColor>{footerHint}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/screens/project-detail.tsx

@@ -0,0 +1,305 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useAdapter } from '../../ui/context/adapter-context';
+import type { Project, Feature, ProjectStatus, Section, EntityType } from 'task-orchestrator-bun/src/domain/types';
+import { StatusBadge } from '../components/status-badge';
+import { timeAgo } from '../../ui/lib/format';
+import { FormDialog } from '../components/form-dialog';
+import { ErrorMessage } from '../components/error-message';
+import { EmptyState } from '../components/empty-state';
+import { useTheme } from '../../ui/context/theme-context';
+import { SectionList } from '../components/section-list';
+
+interface ProjectDetailProps {
+  projectId: string;
+  onSelectFeature: (featureId: string) => void;
+  onBack: () => void;
+}
+
+export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDetailProps) {
+  const { adapter } = useAdapter();
+  const { theme } = useTheme();
+  const [project, setProject] = useState<Project | null>(null);
+  const [features, setFeatures] = useState<Feature[]>([]);
+  const [sections, setSections] = useState<Section[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedFeatureIndex, setSelectedFeatureIndex] = useState(0);
+  const [selectedSectionIndex, setSelectedSectionIndex] = useState(0);
+  const [mode, setMode] = useState<'idle' | 'edit-project' | 'project-status'>('idle');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [transitions, setTransitions] = useState<string[]>([]);
+  const [transitionIndex, setTransitionIndex] = useState(0);
+
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    const [projectResult, featuresResult, sectionsResult] = await Promise.all([
+      adapter.getProject(projectId),
+      adapter.getFeatures({ projectId }),
+      adapter.getSections('PROJECT' as EntityType, projectId),
+    ]);
+    if (projectResult.success) {
+      setProject(projectResult.data);
+    } else {
+      setError(projectResult.error);
+    }
+    if (featuresResult.success) {
+      setFeatures(featuresResult.data);
+    }
+    if (sectionsResult.success) {
+      setSections(sectionsResult.data);
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId]);
+
+  // Handle keyboard navigation
+  useInput((input, key) => {
+    if (mode !== 'idle') return;
+    if (key.escape || input === 'h' || key.leftArrow) {
+      onBack();
+    }
+    if (input === 'r') {
+      load();
+    }
+    if (input === 'e' && project) {
+      setMode('edit-project');
+    }
+    if (input === 's' && project) {
+      adapter.getAllowedTransitions('PROJECT', project.status).then((result) => {
+        if (result.success) {
+          setTransitions(result.data);
+          setTransitionIndex(0);
+          setMode('project-status');
+        }
+      });
+    }
+    if (features.length > 0) {
+      if (input === 'j' || key.downArrow) {
+        setSelectedFeatureIndex((prev) => Math.min(prev + 1, features.length - 1));
+      }
+      if (input === 'k' || key.upArrow) {
+        setSelectedFeatureIndex((prev) => Math.max(prev - 1, 0));
+      }
+      if (key.return) {
+        const selectedFeature = features[selectedFeatureIndex];
+        if (selectedFeature) {
+          onSelectFeature(selectedFeature.id);
+        }
+      }
+    }
+  });
+
+  useInput((input, key) => {
+    if (mode !== 'project-status' || !project) return;
+    if (input === 'j' || key.downArrow) {
+      setTransitionIndex((prev) => (prev + 1) % Math.max(1, transitions.length));
+      return;
+    }
+    if (input === 'k' || key.upArrow) {
+      setTransitionIndex((prev) => (prev - 1 + Math.max(1, transitions.length)) % Math.max(1, transitions.length));
+      return;
+    }
+    if (key.escape) {
+      setMode('idle');
+      return;
+    }
+    if (key.return) {
+      const nextStatus = transitions[transitionIndex] as ProjectStatus | undefined;
+      if (!nextStatus) return;
+      adapter.setProjectStatus(project.id, nextStatus, project.version).then((result) => {
+        if (!result.success) setLocalError(result.error);
+        load();
+        setMode('idle');
+      });
+    }
+  }, { isActive: mode === 'project-status' });
+
+  if (loading) {
+    return (
+      <Box padding={1}>
+        <Text>Loading project...</Text>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box padding={1}>
+        <Text color={theme.colors.danger}>Error: {error}</Text>
+      </Box>
+    );
+  }
+
+  if (!project) {
+    return (
+      <Box padding={1}>
+        <Text>Project not found</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* Project Header */}
+      <Box marginBottom={1}>
+        <Text bold>{project.name}</Text>
+        <Text> </Text>
+        <StatusBadge status={project.status} />
+      </Box>
+
+      {/* Divider */}
+      <Box marginY={0}>
+        <Text dimColor>{'─'.repeat(40)}</Text>
+      </Box>
+
+      {/* Project Metadata */}
+      <Box marginBottom={1}>
+        <Text>Modified: </Text>
+        <Text dimColor>{timeAgo(new Date(project.modifiedAt))}</Text>
+      </Box>
+
+      {/* Divider */}
+      <Box marginY={0}>
+        <Text dimColor>{'─'.repeat(40)}</Text>
+      </Box>
+
+      {/* Project Details (summary) */}
+      <Box flexDirection="column" marginBottom={1}>
+        <Text bold>Details</Text>
+        <Box marginLeft={1}>
+          <Text wrap="wrap">{project.summary}</Text>
+        </Box>
+      </Box>
+
+      {/* Divider */}
+      {project.description && (
+        <Box marginY={0}>
+          <Text dimColor>{'─'.repeat(40)}</Text>
+        </Box>
+      )}
+
+      {/* Project Description */}
+      {project.description && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold>Description</Text>
+          <Box marginLeft={1}>
+            <Text wrap="wrap">{project.description}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Divider */}
+      <Box marginY={0}>
+        <Text dimColor>{'─'.repeat(40)}</Text>
+      </Box>
+
+      {/* Features List */}
+      <Box flexDirection="column" marginBottom={1}>
+        <Text bold>Features ({features.length})</Text>
+        {features.length === 0 ? (
+          <Box marginLeft={1}><EmptyState message="No features" hint="" /></Box>
+        ) : (
+          <Box flexDirection="column" marginLeft={1}>
+            {features.map((feature, index) => {
+              const isSelected = index === selectedFeatureIndex;
+              return (
+                <Box key={feature.id}>
+                  <Text color={isSelected ? theme.colors.highlight : undefined}>
+                    {isSelected ? '▎' : '  '}
+                  </Text>
+                  <Text> </Text>
+                  <StatusBadge status={feature.status} />
+                  <Text> </Text>
+                  <Text bold={isSelected}>
+                    {feature.name}
+                  </Text>
+                </Box>
+              );
+            })}
+          </Box>
+        )}
+      </Box>
+
+      {/* Divider */}
+      {sections.length > 0 && (
+        <Box marginY={0}>
+          <Text dimColor>{'─'.repeat(40)}</Text>
+        </Box>
+      )}
+
+      {/* Sections Panel - only show if there are sections */}
+      {sections.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold>Sections</Text>
+          <SectionList
+            sections={sections}
+            selectedIndex={selectedSectionIndex}
+            onSelectedIndexChange={setSelectedSectionIndex}
+            isActive={true}
+          />
+        </Box>
+      )}
+
+      {/* Help Footer */}
+      <Box marginTop={1}>
+        <Text dimColor>
+          ESC/h: Back | r: Refresh | e: Edit | s: Status{features.length > 0 ? ' | j/k: Navigate | Enter: Select Feature' : ''}
+        </Text>
+      </Box>
+
+      {localError ? <ErrorMessage message={localError} onDismiss={() => setLocalError(null)} /> : null}
+
+      {mode === 'edit-project' ? (
+        <FormDialog
+          title="Edit Project"
+          fields={[
+            { key: 'name', label: 'Name', required: true, value: project.name },
+            { key: 'summary', label: 'Summary', required: true, value: project.summary },
+            { key: 'description', label: 'Description', value: project.description ?? '' },
+          ]}
+          onCancel={() => setMode('idle')}
+          onSubmit={(values) => {
+            adapter.updateProject(project.id, {
+              name: values.name ?? '',
+              summary: values.summary ?? '',
+              description: values.description || undefined,
+              version: project.version,
+            }).then((result) => {
+              if (!result.success) setLocalError(result.error);
+              load();
+              setMode('idle');
+            });
+          }}
+        />
+      ) : null}
+
+      {mode === 'project-status' ? (
+        <Box flexDirection="column" borderStyle="round" borderColor={theme.colors.accent} paddingX={1} marginTop={1}>
+          <Text bold>Set Project Status</Text>
+          {transitions.length === 0 ? (
+            <Text dimColor>No transitions available</Text>
+          ) : (
+            transitions.map((status, idx) => {
+              const isSelected = idx === transitionIndex;
+              return (
+                <Box key={status}>
+                  <Text color={isSelected ? theme.colors.highlight : undefined}>
+                    {isSelected ? '▎' : '  '}
+                  </Text>
+                  <Text bold={isSelected}> {status}</Text>
+                </Box>
+              );
+            })
+          )}
+          <Text dimColor>Enter apply • Esc cancel</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}