@polderlabs/bizar 4.2.4 → 4.4.0

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

@@ -21,6 +21,7 @@ import { useModal } from '../components/Modal';
 import { useToast } from '../components/Toast';
 import { BgStatusBadge } from '../components/BgStatusBadge';
 import { openKillConfirmDialog } from '../components/KillConfirmDialog';
+import { TmuxAttachCard } from '../components/background/TmuxAttachCard';
 import { api } from '../lib/api';
 import { Ws } from '../lib/ws';
 import { cn, formatTime, truncate } from '../lib/utils';
@@ -283,6 +284,8 @@ function BackgroundAgentCard({
           <Trash2 size={14} /> Kill
         </Button>
       </div>
+
+      <TmuxAttachCard instance={inst} />
     </Card>
   );
 }

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

@@ -1,13 +1,22 @@
-// src/views/Chat.tsx — Gemini-inspired dark chat orchestrator.
-// Composer state (agent, model, text, attachments) is local.
-// useChat handles messages, sessions, send, polling.
+// src/views/Chat.tsx — Gemini-inspired dark chat orchestrator (v3.22).
+//
+// v3.22 — redesigned layout: 3-column grid (rail / thread / info).
+// The legacy `.chat-shell / .chat-body / .chat-sessions / .chat-main /
+// .chat-info` wrapper classes are still available for MobileChat (which
+// uses its own view); this file uses the new `.chat-page` grid.
+//
+// The `chat-thread` section is a vertical grid (head / scroll / composer).
+// The scrollable message list lives inside the legacy `ChatThread`
+// component (still wrapped in its own `.chat-thread` div with className
+// `legacy` to opt into the original styles — see chat.css).
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ChatTopBar } from '../components/chat/ChatTopBar';
-import { SessionList } from '../components/chat/SessionList';
+import { ChatRail } from '../components/chat/ChatRail';
 import { ChatThread } from '../components/chat/ChatThread';
-import { FloatingComposer } from '../components/chat/FloatingComposer';
-import { InfoPanel } from '../components/chat/InfoPanel';
+import { ChatComposer } from '../components/chat/ChatComposer';
+import { ChatInfoPanel } from '../components/chat/ChatInfoPanel';
+import { JumpToLatest } from '../components/chat/JumpToLatest';
 import { useChat } from '../components/chat/useChat';
 import { useSlashCommands } from '../components/chat/useSlashCommands';
 import { useToast } from '../components/Toast';
@@ -28,7 +37,6 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
   const toast = useToast();
   const modal = useModal();
 
-  // ── Delegate to useChat: messages, sessions, send, polling ──────────────
   const chat = useChat(snapshot, settings, initialTaskId ?? '');
 
   // ── Composer state (local) ───────────────────────────────────────────────
@@ -39,12 +47,13 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
   const [creating, setCreating] = useState(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   // ── Slash commands ───────────────────────────────────────────────────────
   const { allCommands, suggestions, setQuery } = useSlashCommands(snapshot);
 
-  useEffect(() => { setQuery(text); }, [text, setQuery]);
+  useEffect(() => {
+    setQuery(text);
+  }, [text, setQuery]);
 
   // ── File attach ──────────────────────────────────────────────────────────
   const onAttach = () => fileInputRef.current?.click();
@@ -68,6 +77,7 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
     setText('');
     setQuery('');
     chat.onSend(msg, agent, model, attachments);
+    chat.jumpToLatest();
   };
 
   // ── Create session ───────────────────────────────────────────────────────
@@ -96,7 +106,9 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
       children: <p style={{ margin: 0 }}>This action cannot be undone.</p>,
       footer: (
         <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-          <Button variant="secondary" size="sm" onClick={() => modal.close()}>Cancel</Button>
+          <Button variant="secondary" size="sm" onClick={() => modal.close()}>
+            Cancel
+          </Button>
           <Button
             variant="danger"
             size="sm"
@@ -112,7 +124,42 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
     });
   };
 
