madarx 2.17.0 → 2.19.0

package/app/globals.css

@@ -47,7 +47,7 @@
   --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
-:root{--ink:#111318;--muted:#68707b;--gold:#d4b77f;--glass:rgba(255,255,255,.78);--line:rgba(20,22,26,.09);--radius:14px;
+:root{--ink:#111318;--muted:#68707b;--gold:#d4b77f;--glass:rgba(255,255,255,.78);--line:rgba(20,22,26,.09);--radius:14px;--artifact-radius:14px;
   /* Marketplace brand tokens — see ai-docs/marketplace-brand.md */
   --mkt-tool-tint:#f3f1ec;
   --mkt-tool-ink:#3a3f47;
@@ -246,8 +246,29 @@
 .msg--loading{display:flex;align-items:center;padding:12px 14px;color:#9ca3af;min-height:38px;}
 .msg--streaming{opacity:.82;position:relative;}
 .msg--streaming::after{content:'';display:inline-block;width:2px;height:1em;background:currentColor;opacity:.5;margin-left:2px;vertical-align:text-bottom;animation:cursor-blink .9s step-end infinite;}
+.msg--building::after{display:none;}
 @keyframes cursor-blink{0%,100%{opacity:.5;}50%{opacity:0;}}
 
+/* Artifact-building placeholder — shown while the agent streams an HTML page
+   that will render on the canvas (the raw markup is hidden from chat). */
+.artifact-building{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:12px;border:1px solid rgba(17,19,24,.08);background:linear-gradient(100deg,rgba(255,255,255,.6),rgba(247,248,250,.9));font-size:12.5px;color:#4a5059;}
+.artifact-building-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%);}
+.artifact-building-label{font-weight:600;letter-spacing:.01em;}
+.artifact-building-dots{display:inline-block;}
+.artifact-building-dots i{font-style:normal;opacity:.3;animation:artifact-dot 1.2s ease-in-out infinite;}
+.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 */
 .confirm-label{font-size:11.5px;font-weight:600;color:#111318;letter-spacing:-.01em;margin-right:2px;}
 .confirm-cancel,.confirm-delete{font-size:11px;font-weight:650;padding:3px 11px;border-radius:8px;border:0;cursor:pointer;transition:background .15s,transform .1s;}
@@ -259,9 +280,9 @@
 
 /* Fullscreen overlay — canvas-bound, rail + chat stay visible */
 .artifact-fs{position:absolute;inset:0;z-index:9100;display:flex;flex-direction:column;background:#f8f7f5;backdrop-filter:blur(24px);overflow:hidden;transform-origin:center center;will-change:transform,opacity,border-radius;transition:transform 260ms cubic-bezier(.22,.8,.24,1),opacity 220ms ease,border-radius 260ms cubic-bezier(.22,.8,.24,1),box-shadow 260ms ease;}
-.artifact-fs[data-phase="enter"]{transform:scale(.88) translateY(8px);opacity:0;border-radius:22px;box-shadow:0 30px 90px rgba(17,19,24,.18);}
-.artifact-fs[data-phase="open"]{transform:scale(1) translateY(0);opacity:1;border-radius:0;box-shadow:0 0 0 rgba(17,19,24,0);}
-.artifact-fs[data-phase="exit"]{transform:scale(.88) translateY(8px);opacity:0;border-radius:22px;box-shadow:0 30px 90px rgba(17,19,24,.16);pointer-events:none;}
+.artifact-fs[data-phase="enter"]{transform:scale(.88) translateY(8px);opacity:0;border-radius:var(--artifact-radius);box-shadow:0 30px 90px rgba(17,19,24,.18);}
+.artifact-fs[data-phase="open"]{transform:scale(1) translateY(0);opacity:1;border-radius:var(--artifact-radius);box-shadow:0 0 0 rgba(17,19,24,0);}
+.artifact-fs[data-phase="exit"]{transform:scale(.88) translateY(8px);opacity:0;border-radius:var(--artifact-radius);box-shadow:0 30px 90px rgba(17,19,24,.16);pointer-events:none;}
 .artifact-fs--docked{bottom:0;}
 .artifact-fs-bar{flex:0 0 auto;background:rgba(246,247,248,.96);border-bottom:1px solid var(--line);position:relative;z-index:1;}
 .artifact-fs-content{flex:1;overflow:hidden;position:relative;background:#f8f7f5;}
@@ -270,7 +291,12 @@
 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:0;}
+  .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 */
@@ -430,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;}
@@ -440,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;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);}
 
@@ -985,6 +1022,7 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .connection-setup-field-help a:hover{text-decoration:underline;}
 .connection-setup-error{margin:0;padding:10px 12px;background:#ffe3df;color:#9a3325;border-radius:10px;font-size:12.5px;line-height:1.55;}
 .connection-setup-error small{display:block;margin-top:4px;font-size:11.5px;color:#7a3a30;}
+.connection-setup-disabled-hint{margin:0;font-size:12px;line-height:1.5;color:#80611b;}
 .connection-setup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;}
 .connection-setup-step-verify{align-items:center;padding:18px 0;color:#68707b;font-size:13px;}
 .connection-setup-done-head{display:flex;align-items:center;gap:10px;}
@@ -993,7 +1031,7 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .connection-setup-summary span+span{margin-left:4px;}
 .connection-setup-unlocked{margin:0;font-size:12.5px;color:#2d7044;}
 .connection-setup-deeplink{margin:0;}
-.connection-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;background:#eef2f6;color:#59616d;}
+.connection-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;background:#eef2f6;color:#59616d;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .connection-status.connected{background:#e8f6ee;color:#2d7044;}
 .connection-status.error{background:#ffe3df;color:#9a3325;}
 .connection-status.pending{background:#fff4d8;color:#80611b;}
@@ -1602,6 +1640,22 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 /* CLI subprocess steps render as a compact icon-only pill — the model name is irrelevant to the user */
 .tool-step--cli{padding:6px 9px;border-radius:999px;}
 .tool-step--cli .tool-step-icon{color:#3a4150;}
+/* Verbose tool detail: output preview + elapsed duration */
+.tool-step-preview{font-size:10.5px;color:#8a9099;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;opacity:.85;}
+.tool-step-dur{margin-left:auto;font-size:10px;font-family:ui-monospace,monospace;color:#9ca3af;font-weight:600;letter-spacing:.02em;flex-shrink:0;padding-left:6px;}
+
+/* ── Live reasoning (extended thinking) disclosure ── */
+.thinking-disclosure{display:flex;flex-direction:column;gap:0;margin:2px 0;width:fit-content;max-width:100%;}
+.thinking-toggle{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;border:1px solid rgba(17,19,24,.07);background:rgba(255,255,255,.62);color:#68707b;font:inherit;font-size:11.5px;cursor:pointer;width:fit-content;max-width:100%;transition:background .14s,border-color .14s;}
+.thinking-toggle:hover:not(:disabled){background:rgba(255,255,255,.85);border-color:rgba(17,19,24,.12);}
+.thinking-toggle:disabled{cursor:default;}
+.thinking-dot{width:7px;height:7px;border-radius:50%;background:#b0b6bf;flex-shrink:0;}
+.thinking-dot.pulsing{background:var(--accent-500,#c2452a);animation:livepulse 1.1s ease-in-out infinite;}
+.thinking-label{font-weight:650;color:#4a5059;letter-spacing:.01em;}
+.thinking-elapsed{font-size:10px;font-family:ui-monospace,monospace;color:#9ca3af;font-weight:600;background:rgba(17,19,24,.05);border-radius:6px;padding:1px 6px;}
+.thinking-caret{color:#9ca3af;transition:transform .16s;flex-shrink:0;}
+.thinking-caret.open{transform:rotate(180deg);}
+.thinking-body{margin:6px 2px 2px;padding:10px 12px;border-left:2px solid rgba(17,19,24,.10);background:rgba(17,19,24,.025);border-radius:0 8px 8px 0;font-size:12px;line-height:1.55;color:#6a7079;font-style:italic;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;max-width:640px;}
 
 /* ── Runtime popover — compact stats ── */
 .runtime-compact-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
@@ -1873,7 +1927,8 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .mkt-page .mkt-card.kind-workflow::before{background:var(--mkt-workflow-ink);}
 .mkt-page .mkt-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(17,19,24,.10),0 2px 4px rgba(17,19,24,.04);border-color:rgba(17,19,24,.12);}
 .mkt-page .mkt-card.on{background:linear-gradient(180deg,#fff 0%,#fbfaf7 100%);border-color:rgba(194,69,42,.22);box-shadow:0 6px 18px rgba(194,69,42,.08);}
-.mkt-page .mkt-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
+.mkt-page .mkt-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
+.mkt-page .mkt-card-head > *{min-width:0;}
 .mkt-page .mkt-card-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}
 .mkt-page .mkt-card-title{margin:0;font:500 15px/1.2 'IBM Plex Mono','SF Mono',ui-monospace,monospace;color:var(--mkt-installed);letter-spacing:-.01em;word-break:break-word;}
 .mkt-page .mkt-card-desc{margin:0;color:#69707b;font-size:13px;line-height:1.55;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@@ -3643,6 +3698,115 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
   0%, 100% { opacity: 1; }
   50% { opacity: .4; }
 }
+/* ── Background-agent activity: clickable pill + detail popover ── */
+.app-topbar-activity-wrap { position: relative; display: inline-flex; }
+.app-topbar-activity {
+  border: 1px solid rgba(20,22,26,.10);
+  cursor: pointer;
+  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
+}
+.app-topbar-activity:hover { background: rgba(17,19,24,.07); border-color: rgba(20,22,26,.20); }
+.app-topbar-activity[aria-expanded="true"] { background: rgba(17,19,24,.08); border-color: rgba(20,22,26,.22); }
+.app-topbar-activity.is-running { border-color: rgba(194,69,42,.28); }
+.app-topbar-activity.is-running:hover { background: var(--accent-100, #fbe6e0); }
+.app-topbar-activity-glyph { flex: 0 0 auto; color: #8a9099; }
+.app-topbar-activity.is-running .app-topbar-activity-glyph { color: var(--accent-600, #a5371f); }
+/* Static dot only adds noise at idle — keep it for the running pulse only. */
+.app-topbar-activity:not(.is-running) .app-topbar-dot { display: none; }
+/* Empty state inside the popover */
+.bg-activity-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  text-align: center;
+  padding: 20px 14px 16px;
+  color: #69707a;
+}
+.bg-activity-empty > svg { color: #b4bac1; margin-bottom: 2px; }
+.bg-activity-empty span { font-size: 12px; font-weight: 600; color: #4a5059; }
+.bg-activity-empty small { font-size: 10.5px; color: #9ca3af; }
+.app-topbar-activity-label {
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bg-activity-pop {
+  /* Portaled to <body> so it escapes the topbar's backdrop-filter stacking
+     context and paints above canvas artifacts (.artifact-fs is z-index 9100).
+     top/right are set inline from the trigger's viewport rect. Stays below the
+     search (12000) and help (12100) overlays. */
+  position: fixed;
+  z-index: 9300;
+  width: 320px;
+  max-height: min(70vh, 460px);
+  overflow-y: auto;
+  padding: 10px;
+  border-radius: 14px;
+  background: var(--glass, rgba(255,255,255,.92));
+  border: 1px solid rgba(255,255,255,.85);
+  box-shadow: 0 16px 44px rgba(17,19,24,.18), inset 0 1px 0 rgba(255,255,255,.6);
+  backdrop-filter: saturate(160%) blur(16px);
+  -webkit-backdrop-filter: saturate(160%) blur(16px);
+  animation: bgActivityIn .14s ease;
+}
+@keyframes bgActivityIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.bg-activity-head { display: flex; flex-direction: column; gap: 1px; padding: 2px 4px 8px; }
+.bg-activity-head b { font-size: 12px; font-weight: 700; color: #1c1f25; }
+.bg-activity-head small { font-size: 10.5px; color: #8a9099; font-weight: 500; }
+.bg-activity-list { display: flex; flex-direction: column; gap: 6px; }
+.bg-activity-agent {
+  padding: 8px;
+  border-radius: 11px;
+  border: 1px solid rgba(17,19,24,.07);
+  background: rgba(255,255,255,.6);
+}
+.bg-activity-agent--running { border-color: rgba(194,69,42,.22); background: var(--accent-50, #fdf2ef); }
+.bg-activity-agent--failed { border-color: rgba(194,69,42,.28); }
+.bg-activity-agent-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
+.bg-activity-agent-icon { display: inline-flex; flex: 0 0 auto; color: #68707b; }
+.bg-activity-agent--running .bg-activity-agent-icon { color: var(--accent-600, #a5371f); }
+.bg-activity-agent--complete .bg-activity-agent-icon { color: #2e7d52; }
+.bg-activity-agent--failed .bg-activity-agent-icon { color: #c2452a; }
+.bg-activity-agent-name {
+  font-size: 12px; font-weight: 600; color: #1c1f25;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+}
+.bg-activity-agent-by { font-size: 10px; color: #9ca3af; font-weight: 500; flex: 0 0 auto; }
+.bg-activity-agent-status {
+  margin-left: auto; flex: 0 0 auto;
+  font-size: 10px; font-weight: 600; color: #69707a;
+  font-family: ui-monospace, 'IBM Plex Mono', monospace;
+}
+.bg-activity-agent--running .bg-activity-agent-status { color: var(--accent-700, #7c2b19); }
+.bg-activity-steps { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; padding-left: 2px; }
+.bg-activity-step { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.bg-activity-step-icon { display: inline-flex; flex: 0 0 auto; color: #a2a8b0; }
+.bg-activity-step--done .bg-activity-step-icon { color: #2e7d52; }
+.bg-activity-step--error .bg-activity-step-icon { color: #c2452a; }
+.bg-activity-step--running .bg-activity-step-icon { color: var(--accent-500, #c2452a); }
+.bg-activity-step-name {
+  font-family: ui-monospace, 'IBM Plex Mono', monospace;
+  font-size: 10.5px; color: #4a5059; flex: 0 0 auto; white-space: nowrap;
+}
+.bg-activity-step--done .bg-activity-step-name { color: #6b7280; }
+.bg-activity-step-sub {
+  font-size: 10.5px; color: #8a9099;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+}
+.bg-activity-foot {
+  display: block; margin-top: 9px; padding: 6px 4px 2px;
+  font-size: 11px; font-weight: 600; color: var(--accent-600, #a5371f);
+  text-decoration: none;
+}
+.bg-activity-foot:hover { text-decoration: underline; }
+@media (max-width: 980px) {
+  .bg-activity-pop { width: min(320px, calc(100vw - 28px)); }
+}
 .app-topbar-search {
   display: inline-flex;
   align-items: center;
@@ -5305,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/login/login-client.jsx

@@ -59,11 +59,24 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
     return () => { alive = false; };
   }, [authMode]);
 
-  const supabaseConfigured = Boolean(cfg?.supabaseUrl && cfg?.supabaseAnonKey);
-  // Show the sign-in form when the server runs in supabase mode, the user asked
-  // for it (?supabase=1), or Supabase has been configured (incl. just now via
-  // the inline Create-a-team form).
-  const showSignIn = !isLocalServer || forceSupabase || supabaseConfigured;
+  // Until the runtime config fetch lands, optimistically treat a supabase-mode
+  // server as configured (the common case) so a healthy server doesn't flash the
+  // setup form. Once cfg loads it is the source of truth.
+  const supabaseConfigured = cfg
+    ? Boolean(cfg.supabaseUrl && cfg.supabaseAnonKey)
+    : !isLocalServer;
+  // The server's resolved auth mode (cfg wins once loaded; prop is the SSR seed).
+  const effectiveAuthMode = cfg?.authMode || authMode;
+  // Team mode is ON but Supabase has no resolvable credentials — a dead-end the
+  // operator must be able to fix from the UI (see renderTeam banner + form).
+  const supabaseMisconfigured = Boolean(cfg && effectiveAuthMode === 'supabase' && !supabaseConfigured);
+  // Show the sign-in form ONLY when Supabase creds actually resolve. In supabase
+  // mode WITHOUT creds we deliberately fall through to the Create-team config
+  // form (renderCreateTeam) instead of a sign-in box that can never succeed —
+  // otherwise the operator is stranded with no UI path to enter credentials.
+  // forceSupabase (?supabase=1) still needs real creds to sign in, so it no
+  // longer forces the form open.
+  const showSignIn = supabaseConfigured;
 
   async function resetToLocal() {
     if (!recoveryToken.trim()) { setMessage('Enter the recovery token to switch.'); return; }
@@ -299,6 +312,11 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
     return (
       <>
         <div className="login-card-head"><p>Secure access</p><h2>{showSignIn ? 'Sign in to your team' : 'Set up your team'}</h2></div>
+        {supabaseMisconfigured ? (
+          <div className="login-message login-message--warn">
+            Team mode is on, but Supabase isn’t configured on this server yet. Enter your project details below to finish setup — or switch to <b>Personal</b> to use this device locally.
+          </div>
+        ) : null}
         {message ? <div className="login-message">{message}</div> : null}
         {showSignIn ? renderSignIn() : renderCreateTeam()}
 

package/app/marketplace/connection-setup-modal.jsx

@@ -25,6 +25,7 @@ function StatusPill({ status }) {
 
 function labelForWarningField(field) {
   if (field === 'SUPABASE_ACCESS_TOKEN') return 'Personal access token';
+  if (field === 'GITHUB_TOKEN') return 'Token';
   return field || 'Optional field';
 }
 function labelForWarningReason(reason) {
@@ -34,6 +35,16 @@ function labelForWarningReason(reason) {
   return reason || 'unknown';
 }
 
+// Some warnings mean "saved fine, but heads-up" rather than "could not verify".
+// Return a complete sentence for those; null falls back to the generic copy.
+function warningMessage(warning) {
+  if (!warning) return null;
+  if (warning.reason === 'owner_only_access') {
+    return 'Connected, but this token can only see your own repos. To read org or shared repos, grant the token access to them (and authorize SAML SSO if the org requires it), then rotate the key.';
+  }
+  return null;
+}
+
 export default function ConnectionSetupModal({ open, onClose, connection, prefillScope }) {
   const router = useRouter();
   const [stage, setStage] = React.useState(STAGES.BENEFIT);
@@ -256,7 +267,9 @@ export default function ConnectionSetupModal({ open, onClose, connection, prefil
             )}
             {warning ? (
               <p className="connection-setup-warning">
-                <b>Warning:</b> {labelForWarningField(warning.field)} could not be verified ({labelForWarningReason(warning.reason)}). Other credentials were saved.
+                <b>Heads up:</b>{' '}
+                {warningMessage(warning)
+                  || `${labelForWarningField(warning.field)} could not be verified (${labelForWarningReason(warning.reason)}). Other credentials were saved.`}
               </p>
             ) : null}
             {unlocks.length ? (
@@ -278,6 +291,23 @@ export default function ConnectionSetupModal({ open, onClose, connection, prefil
               >
                 Disconnect
               </button>
+              <button
+                type="button"
+                className="admin-button secondary"
+                onClick={() => {
+                  // Rotate: clear any previous input and return to the setup
+                  // form. Re-submitting a new key rotates the active secret at
+                  // the same scope via the existing verify path.
+                  setCredentials({});
+                  setError(null);
+                  setHint(null);
+                  setWarning(null);
+                  setStage(STAGES.SETUP);
+                }}
+                disabled={busy}
+              >
+                Rotate key
+              </button>
               <button
                 type="button"
                 className="admin-button"

package/app/marketplace/connection-setup-steps/api-key-step.jsx

@@ -51,14 +51,25 @@ export default function ApiKeyStep({
     onChange({ ...credentials, [name]: value });
   }
 
-  const allRequiredPresent = fields
-    .filter(f => f.required)
-    .every(f => String(credentials[f.name] || '').trim().length > 0);
+  const missingRequired = fields
+    .filter(f => f.required && String(credentials[f.name] || '').trim().length === 0)
+    .map(f => f.label || f.name);
+  const allRequiredPresent = missingRequired.length === 0;
 
   const scopeReady = scope.scope === 'global'
     || (scope.scope === 'project' && Boolean(scope.project_id))
     || (scope.scope === 'agent' && Boolean(scope.agent_id));
 
+  // Explain why Connect is disabled so users don't get stuck (e.g. Resend
+  // needs both the API key AND the From email — missing either blocks submit).
+  const disabledReason = busy
+    ? null
+    : !allRequiredPresent
+      ? `Enter ${missingRequired.join(' and ')} to continue.`
+      : !scopeReady
+        ? 'Choose where to store this connection to continue.'
+        : null;
+
   return (
     <form className="connection-setup-step connection-setup-step-form" onSubmit={handleSubmit}>
       <p className="connection-setup-intro">
@@ -88,6 +99,7 @@ export default function ApiKeyStep({
             value={credentials[field.name] || ''}
             onChange={e => setField(field.name, e.target.value)}
             disabled={busy}
+            aria-required={field.required ? 'true' : undefined}
           />
           {field.help_text || field.help_url ? (
             <small className="connection-setup-field-help">
@@ -110,6 +122,10 @@ export default function ApiKeyStep({
         </p>
       ) : null}
 
+      {disabledReason ? (
+        <p className="connection-setup-disabled-hint" role="status">{disabledReason}</p>
+      ) : null}
+
       <div className="connection-setup-actions">
         <button
           type="button"
@@ -123,6 +139,7 @@ export default function ApiKeyStep({
           type="submit"
           className="admin-button"
           disabled={busy || !allRequiredPresent || !scopeReady}
+          title={disabledReason || undefined}
         >
           {busy ? 'Verifying…' : 'Connect'}
         </button>

package/app/marketplace/install-toast.jsx

@@ -5,7 +5,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 // Maps the post-action query state to banner copy. Keep the slug interpolation
 // generic — `name` is whatever the server action echoes back via ?slug=.
-function describe(state, name) {
+export function describe(state, name) {
   const label = name ? `"${name}"` : 'item';
   if (state === 'installed') {
     return {

package/app/marketplace/marketplace-row.jsx

@@ -25,7 +25,12 @@ import WorkflowCard from './workflow-card.jsx';
  *   currentKind?: string,
  * }} props
  */
-export default function MarketplaceRow({ item, toggleAction, onBundleClick, onConnectionClick, connectionStatus, connectionPrefill, currentKind }) {
+export default function MarketplaceRow({ item, toggleAction, installItem, onBundleClick, onConnectionClick, connectionStatus, connectionPrefill, currentKind }) {
+  // Client-mode toggle handler: flips install state in place via the shell's
+  // installItem (fetch → PUT /api/marketplace/[id]), avoiding a full-page reload.
+  const onToggle = typeof installItem === 'function'
+    ? (nextInstalled) => installItem(item, nextInstalled)
+    : undefined;
   const isTool = item.kind === 'tool';
   const isSkill = item.kind === 'skill';
   const isBundle = item.kind === 'bundle';
@@ -51,6 +56,7 @@ export default function MarketplaceRow({ item, toggleAction, onBundleClick, onCo
       <WorkflowCard
         item={item}
         toggleAction={toggleAction}
+        onToggle={onToggle}
         currentKind={currentKind}
       />
     );
@@ -123,6 +129,7 @@ export default function MarketplaceRow({ item, toggleAction, onBundleClick, onCo
         ) : (
           <InstallToggle
             action={toggleAction}
+            onToggle={onToggle}
             itemId={item.id}
             installed={installed}
             available={available}