get-shit-done-cc 1.9.11 → 1.10.0-experimental.0

package/get-shit-done/tui/App.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { PhaseCard } from './components/PhaseCard.js';
+import { ActivityFeed } from './components/ActivityFeed.js';
+import { StatsBar } from './components/StatsBar.js';
+import { ActivityPipeReader, ActivityMessage } from './utils/pipeReader.js';
+
+interface Stage {
+	name: string;
+	elapsed: string;
+	completed: boolean;
+}
+
+const App: React.FC = () => {
+	const [activities, setActivities] = useState<Array<ActivityMessage & { detail: string }>>([]);
+	const [currentStage, setCurrentStage] = useState<{
+		stage: string;
+		stageDesc: string;
+		elapsed: string;
+	} | null>(null);
+	const [completedStages, setCompletedStages] = useState<Array<{ name: string; elapsed: string }>>([]);
+	const [currentPhase, setCurrentPhase] = useState<string>('1');
+	const [phaseName, setPhaseName] = useState<string>('Initializing...');
+	const [totalPhases] = useState<number>(3);
+	const [completedPhases, setCompletedPhases] = useState<number>(0);
+	const [startTime] = useState<Date>(new Date());
+	const [tokens, setTokens] = useState<number>(0);
+	const [cost, setCost] = useState<string>('0.00');
+	const [budget] = useState<{ used: number; limit: number } | undefined>(undefined);
+
+	useEffect(() => {
+		const pipePath = process.env.GSD_ACTIVITY_PIPE || '.planning/logs/activity.pipe';
+		const reader = new ActivityPipeReader(pipePath);
+
+		reader.onMessage((msg) => {
+			setActivities((prev) => [...prev, msg]);
+
+			// Handle stage messages
+			if (msg.type === 'stage') {
+				const [stageType, ...descParts] = msg.detail.split(':');
+				const description = descParts.join(':');
+
+				// Add to completed stages
+				if (currentStage && currentStage.stage !== stageType) {
+					setCompletedStages((prev) => [
+						...prev,
+						{ name: currentStage.stage, elapsed: currentStage.elapsed },
+					]);
+				}
+
+				setCurrentStage({
+					stage: stageType,
+					stageDesc: description,
+					elapsed: '0:00',
+				});
+			}
+
+			// Handle file messages
+			if (msg.type === 'file') {
+				// Already added to activities
+			}
+
+			// Handle commit messages
+			if (msg.type === 'commit') {
+				// Already added to activities
+			}
+		});
+
+		reader.start();
+
+		return () => {
+			// Cleanup handled by pipe reader
+		};
+	}, []);
+
+	// Calculate elapsed time
+	const elapsedTime = useMemo(() => {
+		const diff = Math.floor((Date.now() - startTime.getTime()) / 1000);
+		const hrs = Math.floor(diff / 3600);
+		const mins = Math.floor((diff % 3600) / 60);
+		const secs = diff % 60;
+
+		if (hrs > 0) {
+			return `${hrs}h ${mins}m ${secs}s`;
+		} else if (mins > 0) {
+			return `${mins}m ${secs}s`;
+		} else {
+			return `${secs}s`;
+		}
+	}, [startTime]);
+
+	// Build stages array
+	const stages: Stage[] = useMemo(() => {
+		const stages: Stage[] = [
+			...completedStages.map((s) => ({ ...s, completed: true })),
+		];
+
+		if (currentStage) {
+			stages.push({
+				name: currentStage.stage,
+				elapsed: currentStage.elapsed,
+				completed: false,
+			});
+		}
+
+		return stages;
+	}, [completedStages, currentStage]);
+
+	// Calculate progress
+	const progress = useMemo(() => {
+		if (stages.length === 0) return 0;
+		const completed = stages.filter((s) => s.completed).length;
+		return (completed / (stages.length + 3)) * 100; // +3 for planned future stages
+	}, [stages]);
+
+	return (
+		<Box flexDirection="column" padding={1}>
+			<Box justifyContent="center" marginBottom={1}>
+				<Text bold color="cyan">
+					╔═══╗ ╔╗   ╔╗      ╔══╗
+					║╔══╝ ║║   ║║      ║╔╗║
+					║╚══╗ ║║   ║║      ║╚╝║
+					║╔══╝ ║║   ║║      ║╔╗║
+					║╚══╗ ║╚══╗║╚══╗   ║╚╝║
+					╚═══╝ ╚═══╝╚═══╝   ╚══╝
+				</Text>
+			</Box>
+
+			<Text bold color="cyan">
+				GET SHIT DONE - AUTOPILOT
+			</Text>
+
+			<Box marginY={1}>
+				<Text dimColor>
+					{'─'.repeat(60)}
+				</Text>
+			</Box>
+
+			<Box flexDirection="row" gap={1} flexGrow={1}>
+				<Box flexDirection="column" flexGrow={1}>
+					<PhaseCard
+						phase={currentPhase}
+						phaseName={phaseName}
+						totalPhases={totalPhases}
+						currentPhaseIndex={completedPhases}
+						stages={stages}
+						description={currentStage?.stageDesc}
+						progress={progress}
+					/>
+				</Box>
+
+				<Box flexDirection="column" flexGrow={1}>
+					<ActivityFeed activities={activities} />
+				</Box>
+			</Box>
+
+			<StatsBar
+				totalPhases={totalPhases}
+				completedPhases={completedPhases}
+				elapsedTime={elapsedTime}
+				tokens={tokens}
+				cost={cost}
+				budget={budget}
+			/>
+		</Box>
+	);
+};
+
+export default App;

