sparkecoder 0.1.98 → 0.1.100

package/web/.next/standalone/web/src/app/(main)/agents/page.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+import {
+  Bot,
+  Loader2,
+  PauseCircle,
+  CheckCircle2,
+  XCircle,
+  MessageCircleQuestion,
+  PlayCircle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useSessions } from '@/hooks/use-sessions';
+import { cn } from '@/lib/utils';
+import { answerAgentQuestion, type AgentStatus, type Session } from '@/lib/api';
+import { mutateSessions } from '@/hooks/use-sessions';
+
+const COLUMNS: { key: AgentStatus; label: string; icon: React.ComponentType<{ className?: string }>; tone: string }[] = [
+  { key: 'running', label: 'In progress', icon: Loader2, tone: 'text-emerald-500' },
+  { key: 'needs_attention', label: 'Needs your input', icon: MessageCircleQuestion, tone: 'text-amber-500' },
+  { key: 'idle', label: 'Idle', icon: PauseCircle, tone: 'text-muted-foreground' },
+  { key: 'completed', label: 'Completed', icon: CheckCircle2, tone: 'text-blue-500' },
+  { key: 'failed', label: 'Failed', icon: XCircle, tone: 'text-rose-500' },
+];
+
+function formatRelative(iso?: string): string {
+  if (!iso) return '';
+  const diff = Date.now() - new Date(iso).getTime();
+  const m = Math.floor(diff / 60_000);
+  if (m < 1) return 'just now';
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  return `${d}d ago`;
+}
+
+export default function AgentsBoardPage() {
+  const { sessions, isLoading } = useSessions();
+  const workers = useMemo(
+    () => sessions.filter((s) => (s.role ?? 'chat') === 'worker'),
+    [sessions],
+  );
+
+  const grouped = useMemo(() => {
+    const g: Record<AgentStatus, Session[]> = {
+      running: [], needs_attention: [], idle: [], completed: [], failed: [],
+    };
+    for (const s of workers) {
+      const status = (s.agentStatus ?? (s.isStreaming ? 'running' : 'idle')) as AgentStatus;
+      if (g[status]) g[status].push(s);
+    }
+    return g;
+  }, [workers]);
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      <div className="px-6 py-4 border-b border-border/60 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Bot className="size-5 text-primary" />
+          <h1 className="text-lg font-semibold">Agents</h1>
+          <span className="text-xs text-muted-foreground">
+            {workers.length} {workers.length === 1 ? 'agent' : 'agents'}
+          </span>
+        </div>
+        <Link href="/" className="text-xs text-muted-foreground hover:text-foreground">Back to home</Link>
+      </div>
+
+      <div className="flex-1 overflow-x-auto overflow-y-hidden">
+        <div className="flex h-full gap-4 p-4 min-w-max">
+          {COLUMNS.map((col) => (
+            <Column
+              key={col.key}
+              col={col}
+              sessions={grouped[col.key]}
+              loading={isLoading && workers.length === 0}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Column({
+  col,
+  sessions,
+  loading,
+}: {
+  col: { key: AgentStatus; label: string; icon: React.ComponentType<{ className?: string }>; tone: string };
+  sessions: Session[];
+  loading: boolean;
+}) {
+  const Icon = col.icon;
+  return (
+    <div className="flex flex-col w-80 shrink-0 rounded-lg bg-card/40 border border-border/60">
+      <div className="px-3 py-2 flex items-center gap-2 border-b border-border/60">
+        <Icon className={cn('size-4', col.tone, col.key === 'running' && 'animate-spin')} />
+        <h2 className="text-sm font-medium">{col.label}</h2>
+        <span className="ml-auto text-xs text-muted-foreground tabular-nums">{sessions.length}</span>
+      </div>
+      <div className="flex-1 overflow-y-auto p-2 space-y-2">
+        {loading && sessions.length === 0 ? (
+          <p className="text-xs text-muted-foreground text-center py-6">Loading…</p>
+        ) : sessions.length === 0 ? (
+          <p className="text-xs text-muted-foreground/70 text-center py-6 italic">No agents</p>
+        ) : (
+          sessions.map((s) => <AgentCard key={s.id} session={s} />)
+        )}
+      </div>
+    </div>
+  );
+}
+
+function AgentCard({ session }: { session: Session }) {
+  const [answer, setAnswer] = useState('');
+  const [sending, setSending] = useState(false);
+  const status = (session.agentStatus ?? 'idle') as AgentStatus;
+  const task = session.config?.task;
+  const result = task?.result as any;
+
+  const onAnswer = async () => {
+    if (!session.pendingQuestion || !answer.trim() || sending) return;
+    setSending(true);
+    try {
+      await answerAgentQuestion(session.id, session.pendingQuestion.questionId, answer.trim());
+      setAnswer('');
+      mutateSessions();
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Link
+      href={`/session/${session.id}`}
+      className="block rounded-md border border-border/60 bg-background hover:bg-accent/40 transition-colors p-3 group"
+    >
+      <div className="flex items-start gap-2">
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium truncate">{session.name || 'Untitled agent'}</p>
+          {session.lastMessagePreview && (
+            <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">
+              {session.lastMessagePreview}
+            </p>
+          )}
+          {status === 'completed' && result?.summary && (
+            <p className="text-xs text-blue-600 dark:text-blue-400 line-clamp-2 mt-1">
+              ✓ {String(result.summary)}
+            </p>
+          )}
+          {status === 'failed' && task?.error && (
+            <p className="text-xs text-rose-500 line-clamp-2 mt-1">{task.error}</p>
+          )}
+        </div>
+        {status === 'running' && <Loader2 className="size-3.5 animate-spin text-emerald-500 shrink-0 mt-1" />}
+      </div>
+
+      {session.pendingQuestion && (
+        <div
+          className="mt-3 rounded border border-amber-500/30 bg-amber-500/5 p-2"
+          onClick={(e) => e.preventDefault()}
+        >
+          <p className="text-xs font-medium text-amber-700 dark:text-amber-300">
+            Question: {session.pendingQuestion.question}
+          </p>
+          {session.pendingQuestion.context && (
+            <p className="text-[11px] text-muted-foreground mt-1">{session.pendingQuestion.context}</p>
+          )}
+          {session.pendingQuestion.choices && session.pendingQuestion.choices.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-2">
+              {session.pendingQuestion.choices.map((choice) => (
+                <button
+                  key={choice}
+                  type="button"
+                  className="text-[11px] px-1.5 py-0.5 rounded bg-amber-500/10 hover:bg-amber-500/20 text-amber-700 dark:text-amber-200"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setAnswer(choice);
+                  }}
+                >
+                  {choice}
+                </button>
+              ))}
+            </div>
+          )}
+          <div className="flex gap-1 mt-2">
+            <input
+              type="text"
+              value={answer}
+              onChange={(e) => setAnswer(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  onAnswer();
+                }
+              }}
+              placeholder="Type an answer…"
+              className="flex-1 px-2 py-1 text-xs rounded border border-border/60 bg-background focus:outline-none focus:ring-1 focus:ring-amber-500/60"
+            />
+            <Button
+              size="sm"
+              type="button"
+              disabled={!answer.trim() || sending}
+              onClick={(e) => { e.preventDefault(); onAnswer(); }}
+              className="h-7 px-2 text-xs"
+            >
+              {sending ? '…' : 'Send'}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <div className="mt-2 flex items-center gap-2 text-[10px] text-muted-foreground">
+        <PlayCircle className="size-3" />
+        <span>{formatRelative(session.updatedAt || session.createdAt)}</span>
+      </div>
+    </Link>
+  );
+}

package/web/.next/standalone/web/src/app/(main)/page.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
-import { Plus, Loader2, Key, ExternalLink, AlertCircle, MessageSquare, Clock, Trash2 } from 'lucide-react';
+import { Plus, Loader2, Key, ExternalLink, AlertCircle, MessageSquare, Clock, Trash2, Bot } from 'lucide-react';
 import {
   Tooltip,
   TooltipContent,
@@ -39,10 +39,27 @@ function formatRelativeTime(dateString: string): string {
   return `${Math.floor(diffDays / 7)} weeks ago`;
 }
 
+function SummaryStat({ label, value, tone }: { label: string; value: number; tone: string }) {
+  return (
+    <div className="rounded-lg border border-border/60 bg-card/50 p-2 text-center">
+      <p className={cn('text-lg font-semibold tabular-nums', tone)}>{value}</p>
+      <p className="text-[10px] text-muted-foreground uppercase tracking-wide">{label}</p>
+    </div>
+  );
+}
+
 function HomeContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { sessions, isLoading: loadingSessions } = useSessions();
+  const workers = sessions.filter((s) => s.role === 'worker');
+  const workersByStatus = {
+    running: workers.filter((s) => s.agentStatus === 'running').length,
+    needs_attention: workers.filter((s) => s.agentStatus === 'needs_attention').length,
+    completed: workers.filter((s) => s.agentStatus === 'completed').length,
+    failed: workers.filter((s) => s.agentStatus === 'failed').length,
+    idle: workers.filter((s) => s.agentStatus === 'idle').length,
+  };
   const [creating, setCreating] = useState(false);
   const [config, setConfig] = useState<AppConfig | null>(null);
   const [apiKeyInput, setApiKeyInput] = useState('');
@@ -295,6 +312,28 @@ function HomeContent() {
           Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono">⌘</kbd> + <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono">T</kbd> to create a new session
         </p>
 
+        {/* Agents summary */}
+        {workers.length > 0 && (
+          <div className="mt-6 text-left">
+            <div className="flex items-center justify-between mb-3">
+              <div className="flex items-center gap-2">
+                <Bot className="size-4 text-muted-foreground" />
+                <h2 className="text-sm font-medium text-muted-foreground">Agents</h2>
+              </div>
+              <Link href="/agents" className="text-xs text-muted-foreground hover:text-foreground">
+                Open board →
+              </Link>
+            </div>
+            <div className="grid grid-cols-5 gap-2">
+              <SummaryStat label="Running" value={workersByStatus.running} tone="text-emerald-500" />
+              <SummaryStat label="Needs input" value={workersByStatus.needs_attention} tone="text-amber-500" />
+              <SummaryStat label="Idle" value={workersByStatus.idle} tone="text-muted-foreground" />
+              <SummaryStat label="Done" value={workersByStatus.completed} tone="text-blue-500" />
+              <SummaryStat label="Failed" value={workersByStatus.failed} tone="text-rose-500" />
+            </div>
+          </div>
+        )}
+
         {/* Recent Sessions */}
         {!loadingSessions && sessions.length > 0 && (
           <div className="mt-10 text-left">

package/web/.next/standalone/web/src/app/(main)/session/[id]/page.tsx

@@ -3,6 +3,7 @@
 import { use, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { ChatInterface } from '@/components/chat-interface';
+import { PendingQuestionBanner } from '@/components/pending-question-banner';
 import { getSession, type Session } from '@/lib/api';
 import { Loader2 } from 'lucide-react';
 
@@ -60,5 +61,12 @@ export default function SessionPage({
     );
   }
 
-  return <ChatInterface session={session} />;
+  return (
+    <div className="flex flex-col h-full">
+      <PendingQuestionBanner sessionId={session.id} />
+      <div className="flex-1 min-h-0">
+        <ChatInterface session={session} />
+      </div>
+    </div>
+  );
 }