@allpepper/task-orchestrator-tui 1.0.0

package/README.md

@@ -0,0 +1,78 @@
+# Task Orchestrator TUI
+
+Terminal User Interface for the Task Orchestrator application.
+
+## Overview
+
+This package provides an interactive terminal-based interface for managing projects, features, and tasks. It's built with [Ink](https://github.com/vadimdemedes/ink) and React.
+
+## Architecture
+
+The TUI is separated into two main directories:
+
+- **`src/ui/`** - UI abstraction layer that can work with any renderer (TUI, web, etc.)
+  - `adapters/` - Data access layer for communicating with the domain
+  - `context/` - React contexts for theme and adapter
+  - `hooks/` - React hooks for data fetching
+  - `lib/` - Utility functions and types
+  - `themes/` - Color themes (dark/light)
+
+- **`src/tui/`** - Terminal-specific implementation using Ink
+  - `components/` - Ink components for the terminal UI
+  - `screens/` - Screen components (Dashboard, etc.)
+  - `app.tsx` - Main TUI application component
+  - `index.tsx` - Entry point
+
+## Installation
+
+```bash
+bun install
+```
+
+## Usage
+
+To start the TUI:
+
+```bash
+bun run tui
+```
+
+Or directly:
+
+```bash
+bun run src/tui/index.tsx
+```
+
+## Development
+
+Type checking:
+
+```bash
+bun run typecheck
+```
+
+Running tests:
+
+```bash
+bun test
+```
+
+## Dependencies
+
+This package depends on the core `task-orchestrator-bun` package for domain logic, repositories, and database access.
+
+The relationship is managed through a file: dependency in package.json:
+
+```json
+"dependencies": {
+  "task-orchestrator-bun": "file:../task-orchestrator-bun"
+}
+```
+
+## Key Features
+
+- Interactive dashboard with project navigation
+- Status badges with theme support
+- Data hooks for efficient data fetching
+- Direct adapter for in-process data access
+- Support for dark and light themes

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@allpepper/task-orchestrator-tui",
+  "version": "1.0.0",
+  "description": "Terminal UI for task orchestration - Kanban boards, tree views, and task management",
+  "type": "module",
+  "bin": {
+    "tasks": "src/tui/index.tsx"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/__tests__"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alioshr/task-orchestrator-tui.git"
+  },
+  "keywords": ["cli", "tui", "task-manager", "kanban", "ink", "react", "bun"],
+  "author": "alioshr",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alioshr/task-orchestrator-tui/issues"
+  },
+  "homepage": "https://github.com/alioshr/task-orchestrator-tui#readme",
+  "engines": {
+    "bun": ">=1.0.0"
+  },
+  "scripts": {
+    "start": "bun run src/tui/index.tsx",
+    "tui": "bun run src/tui/index.tsx",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test",
+    "prepublishOnly": "bun test"
+  },
+  "dependencies": {
+    "@allpepper/task-orchestrator": "^0.1.0",
+    "ink": "^6.6.0",
+    "@inkjs/ui": "^2.0.0",
+    "react": "^19.2.4"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.2.13",
+    "ink-testing-library": "^4.0.0",
+    "typescript": "^5.0.0",
+    "semantic-release": "^24.0.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1"
+  }
+}

package/src/tui/app.tsx

