madarx 2.17.0 → 2.19.0

package/app/components/dashboard/apply-stream-event.js

@@ -0,0 +1,136 @@
+'use client';
+
+// Shared SSE event reducer for the orchestrator stream.
+//
+// Both the live POST stream (use-stream-command.js) and the Phase-2 attach
+// reconnect (use-stream-command's attach path) funnel every event through this
+// one function so the two paths can never drift. It is intentionally a plain
+// function over a `ctx` bundle of setters + refs — no hooks — so it can run
+// outside React render.
+//
+// ctx shape:
+//   textRef            : { current: string }  — accumulated assistant text
+//   setChat, setLiveText, setAgentPhase, setLiveTool, setLiveSteps,
+//   setUsage, setSessionId, setSessionArtifactId : React setters
+//   sessionIdRef       : { current: string|null }
+//   pendingApprovalsRef: { current: Array<{approval_id,tool_name}> }
+//   bringToFront(id), refresh()
+//   onSession(id)      : optional — called when a `session` event arrives
+//                        (live path persists last-session id here)
+export function applyStreamEvent(eventName, payload, ctx) {
+  const {
+    textRef,
+    setChat,
+    setLiveText,
+    setAgentPhase,
+    setLiveTool,
+    setLiveSteps,
+    setUsage,
+    setSessionId,
+    setSessionArtifactId,
+    sessionIdRef,
+    pendingApprovalsRef,
+    bringToFront,
+    refresh,
+    onSession,
+  } = ctx;
+
+  if (eventName === 'session' && payload.id) {
+    onSession?.(payload.id);
+    if (payload.id !== sessionIdRef.current) setSessionId(payload.id);
+  } else if (eventName === 'cli_stream' && (payload.text || payload.building)) {
+    setAgentPhase(p => p === 'thinking' ? 'responding' : p);
+    setChat(c => {
+      const next = [...c];
+      next[next.length - 1] = { role: 'agent', text: payload.text || '', streaming: true, building: Boolean(payload.building) };
+      return next;
+    });
+  } else if (eventName === 'cli_thinking' && typeof payload.text === 'string') {
+    ctx.setLiveThinking?.(payload.text);
+    setAgentPhase(p => (p === 'responding' || p === 'tool') ? p : 'thinking');
+  } else if (eventName === 'cli_status') {
+    ctx.setLiveStatus?.(payload && payload.phase ? payload : null);
+    if (payload?.phase === 'thinking') {
+      setAgentPhase(p => (p === 'responding' || p === 'tool') ? p : 'thinking');
+    }
+  } else if (eventName === 'text' && payload.delta) {
+    textRef.current += payload.delta;
+    setAgentPhase(p => p === 'thinking' ? 'responding' : p);
+    setLiveText(t => t + payload.delta);
+    setChat(c => {
+      const next = [...c];
+      next[next.length - 1] = { role: 'agent', text: textRef.current };
+      return next;
+    });
+  } else if (eventName === 'tool_start') {
+    setLiveTool(payload.name);
+    setAgentPhase('tool');
+    setLiveSteps(s => [...s, {
+      id: `${payload.name}-${s.length}`,
+      name: payload.name,
+      input: payload.input,
+      status: 'running',
+    }]);
+  } else if (eventName === 'tool_result') {
+    setLiveTool(null);
+    setAgentPhase('synthesis');
+    const isApprovalRequired =
+      payload.output?.status === 'approval_required' &&
+      typeof payload.output?.approval_request_id === 'string';
+    setLiveSteps(s => {
+      const next = [...s];
+      for (let i = next.length - 1; i >= 0; i--) {
+        if (next[i].name === payload.name && next[i].status === 'running') {
+          next[i] = {
+            ...next[i],
+            status: isApprovalRequired
+              ? 'awaiting_approval'
+              : (payload.isError ? 'error' : 'done'),
+            durationMs: typeof payload.durationMs === 'number' ? payload.durationMs : next[i].durationMs,
+            preview: payload.output?.preview || next[i].preview || null,
+            outLines: payload.output?.lines ?? next[i].outLines,
+            approval_id: isApprovalRequired
+              ? payload.output.approval_request_id
+              : next[i].approval_id || null,
+            approval_reason: isApprovalRequired
+              ? (payload.output.reason || null)
+              : null,
+          };
+          break;
+        }
+      }
+      return next;
+    });
+    if ((payload.name === 'create_artifact' || payload.name === 'generate_ui' || payload.name === 'send_to_hermes' || payload.name === 'start_hermes_job') && payload.output?.artifact_id) {
+      bringToFront(payload.output.artifact_id);
+    }
+  } else if (eventName === 'artifacts' && payload.created?.length) {
+    for (const a of payload.created) {
+      if (a.artifact_id) bringToFront(a.artifact_id);
+    }
+    refresh();
+  } else if (eventName === 'agent_created' && payload.agent) {
+    refresh();
+  } else if (eventName === 'session_artifact' && payload.artifact_id) {
+    setSessionArtifactId(payload.artifact_id);
+  } else if (eventName === 'artifact_updated' && payload.artifact_id) {
+    setSessionArtifactId(payload.artifact_id);
+    bringToFront(payload.artifact_id);
+    refresh();
+  } else if (eventName === 'usage') {
+    setUsage(payload);
+  } else if (eventName === 'pending_approvals' && Array.isArray(payload?.approvals)) {
+    for (const a of payload.approvals) {
+      if (a?.approval_id && a?.tool_name) {
+        pendingApprovalsRef.current.push({ approval_id: a.approval_id, tool_name: a.tool_name });
+      }
+    }
+  } else if (eventName === 'error') {
+    textRef.current += `\nError: ${payload.message}`;
+    setChat(c => {
+      const next = [...c];
+      next[next.length - 1] = { role: 'agent', text: textRef.current };
+      return next;
+    });
+  }
+}

