@burdenoff/microfe-vibecontrols 2026.529.5 → 2026.529.6

package/dist/components/sessions/TerminalIframe.js

@@ -1,22 +1,28 @@
 import { useTerminalCapabilityUrl as e } from "../../hooks/useTerminalCapabilityUrl.js";
-import { forwardRef as t } from "react";
-import { Fragment as n, jsx as r } from "react/jsx-runtime";
+import { forwardRef as t, useEffect as n } from "react";
+import { Fragment as r, jsx as i } from "react/jsx-runtime";
 //#region src/components/sessions/TerminalIframe.tsx
-var i = t(function({ sessionId: t, agentId: i, baseTtydUrl: a, title: o, className: s, allow: c, onLoad: l, onError: u, fallback: d }, f) {
-	let { url: p, remint: m } = e(i, t, a);
-	return p ? /* @__PURE__ */ r("iframe", {
-		ref: f,
-		src: p,
-		title: o,
-		className: s,
-		allow: c,
-		onLoad: l,
+var a = t(function({ sessionId: t, agentId: a, baseTtydUrl: o, title: s, className: c, allow: l, onLoad: u, onError: d, fallback: f }, p) {
+	let { url: m, remint: h } = e(a, t, o);
+	return n(() => {
+		function e(e) {
+			let n = e?.data;
+			!n || typeof n != "object" || n.type === "vt-token-request" && (typeof n.sid != "string" || n.sid !== t || h());
+		}
+		return window.addEventListener("message", e), () => window.removeEventListener("message", e);
+	}, [t, h]), m ? /* @__PURE__ */ i("iframe", {
+		ref: p,
+		src: m,
+		title: s,
+		className: c,
+		allow: l,
+		onLoad: u,
 		onError: () => {
-			m(), u?.();
+			h(), d?.();
 		}
-	}) : /* @__PURE__ */ r(n, { children: d ?? null });
+	}) : /* @__PURE__ */ i(r, { children: f ?? null });
 });
 //#endregion
-export { i as TerminalIframe };
+export { a as TerminalIframe };
 
 //# sourceMappingURL=TerminalIframe.js.map

package/dist/components/sessions/TerminalIframe.js.map

@@ -1 +1 @@
-{"version":3,"file":"TerminalIframe.js","names":[],"sources":["../../../src/components/sessions/TerminalIframe.tsx"],"sourcesContent":["/**\n * TerminalIframe — renders the ttyd iframe with an F3-compliant\n * capability token appended as a `#vt=<token>` URL fragment.\n *\n * Each tab in the sessions terminal panel needs its own capability mint\n * (the iframe-token is scoped to `/terminal/<sessionId>`). React hooks\n * can't be called in a `tabs.map(...)` loop, so the iframe rendering is\n * extracted here and the hook runs per component instance.\n *\n * Stale browser tabs and reopened sessions hit a 10-minute cookie TTL\n * inside the agent; `onError` triggers `remint()` which re-fetches a\n * fresh token and re-iframes.\n */\nimport { type ReactNode, forwardRef } from 'react';\n\nimport { useTerminalCapabilityUrl } from '@/hooks/useTerminalCapabilityUrl';\n\nexport interface TerminalIframeProps {\n  /** Session id — used as resourceId for the capability mint. */\n  sessionId: string;\n  /** Agent id owning this session — required for the mint mutation. */\n  agentId: string | null | undefined;\n  /** Bare ttyd tunnel URL from `session.ttydUrl`. Hook strips any legacy ?apiKey=. */\n  baseTtydUrl: string | null | undefined;\n  /** Title for accessibility. */\n  title: string;\n  /** Optional className for the iframe. */\n  className?: string;\n  /** Permissions-Policy allow attribute (clipboard). */\n  allow?: string;\n  /** Called on iframe load. Use to flip connection status to connected. */\n  onLoad?: () => void;\n  /** Called on iframe error. We re-mint internally + bubble the event. */\n  onError?: () => void;\n  /** Slot for fallback content when no URL is available yet. */\n  fallback?: ReactNode;\n}\n\nexport const TerminalIframe = forwardRef<HTMLIFrameElement, TerminalIframeProps>(\n  function TerminalIframe(\n    { sessionId, agentId, baseTtydUrl, title, className, allow, onLoad, onError, fallback },\n    ref\n  ) {\n    const { url, remint } = useTerminalCapabilityUrl(agentId, sessionId, baseTtydUrl);\n\n    if (!url) {\n      return <>{fallback ?? null}</>;\n    }\n\n    return (\n      <iframe\n        ref={ref}\n        src={url}\n        title={title}\n        className={className}\n        allow={allow}\n        onLoad={onLoad}\n        onError={() => {\n          // Re-mint on any iframe error — covers both 401 (cookie expired\n          // mid-session) and network blips.\n          remint();\n          onError?.();\n        }}\n      />\n    );\n  }\n);\n"],"mappings":";;;;AAsCA,IAAa,IAAiB,EAC5B,SACE,EAAE,cAAW,YAAS,gBAAa,UAAO,cAAW,UAAO,WAAQ,YAAS,eAC7E,GACA;CACA,IAAM,EAAE,QAAK,cAAW,EAAyB,GAAS,GAAW,EAAY;AAMjF,QAJK,IAKH,kBAAC,UAAD;EACO;EACL,KAAK;EACE;EACI;EACJ;EACC;EACR,eAAe;AAIb,GADA,GAAQ,EACR,KAAW;;EAEb,CAAA,GAjBK,kBAAA,GAAA,EAAA,UAAG,KAAY,MAAQ,CAAA;EAoBnC"}
+{"version":3,"file":"TerminalIframe.js","names":[],"sources":["../../../src/components/sessions/TerminalIframe.tsx"],"sourcesContent":["/**\n * TerminalIframe — renders the ttyd iframe with an F3-compliant\n * capability token appended as a `#vt=<token>` URL fragment.\n *\n * Each tab in the sessions terminal panel needs its own capability mint\n * (the iframe-token is scoped to `/terminal/<sessionId>`). React hooks\n * can't be called in a `tabs.map(...)` loop, so the iframe rendering is\n * extracted here and the hook runs per component instance.\n *\n * Stale browser tabs and reopened sessions hit a 10-minute cookie TTL\n * inside the agent; `onError` triggers `remint()` which re-fetches a\n * fresh token and re-iframes.\n */\nimport { type ReactNode, forwardRef, useEffect } from 'react';\n\nimport { useTerminalCapabilityUrl } from '@/hooks/useTerminalCapabilityUrl';\n\nexport interface TerminalIframeProps {\n  /** Session id — used as resourceId for the capability mint. */\n  sessionId: string;\n  /** Agent id owning this session — required for the mint mutation. */\n  agentId: string | null | undefined;\n  /** Bare ttyd tunnel URL from `session.ttydUrl`. Hook strips any legacy ?apiKey=. */\n  baseTtydUrl: string | null | undefined;\n  /** Title for accessibility. */\n  title: string;\n  /** Optional className for the iframe. */\n  className?: string;\n  /** Permissions-Policy allow attribute (clipboard). */\n  allow?: string;\n  /** Called on iframe load. Use to flip connection status to connected. */\n  onLoad?: () => void;\n  /** Called on iframe error. We re-mint internally + bubble the event. */\n  onError?: () => void;\n  /** Slot for fallback content when no URL is available yet. */\n  fallback?: ReactNode;\n}\n\nexport const TerminalIframe = forwardRef<HTMLIFrameElement, TerminalIframeProps>(\n  function TerminalIframe(\n    { sessionId, agentId, baseTtydUrl, title, className, allow, onLoad, onError, fallback },\n    ref\n  ) {\n    const { url, remint } = useTerminalCapabilityUrl(agentId, sessionId, baseTtydUrl);\n\n    // F3 cookie-shim postMessage bridge.\n    //\n    // When the agent's bootstrap HTML rejects the iframe-token with\n    // `code: 'expired'` or `code: 'replayed'`, it posts a\n    // `{type: 'vt-token-request', sid}` message to its parent window\n    // (this microfe) asking for a fresh mint. We listen for it and\n    // call `remint()` so `useTerminalCapabilityUrl` issues a new\n    // capability and the iframe src updates with a fresh `#vt=…`.\n    //\n    // This unblocks two real-world cases:\n    //   1. React Strict Mode double-renders the iframe in dev, so the\n    //      first token's JTI gets consumed before the visible iframe\n    //      navigates — second navigation hits `replayed`.\n    //   2. Operator leaves the tab idle past the 60s mint TTL — next\n    //      navigation hits `expired`.\n    // Without the bridge the bootstrap dead-ends on \"Terminal\n    // authentication failed\" until the operator manually reloads.\n    useEffect(() => {\n      function onMsg(ev: MessageEvent) {\n        const data = ev?.data;\n        if (!data || typeof data !== 'object') return;\n        if (data.type !== 'vt-token-request') return;\n        if (typeof data.sid !== 'string' || data.sid !== sessionId) return;\n        remint();\n      }\n      window.addEventListener('message', onMsg);\n      return () => window.removeEventListener('message', onMsg);\n    }, [sessionId, remint]);\n\n    if (!url) {\n      return <>{fallback ?? null}</>;\n    }\n\n    return (\n      <iframe\n        ref={ref}\n        src={url}\n        title={title}\n        className={className}\n        allow={allow}\n        onLoad={onLoad}\n        onError={() => {\n          // Re-mint on any iframe error — covers both 401 (cookie expired\n          // mid-session) and network blips.\n          remint();\n          onError?.();\n        }}\n      />\n    );\n  }\n);\n"],"mappings":";;;;AAsCA,IAAa,IAAiB,EAC5B,SACE,EAAE,cAAW,YAAS,gBAAa,UAAO,cAAW,UAAO,WAAQ,YAAS,eAC7E,GACA;CACA,IAAM,EAAE,QAAK,cAAW,EAAyB,GAAS,GAAW,EAAY;AAmCjF,QAhBA,QAAgB;EACd,SAAS,EAAM,GAAkB;GAC/B,IAAM,IAAO,GAAI;AACb,IAAC,KAAQ,OAAO,KAAS,YACzB,EAAK,SAAS,uBACd,OAAO,EAAK,OAAQ,YAAY,EAAK,QAAQ,KACjD,GAAQ;;AAGV,SADA,OAAO,iBAAiB,WAAW,EAAM,QAC5B,OAAO,oBAAoB,WAAW,EAAM;IACxD,CAAC,GAAW,EAAO,CAAC,EAElB,IAKH,kBAAC,UAAD;EACO;EACL,KAAK;EACE;EACI;EACJ;EACC;EACR,eAAe;AAIb,GADA,GAAQ,EACR,KAAW;;EAEb,CAAA,GAjBK,kBAAA,GAAA,EAAA,UAAG,KAAY,MAAQ,CAAA;EAoBnC"}