@aion0/forge 0.6.0 → 0.6.3

package/.forge/worktrees/pipeline-ecd7cb0f/components/StatusBar.tsx

@@ -1,99 +0,0 @@
-'use client';
-
-import type { Session } from '@/src/types';
-
-const providerLabels: Record<string, string> = {
-  anthropic: 'Claude',
-  google: 'Gemini',
-  openai: 'OpenAI',
-  grok: 'Grok',
-};
-
-export default function StatusBar({
-  providers,
-  usage,
-  sessions,
-}: {
-  providers: any[];
-  usage: any[];
-  sessions: Session[];
-}) {
-  const running = sessions.filter(s => s.status === 'running').length;
-  const idle = sessions.filter(s => s.status === 'idle').length;
-  const errored = sessions.filter(s => s.status === 'error').length;
-
-  return (
-    <div className="flex flex-col p-3 space-y-4 text-xs overflow-y-auto">
-      {/* Overview */}
-      <div>
-        <h3 className="font-semibold text-[var(--text-secondary)] uppercase mb-2">Status</h3>
-        <div className="space-y-1">
-          <div className="flex justify-between">
-            <span className="text-[var(--green)]">Running</span>
-            <span>{running}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-[var(--accent)]">Idle</span>
-            <span>{idle}</span>
-          </div>
-          {errored > 0 && (
-            <div className="flex justify-between">
-              <span className="text-[var(--red)]">Error</span>
-              <span>{errored}</span>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Providers */}
-      <div>
-        <h3 className="font-semibold text-[var(--text-secondary)] uppercase mb-2">Providers</h3>
-        <div className="space-y-2">
-          {providers.filter(p => p.enabled).map(p => {
-            const u = usage.find((u: any) => u.provider === p.name);
-            const totalTokens = u ? u.totalInput + u.totalOutput : 0;
-
-            return (
-              <div key={p.name} className="space-y-0.5">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-1.5">
-                    <span className={`text-[10px] ${p.hasKey ? 'text-[var(--green)]' : 'text-[var(--yellow)]'}`}>
-                      {p.hasKey ? '●' : '○'}
-                    </span>
-                    <span>{p.displayName}</span>
-                  </div>
-                  <span className="text-[var(--text-secondary)]">
-                    {totalTokens > 0 ? `${(totalTokens / 1000).toFixed(1)}k` : '—'}
-                  </span>
-                </div>
-                {totalTokens > 0 && (
-                  <div className="ml-4 h-1 bg-[var(--bg-primary)] rounded overflow-hidden">
-                    <div
-                      className="h-full bg-[var(--accent)] rounded"
-                      style={{ width: `${Math.min((totalTokens / 100000) * 100, 100)}%` }}
-                    />
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Quick info */}
-      <div>
-        <h3 className="font-semibold text-[var(--text-secondary)] uppercase mb-2">Info</h3>
-        <div className="space-y-1 text-[var(--text-secondary)]">
-          <div className="flex justify-between">
-            <span>Sessions</span>
-            <span>{sessions.length}</span>
-          </div>
-          <div className="flex justify-between">
-            <span>Total msgs</span>
-            <span>{sessions.reduce((a, s) => a + s.messageCount, 0)}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/.forge/worktrees/pipeline-ecd7cb0f/components/TabBar.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import React from 'react';
-
-export interface Tab {
-  id: number;
-  label: string;
-}
-
-export interface TabBarProps {
-  tabs: Tab[];
-  activeId: number;
-  onActivate: (id: number) => void;
-  onClose: (id: number) => void;
-}
-
-export default function TabBar({ tabs, activeId, onActivate, onClose }: TabBarProps) {
-  if (tabs.length === 0) return null;
-
-  return (
-    <div className="flex items-center border-b border-[var(--border)] bg-[var(--bg-tertiary)] overflow-x-auto shrink-0 min-w-0 max-w-full">
-      {tabs.map(tab => (
-        <div
-          key={tab.id}
-          className={`flex items-center gap-1 px-3 py-1.5 text-[11px] cursor-pointer border-r border-[var(--border)]/30 shrink-0 group ${
-            tab.id === activeId
-              ? 'bg-[var(--bg-primary)] text-[var(--text-primary)] border-b-2 border-b-[var(--accent)]'
-              : 'text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)] hover:text-[var(--text-primary)]'
-          }`}
-          onClick={() => onActivate(tab.id)}
-        >
-          <span className="truncate max-w-[120px]">{tab.label}</span>
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onClose(tab.id);
-            }}
-            className="text-[9px] w-4 h-4 flex items-center justify-center rounded hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] opacity-0 group-hover:opacity-100 shrink-0"
-          >
-            x
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}

package/.forge/worktrees/pipeline-ecd7cb0f/components/TaskBoard.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import type { Task, TaskStatus } from '@/src/types';
-
-const STATUS_COLORS: Record<TaskStatus, string> = {
-  queued: 'text-yellow-500',
-  running: 'text-[var(--green)]',
-  done: 'text-blue-400',
-  failed: 'text-[var(--red)]',
-  cancelled: 'text-[var(--text-secondary)]',
-};
-
-const STATUS_LABELS: Record<TaskStatus, string> = {
-  queued: 'queued',
-  running: 'running',
-  done: 'done',
-  failed: 'failed',
-  cancelled: 'cancelled',
-};
-
-export default function TaskBoard({
-  tasks,
-  activeId,
-  onSelect,
-  onRefresh,
-}: {
-  tasks: Task[];
-  activeId: string | null;
-  onSelect: (id: string) => void;
-  onRefresh: () => void;
-}) {
-  const [filter, setFilter] = useState<TaskStatus | 'all'>('all');
-
-  const filtered = filter === 'all' ? tasks : tasks.filter(t => t.status === filter);
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Filter tabs */}
-      <div className="p-2 border-b border-[var(--border)] flex gap-1 flex-wrap">
-        {(['all', 'running', 'queued', 'done', 'failed'] as const).map(f => (
-          <button
-            key={f}
-            onClick={() => setFilter(f)}
-            className={`text-[10px] px-2 py-0.5 rounded transition-colors ${
-              filter === f ? 'bg-[var(--accent)] text-white' : 'text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)]'
-            }`}
-          >
-            {f} {f !== 'all' ? `(${tasks.filter(t => t.status === f).length})` : `(${tasks.length})`}
-          </button>
-        ))}
-      </div>
-
-      {/* Task list */}
-      <div className="flex-1 overflow-y-auto">
-        {filtered.map(task => (
-          <button
-            key={task.id}
-            onClick={() => onSelect(task.id)}
-            className={`w-full text-left px-3 py-2 border-b border-[var(--border)] hover:bg-[var(--bg-tertiary)] transition-colors ${
-              activeId === task.id ? 'bg-[var(--bg-tertiary)]' : ''
-            }`}
-          >
-            <div className="flex items-center gap-2 mb-0.5">
-              <span className={`text-[10px] ${STATUS_COLORS[task.status]}`}>●</span>
-              <span className="text-xs font-medium truncate">{task.projectName}</span>
-              {(task as any).agent && (task as any).agent !== 'claude' && (
-                <span className="text-[8px] px-1 rounded bg-green-900/30 text-green-400">{(task as any).agent}</span>
-              )}
-              <span className={`text-[9px] ml-auto ${STATUS_COLORS[task.status]}`}>
-                {task.scheduledAt && task.status === 'queued'
-                  ? `⏰ ${new Date(task.scheduledAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}`
-                  : STATUS_LABELS[task.status]}
-              </span>
-            </div>
-            <p className="text-[11px] text-[var(--text-secondary)] truncate pl-4">
-              {task.prompt.slice(0, 80)}{task.prompt.length > 80 ? '...' : ''}
-            </p>
-            <div className="flex items-center gap-2 pl-4 mt-0.5">
-              <span className="text-[9px] text-[var(--text-secondary)]">
-                {timeAgo(task.createdAt)}
-              </span>
-              {task.costUSD != null && (
-                <span className="text-[9px] text-[var(--text-secondary)]">
-                  ${task.costUSD.toFixed(3)}
-                </span>
-              )}
-            </div>
-          </button>
-        ))}
-        {filtered.length === 0 && (
-          <div className="p-4 text-center text-xs text-[var(--text-secondary)]">
-            No tasks
-          </div>
-        )}
-      </div>
-
-      <div className="p-2 border-t border-[var(--border)] text-[10px] text-[var(--text-secondary)] text-center">
-        {tasks.length} tasks total
-      </div>
-    </div>
-  );
-}
-
-function timeAgo(dateStr: string): string {
-  const now = Date.now();
-  const then = new Date(dateStr).getTime();
-  const diff = now - then;
-  if (diff < 60000) return 'just now';
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-  return `${Math.floor(diff / 86400000)}d ago`;
-}

package/.forge/worktrees/pipeline-ecd7cb0f/components/TaskDetail.tsx

@@ -1,372 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import MarkdownContent from './MarkdownContent';
-import NewTaskModal from './NewTaskModal';
-import type { Task, TaskLogEntry } from '@/src/types';
-
-export default function TaskDetail({
-  task,
-  onRefresh,
-  onFollowUp,
-}: {
-  task: Task;
-  onRefresh: () => void;
-  onFollowUp?: (data: { projectName: string; prompt: string; conversationId: string }) => void;
-}) {
-  const [liveLog, setLiveLog] = useState<TaskLogEntry[]>(task.log);
-  const [liveStatus, setLiveStatus] = useState(task.status);
-  const [tab, setTab] = useState<'log' | 'diff' | 'result'>('log');
-  const [expandedTools, setExpandedTools] = useState<Set<number>>(new Set());
-  const [followUpText, setFollowUpText] = useState('');
-  const [editing, setEditing] = useState(false);
-  const logEndRef = useRef<HTMLDivElement>(null);
-
-  // SSE stream for running tasks
-  useEffect(() => {
-    if (task.status !== 'running' && task.status !== 'queued') {
-      setLiveLog(task.log);
-      setLiveStatus(task.status);
-      return;
-    }
-
-    setLiveLog([]);
-    const es = new EventSource(`/api/tasks/${task.id}/stream`);
-
-    es.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'log') {
-          setLiveLog(prev => [...prev, data.entry]);
-        } else if (data.type === 'status') {
-          setLiveStatus(data.status);
-          if (data.status === 'done' || data.status === 'failed' || data.status === 'cancelled') {
-            onRefresh();
-          }
-        } else if (data.type === 'complete' && data.task) {
-          setLiveLog(data.task.log);
-          setLiveStatus(data.task.status);
-        }
-      } catch {}
-    };
-
-    es.onerror = () => {
-      es.close();
-      onRefresh();
-    };
-
-    return () => es.close();
-  }, [task.id, task.status, onRefresh]);
-
-  useEffect(() => {
-    logEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [liveLog]);
-
-  const handleAction = async (action: string) => {
-    await fetch(`/api/tasks/${task.id}`, {
-      method: action === 'delete' ? 'DELETE' : 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: action !== 'delete' ? JSON.stringify({ action }) : undefined,
-    });
-    onRefresh();
-  };
-
-  const toggleTool = (i: number) => {
-    setExpandedTools(prev => {
-      const next = new Set(prev);
-      next.has(i) ? next.delete(i) : next.add(i);
-      return next;
-    });
-  };
-
-  const displayLog = liveLog.length > 0 ? liveLog : task.log;
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="border-b border-[var(--border)] px-4 py-2 shrink-0">
-        <div className="flex items-center justify-between mb-1">
-          <div className="flex items-center gap-2">
-            <StatusBadge status={liveStatus} />
-            <span className="text-sm font-semibold">{task.projectName}</span>
-            <span className="text-[10px] text-[var(--text-secondary)] font-mono">{task.id}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <button onClick={() => setEditing(true)} className="text-[10px] px-2 py-0.5 text-[var(--accent)] border border-[var(--accent)]/30 rounded hover:bg-[var(--accent)] hover:text-white">
-              Edit
-            </button>
-            {(liveStatus === 'running' || liveStatus === 'queued') && (
-              <button onClick={() => handleAction('cancel')} className="text-[10px] px-2 py-0.5 text-[var(--red)] border border-[var(--red)]/30 rounded hover:bg-[var(--red)] hover:text-white">
-                Cancel
-              </button>
-            )}
-            {(liveStatus === 'failed' || liveStatus === 'cancelled') && (
-              <button onClick={() => handleAction('retry')} className="text-[10px] px-2 py-0.5 text-[var(--accent)] border border-[var(--accent)]/30 rounded hover:bg-[var(--accent)] hover:text-white">
-                Retry
-              </button>
-            )}
-            <button onClick={() => handleAction('delete')} className="text-[10px] px-2 py-0.5 text-[var(--text-secondary)] hover:text-[var(--red)]">
-              Delete
-            </button>
-          </div>
-        </div>
-        <p className="text-xs text-[var(--text-secondary)] mb-2">{task.prompt}</p>
-        <div className="flex items-center gap-3 text-[10px] text-[var(--text-secondary)]">
-          <span>Created: {new Date(task.createdAt).toLocaleString()}</span>
-          {task.startedAt && <span>Started: {new Date(task.startedAt).toLocaleString()}</span>}
-          {task.completedAt && <span>Completed: {new Date(task.completedAt).toLocaleString()}</span>}
-          {task.costUSD != null && <span>Cost: ${task.costUSD.toFixed(4)}</span>}
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <div className="border-b border-[var(--border)] px-4 flex gap-0.5 shrink-0">
-        {(['log', 'result', 'diff'] as const).map(t => (
-          <button
-            key={t}
-            onClick={() => setTab(t)}
-            className={`text-[11px] px-3 py-1.5 border-b-2 transition-colors ${
-              tab === t ? 'border-[var(--accent)] text-[var(--accent)]' : 'border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-            }`}
-          >
-            {t === 'log' ? `Log (${displayLog.length})` : t === 'diff' ? 'Git Diff' : 'Result'}
-          </button>
-        ))}
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto p-4 text-sm">
-        {tab === 'log' && (
-          <div className="space-y-2">
-            {displayLog.map((entry, i) => (
-              <LogEntry key={i} entry={entry} index={i} expanded={expandedTools.has(i)} onToggle={() => toggleTool(i)} />
-            ))}
-            {liveStatus === 'running' && (
-              <div className="text-[var(--accent)] animate-pulse py-1 text-xs">working...</div>
-            )}
-            <div ref={logEndRef} />
-          </div>
-        )}
-
-        {tab === 'result' && (
-          <div className="prose-container">
-            {task.resultSummary ? (
-              <MarkdownContent content={task.resultSummary} />
-            ) : task.error ? (
-              <div className="p-3 bg-red-900/10 border border-red-800/20 rounded">
-                <pre className="whitespace-pre-wrap break-words text-[var(--red)] text-xs font-mono">{task.error}</pre>
-              </div>
-            ) : (
-              <p className="text-[var(--text-secondary)] text-xs">
-                {liveStatus === 'running' || liveStatus === 'queued' ? 'Task is still running...' : 'No result'}
-              </p>
-            )}
-          </div>
-        )}
-
-        {tab === 'diff' && (
-          <div>
-            {task.gitDiff ? (
-              <div className="bg-[var(--bg-tertiary)] rounded border border-[var(--border)] overflow-hidden">
-                <pre className="p-3 text-xs font-mono overflow-x-auto">
-                  {task.gitDiff.split('\n').map((line, i) => (
-                    <div key={i} className={`px-2 ${
-                      line.startsWith('+++') || line.startsWith('---') ? 'text-[var(--text-secondary)] font-semibold' :
-                      line.startsWith('+') ? 'text-[var(--green)] bg-green-500/5' :
-                      line.startsWith('-') ? 'text-[var(--red)] bg-red-500/5' :
-                      line.startsWith('@@') ? 'text-[var(--accent)] bg-[var(--accent)]/5 font-semibold' :
-                      line.startsWith('diff ') ? 'text-[var(--text-primary)] font-bold border-t border-[var(--border)] pt-2 mt-2' :
-                      'text-[var(--text-secondary)]'
-                    }`}>
-                      {line}
-                    </div>
-                  ))}
-                </pre>
-              </div>
-            ) : (
-              <p className="text-[var(--text-secondary)] text-xs">
-                {liveStatus === 'running' ? 'Diff will be captured after completion' : 'No changes detected'}
-              </p>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* Follow-up input for completed tasks */}
-      {liveStatus === 'done' && task.conversationId && onFollowUp && (
-        <div className="border-t border-[var(--border)] px-4 py-2 shrink-0">
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              if (!followUpText.trim()) return;
-              onFollowUp({
-                projectName: task.projectName,
-                prompt: followUpText.trim(),
-                conversationId: task.conversationId!,
-              });
-              setFollowUpText('');
-            }}
-            className="flex gap-2"
-          >
-            <input
-              type="text"
-              value={followUpText}
-              onChange={e => setFollowUpText(e.target.value)}
-              placeholder="Send follow-up message (continues this session)..."
-              className="flex-1 px-3 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
-            />
-            <button
-              type="submit"
-              disabled={!followUpText.trim()}
-              className="text-xs px-3 py-1.5 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
-            >
-              Send
-            </button>
-          </form>
-          <p className="text-[9px] text-[var(--text-secondary)] mt-1">
-            Session <span className="font-mono">{task.conversationId.slice(0, 12)}...</span> — creates a new task continuing this conversation
-          </p>
-        </div>
-      )}
-
-      {editing && (
-        <NewTaskModal
-          editTask={{ id: task.id, projectName: task.projectName, prompt: task.prompt, priority: task.priority, mode: task.mode, scheduledAt: task.scheduledAt }}
-          onClose={() => setEditing(false)}
-          onCreate={async (data) => {
-            await fetch(`/api/tasks/${task.id}`, {
-              method: 'PATCH',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ ...data, restart: true }),
-            });
-            setEditing(false);
-            onRefresh();
-          }}
-        />
-      )}
-    </div>
-  );
-}
-
-function StatusBadge({ status }: { status: string }) {
-  const colors: Record<string, string> = {
-    queued: 'bg-yellow-500/20 text-yellow-500',
-    running: 'bg-green-500/20 text-[var(--green)]',
-    done: 'bg-blue-500/20 text-blue-400',
-    failed: 'bg-red-500/20 text-[var(--red)]',
-    cancelled: 'bg-gray-500/20 text-[var(--text-secondary)]',
-  };
-  return (
-    <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${colors[status] || ''}`}>
-      {status}
-    </span>
-  );
-}
-
-function LogEntry({ entry, index, expanded, onToggle }: {
-  entry: TaskLogEntry;
-  index: number;
-  expanded: boolean;
-  onToggle: () => void;
-}) {
-  // System init
-  if (entry.type === 'system' && entry.subtype === 'init') {
-    return (
-      <div className="text-[10px] text-[var(--text-secondary)] py-0.5 flex items-center gap-1">
-        <span className="opacity-50">⚙</span> {entry.content}
-      </div>
-    );
-  }
-
-  // Error
-  if (entry.subtype === 'error') {
-    return (
-      <div className="p-2 bg-red-900/10 border border-red-800/20 rounded text-xs">
-        <pre className="whitespace-pre-wrap break-words text-[var(--red)] font-mono">{entry.content}</pre>
-      </div>
-    );
-  }
-
-  // Tool use — collapsible
-  if (entry.subtype === 'tool_use') {
-    const toolContent = formatToolContent(entry.content);
-    const isLong = toolContent.length > 80;
-
-    return (
-      <div className="border border-[var(--border)] rounded overflow-hidden">
-        <button
-          onClick={onToggle}
-          className="w-full flex items-center gap-2 px-2 py-1.5 bg-[var(--bg-tertiary)] hover:bg-[var(--border)]/30 transition-colors text-left"
-        >
-          <span className="text-[10px] px-1.5 py-0.5 bg-[var(--accent)]/15 text-[var(--accent)] rounded font-medium font-mono">
-            {entry.tool || 'tool'}
-          </span>
-          <span className="text-[11px] text-[var(--text-secondary)] truncate flex-1 font-mono">
-            {isLong && !expanded ? toolContent.slice(0, 80) + '...' : (!isLong ? toolContent : '')}
-          </span>
-          {isLong && (
-            <span className="text-[9px] text-[var(--text-secondary)] shrink-0">{expanded ? '▲' : '▼'}</span>
-          )}
-        </button>
-        {(expanded || !isLong) && isLong && (
-          <pre className="px-3 py-2 text-[11px] text-[var(--text-secondary)] font-mono whitespace-pre-wrap break-words max-h-60 overflow-y-auto border-t border-[var(--border)]">
-            {toolContent}
-          </pre>
-        )}
-      </div>
-    );
-  }
-
-  // Tool result — collapsible with border accent
-  if (entry.subtype === 'tool_result') {
-    const content = formatToolContent(entry.content);
-    const isLong = content.length > 150;
-
-    return (
-      <div className="ml-4 border-l-2 border-[var(--accent)]/30 pl-3">
-        <pre className={`text-[11px] text-[var(--text-secondary)] font-mono whitespace-pre-wrap break-words ${isLong && !expanded ? 'max-h-16 overflow-hidden' : 'max-h-80 overflow-y-auto'}`}>
-          {content}
-        </pre>
-        {isLong && !expanded && (
-          <button onClick={onToggle} className="text-[9px] text-[var(--accent)] hover:underline mt-0.5">
-            show more
-          </button>
-        )}
-      </div>
-    );
-  }
-
-  // Final result
-  if (entry.type === 'result') {
-    return (
-      <div className="p-3 bg-green-900/5 border border-green-800/15 rounded">
-        <MarkdownContent content={entry.content} />
-      </div>
-    );
-  }
-
-  // Assistant text — render as markdown
-  return (
-    <div className="py-1">
-      <MarkdownContent content={entry.content} />
-    </div>
-  );
-}
-
-// MarkdownContent is now imported from ./MarkdownContent
-
-function formatToolContent(content: string): string {
-  try {
-    const parsed = JSON.parse(content);
-    if (typeof parsed === 'object') {
-      // For common tool patterns, show a cleaner format
-      if (parsed.command) return `$ ${parsed.command}`;
-      if (parsed.file_path) return parsed.file_path;
-      if (parsed.pattern) return `/${parsed.pattern}/`;
-      return JSON.stringify(parsed, null, 2);
-    }
-    return content;
-  } catch {
-    return content;
-  }
-}