package/app/components/dashboard/artifact-board.jsx

@@ -7,7 +7,6 @@ import InactiveIframeShield from './inactive-iframe-shield';
 
 export default function ArtifactBoard({ confirmDeleteId, setConfirmDeleteId, deleteArtifactById, setMoveMenu }) {
   const {
-    artifacts,
     visibleArtifacts,
     frontArtifactId,
     zForArtifact,
@@ -29,8 +28,13 @@ export default function ArtifactBoard({ confirmDeleteId, setConfirmDeleteId, del
 
   return (
     <div ref={setBoardEl} className="canvas-board canvas-board--docked">
-      {visibleArtifacts.map(a => {
-        const stableIdx = artifacts.findIndex(x => x.id === a.id);
+      {visibleArtifacts.map((a, idx) => {
+        // Index INTO the ordered visible list (visibleArtifacts === the layout
+        // hook's orderedVisibleArtifacts()), not a global findIndex across all
+        // spaces/minimized cards. This is the single index source: stableIdx is
+        // always < the space's visible count, so getLayout's default cell is
+        // always defined and never the {16,16} overlap fallback (Bug 1).
+        const stableIdx = idx;
         const L = getLayout(a.id, stableIdx);
         const z = zForArtifact(a);
         const isIframeArtifact = isHtmlArtifact(a.kind);

package/app/components/dashboard/artifact-order.js

@@ -0,0 +1,22 @@
+// Canonical ordering of the artifacts visible on the canvas for a given space.
+//
+// This is the SINGLE source of index assignment for artifact layout. Both the
+// board (first-paint default position) and the layout hook (auto/manual reflow)
+// must derive a card's grid slot from the same ordered list, or the synchronous
+// default disagrees with the async effect and a card flashes at the {16,16}
+// fallback before snapping into place (Bug 1).
+//
+// Filter semantics intentionally mirror `visibleArtifacts` in
+// use-dashboard-state.js exactly: in-space, has content, not minimized. Input
+// order is preserved (stable) so index N always maps to the same card.
+
+export function orderedSpaceArtifacts(artifacts, spaceId, minimizedIds) {
+  if (!Array.isArray(artifacts)) return [];
+  return artifacts.filter(
+    (a) =>
+      a &&
+      a.content &&
+      (a.space_id || 'default') === spaceId &&
+      !minimizedIds?.[a.id]
+  );
+}

package/app/components/dashboard/chat-panel.jsx

@@ -3,7 +3,8 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { SpinnerIcon, CheckIcon, StepXIcon, ElapsedTime } from './icons';
-import { toolStepSublabel, toolStepDisplayName } from './tool-steps';
+import { toolStepSublabel, toolStepDisplayName, formatToolDuration } from './tool-steps';
+import { ThinkingDisclosure } from './thinking-disclosure';
 import { useDashboard } from './dashboard-context';
 import { useDraftPersist } from './use-draft-persist';
 
@@ -27,6 +28,29 @@ function formatBytes(n) {
   return `${(n / 1024 / 1024).toFixed(1)} MB`;
 }
 
+// Whether a streamed agent turn contains HTML artifact markup (a ```html fence,
+// or a raw document the model started emitting). Such content renders on the
+// canvas — it should never type out as raw markup in the chat bubble.
+function hasArtifactMarkup(text) {
+  return /```html|<!doctype html|<html[\s>]/i.test(text || '');
+}
+
+// Strip artifact markup (and any half-streamed action block) from a streaming
+// preview so the chat shows only the conversational prose. Engine-agnostic
+// safety net — the CLI path already strips server-side, but Anthropic/Ollama
+// deltas pass through here.
+function cleanStreamingPreview(text) {
+  if (!text) return '';
+  return text
+    .replace(/```madarx-action[\s\S]*?```/gi, '')
+    .replace(/```madarx-action[\s\S]*$/i, '')
+    .replace(/```html[\s\S]*?```/gi, '')
+    .replace(/```html[\s\S]*$/i, '')
+    .replace(/<!doctype html[\s\S]*$/i, '')
+    .replace(/<html[\s>][\s\S]*$/i, '')
+    .trim();
+}
+
 function ChatPanel() {
   const {
     initializing,
@@ -44,6 +68,7 @@ function ChatPanel() {
     openConfig,
     chat,
     mainAgent,
+    agentWorkingRemote,
     setChatHidden,
     setVoiceOpen,
   } = useDashboard();
@@ -63,6 +88,8 @@ function ChatPanel() {
   const liveSteps = mainAgent.liveSteps;
   const busyStartTime = mainAgent.busyStartTime;
   const agentPhase = mainAgent.agentPhase;
+  const liveThinking = mainAgent.liveThinking;
+  const liveStatus = mainAgent.liveStatus;
   const busy = mainAgent.busy;
   const command = mainAgent.command;
   const stop = mainAgent.stop;
@@ -375,11 +402,27 @@ function ChatPanel() {
         </div>
       </div>
     ) : chat.map((m, i) => {
+      const isAgent = m.role === 'agent';
+      // While an agent turn streams, the model may be emitting a full HTML
+      // artifact — that belongs on the canvas, not as raw markup typing into the
+      // chat bubble. Strip it from the preview; if the turn is artifact-only,
+      // show a tasteful "designing" placeholder instead.
+      const cleaned = isAgent && m.streaming ? cleanStreamingPreview(m.text) : m.text;
+      const building = isAgent && (m.building || (m.streaming && !cleaned && hasArtifactMarkup(m.text)));
       // Empty agent placeholder — never shown. Live activity below covers it.
-      if (m.role === 'agent' && !m.text) return null;
+      // Exception: a restored tool-only turn (no prose) still shows its steps.
+      const hasRestoredTools = isAgent && Array.isArray(m.tools) && m.tools.length > 0;
+      if (isAgent && !cleaned && !building && !hasRestoredTools) return null;
       return (
-        <div className={'msg ' + m.role + (m.streaming ? ' msg--streaming' : '')} key={i}>
-          <Markdown remarkPlugins={[remarkGfm]}>{m.text}</Markdown>
+        <div className={'msg ' + m.role + (m.streaming ? ' msg--streaming' : '') + (building ? ' msg--building' : '')} key={i}>
+          {building ? (
+            <div className="artifact-building" aria-live="polite">
+              <span className="artifact-building-orb" aria-hidden="true" />
+              <span className="artifact-building-label">Designing the page<span className="artifact-building-dots"><i>.</i><i>.</i><i>.</i></span></span>
+            </div>
+          ) : (
+            <Markdown remarkPlugins={[remarkGfm]}>{cleaned}</Markdown>
+          )}
           {Array.isArray(m.attachments) && m.attachments.length > 0 && (
             <div className="msg-attachments">
               {m.attachments.map(a => (
@@ -393,15 +436,30 @@ function ChatPanel() {
               ))}
             </div>
           )}
+          {isAgent && Array.isArray(m.tools) && m.tools.length > 0 && (
+            <div className="tool-steps tool-steps--restored">
+              {m.tools.map((step, si) => (
+                <div key={si} className="tool-step tool-step--done">
+                  <span className="tool-step-icon" aria-hidden="true"><CheckIcon /></span>
+                  <code className="tool-step-name">{toolStepDisplayName(step.name)}</code>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       );
     })}
+    {(busy || (liveThinking && liveThinking.trim())) && (
+      <ThinkingDisclosure thinking={liveThinking} status={liveStatus} busy={busy} />
+    )}
     {liveSteps.length > 0 && (
       <div className="tool-steps">
         {liveSteps.map(step => {
           const isCli = step.name === 'claude_code_cli' || step.name === 'codex_cli';
           const sub = toolStepSublabel(step.name, step.input);
           const awaiting = step.status === 'awaiting_approval';
+          const dur = typeof step.durationMs === 'number' && step.durationMs > 0 ? formatToolDuration(step.durationMs) : null;
+          const previewLine = step.preview ? String(step.preview).split('\n').find(l => l.trim()) : null;
           return (
             <div key={step.id} className={`tool-step tool-step--${step.status}` + (isCli ? ' tool-step--cli' : '')}>
               <span className="tool-step-icon" aria-hidden="true">
@@ -413,6 +471,10 @@ function ChatPanel() {
               </span>
               {!isCli && <code className="tool-step-name">{toolStepDisplayName(step.name)}</code>}
               {sub && <span className="tool-step-sub">{sub}</span>}
+              {previewLine && step.status === 'done' && (
+                <span className="tool-step-preview" title={step.preview}>{previewLine.slice(0, 64)}</span>
+              )}
+              {dur && !awaiting && <span className="tool-step-dur">{dur}</span>}
               {awaiting && step.approval_id ? (
                 <span className="tool-step-approve" style={{ marginLeft: 'auto', display: 'inline-flex', gap: 6 }}>
                   <button
@@ -441,7 +503,14 @@ function ChatPanel() {
         )}
       </div>
     )}
-    {busy && liveSteps.length === 0 && <div className="typing-indicator"><span /><span /><span /></div>}
+    {busy && liveSteps.length === 0 && !liveStatus && !(liveThinking && liveThinking.trim()) && <div className="typing-indicator"><span /><span /><span /></div>}
+    {!busy && agentWorkingRemote && (
+      <div className="agent-resume-banner" aria-live="polite">
+        <span className="agent-resume-orb" aria-hidden="true" />
+        <span className="agent-resume-label">Agent still working<span className="artifact-building-dots"><i>.</i><i>.</i><i>.</i></span></span>
+        <span className="agent-resume-sub">picking up where you left off</span>
+      </div>
+    )}
   </div>
   </section>
   <div

package/app/components/dashboard/chat-session-view.js

@@ -0,0 +1,26 @@
+// Pure mapping from a persisted chat session (chat_sessions + chat_messages)
+// to the dashboard's in-memory `chat` array shape. No React / network imports
+// so it is unit-testable under raw node ESM.
+
+export function chatStateFromSession(session) {
+  // Keep any user/assistant turn that carried text OR tool calls. Assistant
+  // turns that only ran tools (empty content) are retained so restored history
+  // shows the steps the agent took, not just its final prose.
+  const msgs = (session?.messages || []).filter(m =>
+    (m.role === 'user' || m.role === 'assistant') &&
+    (m.content || (Array.isArray(m.tool_calls) && m.tool_calls.length)));
+  const next = msgs.map(m => {
+    const entry = { role: m.role === 'assistant' ? 'agent' : 'user', text: m.content || '' };
+    if (m.role === 'assistant' && Array.isArray(m.tool_calls) && m.tool_calls.length) {
+      // Restored steps are terminal — they already completed when persisted.
+      entry.tools = m.tool_calls
+        .filter(tc => tc && tc.name)
+        .map(tc => ({ name: tc.name, status: 'done' }));
+    }
+    return entry;
+  });
+  if (!next.length) {
+    next.push({ role: 'agent', text: 'Fresh workspace ready. I am the madarX Main Agent. Tell me what to create first.' });
+  }
+  return next;
+}

package/app/components/dashboard/thinking-disclosure.jsx

@@ -0,0 +1,59 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+
+// Engine-agnostic live reasoning + status surface. Streams the model's extended
+// "thinking" into a collapsible panel (Claude-Code-TUI style) and shows a status
+// line with elapsed time so cold-start and long tools never look frozen. Fed by
+// the cli_thinking / cli_status events, which every engine that supports them
+// emits in the same shape.
+
+const PHASE_LABELS = {
+  starting: 'Starting engine…',
+  working: 'Working…',
+  generating: 'Composing…',
+  thinking: 'Thinking…',
+  done: 'Finishing…',
+};
+
+export function ThinkingDisclosure({ thinking, status, busy }) {
+  const [open, setOpen] = useState(false);
+  const bodyRef = useRef(null);
+
+  const hasThinking = Boolean(thinking && thinking.trim());
+
+  // Keep the streaming reasoning pinned to the latest token while open.
+  useEffect(() => {
+    if (open && bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+  }, [thinking, open]);
+
+  if (!hasThinking && !busy) return null;
+
+  const phase = status?.phase;
+  const label = PHASE_LABELS[phase] || (hasThinking ? 'Thinking' : 'Working…');
+  const elapsed = status?.elapsedMs ? `${Math.round(status.elapsedMs / 1000)}s` : null;
+
+  return (
+    <div className={'thinking-disclosure' + (open ? ' open' : '')}>
+      <button
+        type="button"
+        className="thinking-toggle"
+        onClick={() => hasThinking && setOpen(o => !o)}
+        aria-expanded={open}
+        disabled={!hasThinking}
+        title={hasThinking ? 'Show reasoning' : undefined}
+      >
+        <span className={'thinking-dot' + (busy ? ' pulsing' : '')} aria-hidden="true" />
+        <span className="thinking-label">{label}</span>
+        {elapsed && <span className="thinking-elapsed">{elapsed}</span>}
+        {hasThinking && (
+          <svg className={'thinking-caret' + (open ? ' open' : '')} width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </button>
+      {open && hasThinking && (
+        <div className="thinking-body" ref={bodyRef}>{thinking}</div>
+      )}
+    </div>
+  );
+}

package/app/components/dashboard/tool-steps.js

@@ -28,6 +28,15 @@ function hostname(u) {
   try { return new URL(String(u)).hostname; } catch { return String(u).slice(0, 52); }
 }
 
+// Compact elapsed-time label for a finished tool step (e.g. "820ms", "3.4s", "1m 5s").
+export function formatToolDuration(ms) {
+  if (!ms || ms < 0) return null;
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const s = Math.round(ms / 1000);
+  return `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
 export function toolStepDisplayName(name) {
   if (!name) return '';
   if (CC_DISPLAY_NAMES[name]) return CC_DISPLAY_NAMES[name];

package/app/components/dashboard/use-artifact-layout.js

@@ -24,14 +24,31 @@ export function useArtifactLayout({ state, refresh, spaceArtifactIds, activeSpac
     setMinimizedIds(m => ({ ...m, [id]: !m[id] }));
   }
 
+  // The canonical visible list for the active space. Index assignment for both
+  // getLayout and the auto/manual placement effect derives from this exact list,
+  // so no code path computes a divergent index (Bug 1). The dashboard expresses
+  // active-space membership as the id set `spaceArtifactIds`; here that set IS
+  // the space filter, so combined with content + not-minimized this predicate is
+  // identical to the dashboard's `visibleArtifacts` (which uses the shared
+  // orderedSpaceArtifacts helper). Input order is preserved (stable).
+  function orderedVisibleArtifacts() {
+    const inSpace = spaceArtifactIds ? new Set(spaceArtifactIds) : null;
+    return (state?.artifacts || []).filter(a =>
+      a && a.content && !minimizedIds[a.id] && (!inSpace || inSpace.has(a.id))
+    );
+  }
+
   function getLayout(id, stableIndex) {
     const p = cardPositions[id];
     const s = cardSizes[id];
-    const inSpace = spaceArtifactIds ? new Set(spaceArtifactIds) : null;
-    const visibleCount = (state?.artifacts || []).filter(a =>
-      a.content && !minimizedIds[a.id] && (!inSpace || inSpace.has(a.id))
-    ).length;
-    const d = defaultLayout(Math.max(0, stableIndex), Math.max(1, visibleCount), boardSize);
+    // visibleCount comes from the SAME ordered list `stableIndex` indexes into
+    // (the board passes the card's index within orderedSpaceArtifacts), so the
+    // invariant stableIndex < visibleCount always holds and
+    // autoLayoutForArtifacts(visibleCount)[stableIndex] is always defined —
+    // defaultLayout never falls through to its {16,16} fallback (Bug 1).
+    const visibleCount = orderedVisibleArtifacts().length;
+    const idx = Math.max(0, Math.min(stableIndex, Math.max(0, visibleCount - 1)));
+    const d = defaultLayout(idx, Math.max(1, visibleCount), boardSize);
     return {
       x: p?.x ?? d.x,
       y: p?.y ?? d.y,
@@ -63,6 +80,13 @@ export function useArtifactLayout({ state, refresh, spaceArtifactIds, activeSpac
     // state, so treat delete as idempotent: clear local layout + refresh rather
     // than surfacing a runtime error for a card the user wanted gone anyway.
     if (!res.ok && res.status !== 404) throw new Error(await res.text());
+    // Delete reflow (Step 5). AUTO mode: the placement effect re-tiles surviving
+    // cards on the next pass off the shrunken ordered list, and the wrap's
+    // transform transition makes that re-tile glide. MANUAL mode: we intentionally
+    // DO NOT re-pack survivors — manual positions are deliberate user arrangements,
+    // and yanking windows to fill a hole would violate that intent. The hole is
+    // expected; any position change that does occur still glides via the CSS
+    // transition. Either way we only remove the deleted id's entries here.
     setMinimizedIds(m => { const n = { ...m }; delete n[id]; return n; });
     setCardSizes(s => { const n = { ...s }; delete n[id]; return n; });
     setCardPositions(p => { const n = { ...p }; delete n[id]; return n; });
@@ -246,9 +270,11 @@ export function useArtifactLayout({ state, refresh, spaceArtifactIds, activeSpac
   }, [boardEl]);
 
   // Clamp persisted positions/sizes back into the visible board whenever the
-  // board is (re)measured. Catches: positions saved from a larger window in a
-  // prior session, cascade overshoot, and shrinking the window below saved
-  // bounds — all of which previously left artifacts off-screen on reload.
+  // board is (re)measured OR the active space changes. Catches: positions saved
+  // from a larger window in a prior session, cascade overshoot, shrinking the
+  // window below saved bounds, and switching into a space whose cards were last
+  // laid out at a different window size (Bug 2b) — all of which previously left
+  // artifacts off-screen until an unrelated resize fired.
   useEffect(() => {
     if (!layoutHydratedRef.current) return;
     if (!boardSize.width || !boardSize.height) return;
@@ -289,7 +315,7 @@ export function useArtifactLayout({ state, refresh, spaceArtifactIds, activeSpac
       }
       return changed ? next : prev;
     });
-  }, [boardSize]);
+  }, [boardSize, spaceArtifactIds]);
 
   useEffect(() => {
     document.body.classList.toggle('is-dragging', Boolean(draggingId));
@@ -318,10 +344,10 @@ export function useArtifactLayout({ state, refresh, spaceArtifactIds, activeSpac
 
   useEffect(() => {
     if (!state) return;
-    const inSpace = spaceArtifactIds ? new Set(spaceArtifactIds) : null;
-    const arts = (state.artifacts || []).filter(a =>
-      a.content && !minimizedIds[a.id] && (!inSpace || inSpace.has(a.id))
-    );
+    // Same ordered list getLayout indexes into — index N here maps to the same
+    // card N the board renders, so the synchronous default cell and the effect's
+    // written cell always agree (Bug 1 invariant).
+    const arts = orderedVisibleArtifacts();
     if (layoutMode === 'auto') {
       const layouts = autoLayoutForArtifacts(arts, boardSize);
       const positions = {};
@@ -342,7 +368,15 @@ export function useArtifactLayout({ state, refresh, spaceArtifactIds, activeSpac
       assignedIds = arts.filter(a => !prev[a.id]).map(a => a.id);
       if (assignedIds.length === 0) return prev;
       const next = { ...prev };
-      const existing = Object.values(prev);
+      // Scope the cascade baseline to the CURRENT space only (Bug 2a). `prev` is
+      // the global cardPositions map across every space; cascading off its global
+      // max would spawn a new card off a sibling the user can't see in this space.
+      // Restrict to ids that belong to the active space so a new card cascades off
+      // its visible neighbours, not off off-space geometry.
+      const spaceIds = spaceArtifactIds ? new Set(spaceArtifactIds) : null;
+      const existing = Object.entries(prev)
+        .filter(([id]) => !spaceIds || spaceIds.has(id))
+        .map(([, p]) => p);
       const baseX = existing.length ? Math.max(...existing.map(p => p.x)) : 24;
       const baseY = existing.length ? Math.max(...existing.map(p => p.y)) : 24;
       const maxX = Math.max(320, (boardSize.width  || 900) - 320);

package/app/components/dashboard/use-chat-continuity.js

@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+// Chat live-activity continuity across navigation.
+//
+// When the main agent is working on a turn and the user navigates away and back
+// (or opens the dashboard in a second tab), the originating SSE stream is gone —
+// but the server loop keeps running and (a) persists each agent turn, (b) mirrors
+// every live frame into the turn broadcaster.
+//
+// On detecting a live turn for the current session this hook prefers Phase 2:
+// it calls `attach(sessionId)` for token-level live resume. If no attach fn is
+// available (or the broadcaster has nothing buffered, e.g. after a server
+// restart) it falls back to Phase 1: a TTL-gated poll + progressive refetch of
+// the persisted session.
+//
+// It stands down entirely while the user's OWN stream is active (localBusy) or
+// while an attach is already resuming.
+export function useChatContinuity({ sessionId, localBusy, reloadSession, attach, resuming }) {
+  const [remoteWorking, setRemoteWorking] = useState(false);
+
+  const localBusyRef = useRef(localBusy);
+  localBusyRef.current = localBusy;
+  const resumingRef = useRef(resuming);
+  resumingRef.current = resuming;
+  const reloadRef = useRef(reloadSession);
+  reloadRef.current = reloadSession;
+  const attachRef = useRef(attach);
+  attachRef.current = attach;
+  const sessionIdRef = useRef(sessionId);
+  sessionIdRef.current = sessionId;
+
+  useEffect(() => {
+    if (!sessionId) { setRemoteWorking(false); return; }
+
+    let cancelled = false;
+    let es = null;
+    let pollTimer = null;
+    let refetchTimer = null;
+
+    function scheduleRefetch() {
+      if (refetchTimer) return;
+      refetchTimer = setTimeout(async () => {
+        refetchTimer = null;
+        if (cancelled || localBusyRef.current || resumingRef.current) return;
+        await reloadRef.current?.(sessionIdRef.current);
+      }, 300);
+    }
+
+    function startPoll() {
+      if (pollTimer) return;
+      pollTimer = setInterval(async () => {
+        if (cancelled || localBusyRef.current || resumingRef.current) return;
+        const s = await reloadRef.current?.(sessionIdRef.current);
+        if (cancelled) return;
+        if (s && !s.agent_working) { setRemoteWorking(false); stopPoll(); }
+      }, 1500);
+    }
+    function stopPoll() { if (pollTimer) { clearInterval(pollTimer); pollTimer = null; } }
+
+    // Begin resuming a detected live turn. Prefer the token-level attach; fall
+    // back to poll+refetch when attach is unavailable.
+    function beginResume() {
+      if (cancelled || localBusyRef.current) return;
+      setRemoteWorking(true);
+      if (attachRef.current && !resumingRef.current) {
+        attachRef.current(sessionIdRef.current);
+      } else {
+        scheduleRefetch();
+        startPoll();
+      }
+    }
+
+    function onChatTurn(ev) {
+      let payload;
+      try { payload = JSON.parse(ev.data); } catch { return; }
+      if (!payload || payload.session_id !== sessionIdRef.current) return;
+      if (localBusyRef.current) return; // our own live stream owns rendering
+      if (payload.phase === 'done') {
+        setRemoteWorking(false);
+        stopPoll();
+        if (!resumingRef.current) scheduleRefetch();
+      } else {
+        beginResume(); // started | step
+      }
+    }
+
+    // Seed from the persisted flag — covers the turn that began before this
+    // client mounted (the classic navigate-away/return).
+    (async () => {
+      if (localBusyRef.current) return;
+      const s = await reloadRef.current?.(sessionIdRef.current);
+      if (cancelled || localBusyRef.current) return;
+      if (s?.agent_working) beginResume();
+    })();
+
+    try {
+      es = new EventSource('/api/events/stream');
+      es.addEventListener('chat_turn', onChatTurn);
+    } catch { es = null; }
+
+    return () => {
+      cancelled = true;
+      if (es) { try { es.close(); } catch { /* ignore */ } }
+      stopPoll();
+      if (refetchTimer) clearTimeout(refetchTimer);
+    };
+  }, [sessionId]);
+
+  // Never surface the remote banner while the user's own stream is live.
+  return { remoteWorking: remoteWorking && !localBusy };
+}