@floless/app 0.6.3 → 0.7.1

package/dist/web/app.css

@@ -2065,6 +2065,42 @@ body {
 }
 .report-overlay .overlay-stop:disabled { opacity: 0.6; cursor: default; }
 
+/* Credential-failure reconnect card — shown in .report-overlay when a run hits a
+   rejected OAuth token. Amber-topped (recoverable, needs attention); the Reconnect
+   action keeps primary-blue (the one critical next step), Open Integrations is ghost. */
+.cred-fail-card {
+  background: var(--surface); border: 1px solid var(--border-strong); border-top: 3px solid var(--warn);
+  border-radius: 8px; padding: 22px 24px; max-width: 380px; width: 100%;
+  display: flex; flex-direction: column; gap: 14px; text-align: left;
+}
+.cred-fail-status {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-dim);
+}
+.cred-fail-icon { color: var(--warn); font-size: 16px; line-height: 1; }
+.cred-fail-headline { font-size: 15px; font-weight: 600; color: var(--text); }
+.cred-fail-body { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
+.cred-fail-err { font-size: 12px; color: var(--err); }
+.cred-fail-ok { font-size: 13px; color: var(--ok); font-weight: 600; }
+.cred-fail-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
+.cred-fail-actions button { font-family: var(--ui); font-size: 13px; line-height: 1.2; border-radius: 4px; cursor: pointer; }
+.cred-fail-actions .cred-reconnect {
+  padding: 7px 16px; background: var(--accent); color: white; border: 1px solid var(--accent); font-weight: 600;
+}
+.cred-fail-actions .cred-reconnect:hover:not(:disabled) {
+  background: var(--accent-bright); box-shadow: 0 0 14px var(--accent-glow);
+}
+.cred-fail-actions .cred-reconnect:disabled { opacity: 0.7; cursor: default; }
+.cred-fail-actions .cred-open-integrations {
+  padding: 7px 12px; background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted);
+}
+.cred-fail-actions .cred-open-integrations:hover { color: var(--text); border-color: var(--accent-dim); }
+.cred-reconnect-spinner {
+  display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px;
+  border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
 /* Report + input nodes on the canvas carry a first-class action button
    ("View report ▸" / "Set inputs ▸"). Double-click still works as a shortcut. */
 .agent-card.report-node,

package/dist/web/aware.js

@@ -106,7 +106,11 @@
       ...opts,
     });
     const body = await res.json().catch(() => ({ ok: false, error: `HTTP ${res.status}` }));
-    if (!res.ok || body.ok === false) throw new Error(body.error || `HTTP ${res.status}`);
+    if (!res.ok || body.ok === false) {
+      const err = new Error(body.error || `HTTP ${res.status}`);
+      err.body = body; // preserve the in-band payload (e.g. credentialIssue) for callers
+      throw err;
+    }
     return body;
   }
 
@@ -651,7 +655,12 @@
   function reportNodeId() {
     const app = currentId && apps.get(currentId);
     if (!app || !app.nodes.length) return null;
-    // Qualify the app only if some node actually PRODUCES report HTML — its exec
+    // An html-report agent node renders report HTML — its `render` command returns
+    // an `html` field, which is exactly what extractReportHtml keys on. So it's a
+    // report producer regardless of exec code; prefer it directly as the viewer node.
+    const htmlReportNode = app.nodes.find((n) => n.agent === 'html-report');
+    if (htmlReportNode) return htmlReportNode.id;
+    // Otherwise, qualify the app only if some node actually PRODUCES report HTML — its exec
     // code returns an `html` field (the `data.result.html` extractReportHtml keys
     // on), or it forwards `{{ <node>.result.html }}` through its args (a
     // pass-through viewer). "any node has exec code" is NOT enough: a plain
@@ -954,6 +963,9 @@
         : await api('/api/run', { method: 'POST', body: JSON.stringify({ id: currentId, simulate: false, inputs }) });
       // Reflect the run in the Execution tab too.
       if (Array.isArray(res.events)) { liveTrace.length = 0; res.events.forEach(pushTrace); state.hasRun = true; if (state.currentTab === 'execution') renderInspect(); }
+      // A run can "succeed" yet carry a rejected token (the report would be an error
+      // body, not real data) — prompt reconnect instead of rendering the noise.
+      if (res.credentialIssue) { surfaceCredentialIssue(res.credentialIssue); return; }
       const html = res.report && res.report.html;
       if (!html) {
         $reportOverlay.innerHTML = `<div>Run completed but <code>${escapeHtml(nodeId)}</code> returned no <code>html</code>. Check the Execution tab.</div>`;
@@ -972,17 +984,115 @@
         $reportOverlay.innerHTML = `<div>Run cancelled. A node already running on the host may still finish there; click <strong>▶ Run workflow</strong> to run again.</div>`;
         showToast('Run cancelled', 'info');
       } else {
-        // Expected, recoverable failure (host not attached, stale lock, …): show it
-        // in the viewer overlay + a toast. No console.error — the server returns the
-        // failure in-band, so a failed run isn't a console-worthy fault.
-        $reportOverlay.innerHTML = `<div>Run failed: ${escapeHtml(msg)}. Check the host is attached and the lock is fresh.</div>`;
-        showToast('Run failed: ' + msg, 'warn');
+        // Expected, recoverable failure. If it was a rejected token, prompt the
+        // user to reconnect that integration (not the misleading host hint).
+        const cred = e.body && e.body.credentialIssue;
+        if (cred) {
+          surfaceCredentialIssue(cred);
+        } else {
+          // Other recoverable failures (host not attached, stale lock, …): show it
+          // in the viewer overlay + a toast. No console.error — the server returns the
+          // failure in-band, so a failed run isn't a console-worthy fault.
+          $reportOverlay.innerHTML = `<div>Run failed: ${escapeHtml(msg)}. Check the host is attached and the lock is fresh.</div>`;
+          showToast('Run failed: ' + msg, 'warn');
+        }
       }
     } finally {
       reportRunning = false;
     }
   }
 