-  // ── Pin / copy are handled directly via chat.* ──────────────────────────
+  // ── Derived: sessions with display state overlaid ────────────────────────
+  const displaySessions = useMemo(
+    () => chat.sessions.map((s) => chat.getSessionDisplay(s)),
+    [chat.sessions, chat.getSessionDisplay],
+  );
+  const displayOpencodeSessions = useMemo(
+    () => chat.opencodeSessions.map((s) => chat.getSessionDisplay(s)),
+    [chat.opencodeSessions, chat.getSessionDisplay],
+  );
+
+  // ── Current session for the thread head subtitle ────────────────────────
+  const activeSessionDisplay = useMemo(() => {
+    const id = chat.activeSource === 'opencode'
+      ? chat.activeOpencodeSessionId ?? ''
+      : chat.sessionId;
+    if (!id) return null;
+    return (
+      displaySessions.find((s) => s.id === id) ??
+      displayOpencodeSessions.find((s) => s.id === id) ??
+      null
+    );
+  }, [
+    chat.activeSource,
+    chat.activeOpencodeSessionId,
+    chat.sessionId,
+    displaySessions,
+    displayOpencodeSessions,
+  ]);
+
+  const threadSubtitle = (() => {
+    const base = `${agent || 'Odin'} · ${snapshot.activeProject?.name ?? 'no project'}`;
+    const state = activeSessionDisplay?.state ?? 'idle';
+    if (state === 'streaming') return `Replying · ${base}`;
+    if (state === 'awaiting') return `Your turn · ${base}`;
+    return `${base} · idle`;
+  })();
 
   return (
     <div className="chat-shell">
@@ -125,33 +172,71 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
         onToggleInfo={() => {}}
         onOpenOverview={() => setActiveTab?.('overview')}
       />
-      <div className="chat-body">
-        <aside className="chat-sessions">
-          <SessionList
-            sessions={chat.sessions}
-            opencodeSessions={chat.opencodeSessions}
-            activeSessionId={chat.sessionId}
-            activeProject={snapshot.activeProject}
-            onCreateSession={handleCreateSession}
-            onSelectSession={chat.loadChat}
-            creating={creating}
-          />
-        </aside>
-
-        <main className="chat-main">
-          <ChatThread
-            messages={chat.messages}
-            loading={chat.loading}
-            activeProject={snapshot.activeProject}
-            sessionId={chat.sessionId}
-            pinned={chat.pinned}
-            onPickSuggestion={(t) => setText(t)}
-            onCopy={(m) => chat.copyMessage(m as Parameters<typeof chat.copyMessage>[0])}
-            onDelete={handleDelete}
-            onTogglePin={chat.togglePin}
-            onRegenerate={chat.onRegenerate}
-          />
-          <FloatingComposer
+      <div className="chat-page">
+        {/* ── rail ──────────────────────────────────────────────────────── */}
+        <ChatRail
+          sessions={displaySessions}
+          opencodeSessions={displayOpencodeSessions}
+          activeSessionId={chat.sessionId}
+          activeOpencodeSessionId={chat.activeOpencodeSessionId}
+          activeProject={snapshot.activeProject}
+          creating={creating}
+          onCreateSession={handleCreateSession}
+          onSelectSession={chat.selectBizarSession}
+          onSelectOpencodeSession={(s) => chat.loadOpencodeSession(s.id)}
+          onRenameSession={(id, title) => chat.renameSession(id, title)}
+          onDeleteSession={(id) => chat.deleteSession(id)}
+        />
+
+        {/* ── thread ───────────────────────────────────────────────────── */}
+        <section className="chat-thread-section">
+          <div className="chat-thread-head">
+            <div>
+              <div className="chat-thread-title">
+                {activeSessionDisplay?.title ?? chat.sessionId ?? 'New chat'}
+              </div>
+              <div
+                className={`chat-thread-sub chat-muted state-${activeSessionDisplay?.state ?? 'idle'}`}
+              >
+                <span className="chat-thread-dot" />
+                {threadSubtitle}
+              </div>
+            </div>
+            <div className="chat-thread-actions">
+              <button className="btn btn-ghost" title="Rename" type="button">
+                <span className="mono">rename</span>
+              </button>
+            </div>
+          </div>
+
+          <div className="chat-thread-scroll" ref={chat.listRef} onScroll={chat.handleScroll}>
+            <ChatThread
+              messages={chat.activeSource === 'opencode' ? chat.opencodeMessages : chat.bizarMessages}
+              loading={chat.loading}
+              activeProject={snapshot.activeProject}
+              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])}
+              onDelete={handleDelete}
+              onTogglePin={chat.togglePin}
+              onRegenerate={chat.onRegenerate}
+            />
+          </div>
+
+          {!chat.stickToBottom && (
+            <JumpToLatest
+              streaming={activeSessionDisplay?.state === 'streaming'}
+              newMessageCount={chat.newMessageCount}
+              onClick={chat.jumpToLatest}
+            />
+          )}
+
+          <ChatComposer
             agent={agent}
             setAgent={setAgent}
             model={model}
