@aion0/forge 0.5.26 → 0.5.28

package/.forge/worktrees/pipeline-4dd8dc2d/components/StatusBar.tsx

@@ -0,0 +1,99 @@
+'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-4dd8dc2d/components/TabBar.tsx

@@ -0,0 +1,46 @@
+'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-4dd8dc2d/components/TaskBoard.tsx

@@ -0,0 +1,113 @@
+'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-4dd8dc2d/components/TaskDetail.tsx

@@ -0,0 +1,372 @@
+'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;
+  }
+}