ui: add 'Who is working' panel

server/chat.mjs

@@ -0,0 +1,74 @@
+// Stream a chat reply from the Anthropic-compatible proxy.
+//
+// Reads ANTHROPIC_BASE_URL and ANTHROPIC_API_KEY from env at call time, so a
+// server started without them can still serve chat once they are configured.
+// Returns an async generator of text deltas.
+
+const DEFAULT_MAX_TOKENS = 4096;
+
+export function resolveConfig() {
+  const raw = (process.env.ANTHROPIC_BASE_URL || 'https://api.anthropic.com').replace(/\/+$/, '');
+  // Some gateways already carry /v1 in the base; do not ask for /v1/messages twice.
+  const messagesUrl = /\/v1$/.test(raw) ? `${raw}/messages` : `${raw}/v1/messages`;
+  return {
+    messagesUrl,
+    key: process.env.ANTHROPIC_API_KEY || '',
+    model: process.env.AGENT_FLOOR_CHAT_MODEL || 'claude-opus-4-5',
+  };
+}
+
+export async function* streamChat({ prompt, model }) {
+  const { messagesUrl, key, model: fallback } = resolveConfig();
+  if (!key) throw new Error('chat: ANTHROPIC_API_KEY is not set');
+
+  const res = await fetch(messagesUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': key,
+      'anthropic-version': '2023-06-01',
+    },
+    body: JSON.stringify({
+      model: model || fallback,
+      max_tokens: DEFAULT_MAX_TOKENS,
+      stream: true,
+      messages: [{ role: 'user', content: prompt }],
+    }),
+  }).catch((err) => {
+    throw Object.assign(new Error(`chat: cannot reach ${messagesUrl}`), { cause: err });
+  });
+
+  if (!res.ok || !res.body) {
+    const text = await res.text().catch(() => '');
+    throw Object.assign(new Error(`chat: HTTP ${res.status} ${text.slice(0, 200)}`), { status: res.status });
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const frames = buffer.split('\n\n');
+      buffer = frames.pop() || '';
+      for (const frame of frames) {
+        let event = '';
+        let data = '';
+        for (const line of frame.split('\n')) {
+          if (line.startsWith('event:')) event = line.slice(6).trim();
+          else if (line.startsWith('data:')) data = line.slice(5).trimStart();
+        }
+        if (event !== 'content_block_delta') continue;
+        try {
+          const delta = JSON.parse(data)?.delta;
+          if (delta?.type === 'text_delta' && delta.text) yield delta.text;
+        } catch { /* skip malformed frame */ }
+      }
+    }
+  } finally {
+    reader.cancel().catch(() => {});
+  }
+}

server/index.mjs

@@ -2,6 +2,7 @@
 //
 //   POST /events        one event or an array of events (see docs/protocol.md)
 //   GET  /stream        Server-Sent Events: a `snapshot`, then `event` + `effects`
+//   POST /chat          spawn a chat session, stream reply via SSE
 //   GET  /state         current world as JSON
 //   POST /reset         clear the floor
 //   GET  /*             the built web app (dist/)