@@ -166,24 +251,31 @@ export function Chat({ snapshot, settings, setActiveTab, initialTaskId, onClearT
             onPickSuggestion={(cmd) => setText(`${cmd.split(' ')[0]} `)}
             agents={snapshot.agents || []}
             onAttach={onAttach}
-            sessionsOpen={true}
-            infoOpen={true}
           />
-          <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={onFiles} />
-        </main>
-
-        <aside className="chat-info">
-          <InfoPanel
-            sessionId={chat.sessionId}
-            messages={chat.messages}
-            pinned={chat.pinned}
-            agent={agent}
-            model={model}
-            agents={snapshot.agents || []}
-            mcps={snapshot.mcps || []}
-            allCommands={allCommands}
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            style={{ display: 'none' }}
+            onChange={onFiles}
           />
-        </aside>
+        </section>
+
+        {/* ── info panel ──────────────────────────────────────────────── */}
+        <ChatInfoPanel
+          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}
+          agents={snapshot.agents || []}
+          mcps={snapshot.mcps || []}
+          allCommands={allCommands}
+        />
       </div>
     </div>
   );

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

@@ -30,6 +30,7 @@ import {
   RefreshCw,
   Send,
   FileText,
+  Inbox,
 } from 'lucide-react';
 import { Button } from '../components/Button';
 import { Card, CardTitle } from '../components/Card';
@@ -45,6 +46,7 @@ import { api, enhancePrompt } from '../lib/api';
 import { cn, formatRelative, priorityColors, autoTitleFromContent } from '../lib/utils';
 import type { Agent, Settings, Snapshot, Task } from '../lib/types';
 import { openArtifactViewer } from '../components/ArtifactViewer';
