@allpepper/task-orchestrator-tui 1.0.0

package/src/tui/screens/dashboard.tsx

@@ -0,0 +1,248 @@
+import React, { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useProjects } from '../../ui/hooks/use-data';
+import { useAdapter } from '../../ui/context/adapter-context';
+import { useTheme } from '../../ui/context/theme-context';
+import { EntityTable } from '../components/entity-table';
+import { StatusBadge } from '../components/status-badge';
+import { timeAgo } from '../../ui/lib/format';
+import type { ProjectWithCounts } from '../../ui/hooks/use-data';
+import { ConfirmDialog } from '../components/confirm-dialog';
+import { ErrorMessage } from '../components/error-message';
+import { EmptyState } from '../components/empty-state';
+import { FormDialog } from '../components/form-dialog';
+import type { ProjectStatus } from 'task-orchestrator-bun/src/domain/types';
+
+interface DashboardProps {
+  selectedIndex: number;
+  onSelectedIndexChange: (index: number) => void;
+  onSelectProject: (projectId: string) => void;
+  onViewProject: (projectId: string) => void;
+  onBack?: () => void;
+}
+
+export function Dashboard({ selectedIndex, onSelectedIndexChange, onSelectProject, onViewProject, onBack }: DashboardProps) {
+  const { adapter } = useAdapter();
+  const { theme } = useTheme();
+  const { projects, loading, error, refresh } = useProjects();
+  const [mode, setMode] = useState<'idle' | 'create' | 'edit' | 'delete' | 'status'>('idle');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [allowedTransitions, setAllowedTransitions] = useState<string[]>([]);
+  const [statusIndex, setStatusIndex] = useState(0);
+
+  const columns = [
+    {
+      key: 'name',
+      label: 'Name',
+      width: 50,
+    },
+    {
+      key: 'status',
+      label: 'Status',
+      width: 20,
+      render: (_value: unknown, row: ProjectWithCounts, context?: { isSelected: boolean }) => (
+        <StatusBadge status={row.status} isSelected={context?.isSelected} />
+      ),
+    },
+    {
+      key: 'tasks',
+      label: 'Tasks',
+      width: 15,
+      render: (_value: unknown, row: ProjectWithCounts) =>
+        `${row.taskCounts.completed}/${row.taskCounts.total}`,
+    },
+    {
+      key: 'modifiedAt',
+      label: 'Modified',
+      width: 15,
+      render: (_value: unknown, row: ProjectWithCounts) => timeAgo(row.modifiedAt),
+    },
+  ];
+
+  // Clamp selectedIndex if data changed
+  const clampedSelectedIndex = Math.min(selectedIndex, Math.max(0, projects.length - 1));
+  const effectiveSelectedIndex = projects.length > 0 ? clampedSelectedIndex : 0;
+  const selectedProject = projects[effectiveSelectedIndex];
+
+  const statusTargets = useMemo(() => allowedTransitions as ProjectStatus[], [allowedTransitions]);
+
+  useInput((input, key) => {
+    // Handle status mode
+    if (mode === 'status') {
+      if (input === 'j' || key.downArrow) {
+        setStatusIndex((prev) => (prev + 1) % Math.max(1, statusTargets.length));
+        return;
+      }
+      if (input === 'k' || key.upArrow) {
+        setStatusIndex((prev) => (prev - 1 + Math.max(1, statusTargets.length)) % Math.max(1, statusTargets.length));
+        return;
+      }
+      if (key.escape) {
+        setMode('idle');
+        return;
+      }
+      if (key.return && selectedProject && statusTargets[statusIndex]) {
+        const next = statusTargets[statusIndex];
+        adapter.setProjectStatus(selectedProject.id, next, selectedProject.version).then((result) => {
+          if (!result.success) {
+            setLocalError(result.error);
+          }
+          refresh();
+          setMode('idle');
+        });
+      }
+      return;
+    }
+
+    // Handle idle mode
+    if (mode === 'idle') {
+      if (input === 'n') {
+        setMode('create');
+        return;
+      }
+      if (input === 'e' && selectedProject) {
+        setMode('edit');
+        return;
+      }
+      if (input === 'f' && selectedProject) {
+        onViewProject(selectedProject.id);
+        return;
+      }
+      if (input === 'd' && selectedProject) {
+        setMode('delete');
+        return;
+      }
+      if (input === 's' && selectedProject) {
+        adapter.getAllowedTransitions('PROJECT', selectedProject.status).then((result) => {
+          if (result.success) {
+            setAllowedTransitions(result.data);
+            setMode('status');
+          }
+        });
+        return;
+      }
+      if (input === 'r') {
+        refresh();
+      }
+      if (key.escape && mode !== 'idle') {
+        setMode('idle');
+      }
+    }
+  });
+
+  return (
+    <Box paddingX={1} paddingY={1} flexDirection="column">
+      {loading ? (
+        <Text>Loading projects...</Text>
+      ) : null}
+      {!loading && error && !localError ? (
+        <Text color={theme.colors.danger}>Error: {error}</Text>
+      ) : null}
+
+      {localError ? (
+        <ErrorMessage message={localError} onDismiss={() => setLocalError(null)} />
+      ) : null}
+
+      {!loading && (!error || localError) ? (
+        projects.length === 0 && mode === 'idle' ? (
+          <EmptyState message="No projects found." hint="Press n to create a project." />
+        ) : (
+          <EntityTable
+            columns={columns}
+            data={projects}
+            selectedIndex={effectiveSelectedIndex}
+            onSelectedIndexChange={onSelectedIndexChange}
+            onSelect={(project) => onSelectProject(project.id)}
+            onBack={onBack}
+            isActive={mode === 'idle'}
+          />
+        )
+      ) : null}
+
+      {mode === 'create' ? (
+        <FormDialog
+          title="Create Project"
+          fields={[
+            { key: 'name', label: 'Name', required: true },
+            { key: 'summary', label: 'Summary', required: true },
+            { key: 'description', label: 'Description' },
+          ]}
+          onCancel={() => setMode('idle')}
+          onSubmit={(values) => {
+            adapter.createProject({
+              name: values.name ?? '',
+              summary: values.summary ?? '',
+              description: values.description || undefined,
+            }).then((result) => {
+              if (!result.success) {
+                setLocalError(result.error);
+              }
+              refresh();
+              setMode('idle');
+            });
+          }}
+        />
+      ) : null}
+
+      {mode === 'edit' && selectedProject ? (
+        <FormDialog
+          title="Edit Project"
+          fields={[
+            { key: 'name', label: 'Name', required: true, value: selectedProject.name },
+            { key: 'summary', label: 'Summary', required: true, value: selectedProject.summary },
+            { key: 'description', label: 'Description', value: selectedProject.description ?? '' },
+          ]}
+          onCancel={() => setMode('idle')}
+          onSubmit={(values) => {
+                adapter.updateProject(selectedProject.id, {
+              name: values.name ?? '',
+              summary: values.summary ?? '',
+              description: values.description || undefined,
+              version: selectedProject.version,
+            }).then((result) => {
+              if (!result.success) {
+                setLocalError(result.error);
+              }
+              refresh();
+              setMode('idle');
+            });
+          }}
+        />
+      ) : null}
+
+      {mode === 'delete' && selectedProject ? (
+        <ConfirmDialog
+          title="Delete Project"
+          message={`Delete "${selectedProject.name}"?`}
+          onCancel={() => setMode('idle')}
+          onConfirm={() => {
+            adapter.deleteProject(selectedProject.id).then((result) => {
+              if (!result.success) {
+                setLocalError(result.error);
+              }
+              refresh();
+              setMode('idle');
+            });
+          }}
+        />
+      ) : null}
+
+      {mode === 'status' && selectedProject ? (
+        <Box flexDirection="column" borderStyle="round" borderColor={theme.colors.highlight} paddingX={1} marginTop={1}>
+          <Text bold>Set Project Status</Text>
+          {statusTargets.length === 0 ? (
+            <Text dimColor>No transitions available</Text>
+          ) : (
+            statusTargets.map((status, idx) => (
+              <Text key={status} inverse={idx === statusIndex}>
+                {idx === statusIndex ? '>' : ' '} {status}
+              </Text>
+            ))
+          )}
+          <Text dimColor>Enter apply • Esc cancel</Text>
+        </Box>
+      ) : null}
+
+    </Box>
+  );
+}

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

