madarx 2.18.0 → 2.21.0

package/app/components/dashboard/use-stream-command.js

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { saveLastSessionId } from './use-dashboard-sessions';
 import { clearSavedDraft } from './use-draft-persist';
+import { applyStreamEvent } from './apply-stream-event';
 
 export function useStreamCommand({
   chat,
@@ -15,10 +16,16 @@ export function useStreamCommand({
   setUsage,
   refresh,
   refreshSessions,
+  reloadSession,
   bringToFront,
   projectId,
 }) {
   const [busy, setBusy] = useState(false);
+  // Phase 2: re-attaching to a turn that started in another tab / before this
+  // client mounted. Distinct from `busy` (this client's own send) so the
+  // composer stays usable and we don't fight the live path's guards.
+  const [resuming, setResuming] = useState(false);
+  const attachEsRef = useRef(null);
   const [liveText, setLiveText] = useState('');
   const [liveTool, setLiveTool] = useState(null);
   const [liveExpanded, setLiveExpanded] = useState(false);
@@ -33,6 +40,10 @@ export function useStreamCommand({
   // Drained into pending_approvals on the next outgoing request so the server
   // can inject approval_id into the retried tool call.
   const pendingApprovalsRef = useRef([]);
+  // Inline approval cards for delegated sub-agents (run_agent paused on an owner
+  // gate). Rendered in the chat thread with Approve/Deny so the owner never
+  // leaves the conversation. Approving re-dispatches the sub-agent.
+  const [agentApprovals, setAgentApprovals] = useState([]);
   const abortRef = useRef(null);
   const stoppedRef = useRef(false);
   const feedRef = useRef(null);
@@ -55,6 +66,12 @@ export function useStreamCommand({
 
   async function commandImpl(text, attachments) {
     if (busy) return;
+    // A user send takes over from any passive resume stream.
+    if (attachEsRef.current) {
+      try { attachEsRef.current.close(); } catch { /* ignore */ }
+      attachEsRef.current = null;
+      setResuming(false);
+    }
     const clean = (text ?? '').trim();
     const files = Array.isArray(attachments) ? attachments : [];
     // Allow an attachment-only send (no text) — the model still gets the files.
@@ -108,7 +125,19 @@ export function useStreamCommand({
       const reader = res.body.getReader();
       const dec = new TextDecoder();
       let buf = '';
-      let agentText = '';
+      const textRef = { current: '' };
+      const sessionIdRef = { current: sessionId };
+      // Shared event reducer bundle — identical to the Phase-2 attach path.
+      const ctx = {
+        textRef,
+        sessionIdRef,
+        setChat, setLiveText, setAgentPhase, setLiveTool, setLiveSteps,
+        setUsage, setSessionId, setSessionArtifactId,
+        setLiveThinking, setLiveStatus,
+        pendingApprovalsRef, setAgentApprovals,
+        bringToFront, refresh,
+        onSession: (id) => { saveLastSessionId(id); sessionIdRef.current = id; },
+      };
 
       setChat(c => [...c, { role: 'agent', text: '' }]);
 
@@ -127,112 +156,7 @@ export function useStreamCommand({
           } else if (line.startsWith('data:')) {
             const raw = line.slice(5).trim();
             try {
-              const payload = JSON.parse(raw);
-              if (eventName === 'session' && payload.id) {
-                saveLastSessionId(payload.id);
-                if (payload.id !== sessionId) 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') {
-                // Accumulated reasoning text (replaces, not appends — server sends
-                // the running total). Surfaced in the collapsible Thinking panel.
-                setLiveThinking(payload.text);
-                setAgentPhase(p => (p === 'responding' || p === 'tool') ? p : 'thinking');
-              } else if (eventName === 'cli_status') {
-                setLiveStatus(payload && payload.phase ? payload : null);
-                if (payload?.phase === 'thinking') {
-                  setAgentPhase(p => (p === 'responding' || p === 'tool') ? p : 'thinking');
-                }
-              } else if (eventName === 'text' && payload.delta) {
-                agentText += 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: agentText };
-                  return next;
-                });
-              } else if (eventName === 'tool_start') {
-                setLiveTool(payload.name);
-                setAgentPhase('tool');
-                setLiveSteps(s => [...s, {
-                  id: `${payload.name}-${Date.now()}`,
-                  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'),
-                        // Verbose detail: elapsed time + a short output preview so
-                        // the user can see what each tool actually returned.
-                        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)) {
-                // Server returned unused approvals (adapter errored + refunded).
-                // Put them back into the ref so the next outgoing message
-                // carries them again.
-                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') {
-                agentText += `\nError: ${payload.message}`;
-                setChat(c => {
-                  const next = [...c];
-                  next[next.length - 1] = { role: 'agent', text: agentText };
-                  return next;
-                });
-              }
+              applyStreamEvent(eventName, JSON.parse(raw), ctx);
             } catch {
               // non-JSON data line — ignore
             }
@@ -241,7 +165,7 @@ export function useStreamCommand({
         }
       }
 
-      if (!agentText) {
+      if (!textRef.current) {
         setChat(c => {
           const next = [...c];
           next[next.length - 1] = { role: 'agent', text: 'Done.' };
@@ -292,6 +216,71 @@ export function useStreamCommand({
     }
   }
 
+  // Phase 2: open a live re-attach to an in-flight turn. Replays the buffered
+  // tail then streams live tokens through the SAME reducer as the send path.
+  // On completion (or if nothing is live) it finalises and, when canonicalising,
+  // pulls the persisted session so the transcript matches chat_messages exactly.
+  function attachImpl(targetSessionId) {
+    if (!targetSessionId || busy || attachEsRef.current) return;
+    let es;
+    try {
+      es = new EventSource(`/api/orchestrator/stream/attach?session_id=${encodeURIComponent(targetSessionId)}&from_seq=0`);
+    } catch { return; }
+    attachEsRef.current = es;
+    setResuming(true);
+    setLiveSteps([]);
+    setLiveThinking('');
+    setLiveStatus(null);
+
+    const textRef = { current: '' };
+    const sessionIdRef = { current: targetSessionId };
+    const ctx = {
+      textRef, sessionIdRef,
+      setChat, setLiveText, setAgentPhase, setLiveTool, setLiveSteps,
+      setUsage, setSessionId, setSessionArtifactId,
+      setLiveThinking, setLiveStatus,
+      pendingApprovalsRef,
+      bringToFront, refresh,
+      onSession: () => {},
+    };
+
+    let bubbleAdded = false;
+    function ensureBubble() {
+      if (bubbleAdded) return;
+      bubbleAdded = true;
+      setChat(c => [...c, { role: 'agent', text: '' }]);
+    }
+
+    function finish(canonicalize) {
+      if (attachEsRef.current !== es) return;
+      try { es.close(); } catch { /* ignore */ }
+      attachEsRef.current = null;
+      setResuming(false);
+      setAgentPhase('idle');
+      setLiveText('');
+      setLiveTool(null);
+      // Snap to the persisted transcript so any replay duplication collapses to
+      // the canonical chat_messages view.
+      if (canonicalize) { try { reloadSession?.(targetSessionId); } catch { /* ignore */ } }
+    }
+
+    const EVENTS = ['session', 'text', 'cli_stream', 'cli_thinking', 'cli_status',
+      'tool_start', 'tool_result', 'artifacts', 'agent_created', 'session_artifact',
+      'artifact_updated', 'usage', 'pending_approvals', 'agent_approval', 'error', 'done'];
+    for (const name of EVENTS) {
+      es.addEventListener(name, (ev) => {
+        let payload;
+        try { payload = JSON.parse(ev.data); } catch { return; }
+        if (name === 'done') { finish(true); return; }
+        if (name === 'text' || name === 'cli_stream' || name === 'error') ensureBubble();
+        applyStreamEvent(name, payload, ctx);
+      });
+    }
+    // 204 (nothing live) or a transport drop surfaces as an error. EventSource
+    // would auto-reconnect; finish() closes it so we don't loop.
+    es.addEventListener('error', () => finish(false));
+  }
+
   async function decideApprovalImpl(approvalId, decision, toolName) {
     if (!approvalId) return;
     try {
@@ -322,6 +311,57 @@ export function useStreamCommand({
     }
   }
 
+  // Decide an inline sub-agent approval card. Approve → re-dispatch the sub-agent
+  // (server consumes the approval + generates), pinning the result to the canvas,
+  // all without leaving the chat. Deny → mark the request denied.
+  async function resumeAgentApprovalImpl(approvalId, decision) {
+    if (!approvalId) return;
+    if (decision === 'denied') {
+      setAgentApprovals(a => a.map(x => x.approval_id === approvalId ? { ...x, status: 'denied' } : x));
+      try {
+        await fetch(`/api/approvals/${approvalId}`, {
+          method: 'PATCH', headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ decision: 'denied' }),
+        });
+      } catch { /* best-effort */ }
+      return;
+    }
+    setAgentApprovals(a => a.map(x => x.approval_id === approvalId ? { ...x, status: 'resuming' } : x));
+    try {
+      const res = await fetch('/api/agents/resume-approval', {
+        method: 'POST', headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ approval_id: approvalId }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok || !data.ok) {
+        setAgentApprovals(a => a.map(x => x.approval_id === approvalId ? { ...x, status: 'error', error: data.error || res.status } : x));
+        setChat(c => [...c, { role: 'agent', text: `Could not continue: ${data.error || res.status}` }]);
+        return;
+      }
+      // A second gate surfaced — mark this one approved and add the next card.
+      if (data.status === 'awaiting_approval' && data.pending_approval?.approval_id) {
+        setAgentApprovals(a => [
+          ...a.map(x => x.approval_id === approvalId ? { ...x, status: 'approved' } : x),
+          {
+            approval_id: data.pending_approval.approval_id,
+            tool_name: data.pending_approval.tool_name,
+            agent_id: data.pending_approval.agent_id || null,
+            agent_name: data.pending_approval.agent_name || data.agent_name || 'Agent',
+            summary: data.pending_approval.summary || '',
+            status: 'pending',
+          },
+        ]);
+        return;
+      }
+      setAgentApprovals(a => a.map(x => x.approval_id === approvalId ? { ...x, status: 'done', artifact_id: data.artifact_id || null } : x));
+      if (data.artifact_id) { setSessionArtifactId(data.artifact_id); bringToFront(data.artifact_id); }
+      await refresh();
+      setChat(c => [...c, { role: 'agent', text: `${data.agent_name || 'Agent'} finished${data.title ? ` — "${data.title}"` : ''}.` }]);
+    } catch (err) {
+      setAgentApprovals(a => a.map(x => x.approval_id === approvalId ? { ...x, status: 'error', error: err.message } : x));
+    }
+  }
+
   function stopImpl() {
     if (!busy) return;
     stoppedRef.current = true;
@@ -332,15 +372,31 @@ export function useStreamCommand({
   stopRef.current = stopImpl;
   const decideApprovalRef = useRef(null);
   decideApprovalRef.current = decideApprovalImpl;
+  const resumeAgentApprovalRef = useRef(null);
+  resumeAgentApprovalRef.current = resumeAgentApprovalImpl;
+  const attachRef = useRef(null);
+  attachRef.current = attachImpl;
   const command = useCallback((text, attachments) => commandRef.current(text, attachments), []);
   const stop = useCallback(() => stopRef.current(), []);
   const decideApproval = useCallback(
     (id, decision, toolName) => decideApprovalRef.current(id, decision, toolName),
     [],
   );
+  const resumeAgentApproval = useCallback(
+    (id, decision) => resumeAgentApprovalRef.current(id, decision),
+    [],
+  );
+  const attach = useCallback((id) => attachRef.current(id), []);
+
+  // Close any live re-attach when this hook unmounts (page navigation).
+  useEffect(() => () => {
+    if (attachEsRef.current) { try { attachEsRef.current.close(); } catch { /* ignore */ } }
+  }, []);
 
   return {
     busy,
+    resuming,
+    attach,
     liveText,
     liveTool,
     liveExpanded,
@@ -354,5 +410,7 @@ export function useStreamCommand({
     command,
     stop,
     decideApproval,
+    agentApprovals,
+    resumeAgentApproval,
   };
 }

package/app/globals.css

@@ -259,6 +259,14 @@
 .artifact-building-dots i:nth-child(2){animation-delay:.18s;}
 .artifact-building-dots i:nth-child(3){animation-delay:.36s;}
 @keyframes artifact-spin{to{transform:rotate(360deg);}}
+
+/* Chat continuity (Phase 1): shown on return when a turn is still running for
+   this session but this client isn't the one streaming it. */
+.agent-resume-banner{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:12px;border:1px solid rgba(194,69,42,.18);background:linear-gradient(100deg,rgba(255,255,255,.6),rgba(252,246,244,.92));font-size:12.5px;color:#4a5059;width:fit-content;max-width:100%;}
+.agent-resume-orb{width:13px;height:13px;border-radius:50%;flex-shrink:0;background:conic-gradient(from 0deg,var(--accent-500,#c2452a),rgba(194,69,42,.15),var(--accent-500,#c2452a));animation:artifact-spin 1s linear infinite;mask:radial-gradient(circle 3.5px at center,transparent 96%,#000 100%);-webkit-mask:radial-gradient(circle 3.5px at center,transparent 96%,#000 100%);}
+.agent-resume-label{font-weight:600;letter-spacing:.01em;color:#313740;}
+.agent-resume-sub{opacity:.62;font-size:11.5px;}
+.tool-steps--restored{opacity:.82;margin-top:6px;}
 @keyframes artifact-dot{0%,70%,100%{opacity:.25;}35%{opacity:1;}}
 
 /* Inline delete confirmation — replaces winbar controls in place */
@@ -284,6 +292,11 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 @media (prefers-reduced-motion: reduce){
   .artifact-fs{transition:opacity 120ms ease;}
   .artifact-fs[data-phase="enter"],.artifact-fs[data-phase="exit"]{transform:none;border-radius:var(--artifact-radius);}
+  /* Incoming-card glide degrades to opacity-only — no transform on the inner
+     window, and the space-switch board lift collapses to a plain fade. */
+  .artifact-window{animation-name:artifact-enter;}
+  @keyframes artifact-window-enter{from{transform:none;}to{transform:none;}}
+  .canvas.is-space-switching .canvas-board{transform:none;filter:none;}
 }
 
 /* macOS-style dock — spaces switcher + minimised artifact cards */
@@ -443,7 +456,9 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 .canvas-board{position:absolute;inset:0 0 70px;overflow:auto;overscroll-behavior:contain;z-index:1;transition:opacity .22s cubic-bezier(.32,.72,0,1),transform .22s cubic-bezier(.32,.72,0,1),filter .22s ease;}
 .canvas-board--docked{padding-bottom:0;}
 
-/* Space switching — outgoing fade-and-lift; incoming relies on artifact-enter keyframes */
+/* Space switching — outgoing fade-and-lift; incoming cards glide in via the
+   enhanced artifact-enter keyframes (same cubic-bezier(.32,.72,0,1) language as
+   in-space reflow) so opening a space feels like a reflow, not a flat fade. */
 .canvas.is-space-switching .canvas-board{opacity:0;transform:translate3d(0,8px,0) scale(.992);filter:blur(2px);pointer-events:none;}
 .dock-items .dock-item{transition:opacity .18s ease,transform .18s cubic-bezier(.32,.72,0,1);}
 .canvas.is-space-switching .dock-items .dock-item{opacity:0;transform:translateY(4px) scale(.94);pointer-events:none;}
@@ -453,9 +468,18 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 /* Artifact window — absolutely positioned, draggable, focus-on-top */
 .artifact-window-wrap{position:absolute;top:0;left:0;min-width:280px;min-height:180px;animation:artifact-enter .32s cubic-bezier(.32,.72,0,1) both;transition:transform .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1),height .42s cubic-bezier(.32,.72,0,1);will-change:transform,width,height;}
 .artifact-window-wrap[data-dragging="true"],.artifact-window-wrap[data-resizing="true"]{transition:none;}
+/* Wrap owns the positioning transform (inline translate3d), so its entrance
+   animation must stay opacity-only — animating transform here would override the
+   inline position and snap the card to (0,0) mid-animation. The glide lives on
+   the inner .artifact-window instead (see artifact-window-enter below). */
 @keyframes artifact-enter{from{opacity:0;}to{opacity:1;}}
 @keyframes artifact-exit{to{opacity:0;transform:translate3d(0,12px,0) scale(.94);}}
-.artifact-window{width:100%;height:100%;display:flex;flex-direction:column;border-radius:var(--artifact-radius);overflow:hidden;transition:transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s cubic-bezier(.32,.72,0,1);}
+.artifact-window{width:100%;height:100%;display:flex;flex-direction:column;border-radius:var(--artifact-radius);overflow:hidden;transition:transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s cubic-bezier(.32,.72,0,1);animation:artifact-window-enter .32s cubic-bezier(.32,.72,0,1) both;}
+/* Subtle translate+scale glide on the inner window so incoming cards (create,
+   space-open) share the in-space reflow motion language instead of a flat fade.
+   Lives here (not on the wrap) to avoid clobbering the wrap's positioning
+   transform. Settles to scale(1)/no-translate, matching the hover-rest state. */
+@keyframes artifact-window-enter{from{transform:translate3d(0,10px,0) scale(.985);}to{transform:translate3d(0,0,0) scale(1);}}
 .artifact-window-wrap.is-dragging .artifact-window{box-shadow:none;}
 .artifact-window--new{box-shadow:0 18px 48px rgba(32,34,38,.22);}
 
@@ -5445,3 +5469,68 @@ ul.hail-error{list-style:disc;padding:8px 8px 8px 24px;margin:10px 0 0;display:f
 .team-invite-code{display:block;word-break:break-all;padding:10px 12px;background:#f4f6f9;border:1px solid #e2e7ee;border-radius:8px;font-family:var(--font-mono-brand,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;line-height:1.5;color:#2b3038;}
 .team-invite-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
 .team-invite-list>li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#3b4048;}
+
+/* ── Team setup wizard (/onboarding/team) ─────────────────────────────────── */
+.wiz{display:flex;flex-direction:column;gap:18px;max-width:760px;}
+.wiz-rail{list-style:none;margin:0;padding:0;display:flex;align-items:center;}
+.wiz-rail>li{display:flex;align-items:center;flex:1;min-width:0;}
+.wiz-rail>li:last-child{flex:0 0 auto;}
+.wiz-step{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:4px 2px;cursor:pointer;text-align:left;min-width:0;}
+.wiz-step-dot{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(17,19,24,.16);background:#fff;color:#9aa1ac;transition:all .16s ease;}
+.wiz-step-text{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
+.wiz-step-text b{font-size:12.5px;font-weight:750;letter-spacing:-.01em;color:#6b727d;white-space:nowrap;}
+.wiz-step-text small{font-size:10.5px;color:#9aa1ac;white-space:nowrap;}
+.wiz-step.is-active .wiz-step-dot{border-color:var(--accent-500);color:var(--accent-500);box-shadow:0 0 0 4px rgba(194,69,42,.10);}
+.wiz-step.is-active .wiz-step-text b{color:#111318;}
+.wiz-step.is-done .wiz-step-dot{border-color:var(--accent-500);background:var(--accent-500);color:#fff;}
+.wiz-step.is-done .wiz-step-text b{color:#1d2026;}
+.wiz-conn{flex:1;height:2px;margin:0 10px;border-radius:2px;background:rgba(17,19,24,.12);min-width:16px;}
+.wiz-conn.is-done{background:var(--accent-500);}
+.wiz-panel{margin-bottom:0;}
+.wiz-body{display:flex;flex-direction:column;gap:14px;}
+.wiz-head h3{margin:0 0 4px;font-size:18px;letter-spacing:-.03em;color:#111318;}
+.wiz-head p{margin:0;font-size:13px;line-height:1.5;color:#68707b;max-width:60ch;}
+.wiz-fields{display:flex;flex-direction:column;gap:12px;}
+.wiz-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:2px;}
+.wiz-loading{display:flex;align-items:center;gap:8px;font-size:13px;color:#68707b;padding:6px 0;}
+.wiz-link{align-self:flex-start;background:transparent;border:0;color:var(--accent-600);font-size:12.5px;font-weight:650;cursor:pointer;padding:2px 0;}
+.wiz-link:hover{text-decoration:underline;}
+.wiz-schema-status{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fafbfc;}
+.wiz-schema-status .wiz-schema-icon{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;}
+.wiz-schema-status.is-ready{border-color:rgba(34,139,84,.28);background:rgba(34,139,84,.06);}
+.wiz-schema-status.is-ready .wiz-schema-icon{background:rgba(34,139,84,.14);color:#1d7a47;}
+.wiz-schema-status.is-partial{border-color:rgba(214,158,46,.3);background:rgba(214,158,46,.07);}
+.wiz-schema-status.is-partial .wiz-schema-icon{background:rgba(214,158,46,.16);color:#9a6d11;}
+.wiz-schema-status b{display:block;font-size:13px;color:#1d2026;letter-spacing:-.01em;}
+.wiz-schema-status small{display:block;font-size:11.5px;color:#68707b;margin-top:1px;}
+.wiz-apply{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;}
+.wiz-apply-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#3b4048;}
+.wiz-apply-head b{color:var(--accent-600);margin-right:4px;}
+.wiz-apply-btns{display:flex;gap:6px;flex-wrap:wrap;}
+.wiz-advanced{background:#fafbfc;}
+.wiz-sql{margin-top:10px;}
+.wiz-sql summary{font-size:11.5px;color:#7a818c;cursor:pointer;}
+.wiz-sql-pre{margin:8px 0 0;max-height:240px;overflow:auto;padding:12px;border-radius:10px;background:#15161a;color:#cfd3da;font:11px/1.5 'IBM Plex Mono',ui-monospace,monospace;white-space:pre;}
+.wiz-invite{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
+.wiz-invite .admin-input{flex:1;min-width:220px;font-size:12px;}
+.wiz-finish{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fafbfc;}
+.wiz-finish-row{display:flex;align-items:center;gap:12px;}
+.wiz-finish-row>div{flex:1;min-width:0;}
+.wiz-finish-row b{display:block;font-size:13px;color:#1d2026;letter-spacing:-.01em;}
+.wiz-finish-row small{display:block;font-size:11.5px;color:#68707b;margin-top:1px;line-height:1.4;}
+.wiz-finish-row svg{color:var(--accent-500);flex:0 0 auto;}
+.wiz-pill{font-size:11px;font-weight:750;padding:3px 9px;border-radius:999px;}
+.wiz-pill.is-ready{background:rgba(34,139,84,.12);color:#1d7a47;}
+.admin-btn-sm .wiz-spin,.admin-btn-primary .wiz-spin,.wiz-spin{animation:wiz-spin 0.8s linear infinite;}
+@keyframes wiz-spin{to{transform:rotate(360deg);}}
+.wiz-setup-cta{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(194,69,42,.22);background:linear-gradient(180deg,rgba(194,69,42,.05),rgba(194,69,42,.02));margin-bottom:14px;}
+.wiz-setup-cta .wiz-cta-icon{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:rgba(194,69,42,.12);color:var(--accent-500);}
+.wiz-setup-cta>div{flex:1;min-width:0;}
+.wiz-setup-cta b{display:block;font-size:13.5px;letter-spacing:-.01em;color:#111318;}
+.wiz-setup-cta small{display:block;font-size:11.5px;color:#68707b;margin-top:1px;line-height:1.4;}
+@media(max-width:640px){
+  .wiz-rail{flex-direction:column;align-items:stretch;gap:4px;}
+  .wiz-rail>li{flex:0 0 auto;}
+  .wiz-conn{display:none;}
+  .wiz-step{width:100%;}
+}

package/app/onboarding/team/page.js

@@ -0,0 +1,82 @@
+/**
+ * app/onboarding/team/page.js — Guided "set up your team" wizard (server shell).
+ *
+ * One linear flow that takes an operator from nothing to a shared organization:
+ *   ① Connect Supabase  → ② Build the tables  → ③ Create the org  → ④ Invite
+ *
+ * Each step reuses an existing, tested endpoint (/api/auth/config,
+ * /api/cloud/schema, /api/orgs, /api/orgs/[id]/invites) — the wizard just
+ * sequences them with live status and good defaults so the journey is obvious.
+ *
+ * Works in both auth modes. In local mode the single operator is always allowed
+ * and credentials are saved WITHOUT flipping the auth gate, so the wizard never
+ * logs you out mid-setup; enabling team sign-in is an explicit final action.
+ */
+
+import { redirect } from 'next/navigation';
+import { AdminShell } from '@/app/components/admin/admin-page.jsx';
+import { getSession, getAuthMode } from '@/lib/auth.js';
+import {
+  getSupabaseAuthConfig,
+  isServiceKeyConfigured,
+  isAuthModeEnvLocked,
+} from '@/lib/auth-config.js';
+import { getOrgById } from '@/lib/org.js';
+import { isSharedCloudReady } from '@/lib/shared-cloud.js';
+import { getPublicBaseUrl } from '@/lib/public-url.js';
+import TeamSetupClient from './team-setup-client.jsx';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export const metadata = {
+  title: 'Set up your team · madarX',
+};
+
+export default async function TeamSetupPage() {
+  const authMode = getAuthMode();
+
+  // In supabase mode you must be signed in to configure a team.
+  let session = null;
+  try {
+    session = await getSession();
+  } catch {
+    session = null;
+  }
+  if (authMode === 'supabase' && !session) {
+    redirect('/login?next=/onboarding/team');
+  }
+
+  const cfg = getSupabaseAuthConfig();
+  // The seeded local default org is a personal workspace, not a shareable team
+  // org — don't present it as an already-created team.
+  const sessionOrgId = session?.org_id || null;
+  const sessionOrg = sessionOrgId ? getOrgById(sessionOrgId) : null;
+  const isLocalDefault = authMode === 'local' && sessionOrg?.id === 'personal-org';
+  const existingOrg = sessionOrg && !isLocalDefault
+    ? { id: sessionOrg.id, name: sessionOrg.name, slug: sessionOrg.slug }
+    : null;
+
+  const initial = {
+    authMode,
+    envLocked: isAuthModeEnvLocked(),
+    url: cfg.url || '',
+    anonKey: cfg.anonKey || '',
+    serviceKeySet: isServiceKeyConfigured(),
+    publicBaseUrl: getPublicBaseUrl() || '',
+    cloudReady: isSharedCloudReady(),
+    role: session?.role || 'owner',
+    existingOrg,
+  };
+
+  return (
+    <AdminShell
+      kicker="Onboarding"
+      title="Set up your team"
+      description="Connect Supabase, stand up the shared tables, create your organization, and invite teammates — in four guided steps."
+      hideProjectSwitcher
+    >
+      <TeamSetupClient initial={initial} />
+    </AdminShell>
+  );
+}