package/get-shit-done/tui/README.md

@@ -0,0 +1,107 @@
+# GSD Autopilot TUI
+
+A beautiful, React-based terminal user interface for the GSD Autopilot system.
+
+## Features
+
+- **Rich Visual Components**: Professional layouts with borders, spacing, and typography
+- **Real-time Updates**: Live activity feed showing file operations, commits, and test runs
+- **Phase Progress Tracking**: Visual progress bars and stage completion indicators
+- **Cost & Time Analytics**: Real-time token usage, cost calculation, and time tracking
+- **Beautiful Graphics**: ASCII art header, emoji icons, and smooth animations
+
+## Architecture
+
+The TUI is built with:
+- **Ink 4.x** - React renderer for terminal UIs
+- **React 18** - Component-based architecture
+- **Yoga Layout** - Flexbox-like layout system
+- **TypeScript** - Type-safe development
+
+### Components
+
+- `App.tsx` - Main application layout and state management
+- `PhaseCard.tsx` - Phase progress display with stage tracking
+- `ActivityFeed.tsx` - Real-time activity stream with icons
+- `StatsBar.tsx` - Cost, time, and progress statistics
+- `pipeReader.ts` - Named pipe reader for activity events
+
+## Installation
+
+The TUI is automatically installed when you install GSD. It requires:
+
+- Node.js 16+ 
+- npm or yarn
+
+### Manual Installation
+
+```bash
+cd get-shit-done/tui
+npm install
+npm run build
+```
+
+This creates a `dist/` directory with the built TUI binary.
+
+## Usage
+
+The TUI is automatically launched by the autopilot script when available. It listens to activity events via a named pipe and renders the UI in real-time.
+
+### Running Standalone
+
+```bash
+gsd-autopilot-tui
+```
+
+### Environment Variables
+
+- `GSD_ACTIVITY_PIPE` - Path to activity pipe (default: `.planning/logs/activity.pipe`)
+- `GSD_PROJECT_DIR` - Project directory path
+- `GSD_LOG_DIR` - Log directory path
+
+## Message Format
+
+The TUI reads activity messages from the named pipe in the format:
+
+```
+STAGE:subagent-type:description
+FILE:operation:path
+COMMIT:message
+TEST:test
+INFO:message
+ERROR:message
+```
+
+## Development
+
+### Build
+
+```bash
+npm run build
+```
+
+### Watch Mode
+
+```bash
+npm run build -- --watch
+```
+
+### Project Structure
+
+```
+tui/
+├── components/          # React components
+│   ├── PhaseCard.tsx
+│   ├── ActivityFeed.tsx
+│   └── StatsBar.tsx
+├── utils/              # Utilities
+│   └── pipeReader.ts
+├── App.tsx             # Main application
+├── index.tsx           # Entry point
+├── build.js            # Build script
+└── package.json        # Dependencies
+```
+
+## License
+
+MIT - Part of GSD (Get Shit Done) project