@@ -0,0 +1,308 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import { ThemeProvider } from '../ui/context/theme-context';
+import { AdapterProvider } from '../ui/context/adapter-context';
+import { DirectAdapter } from '../ui/adapters/direct';
+import { Header } from './components/header';
+import { Footer } from './components/footer';
+import { Dashboard } from './screens/dashboard';
+import { ProjectView } from './screens/project-view';
+import { TaskDetail } from './screens/task-detail';
+import { KanbanView } from './screens/kanban-view';
+import { FeatureDetail } from './screens/feature-detail';
+import { ProjectDetail } from './screens/project-detail';
+import { SearchScreen } from './screens/search';
+
+export function App() {
+  // Setup
+  const { exit } = useApp();
+  const adapter = useMemo(() => new DirectAdapter(), []);
+
+  // Navigation state (simple for now - just track current screen)
+  const [screen, setScreen] = useState<'dashboard' | 'project' | 'project-detail' | 'task' | 'kanban' | 'feature' | 'search'>('dashboard');
+  const [searchReturnScreen, setSearchReturnScreen] = useState<'dashboard' | 'project' | 'project-detail' | 'task' | 'kanban' | 'feature'>('dashboard');
+  const [projectId, setProjectId] = useState<string | null>(null);
+  const [taskId, setTaskId] = useState<string | null>(null);
+  const [featureId, setFeatureId] = useState<string | null>(null);
+  const [taskOriginScreen, setTaskOriginScreen] = useState<'project' | 'kanban' | 'feature'>('project');
+
+  // View state persistence
+  // Dashboard state
+  const [dashboardSelectedIndex, setDashboardSelectedIndex] = useState(0);
+
+  // ProjectView state
+  const [projectExpandedFeatures, setProjectExpandedFeatures] = useState<Set<string>>(new Set());
+  const [projectExpandedGroups, setProjectExpandedGroups] = useState<Set<string>>(new Set());
+  const [projectSelectedIndex, setProjectSelectedIndex] = useState(0);
+  const [projectViewMode, setProjectViewMode] = useState<'features' | 'status' | 'feature-status'>('status');
+
+  // KanbanView state
+  const [kanbanActiveColumnIndex, setKanbanActiveColumnIndex] = useState(0);
+  const [kanbanSelectedFeatureIndex, setKanbanSelectedFeatureIndex] = useState(0);
+  const [kanbanExpandedFeatureId, setKanbanExpandedFeatureId] = useState<string | null>(null);
+  const [kanbanSelectedTaskIndex, setKanbanSelectedTaskIndex] = useState(-1);
+  const [kanbanActiveStatuses, setKanbanActiveStatuses] = useState<Set<string>>(new Set());
+  const handleKanbanActiveStatusesChange = useCallback((statuses: Set<string>) => {
+    setKanbanActiveStatuses(statuses);
+  }, []);
+
+  // Global keyboard handling
+  useInput((input, key) => {
+    if (input === 'q') {
+      exit();
+    }
+    if (input === '/') {
+      if (screen !== 'search') {
+        setSearchReturnScreen(screen as 'dashboard' | 'project' | 'task' | 'kanban' | 'feature');
+        setScreen('search');
+      }
+      return;
+    }
+  });
+
+  // Compute breadcrumbs based on current screen
+  const breadcrumbs = useMemo(() => {
+    switch (screen) {
+      case 'dashboard':
+        return ['Dashboard'];
+      case 'project-detail':
+        return ['Dashboard', 'Project'];
+      case 'project':
+        return ['Dashboard', 'Project'];
+      case 'feature':
+        return ['Dashboard', 'Project', 'Feature'];
+      case 'task':
+        return ['Dashboard', 'Project', 'Task'];
+      case 'kanban':
+        return ['Dashboard', 'Project', 'Board'];
+      case 'search':
+        return ['Search'];
+      default:
+        return ['Dashboard'];
+    }
+  }, [screen]);
+
+  // Shortcuts for footer
+  const shortcuts =
+    screen === 'search'
+      ? [
+        { key: '↑/↓', label: 'Navigate' },
+        { key: 'Enter/→', label: 'Open' },
+        { key: 'Esc/←', label: 'Back' },
+        { key: 'q', label: 'Quit' },
+      ]
+      : screen === 'feature'
+        ? [
+          { key: 'j/k', label: 'Navigate' },
+          { key: 'Enter', label: 'Open Task' },
+          { key: 'n', label: 'New Task' },
+          { key: 'q', label: 'Quit' },
+          { key: 'r', label: 'Refresh' },
+          { key: 'Esc', label: 'Back' },
+        ]
+        : [
+          { key: 'j/k', label: 'Navigate' },
+          { key: 'Enter/l', label: 'Select' },
+          { key: '/', label: 'Search' },
+          { key: 'q', label: 'Quit' },
+          ...(screen === 'dashboard'
+            ? [
+              { key: 'n', label: 'New Project' },
+              { key: 'f', label: 'Project Info' },
+              { key: 'e', label: 'Edit Project' },
+              { key: 'd', label: 'Delete Project' },
+              { key: 'h', label: 'Back' },
+            ]
+            : []),
+          ...(screen === 'project-detail'
+            ? [
+              { key: 'e', label: 'Edit' },
+              { key: 's', label: 'Status' },
+              { key: 'r', label: 'Refresh' },
+              { key: 'Esc/h', label: 'Back' },
+            ]
+            : []),
+          ...(screen === 'project'
+            ? [
+              { key: 'n', label: 'New Feature' },
+              { key: 't', label: 'New Task' },
+              { key: 'f', label: 'Feature Detail' },
+              { key: 'v', label: 'Toggle View' },
+              { key: 'b', label: 'Board View' },
+              { key: 'r', label: 'Refresh' },
+              { key: 'h/Esc', label: 'Back' },
+            ]
+            : []),
+          ...(screen === 'kanban'
+            ? kanbanExpandedFeatureId
+              ? [
+                { key: 'j/k', label: 'Tasks' },
+                { key: 'Enter', label: 'Open Task' },
+                { key: 'Esc/h', label: 'Collapse' },
+                { key: 'r', label: 'Refresh' },
+              ]
+              : [
+                { key: 'h/l', label: 'Columns' },
+                { key: 'j/k', label: 'Features' },
+                { key: 'Enter', label: 'Expand' },
+                { key: 'm', label: 'Move Feature' },
+                { key: 'f', label: 'Filter' },
+                { key: 'b', label: 'Tree View' },
+                { key: 'Esc', label: 'Back' },
+              ]
+            : []),
+          ...(screen === 'task'
+            ? [
+              { key: 'Tab', label: 'Switch Panel' },
+              { key: 'r', label: 'Refresh' },
+              { key: 'Esc', label: 'Back' },
+            ]
+            : []),
+        ];
+
+  return (
+    <ThemeProvider>
+      <AdapterProvider adapter={adapter}>
+        <Box flexDirection="column" width="100%">
+          <Header breadcrumbs={breadcrumbs} />
+          <Box flexGrow={1} flexDirection="column">
+            {screen === 'dashboard' && (
+              <Dashboard
+                selectedIndex={dashboardSelectedIndex}
+                onSelectedIndexChange={setDashboardSelectedIndex}
+                onSelectProject={(id) => {
+                  setProjectId(id);
+                  setScreen('project');
+                }}
+                onViewProject={(id) => {
+                  setProjectId(id);
+                  setScreen('project-detail');
+                }}
+                onBack={() => {
+                  setScreen('dashboard');
+                  setProjectId(null);
+                  setTaskId(null);
+                  setFeatureId(null);
+                }}
+              />
+            )}
+            {screen === 'project-detail' && projectId && (
+              <ProjectDetail
+                projectId={projectId}
+                onSelectFeature={(id) => {
+                  setFeatureId(id);
+                  setScreen('feature');
+                }}
+                onBack={() => {
+                  setScreen('dashboard');
+                  setProjectId(null);
+                }}
+              />
+            )}
+            {screen === 'project' && projectId && (
+              <ProjectView
+                projectId={projectId}
+                expandedFeatures={projectExpandedFeatures}
+                onExpandedFeaturesChange={setProjectExpandedFeatures}
+                expandedGroups={projectExpandedGroups}
+                onExpandedGroupsChange={setProjectExpandedGroups}
+                selectedIndex={projectSelectedIndex}
+                onSelectedIndexChange={setProjectSelectedIndex}
+                viewMode={projectViewMode}
+                onViewModeChange={setProjectViewMode}
+                onSelectTask={(id) => {
+                  setTaskOriginScreen('project');
+                  setTaskId(id);
+                  setScreen('task');
+                }}
+                onSelectFeature={(id) => {
+                  setFeatureId(id);
+                  setScreen('feature');
+                }}
+                onToggleBoard={() => {
+                  setScreen('kanban');
+                }}
+                onBack={() => {
+                  setScreen('dashboard');
+                  setProjectId(null);
+                }}
+              />
+            )}
+            {screen === 'kanban' && projectId && (
+              <KanbanView
+                projectId={projectId}
+                activeColumnIndex={kanbanActiveColumnIndex}
+                onActiveColumnIndexChange={setKanbanActiveColumnIndex}
+                selectedFeatureIndex={kanbanSelectedFeatureIndex}
+                onSelectedFeatureIndexChange={setKanbanSelectedFeatureIndex}
+                expandedFeatureId={kanbanExpandedFeatureId}
+                onExpandedFeatureIdChange={setKanbanExpandedFeatureId}
+                selectedTaskIndex={kanbanSelectedTaskIndex}
+                onSelectedTaskIndexChange={setKanbanSelectedTaskIndex}
+                activeStatuses={kanbanActiveStatuses}
+                onActiveStatusesChange={handleKanbanActiveStatusesChange}
+                onSelectTask={(id) => {
+                  setTaskOriginScreen('kanban');
+                  setTaskId(id);
+                  setScreen('task');
+                }}
+                onBack={() => {
+                  setScreen('dashboard');
+                  setProjectId(null);
+                }}
+              />
+            )}
+            {screen === 'task' && taskId && (
+              <TaskDetail
+                taskId={taskId}
+                onSelectTask={(id) => {
+                  setTaskId(id);
+                  // Stay on task screen, just change taskId
+                }}
+                onBack={() => {
+                  setScreen(taskOriginScreen === 'kanban' ? 'kanban' : taskOriginScreen === 'feature' ? 'feature' : 'project');
+                  setTaskId(null);
+                }}
+              />
+            )}
+            {screen === 'feature' && featureId && (
+              <FeatureDetail
+                featureId={featureId}
+                onSelectTask={(id) => {
+                  setTaskOriginScreen('feature');
+                  setTaskId(id);
+                  setScreen('task');
+                }}
+                onBack={() => {
+                  setScreen('project');
+                  setFeatureId(null);
+                }}
+              />
+            )}
+            {screen === 'search' && (
+              <SearchScreen
+                onOpenProject={(id) => {
+                  setProjectId(id);
+                  setScreen('project');
+                }}
+                onOpenFeature={(id) => {
+                  setFeatureId(id);
+                  setScreen('feature');
+                }}
+                onOpenTask={(id) => {
+                  setTaskOriginScreen('project');
+                  setTaskId(id);
+                  setScreen('task');
+                }}
+                onBack={() => {
+                  setScreen(searchReturnScreen);
+                }}
+              />
+            )}
+          </Box>
+          <Footer shortcuts={shortcuts} />
+        </Box>
+      </AdapterProvider>
+    </ThemeProvider>
+  );
+}

