@polderlabs/bizar 4.2.4 → 4.3.0

package/bizar-dash/src/web/components/chat/useChat.ts

@@ -1,11 +1,13 @@
 // src/components/chat/useChat.ts — shared chat state: messages, sessions, send, polling.
+// Supports two parallel message streams: bizar (GET /api/chat) and opencode (GET /api/opencode-sessions/:id/messages + SSE).
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { ChatMessage, ChatResponse, ChatSession, Settings, Snapshot } from '../../lib/types';
 import { api } from '../../lib/api';
 
 export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?: string | null) {
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  // ── Bizar stream ────────────────────────────────────────────────────────────
+  const [bizarMessages, setBizarMessages] = useState<ChatMessage[]>([]);
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const [opencodeSessions, setOpencodeSessions] = useState<ChatSession[]>([]);
   const [sessionId, setSessionId] = useState('');
@@ -13,21 +15,28 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
   const [sending, setSending] = useState(false);
   const [pinned, setPinned] = useState<Set<number>>(new Set());
 
+  // ── Opencode stream ─────────────────────────────────────────────────────────
+  const [opencodeMessages, setOpencodeMessages] = useState<ChatMessage[]>([]);
+  const [activeSource, setActiveSource] = useState<'bizar' | 'opencode' | null>(null);
+  const [activeOpencodeSessionId, setActiveOpencodeSessionId] = useState<string | null>(null);
+  const opencodeEsRef = useRef<EventSource | null>(null);
+
   const listRef = useRef<HTMLDivElement>(null);
   const toastRef = useRef<{ error: (msg: string) => void; success: (msg: string) => void; info: (msg: string) => void } | null>(null);
 
-  // Auto-scroll on new messages
+  // Auto-scroll on new messages (both streams)
   useEffect(() => {
     if (listRef.current) {
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
-  }, [messages]);
+  }, [bizarMessages, opencodeMessages]);
 