package/get-shit-done/tui/build.js

@@ -0,0 +1,37 @@
+import { build } from 'esbuild';
+import { mkdir } from 'fs/promises';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+async function main() {
+	// Create dist directory
+	await mkdir('dist', { recursive: true });
+
+	// Build the application
+	await build({
+		entryPoints: ['index.tsx'],
+		outfile: 'dist/index.js',
+		bundle: true,
+		format: 'esm',
+		platform: 'node',
+		target: 'node16',
+		external: ['ink', 'react'],
+		define: {
+			'process.env.NODE_ENV': '"production"',
+		},
+		loader: {
+			'.tsx': 'tsx',
+			'.ts': 'ts',
+		},
+	}).catch((error) => {
+		console.error('Build failed:', error);
+		process.exit(1);
+	});
+
+	console.log('Build completed successfully');
+}
+
+main();

package/get-shit-done/tui/components/ActivityFeed.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+
+interface Activity {
+	type: 'read' | 'write' | 'edit' | 'commit' | 'test' | 'stage' | 'error' | 'info';
+	detail: string;
+	timestamp: Date;
+}
+
+interface ActivityFeedProps {
+	activities: Activity[];
+	maxItems?: number;
+}
+
+export const ActivityFeed: React.FC<ActivityFeedProps> = ({ activities, maxItems = 12 }) => {
+	const [dots, setDots] = useState('');
+
+	useEffect(() => {
+		const timer = setInterval(() => {
+			setDots((prev) => {
+				if (prev.length >= 3) return '';
+				return prev + '.';
+			});
+		}, 500);
+
+		return () => clearInterval(timer);
+	}, []);
+
+	const displayActivities = activities.slice(-maxItems);
+
+	const getActivityIcon = (type: Activity['type']) => {
+		switch (type) {
+			case 'read':
+				return '📖';
+			case 'write':
+				return '✍️';
+			case 'edit':
+				return '📝';
+			case 'commit':
+				return '✓';
+			case 'test':
+				return '🧪';
+			case 'stage':
+				return '⚙️';
+			case 'error':
+				return '⛔';
+			case 'info':
+				return 'ℹ️';
+			default:
+				return '•';
+		}
+	};
+
+	const getActivityColor = (type: Activity['type']): string => {
+		switch (type) {
+			case 'read':
+				return 'blue';
+			case 'write':
+				return 'green';
+			case 'edit':
+				return 'yellow';
+			case 'commit':
+				return 'green';
+			case 'test':
+				return 'magenta';
+			case 'stage':
+				return 'cyan';
+			case 'error':
+				return 'red';
+			case 'info':
+				return 'gray';
+			default:
+				return 'white';
+		}
+	};
+
+	const getTypeLabel = (type: Activity['type']) => {
+		const labels = {
+			read: 'READ',
+			write: 'WRITE',
+			edit: 'EDIT',
+			commit: 'COMMIT',
+			test: 'TEST',
+			stage: 'STAGE',
+			error: 'ERROR',
+			info: 'INFO',
+		};
+		return labels[type] || 'ACTIVITY';
+	};
+
+	return (
+		<Box flexDirection="column" borderStyle="round" borderColor="gray" padding={1} height={18}>
+			<Box justifyContent="space-between" alignItems="center">
+				<Text bold>Activity Feed</Text>
+				<Text color="gray">{dots}</Text>
+			</Box>
+
+			<Box flexDirection="column" marginTop={1} overflow="hidden">
+				{displayActivities.length === 0 ? (
+					<Text dimColor italic>
+						Waiting for activity...
+					</Text>
+				) : (
+					displayActivities.map((activity, idx) => (
+						<Box
+							key={idx}
+							justifyContent="space-between"
+							alignItems="center"
+							marginBottom={idx < displayActivities.length - 1 ? 0 : 0}
+						>
+							<Box flexGrow={1}>
+								<Text>
+									<Text dimColor>[{activity.timestamp.toLocaleTimeString()}]</Text>{' '}
+									<Text color={getActivityColor(activity.type)}>
+										{getActivityIcon(activity.type)}
+									</Text>{' '}
+									<Text dimColor>{getTypeLabel(activity.type)}:</Text> {activity.detail}
+								</Text>
+							</Box>
+						</Box>
+					))
+				)}
+			</Box>
+		</Box>
+	);
+};

