madarx 2.16.3 → 2.18.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;
@@ -137,7 +137,7 @@
 .runtime-approval button.secondary{border:1px solid rgba(17,19,24,.12);background:#fff;color:#111318;}
 .runtime-approval button:disabled{opacity:.45;cursor:not-allowed;}
 .runtime-empty{border:1px dashed rgba(17,19,24,.14);border-radius:12px;padding:14px;text-align:center;font-size:12px;color:#68707b;background:#fafbfc;}
-.fresh-workspace{position:absolute;inset:56px 14px 70px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr);gap:14px;align-items:stretch;}
+.fresh-workspace{position:absolute;inset:0 14px 70px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr);gap:14px;align-items:stretch;}
 .fresh-hero,.fresh-status{border:1px solid rgba(255,255,255,.80);background:rgba(255,255,255,.72);backdrop-filter:blur(18px);box-shadow:0 22px 64px rgba(37,36,34,.15);border-radius:28px;}
 .fresh-hero{padding:44px;display:flex;flex-direction:column;justify-content:center;min-height:0;}
 .fresh-hero small{letter-spacing:.18em;text-transform:uppercase;color:#8a6d35;font-weight:800;font-size:11px;}
@@ -150,7 +150,7 @@
 .fresh-status div{border:1px solid rgba(20,22,26,.07);background:linear-gradient(180deg,#fff,rgba(247,247,245,.88));border-radius:20px;padding:18px;}
 .fresh-status b{display:block;font-size:48px;letter-spacing:-.06em;}
 .fresh-status span{display:block;text-transform:uppercase;letter-spacing:.14em;color:#6c747f;font-size:11px;font-weight:800;}
-@media(max-width:980px){.fresh-workspace{position:relative;inset:auto;margin:64px 12px 12px;grid-template-columns:1fr}.fresh-hero{padding:28px}.fresh-status{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:980px){.fresh-workspace{position:relative;inset:auto;margin:12px;grid-template-columns:1fr}.fresh-hero{padding:28px}.fresh-status{grid-template-columns:repeat(2,1fr)}}
 
 .fresh-workspace{grid-template-columns:1fr;}
 .fresh-hero.full-width{max-width:none;}
@@ -246,8 +246,21 @@
 .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);}}
+@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 +272,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 +283,7 @@
 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);}
 }
 
 /* macOS-style dock — spaces switcher + minimised artifact cards */
@@ -366,7 +379,7 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 .dock-item-menu-divider{height:1px;background:rgba(17,19,24,.08);margin:4px 4px;}
 
 /* === Building card — shown while agent creates the first artifact === */
-.building-card-wrap{position:absolute;inset:64px 14px 14px;animation:building-enter .38s cubic-bezier(.32,.72,0,1) both;}
+.building-card-wrap{position:absolute;inset:0 14px 14px;animation:building-enter .38s cubic-bezier(.32,.72,0,1) both;}
 @keyframes building-enter{from{opacity:0;transform:translateY(16px) scale(.982)}to{opacity:1;transform:translateY(0) scale(1)}}
 .building-card{width:100%;height:100%;border-radius:22px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.88);box-shadow:0 22px 64px rgba(32,34,38,.20);overflow:hidden;display:flex;flex-direction:column;position:relative;}
 .building-card::before{content:'';position:absolute;inset:0;background:linear-gradient(108deg,transparent 34%,rgba(255,255,255,.52) 50%,transparent 66%);animation:card-sweep 2.6s ease-in-out infinite;pointer-events:none;z-index:10;}
@@ -427,7 +440,7 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 .artifact-kind-badge.markdown{background:#f0fdf4;color:#166534;}
 
 /* Canvas board — free-positioning surface for artifact windows (macOS-style) */
-.canvas-board{position:absolute;inset:56px 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{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 */
@@ -442,7 +455,7 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 .artifact-window-wrap[data-dragging="true"],.artifact-window-wrap[data-resizing="true"]{transition:none;}
 @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);}
 .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 +998,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 +1007,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 +1616,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 +1903,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;}
@@ -3564,6 +3595,7 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .app-shell {
   display: grid;
   grid-template-columns: 64px 1fr;
+  grid-template-rows: auto 1fr; /* row 1: persistent top toolbar (spans), row 2: rail + content */
   gap: 10px;
   padding: 10px;
   height: 100vh;
@@ -3571,6 +3603,217 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
   background: #f4f3f0;
   overflow: hidden;
 }
