sparkecoder 0.1.98 → 0.1.99

package/web/.next/standalone/web/src/components/chat-interface.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import { useState, useRef, useEffect } from 'react';
 import Image from 'next/image';
 import { cn } from '@/lib/utils';
@@ -238,6 +239,167 @@ function stripDevtoolsContext(text: string): string {
   return text.replace(DEVTOOLS_CONTEXT_RE, '').trim();
 }
 
+/** Channel pill at the start of an orchestrator user-message, e.g. "[SLACK #ops by @ryan]" or "[WEB]". */
+interface ChannelPillInfo {
+  channel: string;        // SLACK | WEB | SYSTEM | SCHEDULE | WEBHOOK
+  detail?: string;        // remainder of the bracket, e.g. "#ops by @ryan"
+}
+function extractChannelPill(text: string): { pill: ChannelPillInfo | null; rest: string } {
+  const m = text.match(/^\[([A-Z]+)(?:\s+([^\]]*))?\]\s*([\s\S]*)$/);
+  if (!m) return { pill: null, rest: text };
+  const channel = m[1];
+  // Only treat as a channel pill if it's a known channel id.
+  if (!['WEB', 'SLACK', 'SYSTEM', 'SCHEDULE', 'WEBHOOK'].includes(channel)) {
+    return { pill: null, rest: text };
+  }
+  return { pill: { channel, detail: m[2]?.trim() || undefined }, rest: m[3] };
+}
+
+const CHANNEL_PALETTE: Record<string, string> = {
+  SLACK: 'bg-purple-500/10 text-purple-600 dark:text-purple-300 border-purple-500/30',
+  SYSTEM: 'bg-blue-500/10 text-blue-600 dark:text-blue-300 border-blue-500/30',
+  SCHEDULE: 'bg-amber-500/10 text-amber-600 dark:text-amber-300 border-amber-500/30',
+  WEBHOOK: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-300 border-emerald-500/30',
+};
+
+function ChannelPill({ channel, detail }: ChannelPillInfo) {
+  // Hide [WEB] pills — web is the default surface, showing a pill on
+  // every typed message is noise.
+  if (channel === 'WEB') return null;
+  const tone = CHANNEL_PALETTE[channel] || 'bg-muted text-muted-foreground border-border';
+  return (
+    <span className={`inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-wide px-1.5 py-0.5 rounded border mr-2 mb-1 ${tone}`}>
+      <span>{channel}</span>
+      {detail && <span className="font-normal normal-case opacity-80">{detail}</span>}
+    </span>
+  );
+}
+
+/** Channels that aren't direct human chat — render compactly with click-to-expand. */
+const SYNTHETIC_CHANNELS = new Set(['SYSTEM', 'SCHEDULE', 'WEBHOOK']);
+
+/**
+ * Inbound human message from a non-web channel (Slack today, others later).
+ * Renders the tag ABOVE a normal user bubble so the convo doesn't read like
+ * the channel pill is part of the message body.
+ */
+function TaggedInboundUserMessage({
+  pill, body, attachmentsBlock, devtoolsTrail, footer,
+}: {
+  pill: ChannelPillInfo;
+  body: string;
+  attachmentsBlock?: React.ReactNode;
+  devtoolsTrail?: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  const tone = CHANNEL_PALETTE[pill.channel] || 'bg-muted text-muted-foreground border-border';
+  return (
+    <div className="flex flex-col items-end gap-1 my-2">
+      <div className={`inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide px-2 py-0.5 rounded-md border self-end ${tone}`}>
+        <span>{pill.channel}</span>
+        {pill.detail && <span className="font-normal normal-case opacity-80">{pill.detail}</span>}
+      </div>
+      <Message from="user">
+        <MessageContent>
+          {attachmentsBlock}
+          {body && <p className="whitespace-pre-wrap">{body}</p>}
+          {devtoolsTrail}
+        </MessageContent>
+        {footer}
+      </Message>
+    </div>
+  );
+}
+
+/**
+ * Renders an outbound `messenger({action:'post', ...})` tool call as if it
+ * were a special assistant message: tag on top ("→ SENT VIA SLACK #ops"),
+ * the actual text bubble below, and a small status footer. So when a user
+ * comes back to the web later they can see exactly what was sent on other
+ * channels.
+ */
+function SentMessengerCard({
+  input, output, status,
+}: {
+  input: any;
+  output: any;
+  status: string;
+}) {
+  if (!input || input.action !== 'post') return null;
+  const channel = String(input.channel || 'unknown').toUpperCase();
+  const tone = CHANNEL_PALETTE[channel] || 'bg-muted text-muted-foreground border-border';
+  const to = String(input.to || '');
+  const threadTs = input.threadTs ? String(input.threadTs) : null;
+  const text = String(input.text || '');
+  const ok = output && typeof output === 'object' && (output as any).ok !== false;
+  const errorText = output && typeof output === 'object' ? (output as any).error : undefined;
+  const pending = status === 'streaming' || status === 'running' || status === 'pending' || status === 'input-available';
+  return (
+    <div className="flex flex-col items-start gap-1 my-2 max-w-[80%]">
+      <div className={`inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide px-2 py-0.5 rounded-md border ${tone}`}>
+        <span>→ Sent via {channel}</span>
+        {to && <span className="font-normal normal-case opacity-80">to {to}</span>}
+        {threadTs && <span className="font-normal normal-case opacity-60">thread {threadTs}</span>}
+      </div>
+      <div className={`rounded-2xl border bg-card/40 px-3 py-2 ${pending ? 'opacity-60' : ''}`}>
+        {text ? (
+          <p className="text-sm whitespace-pre-wrap">{text}</p>
+        ) : (
+          <p className="text-xs italic text-muted-foreground">(empty message)</p>
+        )}
+      </div>
+      <div className="text-[10px] text-muted-foreground flex items-center gap-1">
+        {pending ? (
+          <span className="opacity-70">sending…</span>
+        ) : ok ? (
+          <span className="text-emerald-500">✓ delivered</span>
+        ) : (
+          <span className="text-rose-500">✗ failed{errorText ? `: ${errorText}` : ''}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Synthetic event row — a compact one-liner for SYSTEM/SCHEDULE/WEBHOOK
+ * messages so the chat doesn't get cluttered with every worker completion,
+ * cron tick, or webhook hit. Click to expand the full payload.
+ */
+function SyntheticEventMessage({ pill, body }: { pill: ChannelPillInfo; body: string }) {
+  const [expanded, setExpanded] = React.useState(false);
+  const tone = CHANNEL_PALETTE[pill.channel] || 'bg-muted text-muted-foreground border-border';
+  // First non-empty line for the collapsed summary.
+  const firstLine = body.split('\n').find((l) => l.trim().length > 0) || '';
+  const truncated = firstLine.length > 140 ? firstLine.slice(0, 140) + '…' : firstLine;
+  const isMultiline = body.includes('\n') || body.length > 140;
+
+  return (
+    <div className="flex justify-center my-1.5">
+      <button
+        type="button"
+        onClick={() => isMultiline && setExpanded((v) => !v)}
+        className={`group max-w-[80%] text-left rounded-md border px-2 py-1 transition-colors ${tone} ${isMultiline ? 'cursor-pointer hover:opacity-90' : 'cursor-default'}`}
+      >
+        <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide">
+          <span className="font-medium">{pill.channel}</span>
+          {pill.detail && <span className="font-normal normal-case opacity-80 truncate">{pill.detail}</span>}
+          {isMultiline && (
+            <ChevronDown
+              className={`h-3 w-3 ml-auto shrink-0 transition-transform ${expanded ? 'rotate-180' : ''}`}
+            />
+          )}
+        </div>
+        {expanded ? (
+          <pre className="mt-1 text-[11px] whitespace-pre-wrap font-mono opacity-90 max-h-[400px] overflow-y-auto">{body}</pre>
+        ) : (
+          <p className="mt-0.5 text-[11px] opacity-80 truncate">{truncated}</p>
+        )}
+      </button>
+    </div>
+  );
+}
+
 /** Parse devtools context metadata from a user message */
 function parseDevtoolsContext(text: string): DevtoolsContextMeta | null {
   const match = text.match(/<devtools-context>([\s\S]*?)<\/devtools-context>/);
@@ -2998,12 +3160,31 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
             })
             .map((item) => {
             if (item.type === 'user-message') {
+              // Channel-aware rendering for orchestrator-bound user messages.
+              // - SYSTEM/SCHEDULE/WEBHOOK → compact collapsible row
+              // - SLACK and other non-web human channels → tag ABOVE the bubble,
+              //   clean body inside (so the chat doesn't read like the pill is
+              //   part of the message)
+              // - WEB / no pill → normal user bubble (unchanged)
+              const extracted = item.content ? extractChannelPill(item.content) : { pill: null, rest: item.content || '' };
+              if (extracted.pill && SYNTHETIC_CHANNELS.has(extracted.pill.channel)) {
+                return <SyntheticEventMessage key={item.id} pill={extracted.pill} body={extracted.rest} />;
+              }
+              const useTaggedAbove = !!extracted.pill && extracted.pill.channel !== 'WEB';
+
               // Check if there's a checkpoint for this message (meaning we can revert to before it)
               const hasCheckpoint = item.messageSequence !== undefined && 
                 checkpoints.some(cp => cp.messageSequence === item.messageSequence);
               
               return (
-                <Message key={item.id} from="user">
+                <div key={item.id} className={useTaggedAbove ? 'flex flex-col items-end gap-1' : undefined}>
+                  {useTaggedAbove && extracted.pill && (
+                    <div className={`inline-flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide px-2 py-0.5 rounded-md border self-end ${CHANNEL_PALETTE[extracted.pill.channel] || 'bg-muted text-muted-foreground border-border'}`}>
+                      <span>{extracted.pill.channel}</span>
+                      {extracted.pill.detail && <span className="font-normal normal-case opacity-80">{extracted.pill.detail}</span>}
+                    </div>
+                  )}
+                <Message from="user">
                   <MessageContent>
                     {/* Display attachments if any */}
                     {item.attachments && item.attachments.length > 0 && (
@@ -3032,10 +3213,15 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
                       </div>
                     )}
                     {item.content && (() => {
-                      const displayText = stripDevtoolsContext(item.content);
-                      const devtoolsMeta = parseDevtoolsContext(item.content);
+                      // Use the already-extracted pill/rest from the parent
+                      // scope so we don't double-render the tag for tagged-above
+                      // messages.
+                      const rest = extracted.rest;
+                      const displayText = stripDevtoolsContext(rest);
+                      const devtoolsMeta = parseDevtoolsContext(rest);
                       return (
                         <>
+                          {!useTaggedAbove && extracted.pill && <ChannelPill {...extracted.pill} />}
                           {displayText && (
                             <p className="whitespace-pre-wrap">{displayText}</p>
                           )}
@@ -3078,6 +3264,7 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
                     </MessageActions>
                   )}
                 </Message>
+                </div>
               );
             }
             
@@ -3126,7 +3313,21 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
             if (item.type === 'tool-call' && item.toolCall) {
               const tc = item.toolCall;
               const toolType = `tool-${tc.toolName}` as `tool-${string}`;
-              
+
+              // Render outbound `messenger({action:'post',...})` as a special
+              // "Sent via SLACK #ops" card so anyone returning to the web can
+              // see what the orchestrator actually pushed to external channels.
+              if (tc.toolName === 'messenger' && (tc.input as any)?.action === 'post') {
+                return (
+                  <SentMessengerCard
+                    key={item.id}
+                    input={tc.input}
+                    output={tc.output}
+                    status={tc.status}
+                  />
+                );
+              }
+
               // Use dedicated WriteFileTool component for write_file
               if (tc.toolName === 'write_file') {
                 return (

package/web/.next/standalone/web/src/components/pending-question-banner.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { MessageCircleQuestion, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { getSession, answerAgentQuestion } from '@/lib/api';
+
+/**
+ * Polls the session and shows a banner inside the chat surface when the
+ * worker agent has called `ask_question_to_user`. Lets the user answer
+ * inline so they don't have to leave the session.
+ */
+export function PendingQuestionBanner({ sessionId }: { sessionId: string }) {
+  const [question, setQuestion] = useState<{
+    questionId: string;
+    question: string;
+    context?: string;
+    choices?: string[];
+  } | null>(null);
+  const [answer, setAnswer] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const refresh = useCallback(async () => {
+    const s = await getSession(sessionId);
+    setQuestion(s?.pendingQuestion ?? null);
+  }, [sessionId]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const tick = async () => {
+      if (cancelled) return;
+      await refresh();
+    };
+    tick();
+    const id = setInterval(tick, 3000);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [refresh]);
+
+  if (!question) return null;
+
+  const send = async () => {
+    if (!answer.trim() || sending) return;
+    setSending(true);
+    try {
+      await answerAgentQuestion(sessionId, question.questionId, answer.trim());
+      setAnswer('');
+      setQuestion(null);
+      // The worker will resume; the next poll will reflect that.
+      refresh();
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className="border-b border-amber-500/40 bg-amber-500/5 px-4 py-3">
+      <div className="flex items-start gap-3 max-w-3xl mx-auto">
+        <MessageCircleQuestion className="size-5 text-amber-500 shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+            {question.question}
+          </p>
+          {question.context && (
+            <p className="text-xs text-muted-foreground mt-1">{question.context}</p>
+          )}
+          {question.choices && question.choices.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {question.choices.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onClick={() => setAnswer(c)}
+                  className="text-xs px-2 py-1 rounded bg-amber-500/10 hover:bg-amber-500/20 text-amber-800 dark:text-amber-200"
+                >
+                  {c}
+                </button>
+              ))}
+            </div>
+          )}
+          <div className="flex gap-2 mt-2">
+            <input
+              type="text"
+              value={answer}
+              onChange={(e) => setAnswer(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  send();
+                }
+              }}
+              placeholder="Type your answer…"
+              className="flex-1 px-3 py-1.5 text-sm rounded border border-border bg-background focus:outline-none focus:ring-2 focus:ring-amber-500/40"
+              autoFocus
+            />
+            <Button size="sm" onClick={send} disabled={!answer.trim() || sending}>
+              {sending ? <Loader2 className="size-3.5 animate-spin" /> : 'Answer'}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/.next/standalone/web/src/components/sessions-sidebar.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import Link from 'next/link';
 import Image from 'next/image';
-import { Plus, MessageSquare, Trash2, Loader2, Settings, PanelLeftClose, PanelLeft, Key, Check, X, Eye, EyeOff, Volume2, ListChecks, ChevronDown } from 'lucide-react';
+import { Plus, MessageSquare, Trash2, Loader2, Settings, PanelLeftClose, PanelLeft, Key, Check, X, Eye, EyeOff, Volume2, ListChecks, ChevronDown, Bot, LayoutGrid, Sliders } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import {
   Sidebar,
@@ -106,18 +106,13 @@ export function SessionsSidebar() {
   // Notification sound setting
   const { enabled: soundEnabled, setEnabled: setSoundEnabled } = useNotificationSound();
 
-  // Detect if we're in embed mode
-  const isEmbedMode = pathname.startsWith('/embed/');
-  
   // Get current session ID from pathname
-  const currentSessionId = pathname.startsWith('/session/') 
-    ? pathname.split('/session/')[1] 
-    : pathname.startsWith('/embed/')
-    ? pathname.split('/embed/')[1]
+  const currentSessionId = pathname.startsWith('/session/')
+    ? pathname.split('/session/')[1]
     : null;
-  
+
   // Base path for session links
-  const sessionBasePath = isEmbedMode ? '/embed' : '/session';
+  const sessionBasePath = '/session';
 
   // Determine if any session is actively running (for mascot animation)
   const isThinking = sessions.some(s => s.isStreaming);
@@ -306,7 +301,7 @@ export function SessionsSidebar() {
   const isCollapsed = state === 'collapsed';
 
   return (
-    <Sidebar collapsible={isEmbedMode ? "offcanvas" : "icon"} className="border-r border-border/50">
+    <Sidebar collapsible="icon" className="border-r border-border/50">
       {/* Header */}
       <SidebarHeader className={cn(isCollapsed ? "p-2 space-y-2" : "p-3 space-y-3")}>
         {/* Expanded: Full header */}
@@ -359,6 +354,63 @@ export function SessionsSidebar() {
               </div>
             </div>
 
+            {(() => {
+              const orchestrator = sessions.find((s) => s.role === 'orchestrator');
+              const workers = sessions.filter((s) => s.role === 'worker');
+              const needsAttention = workers.filter((s) => s.agentStatus === 'needs_attention').length;
+              const running = workers.filter((s) => s.agentStatus === 'running').length;
+              return (
+                <div className="flex flex-col gap-1 w-full">
+                  <Link
+                    href={orchestrator ? `/session/${orchestrator.id}` : '#'}
+                    className={cn(
+                      'flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors',
+                      pathname.startsWith('/session/') && orchestrator && pathname.includes(orchestrator.id)
+                        ? 'bg-accent text-foreground'
+                        : 'hover:bg-accent/60 text-foreground/80',
+                    )}
+                  >
+                    <Bot className="size-4 text-primary shrink-0" />
+                    <span className="flex-1 truncate">Orchestrator</span>
+                    {orchestrator?.isStreaming && (
+                      <span className="size-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                    )}
+                  </Link>
+                  <Link
+                    href="/agents"
+                    className={cn(
+                      'flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors',
+                      pathname === '/agents' ? 'bg-accent text-foreground' : 'hover:bg-accent/60 text-foreground/80',
+                    )}
+                  >
+                    <LayoutGrid className="size-4 text-muted-foreground shrink-0" />
+                    <span className="flex-1 truncate">Agents</span>
+                    <span className="text-[10px] text-muted-foreground tabular-nums">
+                      {workers.length}
+                    </span>
+                    {needsAttention > 0 && (
+                      <span className="text-[10px] px-1 rounded bg-amber-500/20 text-amber-600 dark:text-amber-300 tabular-nums">
+                        {needsAttention}!
+                      </span>
+                    )}
+                    {running > 0 && needsAttention === 0 && (
+                      <span className="size-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                    )}
+                  </Link>
+                  <Link
+                    href="/settings"
+                    className={cn(
+                      'flex items-center gap-2 px-2 py-1.5 rounded-md text-sm transition-colors',
+                      pathname === '/settings' ? 'bg-accent text-foreground' : 'hover:bg-accent/60 text-foreground/80',
+                    )}
+                  >
+                    <Sliders className="size-4 text-muted-foreground shrink-0" />
+                    <span className="flex-1 truncate">Settings</span>
+                  </Link>
+                </div>
+              );
+            })()}
+
             <div className="flex gap-2 w-full">
               <Button 
                 onClick={handleQuickCreate}
@@ -456,6 +508,56 @@ export function SessionsSidebar() {
               </Tooltip>
             </TooltipProvider>
 
+            {/* Orchestrator icon (collapsed) */}
+            {(() => {
+              const orchestrator = sessions.find((s) => s.role === 'orchestrator');
+              return (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Link
+                        href={orchestrator ? `/session/${orchestrator.id}` : '#'}
+                        className="size-8 mx-auto inline-flex items-center justify-center rounded-md hover:bg-accent"
+                      >
+                        <Bot className="size-4 text-primary" />
+                      </Link>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">Orchestrator</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              );
+            })()}
+
+            {/* Agents board icon (collapsed) */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link
+                    href="/agents"
+                    className="size-8 mx-auto inline-flex items-center justify-center rounded-md hover:bg-accent"
+                  >
+                    <LayoutGrid className="size-4" />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent side="right">Agents board</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            {/* Settings icon (collapsed) */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Link
+                    href="/settings"
+                    className="size-8 mx-auto inline-flex items-center justify-center rounded-md hover:bg-accent"
+                  >
+                    <Sliders className="size-4" />
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent side="right">Settings</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
             {/* New Task button */}
             <TooltipProvider>
               <Tooltip>
@@ -711,7 +813,7 @@ export function SessionsSidebar() {
                 <div className="flex justify-center py-8">
                   <Loader2 className="size-5 animate-spin text-muted-foreground" />
                 </div>
-              ) : sessions.length === 0 ? (
+              ) : sessions.filter((s) => s.role !== 'orchestrator').length === 0 ? (
                 !isCollapsed && (
                   <div className="text-center py-8 px-4">
                     <div className="relative overflow-hidden rounded-xl size-12 mx-auto mb-3 shadow-md ring-1 ring-white/10">
@@ -738,7 +840,7 @@ export function SessionsSidebar() {
                   </div>
                 )
               ) : (
-                sessions.map((session) => {
+                sessions.filter((s) => s.role !== 'orchestrator').map((session) => {
                   const isActive = session.id === currentSessionId;
                   const isHovered = hoveredSession === session.id;
                   const isRunning = session.isStreaming === true;
@@ -891,24 +993,11 @@ export function SessionsSidebar() {
                 <span className="text-muted-foreground">{sessions.length}</span>
               </div>
               
-              {/* Settings button */}
-              <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <DialogTrigger asChild>
-                        <Button
-                          size="icon"
-                          variant="ghost"
-                          className="size-7 hover:bg-accent transition-colors"
-                        >
-                          <Settings className="size-4" />
-                        </Button>
-                      </DialogTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent side="top">Settings</TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
+              {/* The Settings page lives at /settings — accessed via the
+                  top sidebar nav link. The legacy bottom-right gear is gone.
+                  This hidden Dialog block remains only to preserve handlers
+                  the rest of the file still references. */}
+              <Dialog open={false} onOpenChange={setSettingsOpen}>
                 <DialogContent className="sm:max-w-md">
                   <DialogHeader>
                     <DialogTitle className="flex items-center gap-2">
@@ -1109,25 +1198,6 @@ export function SessionsSidebar() {
                 </Tooltip>
               </TooltipProvider>
               
-              {/* Settings button collapsed */}
-              <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <DialogTrigger asChild>
-                        <Button
-                          size="icon"
-                          variant="ghost"
-                          className="size-8"
-                        >
-                          <Settings className="size-4" />
-                        </Button>
-                      </DialogTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent side="right">Settings</TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              </Dialog>
             </div>
           )}
         </div>

package/web/.next/standalone/web/src/lib/api.ts

@@ -22,6 +22,17 @@ export interface SessionConfig {
   task?: TaskConfig;
 }
 
+export type AgentStatus = 'running' | 'needs_attention' | 'completed' | 'failed' | 'idle';
+export type SessionRole = 'orchestrator' | 'worker' | 'chat';
+
+export interface PendingQuestion {
+  questionId: string;
+  question: string;
+  context?: string;
+  choices?: string[];
+  createdAt: string;
+}
+
 export interface Session {
   id: string;
   name: string;
@@ -29,6 +40,10 @@ export interface Session {
   workingDirectory: string;
   status: 'active' | 'waiting' | 'completed' | 'error';
   isStreaming?: boolean;
+  role?: SessionRole;
+  agentStatus?: AgentStatus;
+  pendingQuestion?: PendingQuestion | null;
+  lastMessagePreview?: string | null;
   config?: SessionConfig;
   createdAt: string;
   updatedAt?: string;
@@ -136,8 +151,9 @@ export interface TodosResponse {
 }
 
 // Sessions API
-export async function getSessions(): Promise<Session[]> {
-  const res = await fetch(`${getApiBase()}/sessions`);
+export async function getSessions(options?: { role?: SessionRole | 'all' }): Promise<Session[]> {
+  const qs = options?.role ? `?role=${options.role}` : '';
+  const res = await fetch(`${getApiBase()}/sessions${qs}`);
   if (!res.ok) {
     // 401 / 500 / etc — return an empty list rather than letting an
     // error JSON masquerade as `{ sessions: [...] }`.
@@ -147,6 +163,30 @@ export async function getSessions(): Promise<Session[]> {
   return data.sessions || [];
 }
 
+export async function answerAgentQuestion(
+  sessionId: string,
+  questionId: string,
+  answer: string,
+): Promise<void> {
+  await fetch(`${getApiBase()}/tasks/${sessionId}/questions/${questionId}/answer`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ answer, answeredBy: 'user' }),
+  });
+}
+
+export async function messageSession(
+  sessionId: string,
+  text: string,
+  options?: { force?: boolean; source?: 'orchestrator' | 'user' | 'system' },
+): Promise<void> {
+  await fetch(`${getApiBase()}/sessions/${sessionId}/messages`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ text, source: options?.source ?? 'user', force: !!options?.force }),
+  });
+}
+
 export async function getSession(id: string): Promise<Session | null> {
   // Guard against `undefined` / empty-string ids slipping through from
   // a partial render — without this the URL becomes `/sessions/undefined`
@@ -167,6 +207,7 @@ export async function createSession(params: {
   model?: string;
   workingDirectory?: string;
   toolApprovals?: Record<string, boolean>;
+  role?: SessionRole;
 }): Promise<Session> {
   const res = await fetch(`${getApiBase()}/sessions`, {
     method: 'POST',