package/get-shit-done/tui/components/PhaseCard.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface Stage {
+	name: string;
+	elapsed: string;
+	completed: boolean;
+}
+
+interface PhaseCardProps {
+	phase: string;
+	phaseName: string;
+	totalPhases: number;
+	currentPhaseIndex: number;
+	stages: Stage[];
+	description?: string;
+	progress: number; // 0-100
+}
+
+export const PhaseCard: React.FC<PhaseCardProps> = ({
+	phase,
+	phaseName,
+	totalPhases,
+	currentPhaseIndex,
+	stages,
+	description,
+	progress,
+}) => {
+	const getStageColor = (stage: Stage): string => {
+		if (stage.completed) return 'green';
+		if (stage.name === stages[stages.length - 1]?.name) return 'cyan';
+		return 'gray';
+	};
+
+	return (
+		<Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+			<Box justifyContent="space-between" alignItems="center">
+				<Text bold color="cyan">
+					{`PHASE ${phase}`}
+				</Text>
+				<Text dimColor>
+					{currentPhaseIndex + 1} / {totalPhases}
+				</Text>
+			</Box>
+
+			<Text bold>{phaseName}</Text>
+
+			{!!description && (
+				<Box marginTop={1}>
+					<Text dimColor>{description}</Text>
+				</Box>
+			)}
+
+			<Box marginTop={1} flexDirection="column">
+				<Text dimColor>Progress</Text>
+				<Box>
+					<Box width={40}>
+						<Text>
+							{Array.from({ length: 40 }, (_, i) => {
+								const fillPercent = (i / 40) * 100;
+								return (
+									<Text key={i} backgroundColor={fillPercent <= progress ? 'cyan' : undefined}>
+										{fillPercent <= progress ? '█' : '░'}
+									</Text>
+								);
+							})}
+						</Text>
+					</Box>
+					<Text> {Math.round(progress)}%</Text>
+				</Box>
+			</Box>
+
+			<Box marginTop={1} flexDirection="column">
+				<Text bold>Stages</Text>
+				{stages.map((stage, idx) => (
+					<Box key={idx} justifyContent="space-between">
+						<Text color={getStageColor(stage)}>
+							{stage.completed ? '✓' : '○'} {stage.name}
+						</Text>
+						<Text dimColor>{stage.elapsed || 'in progress...'}</Text>
+					</Box>
+				))}
+			</Box>
+		</Box>
+	);
+};