+/* Persistent macOS-style top toolbar. Lives in the root layout via AppChrome so
+   it stays mounted on every non-chromeless page. */
+.app-topbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 38px;
+  padding: 0 14px;
+  border-radius: 13px;
+  background: var(--glass, rgba(255,255,255,.78));
+  border: 1px solid rgba(255,255,255,.8);
+  box-shadow: 0 8px 24px rgba(17,19,24,.08), inset 0 1px 0 rgba(255,255,255,.6);
+  backdrop-filter: saturate(160%) blur(14px);
+  -webkit-backdrop-filter: saturate(160%) blur(14px);
+  font-size: 12px;
+  color: #4a5059;
+  user-select: none;
+}
+.app-topbar-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
+.app-topbar-brand {
+  font-family: var(--font-mono-brand, 'IBM Plex Mono', monospace);
+  font-weight: 500;
+  font-size: 13px;
+  letter-spacing: -.02em;
+  color: #111318;
+}
+.app-topbar-brand b { color: var(--accent-500); font-weight: 500; }
+.app-topbar-sep { width: 1px; height: 16px; background: var(--line, rgba(20,22,26,.12)); }
+.app-topbar-section {
+  font-weight: 700;
+  letter-spacing: -.01em;
+  color: #1c1f25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.app-topbar-right { display: flex; align-items: center; gap: 10px; }
+/* Page-scoped action slot (dashboard portals its canvas controls here). */
+.app-topbar-slot { display: flex; align-items: center; }
+.app-topbar-slot:empty { display: none; }
+.app-topbar-actions { display: flex; align-items: center; gap: 8px; }
+.app-topbar-actions::after {
+  content: '';
+  width: 1px;
+  height: 18px;
+  background: var(--line, rgba(20,22,26,.12));
+  margin: 0 2px;
+}
+.app-topbar-activity {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #69707a;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: rgba(17,19,24,.04);
+}
+.app-topbar-dot { width: 7px; height: 7px; border-radius: 50%; background: #c2c7cd; flex: 0 0 auto; }
+.app-topbar-activity.is-running { color: var(--accent-700, #7c2b19); background: var(--accent-50, #fdf2ef); }
+.app-topbar-activity.is-running .app-topbar-dot {
+  background: var(--accent-500, #c2452a);
+  box-shadow: 0 0 0 3px rgba(194,69,42,.18);
+  animation: topbarPulse 1.4s ease-in-out infinite;
+}
+@keyframes topbarPulse {
+  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;
+  gap: 7px;
+  height: 26px;
+  padding: 0 9px;
+  border: 1px solid var(--line, rgba(20,22,26,.12));
+  border-radius: 9px;
+  background: #fff;
+  color: #515760;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color .14s ease, box-shadow .14s ease;
+}
+.app-topbar-search:hover { border-color: rgba(20,22,26,.24); box-shadow: 0 2px 8px rgba(17,19,24,.08); }
+.app-topbar-search kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+  font-family: var(--font-mono-brand, ui-monospace, monospace);
+  font-size: 10px;
+  color: #8a9099;
+  background: rgba(17,19,24,.05);
+  border-radius: 5px;
+  padding: 2px 4px;
+}
+@media (max-width: 980px) {
+  .app-topbar-brand, .app-topbar-sep { display: none; }
+  .app-topbar-search span { display: none; }
+}
 .app-rail {
   min-width: 0;
   height: 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; }
@@ -153,8 +166,21 @@ export default function LoginClient({ authMode, nextPath = '/', errorCode = '',
 
   async function supabaseClient() {
     const { createBrowserClient } = await import('@supabase/ssr');
-    const url = cfg?.supabaseUrl;
-    const anonKey = cfg?.supabaseAnonKey;
+    let url = cfg?.supabaseUrl;
+    let anonKey = cfg?.supabaseAnonKey;
+    // cfg is fetched once on mount. If that fetch lost the race (server not yet
+    // able to resolve config, or a transient blip), cfg stays empty and the tab
+    // is stranded until a manual refresh. Refetch on demand before failing.
+    if (!url || !anonKey) {
+      try {
+        const d = await fetch('/api/auth/config', { cache: 'no-store' }).then((r) => r.json());
+        setCfg(d);
+        url = d?.supabaseUrl;
+        anonKey = d?.supabaseAnonKey;
+      } catch {
+        /* fall through to the configured-check below */
+      }
+    }
     if (!url || !anonKey) throw new Error('Supabase is not configured. Create a team or set it in Settings → Account.');
     return createBrowserClient(url, anonKey);
   }
@@ -286,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}