@ddse/acm-aicoder 0.5.0

package/src/ui/App.tsx

@@ -0,0 +1,392 @@
+// Main TUI Application Component
+// Three-column layout with command input
+
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import { ChatPane } from './components/ChatPane.js';
+import { GoalsTasksPane } from './components/GoalsTasksPane.js';
+import { EventsPane } from './components/EventsPane.js';
+import type { AppStore } from './store.js';
+
+type Pane = 'chat' | 'tasks' | 'events';
+
+interface WindowMeta {
+  startIndex: number;
+  endIndex: number;
+  clampedOffset: number;
+  maxOffset: number;
+  capacity: number;
+  canScrollUp: boolean;
+  canScrollDown: boolean;
+}
+
+const paneLabels: Record<Pane, string> = {
+  chat: 'Chat',
+  tasks: 'Goal/Tasks',
+  events: 'Events',
+};
+
+const paneOrder: Pane[] = ['chat', 'tasks', 'events'];
+
+const computeWindow = (total: number, capacity: number, requestedOffset: number): WindowMeta => {
+  const normalizedCapacity = Math.max(1, capacity);
+  const maxOffset = Math.max(0, total - normalizedCapacity);
+  const clampedOffset = Math.min(Math.max(requestedOffset, 0), maxOffset);
+  const startIndex = Math.max(0, total - normalizedCapacity - clampedOffset);
+  const endIndex = Math.min(total, startIndex + normalizedCapacity);
+
+  return {
+    startIndex,
+    endIndex,
+    clampedOffset,
+    maxOffset,
+    capacity: normalizedCapacity,
+    canScrollUp: clampedOffset < maxOffset,
+    canScrollDown: clampedOffset > 0,
+  };
+};
+
+interface AppProps {
+  store: AppStore;
+  onCommand: (command: string) => void;
+}
+
+export const App: React.FC<AppProps> = ({ store, onCommand }) => {
+  const [state, setState] = useState(store.getState());
+  const [input, setInput] = useState('');
+  const [focusedPane, setFocusedPane] = useState<Pane>('chat');
+  const [scrollOffsets, setScrollOffsets] = useState<{ chat: number; tasks: number; events: number }>(
+    { chat: 0, tasks: 0, events: 0 }
+  );
+  const { exit } = useApp();
+  
+  useEffect(() => {
+    const handleUpdate = () => {
+      setState(store.getState());
+    };
+    
+    store.on('update', handleUpdate);
+    return () => {
+      store.off('update', handleUpdate);
+    };
+  }, [store]);
+  
+  const handleSubmit = (value: string) => {
+    if (!value.trim()) return;
+    
+    // Handle built-in commands
+    if (value === '/exit' || value === '/quit') {
+      exit();
+      return;
+    }
+    
+    if (value === '/help') {
+      store.addMessage('system', `
+Available commands:
+  /exit, /quit     - Exit the application
+  /help            - Show this help
+  /retry           - Retry the last failed task
+  /skip            - Skip the current task
+  /context         - Show current context info
+  /budget          - Show token budget details
+  /reset           - Reset session (clear goal and tasks)
+  /reasoning       - Toggle nucleus reasoning messages
+  
+Pane controls:
+  Tab              - Switch focused column
+  Ctrl+↑ / Ctrl+↓  - Scroll active column
+  PgUp / PgDn      - Page through active column
+  Ctrl+C           - Exit immediately
+
+File mentions:
+  Use #path/to/file to reference files in your workspace
+  
+Type your goal or request to start planning.
+      `.trim());
+      setInput('');
+      return;
+    }
+    
+    if (value === '/reset') {
+      store.reset();
+      setInput('');
+      return;
+    }
+    
+    if (value === '/budget' && state.budgetStatus) {
+      const bs = state.budgetStatus;
+      store.addMessage('system', 
+        `Token Usage:\n` +
+        `  Total Tokens: ${bs.totalTokens}\n` +
+        `  Input Tokens: ${bs.totalInputTokens}\n` +
+        `  Output Tokens: ${bs.totalOutputTokens}\n` +
+        (bs.maxTokens !== undefined ? `  Allowance: ${bs.maxTokens}\n` : '') +
+        (bs.remainingTokens !== undefined ? `  Remaining: ${bs.remainingTokens}\n` : '') +
+        `  API Calls: ${bs.callCount}`
+      );
+      setInput('');
+      return;
+    }
+    
+    if (value === '/context' && state.currentContext) {
+      store.addMessage('system',
+        `Current Context:\n` +
+        `  ID: ${state.currentContext.id}\n` +
+        `  Facts: ${Object.keys(state.currentContext.facts || {}).length} entries`
+      );
+      setInput('');
+      return;
+    }
+
+    if (value === '/reasoning') {
+      const enabled = store.toggleReasoningVisible();
+      store.addMessage(
+        'system',
+        `Nucleus reasoning messages ${enabled ? 'enabled' : 'hidden'} (Ctrl+R to toggle).`
+      );
+      setInput('');
+      return;
+    }
+    
+    // Pass command to handler
+    onCommand(value);
+    setInput('');
+  };
+  
+  // Calculate terminal dimensions (approximate)
+  const termHeight = process.stdout.rows || 24;
+  const termWidth = process.stdout.columns || 80;
+  
+  const mainHeight = termHeight - 4; // Leave room for input
+  const col1Width = Math.floor(termWidth * 0.40);
+  const col2Width = Math.floor(termWidth * 0.30);
+  const col3Width = termWidth - col1Width - col2Width - 4;
+
+  const visibleMessages = useMemo(
+    () =>
+      state.showReasoning
+        ? state.messages
+        : state.messages.filter(message => message.role !== 'nucleus'),
+    [state.messages, state.showReasoning]
+  );
+
+  const chatCapacity = Math.max(1, mainHeight - 2);
+  const chatWindow = useMemo(
+    () => computeWindow(visibleMessages.length, chatCapacity, scrollOffsets.chat),
+    [visibleMessages.length, chatCapacity, scrollOffsets.chat]
+  );
+  const chatMessages = useMemo(
+    () => visibleMessages.slice(chatWindow.startIndex, chatWindow.endIndex),
+    [visibleMessages, chatWindow]
+  );
+
+  const tasksTotalEntries = useMemo(() => {
+    const goalEntry = state.currentGoal ? 1 : 0;
+    const summaryEntry = state.goalSummary ? 1 : 0;
+    const tasksHeader = state.tasks.length > 0 ? 1 : 0;
+    const taskEntries = state.tasks.length;
+    const contextHeader = state.currentContext ? 1 : 0;
+    const contextLines = state.currentContext ? 2 : 0;
+    const placeholderEntry = state.currentGoal ? 0 : 1;
+    return (
+      goalEntry +
+      summaryEntry +
+      tasksHeader +
+      taskEntries +
+      contextHeader +
+      contextLines +
+      placeholderEntry
+    );
+  }, [state.currentGoal, state.goalSummary, state.tasks, state.currentContext]);
+  const tasksCapacity = Math.max(1, mainHeight - 2);
+  const tasksWindow = useMemo(
+    () => computeWindow(tasksTotalEntries, tasksCapacity, scrollOffsets.tasks),
+    [tasksTotalEntries, tasksCapacity, scrollOffsets.tasks]
+  );
+
+  const eventsCapacity = Math.max(1, mainHeight - 2);
+  const eventsWindow = useMemo(
+    () => computeWindow(state.events.length, eventsCapacity, scrollOffsets.events),
+    [state.events.length, eventsCapacity, scrollOffsets.events]
+  );
+  const eventEntries = useMemo(
+    () => state.events.slice(eventsWindow.startIndex, eventsWindow.endIndex),
+    [state.events, eventsWindow]
+  );
+
+  const windowByPane = useMemo(
+    () => ({ chat: chatWindow, tasks: tasksWindow, events: eventsWindow }),
+    [chatWindow, tasksWindow, eventsWindow]
+  );
+
+  useEffect(() => {
+    if (scrollOffsets.chat !== chatWindow.clampedOffset) {
+      setScrollOffsets(prev =>
+        prev.chat === chatWindow.clampedOffset
+          ? prev
+          : { ...prev, chat: chatWindow.clampedOffset }
+      );
+    }
+  }, [chatWindow.clampedOffset, scrollOffsets.chat]);
+
+  useEffect(() => {
+    if (scrollOffsets.tasks !== tasksWindow.clampedOffset) {
+      setScrollOffsets(prev =>
+        prev.tasks === tasksWindow.clampedOffset
+          ? prev
+          : { ...prev, tasks: tasksWindow.clampedOffset }
+      );
+    }
+  }, [tasksWindow.clampedOffset, scrollOffsets.tasks]);
+
+  useEffect(() => {
+    if (scrollOffsets.events !== eventsWindow.clampedOffset) {
+      setScrollOffsets(prev =>
+        prev.events === eventsWindow.clampedOffset
+          ? prev
+          : { ...prev, events: eventsWindow.clampedOffset }
+      );
+    }
+  }, [eventsWindow.clampedOffset, scrollOffsets.events]);
+
+  const setPaneOffset = useCallback(
+    (pane: Pane, offset: number) => {
+      const meta = windowByPane[pane];
+      if (!meta) return;
+      const clamped = Math.min(Math.max(offset, 0), meta.maxOffset);
+      setScrollOffsets(prev =>
+        prev[pane] === clamped ? prev : { ...prev, [pane]: clamped }
+      );
+    },
+    [windowByPane]
+  );
+
+  const adjustScroll = useCallback(
+    (pane: Pane, delta: number) => {
+      const meta = windowByPane[pane];
+      if (!meta) return;
+      setPaneOffset(pane, meta.clampedOffset + delta);
+    },
+    [setPaneOffset, windowByPane]
+  );
+
+  useInput((inputKey, key) => {
+    if (key.tab) {
+      setFocusedPane(prev => {
+        const idx = paneOrder.indexOf(prev);
+        const nextIdx = key.shift
+          ? (idx - 1 + paneOrder.length) % paneOrder.length
+          : (idx + 1) % paneOrder.length;
+        return paneOrder[nextIdx];
+      });
+      return;
+    }
+
+    if (key.ctrl && inputKey && inputKey.toLowerCase() === 'r') {
+      const enabled = store.toggleReasoningVisible();
+      store.addMessage(
+        'system',
+        `Nucleus reasoning messages ${enabled ? 'enabled' : 'hidden'} (Ctrl+R to toggle).`
+      );
+      return;
+    }
+
+    const meta = windowByPane[focusedPane];
+    if (!meta) return;
+
+  const lineScrollModifier = key.ctrl || key.meta || (('alt' in key) && (key as any).alt);
+
+    if ((lineScrollModifier || key.shift) && key.upArrow) {
+      adjustScroll(focusedPane, 1);
+      return;
+    }
+
+    if ((lineScrollModifier || key.shift) && key.downArrow) {
+      adjustScroll(focusedPane, -1);
+      return;
+    }
+
+    if (key.pageUp || (key.shift && key.upArrow)) {
+      adjustScroll(focusedPane, meta.capacity);
+      return;
+    }
+
+    if (key.pageDown || (key.shift && key.downArrow)) {
+      adjustScroll(focusedPane, -meta.capacity);
+      return;
+    }
+  });
+  
+  return (
+    <Box flexDirection="column" height={termHeight}>
+      {/* Header */}
+      <Box borderStyle="double" borderColor="cyan" paddingX={1}>
+        <Text bold color="cyan">ACM AI Coder - Interactive Mode</Text>
+        <Box marginLeft={2}>
+          <Text color="cyan">Focus: {paneLabels[focusedPane]}</Text>
+          <Text>
+            {' '}
+            <Text color="gray">Tab</Text> = Switch
+            {'  '}
+            <Text color="gray">Shift+Tab</Text> = Reverse
+            {'  '}
+            <Text color="gray">Ctrl+R</Text> = Reasoning Toggle
+            {'  '}
+            <Text color="gray">Ctrl+↑/↓</Text> = Scroll
+            {'  '}
+            <Text color="gray">PgUp/PgDn</Text> = Page
+            {'  '}
+            <Text color="gray">Ctrl+C</Text> = Exit
+          </Text>
+        </Box>
+      </Box>
+
+  <Box flexGrow={1} flexDirection="row" gap={2} paddingX={1}>
+        <Box width={col1Width}>
+          <ChatPane
+            messages={chatMessages}
+            height={mainHeight}
+            canScrollUp={chatWindow.canScrollUp}
+            canScrollDown={chatWindow.canScrollDown}
+            focused={focusedPane === 'chat'}
+          />
+        </Box>
+        <Box width={col2Width}>
+          <GoalsTasksPane
+            goal={state.currentGoal}
+            plan={state.currentPlan}
+            context={state.currentContext}
+            tasks={state.tasks}
+            goalSummary={state.goalSummary}
+            height={mainHeight}
+            scrollOffset={tasksWindow.clampedOffset}
+            canScrollUp={tasksWindow.canScrollUp}
+            canScrollDown={tasksWindow.canScrollDown}
+            focused={focusedPane === 'tasks'}
+          />
+        </Box>
+        <Box width={col3Width}>
+          <EventsPane
+            events={eventEntries}
+            height={mainHeight}
+            canScrollUp={eventsWindow.canScrollUp}
+            canScrollDown={eventsWindow.canScrollDown}
+            focused={focusedPane === 'events'}
+          />
+        </Box>
+      </Box>
+      
+      {/* Command input */}
+      <Box borderStyle="single" borderColor="cyan" paddingX={1}>
+        <Text color="cyan" bold>&gt; </Text>
+        <TextInput
+          value={input}
+          onChange={setInput}
+          onSubmit={handleSubmit}
+          placeholder="Type your goal or command (e.g., /help)..."
+        />
+      </Box>
+    </Box>
+  );
+};