+  // ── Credential-reconnect card ──────────────────────────────────────────────
+  // When a real run fails (or "succeeds" with a 401 body) because an integration's
+  // OAuth token was rejected, the server returns `credentialIssue: {id,label}`. We
+  // replace the misleading "check the host" message with a focused prompt to
+  // reconnect that integration — generic across Trimble, M365, any OAuth provider.
+  // Built with DOM nodes + textContent (no innerHTML) so the integration label can
+  // never inject markup.
+  let credReconnect = null; // { id, onSuccess, onFail } — latched while a card reconnect runs
+
+  function mkEl(tag, cls, text) {
+    const n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (text != null) n.textContent = text;
+    return n;
+  }
+
+  const CRED_BODY_IDLE = 'Sign in again and then run the workflow — it takes about 30 seconds.';
+
+  function showCredentialReconnect(cred) {
+    $reportFrame.srcdoc = '';
+    $reportOverlay.hidden = false;
+    $reportOverlay.replaceChildren();
+
+    const card = mkEl('div', 'cred-fail-card');
+    card.setAttribute('role', 'status');
+
+    const status = mkEl('div', 'cred-fail-status');
+    const icon = mkEl('span', 'cred-fail-icon', iconFor(cred.id));
+    icon.setAttribute('aria-hidden', 'true');
+    status.append(icon, document.createTextNode('SESSION EXPIRED'));
+
+    const headline = mkEl('div', 'cred-fail-headline', `Your ${cred.label} session expired`);
+    const body = mkEl('div', 'cred-fail-body', CRED_BODY_IDLE);
+
+    const actions = mkEl('div', 'cred-fail-actions');
+    const reconnect = mkEl('button', 'primary cred-reconnect', 'Reconnect');
+    reconnect.type = 'button';
+    const openInt = mkEl('button', 'cred-open-integrations', 'Open Integrations');
+    openInt.type = 'button';
+    actions.append(reconnect, openInt);
+
+    card.append(status, headline, body, actions);
+    $reportOverlay.append(card);
+    showModal($reportModal);
+
+    openInt.onclick = () => { hideModal($reportModal); openIntegrations(); };
+    reconnect.onclick = () => credReconnectStart(cred, card, reconnect, body);
+    reconnect.focus();
+  }
+
+  function credReconnectStart(cred, card, btn, body) {
+    const reset = (errMsg) => {
+      credReconnect = null;
+      btn.disabled = false; btn.textContent = 'Reconnect';
+      body.textContent = CRED_BODY_IDLE;
+      let e = card.querySelector('.cred-fail-err');
+      if (!e) { e = mkEl('div', 'cred-fail-err'); body.after(e); }
+      e.textContent = errMsg;
+    };
+    const oldErr = card.querySelector('.cred-fail-err'); if (oldErr) oldErr.remove();
+    btn.disabled = true;
+    btn.textContent = '';
+    const sp = mkEl('span', 'cred-reconnect-spinner'); sp.setAttribute('aria-hidden', 'true');
+    btn.append(sp, document.createTextNode('Signing in…'));
+    body.textContent = 'Opening your browser to sign in — complete it there and this will update.';
+
+    credReconnect = {
+      id: cred.id,
+      onSuccess: () => {
+        credReconnect = null;
+        const actions = card.querySelector('.cred-fail-actions'); if (actions) actions.remove();
+        body.replaceChildren(mkEl('span', 'cred-fail-ok', 'Connected — click ▶ Run workflow to continue.'));
+        setTimeout(() => {
+          if ($reportOverlay.querySelector('.cred-fail-card')) { $reportOverlay.hidden = true; $reportOverlay.replaceChildren(); }
+        }, 2000);
+      },
+      onFail: () => reset('Sign-in failed — try again, or use the device code flow in Integrations.'),
+    };
+    api(`/api/connect/${encodeURIComponent(cred.id)}`, { method: 'POST', body: '{}' })
+      .then((res) => { if (res && res.started === false) reset('Couldn’t start sign-in — open Integrations to retry.'); })
+      .catch(() => reset('Sign-in failed — try again, or use the device code flow in Integrations.'));
+  }
+
+  // Shared by both run paths: when the server flags a credential issue, show the
+  // reconnect card + a quiet toast/narration instead of the generic failure copy.
+  function surfaceCredentialIssue(cred) {
+    showCredentialReconnect(cred);
+    showToast(`Session expired — reconnect ${cred.label} to continue.`, 'warn');
+    appendNarration(`Run stopped — your <strong>${escapeHtml(cred.label)}</strong> session expired. Reconnect and run again.`);
+  }
+
   function showModal(el) { el.classList.add('show'); }
   function hideModal(el) { el.classList.remove('show'); }
 