package/get-shit-done/tui/components/StatsBar.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface StatsBarProps {
+	totalPhases: number;
+	completedPhases: number;
+	elapsedTime: string;
+	estimatedTimeRemaining?: string;
+	tokens: number;
+	cost: string;
+	budget?: {
+		used: number;
+		limit: number;
+	};
+}
+
+export const StatsBar: React.FC<StatsBarProps> = ({
+	totalPhases,
+	completedPhases,
+	elapsedTime,
+	estimatedTimeRemaining,
+	tokens,
+	cost,
+	budget,
+}) => {
+	const progress = (completedPhases / totalPhases) * 100;
+
+	const formatTime = (seconds: number): string => {
+		const hrs = Math.floor(seconds / 3600);
+		const mins = Math.floor((seconds % 3600) / 60);
+		const secs = seconds % 60;
+
+		if (hrs > 0) {
+			return `${hrs}h ${mins}m`;
+		} else if (mins > 0) {
+			return `${mins}m ${secs}s`;
+		} else {
+			return `${secs}s`;
+		}
+	};
+
+	return (
+		<Box
+			flexDirection="column"
+			borderStyle="round"
+			borderColor="green"
+			padding={1}
+			marginTop={1}
+		>
+			<Box justifyContent="space-between" alignItems="center">
+				<Text bold color="green">
+					📊 Execution Stats
+				</Text>
+				<Text dimColor>{elapsedTime}</Text>
+			</Box>
+
+			<Box marginTop={1}>
+				<Box flexGrow={1} flexDirection="column" marginRight={2}>
+					<Text dimColor>Phases</Text>
+					<Box alignItems="center">
+						<Box width={30}>
+							<Text>
+								{Array.from({ length: 30 }, (_, i) => {
+									const fillPercent = (i / 30) * 100;
+									return (
+										<Text
+											key={i}
+											backgroundColor={fillPercent <= progress ? 'green' : undefined}
+										>
+											{fillPercent <= progress ? '█' : '░'}
+										</Text>
+									);
+								})}
+							</Text>
+						</Box>
+						<Text> {completedPhases}/{totalPhases}</Text>
+					</Box>
+				</Box>
+
+				<Box flexGrow={1} flexDirection="column" marginLeft={2}>
+					<Text dimColor>Time</Text>
+					<Text bold color="cyan">
+						{elapsedTime}
+						{estimatedTimeRemaining && (
+							<Text dimColor> (remaining: {estimatedTimeRemaining})</Text>
+						)}
+					</Text>
+				</Box>
+			</Box>
+
+			<Box marginTop={1} justifyContent="space-between">
+				<Box>
+					<Text dimColor>Tokens: </Text>
+					<Text bold>{tokens.toLocaleString()}</Text>
+				</Box>
+				<Box>
+					<Text dimColor>Cost: </Text>
+					<Text bold color="green">
+						${cost}
+					</Text>
+				</Box>
+				{budget && (
+					<Box>
+						<Text dimColor>Budget: </Text>
+						<Text
+							bold
+							color={
+								budget.used / budget.limit > 0.8
+									? 'red'
+									: budget.used / budget.limit > 0.6
+									? 'yellow'
+									: 'green'
+							}
+						>
+							${budget.used.toFixed(2)} / ${budget.limit}
+						</Text>
+					</Box>
+				)}
+			</Box>
+
+			{budget && (
+				<Box marginTop={1}>
+					<Text dimColor>Budget Usage: </Text>
+					<Box width={40}>
+						<Text>
+							{Array.from({ length: 40 }, (_, i) => {
+								const fillPercent = (i / 40) * (budget.used / budget.limit) * 100;
+								const color =
+									budget.used / budget.limit > 0.8
+										? 'red'
+										: budget.used / budget.limit > 0.6
+										? 'yellow'
+										: 'green';
+								return (
+									<Text key={i} backgroundColor={color}>
+										{fillPercent <= 100 ? '█' : '░'}
+									</Text>
+								);
+							})}
+						</Text>
+					</Box>
+					<Text> {Math.round((budget.used / budget.limit) * 100)}%</Text>
+				</Box>
+			)}
+		</Box>
+	);
+};