package/src/ui/components/ChatPane.tsx

@@ -0,0 +1,84 @@
+// Chat Pane Component
+// Displays user messages, planner reasoning, and nucleus thoughts
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { ChatMessage } from '../store.js';
+
+interface ChatPaneProps {
+  messages: ChatMessage[];
+  height: number;
+  canScrollUp: boolean;
+  canScrollDown: boolean;
+  focused: boolean;
+}
+
+export const ChatPane: React.FC<ChatPaneProps> = ({
+  messages,
+  height,
+  canScrollUp,
+  canScrollDown,
+  focused,
+}) => {
+  
+  return (
+    <Box
+      flexDirection="column"
+      height={height}
+      borderStyle="single"
+      borderColor={focused ? 'white' : 'cyan'}
+    >
+      <Box paddingX={1} borderStyle="single" borderColor={focused ? 'white' : 'cyan'}>
+        <Text bold color={focused ? 'white' : 'cyan'}>Chat</Text>
+        <Box flexGrow={1} />
+        <ScrollIndicator
+          up={canScrollUp}
+          down={canScrollDown}
+          color={focused ? 'white' : 'cyan'}
+        />
+      </Box>
+      <Box flexDirection="column" paddingX={1} flexGrow={1}>
+        {messages.length === 0 && (
+          <Text color="gray">Conversation will appear here.</Text>
+        )}
+        {messages.map(msg => (
+          <ChatMessageItem key={msg.id} message={msg} />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+const ChatMessageItem: React.FC<{ message: ChatMessage }> = ({ message }) => {
+  const roleColors = {
+    user: 'white',
+    planner: 'yellow',
+    nucleus: 'magenta',
+    system: 'gray',
+  };
+  
+  const roleLabels = {
+    user: 'You',
+    planner: 'Planner',
+    nucleus: 'Nucleus',
+    system: 'System',
+  };
+  
+  const color = roleColors[message.role] || 'white';
+  const label = roleLabels[message.role] || message.role;
+  
+  return (
+    <Box flexDirection="column" marginY={0}>
+      <Text color={color} bold>
+        {label}{message.streaming ? ' (streaming...)' : ''}:
+      </Text>
+      <Text color={color}>
+        {message.content || '...'}
+      </Text>
+    </Box>
+  );
+};
+
+const ScrollIndicator: React.FC<{ up: boolean; down: boolean; color: string }> = ({ up, down, color }) => (
+  <Text color={color}>{up ? '˄' : ' '} {down ? '˅' : ' '}</Text>
+);

package/src/ui/components/EventsPane.tsx

@@ -0,0 +1,81 @@
+// Event Stream Pane Component
+// Shows ledger events, tool calls, context updates, policy decisions
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { EventEntry } from '../store.js';
+
+interface EventsPaneProps {
+  events: EventEntry[];
+  height: number;
+  canScrollUp: boolean;
+  canScrollDown: boolean;
+  focused: boolean;
+}
+
+export const EventsPane: React.FC<EventsPaneProps> = ({
+  events,
+  height,
+  canScrollUp,
+  canScrollDown,
+  focused,
+}) => {
+  
+  return (
+    <Box
+      flexDirection="column"
+      height={height}
+      borderStyle="single"
+      borderColor={focused ? 'white' : 'blue'}
+    >
+      <Box paddingX={1} borderStyle="single" borderColor={focused ? 'white' : 'blue'}>
+        <Text bold color={focused ? 'white' : 'blue'}>Event Stream</Text>
+        <Box flexGrow={1} />
+        <ScrollIndicator
+          up={canScrollUp}
+          down={canScrollDown}
+          color={focused ? 'white' : 'blue'}
+        />
+      </Box>
+      <Box flexDirection="column" paddingX={1} flexGrow={1}>
+        {events.map(event => (
+          <EventItem key={event.id} event={event} />
+        ))}
+        {events.length === 0 && (
+          <Text color="gray">No events yet. Events will appear here as actions occur.</Text>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+const EventItem: React.FC<{ event: EventEntry }> = ({ event }) => {
+  const color = event.color || 'white';
+  
+  // Format event data for display
+  const formatData = (data: any): string => {
+    if (typeof data === 'string') return data;
+    if (typeof data === 'object') {
+      // Show a summary for objects
+      if (data.message) return data.message;
+      if (data.status) return `status: ${data.status}`;
+      if (data.name) return data.name;
+      return JSON.stringify(data).slice(0, 50);
+    }
+    return String(data);
+  };
+  
+  const timestamp = new Date(event.timestamp).toLocaleTimeString();
+  
+  return (
+    <Box>
+      <Text color="gray">[{timestamp}] </Text>
+      <Text color={color} bold>{event.type}</Text>
+      <Text>: {formatData(event.data)}</Text>
+    </Box>
+  );
+};
+
+const ScrollIndicator: React.FC<{ up: boolean; down: boolean; color: string }> = ({ up, down, color }) => (
+  <Text color={color}>{up ? '˄' : ' '} {down ? '˅' : ' '}</Text>
+);

package/src/ui/components/GoalsTasksPane.tsx

@@ -0,0 +1,149 @@
+// Goals and Tasks Pane Component
+// Shows current goal, plan, tasks with status, and budget info
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { Goal, Plan, Context } from '@ddse/acm-sdk';
+import type { TaskState } from '../store.js';
+
+interface GoalsTasksPaneProps {
+  goal?: Goal;
+  plan?: Plan;
+  context?: Context;
+  tasks: TaskState[];
+  goalSummary?: string;
+  height: number;
+  scrollOffset: number;
+  canScrollUp: boolean;
+  canScrollDown: boolean;
+  focused: boolean;
+}
+
+export const GoalsTasksPane: React.FC<GoalsTasksPaneProps> = ({
+  goal,
+  plan,
+  context,
+  tasks,
+  goalSummary,
+  height,
+  scrollOffset,
+  canScrollUp,
+  canScrollDown,
+  focused,
+}) => {
+  const rows: React.ReactNode[] = [];
+
+  if (goal) {
+    rows.push(
+      <Box flexDirection="column" marginBottom={1} key="goal">
+        <Text bold color="green">Goal:</Text>
+        <Text>{goal.intent || goal.id}</Text>
+        {goalSummary && (
+          <Box marginTop={1} flexDirection="column">
+            <Text bold color="cyan">Summary</Text>
+            <Text color="cyan">{goalSummary}</Text>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  if (tasks.length > 0) {
+    rows.push(
+      <Box flexDirection="column" marginBottom={1} key="tasks-header">
+        <Text bold color="green">Tasks:</Text>
+      </Box>
+    );
+
+    tasks.forEach(task => {
+      rows.push(<TaskItem key={task.id} task={task} />);
+    });
+  }
+
+  if (context) {
+    const factsCount = Object.keys(context.facts ?? {}).length;
+    const augmentationCount = context.augmentations?.length ?? 0;
+    const augmentationLabel = augmentationCount === 1 ? 'time' : 'times';
+
+    rows.push(
+      <Box flexDirection="column" marginBottom={1} key="context-info">
+        <Text bold color="green">Context Information:</Text>
+        <Text color="gray">  - current size: {factsCount}</Text>
+        <Text color="gray">  - augmented {augmentationCount} {augmentationLabel}</Text>
+      </Box>
+    );
+  }
+
+  if (!goal) {
+    rows.push(
+      <Box key="no-goal">
+        <Text color="gray">No active goal. Type a command to start.</Text>
+      </Box>
+    );
+  }
+
+  const capacity = Math.max(1, height - 2);
+  const maxOffset = Math.max(0, rows.length - capacity);
+  const effectiveOffset = Math.min(Math.max(scrollOffset, 0), maxOffset);
+  const start = Math.max(0, rows.length - capacity - effectiveOffset);
+  const visibleRows = rows.slice(start, start + capacity);
+
+  return (
+    <Box
+      flexDirection="column"
+      height={height}
+      borderStyle="single"
+      borderColor={focused ? 'white' : 'green'}
+    >
+      <Box paddingX={1} borderStyle="single" borderColor={focused ? 'white' : 'green'}>
+        <Text bold color={focused ? 'white' : 'green'}>Goal / Tasks / Progress</Text>
+        <Box flexGrow={1} />
+        <ScrollIndicator
+          up={canScrollUp}
+          down={canScrollDown}
+          color={focused ? 'white' : 'green'}
+        />
+      </Box>
+      <Box flexDirection="column" paddingX={1} flexGrow={1}>
+        {visibleRows}
+      </Box>
+    </Box>
+  );
+};
+
+const TaskItem: React.FC<{ task: TaskState }> = ({ task }) => {
+  const statusIcons = {
+    pending: '○',
+    running: '◐',
+    succeeded: '●',
+    failed: '✗',
+    retrying: '⟳',
+  };
+  
+  const statusColors = {
+    pending: 'gray',
+    running: 'yellow',
+    succeeded: 'green',
+    failed: 'red',
+    retrying: 'yellow',
+  };
+  
+  const icon = statusIcons[task.status] || '○';
+  const color = statusColors[task.status] || 'white';
+  
+  const label = (task.objective && task.objective.trim().length > 0)
+    ? task.objective.trim()
+    : (task.title ?? task.name);
+
+  return (
+    <Box>
+      <Text color={color}>
+        {icon} {label}
+      </Text>
+    </Box>
+  );
+};
+
+const ScrollIndicator: React.FC<{ up: boolean; down: boolean; color: string }> = ({ up, down, color }) => (
+  <Text color={color}>{up ? '˄' : ' '} {down ? '˅' : ' '}</Text>
+);