package/src/tui/components/column-filter-bar.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from '../../ui/context/theme-context';
+import { getStatusColor } from '../../ui/lib/colors';
+
+interface ColumnFilterBarProps {
+  allStatuses: ReadonlyArray<{ id: string; title: string; status: string }>;
+  activeStatuses: Set<string>;
+  isFilterMode: boolean;
+  filterCursorIndex: number;
+}
+
+export function ColumnFilterBar({
+  allStatuses,
+  activeStatuses,
+  isFilterMode,
+  filterCursorIndex,
+}: ColumnFilterBarProps) {
+  const { theme } = useTheme();
+
+  return (
+    <Box marginBottom={1} flexWrap="wrap">
+      {isFilterMode && (
+        <Text color={theme.colors.accent} bold>
+          {'FILTER: '}
+        </Text>
+      )}
+      {allStatuses.map((s, i) => {
+        const isActive = activeStatuses.has(s.status);
+        const isCursor = isFilterMode && i === filterCursorIndex;
+        const statusColor = getStatusColor(s.status, theme);
+
+        const label = isActive ? `[${s.title}]` : s.title;
+        const separator = i < allStatuses.length - 1 ? ' · ' : '';
+
+        return (
+          <Text key={s.id}>
+            <Text
+              color={isActive ? statusColor : theme.colors.muted}
+              bold={isCursor}
+              underline={isCursor}
+              dimColor={!isActive && !isCursor}
+            >
+              {label}
+            </Text>
+            {separator && <Text dimColor>{separator}</Text>}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}

package/src/tui/components/confirm-dialog.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useTheme } from '../../ui/context/theme-context';
+
+interface ConfirmDialogProps {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isActive?: boolean;
+}
+
+export function ConfirmDialog({
+  title,
+  message,
+  confirmLabel = 'Yes',
+  cancelLabel = 'No',
+  onConfirm,
+  onCancel,
+  isActive = true,
+}: ConfirmDialogProps) {
+  const { theme } = useTheme();
+
+  useInput((input, key) => {
+    if (!isActive) return;
+    if (key.return || input.toLowerCase() === 'y') {
+      onConfirm();
+      return;
+    }
+    if (key.escape || input.toLowerCase() === 'n') {
+      onCancel();
+    }
+  }, { isActive });
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor={theme.colors.highlight} paddingX={1} paddingY={0} marginY={1}>
+      <Text bold>{title}</Text>
+      <Text>{message}</Text>
+      <Text dimColor>[Enter/Y] {confirmLabel}  [Esc/N] {cancelLabel}</Text>
+    </Box>
+  );
+}
+

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

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import type { Task } from 'task-orchestrator-bun/src/domain/types';
+import type { DependencyInfo } from '../../ui/lib/types';
+import { StatusBadge } from './status-badge';
+import { useTheme } from '../../ui/context/theme-context';
+
+interface DependencyListProps {
+  dependencies: DependencyInfo | null;
+  onSelectTask?: (taskId: string) => void;
+  isActive?: boolean;
+}
+
+export function DependencyList({
+  dependencies,
+  onSelectTask,
+  isActive = true,
+}: DependencyListProps) {
+  const { theme } = useTheme();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const allTasks: Task[] = [
+    ...(dependencies?.blockedBy || []),
+    ...(dependencies?.blocks || []),
+  ];
+
+  const totalTasks = allTasks.length;
+  const hasBlockedBy = (dependencies?.blockedBy?.length || 0) > 0;
+  const hasBlocks = (dependencies?.blocks?.length || 0) > 0;
+
+  useInput((input, key) => {
+    if (!isActive || totalTasks === 0) return;
+
+    if (input === 'j' || key.downArrow) {
+      const nextIndex = (selectedIndex + 1) % totalTasks;
+      setSelectedIndex(nextIndex);
+    } else if (input === 'k' || key.upArrow) {
+      const prevIndex = (selectedIndex - 1 + totalTasks) % totalTasks;
+      setSelectedIndex(prevIndex);
+    } else if (key.return && onSelectTask) {
+      const selectedTask = allTasks[selectedIndex];
+      if (selectedTask) {
+        onSelectTask(selectedTask.id);
+      }
+    }
+  }, { isActive });
+
+  if (!dependencies || totalTasks === 0) {
+    return (
+      <Box flexDirection="column">
+        <Text dimColor>No dependencies</Text>
+      </Box>
+    );
+  }
+
+  let currentIndex = 0;
+
+  return (
+    <Box flexDirection="column">
+      {hasBlockedBy && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text bold color={theme.colors.warning}>
+            Blocked By:
+          </Text>
+          {dependencies.blockedBy.map((task) => {
+            const isSelected = currentIndex === selectedIndex;
+            currentIndex++;
+
+            return (
+              <Box key={task.id} marginLeft={2}>
+                <Text color={isSelected ? theme.colors.highlight : undefined}>
+                  {isSelected ? '▎' : '  '}
+                </Text>
+                <Text bold={isSelected}>
+                  ○{' '}
+                </Text>
+                <StatusBadge status={task.status} />
+                <Text bold={isSelected}>
+                  {' '}{task.title}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+
+      {hasBlocks && (
+        <Box flexDirection="column">
+          <Text bold color={theme.colors.accent}>
+            Blocks:
+          </Text>
+          {dependencies.blocks.map((task) => {
+            const isSelected = currentIndex === selectedIndex;
+            currentIndex++;
+
+            return (
+              <Box key={task.id} marginLeft={2}>
+                <Text color={isSelected ? theme.colors.highlight : undefined}>
+                  {isSelected ? '▎' : '  '}
+                </Text>
+                <Text bold={isSelected}>
+                  ○{' '}
+                </Text>
+                <StatusBadge status={task.status} />
+                <Text bold={isSelected}>
+                  {' '}{task.title}
+                </Text>
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/empty-state.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from '../../ui/context/theme-context';
+
+interface EmptyStateProps {
+  message: string;
+  hint?: string;
+}
+
+export function EmptyState({ message, hint }: EmptyStateProps) {
+  const { theme } = useTheme();
+
+  return (
+    <Box flexDirection="column" alignItems="center" paddingY={2}>
+      <Box>
+        <Text color={theme.colors.muted}>◇ </Text>
+        <Text color={theme.colors.muted}>{message}</Text>
+        {hint && (
+          <>
+            <Text color={theme.colors.muted}> · </Text>
+            <Text color={theme.colors.foreground}>{hint}</Text>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}
+