@@ -1617,6 +1727,8 @@
       const res = await api('/api/run', { method: 'POST', body: JSON.stringify({ id: currentId, simulate, inputs: currentInputs() }) });
       // SSE usually fills liveTrace first; backfill from the response if it didn't.
       if (liveTrace.length === 0 && Array.isArray(res.events)) res.events.forEach(pushTrace);
+      // A "succeeded" run carrying a rejected token → prompt reconnect, not a result.
+      if (res.credentialIssue) { surfaceCredentialIssue(res.credentialIssue); return; }
       switchToExecution();
       const steps = liveTrace.filter((r) => r.kind === 'node-start').length;
       appendNarration(simulate
@@ -1629,12 +1741,18 @@
         showToast('Run cancelled', 'info');
         appendNarration('Run cancelled. Click <strong>▶ Run workflow</strong> to run again.');
       } else {
-        // A failed run is an expected, recoverable outcome (the server returns it
-        // in-band) — surface it as a toast + narration, not a console error.
-        showToast((simulate ? 'Simulate failed' : 'Run failed') + ': ' + msg, 'warn');
-        appendNarration(simulate
-          ? `Simulate couldn't validate <code>${escapeHtml(currentId)}</code> — it stubs each node from its output-schema, but exec nodes have none, so the cross-node templates render undefined. Use <strong>▶ Run workflow</strong> for a live run against the host.`
-          : `Run failed: ${escapeHtml(msg)}. Check the host is attached and the lock is fresh.`);
+        const cred = e.body && e.body.credentialIssue;
+        if (cred) {
+          // A rejected token — prompt reconnect for that integration, not the host hint.
+          surfaceCredentialIssue(cred);
+        } else {
+          // A failed run is an expected, recoverable outcome (the server returns it
+          // in-band) — surface it as a toast + narration, not a console error.
+          showToast((simulate ? 'Simulate failed' : 'Run failed') + ': ' + msg, 'warn');
+          appendNarration(simulate
+            ? `Simulate couldn't validate <code>${escapeHtml(currentId)}</code> — it stubs each node from its output-schema, but exec nodes have none, so the cross-node templates render undefined. Use <strong>▶ Run workflow</strong> for a live run against the host.`
+            : `Run failed: ${escapeHtml(msg)}. Check the host is attached and the lock is fresh.`);
+        }
       }
     } finally {
       state.running = false;
@@ -2210,6 +2328,12 @@
       } else if (m.type === 'trigger-session-changed') {
         applyTriggerSnapshot(m.id, m.snapshot);
       } else if (m.type === 'connect-result') {
+        // A run's credential-reconnect card may be waiting on this integration —
+        // drive its success/fail state from the same SSE result.
+        if (credReconnect && credReconnect.id === m.id) {
+          if (m.status === 'connected') credReconnect.onSuccess();
+          else credReconnect.onFail(m.error);
+        }
         // The device-code sign-in resolved. On success, refresh so the card flips
         // to Connected; otherwise surface the outcome in the integration's slot.
         connecting.delete(m.id);
@@ -2585,7 +2709,7 @@
           <div class="int-icon">${escapeHtml(VENDOR_ICON[i.vendor] || (i.name[0] || '?'))}</div>
           <div class="int-info">
             <div class="int-name">${escapeHtml(i.name)}</div>
-            <div class="int-kind">${escapeHtml(i.vendor || 'integration')} · agent <code>${escapeHtml(i.agent)}</code></div>
+            <div class="int-kind">${i.agent === 'first-party' ? 'Built-in integration' : `${escapeHtml(i.vendor || 'integration')} · agent <code>${escapeHtml(i.agent)}</code>`}</div>
             <div class="int-scopes">${escapeHtml((i.network || []).join(' · ') || '—')}</div>
             <div class="int-meta">${escapeHtml(meta)}</div>
             <div class="int-row">
@@ -2636,6 +2760,10 @@
     if (slot) slot.innerHTML = 'Starting sign-in…';
     try {
       const res = await api(`/api/connect/${encodeURIComponent(id)}`, { method: 'POST', body });
+      // A managed-preset pre-flight (e.g. port 80 already in use) refuses to start
+      // and broadcasts the reason over SSE (connect-result). Clear the guard so the
+      // user can retry after fixing it, and don't claim the browser opened.
+      if (res && res.started === false) { connecting.delete(id); return; }
       if (slot) {
         if (res.flow === 'device-code' && res.prompt) {
           // Fallback flow: show the device code to enter at the verification URL.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.6.3",
+  "version": "0.7.1",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {