madarx 2.18.0 → 2.21.0

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 };
+}

package/app/components/dashboard/use-dashboard-sessions.js

@@ -1,5 +1,8 @@
 import { useState } from 'react';
 import { api } from './api';
+import { chatStateFromSession } from './chat-session-view';
+
+export { chatStateFromSession };
 
 export const LAST_SESSION_KEY = 'madarx:last-chat-session-id:v1';
 
@@ -17,15 +20,6 @@ export function getSavedLastSessionId() {
   catch { return null; }
 }
 
-export function chatStateFromSession(session) {
-  const msgs = (session?.messages || []).filter(m => (m.role === 'user' || m.role === 'assistant') && m.content);
-  const next = msgs.map(m => ({ role: m.role === 'assistant' ? 'agent' : 'user', text: m.content }));
-  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;
-}
-
 export function useDashboardSessions({ sessionId, setSessionId, setChat, setUsage, setSelectedModel, setSessionArtifactId }) {
   const [sessions, setSessions] = useState([]);
   const [sessionsOpen, setSessionsOpen] = useState(false);
@@ -37,15 +31,16 @@ export function useDashboardSessions({ sessionId, setSessionId, setChat, setUsag
     } catch { /* ignore — chat history is best-effort */ }
   }
 
-  async function openSession(id) {
-    setSessionsOpen(false);
-    if (id === sessionId) return;
-    setSessionArtifactId(null);
+  // Force-fetch a session and hydrate chat/usage from it. Unlike openSession,
+  // this does NOT short-circuit when id === sessionId — used by the continuity
+  // hook to pull newly-persisted turns while an agent is working remotely.
+  // Returns the raw session (incl. agent_working) or null.
+  async function reloadSession(id) {
+    if (!id) return null;
     try {
       const d = await api(`/api/chat/sessions/${encodeURIComponent(id)}`);
       const s = d.session;
-      setSessionId(s.id);
-      saveLastSessionId(s.id);
+      if (!s) return null;
       setChat(chatStateFromSession(s));
       setUsage(u => ({
         ...u,
@@ -56,8 +51,19 @@ export function useDashboardSessions({ sessionId, setSessionId, setChat, setUsag
         cache_creation: s.total_cache_creation_tokens || 0,
         context: s.last_context_tokens || 0,
       }));
-      if (s.model) setSelectedModel(s.model);
-    } catch { /* ignore */ }
+      return s;
+    } catch { return null; }
+  }
+
+  async function openSession(id) {
+    setSessionsOpen(false);
+    if (id === sessionId) return;
+    setSessionArtifactId(null);
+    const s = await reloadSession(id);
+    if (!s) return;
+    setSessionId(s.id);
+    saveLastSessionId(s.id);
+    if (s.model) setSelectedModel(s.model);
   }
 
   function newSession() {
@@ -85,6 +91,7 @@ export function useDashboardSessions({ sessionId, setSessionId, setChat, setUsag
     setSessionsOpen,
     refreshSessions,
     openSession,
+    reloadSession,
     newSession,
     deleteSession,
   };

package/app/components/dashboard/use-dashboard-state.js

@@ -2,8 +2,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { api } from './api';
 import { useArtifactLayout } from './use-artifact-layout';
+import { orderedSpaceArtifacts } from './artifact-order';
 import { useSpaces } from './use-spaces';
 import { useDashboardSessions, getSavedLastSessionId } from './use-dashboard-sessions';
+import { useChatContinuity } from './use-chat-continuity';
 import { useMainAgentStream } from './use-main-agent-stream';
 import { useRuntimeActions } from './use-runtime-actions';
 import { useConfigPanel } from './use-config-panel';
@@ -100,6 +102,58 @@ export function useDashboardState() {
     activeSpaceId: spaces.activeSpaceId,
     moveArtifactToSpace: spaces.moveArtifactToSpace,
   });
+
+  // ── Smart auto-fullscreen on create (Bug 3 / Step 6) ──────────────────────
+  // When EXACTLY ONE new artifact appears in the ACTIVE space in a single state
+  // tick, open it full-screen so the freshly generated work is the focus. Batch
+  // / scheduled runs that emit several artifacts at once tile normally (we do
+  // nothing if >1 new id lands in a tick), and artifacts created in a
+  // non-active space never trigger fullscreen. Esc/close returns the artifact
+  // to its grid slot (handled by ArtifactFullscreen). No user setting.
+  //
+  // `prevArtifactIdsRef` is initialized to null so the FIRST hydration only
+  // seeds the set without firing — on page load many artifacts may already
+  // exist and we must not yank the user into fullscreen. Subsequent ticks diff
+  // against the previous set, so a given artifact fires (at most) once, on the
+  // single tick it first appears.
+  const { setFullscreenId, fullscreenId } = artifactLayout;
+  const prevArtifactIdsRef = useRef(null);
+  useEffect(() => {
+    // Wait for the first hydrated state before seeding. `state` is null until
+    // the mount poll resolves; seeding off the null render would make every
+    // existing artifact look "new" on the first data tick and wrongly
+    // fullscreen a single-artifact space on page load.
+    if (!state) return;
+    // Current set of real (content-bearing) artifact ids across all spaces.
+    const current = (state.artifacts || []).filter((a) => a.content);
+    const currentIds = new Set(current.map((a) => a.id));
+    const prev = prevArtifactIdsRef.current;
+
+    // First hydrated run: seed the baseline only, never fire. This guards
+    // page load (existing artifacts are not "new").
+    if (prev === null) {
+      prevArtifactIdsRef.current = currentIds;
+      return;
+    }
+
+    // New ids = present now, absent before. Switching spaces does NOT change
+    // the global id set, so a space switch produces zero new ids and never
+    // fullscreens an existing artifact.
+    const newInActiveSpace = current.filter(
+      (a) => !prev.has(a.id) && (a.space_id || 'default') === spaces.activeSpaceId
+    );
+
+    // Always advance the baseline so the next diff is correct, even when we
+    // don't fire.
+    prevArtifactIdsRef.current = currentIds;
+
+    // Fire only for exactly one new artifact in the active space. Skip if the
+    // user already has a fullscreen open (don't yank them off it), or if that
+    // artifact is somehow already the current fullscreen.
+    if (newInActiveSpace.length !== 1) return;
+    if (fullscreenId) return;
+    setFullscreenId(newInActiveSpace[0].id);
+  }, [state, spaces.activeSpaceId, fullscreenId, setFullscreenId]);
   const sessions = useDashboardSessions({
     sessionId,
     setSessionId,
@@ -119,12 +173,23 @@ export function useDashboardState() {
     setUsage,
     refresh,
     refreshSessions: sessions.refreshSessions,
+    reloadSession: sessions.reloadSession,
     bringToFront: artifactLayout.bringToFront,
     projectId: selectedProjectId,
     runs: state?.runs || null,
   });
   const runtimeActions = useRuntimeActions({ refresh, setChat });
 
+  // Resume the live-activity view when a turn is running for this session but
+  // this client isn't the one streaming it (navigate-away/return, second tab).
+  const continuity = useChatContinuity({
+    sessionId,
+    localBusy: mainAgent.busy,
+    reloadSession: sessions.reloadSession,
+    attach: mainAgent.attach,
+    resuming: mainAgent.resuming,
+  });
+
   // ── Always-latest refs so mount-only effect reads current values ──────────
   // Direct render-body assignment is the React-recommended pattern for refs
   // that mirror the latest closure value. This lets the mount-only effect
@@ -341,8 +406,11 @@ export function useDashboardState() {
     () => (counts.artifacts || []).filter(a => a.content),
     [counts.artifacts]
   );
+  // Single source of index assignment for the canvas. `orderedSpaceArtifacts`
+  // is the same pure helper the layout hook consumes, so the board's first-paint
+  // index can never disagree with the auto-layout effect's cell (Bug 1).
   const visibleArtifacts = useMemo(
-    () => artifacts.filter(a => (a.space_id || 'default') === spaces.activeSpaceId && !artifactLayout.minimizedIds[a.id]),
+    () => orderedSpaceArtifacts(artifacts, spaces.activeSpaceId, artifactLayout.minimizedIds),
     [artifacts, spaces.activeSpaceId, artifactLayout.minimizedIds]
   );
   const dockedArtifacts = useMemo(
@@ -404,6 +472,9 @@ export function useDashboardState() {
     sessions,
     mainAgent,
     runtimeActions,
+    // chat continuity: true when a turn is running remotely for this session
+    // (Phase 1 banner) or being live-resumed (Phase 2 attach).
+    agentWorkingRemote: continuity.remoteWorking || mainAgent.resuming,
     // frame registration
     registerArtifactFrame,
   };

package/app/components/dashboard/use-main-agent-stream.js

@@ -9,6 +9,8 @@ export function useMainAgentStream(opts) {
 
   return {
     busy: stream.busy,
+    resuming: stream.resuming,
+    attach: stream.attach,
     liveText: stream.liveText,
     liveTool: stream.liveTool,
     liveExpanded: stream.liveExpanded,