+import { BacklogPanel } from '../components/tasks/BacklogPanel';
 
 type Props = {
   snapshot: Snapshot;
@@ -319,6 +321,10 @@ export function Tasks({ snapshot, refreshSnapshot, setActiveTab }: Props) {
     openArtifactViewer(modal, artifactId);
   };
 
+  // v3.22 — Backlog panel visibility.
+  const [showBacklog, setShowBacklog] = useState(false);
+  const backlogCount = (snapshot.tasks || []).filter((t) => t.status === 'backlog').length;
+
   return (
     <div className="view view-tasks">
       <header className="view-header">
@@ -447,9 +453,25 @@ export function Tasks({ snapshot, refreshSnapshot, setActiveTab }: Props) {
           >
             <Plus size={14} /> Add
           </Button>
+          {backlogCount > 0 && (
+            <Button
+              variant={showBacklog ? 'accent' : 'ghost'}
+              size="sm"
+              onClick={() => setShowBacklog((v) => !v)}
+              title={showBacklog ? 'Hide backlog' : 'Show backlog'}
+            >
+              <Inbox size={14} />
+              Backlog
+              <span className="badge">{backlogCount}</span>
+            </Button>
+          )}
         </div>
       </div>
 
+      {showBacklog && backlogCount > 0 && (
+        <BacklogPanel agents={snapshot.agents || []} onRefresh={refreshSnapshot} />
+      )}
+
       {selected.size > 0 && (
         <div className="task-bulk-bar">
           <span className="text-sm">
@@ -900,7 +922,7 @@ function formatDuration(seconds: number): string {
   return `${m}m`;
 }
 
-function openTaskModal(
+export function openTaskModal(
   modal: ReturnType<typeof useModal>,
   toast: ReturnType<typeof useToast>,
   task: Task | null,

package/bizar-dash/tests/opencode-sessions-detail.test.mjs

@@ -0,0 +1,273 @@
+/**
+ * tests/opencode-sessions-detail.test.mjs — v4.2.4
+ *
+ * Tests the opencode session-detail router (GET messages, POST send,
+ * GET stream SSE proxy). Strategy: stand up a fake opencode serve child
+ * on a random port, point readServeInfo() at it by writing a tmp
+ * serve.json to the first candidate path (~/.cache/bizar/serve.json).
+ * For the "plugin offline" case, move our tmp serve.json aside so
+ * readServeInfo() finds nothing.
+ *
+ * We restore the original serve.json (if any) in `after()`.
+ */
+
+import { test, before, after, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+  mkdtempSync,
+  writeFileSync,
+  rmSync,
+  existsSync,
+  renameSync,
+  readFileSync,
+  mkdirSync,
+} from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir, homedir } from 'node:os';
+import { createServer } from 'node:http';
+import express from 'express';
+
+import { createOpencodeSessionDetailRouter } from '../src/server/routes/opencode-session-detail.mjs';
+
+// ── fake upstream (opencode serve child) ──────────────────────────────────
+
+let upstreamServer, upstreamPort;
+const upstream = { promptHits: [], lastPromptBody: null, streamChunks: [] };
+
+function startUpstream() {
+  return new Promise((resolve) => {
+    upstreamServer = createServer((req, res) => {
+      const url = new URL(req.url, 'http://127.0.0.1');
+      if (url.pathname === '/event') {
+        res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive' });
+        for (const c of upstream.streamChunks) res.write(c);
+        setTimeout(() => res.end(), 50);
+        return;
+      }
+      const promptM = url.pathname.match(/^\/api\/session\/([^/]+)\/prompt$/);
+      if (promptM && req.method === 'POST') {
+        let body = '';
+        req.on('data', (c) => { body += c; });
+        req.on('end', () => {
+          upstream.promptHits.push({ sessionId: promptM[1], body });
+          try { upstream.lastPromptBody = JSON.parse(body); } catch { /* ignore */ }
+          if (promptM[1] === 'sess-fail') {
+            res.writeHead(404, { 'Content-Type': 'application/json' }); res.end('not found'); return;
+          }
+          res.writeHead(200, { 'Content-Type': 'application/json' }); res.end('{}');
+        });
+        return;
+      }
+      if (url.pathname === '/api/session' && req.method === 'GET') {
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ data: [{ id: 'sess-1', title: 'Test', time: { created: 1, updated: 2, archived: null }, location: { directory: '/tmp/session-worktree' } }] }));
+        return;
+      }
+      const msgM = url.pathname.match(/^\/api\/session\/([^/]+)\/message$/);
+      if (msgM && req.method === 'GET') {
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ data: [
+          { info: { id: 'm1', role: 'user', time: { created: 1000 } }, parts: [{ type: 'text', text: 'hello' }] },
+          { info: { id: 'm2', role: 'assistant', time: { created: 2000 } }, parts: [{ type: 'text', text: 'hi' }] },
+        ] }));
+        return;
+      }
+      res.writeHead(404); res.end('not found');
+    });
+    upstreamServer.listen(0, '127.0.0.1', () => {
+      upstreamPort = upstreamServer.address().port;
+      resolve();
+    });
+  });
+}
+
+async function startDashboard() {
+  const app = express();
+  app.use(express.json({ limit: '2mb' }));
+  app.use('/api', createOpencodeSessionDetailRouter());
+  dashboardServer = createServer(app);
+  await new Promise((r) => dashboardServer.listen(0, '127.0.0.1', r));
+  dashboardBaseUrl = `http://127.0.0.1:${dashboardServer.address().port}`;
+}
+
+let dashboardServer, dashboardBaseUrl, tmpDir;
+const SERVE_JSON_PATH = join(homedir(), '.cache', 'bizar', 'serve.json');
+let originalServeJson;
+
+before(async () => {
+  await startUpstream();
+  await startDashboard();
+  tmpDir = mkdtempSync(join(tmpdir(), 'opencode-sessions-detail-'));
+  // Snapshot any existing serve.json so we can restore it.
+  if (existsSync(SERVE_JSON_PATH)) {
+    originalServeJson = readFileSync(SERVE_JSON_PATH, 'utf8');
+  }
+  mkdirSync(join(homedir(), '.cache', 'bizar'), { recursive: true });
+});
+
+after(async () => {
+  // Restore the real serve.json (or remove ours) before exit so we
+  // never leave a fake file behind in the user's home.
+  if (originalServeJson !== undefined) {
+    writeFileSync(SERVE_JSON_PATH, originalServeJson, 'utf8');
+  } else if (existsSync(SERVE_JSON_PATH)) {
+    rmSync(SERVE_JSON_PATH);
+  }
+  if (dashboardServer) await new Promise((r) => dashboardServer.close(r));
+  if (upstreamServer) await new Promise((r) => upstreamServer.close(r));
+  if (tmpDir) rmSync(tmpDir, { recursive: true, force: true });
+});
+
+beforeEach(() => {
+  upstream.promptHits = [];
+  upstream.lastPromptBody = null;
+  upstream.streamChunks = [];
+});
+
+function writeServeJson(worktree) {
+  writeFileSync(SERVE_JSON_PATH, JSON.stringify({ port: upstreamPort, password: 'test-pw', worktree, pid: 99999, startedAt: Date.now() }), 'utf8');
+}
+
+/** Move serve.json aside so readServeInfo() returns null. */
+function moveServeJsonAside() {
+  if (!existsSync(SERVE_JSON_PATH)) return;
+  const tmp = join(tmpDir, `serve-aside-${Date.now()}.json`);
+  renameSync(SERVE_JSON_PATH, tmp);
+}
+
+function parseSseStream(text) {
+  const out = [];
+  let event = null, dataLines = [];
+  for (const line of text.split(/\r?\n/)) {
+    if (line === '') {
+      if (event !== null || dataLines.length > 0) out.push({ event, data: dataLines.join('\n') });
+      event = null; dataLines = [];
+      continue;
+    }
+    if (line.startsWith(':')) continue;
+    const colon = line.indexOf(':');
+    if (colon < 0) continue;
+    const field = line.slice(0, colon);
+    let value = line.slice(colon + 1);
+    if (value.startsWith(' ')) value = value.slice(1);
+    if (field === 'event') event = value;
+    else if (field === 'data') dataLines.push(value);
+  }
+  return out;
+}
+
+// ── tests ─────────────────────────────────────────────────────────────────
+
+test('GET messages returns 503 plugin_offline when no serve.json', async () => {
+  moveServeJsonAside();
+  try {
+    const res = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/sess-1/messages`);
+    assert.equal(res.status, 503);
+    assert.equal((await res.json()).error, 'plugin_offline');
+  } finally {
+    // Restore — the next test wants serve.json present again.
+    if (originalServeJson !== undefined) writeServeJson(JSON.parse(originalServeJson).worktree);
+  }
+});
+
+test('GET messages returns 200 with normalized message list', async () => {
+  writeServeJson('/tmp/session-worktree');
+  const res = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/sess-1/messages`);
+  assert.equal(res.status, 200);
+  const body = await res.json();
+  assert.equal(body.messages.length, 2);
+  assert.equal(body.messages[0].id, 'm1');
+  assert.equal(body.messages[0].role, 'user');
+  assert.equal(body.messages[0].content, 'hello');
+  assert.equal(body.messages[0].ts, 1000);
+  assert.equal(body.messages[1].role, 'assistant');
+  assert.equal(body.messages[1].content, 'hi');
+  assert.equal(body.messages[1].ts, 2000);
+});
+
+test('POST send returns 400 when body is empty', async () => {
+  writeServeJson('/tmp/session-worktree');
+  const r = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/sess-1/send`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({}),
+  });
+  assert.equal(r.status, 400);
+});
+
+test('POST send returns 400 when agent is missing', async () => {
+  writeServeJson('/tmp/session-worktree');
+  const r = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/sess-1/send`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: 'hi' }),
+  });
+  assert.equal(r.status, 400);
+});
+
+test('POST send returns 400 when message is empty string', async () => {
+  writeServeJson('/tmp/session-worktree');
+  const r = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/sess-1/send`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: '', agent: 'odin' }),
+  });
+  assert.equal(r.status, 400);
+});
+
+test('POST send returns ok=true with synthesized messageId', async () => {
+  writeServeJson('/tmp/session-worktree');
+  const r = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/sess-1/send`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: 'hello there', agent: 'odin' }),
+  });
+  assert.equal(r.status, 200);
+  const body = await r.json();
+  assert.equal(body.ok, true);
+  assert.ok(body.messageId.startsWith('msg_'));
+  assert.equal(upstream.promptHits.length, 1);
+  assert.equal(upstream.lastPromptBody.prompt.text, 'hello there');
+  assert.equal(upstream.lastPromptBody.agent, 'odin');
+  assert.equal(upstream.lastPromptBody.id, body.messageId);
+});
+
+test('POST send returns 502 opencode_error when upstream 404s', async () => {
+  writeServeJson('/tmp/session-worktree');
+  const r = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/sess-fail/send`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: 'hi', agent: 'odin' }),
+  });
+  assert.equal(r.status, 502);
+  const body = await r.json();
+  assert.equal(body.error, 'opencode_error');
+  assert.ok(body.message.length > 0);
+});
+
+test('SSE stream forwards only events for the requested session', async () => {
+  writeServeJson('/tmp/session-worktree');
+  upstream.streamChunks = [
+    'event: message.updated\ndata: {"type":"message.updated","properties":{"sessionID":"our-id","messageID":"m1"}}\n\n',
+    'event: message.updated\ndata: {"type":"message.updated","properties":{"sessionID":"OTHER-id","messageID":"m9"}}\n\n',
+    'event: sync\ndata: {"type":"sync","syncEvent":{"type":"session.idle.1","data":{"sessionID":"our-id"}}}\n\n',
+  ];
+  const res = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/our-id/stream`);
+  assert.equal(res.status, 200);
+  assert.match(res.headers.get('content-type'), /text\/event-stream/);
+  assert.match(res.headers.get('cache-control'), /no-cache/);
+  assert.equal(res.headers.get('x-accel-buffering'), 'no');
+  const events = parseSseStream(await res.text());
+  assert.equal(events.length, 2);
+  assert.equal(events[0].event, 'message.updated');
+  const d0 = JSON.parse(events[0].data);
+  assert.equal(d0.sessionID, 'our-id');
+  assert.equal(d0.messageID, 'm1');
+  assert.equal(events[1].event, 'session.idle');
+  assert.equal(JSON.parse(events[1].data).sessionID, 'our-id');
+});
+
+test('SSE stream unwraps sync envelopes and strips version suffix', async () => {
+  writeServeJson('/tmp/session-worktree');
+  upstream.streamChunks = [
+    'event: sync\ndata: {"type":"sync","syncEvent":{"type":"message.updated.1","data":{"sessionID":"our-id","messageID":"m3"}}}\n\n',
+  ];
+  const res = await fetch(`${dashboardBaseUrl}/api/opencode-sessions/our-id/stream`);
+  assert.equal(res.status, 200);
+  const events = parseSseStream(await res.text());
+  assert.equal(events.length, 1);
+  assert.equal(events[0].event, 'message.updated');
+  const d = JSON.parse(events[0].data);
+  assert.equal(d.sessionID, 'our-id');
+  assert.equal(d.messageID, 'm3');
+});