@@ -10,6 +11,7 @@ import { readFile, stat } from 'node:fs/promises';
 import { extname, join, normalize, resolve, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { applyEvent, createState, normalizeEvent, sweep, PROTOCOL_VERSION } from '../shared/protocol.js';
+import { streamChat, resolveConfig } from './chat.mjs';
 
 const here = dirname(fileURLToPath(import.meta.url));
 const MAX_BODY = 256 * 1024;
@@ -107,6 +109,54 @@ export function startServer({
 
   const loopback = host === '127.0.0.1' || host === 'localhost' || host === '::1';
 
+  // POST /chat { prompt } -> SSE stream: `delta` frames, then `done` or `error`.
+  // Runs on the same trust level as POST /events: loopback only, no auth.
+  async function handleChat(req, res) {
+    let body;
+    try { body = await readBody(req); }
+    catch (err) { return json(res, 400, { error: err.message }); }
+
+    const prompt = typeof body?.prompt === 'string' ? body.prompt.trim() : '';
+    if (!prompt) return json(res, 400, { error: 'prompt is required' });
+    if (prompt.length > 8000) return json(res, 400, { error: 'prompt too long' });
+
+    const agentId = `chat-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+    const model = typeof body?.model === 'string' ? body.model : resolveConfig().model;
+
+    // The agent takes a desk while it works, then walks out.
+    ingest({ type: 'join', agent: agentId, name: 'Web Chat', role: 'Agent', team: 'web-chat', source: 'agent-floor', ts: Date.now() });
+    ingest({ type: 'status', agent: agentId, status: 'thinking', activity: 'Thinking...', ts: Date.now() });
+
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      Connection: 'keep-alive',
+      'X-Accel-Buffering': 'no',
+    });
+
+    let closed = false;
+    req.on('close', () => { closed = true; });
+
+    let text = '';
+    try {
+      for await (const chunk of streamChat({ prompt, model })) {
+        if (closed) return;
+        text += chunk;
+        res.write(`event: delta\ndata: ${JSON.stringify(chunk)}\n\n`);
+      }
+      if (!closed) res.write(`event: done\ndata: ${JSON.stringify(text || '(no response)')}\n\n`);
+      ingest({ type: 'status', agent: agentId, status: 'done', activity: 'Finished', ts: Date.now() });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (!closed) res.write(`event: error\ndata: ${JSON.stringify(msg)}\n\n`);
+      ingest({ type: 'status', agent: agentId, status: 'error', activity: msg.slice(0, 280), ts: Date.now() });
+    } finally {
+      // The desk stays a little while after the reply, then the agent walks out.
+      setTimeout(() => ingest({ type: 'leave', agent: agentId }), 10000);
+      res.end();
+    }
+  }
+
   const server = createServer(async (req, res) => {
     // DNS-rebinding guard: when bound to loopback, only answer loopback hostnames.
     if (loopback && !/^(localhost|127\.0\.0\.1|\[::1\])(:\d+)?$/.test(req.headers.host || '')) {
@@ -143,6 +193,10 @@ export function startServer({
       }
       if (pathname === '/state' && req.method === 'GET') return json(res, 200, state);
       if (pathname === '/health') return json(res, 200, { ok: true, version: PROTOCOL_VERSION, agents: Object.keys(state.agents).length });
+      if (pathname === '/chat' && req.method === 'POST') {
+        await handleChat(req, res);
+        return;
+      }
       if (pathname === '/reset' && req.method === 'POST') {
         ingest({ type: 'reset' });
         return json(res, 200, { ok: true });

src/core/connection.ts

@@ -6,7 +6,7 @@ import { DEMO_ONLY } from '../config';
 const params = new URLSearchParams(location.search);
 
 /** Where the floor server lives. Same origin by default; `?server=` overrides. */
-function serverBase() {
+export function serverBase() {
   const explicit = params.get('server');
   if (explicit) return explicit.replace(/\/$/, '');
   return '';

src/main.ts

@@ -1,7 +1,7 @@
 import '@fontsource-variable/geist';
 import '@fontsource-variable/geist-mono';
 import './styles.css';
-import { connect, isDemoRunning, startDemo } from './core/connection';
+import { connect, isDemoRunning, serverBase, startDemo } from './core/connection';
 import { store } from './core/store';
 import { Hud } from './ui/hud';
 import { World } from './world/World';
@@ -62,6 +62,7 @@ async function boot() {
     startDemo: () => {
       if (!isDemoRunning()) startDemo();
     },
+    submitChat,
   });
 
   function applyTheme(next: ThemeName, persist = false) {
@@ -114,4 +115,44 @@ async function boot() {
   }
 }
 
+// Web chat: POST a prompt, hand each streamed chunk back as it arrives.
+async function submitChat(prompt: string, onDelta: (chunk: string) => void): Promise<void> {
+  const res = await fetch(`${serverBase()}/chat`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ prompt }),
+  });
+  if (!res.ok || !res.body) {
+    const text = await res.text().catch(() => '');
+    throw new Error(text || `HTTP ${res.status}`);
+  }
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+  let error = '';
+  const readFrame = (frame: string) => {
+    let event = '';
+    let data = '';
+    for (const line of frame.split('\n')) {
+      if (line.startsWith('event:')) event = line.slice(6).trim();
+      else if (line.startsWith('data:')) data = line.slice(5).trimStart();
+    }
+    if (!data) return;
+    if (event === 'delta') {
+      try { onDelta(JSON.parse(data) as string); } catch { /* skip malformed */ }
+    } else if (event === 'error') {
+      try { error = JSON.parse(data) as string; } catch { /* skip malformed */ }
+    }
+  };
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const frames = buffer.split('\n\n');
+    buffer = frames.pop() || '';
+    for (const frame of frames) readFrame(frame);
+  }
+  if (error) throw new Error(error);
+}
+
 boot();