@@ -0,0 +1,312 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useAdapter } from '../../ui/context/adapter-context';
+import { useFeature } from '../../ui/hooks/use-data';
+import type { FeatureStatus, Priority } from 'task-orchestrator-bun/src/domain/types';
+import { StatusBadge } from '../components/status-badge';
+import { PriorityBadge } from '../components/priority-badge';
+import { SectionList } from '../components/section-list';
+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';
+
+interface FeatureDetailProps {
+  featureId: string;
+  onSelectTask: (taskId: string) => void;
+  onBack: () => void;
+}
+
+export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetailProps) {
+  const { adapter } = useAdapter();
+  const { theme } = useTheme();
+  const { feature, tasks, sections, loading, error, refresh } = useFeature(featureId);
+  const [selectedTaskIndex, setSelectedTaskIndex] = useState(0);
+  const [selectedSectionIndex, setSelectedSectionIndex] = useState(0);
+  const [mode, setMode] = useState<'idle' | 'edit-feature' | 'create-task' | 'feature-status'>('idle');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [transitions, setTransitions] = useState<string[]>([]);
+  const [transitionIndex, setTransitionIndex] = useState(0);
+
+  // Handle keyboard navigation
+  useInput((input, key) => {
+    if (mode !== 'idle') return;
+    if (key.escape || input === 'h' || key.leftArrow) {
+      onBack();
+    }
+    if (input === 'r') {
+      refresh();
+    }
+    if (input === 'e' && feature) {
+      setMode('edit-feature');
+    }
+    if (input === 'n' && feature) {
+      setMode('create-task');
+    }
+    if (input === 's' && feature) {
+      adapter.getAllowedTransitions('FEATURE', feature.status).then((result) => {
+        if (result.success) {
+          setTransitions(result.data);
+          setTransitionIndex(0);
+          setMode('feature-status');
+        }
+      });
+    }
+    if (tasks.length > 0) {
+      if (input === 'j' || key.downArrow) {
+        setSelectedTaskIndex((prev) => Math.min(prev + 1, tasks.length - 1));
+      }
+      if (input === 'k' || key.upArrow) {
+        setSelectedTaskIndex((prev) => Math.max(prev - 1, 0));
+      }
+      if (key.return) {
+        const selectedTask = tasks[selectedTaskIndex];
+        if (selectedTask) {
+          onSelectTask(selectedTask.id);
+        }
+      }
+    }
+  });
+
+  useInput((input, key) => {
+    if (mode !== 'feature-status' || !feature) 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 FeatureStatus | undefined;
+      if (!nextStatus) return;
+      adapter.setFeatureStatus(feature.id, nextStatus, feature.version).then((result) => {
+        if (!result.success) setLocalError(result.error);
+        refresh();
+        setMode('idle');
+      });
+    }
+  }, { isActive: mode === 'feature-status' });
+
+  if (loading) {
+    return (
+      <Box padding={1}>
+        <Text>Loading feature...</Text>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box padding={1}>
+        <Text color={theme.colors.danger}>Error: {error}</Text>
+      </Box>
+    );
+  }
+
+  if (!feature) {
+    return (
+      <Box padding={1}>
+        <Text>Feature not found</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* Feature Header */}
+      <Box marginBottom={1}>
+        <Text bold>{feature.name}</Text>
+        <Text> </Text>
+        <StatusBadge status={feature.status} />
+      </Box>
+
+      {/* Divider */}
+      <Box marginY={0}>
+        <Text dimColor>{'─'.repeat(40)}</Text>
+      </Box>
+
+      {/* Feature Metadata */}
+      <Box marginBottom={1}>
+        <Text>Priority: </Text>
+        <PriorityBadge priority={feature.priority} />
+        <Text>  Modified: </Text>
+        <Text dimColor>{timeAgo(new Date(feature.modifiedAt))}</Text>
+      </Box>
+
+      {/* Divider */}
+      <Box marginY={0}>
+        <Text dimColor>{'─'.repeat(40)}</Text>
+      </Box>
+
+      {/* Feature Details (summary) */}
+      <Box flexDirection="column" marginBottom={1}>
+        <Text bold>Details</Text>
+        <Box marginLeft={1}>
+          <Text wrap="wrap">{feature.summary}</Text>
+        </Box>
+      </Box>
+
+      {/* Divider */}
+      {feature.description && (
+        <Box marginY={0}>
+          <Text dimColor>{'─'.repeat(40)}</Text>
+        </Box>
+      )}
+
+      {/* Feature Description */}
+      {feature.description && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold>Description</Text>
+          <Box marginLeft={1}>
+            <Text wrap="wrap">{feature.description}</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* Divider */}
+      <Box marginY={0}>
+        <Text dimColor>{'─'.repeat(40)}</Text>
+      </Box>
+
+      {/* Tasks List */}
+      <Box flexDirection="column" marginBottom={1}>
+        <Text bold>Tasks ({tasks.length})</Text>
+        {tasks.length === 0 ? (
+          <Box marginLeft={1}><EmptyState message="No tasks" hint="Press n to create one." /></Box>
+        ) : (
+          <Box flexDirection="column" marginLeft={1}>
+            {tasks.map((task, index) => {
+              const isSelected = index === selectedTaskIndex;
+              return (
+                <Box key={task.id}>
+                  <Text color={isSelected ? theme.colors.highlight : undefined}>
+                    {isSelected ? '▎' : '  '}
+                  </Text>
+                  <Text> </Text>
+                  <StatusBadge status={task.status} />
+                  <Text> </Text>
+                  <Text bold={isSelected}>
+                    {task.title}
+                  </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 | n: New Task | e: Edit Feature | s: Feature Status{tasks.length > 0 ? ' | j/k: Navigate | Enter: Select Task' : ''}
+        </Text>
+      </Box>
+
+      {localError ? <ErrorMessage message={localError} onDismiss={() => setLocalError(null)} /> : null}
+
+      {mode === 'edit-feature' ? (
+        <FormDialog
+          title="Edit Feature"
+          fields={[
+            { key: 'name', label: 'Name', required: true, value: feature.name },
+            { key: 'summary', label: 'Summary', required: true, value: feature.summary },
+            { key: 'description', label: 'Description', value: feature.description ?? '' },
+            { key: 'priority', label: 'Priority (HIGH/MEDIUM/LOW)', required: true, value: feature.priority },
+          ]}
+          onCancel={() => setMode('idle')}
+          onSubmit={(values) => {
+            adapter.updateFeature(feature.id, {
+              name: values.name ?? '',
+              summary: values.summary ?? '',
+              description: values.description || undefined,
+              priority: ((values.priority ?? feature.priority) as Priority),
+              version: feature.version,
+            }).then((result) => {
+              if (!result.success) setLocalError(result.error);
+              refresh();
+              setMode('idle');
+            });
+          }}
+        />
+      ) : null}
+
+      {mode === 'create-task' ? (
+        <FormDialog
+          title="Create Task"
+          fields={[
+            { key: 'title', label: 'Title', required: true },
+            { key: 'summary', label: 'Summary', required: true },
+            { key: 'description', label: 'Description' },
+            { key: 'priority', label: 'Priority (HIGH/MEDIUM/LOW)', required: true, value: 'MEDIUM' },
+            { key: 'complexity', label: 'Complexity (1-10)', required: true, value: '3' },
+          ]}
+          onCancel={() => setMode('idle')}
+          onSubmit={(values) => {
+            adapter.createTask({
+              projectId: feature.projectId,
+              featureId: feature.id,
+              title: values.title ?? '',
+              summary: values.summary ?? '',
+              description: values.description || undefined,
+              priority: ((values.priority ?? 'MEDIUM') as Priority),
+              complexity: Number.parseInt(values.complexity ?? '3', 10) || 3,
+            }).then((result) => {
+              if (!result.success) setLocalError(result.error);
+              refresh();
+              setMode('idle');
+            });
+          }}
+        />
+      ) : null}
+
+      {mode === 'feature-status' ? (
+        <Box flexDirection="column" borderStyle="round" borderColor={theme.colors.accent} paddingX={1} marginTop={1}>
+          <Text bold>Set Feature 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>
+  );
+}

package/src/tui/screens/index.ts

@@ -0,0 +1,6 @@
+export { Dashboard } from './dashboard';
+export { ProjectView } from './project-view';
+export { TaskDetail } from './task-detail';
+export { FeatureDetail } from './feature-detail';
+export { KanbanView } from './kanban-view';
+export { SearchScreen } from './search';