+  // ── Load bizar chat ─────────────────────────────────────────────────────────
   const loadChat = useCallback(async (sid?: string) => {
     try {
       const url = sid ? `/chat?session=${encodeURIComponent(sid)}` : '/chat?limit=200';
       const data = await api.get<ChatResponse>(url);
-      setMessages(data.messages || []);
+      setBizarMessages(data.messages || []);
       setSessions(data.sessions || []);
     } catch (err) {
       toastRef.current?.error(`Chat load failed: ${(err as Error).message}`);
@@ -40,7 +49,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     setLoading(true);
     try {
       const data = await api.get<{ sessionId?: string; messages: ChatMessage[] }>(`/tasks/${encodeURIComponent(taskId)}/chat`);
-      setMessages(data.messages || []);
+      setBizarMessages(data.messages || []);
       setSessionId(data.sessionId || taskId);
     } catch (err) {
       toastRef.current?.error(`Task chat load failed: ${(err as Error).message}`);
@@ -70,6 +79,120 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     } catch { /* best-effort */ }
   }, []);
 
+  // ── Opencode session: load messages + open SSE ───────────────────────────────
+  const loadOpencodeSession = useCallback(async (sessionId: string) => {
+    // Close any existing opencode SSE
+    opencodeEsRef.current?.close();
+    opencodeEsRef.current = null;
+
+    try {
+      const data = await api.get<{ messages: ChatMessage[] }>(`/opencode-sessions/${encodeURIComponent(sessionId)}/messages`);
+      setOpencodeMessages(data.messages || []);
+    } catch (err) {
+      toastRef.current?.error(`Opencode session load failed: ${(err as Error).message}`);
+      setOpencodeMessages([]);
+    }
+
+    setActiveOpencodeSessionId(sessionId);
+    setActiveSource('opencode');
+
+    // Open SSE — EventSource can't set headers; token goes in query string via urlWithToken
+    const tok = api.getToken();
+    const baseUrl = tok
+      ? `/api/opencode-sessions/${encodeURIComponent(sessionId)}/stream?token=${encodeURIComponent(tok)}`
+      : `/api/opencode-sessions/${encodeURIComponent(sessionId)}/stream`;
+    const es = new EventSource(baseUrl);
+    opencodeEsRef.current = es;
+
+    es.onmessage = (e: MessageEvent) => {
+      // Each message is one SSE frame: "event: <type>\ndata: <json>\n\n"
+      // Split on newlines to isolate "event: …" and "data: …" lines
+      const raw = e.data;
+      if (!raw || raw.startsWith(':')) return; // skip heartbeat
+
+      let eventType = '';
+      let eventData: string | null = null;
+
+      const lines = raw.split('\n');
+      for (const line of lines) {
+        if (line.startsWith('event:')) {
+          eventType = line.slice(5).trim();
+        } else if (line.startsWith('data:')) {
+          eventData = line.slice(5).trim();
+        }
+      }
+
+      if (!eventType || eventData === null) return;
+
+      // Build a ChatMessage from the SSE event
+      let role: ChatMessage['role'] = 'assistant';
+      if (eventType.startsWith('message.user.')) role = 'user';
+
+      let content: string;
+      if (eventType === 'message.part.updated' && eventData !== null) {
+        try {
+          const parsed = JSON.parse(eventData);
+          content = parsed.data?.part?.text ?? JSON.stringify(parsed.data ?? parsed);
+        } catch {
+          content = eventData;
+        }
+      } else {
+        try {
+          const parsed = JSON.parse(eventData);
+          content = parsed.data ?? JSON.stringify(parsed);
+        } catch {
+          content = eventData;
+        }
+      }
+
+      // Dedup: skip if we already have a message with this id (from SSE echo)
+      const msgId = (() => {
+        try {
+          const parsed = JSON.parse(eventData!);
+          return parsed.messageID || parsed.id || null;
+        } catch {
+          return null;
+        }
+      })();
+
+      const newMsg: ChatMessage = {
+        id: msgId ?? undefined,
+        role,
+        content,
+        ts: new Date().toISOString(),
+      };
+
+      setOpencodeMessages((cur) => {
+        if (msgId && cur.some((m) => m.id === msgId)) return cur;
+        return [...cur, newMsg];
+      });
+    };
+
+    es.onerror = () => {
+      // SSE error — silently close; don't spam the user
+      try { es.close(); } catch { /* noop */ }
+      opencodeEsRef.current = null;
+    };
+  }, []);
+
+  // ── Close opencode session ──────────────────────────────────────────────────
+  const closeOpencodeSession = useCallback(() => {
+    opencodeEsRef.current?.close();
+    opencodeEsRef.current = null;
+    setOpencodeMessages([]);
+    setActiveOpencodeSessionId(null);
+    setActiveSource('bizar');
+  }, []);
+
+  // ── Select a bizar session ──────────────────────────────────────────────────
+  const selectBizarSession = useCallback((sid: string) => {
+    closeOpencodeSession();
+    setSessionId(sid);
+    setActiveSource('bizar');
+    loadChat(sid);
+  }, [closeOpencodeSession, loadChat]);
+
+  // ── Create session ──────────────────────────────────────────────────────────
   const onCreateSession = useCallback(async () => {
     if (!snapshot.activeProject) {
       toastRef.current?.error('Pick a project in Overview to scope chat sessions.');
@@ -78,7 +201,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     try {
       const created = await api.post<ChatSession>('/chat/sessions', {});
       setSessionId(created.id);
-      setMessages([]);
+      setBizarMessages([]);
       setPinned(new Set());
       await loadChat(created.id);
       refreshSessions().catch(() => {});
@@ -87,36 +210,66 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     }
   }, [snapshot.activeProject, loadChat, refreshSessions]);
 
+  // ── Send message ────────────────────────────────────────────────────────────
   const onSend = useCallback(async (message: string, agent: string, model: string, attachments?: string[]) => {
-    const optimistic: ChatMessage = {
-      role: 'user',
-      content: message,
-      agent,
-      ts: new Date().toISOString(),
-    };
-    setMessages((cur) => [...cur, optimistic]);
-    setSending(true);
-    try {
-      const response = await api.post<{ messages?: ChatMessage[] }>('/chat', { message, agent, model, attachments: attachments || [] });
-      if (response?.messages) {
-        for (const msg of response.messages) {
-          if (msg.role === 'assistant') {
-            setMessages((cur) => {
-              const exists = cur.some((m) => m.ts === msg.ts);
-              return exists ? cur : [...cur, msg];
-            });
+    if (activeSource === 'opencode' && activeOpencodeSessionId) {
+      // Optimistic add
+      const optimisticId = `msg_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      const optimistic: ChatMessage = {
+        id: optimisticId,
+        role: 'user',
+        content: message,
+        agent,
+        ts: new Date().toISOString(),
+      };
+      setOpencodeMessages((cur) => [...cur, optimistic]);
+      setSending(true);
+      try {
+        const result = await api.post<{ ok: boolean; messageId: string }>(
+          `/opencode-sessions/${encodeURIComponent(activeOpencodeSessionId)}/send`,
+          { message, agent },
+        );
+        // SSE echo will dedup on messageId === optimisticId or server-provided id
+        void result;
+      } catch (err) {
+        // Remove optimistic on failure
+        setOpencodeMessages((cur) => cur.filter((m) => m.id !== optimisticId));
+        toastRef.current?.error(`Send failed: ${(err as Error).message}`);
+      } finally {
+        setSending(false);
+      }
+    } else {
+      // Default: send to bizar chat
+      const optimistic: ChatMessage = {
+        role: 'user',
+        content: message,
+        agent,
+        ts: new Date().toISOString(),
+      };
+      setBizarMessages((cur) => [...cur, optimistic]);
+      setSending(true);
+      try {
+        const response = await api.post<{ messages?: ChatMessage[] }>('/chat', { message, agent, model, attachments: attachments || [] });
+        if (response?.messages) {
+          for (const msg of response.messages) {
+            if (msg.role === 'assistant') {
+              setBizarMessages((cur) => {
+                const exists = cur.some((m) => m.ts === msg.ts);
+                return exists ? cur : [...cur, msg];
+              });
+            }
           }
+        } else {
+          toastRef.current?.info('Still processing… the response will appear shortly.');
         }
-      } else {
-        toastRef.current?.info('Still processing… the response will appear shortly.');
+      } catch (err) {
+        setBizarMessages((cur) => cur.filter((m) => m !== optimistic));
+        toastRef.current?.error(`Send failed: ${(err as Error).message}`);
+      } finally {
+        setSending(false);
       }
-    } catch (err) {
-      setMessages((cur) => cur.filter((m) => m !== optimistic));
-      toastRef.current?.error(`Send failed: ${(err as Error).message}`);
-    } finally {
-      setSending(false);
     }
-  }, []);
+  }, [activeSource, activeOpencodeSessionId]);
 
   const onRegenerate = useCallback(async (messageId: string) => {
     if (!sessionId) {
@@ -132,8 +285,12 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
   }, [sessionId, loadChat]);
 
   const deleteMessage = useCallback((idx: number) => {
-    setMessages((cur) => cur.filter((_, i) => i !== idx));
-  }, []);
+    if (activeSource === 'opencode') {
+      setOpencodeMessages((cur) => cur.filter((_, i) => i !== idx));
+    } else {
+      setBizarMessages((cur) => cur.filter((_, i) => i !== idx));
+    }
+  }, [activeSource]);
 
   const togglePin = useCallback((idx: number) => {
     setPinned((cur) => {
@@ -152,7 +309,15 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     );
   }, []);
 
-  // Initial load
+  // ── Cleanup SSE on unmount ──────────────────────────────────────────────────
+  useEffect(() => {
+    return () => {
+      opencodeEsRef.current?.close();
+      opencodeEsRef.current = null;
+    };
+  }, []);
+
+  // ── Initial load ────────────────────────────────────────────────────────────
   useEffect(() => {
     if (initialTaskId) {
       loadTaskChat(initialTaskId);
@@ -163,7 +328,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Listen for bizar:setChatTask events
+  // ── Listen for bizar:setChatTask events ────────────────────────────────────
   useEffect(() => {
     const handler = (e: Event) => {
       const taskId = (e as CustomEvent<{ taskId: string }>).detail?.taskId;
@@ -173,7 +338,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     return () => window.removeEventListener('bizar:setChatTask', handler);
   }, [loadTaskChat]);
 
-  // WebSocket for live updates — dynamically imported to avoid SSR issues
+  // ── WebSocket for live bizar updates ────────────────────────────────────────
   useEffect(() => {
     let closed = false;
     import('../../lib/ws').then(({ Ws }) => {
@@ -182,7 +347,7 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
       ws.on((msg) => {
         if (msg.type !== 'chat:message') return;
         const next = msg.message;
-        setMessages((cur) => {
+        setBizarMessages((cur) => {
           const exists = cur.some((m) => m.ts === next.ts);
           return exists ? cur : [...cur, next];
         });
@@ -192,8 +357,18 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
   }, []);
 
   return {
-    // State
-    messages,
+    // ── State ────────────────────────────────────────────────────────────────
+    /**
+     * Messages from the active source.
+     * Use `activeSource === 'opencode' ? opencodeMessages : bizarMessages`.
+     * Kept as `messages` alias for backward compatibility with components
+     * that read `chat.messages` directly.
+     */
+    messages: activeSource === 'opencode' ? opencodeMessages : bizarMessages,
+    /** Messages from the bizar chat stream. */
+    bizarMessages,
+    /** Messages from the opencode session stream. */
+    opencodeMessages,
     sessions,
     opencodeSessions,
     sessionId,
@@ -202,13 +377,24 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     sending,
     pinned,
     listRef,
-    // Setters for toast integration
+    // ── Opencode state ──────────────────────────────────────────────────────
+    /** Which source is currently displayed: 'bizar', 'opencode', or null. */
+    activeSource,
+    /** The opencode session ID currently selected, or null. */
+    activeOpencodeSessionId,
+    // ── Setters for toast integration ───────────────────────────────────────
     setToast: (toast: typeof toastRef.current) => { toastRef.current = toast; },
-    // Actions
+    // ── Actions ─────────────────────────────────────────────────────────────
     loadChat,
     loadTaskChat,
     refreshSessions,
     refreshOpencodeSessions,
+    /** Load an opencode session's messages and open its SSE stream. */
+    loadOpencodeSession,
+    /** Close the opencode SSE and fall back to bizar. */
+    closeOpencodeSession,
+    /** Select a bizar session (closes any opencode SSE first). */
+    selectBizarSession,
     onCreateSession,
     onSend,
     onRegenerate,
@@ -216,4 +402,4 @@ export function useChat(snapshot: Snapshot, settings: Settings, initialTaskId?:
     togglePin,
     copyMessage,
   };
-}
+}

package/bizar-dash/src/web/lib/types.ts

@@ -302,6 +302,7 @@ export type Overview = {
 };
 
 export type ChatMessage = {
+  id?: string;
   role: 'user' | 'assistant' | 'system' | string;
   content?: string;
   message?: string;

package/bizar-dash/src/web/mobile/views/MobileChat.tsx

@@ -121,19 +121,21 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
             sessions={chat.sessions}
             opencodeSessions={chat.opencodeSessions}
             activeSessionId={chat.sessionId}
+            activeOpencodeSessionId={chat.activeOpencodeSessionId}
             activeProject={snapshot.activeProject}
             onCreateSession={handleCreateSession}
-            onSelectSession={chat.loadChat}
+            onSelectSession={chat.selectBizarSession}
+            onSelectOpencodeSession={(s) => chat.loadOpencodeSession(s.id)}
             creating={creating}
           />
         </aside>
 
         <main className="chat-main">
           <ChatThread
-            messages={chat.messages}
+            messages={chat.activeSource === 'opencode' ? chat.opencodeMessages : chat.bizarMessages}
             loading={chat.loading}
             activeProject={snapshot.activeProject}
-            sessionId={chat.sessionId}
+            sessionId={chat.activeSource === 'opencode' ? (chat.activeOpencodeSessionId ?? chat.sessionId) : chat.sessionId}
             pinned={chat.pinned}
             onPickSuggestion={(t) => setText(t)}
             onCopy={(m) => chat.copyMessage(m as Parameters<typeof chat.copyMessage>[0])}
@@ -164,8 +166,8 @@ export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, on
 
         <aside className={`chat-info ${!infoOpen ? 'chat-info-hidden' : ''}`}>
           <InfoPanel
-            sessionId={chat.sessionId}
-            messages={chat.messages}
+            sessionId={chat.activeSource === 'opencode' ? (chat.activeOpencodeSessionId ?? chat.sessionId) : chat.sessionId}
+            messages={chat.activeSource === 'opencode' ? chat.opencodeMessages : chat.bizarMessages}
             pinned={chat.pinned}
             agent={agent}
             model={model}

package/bizar-dash/src/web/views/Chat.tsx

@@ -131,19 +131,21 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
             sessions={chat.sessions}
             opencodeSessions={chat.opencodeSessions}
             activeSessionId={chat.sessionId}
+            activeOpencodeSessionId={chat.activeOpencodeSessionId}
             activeProject={snapshot.activeProject}
             onCreateSession={handleCreateSession}
-            onSelectSession={chat.loadChat}
+            onSelectSession={chat.selectBizarSession}
+            onSelectOpencodeSession={(s) => chat.loadOpencodeSession(s.id)}
             creating={creating}
           />
         </aside>
 
         <main className="chat-main">
           <ChatThread
-            messages={chat.messages}
+            messages={chat.activeSource === 'opencode' ? chat.opencodeMessages : chat.bizarMessages}
             loading={chat.loading}
             activeProject={snapshot.activeProject}
-            sessionId={chat.sessionId}
+            sessionId={chat.activeSource === 'opencode' ? (chat.activeOpencodeSessionId ?? chat.sessionId) : chat.sessionId}
             pinned={chat.pinned}
             onPickSuggestion={(t) => setText(t)}
             onCopy={(m) => chat.copyMessage(m as Parameters<typeof chat.copyMessage>[0])}
@@ -174,8 +176,8 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
 
         <aside className="chat-info">
           <InfoPanel
-            sessionId={chat.sessionId}
-            messages={chat.messages}
+            sessionId={chat.activeSource === 'opencode' ? (chat.activeOpencodeSessionId ?? chat.sessionId) : chat.sessionId}
+            messages={chat.activeSource === 'opencode' ? chat.opencodeMessages : chat.bizarMessages}
             pinned={chat.pinned}
             agent={agent}
             model={model}