@allpepper/task-orchestrator-tui 1.3.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allpepper/task-orchestrator-tui",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Terminal UI for task orchestration - Kanban boards, tree views, and task management",
   "type": "module",
   "bin": {
@@ -45,7 +45,7 @@
     "prepublishOnly": "bun test"
   },
   "dependencies": {
-    "@allpepper/task-orchestrator": "^1.1.2",
+    "@allpepper/task-orchestrator": "^2.0.0",
     "@inkjs/ui": "^2.0.0",
     "ink": "^6.6.0",
     "react": "^19.2.4"

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

@@ -3,77 +3,115 @@ import { Box, Text, useInput } from 'ink';
 import { StatusBadge } from './status-badge';
 import { useTheme } from '../../ui/context/theme-context';
 
+/**
+ * v2 pipeline actions instead of free-form status picker
+ */
+interface PipelineAction {
+  id: string;
+  label: string;
+  description: string;
+}
+
 export interface StatusActionsProps {
   currentStatus: string;
-  allowedTransitions: string[];
-  onTransition: (newStatus: string) => void;
+  /** Next status in the pipeline (null if at end) */
+  nextStatus: string | null;
+  /** Previous status in the pipeline (null if at start) */
+  prevStatus: string | null;
+  /** Whether the entity is blocked */
+  isBlocked?: boolean;
+  /** Whether the entity is in a terminal state */
+  isTerminal?: boolean;
+  onAdvance: () => void;
+  onRevert: () => void;
+  onTerminate: () => void;
   isActive?: boolean;
   loading?: boolean;
 }
 
 export function StatusActions({
   currentStatus,
-  allowedTransitions,
-  onTransition,
+  nextStatus,
+  prevStatus,
+  isBlocked = false,
+  isTerminal = false,
+  onAdvance,
+  onRevert,
+  onTerminate,
   isActive = true,
   loading = false,
 }: StatusActionsProps) {
   const { theme } = useTheme();
+
+  // Build available actions
+  const actions: PipelineAction[] = [];
+  if (nextStatus && !isBlocked && !isTerminal) {
+    actions.push({ id: 'advance', label: `Advance to ${nextStatus}`, description: 'Move forward in pipeline' });
+  }
+  if (prevStatus && !isTerminal) {
+    actions.push({ id: 'revert', label: `Revert to ${prevStatus}`, description: 'Move backward in pipeline' });
+  }
+  if (!isTerminal) {
+    actions.push({ id: 'terminate', label: 'Will Not Implement', description: 'Close without completing' });
+  }
+
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   useInput((input, key) => {
-    if (!isActive || loading || allowedTransitions.length === 0) return;
+    if (!isActive || loading || actions.length === 0) return;
 
     if (input === 'j' || key.downArrow) {
-      const nextIndex = (selectedIndex + 1) % allowedTransitions.length;
-      setSelectedIndex(nextIndex);
+      setSelectedIndex((selectedIndex + 1) % actions.length);
     } else if (input === 'k' || key.upArrow) {
-      const prevIndex = (selectedIndex - 1 + allowedTransitions.length) % allowedTransitions.length;
-      setSelectedIndex(prevIndex);
+      setSelectedIndex((selectedIndex - 1 + actions.length) % actions.length);
     } else if (key.return) {
-      const selectedStatus = allowedTransitions[selectedIndex];
-      if (selectedStatus !== undefined) {
-        onTransition(selectedStatus);
+      const action = actions[selectedIndex];
+      if (action) {
+        switch (action.id) {
+          case 'advance': onAdvance(); break;
+          case 'revert': onRevert(); break;
+          case 'terminate': onTerminate(); break;
+        }
       }
     }
   });
 
   return (
     <Box flexDirection="column">
-      {/* Current Status */}
       <Box marginBottom={1}>
         <Text>Status: </Text>
         <StatusBadge status={currentStatus} />
+        {isBlocked && (
+          <Text color={theme.colors.blocked}> [BLOCKED]</Text>
+        )}
       </Box>
 
-      {/* Loading Indicator */}
       {loading && (
         <Box>
           <Text dimColor>Loading...</Text>
         </Box>
       )}
 
-      {/* Transitions Section */}
       {!loading && (
         <>
-          {allowedTransitions.length === 0 ? (
+          {actions.length === 0 ? (
             <Box>
-              <Text dimColor>No transitions available</Text>
+              <Text dimColor>No actions available (terminal state)</Text>
             </Box>
           ) : (
             <Box flexDirection="column">
               <Box marginBottom={1}>
-                <Text>Change to:</Text>
+                <Text>Actions:</Text>
               </Box>
-              {allowedTransitions.map((status, index) => {
+              {actions.map((action, index) => {
                 const isSelected = index === selectedIndex;
                 return (
-                  <Box key={status} marginLeft={2}>
+                  <Box key={action.id} marginLeft={2}>
                     <Text color={isSelected ? theme.colors.highlight : undefined}>
                       {isSelected ? '▎' : '  '}
                     </Text>
                     <Text bold={isSelected}>
-                      {' '}{status}
+                      {' '}{action.label}
                     </Text>
                   </Box>
                 );

package/src/tui/screens/dashboard.tsx

@@ -1,17 +1,15 @@
-import React, { useMemo, useState } from 'react';
+import React, { 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 '@allpepper/task-orchestrator';
 
 interface DashboardProps {
   selectedIndex: number;
@@ -25,10 +23,8 @@ export function Dashboard({ selectedIndex, onSelectedIndexChange, onSelectProjec
   const { adapter } = useAdapter();
   const { theme } = useTheme();
   const { projects, loading, error, refresh } = useProjects();
-  const [mode, setMode] = useState<'idle' | 'create' | 'edit' | 'delete' | 'status'>('idle');
+  const [mode, setMode] = useState<'idle' | 'create' | 'edit' | 'delete'>('idle');
   const [localError, setLocalError] = useState<string | null>(null);
-  const [allowedTransitions, setAllowedTransitions] = useState<string[]>([]);
-  const [statusIndex, setStatusIndex] = useState(0);
 
   const columns = [
     {
@@ -36,14 +32,6 @@ export function Dashboard({ selectedIndex, onSelectedIndexChange, onSelectProjec
       label: 'Name',
       width: 45,
     },
-    {
-      key: 'status',
-      label: 'Status',
-      width: 18,
-      render: (_value: unknown, row: ProjectWithCounts, context?: { isSelected: boolean }) => (
-        <StatusBadge status={row.status} isSelected={context?.isSelected} />
-      ),
-    },
     {
       key: 'features',
       label: 'Features',
@@ -71,37 +59,7 @@ export function Dashboard({ selectedIndex, onSelectedIndexChange, onSelectProjec
   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');
@@ -119,15 +77,6 @@ export function Dashboard({ selectedIndex, onSelectedIndexChange, onSelectProjec
         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();
       }
@@ -234,22 +183,6 @@ export function Dashboard({ selectedIndex, onSelectedIndexChange, onSelectProjec
         />
       ) : 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

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } 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 '@allpepper/task-orchestrator';
+import type { Priority } from '@allpepper/task-orchestrator';
+import type { WorkflowState } from '../../ui/adapters/types';
 import { StatusBadge } from '../components/status-badge';
 import { PriorityBadge } from '../components/priority-badge';
 import { SectionList } from '../components/section-list';
@@ -11,6 +12,7 @@ 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 { StatusActions } from '../components/status-actions';
 
 interface FeatureDetailProps {
   featureId: string;
@@ -26,8 +28,19 @@ export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetail
   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);
+  const [workflowState, setWorkflowState] = useState<WorkflowState | null>(null);
+  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
+
+  // Fetch workflow state when feature loads
+  useEffect(() => {
+    if (feature) {
+      adapter.getWorkflowState('feature', feature.id).then((result) => {
+        if (result.success) {
+          setWorkflowState(result.data);
+        }
+      });
+    }
+  }, [adapter, feature]);
 
   // Handle keyboard navigation
   useInput((input, key) => {
@@ -45,13 +58,7 @@ export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetail
       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');
-        }
-      });
+      setMode('feature-status');
     }
     if (tasks.length > 0) {
       if (input === 'j' || key.downArrow) {
@@ -69,31 +76,48 @@ export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetail
     }
   });
 
-  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;
-    }
+  // Handle status panel (when in feature-status mode, Esc goes back to idle)
+  useInput((_input, key) => {
+    if (mode !== 'feature-status') 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' });
 
+  // Pipeline operations
+  const handleAdvance = async () => {
+    if (!feature) return;
+    setIsUpdatingStatus(true);
+    setLocalError(null);
+    const result = await adapter.advance('feature', feature.id, feature.version);
+    if (!result.success) setLocalError(result.error);
+    await refresh();
+    setIsUpdatingStatus(false);
+    setMode('idle');
+  };
+
+  const handleRevert = async () => {
+    if (!feature) return;
+    setIsUpdatingStatus(true);
+    setLocalError(null);
+    const result = await adapter.revert('feature', feature.id, feature.version);
+    if (!result.success) setLocalError(result.error);
+    await refresh();
+    setIsUpdatingStatus(false);
+    setMode('idle');
+  };
+
+  const handleTerminate = async () => {
+    if (!feature) return;
+    setIsUpdatingStatus(true);
+    setLocalError(null);
+    const result = await adapter.terminate('feature', feature.id, feature.version);
+    if (!result.success) setLocalError(result.error);
+    await refresh();
+    setIsUpdatingStatus(false);
+    setMode('idle');
+  };
+
   if (loading) {
     return (
       <Box padding={1}>
@@ -125,6 +149,9 @@ export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetail
         <Text bold>{feature.name}</Text>
         <Text> </Text>
         <StatusBadge status={feature.status} />
+        {feature.blockedBy.length > 0 && (
+          <Text color={theme.colors.blocked}> [BLOCKED]</Text>
+        )}
       </Box>
 
       {/* Divider */}
@@ -138,6 +165,8 @@ export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetail
         <PriorityBadge priority={feature.priority} />
         <Text>  Modified: </Text>
         <Text dimColor>{timeAgo(new Date(feature.modifiedAt))}</Text>
+        <Text>  ID: </Text>
+        <Text dimColor>{feature.id}</Text>
       </Box>
 
       {/* Divider */}
@@ -195,6 +224,9 @@ export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetail
                   <Text bold={isSelected}>
                     {task.title}
                   </Text>
+                  {task.blockedBy.length > 0 && (
+                    <Text color={theme.colors.blocked}> [B]</Text>
+                  )}
                 </Box>
               );
             })}
@@ -209,7 +241,7 @@ export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetail
         </Box>
       )}
 
-      {/* Sections Panel - only show if there are sections */}
+      {/* Sections Panel */}
       {sections.length > 0 && (
         <Box flexDirection="column" marginBottom={1}>
           <Text bold>Sections</Text>
@@ -287,23 +319,19 @@ export function FeatureDetail({ featureId, onSelectTask, onBack }: FeatureDetail
 
       {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>
+          <StatusActions
+            currentStatus={feature.status}
+            nextStatus={workflowState?.nextStatus ?? null}
+            prevStatus={workflowState?.prevStatus ?? null}
+            isBlocked={feature.blockedBy.length > 0}
+            isTerminal={workflowState?.isTerminal ?? false}
+            isActive={true}
+            loading={isUpdatingStatus}
+            onAdvance={handleAdvance}
+            onRevert={handleRevert}
+            onTerminate={handleTerminate}
+          />
+          <Text dimColor>Esc: cancel</Text>
         </Box>
       ) : null}
     </Box>

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

@@ -1,7 +1,7 @@
 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 '@allpepper/task-orchestrator';
+import type { Project, Feature, Section, EntityType } from '@allpepper/task-orchestrator';
 import { StatusBadge } from '../components/status-badge';
 import { timeAgo } from '../../ui/lib/format';
 import { FormDialog } from '../components/form-dialog';
@@ -26,10 +26,8 @@ export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDet
   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 [mode, setMode] = useState<'idle' | 'edit-project'>('idle');
   const [localError, setLocalError] = useState<string | null>(null);
-  const [transitions, setTransitions] = useState<string[]>([]);
-  const [transitionIndex, setTransitionIndex] = useState(0);
 
   const load = async () => {
     setLoading(true);
@@ -70,15 +68,6 @@ export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDet
     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));
@@ -95,31 +84,6 @@ export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDet
     }
   });
 
-  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}>
@@ -146,11 +110,9 @@ export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDet
 
   return (
     <Box flexDirection="column" padding={1}>
-      {/* Project Header */}
+      {/* Project Header (no status - projects are stateless in v2) */}
       <Box marginBottom={1}>
         <Text bold>{project.name}</Text>
-        <Text> </Text>
-        <StatusBadge status={project.status} />
       </Box>
 
       {/* Divider */}
@@ -219,6 +181,9 @@ export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDet
                   <Text bold={isSelected}>
                     {feature.name}
                   </Text>
+                  {feature.blockedBy.length > 0 && (
+                    <Text color={theme.colors.blocked}> [B]</Text>
+                  )}
                 </Box>
               );
             })}
@@ -233,7 +198,7 @@ export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDet
         </Box>
       )}
 
-      {/* Sections Panel - only show if there are sections */}
+      {/* Sections Panel */}
       {sections.length > 0 && (
         <Box flexDirection="column" marginBottom={1}>
           <Text bold>Sections</Text>
@@ -249,7 +214,7 @@ export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDet
       {/* 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' : ''}
+          ESC/h: Back | r: Refresh | e: Edit{features.length > 0 ? ' | j/k: Navigate | Enter: Select Feature' : ''}
         </Text>
       </Box>
 
@@ -278,28 +243,6 @@ export function ProjectDetail({ projectId, onSelectFeature, onBack }: ProjectDet
           }}
         />
       ) : 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>
   );
 }