- {/* Eyebrow */}
-
- ),
- {
- ...size,
- fonts,
- },
- );
-}
-
-interface ModePillProps {
- active: boolean;
- children: React.ReactNode;
-}
-
-/** Mimics the cockpit mode-switcher: rounded pill, accent on the active one. */
-function ModePill({ active, children }: ModePillProps) {
- return (
-
- Cockpit · Threadplane
-
-
- {/* Headline — Inter Bold (cockpit chrome is sans-serif Linear-style) */}
-
- The live reference app for the framework.
-
-
- {/* Subhead */}
-
- Real LangGraph and AG-UI agents running through the same Angular surface you'll ship.
- Switch between Run · Code · Docs · API for each capability.
-
-
- {/* Mode pills + cockpit wordmark */}
-
-
-
- {['Run', 'Code', 'Docs', 'API'].map((mode, i) => (
- {mode}
- ))}
-
-
- 🛩️
- cockpit.threadplane.ai
-
-
- {children}
-
- );
-}
diff --git a/apps/cockpit/src/app/page.tsx b/apps/cockpit/src/app/page.tsx
deleted file mode 100644
index eca0ccf94..000000000
--- a/apps/cockpit/src/app/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { redirect } from 'next/navigation';
-import { CockpitShell } from '../components/cockpit-shell';
-import { getContentBundle } from '@threadplane/cockpit-shell';
-import {
- getCockpitPageModel,
- getRootWebsiteRedirect,
- normalizeRequestedMode,
-} from '../lib/cockpit-page';
-
-export default async function CockpitHomePage({
- searchParams,
-}: {
- searchParams: Promise<{ mode?: string | string[] }>;
-}) {
- const { mode } = await searchParams;
- const websiteRedirect = getRootWebsiteRedirect(mode);
- if (websiteRedirect) {
- redirect(websiteRedirect);
- }
- const { resolution, presentation, navigationTree } = getCockpitPageModel();
- const contentBundle = await getContentBundle(presentation);
-
- return (
- const adapterFixture = true;',
- },
- promptFiles: {},
- runtimeUrl: 'https://runtime.test/parity',
- narrativeDocs: [
- {
- title: 'Adapter narrative',
- html: 'Adapter narrative
Shared Docs fixture.
', - sourceFile: 'adapter.md', - }, - ], - docSections: [ - { - title: 'adapterApi', - signature: 'adapterApi(value: string): boolean', - description: 'Shared API fixture.', - params: [{ name: 'value', description: 'Fixture input.' }], - returns: 'Whether the fixture is active.', - sourceFile: 'adapter.ts', - language: 'typescript', - }, - ], - }} - routePath={model.canonicalPath} - requestedMode="run" - /> -
-
- );
-
- expect(html).toContain('cockpit/langgraph/streaming/python/src/index.ts');
- });
-});
-
-describe('cockpit shell contract', () => {
- it('renders a simplified shell with sidebar, run/code modes, and compact header', () => {
- const model = getCockpitPageModel();
- const html = renderToStaticMarkup(
-
-
- );
-
- expect(html).toContain('aria-label="Cockpit shell"');
- expect(html).toContain('aria-label="Cockpit modes"');
- expect(html).toContain('aria-label="Cockpit context"');
- expect(html).toContain('aria-label="Code mode"');
- expect(html).toContain('page.tsx');
- expect(html).toContain('index.ts');
- });
-});
diff --git a/apps/cockpit/src/lib/analytics/client.spec.ts b/apps/cockpit/src/lib/analytics/client.spec.ts
deleted file mode 100644
index 6061628a6..000000000
--- a/apps/cockpit/src/lib/analytics/client.spec.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-// SPDX-License-Identifier: MIT
-import { describe, test, expect, beforeEach, expectTypeOf, vi } from 'vitest';
-import { track } from './client';
-import type {
- CockpitRuntimeActionProps,
- CockpitRuntimeStatusChangedProps,
-} from './events';
-import type { RuntimePhase } from '../runtime/runtime-state';
-
-const mocks = vi.hoisted(() => ({ capture: vi.fn(), __loaded: true }));
-
-vi.mock('posthog-js', () => ({
- default: {
- capture: mocks.capture,
- get __loaded() {
- return mocks.__loaded;
- },
- },
-}));
-
-describe('track', () => {
- beforeEach(() => {
- mocks.capture.mockClear();
- mocks.__loaded = true;
- });
-
- test('fires posthog.capture when loaded', () => {
- track('cockpit:recipe_opened', { capability: 'streaming' });
- expect(mocks.capture).toHaveBeenCalledWith('cockpit:recipe_opened', {
- capability: 'streaming',
- });
- });
-
- test('no-ops when posthog not loaded', () => {
- mocks.__loaded = false;
- track('cockpit:mode_switched', {
- capability: 'x',
- from_mode: 'run',
- to_mode: 'code',
- });
- expect(mocks.capture).not.toHaveBeenCalled();
- });
-
- test('passes empty properties when not provided', () => {
- track('cockpit:code_copied');
- expect(mocks.capture).toHaveBeenCalledWith('cockpit:code_copied', {});
- });
-
- test('accepts only the allowlisted operational analytics vocabulary', () => {
- expectTypeOf
- 
-
+ Runtime bridge fixture
`; +} diff --git a/apps/cockpit/e2e/production-smoke.spec.ts b/apps/website/e2e/platform-production-smoke.spec.ts similarity index 61% rename from apps/cockpit/e2e/production-smoke.spec.ts rename to apps/website/e2e/platform-production-smoke.spec.ts index 84080a1bc..da9799740 100644 --- a/apps/cockpit/e2e/production-smoke.spec.ts +++ b/apps/website/e2e/platform-production-smoke.spec.ts @@ -1,30 +1,56 @@ import { expect, test } from '@playwright/test'; -import { capabilities } from '../scripts/capability-registry'; +import { readFileSync } from 'node:fs'; +import { validateRuntimeParentOrigins } from '@threadplane/cockpit-runtime-bridge'; import { - getRedirectDisabledProbePath, - getRegistryWebsiteDestinations, -} from '../scripts/deploy-smoke'; + cockpitManifest, + getCanonicalWebsiteWorkspaceHref, + getWorkspaceDestinationPath, + resolveLegacyPath, + resolveLegacyRequestMode, +} from '@threadplane/cockpit-registry'; /** - * Production smoke test: verifies the deployed cockpit shell and deployed - * example apps are reachable after production deploy. + * Production platform smoke: verifies the Website, legacy Cockpit redirects, + * deployed examples, canonical demo, and shared runtimes as one product. * * Requires: - * BASE_URL - e.g. https://cockpit.threadplane.ai + * COCKPIT_URL - e.g. https://cockpit.threadplane.ai * EXAMPLES_URL - e.g. https://examples.threadplane.ai * OPENAI_API_KEY - optional; enables the single live-provider canary * * Run: - * BASE_URL=https://cockpit.threadplane.ai \ + * PRODUCTION_SMOKE=true COCKPIT_URL=https://cockpit.threadplane.ai \ * EXAMPLES_URL=https://examples.threadplane.ai \ - * npx playwright test apps/cockpit/e2e/production-smoke.spec.ts + * npx playwright test apps/website/e2e/platform-production-smoke.spec.ts */ -const COCKPIT_URL = process.env['BASE_URL'] ?? 'https://cockpit.threadplane.ai'; +const COCKPIT_URL = + process.env['COCKPIT_URL'] ?? 'https://cockpit.threadplane.ai'; const EXAMPLES_URL = process.env['EXAMPLES_URL'] ?? 'https://examples.threadplane.ai'; const DEMO_URL = process.env['DEMO_URL'] ?? 'https://demo.threadplane.ai'; const WEBSITE_URL = process.env['WEBSITE_URL'] ?? 'https://threadplane.ai'; +const runtimeParentOriginSource = JSON.parse( + readFileSync( + new URL('../../../runtime-parent-origins.json', import.meta.url), + 'utf8' + ) +) as { readonly baseOrigins?: unknown }; +const runtimeParentPreviewOrigins = ( + process.env['RUNTIME_PARENT_PREVIEW_ORIGINS'] ?? '' +) + .split(/\r?\n/) + .filter(Boolean); +const baseRuntimeParentOrigins = validateRuntimeParentOrigins( + runtimeParentOriginSource.baseOrigins +); +const expectedRuntimeParentOrigins = validateRuntimeParentOrigins([ + ...(baseRuntimeParentOrigins ?? []), + ...runtimeParentPreviewOrigins, +]); +if (baseRuntimeParentOrigins === null || expectedRuntimeParentOrigins === null) { + throw new Error('Invalid runtime parent origin smoke policy'); +} const CHAT_CAPABILITIES = [ 'langgraph/streaming', @@ -84,13 +110,75 @@ const RENDER_CAPABILITIES = [ * runtime but are not yet in the examples route table, so they have no * /ag-ui/
-
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index dd412c7a1..86f698e87 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -5,7 +5,7 @@ import './global.css';
import { Nav } from '../components/shared/Nav';
import { SiteFooter } from '../components/shared/SiteFooter';
import { AnnouncementToast } from '../components/shared/AnnouncementToast';
-import { WebsiteWorkspaceLayout } from '../components/workspace/WebsiteWorkspace';
+import { WebsiteWorkspaceRoot } from '../components/workspace/WebsiteWorkspace';
import { JsonLd } from '../components/shared/JsonLd';
import { rootJsonLd } from '../lib/structured-data';
import {
@@ -79,7 +79,7 @@ export default function RootLayout({
diff --git a/apps/website/src/app/pilot-to-prod/page.spec.tsx b/apps/website/src/app/pilot-to-prod/page.spec.tsx
index 4bcb284a7..cd10532c2 100644
--- a/apps/website/src/app/pilot-to-prod/page.spec.tsx
+++ b/apps/website/src/app/pilot-to-prod/page.spec.tsx
@@ -17,4 +17,15 @@ describe('PilotToProdPage', () => {
expect(container.querySelectorAll('.pilot-outcomes-grid')).toHaveLength(0);
expect(screen.getByRole('heading', { level: 1 })).toBeTruthy();
});
+
+ it('presents the embedded Website workspace instead of the retired Cockpit host', () => {
+ render(
+
l.group === 'library')
@@ -44,23 +44,78 @@ beforeEach(() => {
});
describe('DocsControlPlane', () => {
- it('styles the preview hooks for forced colors and reduced motion', () => {
- expect(docsCss).toMatch(/\[data-docs-runtime-preview\]/);
- expect(docsCss).toMatch(/@media \(forced-colors:\s*active\)/);
- expect(docsCss).toMatch(/Canvas/);
- expect(docsCss).toMatch(/HighlightText/);
- expect(docsCss).toMatch(
- /@media \(prefers-reduced-motion:\s*reduce\)[\s\S]*?transition:\s*none/
+ it('keeps context headings on the shared sentence-case sans contract', () => {
+ for (const selector of [
+ '[data-docs-control-plane-context] [data-control-plane-section-trigger]',
+ '[data-docs-control-plane-context] [data-control-plane-section-heading]',
+ ]) {
+ const declarations = declarationsFor(docsCss, selector);
+ expect(declarations).toMatch(/font-family:\s*var\(--font-inter\)/);
+ expect(declarations).toMatch(/font-size:\s*12px/);
+ expect(declarations).toMatch(/font-weight:\s*600/);
+ expect(declarations).toMatch(/letter-spacing:\s*normal/);
+ expect(declarations).toMatch(/color:\s*var\(--color-text-muted\)/);
+ expect(declarations).toMatch(/text-transform:\s*none/);
+ }
+ });
+
+ it('rotates the shared disclosure chevron as a complete icon', () => {
+ const chevron = declarationsFor(
+ docsCss,
+ '[data-docs-control-plane-context] [data-control-plane-section-trigger] [data-control-plane-section-chevron]'
+ );
+ const expanded = declarationsFor(
+ docsCss,
+ '[data-docs-control-plane-context] [data-control-plane-section-trigger][aria-expanded="true"] [data-control-plane-section-chevron]'
+ );
+
+ expect(chevron).toMatch(/transition:[^;]*transform\s+150ms\s+ease/);
+ expect(chevron).toMatch(/transform:\s*rotate\(0deg\)/);
+ expect(expanded).toMatch(/transform:\s*rotate\(90deg\)/);
+ });
+
+ it('uses complete rounded sidebar states without a left marker', () => {
+ for (const selector of [
+ '.docs-sidebar-top-link',
+ '.docs-sidebar-section-link',
+ ]) {
+ const declarations = declarationsFor(docsCss, selector);
+ expect(declarations).toMatch(/border-radius:\s*7px/);
+ expect(declarations).not.toMatch(
+ /border-(?:left|inline-start)(?:-(?:color|style|width))?\s*:/
+ );
+ }
+
+ const hover = declarationsFor(
+ docsCss,
+ '[data-docs-navlink]:not([data-active]):hover'
+ );
+ const active = declarationsFor(
+ docsCss,
+ '[data-docs-navlink][data-active]'
+ );
+ expect(hover).toMatch(/background:\s*var\(--color-surface-dim\)/);
+ expect(active).toMatch(/background:\s*var\(--color-accent-surface\)/);
+ expect(hover).not.toMatch(
+ /border-(?:left|inline-start)(?:-(?:color|style|width))?\s*:/
);
+ expect(active).not.toMatch(
+ /border-(?:left|inline-start)(?:-(?:color|style|width))?\s*:/
+ );
+ });
+
+ it('does not retain style contracts for the retired Runtime preview or environment rows', () => {
+ expect(docsCss).not.toMatch(/\[data-docs-runtime-preview\]/);
+ expect(docsCss).not.toMatch(/\[data-control-plane-environment-/);
});
- it('renders the stable labeled mode rail with deterministic Cockpit links', () => {
+ it('keeps standalone docs-only modes disabled without handoff links', () => {
render(
{
/>
);
- const scope = screen
- .getByRole('heading', { name: 'Scope' })
- .closest('section');
- if (!scope) throw new Error('Expected Scope section');
- expect(within(scope).getByText('LangGraph')).toBeTruthy();
- expect(within(scope).getByText('Guides')).toBeTruthy();
- expect(within(scope).getByText('Streaming')).toBeTruthy();
- expect(screen.queryByRole('button', { name: 'Environment' })).toBeNull();
- const runtime = screen.getByRole('button', { name: 'Runtime' });
- const preview = document.querySelector('[data-docs-runtime-preview]');
- expect(preview).toBeTruthy();
- expect(preview?.contains(runtime)).toBe(true);
- expect(runtime.getAttribute('aria-expanded')).toBe('false');
- fireEvent.click(runtime);
- const runtimeSection = runtime.closest('section');
- if (!runtimeSection) throw new Error('Expected Runtime section');
- const configuration = runtimeSection.querySelector('dl');
- if (!configuration) throw new Error('Expected Runtime configuration');
- expect(within(configuration).getByText('Shared development')).toBeTruthy();
- expect(within(configuration).getByText('Cockpit')).toBeTruthy();
- expect(within(configuration).getByText('streaming')).toBeTruthy();
- expect(within(configuration).getByText('Run')).toBeTruthy();
- expect(
- within(runtimeSection)
- .getByRole('link', { name: 'Open controls in Cockpit' })
- .getAttribute('href')
- ).toContain(
- '/langgraph/core-capabilities/streaming/overview/python?mode=run'
- );
- expect(
- within(runtimeSection).queryByText(/ready|unresponsive|last checked/i)
- ).toBeNull();
- await waitFor(() =>
- expect(
- window.localStorage.getItem('threadplane:control-plane:v1')
- ).toContain('Runtime')
- );
- });
-
- it.each([
- ['Run', 'run'],
- ['Code', 'code'],
- ['API', 'api'],
- ] as const)(
- 'tracks the %s rail handoff at the anchor boundary',
- (label, requestedMode) => {
- render(
- {
pageTitle="Streaming"
/>
);
- fireEvent.click(screen.getByRole('button', { name: 'Runtime' }));
-
- fireEvent.click(
- screen.getByRole('link', { name: 'Open controls in Cockpit' })
- );
- expect(track).toHaveBeenCalledWith('docs:cockpit_handoff', {
- library: 'langgraph',
- source_section: 'guides',
- source_slug: 'streaming',
- destination_product: 'langgraph',
- destination_capability: 'streaming',
- requested_mode: 'run',
- mapped: true,
- });
- expect(track.mock.calls[0]?.[1]).not.toHaveProperty('destination_url');
- });
-
- it('uses and tracks the Cockpit home fallback for unsupported pages', () => {
- render(
- {
});
describe('DocsControlPlane — library-neutral', () => {
+ it.each([
+ { pageTitle: 'Overview', path: '/docs' },
+ {
+ pageTitle: 'Choosing an adapter',
+ path: '/docs/choosing-an-adapter',
+ },
+ ])('$path keeps standalone controls disabled and free of Cockpit handoffs', ({ pageTitle }) => {
+ render(
+ {
expect(screen.getByRole('heading', { name: 'Scope' })).toBeTruthy();
expect(screen.getByRole('button', { name: 'Learn' })).toBeTruthy();
- expect(screen.getByRole('button', { name: 'Runtime' })).toBeTruthy();
+ expect(screen.queryByRole('button', { name: 'Runtime' })).toBeNull();
expect(screen.getByRole('toolbar', { name: 'Docs actions' })).toBeTruthy();
});
+
+ it('keeps explicit standalone demo actions', () => {
+ render(
+
@@ -152,27 +95,6 @@ export function DocsContextContent({
/>
- {showRuntime ? (
-
- track(
- analyticsEvents.docsCockpitHandoff,
- buildCockpitHandoffProperties(identity, mode)
- );
+ const disabledReason = (mode: 'Run' | 'Code' | 'API') =>
+ `${mode} is unavailable because this page has no workspace capability.`;
return (
l.group === 'library')
@@ -44,23 +44,78 @@ beforeEach(() => {
});
describe('DocsControlPlane', () => {
- it('styles the preview hooks for forced colors and reduced motion', () => {
- expect(docsCss).toMatch(/\[data-docs-runtime-preview\]/);
- expect(docsCss).toMatch(/@media \(forced-colors:\s*active\)/);
- expect(docsCss).toMatch(/Canvas/);
- expect(docsCss).toMatch(/HighlightText/);
- expect(docsCss).toMatch(
- /@media \(prefers-reduced-motion:\s*reduce\)[\s\S]*?transition:\s*none/
+ it('keeps context headings on the shared sentence-case sans contract', () => {
+ for (const selector of [
+ '[data-docs-control-plane-context] [data-control-plane-section-trigger]',
+ '[data-docs-control-plane-context] [data-control-plane-section-heading]',
+ ]) {
+ const declarations = declarationsFor(docsCss, selector);
+ expect(declarations).toMatch(/font-family:\s*var\(--font-inter\)/);
+ expect(declarations).toMatch(/font-size:\s*12px/);
+ expect(declarations).toMatch(/font-weight:\s*600/);
+ expect(declarations).toMatch(/letter-spacing:\s*normal/);
+ expect(declarations).toMatch(/color:\s*var\(--color-text-muted\)/);
+ expect(declarations).toMatch(/text-transform:\s*none/);
+ }
+ });
+
+ it('rotates the shared disclosure chevron as a complete icon', () => {
+ const chevron = declarationsFor(
+ docsCss,
+ '[data-docs-control-plane-context] [data-control-plane-section-trigger] [data-control-plane-section-chevron]'
+ );
+ const expanded = declarationsFor(
+ docsCss,
+ '[data-docs-control-plane-context] [data-control-plane-section-trigger][aria-expanded="true"] [data-control-plane-section-chevron]'
+ );
+
+ expect(chevron).toMatch(/transition:[^;]*transform\s+150ms\s+ease/);
+ expect(chevron).toMatch(/transform:\s*rotate\(0deg\)/);
+ expect(expanded).toMatch(/transform:\s*rotate\(90deg\)/);
+ });
+
+ it('uses complete rounded sidebar states without a left marker', () => {
+ for (const selector of [
+ '.docs-sidebar-top-link',
+ '.docs-sidebar-section-link',
+ ]) {
+ const declarations = declarationsFor(docsCss, selector);
+ expect(declarations).toMatch(/border-radius:\s*7px/);
+ expect(declarations).not.toMatch(
+ /border-(?:left|inline-start)(?:-(?:color|style|width))?\s*:/
+ );
+ }
+
+ const hover = declarationsFor(
+ docsCss,
+ '[data-docs-navlink]:not([data-active]):hover'
+ );
+ const active = declarationsFor(
+ docsCss,
+ '[data-docs-navlink][data-active]'
+ );
+ expect(hover).toMatch(/background:\s*var\(--color-surface-dim\)/);
+ expect(active).toMatch(/background:\s*var\(--color-accent-surface\)/);
+ expect(hover).not.toMatch(
+ /border-(?:left|inline-start)(?:-(?:color|style|width))?\s*:/
);
+ expect(active).not.toMatch(
+ /border-(?:left|inline-start)(?:-(?:color|style|width))?\s*:/
+ );
+ });
+
+ it('does not retain style contracts for the retired Runtime preview or environment rows', () => {
+ expect(docsCss).not.toMatch(/\[data-docs-runtime-preview\]/);
+ expect(docsCss).not.toMatch(/\[data-control-plane-environment-/);
});
- it('renders the stable labeled mode rail with deterministic Cockpit links', () => {
+ it('keeps standalone docs-only modes disabled without handoff links', () => {
render(
- preferences.setExpanded('Runtime', open)}
- >
-
- }
- href={runtimeHref}
- onClick={() => trackHandoff('Run')}
- />
-
-
-
- ) : null}
-
@@ -225,20 +139,20 @@ export function DocsControlPlane(props: DocsControlPlaneProps) {
}
- href={buildCockpitModeHref(identity, 'Run')}
- onSelect={() => handoff('Run')}
+ disabled
+ disabledReason={disabledReason('Run')}
/>
}
- href={buildCockpitModeHref(identity, 'Code')}
- onSelect={() => handoff('Code')}
+ disabled
+ disabledReason={disabledReason('Code')}
/>
}
- href={buildCockpitModeHref(identity, 'API')}
- onSelect={() => handoff('API')}
+ disabled
+ disabledReason={disabledReason('API')}
/>
}
diff --git a/apps/website/src/components/docs/PageActions.spec.tsx b/apps/website/src/components/docs/PageActions.spec.tsx
index 34432d20a..5eeabc094 100644
--- a/apps/website/src/components/docs/PageActions.spec.tsx
+++ b/apps/website/src/components/docs/PageActions.spec.tsx
@@ -42,6 +42,66 @@ async function open() {
}
describe('PageActions', () => {
+ it('describes the closed trigger with a tooltip and restores it after Escape', async () => {
+ await renderActions();
+ const trigger = screen.getByRole('button', { name: 'Page actions' });
+ const tooltip = screen.getByRole('tooltip');
+
+ expect(trigger.getAttribute('aria-label')).toBe('Page actions');
+ expect(trigger.getAttribute('aria-describedby')).toBe(tooltip.id);
+ expect(tooltip.textContent).toBe('Page actions');
+ expect(trigger.nextElementSibling).toBe(tooltip);
+
+ fireEvent.click(trigger);
+ expect(trigger.getAttribute('aria-label')).toBe('Page actions');
+ expect(trigger.hasAttribute('aria-describedby')).toBe(false);
+ expect(screen.queryByRole('tooltip')).toBeNull();
+
+ fireEvent.keyDown(document, { key: 'Escape' });
+ await waitFor(() => expect(document.activeElement).toBe(trigger));
+ const restoredTooltip = screen.getByRole('tooltip');
+ expect(trigger.getAttribute('aria-describedby')).toBe(restoredTooltip.id);
+ expect(restoredTooltip.textContent).toBe('Page actions');
+ });
+
+ it('dismisses the closed tooltip with Escape without moving trigger focus', async () => {
+ await renderActions();
+ const trigger = screen.getByRole('button', { name: 'Page actions' });
+ trigger.focus();
+ expect(screen.getByRole('tooltip')).toBeTruthy();
+
+ fireEvent.keyDown(document, { key: 'Escape' });
+
+ await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull());
+ expect(document.activeElement).toBe(trigger);
+ expect(trigger.hasAttribute('aria-describedby')).toBe(false);
+ });
+
+ it('keeps a dismissed tooltip closed until a new focus or pointer cycle', async () => {
+ await renderActions();
+ const trigger = screen.getByRole('button', { name: 'Page actions' });
+ trigger.focus();
+ fireEvent.keyDown(document, { key: 'Escape' });
+ await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull());
+
+ fireEvent.keyDown(document, { key: 'ArrowDown' });
+ expect(screen.queryByRole('tooltip')).toBeNull();
+
+ fireEvent.blur(trigger);
+ expect(screen.queryByRole('tooltip')).toBeNull();
+ fireEvent.focus(trigger);
+ await waitFor(() => expect(screen.getByRole('tooltip')).toBeTruthy());
+
+ fireEvent.keyDown(document, { key: 'Escape' });
+ await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull());
+ fireEvent.pointerMove(trigger);
+ expect(screen.queryByRole('tooltip')).toBeNull();
+ fireEvent.pointerLeave(trigger);
+ expect(screen.queryByRole('tooltip')).toBeNull();
+ fireEvent.pointerEnter(trigger);
+ expect(screen.getByRole('tooltip')).toBeTruthy();
+ });
+
it('uses one ellipsis trigger and keeps utilities inside its menu', async () => {
await renderActions();
expect(screen.getByRole('button', { name: /page actions/i })).toBeTruthy();
diff --git a/apps/website/src/components/docs/PageActions.tsx b/apps/website/src/components/docs/PageActions.tsx
index 1e7f3db5c..3246d165b 100644
--- a/apps/website/src/components/docs/PageActions.tsx
+++ b/apps/website/src/components/docs/PageActions.tsx
@@ -1,6 +1,6 @@
'use client';
-import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useEffect, useId, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
import {
Bot,
Check,
@@ -26,7 +26,9 @@ interface Props {
}
export function PageActions({ library, section, slug, headings }: Props) {
+ const tooltipId = useId();
const [open, setOpen] = useState(false);
+ const [tooltipDismissed, setTooltipDismissed] = useState(false);
const [copied, setCopied] = useState(false);
const [showHeadings, setShowHeadings] = useState(false);
const ref = useRef(null);
@@ -58,6 +60,15 @@ export function PageActions({ library, section, slug, headings }: Props) {
};
}, [open]);
+ useEffect(() => {
+ if (open) return undefined;
+ const onKey = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') setTooltipDismissed(true);
+ };
+ document.addEventListener('keydown', onKey);
+ return () => document.removeEventListener('keydown', onKey);
+ }, [open]);
+
useEffect(
() => () => {
if (copiedTimer.current) clearTimeout(copiedTimer.current);
@@ -123,8 +134,11 @@ export function PageActions({ library, section, slug, headings }: Props) {
type="button"
ref={triggerRef}
aria-label="Page actions"
+ aria-describedby={!open && !tooltipDismissed ? tooltipId : undefined}
aria-haspopup="menu"
aria-expanded={open}
+ onFocus={() => setTooltipDismissed(false)}
+ onPointerEnter={() => setTooltipDismissed(false)}
onClick={() => {
restoreTriggerFocus.current = true;
setOpen((current) => !current);
@@ -134,6 +148,11 @@ export function PageActions({ library, section, slug, headings }: Props) {
>
+ {!open && !tooltipDismissed ? (
+
+ Page actions
+
+ ) : null}
{open ? (
{
expect.objectContaining({ surface: 'home_demo', cta_id: 'home_demo_launch_ag_ui' }),
);
});
+
+ it('links the feature CTA to the same-origin streaming workspace', () => {
+ render(> = {}
) =>
render(
- Server-rendered docs article}
- {...overrides}
- />
+
+ Server-rendered docs article}
+ {...overrides}
+ />
+
);
const activeWorkspaceMode = (): string | undefined =>
@@ -258,7 +271,7 @@ describe('WebsiteWorkspace', () => {
routePath: string,
article: string
) => (
-
+
{
routePath={routePath}
docsSlot={{article} }
/>
-
+
);
const view = render(
@@ -300,6 +313,73 @@ describe('WebsiteWorkspace', () => {
);
});
+ it('keeps the volatile runtime target above in-shell route registrars', async () => {
+ function RuntimeTargetProbe() {
+ const langgraph = useLangGraphRuntimeTarget();
+ return (
+ <>
+
+
+
+ );
+ }
+ const source = mappedResolution(
+ 'langgraph:core-capabilities:streaming:overview:python',
+ 'streaming',
+ ['Docs', 'Run', 'Code', 'API']
+ );
+ const destination = mappedResolution(
+ 'langgraph:core-capabilities:persistence:overview:python',
+ 'persistence',
+ ['Docs', 'Run', 'Code', 'API']
+ );
+ const route = (resolution: WorkspaceResolution, routePath: string) => (
+
+
+ {resolution.kind === 'mapped' ? resolution.identity.title : ''}
+
+ }
+ />
+
+ );
+
+ const view = render(route(source, '/docs/langgraph/guides/streaming'));
+ fireEvent.click(
+ screen.getByRole('button', { name: 'Apply Website target' })
+ );
+ expect(screen.getByTestId('website-target-kind').textContent).toBe(
+ 'langsmith'
+ );
+
+ window.history.replaceState({}, '', '/docs/langgraph/guides/persistence');
+ view.rerender(route(destination, '/docs/langgraph/guides/persistence'));
+
+ await screen.findByText('persistence');
+ expect(screen.getByTestId('website-target-kind').textContent).toBe(
+ 'langsmith'
+ );
+ });
+
it('uses host-neutral labels and no fabricated Docs slot on workspace routes', () => {
const resolution = mappedResolution(
'deep-agents:core-capabilities:planning:overview:python',
@@ -340,7 +420,7 @@ describe('WebsiteWorkspace', () => {
await waitFor(() => {
expect(activeWorkspaceMode()).toBe('Docs');
expect(mocks.replace).toHaveBeenCalledWith(
- '/docs/langgraph/guides/testing?keep=1'
+ '/docs/langgraph/guides/testing'
);
});
expect(mocks.replace.mock.calls[0]?.[0]).not.toContain('runtime');
@@ -366,7 +446,7 @@ describe('WebsiteWorkspace', () => {
await waitFor(() => {
expect(activeWorkspaceMode()).toBe('Docs');
expect(mocks.replace).toHaveBeenCalledWith(
- '/docs/langgraph/guides/streaming?keep=1'
+ '/docs/langgraph/guides/streaming'
);
});
});
@@ -381,18 +461,81 @@ describe('WebsiteWorkspace', () => {
act(() => mocks.latestProviderProps?.pushMode('Run'));
expect(mocks.push).toHaveBeenCalledWith(
- '/docs/langgraph/guides/testing?keep=1&mode=run'
+ '/docs/langgraph/guides/testing?mode=run'
);
act(() => mocks.latestProviderProps?.pushMode('Docs'));
expect(mocks.push).toHaveBeenLastCalledWith(
- '/docs/langgraph/guides/testing?keep=1'
+ '/docs/langgraph/guides/testing'
);
expect(mocks.push.mock.calls.flat().join(' ')).not.toMatch(
/runtimeUrl|runtime_url|endpoint|credential/i
);
});
+ it('serializes Docs mode explicitly on workspace routes and keeps the selected mode synchronized', async () => {
+ const resolution = mappedResolution(
+ 'langgraph:core-capabilities:durable-execution:overview:python',
+ 'durable-execution',
+ ['Docs', 'Run', 'Code', 'API'],
+ '/docs/langgraph/guides/persistence'
+ );
+ window.history.replaceState(
+ {},
+ '',
+ '/workspace/langgraph/durable-execution?mode=run&keep=1'
+ );
+ mocks.push.mockImplementation((href: string) => {
+ window.history.pushState({}, '', href);
+ });
+ renderWorkspace({
+ resolution,
+ presentation: mappedPresentation(resolution),
+ routePath: '/workspace/langgraph/durable-execution',
+ routeKind: 'workspace',
+ docsSlot: undefined,
+ });
+ await waitFor(() => expect(activeWorkspaceMode()).toBe('Run'));
+
+ act(() => mocks.latestProviderProps?.pushMode('Docs'));
+
+ await waitFor(() => {
+ expect(mocks.push).toHaveBeenCalledWith(
+ '/workspace/langgraph/durable-execution?mode=docs'
+ );
+ expect(mocks.latestProviderProps?.requestedMode).toBe('docs');
+ expect(activeWorkspaceMode()).toBe('Docs');
+ });
+ });
+
+ it('restores the canonical workspace Docs mode on reload', async () => {
+ const resolution = mappedResolution(
+ 'langgraph:core-capabilities:durable-execution:overview:python',
+ 'durable-execution',
+ ['Docs', 'Run', 'Code', 'API'],
+ '/docs/langgraph/guides/persistence'
+ );
+ window.history.replaceState(
+ {},
+ '',
+ '/workspace/langgraph/durable-execution?mode=docs'
+ );
+
+ renderWorkspace({
+ resolution,
+ presentation: mappedPresentation(resolution),
+ routePath: '/workspace/langgraph/durable-execution',
+ routeKind: 'workspace',
+ docsSlot: undefined,
+ });
+
+ await waitFor(() => {
+ expect(activeWorkspaceMode()).toBe('Docs');
+ expect(mocks.latestProviderProps?.requestedMode).toBe('docs');
+ });
+ expect(mocks.replace).not.toHaveBeenCalled();
+ });
+
it('uses workspace routes only when Docs are absent or would lose identity', () => {
renderWorkspace();
const resolveHref = mocks.latestProviderProps?.resolveIdentityHref;
@@ -509,14 +652,16 @@ describe('WebsiteWorkspace', () => {
'/docs/langgraph/guides/code-only?mode=code'
);
view.rerender(
- Destination docs article}
- />
+
+ Destination docs article}
+ />
+
);
await waitFor(() => expect(activeWorkspaceMode()).toBe('Code'));
@@ -545,14 +690,16 @@ describe('WebsiteWorkspace', () => {
window.history.replaceState({}, '', '/docs/langgraph/guides/testing');
view.rerender(
- Testing docs article}
- />
+
+ Testing docs article}
+ />
+
);
await waitFor(() => expect(activeWorkspaceMode()).toBe('Docs'));
@@ -594,14 +741,16 @@ describe('WebsiteWorkspace', () => {
});
view.rerender(
- Updated docs article}
- />
+
+ Updated docs article}
+ />
+
);
expect(activeWorkspaceMode()).toBe('Code');
});
@@ -637,21 +786,68 @@ describe('WebsiteWorkspace', () => {
});
});
+ it('keeps workspace mode state aligned across Back and Forward history entries', async () => {
+ const source = mappedResolution(
+ 'langgraph:core-capabilities:durable-execution:overview:python',
+ 'durable-execution',
+ ['Docs', 'Run', 'Code', 'API'],
+ '/docs/langgraph/guides/persistence'
+ );
+ window.history.replaceState(
+ {},
+ '',
+ '/workspace/langgraph/durable-execution?mode=docs'
+ );
+ renderWorkspace({
+ resolution: source,
+ presentation: mappedPresentation(source),
+ routePath: '/workspace/langgraph/durable-execution',
+ routeKind: 'workspace',
+ docsSlot: undefined,
+ });
+ await waitFor(() => expect(activeWorkspaceMode()).toBe('Docs'));
+
+ window.history.pushState(
+ {},
+ '',
+ '/workspace/langgraph/durable-execution?mode=code'
+ );
+ act(() => window.dispatchEvent(new PopStateEvent('popstate')));
+ await waitFor(() => expect(activeWorkspaceMode()).toBe('Code'));
+
+ window.history.replaceState(
+ {},
+ '',
+ '/workspace/langgraph/durable-execution?mode=docs'
+ );
+ act(() => window.dispatchEvent(new PopStateEvent('popstate')));
+ await waitFor(() => expect(activeWorkspaceMode()).toBe('Docs'));
+
+ window.history.replaceState(
+ {},
+ '',
+ '/workspace/langgraph/durable-execution?mode=code'
+ );
+ act(() => window.dispatchEvent(new PopStateEvent('popstate')));
+ await waitFor(() => expect(activeWorkspaceMode()).toBe('Code'));
+ });
+
it('treats repeated mode values as invalid during history traversal', async () => {
const source = mappedResolution(
- 'deep-agents:core-capabilities:planning:overview:python',
- 'planning',
- ['Docs', 'Run', 'Code', 'API']
+ 'langgraph:core-capabilities:durable-execution:overview:python',
+ 'durable-execution',
+ ['Docs', 'Run', 'Code', 'API'],
+ '/docs/langgraph/guides/persistence'
);
window.history.replaceState(
{},
'',
- '/workspace/deep-agents/planning?mode=code'
+ '/workspace/langgraph/durable-execution?mode=code'
);
renderWorkspace({
resolution: source,
presentation: mappedPresentation(source),
- routePath: '/workspace/deep-agents/planning',
+ routePath: '/workspace/langgraph/durable-execution',
routeKind: 'workspace',
docsSlot: undefined,
});
@@ -661,7 +857,7 @@ describe('WebsiteWorkspace', () => {
window.history.pushState(
{},
'',
- '/workspace/deep-agents/planning?mode=api&mode=docs&keep=1'
+ '/workspace/langgraph/durable-execution?mode=api&mode=docs&keep=1'
);
act(() => window.dispatchEvent(new PopStateEvent('popstate')));
@@ -673,9 +869,9 @@ describe('WebsiteWorkspace', () => {
String(mocks.replace.mock.calls[0]?.[0]),
window.location.origin
);
- expect(replacement.pathname).toBe('/workspace/deep-agents/planning');
+ expect(replacement.pathname).toBe('/workspace/langgraph/durable-execution');
expect(replacement.searchParams.getAll('mode')).toEqual(['run']);
- expect(replacement.searchParams.get('keep')).toBe('1');
+ expect(replacement.searchParams.has('keep')).toBe(false);
});
it('uses the Website same-origin ingest proxy for the real runtime iframe', async () => {
diff --git a/apps/website/src/components/workspace/WebsiteWorkspace.tsx b/apps/website/src/components/workspace/WebsiteWorkspace.tsx
index 039446f4f..9001d915b 100644
--- a/apps/website/src/components/workspace/WebsiteWorkspace.tsx
+++ b/apps/website/src/components/workspace/WebsiteWorkspace.tsx
@@ -12,6 +12,7 @@ import {
} from 'react';
import {
type CockpitManifestEntry,
+ getCanonicalWebsiteWorkspaceHref,
getWorkspaceDestinationPath,
type WorkspaceMode,
type WorkspaceResolution,
@@ -24,6 +25,7 @@ import type {
import {
WorkspaceProvider,
WorkspaceShell,
+ RuntimeTargetProvider,
readWorkspaceModeQuery,
type RuntimeTerminalTransition,
type TrackModeChange,
@@ -98,16 +100,6 @@ function getWebsiteWorkspaceSessionId(): string {
return workspaceSessionId;
}
-export function getWebsiteModeHref(
- currentHref: string,
- mode: WorkspaceMode
-): string {
- const url = new URL(currentHref);
- if (mode === 'Docs') url.searchParams.delete('mode');
- else url.searchParams.set('mode', mode.toLowerCase());
- return `${url.pathname}${url.search}${url.hash}`;
-}
-
const trackNavigation: TrackNavigation = ({
capability,
category,
@@ -247,18 +239,28 @@ function WebsiteWorkspaceSurface({
const pushMode = useCallback(
(mode: WorkspaceMode) => {
- synchronizeRouteMode(mode === 'Docs' ? null : mode.toLowerCase());
- routerRef.current.push(getWebsiteModeHref(window.location.href, mode));
+ const href = getCanonicalWebsiteWorkspaceHref(resolution, mode);
+ synchronizeRouteMode(
+ readWorkspaceModeQuery(
+ new URL(href, window.location.origin).searchParams
+ )
+ );
+ routerRef.current.push(href);
},
- [synchronizeRouteMode]
+ [resolution, synchronizeRouteMode]
);
const replaceMode = useCallback(
(mode: WorkspaceMode) => {
- synchronizeRouteMode(mode === 'Docs' ? null : mode.toLowerCase());
- routerRef.current.replace(getWebsiteModeHref(window.location.href, mode));
+ const href = getCanonicalWebsiteWorkspaceHref(resolution, mode);
+ synchronizeRouteMode(
+ readWorkspaceModeQuery(
+ new URL(href, window.location.origin).searchParams
+ )
+ );
+ routerRef.current.replace(href);
},
- [synchronizeRouteMode]
+ [resolution, synchronizeRouteMode]
);
const renderContextPane = useCallback(
@@ -270,7 +272,6 @@ function WebsiteWorkspaceSurface({
mobile={Boolean(onAction)}
onNavigate={onNavigate}
onSearchHandoff={onAction ? () => onAction('search-docs') : undefined}
- showRuntime={false}
/>
);
},
@@ -441,6 +442,18 @@ export function WebsiteWorkspaceLayout({
);
}
+export function WebsiteWorkspaceRoot({
+ children,
+}: {
+ readonly children: ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
export function WebsiteWorkspace(props: WebsiteWorkspaceProps) {
const layout = useContext(WebsiteWorkspaceLayoutContext);
const tokenRef = useRef
+
Theme
@@ -257,6 +269,7 @@ export function CockpitControlPlane({
onReload={onReload}
onOpenRuntime={onOpenRuntime}
onCopyDiagnostics={onCopyDiagnostics}
+ runtimeTargetView={runtimeTargetView}
/>
) : (
diff --git a/libs/workspace-react/src/lib/components/control-plane/runtime-section.spec.tsx b/libs/workspace-react/src/lib/components/control-plane/runtime-section.spec.tsx
index f7b02532a..cce4031a5 100644
--- a/libs/workspace-react/src/lib/components/control-plane/runtime-section.spec.tsx
+++ b/libs/workspace-react/src/lib/components/control-plane/runtime-section.spec.tsx
@@ -57,12 +57,16 @@ function snapshot(phase: RuntimePhase): RuntimeSnapshot {
const statusCases = [
['not_configured', 'Not configured', 'circle-slash'],
['invalid_configuration', 'Invalid runtime URL', 'triangle-alert'],
+ ['configuring', 'Configuring', 'loader-circle'],
['connecting', 'Connecting', 'loader-circle'],
['checking', 'Checking', 'loader-circle'],
['ready', 'Ready', 'circle-check'],
['unresponsive', 'Unresponsive', 'triangle-alert'],
['reloading', 'Reloading', 'loader-circle'],
['error', 'Error', 'triangle-alert'],
+ ['unauthorized', 'Unauthorized', 'triangle-alert'],
+ ['network_blocked', 'Network blocked', 'triangle-alert'],
+ ['incompatible_bridge', 'Incompatible runtime', 'triangle-alert'],
] as const satisfies ReadonlyArray;
function renderSection(
@@ -130,10 +134,8 @@ describe('RuntimeSection', () => {
).toBe('unresponsive');
const target = document.querySelector('[data-runtime-target]');
expect(target?.textContent).toBe('https://runtime.test/path');
- expect(target?.getAttribute('title')).toBe('https://runtime.test/path');
- expect(target?.getAttribute('aria-label')).toBe(
- 'Runtime target https://runtime.test/path'
- );
+ expect(target?.getAttribute('title')).toBeNull();
+ expect(target?.getAttribute('aria-label')).toBeNull();
expect(document.querySelector('[data-runtime-announcement]')).toBe(
screen.getByRole('status')
);
@@ -147,12 +149,16 @@ describe('RuntimeSection', () => {
it.each([
['invalid_configuration', 'start'],
+ ['configuring', 'center'],
['connecting', 'center'],
['checking', 'center'],
['ready', 'center'],
['unresponsive', 'center'],
['reloading', 'center'],
['error', 'center'],
+ ['unauthorized', 'center'],
+ ['network_blocked', 'center'],
+ ['incompatible_bridge', 'center'],
] as const)(
'places the %s layout at its explicit %s anchor',
(phase, placement) => {
@@ -167,13 +173,13 @@ describe('RuntimeSection', () => {
it('binds configured Runtime menu centering to the placement hook', () => {
expect(cockpitCss).toMatch(
- /\[data-control-plane-overflow-menu-root\]\[data-overflow-placement="center"\]\s*>\s*\[data-control-plane-overflow-menu\]\s*\{[\s\S]*?left:\s*50%;[\s\S]*?right:\s*auto;[\s\S]*?transform:\s*translateX\(-50%\);/
+ /\[data-control-plane-overflow-menu-root\]\[data-overflow-placement=["']center["']\]\s*>\s*\[data-control-plane-overflow-menu\]\s*\{[\s\S]*?left:\s*50%;[\s\S]*?right:\s*auto;[\s\S]*?transform:\s*translateX\(-50%\);/
);
});
it('right-aligns the configured Runtime menu for coarse pointers', () => {
expect(cockpitCss).toMatch(
- /@media \(pointer:\s*coarse\)\s*\{[\s\S]*?\[data-control-plane-overflow-menu-root\]\[data-overflow-placement="center"\]\s*>\s*\[data-control-plane-overflow-menu\]\s*\{[\s\S]*?left:\s*auto;[\s\S]*?right:\s*0;[\s\S]*?transform:\s*none;/
+ /@media \(pointer:\s*coarse\)\s*\{[\s\S]*?\[data-control-plane-overflow-menu-root\]\[data-overflow-placement=["']center["']\]\s*>\s*\[data-control-plane-overflow-menu\]\s*\{[\s\S]*?left:\s*auto;[\s\S]*?right:\s*0;[\s\S]*?transform:\s*none;/
);
});
@@ -187,6 +193,45 @@ describe('RuntimeSection', () => {
expect(screen.getByText('Checked Aug 31, 2026, 10:00 AM')).toBeTruthy();
});
+ it('shows the active custom target kind and sanitized location without credentials', () => {
+ const customLocation = 'https://api.example.test/langgraph';
+ renderSection('ready', {
+ runtimeTargetView: {
+ kind: 'langsmith',
+ label: 'Custom LangSmith',
+ origin: 'https://api.example.test',
+ pathname: '/langgraph',
+ location: customLocation,
+ },
+ });
+
+ expect(screen.getByText('Custom LangSmith')).toBeTruthy();
+ expect(screen.getByText(customLocation)).toBeTruthy();
+ for (const element of document.querySelectorAll(
+ '[data-runtime-section], [data-runtime-section] *'
+ )) {
+ for (const attribute of element.attributes) {
+ expect(attribute.value).not.toContain(customLocation);
+ }
+ }
+ expect(document.body.textContent).not.toContain('test-key-redact-me');
+ });
+
+ it('shows unavailable target metadata for static adapters', () => {
+ renderSection('ready', {
+ runtimeTargetView: {
+ kind: 'none',
+ label: 'Runtime target unavailable',
+ origin: null,
+ pathname: null,
+ location: null,
+ },
+ });
+
+ expect(screen.getByText('Runtime target unavailable')).toBeTruthy();
+ expect(screen.queryByText('Shared development')).toBeNull();
+ });
+
it('shows Not checked yet until a check completes', () => {
renderSection('connecting');
expect(screen.getByText('Not checked yet')).toBeTruthy();
@@ -213,7 +258,7 @@ describe('RuntimeSection', () => {
expect(screen.queryByRole('button', { name: 'Open runtime' })).toBeNull();
});
- it.each(['connecting', 'checking', 'reloading'] as const)(
+ it.each(['configuring', 'connecting', 'checking', 'reloading'] as const)(
'disables Recheck while %s',
(phase) => {
renderSection(phase);
@@ -224,16 +269,20 @@ describe('RuntimeSection', () => {
}
);
- it.each(['ready', 'unresponsive', 'error'] as const)(
- 'enables Recheck while %s',
- (phase) => {
- renderSection(phase);
- expect(
- (screen.getByRole('button', { name: 'Recheck' }) as HTMLButtonElement)
- .disabled
- ).toBe(false);
- }
- );
+ it.each([
+ 'ready',
+ 'unresponsive',
+ 'error',
+ 'unauthorized',
+ 'network_blocked',
+ 'incompatible_bridge',
+ ] as const)('enables Recheck while %s', (phase) => {
+ renderSection(phase);
+ expect(
+ (screen.getByRole('button', { name: 'Recheck' }) as HTMLButtonElement)
+ .disabled
+ ).toBe(false);
+ });
it('disables Reload only while reloading and keeps Open runtime accessible', () => {
const { rerender } = render(
@@ -425,6 +474,10 @@ describe('RuntimeSection', () => {
'a fresh route for the same capability',
{ capability: 'streaming', routeGeneration: 1 },
],
+ [
+ 'a replacement runtime target',
+ { capability: 'streaming', targetGeneration: 1 },
+ ],
] as const)(
'does not announce a stale copy outcome after %s',
async (_label, nextIdentity) => {
diff --git a/libs/workspace-react/src/lib/components/control-plane/runtime-section.tsx b/libs/workspace-react/src/lib/components/control-plane/runtime-section.tsx
index 40cff7d54..dfff3bd07 100644
--- a/libs/workspace-react/src/lib/components/control-plane/runtime-section.tsx
+++ b/libs/workspace-react/src/lib/components/control-plane/runtime-section.tsx
@@ -1,12 +1,7 @@
// SPDX-License-Identifier: MIT
'use client';
-import {
- useLayoutEffect,
- useRef,
- useState,
- type ReactNode,
-} from 'react';
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
import {
CircleCheck,
CircleSlash,
@@ -26,6 +21,7 @@ import type {
RuntimePhase,
RuntimeSnapshot,
} from '../../runtime/runtime-state';
+import type { SanitizedRuntimeTargetDisplay } from '../../runtime/runtime-target-session';
import {
ControlPlaneOverflowMenu,
ControlPlaneOverflowMenuItem,
@@ -46,6 +42,7 @@ export interface RuntimeSectionProps {
onReload: RuntimeCommand;
onOpenRuntime: RuntimeCommand;
onCopyDiagnostics: RuntimeCommand;
+ runtimeTargetView?: SanitizedRuntimeTargetDisplay;
formatCheckedAt?: (timestamp: number) => string;
}
@@ -66,6 +63,11 @@ const STATUS_PRESENTATION: Record = {
icon: TriangleAlert,
iconName: 'triangle-alert',
},
+ configuring: {
+ label: 'Configuring',
+ icon: LoaderCircle,
+ iconName: 'loader-circle',
+ },
connecting: {
label: 'Connecting',
icon: LoaderCircle,
@@ -96,6 +98,21 @@ const STATUS_PRESENTATION: Record = {
icon: TriangleAlert,
iconName: 'triangle-alert',
},
+ unauthorized: {
+ label: 'Unauthorized',
+ icon: TriangleAlert,
+ iconName: 'triangle-alert',
+ },
+ network_blocked: {
+ label: 'Network blocked',
+ icon: TriangleAlert,
+ iconName: 'triangle-alert',
+ },
+ incompatible_bridge: {
+ label: 'Incompatible runtime',
+ icon: TriangleAlert,
+ iconName: 'triangle-alert',
+ },
};
function RuntimeStatus({ phase }: { phase: RuntimePhase }) {
@@ -134,6 +151,7 @@ export function RuntimeSection({
onReload,
onOpenRuntime,
onCopyDiagnostics,
+ runtimeTargetView,
formatCheckedAt = defaultCheckedAt,
}: RuntimeSectionProps) {
const [announcement, setAnnouncement] = useState({
@@ -145,15 +163,23 @@ export function RuntimeSection({
const operationalIdentityRef = useRef({
capability: snapshot.capability,
routeGeneration: snapshot.routeGeneration,
+ targetGeneration: snapshot.targetGeneration,
generation: 0,
});
const phase = snapshot.phase;
const configured = snapshot.target.kind === 'configured';
const invalid = snapshot.target.kind === 'invalid_configuration';
- const sanitizedTarget =
- snapshot.target.kind === 'configured' ? snapshot.target.sanitizedUrl : null;
+ const targetLabel = runtimeTargetView?.label ?? 'Shared development';
+ const sanitizedTarget = runtimeTargetView
+ ? runtimeTargetView.location
+ : snapshot.target.kind === 'configured'
+ ? snapshot.target.sanitizedUrl
+ : null;
const checking =
- phase === 'connecting' || phase === 'checking' || phase === 'reloading';
+ phase === 'configuring' ||
+ phase === 'connecting' ||
+ phase === 'checking' ||
+ phase === 'reloading';
useLayoutEffect(() => {
mountedRef.current = true;
@@ -167,13 +193,15 @@ export function RuntimeSection({
const identity = operationalIdentityRef.current;
if (
identity.capability === snapshot.capability &&
- identity.routeGeneration === snapshot.routeGeneration
+ identity.routeGeneration === snapshot.routeGeneration &&
+ identity.targetGeneration === snapshot.targetGeneration
) {
return;
}
operationalIdentityRef.current = {
capability: snapshot.capability,
routeGeneration: snapshot.routeGeneration,
+ targetGeneration: snapshot.targetGeneration,
generation: identity.generation + 1,
};
commandSequenceRef.current += 1;
@@ -181,7 +209,11 @@ export function RuntimeSection({
message: '',
revision: current.revision + 1,
}));
- }, [snapshot.capability, snapshot.routeGeneration]);
+ }, [
+ snapshot.capability,
+ snapshot.routeGeneration,
+ snapshot.targetGeneration,
+ ]);
const publishAnnouncement = (message: string) => {
setAnnouncement((current) => ({
@@ -310,18 +342,12 @@ export function RuntimeSection({
onOpenChange={onOpenChange}
>
{
act(() => {
root.render(
- renderConcurrent(
- 'https://runtime.test/committed',
- 'streaming',
- false,
- ),
+ renderConcurrent('https://runtime.test/committed', 'streaming', false)
);
});
const committedController = committedConcurrentController;
@@ -567,8 +1239,8 @@ describe('useRuntimeController', () => {
'persistence',
true,
futureOnActivity,
- futureOnTerminalTransition,
- ),
+ futureOnTerminalTransition
+ )
);
});
});
@@ -582,7 +1254,7 @@ describe('useRuntimeController', () => {
nonce: firstNonce,
capability: 'streaming',
},
- 'https://runtime.test',
+ 'https://runtime.test'
);
expect(onActivity.mock.calls.map(([event]) => event.kind)).toEqual([
'runtime_check_requested',
@@ -599,11 +1271,7 @@ describe('useRuntimeController', () => {
act(() => {
root.render(
- renderConcurrent(
- 'https://runtime.test/committed',
- 'streaming',
- false,
- ),
+ renderConcurrent('https://runtime.test/committed', 'streaming', false)
);
});
expect(committedConcurrentController.snapshot).toMatchObject({
@@ -640,7 +1308,7 @@ describe('useRuntimeController', () => {
snapshot: controller.snapshot,
activity: onActivity.mock.calls,
terminal: onTerminalTransition.mock.calls,
- }),
+ })
).not.toMatch(/invalid-secret-[ab]/);
});
@@ -651,13 +1319,13 @@ describe('useRuntimeController', () => {
act(() => controller.onFrameLoad());
expect(
- addEventListener.mock.calls.filter(([type]) => type === 'message'),
+ addEventListener.mock.calls.filter(([type]) => type === 'message')
).toHaveLength(1);
act(() => root.unmount());
expect(vi.getTimerCount()).toBe(0);
expect(
- removeEventListener.mock.calls.filter(([type]) => type === 'message'),
+ removeEventListener.mock.calls.filter(([type]) => type === 'message')
).toHaveLength(1);
});
@@ -685,7 +1353,7 @@ describe('useRuntimeController', () => {
1,
configuredUrl,
'_blank',
- 'noopener,noreferrer',
+ 'noopener,noreferrer'
);
expect(onActivity.mock.calls.map(([event]) => event.kind)).toEqual([
'runtime_open_requested',
@@ -702,11 +1370,15 @@ describe('useRuntimeController', () => {
.mockReturnValueOnce(firstNonce)
.mockReturnValueOnce(firstEventId)
.mockReturnValueOnce(secondEventId);
- render('https://runtime.test/path', 'streaming', failure !== 'missing frame window');
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ failure !== 'missing frame window'
+ );
if (failure === 'postMessage failure') {
vi.spyOn(
controller.frameRef.current!.contentWindow!,
- 'postMessage',
+ 'postMessage'
).mockImplementation(() => {
throw new Error('cross-origin failure');
});
@@ -723,6 +1395,6 @@ describe('useRuntimeController', () => {
'runtime_check_requested',
'runtime_unresponsive',
]);
- },
+ }
);
});
diff --git a/libs/workspace-react/src/lib/runtime/use-runtime-controller.ts b/libs/workspace-react/src/lib/runtime/use-runtime-controller.ts
index 257d7a022..b52b5e257 100644
--- a/libs/workspace-react/src/lib/runtime/use-runtime-controller.ts
+++ b/libs/workspace-react/src/lib/runtime/use-runtime-controller.ts
@@ -11,10 +11,23 @@ import {
type RefObject,
} from 'react';
import {
+ parseRuntimeChildReadyMessage,
+ parseRuntimeConfigurationResponseMessage,
parseRuntimeResponseMessage,
RUNTIME_BRIDGE_VERSION,
+ RUNTIME_CONFIGURATION_VERSION,
+ type RuntimeConfigurationTarget,
} from '@threadplane/cockpit-runtime-bridge';
-import type { RuntimeActivityInput } from './session-activity';
+import type {
+ RuntimeActivityContext,
+ RuntimeActivityInput,
+} from './session-activity';
+import {
+ areEffectiveRuntimeTargetsEqual,
+ type EffectiveRuntimeTarget,
+ validateAgUiTarget,
+ validateLangGraphTarget,
+} from './runtime-target-session';
import {
classifyRuntimeTerminalTransition,
createRuntimeSnapshot,
@@ -27,19 +40,24 @@ import {
} from './runtime-state';
const RUNTIME_CHECK_TIMEOUT_MS = 5_000;
+const RUNTIME_CONFIGURE_RETRY_MS = 250;
+const RUNTIME_CONFIGURATION_TIMEOUT_MS = 5_000;
export interface UseRuntimeControllerOptions {
runtimeUrl: string | null;
capability: string;
+ effectiveTarget: EffectiveRuntimeTarget;
onActivity(event: RuntimeActivityInput): void;
onTerminalTransition(event: RuntimeTerminalTransition): void;
}
export interface RuntimeController {
snapshot: RuntimeSnapshot;
+ runtimeContext: RuntimeActivityContext;
validatedRuntimeUrl: string | null;
frameRef: RefObject;
frameGeneration: number;
+ targetGeneration: number;
onFrameLoad(): void;
recheck(): void;
reload(): void;
@@ -51,23 +69,42 @@ interface RouteContext {
target: RuntimeTarget;
capability: string;
invalidInputRevision: symbol | null;
+ effectiveTarget: EffectiveRuntimeTarget;
+ targetGeneration: number;
}
interface ActiveCheck {
nonce: string;
routeToken: number;
+ targetGeneration: number;
capability: string;
origin: string;
frameWindow: Window | null;
}
+interface FrameSession {
+ routeToken: number;
+ targetGeneration: number;
+ origin: string;
+ frameWindow: Window;
+ loaded: boolean;
+ nonce: string | null;
+ status: 'awaiting' | 'configured' | 'failed';
+}
+
+interface ConfigurationAttempt {
+ routeToken: number;
+ targetGeneration: number;
+ status: 'awaiting' | 'configured' | 'failed';
+}
+
type RuntimeControllerActivityKind = Exclude<
RuntimeActivityInput['kind'],
'mode_changed'
>;
function activityKindFor(
- transition: RuntimeTerminalTransition,
+ transition: RuntimeTerminalTransition
): RuntimeControllerActivityKind {
switch (transition.toState) {
case 'invalid_configuration':
@@ -80,12 +117,18 @@ function activityKindFor(
return 'runtime_unresponsive';
case 'error':
return 'runtime_initialization_error';
+ case 'unauthorized':
+ return 'runtime_unauthorized';
+ case 'network_blocked':
+ return 'runtime_network_blocked';
+ case 'incompatible_bridge':
+ return 'runtime_incompatible_bridge';
}
}
function isSameOperationalRoute(
previous: RouteContext,
- next: Omit,
+ next: Omit
): boolean {
if (
previous.capability !== next.capability ||
@@ -107,23 +150,95 @@ function isSameOperationalRoute(
}
}
+function configurationTargetFor(
+ effectiveTarget: EffectiveRuntimeTarget
+): RuntimeConfigurationTarget | null {
+ switch (effectiveTarget.adapter) {
+ case 'none':
+ return null;
+ case 'ag-ui':
+ return effectiveTarget.target.kind === 'shared'
+ ? { kind: 'shared' }
+ : {
+ kind: 'ag-ui',
+ endpoint: effectiveTarget.target.endpoint,
+ };
+ case 'langgraph':
+ return effectiveTarget.target.kind === 'shared'
+ ? { kind: 'shared' }
+ : {
+ kind: 'langsmith',
+ apiUrl: effectiveTarget.target.apiUrl,
+ apiKey: effectiveTarget.target.apiKey,
+ };
+ }
+}
+
+function runtimeContextFor(
+ snapshot: RuntimeSnapshot,
+ effectiveTarget: EffectiveRuntimeTarget
+): RuntimeActivityContext {
+ return {
+ adapter: effectiveTarget.adapter,
+ targetKind: effectiveTarget.target?.kind ?? 'none',
+ protocolVersion:
+ effectiveTarget.adapter === 'none'
+ ? RUNTIME_BRIDGE_VERSION
+ : RUNTIME_CONFIGURATION_VERSION,
+ configurationGeneration: snapshot.targetGeneration,
+ phase: snapshot.phase,
+ reasonCode:
+ snapshot.phase === 'invalid_configuration'
+ ? 'invalid_runtime_url'
+ : snapshot.errorCode,
+ };
+}
+
+function frameSessionMatchesRoute(
+ session: FrameSession,
+ route: RouteContext
+): boolean {
+ return (
+ route.target.kind === 'configured' &&
+ session.routeToken === route.token &&
+ session.targetGeneration === route.targetGeneration &&
+ session.origin === route.target.origin
+ );
+}
+
+function configurationAttemptMatchesRoute(
+ attempt: ConfigurationAttempt,
+ route: RouteContext
+): boolean {
+ return (
+ attempt.routeToken === route.token &&
+ attempt.targetGeneration === route.targetGeneration
+ );
+}
+
export function useRuntimeController({
runtimeUrl,
capability,
+ effectiveTarget,
onActivity,
onTerminalTransition,
}: UseRuntimeControllerOptions): RuntimeController {
const target = useMemo(() => parseRuntimeTarget(runtimeUrl), [runtimeUrl]);
- const [snapshot, dispatch] = useReducer(
- runtimeReducer,
- undefined,
- () => createRuntimeSnapshot(target, capability),
+ const [snapshot, dispatch] = useReducer(runtimeReducer, undefined, () =>
+ createRuntimeSnapshot(target, capability)
);
const snapshotRef = useRef(snapshot);
const frameRef = useRef(null);
const timeoutRef = useRef | null>(null);
+ const configurationRetryRef = useRef | null>(
+ null
+ );
+ const configurationDeadlineRef = useRef | null>(
+ null
+ );
const activeCheckRef = useRef(null);
+ const frameSessionRef = useRef(null);
const onActivityRef = useRef(onActivity);
const onTerminalTransitionRef = useRef(onTerminalTransition);
@@ -137,67 +252,187 @@ export function useRuntimeController({
target.kind === 'invalid_configuration'
? Symbol('invalid runtime input')
: null,
- [runtimeUrl, target.kind],
+ [runtimeUrl, target.kind]
);
- const renderedRoute = useMemo>(
- () => ({ target, capability, invalidInputRevision }),
- [target, capability, invalidInputRevision],
+ const effectiveAdapter = effectiveTarget.adapter;
+ const effectiveTargetKind = effectiveTarget.target?.kind ?? null;
+ const effectiveAgUiEndpoint =
+ effectiveTarget.adapter === 'ag-ui' &&
+ effectiveTarget.target.kind === 'ag-ui'
+ ? effectiveTarget.target.endpoint
+ : null;
+ const effectiveLangSmithApiUrl =
+ effectiveTarget.adapter === 'langgraph' &&
+ effectiveTarget.target.kind === 'langsmith'
+ ? effectiveTarget.target.apiUrl
+ : null;
+ const effectiveLangSmithApiKey =
+ effectiveTarget.adapter === 'langgraph' &&
+ effectiveTarget.target.kind === 'langsmith'
+ ? effectiveTarget.target.apiKey
+ : null;
+ const committedEffectiveTarget = useMemo(() => {
+ switch (effectiveAdapter) {
+ case 'none':
+ return Object.freeze({ adapter: 'none', target: null });
+ case 'ag-ui':
+ if (effectiveTargetKind === 'ag-ui' && effectiveAgUiEndpoint !== null) {
+ const validated = validateAgUiTarget(effectiveAgUiEndpoint);
+ return Object.freeze({
+ adapter: 'ag-ui',
+ target: Object.freeze({
+ kind: 'ag-ui',
+ endpoint: validated.ok
+ ? validated.value.endpoint
+ : effectiveAgUiEndpoint,
+ }),
+ });
+ }
+ return Object.freeze({
+ adapter: 'ag-ui',
+ target: Object.freeze({ kind: 'shared' }),
+ });
+ case 'langgraph':
+ if (
+ effectiveTargetKind === 'langsmith' &&
+ effectiveLangSmithApiUrl !== null &&
+ effectiveLangSmithApiKey !== null
+ ) {
+ const validated = validateLangGraphTarget(
+ effectiveLangSmithApiUrl,
+ effectiveLangSmithApiKey
+ );
+ return Object.freeze({
+ adapter: 'langgraph',
+ target: Object.freeze({
+ kind: 'langsmith',
+ apiUrl: validated.ok
+ ? validated.value.apiUrl
+ : effectiveLangSmithApiUrl,
+ apiKey: effectiveLangSmithApiKey,
+ }),
+ });
+ }
+ return Object.freeze({
+ adapter: 'langgraph',
+ target: Object.freeze({ kind: 'shared' }),
+ });
+ }
+ }, [
+ effectiveAdapter,
+ effectiveTargetKind,
+ effectiveAgUiEndpoint,
+ effectiveLangSmithApiUrl,
+ effectiveLangSmithApiKey,
+ ]);
+ const renderedRoute = useMemo<
+ Omit
+ >(
+ () => ({
+ target,
+ capability,
+ invalidInputRevision,
+ effectiveTarget: committedEffectiveTarget,
+ }),
+ [target, capability, invalidInputRevision, committedEffectiveTarget]
);
const routeContextRef = useRef({
token: 0,
+ targetGeneration: 0,
...renderedRoute,
});
+ const configurationAttemptRef = useRef(
+ target.kind === 'configured' && committedEffectiveTarget.adapter !== 'none'
+ ? { routeToken: 0, targetGeneration: 0, status: 'awaiting' }
+ : null
+ );
const applyAction = useCallback((action: RuntimeAction) => {
snapshotRef.current = runtimeReducer(snapshotRef.current, action);
dispatch(action);
}, []);
- const clearTimer = useCallback(() => {
+ const clearCheckTimer = useCallback(() => {
if (timeoutRef.current !== null) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
}
}, []);
+ const clearConfigurationRetry = useCallback(() => {
+ if (configurationRetryRef.current !== null) {
+ clearTimeout(configurationRetryRef.current);
+ configurationRetryRef.current = null;
+ }
+ }, []);
+
+ const clearConfigurationTimers = useCallback(() => {
+ clearConfigurationRetry();
+ if (configurationDeadlineRef.current !== null) {
+ clearTimeout(configurationDeadlineRef.current);
+ configurationDeadlineRef.current = null;
+ }
+ }, [clearConfigurationRetry]);
+
const cancelActiveCheck = useCallback(
(updateState: boolean) => {
const hadActiveCheck = activeCheckRef.current !== null;
activeCheckRef.current = null;
- clearTimer();
+ clearCheckTimer();
if (hadActiveCheck && updateState) {
applyAction({ type: 'check_cancelled' });
}
},
- [applyAction, clearTimer],
+ [applyAction, clearCheckTimer]
);
+ const cancelFrameSession = useCallback(() => {
+ clearConfigurationTimers();
+ frameSessionRef.current = null;
+ }, [clearConfigurationTimers]);
+
const recordActivity = useCallback(
- (kind: RuntimeControllerActivityKind, eventCapability: string) => {
+ (
+ kind: RuntimeControllerActivityKind,
+ eventCapability: string,
+ state = snapshotRef.current
+ ) => {
+ const route = routeContextRef.current;
onActivityRef.current({
id: globalThis.crypto.randomUUID(),
at: new Date().toISOString(),
kind,
capability: eventCapability,
+ ...(route.effectiveTarget.adapter === 'none'
+ ? {}
+ : { runtime: runtimeContextFor(state, route.effectiveTarget) }),
});
},
- [],
+ []
);
const settleActiveCheck = useCallback(
(activeCheck: ActiveCheck, action: RuntimeAction) => {
if (activeCheckRef.current !== activeCheck) return;
activeCheckRef.current = null;
- clearTimer();
+ clearCheckTimer();
applyAction(action);
},
- [applyAction, clearTimer],
+ [applyAction, clearCheckTimer]
);
const startCheck = useCallback(
(intent: 'frame_load' | 'recheck') => {
const route = routeContextRef.current;
if (route.target.kind !== 'configured') return;
+ if (
+ route.effectiveTarget.adapter !== 'none' &&
+ (!frameSessionRef.current ||
+ !frameSessionMatchesRoute(frameSessionRef.current, route) ||
+ frameSessionRef.current.status !== 'configured')
+ ) {
+ return;
+ }
cancelActiveCheck(true);
@@ -207,6 +442,7 @@ export function useRuntimeController({
const activeCheck: ActiveCheck = {
nonce,
routeToken: route.token,
+ targetGeneration: route.targetGeneration,
capability: route.capability,
origin: route.target.origin,
frameWindow,
@@ -220,6 +456,7 @@ export function useRuntimeController({
if (
activeCheckRef.current !== activeCheck ||
currentRoute.token !== activeCheck.routeToken ||
+ currentRoute.targetGeneration !== activeCheck.targetGeneration ||
currentRoute.capability !== activeCheck.capability
) {
return;
@@ -242,7 +479,7 @@ export function useRuntimeController({
nonce,
capability: route.capability,
},
- route.target.origin,
+ route.target.origin
);
} catch {
settleActiveCheck(activeCheck, {
@@ -251,23 +488,252 @@ export function useRuntimeController({
at: Date.now(),
});
}
- }, [applyAction, cancelActiveCheck, recordActivity, settleActiveCheck]);
+ },
+ [applyAction, cancelActiveCheck, recordActivity, settleActiveCheck]
+ );
+
+ const postConfiguration = useCallback((session: FrameSession) => {
+ const route = routeContextRef.current;
+ const configurationTarget = configurationTargetFor(route.effectiveTarget);
+ if (
+ session.nonce === null ||
+ session.status !== 'awaiting' ||
+ configurationTarget === null ||
+ !frameSessionMatchesRoute(session, route) ||
+ frameSessionRef.current !== session
+ ) {
+ return;
+ }
+ try {
+ session.frameWindow.postMessage(
+ {
+ type: 'tplane:runtime-configure',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce: session.nonce,
+ generation: session.targetGeneration,
+ target: configurationTarget,
+ },
+ session.origin
+ );
+ } catch {
+ // The bounded deadline remains authoritative if the frame disappears.
+ }
+ }, []);
+
+ const startConfigurationDeadline = useCallback(
+ (routeToken: number, targetGeneration: number) => {
+ if (configurationDeadlineRef.current !== null) return;
+ configurationDeadlineRef.current = setTimeout(() => {
+ configurationDeadlineRef.current = null;
+ const route = routeContextRef.current;
+ const attempt = configurationAttemptRef.current;
+ if (
+ route.token !== routeToken ||
+ route.targetGeneration !== targetGeneration ||
+ route.effectiveTarget.adapter === 'none' ||
+ attempt === null ||
+ !configurationAttemptMatchesRoute(attempt, route) ||
+ attempt.status !== 'awaiting'
+ ) {
+ return;
+ }
+ const session = frameSessionRef.current;
+ if (
+ session !== null &&
+ frameSessionMatchesRoute(session, route) &&
+ session.status === 'configured'
+ ) {
+ return;
+ }
+ clearConfigurationTimers();
+ attempt.status = 'failed';
+ if (session !== null && frameSessionMatchesRoute(session, route)) {
+ session.status = 'failed';
+ }
+ cancelActiveCheck(false);
+ applyAction({
+ type: 'runtime_failure',
+ code: 'incompatible_bridge',
+ at: Date.now(),
+ });
+ }, RUNTIME_CONFIGURATION_TIMEOUT_MS);
+ },
+ [applyAction, cancelActiveCheck, clearConfigurationTimers]
+ );
+
+ const startConfigurationRetry = useCallback(
+ (session: FrameSession) => {
+ const retry = () => {
+ if (
+ frameSessionRef.current !== session ||
+ session.status !== 'awaiting'
+ ) {
+ return;
+ }
+ postConfiguration(session);
+ if (session.nonce !== null) {
+ configurationRetryRef.current = setTimeout(
+ retry,
+ RUNTIME_CONFIGURE_RETRY_MS
+ );
+ }
+ };
+ retry();
+ },
+ [postConfiguration]
+ );
+
+ const startConfigurationAttempt = useCallback(
+ (session: FrameSession) => {
+ const route = routeContextRef.current;
+ const attempt = configurationAttemptRef.current;
+ if (
+ attempt === null ||
+ !configurationAttemptMatchesRoute(attempt, route) ||
+ attempt.status !== 'awaiting' ||
+ !frameSessionMatchesRoute(session, route)
+ ) {
+ return;
+ }
+ session.status = 'awaiting';
+ applyAction({ type: 'configuration_started' });
+ if (configurationRetryRef.current !== null) {
+ postConfiguration(session);
+ } else {
+ startConfigurationRetry(session);
+ }
+ startConfigurationDeadline(session.routeToken, session.targetGeneration);
+ },
+ [
+ applyAction,
+ postConfiguration,
+ startConfigurationDeadline,
+ startConfigurationRetry,
+ ]
+ );
+
+ const getOrCreateFrameSession = useCallback((): FrameSession | null => {
+ const route = routeContextRef.current;
+ if (
+ route.target.kind !== 'configured' ||
+ route.effectiveTarget.adapter === 'none'
+ ) {
+ return null;
+ }
+ const attempt = configurationAttemptRef.current;
+ if (
+ attempt === null ||
+ !configurationAttemptMatchesRoute(attempt, route) ||
+ attempt.status === 'failed'
+ ) {
+ return null;
+ }
+ const frameWindow = frameRef.current?.contentWindow ?? null;
+ if (frameWindow === null) return null;
+ const existing = frameSessionRef.current;
+ if (
+ existing &&
+ existing.frameWindow === frameWindow &&
+ frameSessionMatchesRoute(existing, route)
+ ) {
+ return existing;
+ }
+ clearConfigurationRetry();
+ frameSessionRef.current = null;
+ const session: FrameSession = {
+ routeToken: route.token,
+ targetGeneration: route.targetGeneration,
+ origin: route.target.origin,
+ frameWindow,
+ loaded: false,
+ nonce: null,
+ status: 'awaiting',
+ };
+ frameSessionRef.current = session;
+ return session;
+ }, [clearConfigurationRetry]);
const onFrameLoad = useCallback(() => {
- startCheck('frame_load');
- }, [startCheck]);
+ const route = routeContextRef.current;
+ if (route.effectiveTarget.adapter === 'none') {
+ startCheck('frame_load');
+ return;
+ }
+ const session = getOrCreateFrameSession();
+ if (session === null) return;
+ session.loaded = true;
+ if (session.status === 'configured') {
+ startCheck('frame_load');
+ } else if (session.status === 'awaiting') {
+ startConfigurationAttempt(session);
+ }
+ }, [getOrCreateFrameSession, startCheck, startConfigurationAttempt]);
const recheck = useCallback(() => {
- startCheck('recheck');
- }, [startCheck]);
+ const route = routeContextRef.current;
+ if (route.effectiveTarget.adapter === 'none') {
+ startCheck('recheck');
+ return;
+ }
+ const currentAttempt = configurationAttemptRef.current;
+ if (
+ currentAttempt === null ||
+ !configurationAttemptMatchesRoute(currentAttempt, route) ||
+ currentAttempt.status === 'failed'
+ ) {
+ clearConfigurationTimers();
+ const session = frameSessionRef.current;
+ if (session !== null && frameSessionMatchesRoute(session, route)) {
+ session.status = 'awaiting';
+ }
+ configurationAttemptRef.current = {
+ routeToken: route.token,
+ targetGeneration: route.targetGeneration,
+ status: 'awaiting',
+ };
+ applyAction({ type: 'configuration_started' });
+ startConfigurationDeadline(route.token, route.targetGeneration);
+ }
+ const session = getOrCreateFrameSession();
+ if (session === null) return;
+ if (session.status === 'configured') {
+ startCheck('recheck');
+ return;
+ }
+ startConfigurationAttempt(session);
+ }, [
+ applyAction,
+ clearConfigurationTimers,
+ getOrCreateFrameSession,
+ startCheck,
+ startConfigurationAttempt,
+ startConfigurationDeadline,
+ ]);
const reload = useCallback(() => {
const route = routeContextRef.current;
if (route.target.kind !== 'configured') return;
cancelActiveCheck(true);
+ cancelFrameSession();
applyAction({ type: 'reload_requested' });
+ if (route.effectiveTarget.adapter !== 'none') {
+ configurationAttemptRef.current = {
+ routeToken: route.token,
+ targetGeneration: route.targetGeneration,
+ status: 'awaiting',
+ };
+ startConfigurationDeadline(route.token, route.targetGeneration);
+ } else {
+ configurationAttemptRef.current = null;
+ }
recordActivity('runtime_reload_requested', route.capability);
- }, [applyAction, cancelActiveCheck, recordActivity]);
+ }, [
+ applyAction,
+ cancelActiveCheck,
+ cancelFrameSession,
+ recordActivity,
+ startConfigurationDeadline,
+ ]);
const open = useCallback((): 'requested' | 'failed' => {
const route = routeContextRef.current;
@@ -275,11 +741,7 @@ export function useRuntimeController({
recordActivity('runtime_open_requested', route.capability);
try {
if (typeof window.open !== 'function') return 'failed';
- window.open(
- route.target.configuredUrl,
- '_blank',
- 'noopener,noreferrer',
- );
+ window.open(route.target.configuredUrl, '_blank', 'noopener,noreferrer');
return 'requested';
} catch {
return 'failed';
@@ -287,50 +749,105 @@ export function useRuntimeController({
}, [recordActivity]);
useLayoutEffect(() => {
- const previousRoute = routeContextRef.current;
- const routeChanged = !isSameOperationalRoute(
- previousRoute,
- renderedRoute,
- );
- if (routeChanged) {
- cancelActiveCheck(false);
- }
-
- const committedRoute: RouteContext = {
- ...renderedRoute,
- token: routeChanged ? previousRoute.token + 1 : previousRoute.token,
- };
- routeContextRef.current = committedRoute;
-
- if (routeChanged) {
- applyAction({
- type: 'route_reset',
- target: committedRoute.target,
- capability: committedRoute.capability,
- });
- }
- }, [renderedRoute, applyAction, cancelActiveCheck]);
-
- useLayoutEffect(
- () => () => cancelActiveCheck(false),
- [cancelActiveCheck],
- );
-
- useEffect(() => {
const handleMessage = (event: MessageEvent) => {
- const activeCheck = activeCheckRef.current;
const route = routeContextRef.current;
const frameWindow = frameRef.current?.contentWindow ?? null;
if (
- activeCheck === null ||
frameWindow === null ||
+ route.target.kind !== 'configured' ||
event.source !== frameWindow ||
+ event.origin !== route.target.origin
+ ) {
+ return;
+ }
+
+ if (route.effectiveTarget.adapter !== 'none') {
+ const childReady = parseRuntimeChildReadyMessage(event.data);
+ if (childReady !== null) {
+ const session = getOrCreateFrameSession();
+ if (session === null || session.status === 'failed') return;
+ if (session.nonce !== null && session.nonce !== childReady.nonce) {
+ return;
+ }
+ if (session.status === 'configured') return;
+ session.nonce = childReady.nonce;
+ startConfigurationAttempt(session);
+ return;
+ }
+
+ const response = parseRuntimeConfigurationResponseMessage(event.data);
+ if (response !== null) {
+ const session = frameSessionRef.current;
+ if (
+ session === null ||
+ !frameSessionMatchesRoute(session, route) ||
+ event.source !== session.frameWindow ||
+ event.origin !== session.origin ||
+ session.nonce !== response.nonce ||
+ session.targetGeneration !== response.generation
+ ) {
+ return;
+ }
+
+ if (response.type === 'tplane:runtime-configured') {
+ if (session.status !== 'awaiting') return;
+ const attempt = configurationAttemptRef.current;
+ if (
+ attempt === null ||
+ !configurationAttemptMatchesRoute(attempt, route) ||
+ attempt.status !== 'awaiting'
+ ) {
+ return;
+ }
+ clearConfigurationTimers();
+ session.status = 'configured';
+ attempt.status = 'configured';
+ applyAction({ type: 'configuration_succeeded' });
+ if (session.loaded) startCheck('frame_load');
+ return;
+ }
+
+ if (session.status === 'failed') return;
+ if (response.type === 'tplane:runtime-configuration-failed') {
+ const attempt = configurationAttemptRef.current;
+ if (
+ attempt === null ||
+ !configurationAttemptMatchesRoute(attempt, route) ||
+ attempt.status !== 'awaiting'
+ ) {
+ return;
+ }
+ clearConfigurationTimers();
+ session.status = 'failed';
+ attempt.status = 'failed';
+ cancelActiveCheck(false);
+ applyAction({
+ type: 'runtime_failure',
+ code: 'incompatible_bridge',
+ at: Date.now(),
+ });
+ return;
+ }
+
+ if (session.status !== 'configured') return;
+ cancelActiveCheck(false);
+ applyAction({
+ type: 'runtime_failure',
+ code: response.code,
+ at: Date.now(),
+ });
+ return;
+ }
+ }
+
+ const activeCheck = activeCheckRef.current;
+ if (
+ activeCheck === null ||
event.source !== activeCheck.frameWindow ||
event.origin !== activeCheck.origin ||
route.token !== activeCheck.routeToken ||
- route.capability !== activeCheck.capability ||
- route.target.kind !== 'configured' ||
- route.target.origin !== activeCheck.origin
+ route.targetGeneration !== activeCheck.targetGeneration ||
+ route.capability !== activeCheck.capability
) {
return;
}
@@ -357,7 +874,100 @@ export function useRuntimeController({
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
- }, [settleActiveCheck]);
+ }, [
+ applyAction,
+ cancelActiveCheck,
+ clearConfigurationTimers,
+ getOrCreateFrameSession,
+ settleActiveCheck,
+ startCheck,
+ startConfigurationAttempt,
+ ]);
+
+ useLayoutEffect(() => {
+ const previousRoute = routeContextRef.current;
+ const routeChanged = !isSameOperationalRoute(previousRoute, renderedRoute);
+ const targetChanged = !areEffectiveRuntimeTargetsEqual(
+ previousRoute.effectiveTarget,
+ renderedRoute.effectiveTarget
+ );
+ if (routeChanged || targetChanged) {
+ cancelActiveCheck(false);
+ cancelFrameSession();
+ }
+
+ const committedRoute: RouteContext = {
+ ...renderedRoute,
+ token: routeChanged ? previousRoute.token + 1 : previousRoute.token,
+ targetGeneration:
+ previousRoute.targetGeneration + (targetChanged ? 1 : 0),
+ };
+ routeContextRef.current = committedRoute;
+
+ if (routeChanged || targetChanged) {
+ applyAction({
+ type: 'context_reset',
+ target: committedRoute.target,
+ capability: committedRoute.capability,
+ routeChanged,
+ targetChanged,
+ });
+ }
+
+ const requiresConfiguration =
+ committedRoute.target.kind === 'configured' &&
+ committedRoute.effectiveTarget.adapter !== 'none';
+ if (routeChanged || targetChanged) {
+ configurationAttemptRef.current = requiresConfiguration
+ ? {
+ routeToken: committedRoute.token,
+ targetGeneration: committedRoute.targetGeneration,
+ status: 'awaiting',
+ }
+ : null;
+ } else if (!requiresConfiguration) {
+ configurationAttemptRef.current = null;
+ } else if (
+ configurationAttemptRef.current === null ||
+ !configurationAttemptMatchesRoute(
+ configurationAttemptRef.current,
+ committedRoute
+ )
+ ) {
+ configurationAttemptRef.current = {
+ routeToken: committedRoute.token,
+ targetGeneration: committedRoute.targetGeneration,
+ status: 'awaiting',
+ };
+ }
+
+ if (
+ requiresConfiguration &&
+ configurationAttemptRef.current?.status === 'awaiting'
+ ) {
+ if (snapshotRef.current.phase !== 'configuring') {
+ applyAction({ type: 'configuration_started' });
+ }
+ startConfigurationDeadline(
+ committedRoute.token,
+ committedRoute.targetGeneration
+ );
+ }
+ }, [
+ renderedRoute,
+ applyAction,
+ cancelActiveCheck,
+ cancelFrameSession,
+ startConfigurationDeadline,
+ ]);
+
+ useLayoutEffect(
+ () => () => {
+ cancelActiveCheck(false);
+ cancelFrameSession();
+ },
+ [cancelActiveCheck, cancelFrameSession]
+ );
const initialReportedSnapshotRef = useRef(null);
if (initialReportedSnapshotRef.current === null) {
@@ -373,15 +983,26 @@ export function useRuntimeController({
const transition = classifyRuntimeTerminalTransition(previous, snapshot);
if (transition === null) return;
onTerminalTransitionRef.current(transition);
- recordActivity(activityKindFor(transition), transition.capability);
+ recordActivity(
+ activityKindFor(transition),
+ transition.capability,
+ snapshot
+ );
}, [snapshot, recordActivity]);
+ const runtimeContext = runtimeContextFor(
+ snapshot,
+ routeContextRef.current.effectiveTarget
+ );
+
return {
snapshot,
+ runtimeContext,
validatedRuntimeUrl:
target.kind === 'configured' ? target.sanitizedUrl : null,
frameRef,
frameGeneration: snapshot.frameGeneration,
+ targetGeneration: snapshot.targetGeneration,
onFrameLoad,
recheck,
reload,
diff --git a/libs/workspace-react/src/lib/workspace-provider.spec.tsx b/libs/workspace-react/src/lib/workspace-provider.spec.tsx
index 581727fef..4e3be37db 100644
--- a/libs/workspace-react/src/lib/workspace-provider.spec.tsx
+++ b/libs/workspace-react/src/lib/workspace-provider.spec.tsx
@@ -15,6 +15,11 @@ import {
useWorkspace,
type WorkspaceProviderProps,
} from './workspace-provider';
+import { RuntimeTargetProvider } from './runtime/runtime-target-provider';
+import {
+ useAgUiRuntimeTarget,
+ useLangGraphRuntimeTarget,
+} from './runtime/runtime-target-provider';
const identity: WorkspaceIdentity = {
id: 'langgraph:core-capabilities:streaming:overview:python',
@@ -87,8 +92,62 @@ function Readout() {
);
}
+function RuntimeGenerationReadout() {
+ const workspace = useWorkspace();
+ return (
+
+ );
+}
+
+function RuntimeTargetControls() {
+ const agUi = useAgUiRuntimeTarget();
+ const langgraph = useLangGraphRuntimeTarget();
+ return (
+ <>
+
+
+
+ );
+}
+
type ProviderHarnessProps = Omit;
+function TestedWorkspaceProvider(props: WorkspaceProviderProps) {
+ return (
+
+
+ );
+}
+
const providerProps = (
overrides: Partial = {}
): ProviderHarnessProps => ({
@@ -117,9 +176,9 @@ describe('WorkspaceProvider route mode ownership', () => {
it('initializes a syntactically valid and available query mode', () => {
render(
-
+
+
);
expect(screen.getByLabelText('Active mode').textContent).toBe('Code');
@@ -136,7 +195,7 @@ describe('WorkspaceProvider route mode ownership', () => {
};
const replaceMode = vi.fn();
const rendered = render(
- {
})}
>
+
);
expect(screen.getByLabelText('Active mode').textContent).toBe('Docs');
@@ -154,7 +213,7 @@ describe('WorkspaceProvider route mode ownership', () => {
replaceMode.mockClear();
rendered.rerender(
- {
})}
>
+
);
await waitFor(() => expect(replaceMode).toHaveBeenCalledWith('Docs'));
});
it('restores modes from route updates and browser Back/Forward events', async () => {
const rendered = render(
-
+
+
);
expect(screen.getByLabelText('Active mode').textContent).toBe('Code');
rendered.rerender(
-
+
+
);
await waitFor(() =>
expect(screen.getByLabelText('Active mode').textContent).toBe('Docs')
@@ -198,7 +257,7 @@ describe('WorkspaceProvider route mode ownership', () => {
it('normalizes repeated popstate mode values through the route default', async () => {
const replaceMode = vi.fn();
render(
- {
})}
>
+
);
expect(screen.getByLabelText('Active mode').textContent).toBe('Code');
@@ -231,7 +290,7 @@ describe('WorkspaceProvider route mode ownership', () => {
const replaceMode = vi.fn();
const trackModeChange = vi.fn();
render(
- {
})}
>
+
);
fireEvent.click(screen.getByRole('button', { name: 'Select Run' }));
@@ -264,9 +323,9 @@ describe('WorkspaceProvider route mode ownership', () => {
it('forwards focus restoration intent to the identity navigation adapter', () => {
const pushIdentity = vi.fn();
render(
-
+
+
);
fireEvent.click(
@@ -293,7 +352,7 @@ describe('WorkspaceProvider route mode ownership', () => {
};
const replaceMode = vi.fn();
const rendered = render(
- {
})}
>
+
);
act(() => {
@@ -317,7 +376,7 @@ describe('WorkspaceProvider route mode ownership', () => {
expect(replaceMode).not.toHaveBeenCalled();
rendered.rerender(
- {
})}
>
+
);
await waitFor(() =>
expect(screen.getByLabelText('Active mode').textContent).toBe('Run')
);
expect(replaceMode).not.toHaveBeenCalled();
});
+
+ it('selects the active adapter slot while the controller alone owns target generation', () => {
+ const runtimeContent = {
+ ...contentBundle,
+ runtimeUrl: 'https://runtime.example.test/frame',
+ };
+ const renderTree = (nextResolution: WorkspaceResolution) => (
+
+
+
+
+ );
+ const rendered = render(renderTree(resolution));
+ const readGenerations = () =>
+ JSON.parse(
+ screen.getByLabelText('Runtime generations').textContent ?? ''
+ );
+
+ expect(readGenerations()).toMatchObject({
+ adapter: 'langgraph',
+ phase: 'configuring',
+ targetGeneration: 0,
+ frameGeneration: 0,
+ routeGeneration: 0,
+ });
+
+ fireEvent.click(screen.getByRole('button', { name: 'Apply AG-UI' }));
+ expect(readGenerations()).toMatchObject({
+ adapter: 'langgraph',
+ targetGeneration: 0,
+ frameGeneration: 0,
+ });
+
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+ expect(readGenerations()).toMatchObject({
+ adapter: 'langgraph',
+ targetGeneration: 1,
+ frameGeneration: 1,
+ routeGeneration: 0,
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+ expect(readGenerations().targetGeneration).toBe(1);
+
+ const agUiIdentity: WorkspaceIdentity = {
+ ...identity,
+ id: 'ag-ui:agents:streaming:overview:python',
+ product: 'ag-ui',
+ runtimeAdapter: 'ag-ui',
+ };
+ rendered.rerender(renderTree({ kind: 'mapped', identity: agUiIdentity }));
+ expect(readGenerations()).toMatchObject({
+ adapter: 'ag-ui',
+ targetGeneration: 2,
+ frameGeneration: 2,
+ routeGeneration: 0,
+ });
+ expect(screen.getByLabelText('Runtime generations').outerHTML).not.toMatch(
+ /api\.example\.test|agents\.example\.test|test-key-redact-me/i
+ );
+ });
});
diff --git a/libs/workspace-react/src/lib/workspace-provider.tsx b/libs/workspace-react/src/lib/workspace-provider.tsx
index 05a249663..83112db79 100644
--- a/libs/workspace-react/src/lib/workspace-provider.tsx
+++ b/libs/workspace-react/src/lib/workspace-provider.tsx
@@ -42,6 +42,7 @@ import {
type RuntimeActivityInput,
} from './runtime/session-activity';
import { copyRuntimeDiagnostics } from './runtime/runtime-diagnostics';
+import { useEffectiveRuntimeTarget } from './runtime/runtime-target-provider';
import { useRuntimeController } from './runtime/use-runtime-controller';
import type {
WorkspaceContextValue,
@@ -192,6 +193,9 @@ export function WorkspaceProvider({
resolution.kind === 'mapped'
? resolution.identity.topic
: resolution.docsPath;
+ const runtimeAdapter =
+ resolution.kind === 'mapped' ? resolution.identity.runtimeAdapter : 'none';
+ const effectiveRuntimeTarget = useEffectiveRuntimeTarget(runtimeAdapter);
const appendActivity = useCallback((input: RuntimeActivityInput) => {
dispatchActivity({
@@ -212,6 +216,7 @@ export function WorkspaceProvider({
? contentBundle.runtimeUrl
: null,
capability,
+ effectiveTarget: effectiveRuntimeTarget,
onActivity: appendActivity,
onTerminalTransition: handleTerminalTransition,
});
@@ -242,12 +247,7 @@ export function WorkspaceProvider({
lastNormalizationRef.current = null;
}
},
- [
- modeAvailability,
- replaceMode,
- resolution,
- routeKind,
- ]
+ [modeAvailability, replaceMode, resolution, routeKind]
);
const resolutionKey = routeIdentityKey(resolution);
@@ -366,7 +366,12 @@ export function WorkspaceProvider({
const copyDiagnostics = useCallback(async () => {
const snapshot = runtimeController.snapshot;
- const outcome = await copyRuntimeDiagnostics(snapshot, events);
+ const outcome = await copyRuntimeDiagnostics(
+ snapshot,
+ events,
+ undefined,
+ runtimeController.runtimeContext
+ );
appendActivity(
createLocalActivityInput(capability, {
kind:
diff --git a/libs/workspace-react/src/lib/workspace-shell.spec.tsx b/libs/workspace-react/src/lib/workspace-shell.spec.tsx
index 795cc3495..37978799f 100644
--- a/libs/workspace-react/src/lib/workspace-shell.spec.tsx
+++ b/libs/workspace-react/src/lib/workspace-shell.spec.tsx
@@ -10,12 +10,14 @@ import {
type WorkspaceMode,
type WorkspaceResolution,
} from '@threadplane/cockpit-registry';
+import { RUNTIME_CONFIGURATION_VERSION } from '@threadplane/cockpit-runtime-bridge';
import type {
ContentBundle,
WorkspacePresentation,
} from '@threadplane/cockpit-shell';
import { WorkspaceProvider } from './workspace-provider';
import { WorkspaceShell } from './workspace-shell';
+import { RuntimeTargetProvider } from './runtime/runtime-target-provider';
const runModeFault = vi.hoisted(() => ({ shouldThrow: false }));
const RUN_RAIL_ITEM = /^Run(?:,|$)/;
@@ -82,30 +84,32 @@ function renderWorkspace(options: {
const selectedPresentation = options.presentation ?? presentation;
const selectedContent = options.contentBundle ?? contentBundle;
return render(
- 'session-1'}
- >
-
+
+ 'session-1'}
+ >
+
+
);
}
@@ -144,6 +148,99 @@ describe('WorkspaceShell persistent panel composition', () => {
expect(rendered.container.querySelector('iframe')).toBe(frame);
});
+ it('disposes the old frame for a target change without placing the target or key in the replacement frame', async () => {
+ const customUrl = 'https://api.example.test/langgraph';
+ const secretKey = 'test-key-redact-me';
+ const rendered = renderWorkspace({
+ requestedMode: 'docs',
+ docsSlot: Server docs ,
+ });
+ await waitFor(() =>
+ expect(rendered.container.querySelector('iframe')).toBeTruthy()
+ );
+ const oldFrame = rendered.container.querySelector('iframe');
+
+ fireEvent.click(screen.getByRole('button', { name: 'Settings' }));
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom LangSmith' }));
+ fireEvent.change(screen.getByRole('textbox', { name: 'API URL' }), {
+ target: { value: customUrl },
+ });
+ fireEvent.input(screen.getByLabelText('API key'), {
+ target: { value: secretKey },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'Use custom target' }));
+
+ await waitFor(() =>
+ expect(rendered.container.querySelector('iframe')).not.toBe(oldFrame)
+ );
+ const replacement = rendered.container.querySelector('iframe');
+ expect(oldFrame?.isConnected).toBe(false);
+ expect(replacement?.outerHTML).not.toContain(customUrl);
+ expect(replacement?.outerHTML).not.toContain(secretKey);
+ expect(replacement?.getAttribute('referrerpolicy')).toBe('origin');
+
+ const childNonce = 'workspace-child-nonce';
+ const frameWindow = replacement?.contentWindow ?? null;
+ fireEvent(
+ window,
+ new MessageEvent('message', {
+ source: frameWindow,
+ origin: 'https://runtime.example.test',
+ data: {
+ type: 'tplane:runtime-child-ready',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce: childNonce,
+ },
+ })
+ );
+ fireEvent(
+ window,
+ new MessageEvent('message', {
+ source: frameWindow,
+ origin: 'https://runtime.example.test',
+ data: {
+ type: 'tplane:runtime-configuration-failed',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce: childNonce,
+ generation: 1,
+ code: 'incompatible_bridge',
+ },
+ })
+ );
+
+ fireEvent.click(screen.getByRole('button', { name: 'Docs' }));
+ expect(screen.getByText('Server docs')).toBeTruthy();
+ expect(screen.getByText('Incompatible runtime')).toBeTruthy();
+ fireEvent.click(screen.getByRole('button', { name: 'Settings' }));
+ expect(screen.getByText(customUrl)).toBeTruthy();
+ expect(document.body.textContent).not.toContain(secretKey);
+ });
+
+ it('installs the parent message listener before assigning the iframe navigation URL', async () => {
+ const addEventListener = vi.spyOn(window, 'addEventListener');
+ const setAttribute = vi.spyOn(Element.prototype, 'setAttribute');
+ const rendered = renderWorkspace({ requestedMode: 'docs' });
+ await waitFor(() =>
+ expect(rendered.container.querySelector('iframe')).toBeTruthy()
+ );
+
+ const messageListenerCall = addEventListener.mock.calls.findIndex(
+ ([type]) => type === 'message'
+ );
+ const iframeSrcCall = setAttribute.mock.calls.findIndex(
+ ([name], index) =>
+ name === 'src' &&
+ setAttribute.mock.instances[index] instanceof HTMLIFrameElement
+ );
+ expect(messageListenerCall).toBeGreaterThanOrEqual(0);
+ expect(iframeSrcCall).toBeGreaterThanOrEqual(0);
+ expect(
+ addEventListener.mock.invocationCallOrder[messageListenerCall]
+ ).toBeLessThan(
+ setAttribute.mock.invocationCallOrder[iframeSrcCall] ?? Infinity
+ );
+ });
+
it('exposes focusable panel headings without remounting Run', async () => {
const rendered = renderWorkspace({ requestedMode: 'run' });
const runTarget = await screen.findByRole('heading', {
@@ -195,9 +292,7 @@ describe('WorkspaceShell persistent panel composition', () => {
it('uses neutral Workspace landmark and modal labels by default', () => {
renderWorkspace({ docsSlot: Server docs });
- expect(
- screen.getByRole('main', { name: 'Workspace shell' })
- ).toBeTruthy();
+ expect(screen.getByRole('main', { name: 'Workspace shell' })).toBeTruthy();
expect(
screen.getByRole('navigation', { name: 'Workspace modes' })
).toBeTruthy();
@@ -219,9 +314,7 @@ describe('WorkspaceShell persistent panel composition', () => {
expect(
screen.getByRole('region', { name: 'Workspace shell' })
).toBeTruthy();
- expect(
- screen.queryByRole('main', { name: 'Workspace shell' })
- ).toBeNull();
+ expect(screen.queryByRole('main', { name: 'Workspace shell' })).toBeNull();
});
it('accepts product labels and neutral header actions from a host adapter', () => {
@@ -235,28 +328,30 @@ describe('WorkspaceShell persistent panel composition', () => {
}
>;
render(
- 'session-1'}
- >
- Read docs}
- />
-
+
+ 'session-1'}
+ >
+ Read docs}
+ />
+
+
);
expect(
@@ -306,21 +401,23 @@ describe('WorkspaceShell persistent panel composition', () => {
availableModes: ['Docs', 'Code'] as const,
};
rendered.rerender(
- Limited article}
- pushIdentity={vi.fn()}
- pushMode={vi.fn()}
- replaceMode={vi.fn()}
- getSessionId={() => 'session-1'}
- >
-
+
+ Limited article}
+ pushIdentity={vi.fn()}
+ pushMode={vi.fn()}
+ replaceMode={vi.fn()}
+ getSessionId={() => 'session-1'}
+ >
+
+
);
expect(rendered.container.querySelector('iframe')).toBeNull();
});
@@ -440,8 +537,6 @@ describe('WorkspaceShell persistent panel composition', () => {
expect(screen.getByRole('alert').textContent).toContain(
'Docs panel unavailable.'
);
- expect(
- screen.getByRole('button', { name: RUN_RAIL_ITEM })
- ).toBeTruthy();
+ expect(screen.getByRole('button', { name: RUN_RAIL_ITEM })).toBeTruthy();
});
});
diff --git a/libs/workspace-react/src/lib/workspace-shell.tsx b/libs/workspace-react/src/lib/workspace-shell.tsx
index 5cd00840f..242f45997 100644
--- a/libs/workspace-react/src/lib/workspace-shell.tsx
+++ b/libs/workspace-react/src/lib/workspace-shell.tsx
@@ -423,7 +423,7 @@ export function WorkspaceShell({
{panelHeading('Run')}
[data-control-plane-overflow-menu] {
left: 0;
right: auto;
}
.cockpit-control-plane
- [data-control-plane-overflow-menu-root][data-overflow-placement="center"]
+ [data-control-plane-overflow-menu-root][data-overflow-placement='center']
> [data-control-plane-overflow-menu] {
left: 50%;
right: auto;
@@ -1014,7 +1020,11 @@
background: var(--ds-surface-tinted);
}
.cockpit-control-plane [data-control-plane-utility-panel] {
+ height: 100%;
+ max-height: 100%;
padding: 14px 12px;
+ overflow-y: auto;
+ overscroll-behavior: contain;
}
.cockpit-control-plane [data-control-plane-utility-header] {
min-height: 36px;
@@ -1122,12 +1132,12 @@
font-family: var(--ds-font-mono);
font-size: 9px;
}
-[data-activity-severity="error"] [data-activity-severity-icon],
-[data-activity-severity="error"] [data-activity-summary] {
+[data-activity-severity='error'] [data-activity-severity-icon],
+[data-activity-severity='error'] [data-activity-summary] {
color: var(--cockpit-state-error);
}
-[data-activity-kind="runtime_recovered"] [data-activity-severity-icon],
-[data-activity-kind="runtime_recovered"] [data-activity-summary] {
+[data-activity-kind='runtime_recovered'] [data-activity-severity-icon],
+[data-activity-kind='runtime_recovered'] [data-activity-summary] {
color: var(--cockpit-state-success);
}
.cockpit-control-plane-setting {
@@ -1141,6 +1151,147 @@
color: var(--ds-text-muted);
font-size: 12px;
}
+[data-runtime-target-settings] {
+ padding: 14px 0;
+ border-bottom: 1px solid var(--ds-border);
+ color: var(--ds-text-secondary);
+ font-size: 12px;
+}
+[data-runtime-target-settings] h3 {
+ margin: 0 0 10px;
+ color: var(--ds-text-primary);
+ font-size: 12px;
+ font-weight: 600;
+}
+[data-runtime-target-settings] p {
+ margin: 8px 0 0;
+ line-height: 1.45;
+}
+[data-runtime-target-settings] form,
+[data-runtime-target-fields] {
+ display: grid;
+ gap: 10px;
+}
+[data-runtime-target-selector] {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ display: grid;
+ gap: 5px;
+}
+[data-runtime-target-selector] legend {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+[data-runtime-target-selector] label {
+ min-height: 44px;
+ padding: 8px 10px;
+ border: 1px solid var(--ds-border);
+ border-radius: 8px;
+ display: grid;
+ grid-template-columns: auto 18px minmax(0, 1fr);
+ align-items: center;
+ gap: 8px;
+ color: var(--ds-text-secondary);
+ background: var(--ds-surface);
+ cursor: pointer;
+}
+[data-runtime-target-selector] label:has(input:checked) {
+ border-color: var(--ds-accent-border);
+ color: var(--ds-text-primary);
+ background: var(--ds-accent-surface);
+}
+[data-runtime-target-selector] input {
+ width: 16px;
+ height: 16px;
+ margin: 0;
+ accent-color: var(--ds-accent);
+}
+[data-runtime-target-fields] > label {
+ display: grid;
+ gap: 5px;
+ color: var(--ds-text-muted);
+ font-size: 11px;
+ font-weight: 500;
+}
+[data-runtime-target-fields] > label > span {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+}
+[data-runtime-target-settings] input[type='url'],
+[data-runtime-target-settings] input[type='password'] {
+ width: 100%;
+ min-width: 0;
+ min-height: 44px;
+ padding: 9px 10px;
+ border: 1px solid var(--ds-border-strong);
+ border-radius: 8px;
+ color: var(--ds-text-primary);
+ background: var(--ds-surface);
+ font-family: var(--ds-font-mono);
+ font-size: 11px;
+}
+[data-runtime-target-settings] input[aria-invalid='true'] {
+ border-color: var(--cockpit-state-error);
+}
+[data-runtime-target-settings] input:focus-visible {
+ outline: 2px solid var(--ds-accent);
+ outline-offset: 2px;
+}
+[data-runtime-target-settings] button {
+ min-height: 44px;
+ padding: 9px 12px;
+ border: 1px solid var(--ds-border-strong);
+ border-radius: 8px;
+ color: var(--ds-text-secondary);
+ background: var(--ds-surface);
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+}
+[data-runtime-target-settings] button:hover {
+ color: var(--ds-text-primary);
+ background: var(--ds-surface-tinted);
+}
+[data-runtime-target-settings] [data-runtime-target-primary-action] {
+ border-color: var(--ds-accent-border);
+ color: var(--ds-accent);
+ background: var(--ds-accent-surface);
+}
+[data-runtime-target-error] {
+ color: var(--cockpit-state-error);
+}
+[data-runtime-target-current] {
+ min-width: 0;
+ display: grid;
+ gap: 3px;
+ color: var(--ds-text-muted);
+ font-size: 10px;
+}
+[data-runtime-target-current] code {
+ overflow: hidden;
+ color: var(--ds-text-secondary);
+ font-family: var(--ds-font-mono);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+[data-runtime-target-cors],
+[data-runtime-target-memory] {
+ color: var(--ds-text-muted);
+ font-size: 10px;
+}
+[data-runtime-target-memory] {
+ padding-left: 9px;
+ border-left: 2px solid var(--ds-accent-border);
+}
.cockpit-control-plane button:focus-visible,
.cockpit-control-plane a:focus-visible,
.cockpit-mobile-navigation-trigger:focus-visible,
@@ -1214,10 +1365,10 @@
opacity: 1;
transition: opacity 150ms ease;
}
-.cockpit-mobile-control-plane[data-variant="mobile"] {
+.cockpit-mobile-control-plane[data-variant='mobile'] {
inset: 0;
}
-.cockpit-mobile-control-plane[data-state="closing"] {
+.cockpit-mobile-control-plane[data-state='closing'] {
opacity: 0;
}
.cockpit-mobile-control-plane-panel {
@@ -1231,7 +1382,7 @@
transform: translateY(0);
transition: transform 200ms ease-out;
}
-.cockpit-mobile-control-plane[data-state="closing"]
+.cockpit-mobile-control-plane[data-state='closing']
.cockpit-mobile-control-plane-panel {
transform: translateY(8px);
}
@@ -1330,10 +1481,10 @@
[data-activity-connector] {
background: CanvasText;
}
- [data-activity-severity="error"] [data-activity-severity-icon],
- [data-activity-severity="error"] [data-activity-summary],
- [data-activity-kind="runtime_recovered"] [data-activity-severity-icon],
- [data-activity-kind="runtime_recovered"] [data-activity-summary] {
+ [data-activity-severity='error'] [data-activity-severity-icon],
+ [data-activity-severity='error'] [data-activity-summary],
+ [data-activity-kind='runtime_recovered'] [data-activity-severity-icon],
+ [data-activity-kind='runtime_recovered'] [data-activity-summary] {
color: CanvasText;
}
.cockpit-control-plane button:focus-visible,
@@ -1365,7 +1516,7 @@
height: 44px;
}
.cockpit-control-plane
- [data-control-plane-overflow-menu-root][data-overflow-placement="center"]
+ [data-control-plane-overflow-menu-root][data-overflow-placement='center']
> [data-control-plane-overflow-menu] {
left: auto;
right: 0;
diff --git a/package-lock.json b/package-lock.json
index 6db9f12b9..9056edd07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -116,15 +116,10 @@
"apps/cockpit": {
"version": "0.0.1",
"dependencies": {
- "@radix-ui/react-slot": "^1.1.0",
- "@threadplane/workspace-react": "*",
- "class-variance-authority": "^0.7.0",
- "clsx": "^2.1.1",
+ "@threadplane/cockpit-registry": "*",
"next": "~16.1.6",
- "posthog-js": "^1.372.6",
"react": "^19.0.0",
- "react-dom": "^19.0.0",
- "tailwind-merge": "^2.5.0"
+ "react-dom": "^19.0.0"
}
},
"apps/lifecycle": {
diff --git a/runtime-parent-origins.json b/runtime-parent-origins.json
new file mode 100644
index 000000000..035535b20
--- /dev/null
+++ b/runtime-parent-origins.json
@@ -0,0 +1,9 @@
+{
+ "baseOrigins": [
+ "https://threadplane.ai",
+ "http://localhost:3000",
+ "http://127.0.0.1:3000",
+ "http://localhost:4308",
+ "http://127.0.0.1:4308"
+ ]
+}
diff --git a/scripts/assemble-examples.ts b/scripts/assemble-examples.ts
index f8c61353d..50f11dd3e 100644
--- a/scripts/assemble-examples.ts
+++ b/scripts/assemble-examples.ts
@@ -9,9 +9,21 @@
* npx tsx scripts/assemble-examples.ts --skip-build
*/
import { execSync } from 'child_process';
-import { cpSync, mkdirSync, rmSync, existsSync, writeFileSync, readFileSync } from 'fs';
+import {
+ cpSync,
+ mkdirSync,
+ rmSync,
+ existsSync,
+ writeFileSync,
+ readFileSync,
+} from 'fs';
import { resolve } from 'path';
import { capabilities as registryCapabilities } from '../apps/cockpit/scripts/capability-registry';
+import {
+ GENERATED_RUNTIME_PARENT_ORIGINS_MODULE,
+ generateRuntimeParentOriginPolicy,
+ parseRuntimeParentPreviewOrigins,
+} from './generate-runtime-parent-origins';
// DEPLOY-GATE HAZARD: ci.yml's deploy steps diff `github.event.before..sha` to
// decide whether examples/cockpit redeploy. Runs waiting in the CI-main
@@ -25,6 +37,22 @@ import { capabilities as registryCapabilities } from '../apps/cockpit/scripts/ca
const root = resolve(__dirname, '..');
const deployDir = resolve(root, 'deploy/examples');
const skipBuild = process.argv.includes('--skip-build');
+const runtimeParentOriginSource = JSON.parse(
+ readFileSync(resolve(root, 'runtime-parent-origins.json'), 'utf8')
+) as unknown;
+const runtimeParentOriginPolicy = generateRuntimeParentOriginPolicy(
+ runtimeParentOriginSource,
+ parseRuntimeParentPreviewOrigins(
+ process.env['RUNTIME_PARENT_PREVIEW_ORIGINS']
+ )
+);
+
+// Always replace the compiled input, including when CI supplies no preview.
+// This prevents a prior preview origin from surviving into a later build.
+writeFileSync(
+ resolve(root, GENERATED_RUNTIME_PARENT_ORIGINS_MODULE),
+ runtimeParentOriginPolicy.compiledChildModule
+);
// Derive the staged-example list from the capability registry — the single
// source of truth (every entry has an `angularProject` that builds to
@@ -40,10 +68,13 @@ const capabilities = registryCapabilities.map((c) => ({
if (!skipBuild) {
console.log(`Building all ${capabilities.length} Angular apps...`);
- execSync("npx nx run-many -t build --projects='cockpit-*-angular' --skip-nx-cache", {
- cwd: root,
- stdio: 'inherit',
- });
+ execSync(
+ "npx nx run-many -t build --projects='cockpit-*-angular' --skip-nx-cache",
+ {
+ cwd: root,
+ stdio: 'inherit',
+ }
+ );
}
if (existsSync(deployDir)) rmSync(deployDir, { recursive: true });
@@ -68,7 +99,7 @@ for (const cap of capabilities) {
const html = readFileSync(indexPath, 'utf-8');
const fixed = html.replace(
'/agent
// requests to the Railway-hosted FastAPI runtime with origin allowlist +
// Upstash rate limit + X-Internal-Token injection).
mkdirSync(agUiFuncDir, { recursive: true });
-execSync(`npx esbuild scripts/ag-ui-proxy.ts --bundle --format=cjs --platform=node --outfile=${agUiFuncDir}/index.js`, {
- cwd: root,
- stdio: 'inherit',
-});
-writeFileSync(resolve(agUiFuncDir, '.vc-config.json'), JSON.stringify({
- runtime: 'nodejs20.x',
- handler: 'index.js',
- launcherType: 'Nodejs',
- shouldAddHelpers: true,
-}, null, 2));
+execSync(
+ `npx esbuild scripts/ag-ui-proxy.ts --bundle --format=cjs --platform=node --outfile=${agUiFuncDir}/index.js`,
+ {
+ cwd: root,
+ stdio: 'inherit',
+ }
+);
+writeFileSync(
+ resolve(agUiFuncDir, '.vc-config.json'),
+ JSON.stringify(
+ {
+ runtime: 'nodejs20.x',
+ handler: 'index.js',
+ launcherType: 'Nodejs',
+ shouldAddHelpers: true,
+ },
+ null,
+ 2
+ )
+);
// Write output config with proper routing
-writeFileSync(resolve(outputDir, 'config.json'), JSON.stringify({
- version: 3,
- routes: [
- // AG-UI proxy: /ag-ui//agent[/rest] → ag-ui-proxy function.
- // Mirrors the langgraph rule exactly: dest names the catch-all function
- // (`[[...path]]`), which invokes it while PRESERVING the original request
- // URL in req.url. The function (scripts/ag-ui-proxy.ts) parses the topic
- // out of `/ag-ui//agent`. A function is only reachable when a route
- // dest names it like this — the filesystem handle does NOT auto-serve
- // catch-all functions. Must precede the filesystem handle so static
- // index.html lookups for /ag-ui// still resolve.
- { src: '^/ag-ui/([^/]+)/agent(/.*)?$', dest: '/ag-ui-proxy/[[...path]]', check: true },
- // Runtimes product (cockpit/runtimes//) is AG-UI-served through
- // the same proxy function; the function accepts either path prefix and
- // still targets upstream /agent/.
- { src: '^/runtimes/([^/]+)/agent(/.*)?$', dest: '/ag-ui-proxy/[[...path]]', check: true },
- { src: '^/api/(.*)', dest: '/api/[[...path]]', check: true },
- { handle: 'filesystem' },
- { src: '^/(langgraph|deep-agents|render|chat|ag-ui|runtimes)/([^/]+)/(.+\\..+)$', dest: '/$1/$2/$3' },
- { src: '^/(langgraph|deep-agents|render|chat|ag-ui|runtimes)/([^/]+)(/.*)?$', dest: '/$1/$2/index.html' },
- { handle: 'error' },
- { status: 404, src: '.*', dest: '/404.html' },
- ],
-}, null, 2));
-
-console.log('✅ .vercel/output/ (Build Output API with langgraph + AG-UI proxies)');
+writeFileSync(
+ resolve(outputDir, 'config.json'),
+ JSON.stringify(
+ {
+ version: 3,
+ routes: [
+ {
+ src: '^/(langgraph|deep-agents|render|chat|ag-ui|runtimes)(/.*)?$',
+ headers: runtimeParentOriginPolicy.deploymentHeaders,
+ continue: true,
+ },
+ // AG-UI proxy: /ag-ui//agent[/rest] → ag-ui-proxy function.
+ // Mirrors the langgraph rule exactly: dest names the catch-all function
+ // (`[[...path]]`), which invokes it while PRESERVING the original request
+ // URL in req.url. The function (scripts/ag-ui-proxy.ts) parses the topic
+ // out of `/ag-ui//agent`. A function is only reachable when a route
+ // dest names it like this — the filesystem handle does NOT auto-serve
+ // catch-all functions. Must precede the filesystem handle so static
+ // index.html lookups for /ag-ui// still resolve.
+ {
+ src: '^/ag-ui/([^/]+)/agent(/.*)?$',
+ dest: '/ag-ui-proxy/[[...path]]',
+ check: true,
+ },
+ // Runtimes product (cockpit/runtimes//) is AG-UI-served through
+ // the same proxy function; the function accepts either path prefix and
+ // still targets upstream /agent/.
+ {
+ src: '^/runtimes/([^/]+)/agent(/.*)?$',
+ dest: '/ag-ui-proxy/[[...path]]',
+ check: true,
+ },
+ { src: '^/api/(.*)', dest: '/api/[[...path]]', check: true },
+ { handle: 'filesystem' },
+ {
+ src: '^/(langgraph|deep-agents|render|chat|ag-ui|runtimes)/([^/]+)/(.+\\..+)$',
+ dest: '/$1/$2/$3',
+ },
+ {
+ src: '^/(langgraph|deep-agents|render|chat|ag-ui|runtimes)/([^/]+)(/.*)?$',
+ dest: '/$1/$2/index.html',
+ },
+ { handle: 'error' },
+ { status: 404, src: '.*', dest: '/404.html' },
+ ],
+ },
+ null,
+ 2
+ )
+);
+
+console.log(
+ '✅ .vercel/output/ (Build Output API with langgraph + AG-UI proxies)'
+);
console.log(`\nAssembled ${capabilities.length} apps + proxy to ${deployDir}`);
diff --git a/scripts/ci-scope.spec.mjs b/scripts/ci-scope.spec.mjs
index c8e65436d..5743929ea 100644
--- a/scripts/ci-scope.spec.mjs
+++ b/scripts/ci-scope.spec.mjs
@@ -446,6 +446,31 @@ describe('classifyFromAffected — apps + fallback paths via namedInputs', () =>
assert.equal(scope.cockpit_e2e, true);
});
+ it('the Website-owned platform smoke selects Website browser coverage', () => {
+ const scope = classifyFromAffected(
+ ['apps/website/e2e/platform-production-smoke.spec.ts'],
+ [{ name: 'website', tags: WEBSITE_TAGS }]
+ );
+
+ assert.equal(scope.website, true);
+ assert.equal(scope.website_e2e, true);
+ assert.equal(scope.cockpit_e2e, false);
+ });
+
+ it('the Cockpit Vercel gate selects redirect build and deploy smoke', async () => {
+ const project = JSON.parse(
+ await readFile('apps/cockpit/project.json', 'utf8')
+ );
+ const scope = classifyFromAffected(
+ ['vercel.cockpit.json'],
+ [{ name: project.name, tags: project.tags }]
+ );
+
+ assert.equal(scope.cockpit, true);
+ assert.equal(scope.cockpit_deploy_smoke, true);
+ assert.equal(scope.cockpit_e2e, false);
+ });
+
it('examples/chat change → examples_chat only', () => {
const scope = classifyFromAffected(
['examples/chat/angular/src/main.ts'],
diff --git a/scripts/ci-workflow.spec.mjs b/scripts/ci-workflow.spec.mjs
index 55d353c05..d48818b70 100644
--- a/scripts/ci-workflow.spec.mjs
+++ b/scripts/ci-workflow.spec.mjs
@@ -109,6 +109,10 @@ describe('CI workflow', () => {
return readJobBlock(await readWorkflow(), 'demo-deploy');
}
+ async function readAgUiDemoJob() {
+ return readJobBlock(await readWorkflow(), 'ag-ui-demo-deploy');
+ }
+
async function readProductionSmokeJob() {
return readJobBlock(await readWorkflow(), 'production-smoke');
}
@@ -214,7 +218,118 @@ describe('CI workflow', () => {
);
});
- it('deploys changed runtime bridges before the cockpit shell and preserves fail-fast ordering', async () => {
+ it('rebuilds examples for Website changes so the immutable preview origin reaches child policy', async () => {
+ const deployJob = await readDeployJob();
+ const examplesDetection = deployJob.slice(
+ deployJob.indexOf('Check if examples changed'),
+ deployJob.indexOf('- uses: actions/setup-node')
+ );
+ const patterns = [...examplesDetection.matchAll(/grep -E '([^']+)'/g)].map(
+ (match) => new RegExp(match[1])
+ );
+
+ assert.ok(
+ patterns.some((pattern) =>
+ pattern.test('apps/website/src/components/workspace/WebsiteWorkspace.tsx')
+ )
+ );
+ assert.ok(patterns.some((pattern) => pattern.test('vercel.json')));
+ });
+
+ it('smokes one immutable Website preview with its generated child policy before promoting it', async () => {
+ const deployJob = await readDeployJob();
+ const previewDeploy = deployJob.indexOf('Deploy immutable Website preview');
+ const assembleExamples = deployJob.indexOf(
+ 'Build and assemble Angular examples'
+ );
+ const deployExamples = deployJob.indexOf(
+ 'Deploy Angular examples to Vercel (production)'
+ );
+ const previewSmoke = deployJob.indexOf(
+ 'Verify Website preview runtime embedding policy'
+ );
+ const promotionFreshness = deployJob.indexOf(
+ 'Check this commit is still the tip before Website promotion'
+ );
+ const promote = deployJob.indexOf(
+ 'Promote verified Website artifact unchanged'
+ );
+
+ for (const [label, position] of [
+ ['Website preview deploy', previewDeploy],
+ ['example assembly', assembleExamples],
+ ['example deployment', deployExamples],
+ ['Website preview smoke', previewSmoke],
+ ['Website promotion freshness', promotionFreshness],
+ ['Website promotion', promote],
+ ]) {
+ assert.notEqual(position, -1, `expected ${label} in the deploy job`);
+ }
+ assert.ok(
+ previewDeploy < assembleExamples &&
+ assembleExamples < deployExamples &&
+ deployExamples < previewSmoke &&
+ previewSmoke < promotionFreshness &&
+ promotionFreshness < promote
+ );
+
+ const previewStep = readNamedStep(
+ deployJob,
+ 'Deploy immutable Website preview'
+ );
+ const assemblyStep = readNamedStep(
+ deployJob,
+ 'Build and assemble Angular examples'
+ );
+ const smokeStep = readNamedStep(
+ deployJob,
+ 'Verify Website preview runtime embedding policy'
+ );
+ const freshnessStep = readNamedStep(
+ deployJob,
+ 'Check this commit is still the tip before Website promotion'
+ );
+ const promoteStep = readNamedStep(
+ deployJob,
+ 'Promote verified Website artifact unchanged'
+ );
+
+ assert.match(previewStep, /id:\s*deploy_website/);
+ assert.match(
+ previewStep,
+ /vercel deploy[^\n]*--prebuilt[^\n]*--prod[^\n]*--skip-domain/
+ );
+ assert.match(previewStep, /new URL\(process\.argv\[1\]\)/);
+ assert.match(previewStep, /process\.stdout\.write\(parsed\.origin\)/);
+ assert.match(previewStep, /preview_origin=.*GITHUB_OUTPUT/);
+ assert.match(
+ assemblyStep,
+ /RUNTIME_PARENT_PREVIEW_ORIGINS:\s*\$\{\{ steps\.deploy_website\.outputs\.preview_origin \}\}/
+ );
+ assert.match(
+ smokeStep,
+ /BASE_URL:\s*\$\{\{ steps\.deploy_website\.outputs\.preview_origin \}\}/
+ );
+ assert.match(
+ smokeStep,
+ /RUNTIME_PARENT_PREVIEW_ORIGINS:\s*\$\{\{ steps\.deploy_website\.outputs\.preview_origin \}\}/
+ );
+ assert.match(smokeStep, /unified runtime embedding policy/);
+ assert.match(freshnessStep, /id:\s*website_promotion_freshness/);
+ assert.match(freshnessStep, /git ls-remote origin refs\/heads\/main/);
+ assert.match(freshnessStep, /fresh=false.*GITHUB_OUTPUT/);
+ assert.match(freshnessStep, /fresh=true.*GITHUB_OUTPUT/);
+ assert.match(
+ promoteStep,
+ /vercel promote "\$\{\{ steps\.deploy_website\.outputs\.deployment_url \}\}" --yes/
+ );
+ assert.match(
+ promoteStep,
+ /if:[^\n]*steps\.website_promotion_freshness\.outputs\.fresh\s*==\s*'true'/
+ );
+ });
+
+ it('deploys examples before the Cockpit redirect artifact and preserves fail-fast ordering', async () => {
const deployJob = await readDeployJob();
const assembleExamples = deployJob.indexOf(
'Build and assemble Angular examples'
@@ -223,21 +338,24 @@ describe('CI workflow', () => {
'Deploy Angular examples to Vercel (production)'
);
const prepareCockpit = deployJob.indexOf('Prepare cockpit Vercel project');
+ const buildCockpit = deployJob.indexOf('Build cockpit redirect service');
const deployCockpit = deployJob.indexOf(
- 'Build and deploy cockpit to Vercel (production)'
+ 'Deploy immutable cockpit artifact'
);
for (const [label, position] of [
['example assembly', assembleExamples],
['example deployment', deployExamples],
['cockpit preparation', prepareCockpit],
+ ['cockpit build', buildCockpit],
['cockpit deployment', deployCockpit],
]) {
assert.notEqual(position, -1, `expected ${label} in the deploy job`);
}
assert.ok(assembleExamples < deployExamples);
assert.ok(deployExamples < prepareCockpit);
- assert.ok(prepareCockpit < deployCockpit);
+ assert.ok(prepareCockpit < buildCockpit);
+ assert.ok(buildCockpit < deployCockpit);
const examplesBeforeCockpit = deployJob.slice(
assembleExamples,
@@ -259,8 +377,11 @@ describe('CI workflow', () => {
for (const name of [
'Prepare cockpit Vercel project',
- 'Build and deploy cockpit to Vercel (production)',
- 'Verify deployed cockpit',
+ 'Build cockpit redirect service',
+ 'Deploy immutable cockpit artifact',
+ 'Exhaustively verify immutable cockpit preview',
+ 'Promote verified cockpit artifact unchanged',
+ 'Verify production cockpit redirects',
]) {
const step = readNamedStep(deployJob, name);
assert.doesNotMatch(step, /continue-on-error:\s*true/);
@@ -268,10 +389,175 @@ describe('CI workflow', () => {
}
});
- it('runs production smoke after the canonical demo deploy', async () => {
+ it('smokes one immutable Cockpit deployment before promoting that exact URL', async () => {
+ const deployJob = await readDeployJob();
+ const websiteDeploy = deployJob.indexOf(
+ 'Deploy immutable Website preview'
+ );
+ const websiteSmoke = deployJob.indexOf('Verify deployed website');
+ const cockpitBuild = deployJob.indexOf('Build cockpit redirect service');
+ const cockpitDeploy = deployJob.indexOf(
+ 'Deploy immutable cockpit artifact'
+ );
+ const previewSmoke = deployJob.indexOf(
+ 'Exhaustively verify immutable cockpit preview'
+ );
+ const promotionFreshness = deployJob.indexOf(
+ 'Check this commit is still the tip before cockpit promotion'
+ );
+ const promote = deployJob.indexOf(
+ 'Promote verified cockpit artifact unchanged'
+ );
+ const productionSmoke = deployJob.indexOf(
+ 'Verify production cockpit redirects'
+ );
+ const platformJob = await readProductionSmokeJob();
+ const platformSmoke = platformJob.indexOf('Run production smoke tests');
+ const marker = platformJob.indexOf('Record this commit as promoted');
+
+ assert.ok(
+ websiteDeploy < websiteSmoke &&
+ websiteSmoke < cockpitBuild &&
+ cockpitBuild < cockpitDeploy &&
+ cockpitDeploy < previewSmoke &&
+ previewSmoke < promotionFreshness &&
+ promotionFreshness < promote &&
+ promote < productionSmoke
+ );
+ assert.ok(platformSmoke < marker);
+
+ const deployStep = readNamedStep(
+ deployJob,
+ 'Deploy immutable cockpit artifact'
+ );
+ const previewStep = readNamedStep(
+ deployJob,
+ 'Exhaustively verify immutable cockpit preview'
+ );
+ const promotionFreshnessStep = readNamedStep(
+ deployJob,
+ 'Check this commit is still the tip before cockpit promotion'
+ );
+ const promoteStep = readNamedStep(
+ deployJob,
+ 'Promote verified cockpit artifact unchanged'
+ );
+ const productionStep = readNamedStep(
+ deployJob,
+ 'Verify production cockpit redirects'
+ );
+
+ assert.match(deployStep, /id:\s*deploy_cockpit/);
+ assert.match(deployStep, /vercel deploy[^\n]*--prod[^\n]*--skip-domain/);
+ assert.match(
+ deployStep,
+ /--env COCKPIT_WEBSITE_ORIGIN=https:\/\/threadplane\.ai/
+ );
+ assert.match(
+ previewStep,
+ /--url "\$\{\{ steps\.deploy_cockpit\.outputs\.deployment_url \}\}"[\s\S]*--mode preview/
+ );
+ assert.match(promotionFreshnessStep, /id:\s*cockpit_promotion_freshness/);
+ assert.match(
+ promotionFreshnessStep,
+ /git ls-remote origin refs\/heads\/main/
+ );
+ assert.match(promotionFreshnessStep, /if \[ -z "\$tip" \]/);
+ assert.match(promotionFreshnessStep, /exit 1/);
+ assert.match(
+ promotionFreshnessStep,
+ /if \[ "\$tip" != "\$\{\{ github\.sha \}\}" \]/
+ );
+ assert.match(promotionFreshnessStep, /fresh=false.*GITHUB_OUTPUT/);
+ assert.match(promotionFreshnessStep, /fresh=true.*GITHUB_OUTPUT/);
+ assert.match(
+ promoteStep,
+ /vercel promote "\$\{\{ steps\.deploy_cockpit\.outputs\.deployment_url \}\}" --yes/
+ );
+ assert.match(
+ promoteStep,
+ /if:[^\n]*steps\.cockpit_promotion_freshness\.outputs\.fresh\s*==\s*'true'/
+ );
+ assert.match(productionStep, /--mode production/);
+ assert.match(
+ productionStep,
+ /if:[^\n]*steps\.cockpit_promotion_freshness\.outputs\.fresh\s*==\s*'true'/
+ );
+ assert.doesNotMatch(
+ deployJob.slice(cockpitDeploy, promote),
+ /vercel promote/
+ );
+ assert.equal(
+ (deployStep.match(/vercel deploy/g) ?? []).length,
+ 1,
+ 'Cockpit deployment must be captured once'
+ );
+ });
+
+ it('gates Cockpit deployment on the production Website smoke even for Cockpit-only changes', async () => {
+ const deployJob = await readDeployJob();
+ const websiteOrCockpit =
+ /if:[^\n]*steps\.affected\.outputs\.website\s*==\s*'true'[^\n]*\|\|[^\n]*steps\.affected\.outputs\.cockpit\s*==\s*'true'/;
+
+ for (const name of ['Cache Playwright browsers', 'Install Playwright browsers']) {
+ const step = readNamedStep(deployJob, name);
+ assert.match(
+ step,
+ websiteOrCockpit,
+ `${name} must cover Cockpit-only runs`
+ );
+ assert.doesNotMatch(step, /continue-on-error:\s*true/);
+ }
+
+ const websiteSmokeStep = readNamedStep(deployJob, 'Verify deployed website');
+ assert.match(websiteSmokeStep, websiteOrCockpit);
+ assert.match(
+ websiteSmokeStep,
+ /steps\.website_promotion_freshness\.outputs\.fresh\s*==\s*'true'/
+ );
+ assert.doesNotMatch(websiteSmokeStep, /continue-on-error:\s*true/);
+
+ for (const name of [
+ 'Prepare website Vercel project',
+ 'Deploy immutable Website preview',
+ ]) {
+ const step = readNamedStep(deployJob, name);
+ assert.match(
+ step,
+ /if:[^\n]*steps\.affected\.outputs\.website\s*==\s*'true'/
+ );
+ assert.doesNotMatch(
+ step,
+ /steps\.affected\.outputs\.cockpit\s*==\s*'true'/
+ );
+ }
+
+ const websiteSmoke = deployJob.indexOf('Verify deployed website');
+ for (const cockpitStep of [
+ 'Prepare cockpit Vercel project',
+ 'Build cockpit redirect service',
+ 'Deploy immutable cockpit artifact',
+ ]) {
+ assert.ok(
+ websiteSmoke < deployJob.indexOf(cockpitStep),
+ `Website production smoke must precede ${cockpitStep}`
+ );
+ }
+ });
+
+ it('runs production smoke after every platform deployment job', async () => {
const productionSmokeJob = await readProductionSmokeJob();
+ const agUiDemoJob = await readAgUiDemoJob();
- assert.match(productionSmokeJob, /needs:\s*\[deploy,\s*demo-deploy\]/);
+ assert.deepEqual(readJobNeeds(productionSmokeJob), [
+ 'deploy',
+ 'demo-deploy',
+ 'ag-ui-demo-deploy',
+ ]);
+ assert.match(
+ readJobFieldBlock(agUiDemoJob, 'if'),
+ /always\(\).*?!cancelled\(\).*?refs\/heads\/main.*?push/
+ );
});
it('verifies the shared backend before installing Playwright browsers', async () => {
@@ -290,16 +576,30 @@ describe('CI workflow', () => {
assert.match(
productionSmokeJob,
- /BASE_URL:\s*https:\/\/cockpit\.threadplane\.ai/
+ /COCKPIT_URL:\s*https:\/\/cockpit\.threadplane\.ai/
);
assert.match(
productionSmokeJob,
/EXAMPLES_URL:\s*https:\/\/examples\.threadplane\.ai/
);
+ assert.match(
+ productionSmokeJob,
+ /RUNTIME_PARENT_PREVIEW_ORIGINS:\s*\$\{\{ needs\.deploy\.outputs\.runtime_parent_preview_origin \}\}/
+ );
assert.match(
productionSmokeJob,
/DEMO_URL:\s*https:\/\/demo\.threadplane\.ai/
);
+ assert.match(productionSmokeJob, /PRODUCTION_SMOKE:\s*'true'/);
+ assert.match(productionSmokeJob, /BASE_URL:\s*https:\/\/threadplane\.ai/);
+ assert.match(
+ productionSmokeJob,
+ /playwright test apps\/website\/e2e\/platform-production-smoke\.spec\.ts[^\n]*--config apps\/website\/playwright\.config\.ts/
+ );
+ assert.doesNotMatch(
+ productionSmokeJob,
+ /apps\/cockpit\/e2e\/production-smoke\.spec\.ts/
+ );
});
it('guards every production promotion against a superseded commit', async () => {
@@ -396,24 +696,34 @@ describe('CI workflow', () => {
}
});
- it('runs the cockpit shell control-plane e2e', async () => {
- // apps/cockpit owns a real Playwright suite (e2e/control-plane.spec.ts,
- // 7 tests, added by #921) behind `nx e2e cockpit`. Nothing invoked that
- // target: the cockpit-e2e matrix only dispatches caps derived from
- // cockpit/**, and no other job named it — so the suite had never run in
- // CI. It belongs in the `cockpit` job, whose `cockpit` scope already
- // gates the shell and is already aggregated by required-pr-checks.
- const cockpitJob = readJobBlock(await readWorkflow(), 'cockpit');
+ it('leaves interactive control-plane e2e ownership with the Website', async () => {
+ // The Website now owns the interactive shell and its runtime server.
+ // Cockpit is tested as an application here but must not reinstall a
+ // browser or invoke the retired duplicate Playwright target.
+ const workflow = await readWorkflow();
+ const cockpitJob = readJobBlock(workflow, 'cockpit');
+ const websiteE2eJob = readJobBlock(workflow, 'website-e2e');
assert.match(
+ websiteE2eJob,
+ /npx playwright install(?:\s+--with-deps)?\s+chromium\b/,
+ 'Website e2e should install Chromium'
+ );
+ assert.match(
+ websiteE2eJob,
+ /npx nx e2e website\b/,
+ 'Website e2e should run the interactive shell suite'
+ );
+
+ assert.doesNotMatch(
cockpitJob,
/npx nx e2e cockpit\b/,
- 'cockpit job should run the shell control-plane e2e'
+ 'cockpit job should not run retired shell control-plane e2e'
);
- assert.match(
+ assert.doesNotMatch(
cockpitJob,
/npx playwright install/,
- 'the control-plane e2e needs a browser installed'
+ 'cockpit job should not install a browser for retired shell e2e'
);
});
diff --git a/scripts/generate-runtime-parent-origins.spec.ts b/scripts/generate-runtime-parent-origins.spec.ts
new file mode 100644
index 000000000..dadc2eb1e
--- /dev/null
+++ b/scripts/generate-runtime-parent-origins.spec.ts
@@ -0,0 +1,183 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import {
+ GENERATED_RUNTIME_PARENT_ORIGINS_MODULE,
+ generateRuntimeParentOriginPolicy,
+ parseRuntimeParentPreviewOrigins,
+} from './generate-runtime-parent-origins';
+
+describe('generate runtime parent origins', () => {
+ const source = JSON.parse(
+ readFileSync(resolve(__dirname, '../runtime-parent-origins.json'), 'utf8')
+ ) as unknown;
+
+ it('uses the checked-in source for production/local origins and merges exact CI previews', () => {
+ const policy = generateRuntimeParentOriginPolicy(source, [
+ 'https://website-pr-123.vercel.app',
+ 'https://website-pr-456.vercel.app',
+ ]);
+
+ expect(policy.childAllowedParentOrigins).toEqual([
+ 'https://threadplane.ai',
+ 'http://localhost:3000',
+ 'http://127.0.0.1:3000',
+ 'http://localhost:4308',
+ 'http://127.0.0.1:4308',
+ 'https://website-pr-123.vercel.app',
+ 'https://website-pr-456.vercel.app',
+ ]);
+ expect(policy.cspFrameAncestors).toEqual(policy.childAllowedParentOrigins);
+ });
+
+ it('deduplicates preview origins already present in the base source', () => {
+ expect(
+ generateRuntimeParentOriginPolicy(source, [
+ 'https://threadplane.ai',
+ 'https://website-pr-123.vercel.app',
+ 'https://website-pr-123.vercel.app',
+ ]).childAllowedParentOrigins
+ ).toEqual([
+ 'https://threadplane.ai',
+ 'http://localhost:3000',
+ 'http://127.0.0.1:3000',
+ 'http://localhost:4308',
+ 'http://127.0.0.1:4308',
+ 'https://website-pr-123.vercel.app',
+ ]);
+ });
+
+ it.each([
+ ['wildcard', ['https://*.vercel.app']],
+ ['suffix', ['.vercel.app']],
+ ['path', ['https://website-pr-123.vercel.app/path']],
+ ['insecure remote', ['http://website-pr-123.vercel.app']],
+ ])('rejects invalid CI preview origin input: %s', (_name, previews) => {
+ expect(() => generateRuntimeParentOriginPolicy(source, previews)).toThrow(
+ 'Invalid runtime parent origin policy'
+ );
+ });
+
+ it('rejects source shape drift and never includes the retired Cockpit origin', () => {
+ expect(() =>
+ generateRuntimeParentOriginPolicy(
+ { baseOrigins: ['https://threadplane.ai'], extra: true },
+ []
+ )
+ ).toThrow('Invalid runtime parent origin policy');
+ expect(
+ generateRuntimeParentOriginPolicy(source, []).childAllowedParentOrigins
+ ).not.toContain('https://cockpit.threadplane.ai');
+ });
+
+ it('rejects the retired Cockpit origin when CI supplies it as a preview', () => {
+ expect(() =>
+ generateRuntimeParentOriginPolicy(source, [
+ 'https://website-pr-123.vercel.app',
+ 'https://cockpit.threadplane.ai',
+ ])
+ ).toThrow('Invalid runtime parent origin policy');
+ });
+
+ it('returns frozen non-secret child and CSP inputs', () => {
+ const policy = generateRuntimeParentOriginPolicy(source, []);
+
+ expect(Object.isFrozen(policy)).toBe(true);
+ expect(Object.isFrozen(policy.childAllowedParentOrigins)).toBe(true);
+ expect(Object.isFrozen(policy.cspFrameAncestors)).toBe(true);
+ expect(policy.compiledChildModule).toContain(
+ 'GENERATED_RUNTIME_PARENT_ORIGINS'
+ );
+ expect(policy.compiledChildModule).toContain('https://threadplane.ai');
+ expect(policy.deploymentHeaders).toEqual({
+ 'Content-Security-Policy': expect.stringContaining(
+ `frame-ancestors ${policy.cspFrameAncestors.join(' ')}`
+ ),
+ 'Referrer-Policy': 'origin',
+ });
+ expect(policy.deploymentHeaders['Content-Security-Policy']).toContain(
+ "connect-src 'self' https: http://localhost:* http://127.0.0.1:* http://[::1]:*"
+ );
+ expect(JSON.stringify(policy)).not.toMatch(
+ /apiKey|authorization|secret|token/i
+ );
+ });
+
+ it('renders the checked-in compiled child module from the same base policy', () => {
+ const policy = generateRuntimeParentOriginPolicy(source, []);
+ const checkedInModule = readFileSync(
+ resolve(__dirname, `../${GENERATED_RUNTIME_PARENT_ORIGINS_MODULE}`),
+ 'utf8'
+ );
+
+ expect(checkedInModule).toBe(policy.compiledChildModule);
+ });
+
+ it('replaces a prior preview policy with the base policy instead of carrying stale origins forward', () => {
+ const previewModule = generateRuntimeParentOriginPolicy(source, [
+ 'https://website-pr-123.vercel.app',
+ ]).compiledChildModule;
+ const replacementModule = generateRuntimeParentOriginPolicy(
+ source,
+ parseRuntimeParentPreviewOrigins(undefined)
+ ).compiledChildModule;
+
+ expect(previewModule).toContain('https://website-pr-123.vercel.app');
+ expect(replacementModule).not.toContain(
+ 'https://website-pr-123.vercel.app'
+ );
+ expect(replacementModule).toBe(
+ generateRuntimeParentOriginPolicy(source, []).compiledChildModule
+ );
+ });
+
+ it('parses only explicit newline-delimited CI preview origins', () => {
+ expect(
+ parseRuntimeParentPreviewOrigins(
+ 'https://website-pr-123.vercel.app\nhttps://website-pr-456.vercel.app\n'
+ )
+ ).toEqual([
+ 'https://website-pr-123.vercel.app',
+ 'https://website-pr-456.vercel.app',
+ ]);
+ expect(parseRuntimeParentPreviewOrigins(undefined)).toEqual([]);
+ expect(() =>
+ parseRuntimeParentPreviewOrigins('https://*.vercel.app')
+ ).toThrow('Invalid runtime parent origin policy');
+ });
+
+ it('wires the authoritative artifact through assembly, Nx, deployment, and CI', () => {
+ const assembly = readFileSync(
+ resolve(__dirname, './assemble-examples.ts'),
+ 'utf8'
+ );
+ const scriptsProject = readFileSync(
+ resolve(__dirname, './project.json'),
+ 'utf8'
+ );
+ const cockpitProject = readFileSync(
+ resolve(__dirname, '../apps/cockpit/project.json'),
+ 'utf8'
+ );
+ const workflow = readFileSync(
+ resolve(__dirname, '../.github/workflows/ci.yml'),
+ 'utf8'
+ );
+
+ expect(assembly).toContain('generateRuntimeParentOriginPolicy');
+ expect(assembly).toContain('compiledChildModule');
+ expect(assembly).toContain('deploymentHeaders');
+ expect(assembly).toContain('RUNTIME_PARENT_PREVIEW_ORIGINS');
+ expect(scriptsProject).toContain('runtime-parent-origins.json');
+ expect(scriptsProject).toContain('generate-runtime-parent-origins.ts');
+ expect(cockpitProject).toContain('runtime-parent-origins.json');
+ expect(cockpitProject).toContain('generate-runtime-parent-origins.ts');
+ expect(workflow).toContain('runtime-parent-origins\\.json');
+ expect(workflow).toContain('generate-runtime-parent-origins');
+ expect(workflow).toContain('RUNTIME_PARENT_PREVIEW_ORIGINS');
+ expect(workflow).toContain(
+ '${{ steps.deploy_website.outputs.deployment_url }}'
+ );
+ expect(workflow).not.toContain('https://*.vercel.app');
+ });
+});
diff --git a/scripts/generate-runtime-parent-origins.ts b/scripts/generate-runtime-parent-origins.ts
new file mode 100644
index 000000000..42f9ed19e
--- /dev/null
+++ b/scripts/generate-runtime-parent-origins.ts
@@ -0,0 +1,117 @@
+import { validateRuntimeParentOrigins } from '@threadplane/cockpit-runtime-bridge';
+
+export const GENERATED_RUNTIME_PARENT_ORIGINS_MODULE =
+ 'libs/cockpit-runtime-bridge/src/lib/generated-runtime-parent-origins.ts';
+
+const RUNTIME_CONNECT_SOURCES = [
+ "'self'",
+ 'https:',
+ 'http://localhost:*',
+ 'http://127.0.0.1:*',
+ 'http://[::1]:*',
+] as const;
+
+export interface RuntimeParentOriginPolicy {
+ readonly childAllowedParentOrigins: readonly string[];
+ readonly cspFrameAncestors: readonly string[];
+ readonly compiledChildModule: string;
+ readonly deploymentHeaders: Readonly<{
+ 'Content-Security-Policy': string;
+ 'Referrer-Policy': 'origin';
+ }>;
+}
+
+function isSourceRecord(
+ value: unknown
+): value is { readonly baseOrigins: unknown } {
+ if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+ return false;
+ }
+ const prototype = Object.getPrototypeOf(value);
+ if (prototype !== Object.prototype && prototype !== null) return false;
+ const keys = Reflect.ownKeys(value);
+ return keys.length === 1 && keys[0] === 'baseOrigins';
+}
+
+function invalidPolicy(): never {
+ throw new Error('Invalid runtime parent origin policy');
+}
+
+function renderCompiledChildModule(origins: readonly string[]): string {
+ return `// This file is generated by scripts/generate-runtime-parent-origins.ts.\n// Do not edit it independently of runtime-parent-origins.json.\nexport const GENERATED_RUNTIME_PARENT_ORIGINS = Object.freeze(${JSON.stringify(
+ origins,
+ null,
+ 2
+ )} as const);\n`;
+}
+
+export function parseRuntimeParentPreviewOrigins(
+ input: string | undefined
+): readonly string[] {
+ if (input === undefined || input === '') return Object.freeze([]);
+ const previews = input.split(/\r?\n/).filter((origin) => origin !== '');
+ for (const preview of previews) {
+ if (validateRuntimeParentOrigins([preview]) === null)
+ return invalidPolicy();
+ }
+ return Object.freeze(previews);
+}
+
+export function generateRuntimeParentOriginPolicy(
+ source: unknown,
+ ciPreviewOrigins: unknown
+): RuntimeParentOriginPolicy {
+ try {
+ if (!isSourceRecord(source) || !Array.isArray(ciPreviewOrigins)) {
+ return invalidPolicy();
+ }
+
+ const baseOrigins = validateRuntimeParentOrigins(source.baseOrigins);
+ if (
+ baseOrigins === null ||
+ !baseOrigins.includes('https://threadplane.ai') ||
+ baseOrigins.includes('https://cockpit.threadplane.ai')
+ ) {
+ return invalidPolicy();
+ }
+
+ const previews: string[] = [];
+ for (const preview of ciPreviewOrigins) {
+ const validated = validateRuntimeParentOrigins([preview]);
+ if (validated === null) return invalidPolicy();
+ previews.push(validated[0]);
+ }
+
+ const merged = [...new Set([...baseOrigins, ...previews])];
+ const complete = validateRuntimeParentOrigins(merged);
+ if (
+ complete === null ||
+ complete.includes('https://cockpit.threadplane.ai')
+ ) {
+ return invalidPolicy();
+ }
+
+ const childAllowedParentOrigins = Object.freeze([...complete]);
+ const cspFrameAncestors = Object.freeze([...complete]);
+ const deploymentHeaders = Object.freeze({
+ 'Content-Security-Policy': [
+ "default-src 'self'",
+ "script-src 'self'",
+ "style-src 'self' 'unsafe-inline'",
+ "img-src 'self' data: https:",
+ `connect-src ${RUNTIME_CONNECT_SOURCES.join(' ')}`,
+ `frame-ancestors ${cspFrameAncestors.join(' ')}`,
+ ].join('; '),
+ 'Referrer-Policy': 'origin' as const,
+ });
+
+ return Object.freeze({
+ childAllowedParentOrigins,
+ cspFrameAncestors,
+ compiledChildModule: renderCompiledChildModule(childAllowedParentOrigins),
+ deploymentHeaders,
+ });
+ } catch {
+ return invalidPolicy();
+ }
+}
diff --git a/scripts/project.json b/scripts/project.json
index 0c953864e..bc8d67dd1 100644
--- a/scripts/project.json
+++ b/scripts/project.json
@@ -3,13 +3,21 @@
"$schema": "../node_modules/nx/schemas/project-schema.json",
"projectType": "library",
"tags": ["scope:scripts-tests", "type:tooling"],
- "implicitDependencies": [],
+ "implicitDependencies": ["cockpit-runtime-bridge"],
"targets": {
"test": {
"executor": "@nx/vitest:test",
+ "inputs": ["default", "runtimeParentPolicy", "^default"],
"options": {
"configFile": "scripts/vite.config.mts"
}
}
+ },
+ "namedInputs": {
+ "runtimeParentPolicy": [
+ "{workspaceRoot}/runtime-parent-origins.json",
+ "{workspaceRoot}/scripts/generate-runtime-parent-origins.ts",
+ "{workspaceRoot}/libs/cockpit-runtime-bridge/src/lib/generated-runtime-parent-origins.ts"
+ ]
}
}
diff --git a/scripts/vite.config.mts b/scripts/vite.config.mts
index c871d4791..cfbde0f72 100644
--- a/scripts/vite.config.mts
+++ b/scripts/vite.config.mts
@@ -1,4 +1,5 @@
import { defineConfig } from 'vite';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
// Vitest config for the root deployment/proxy generator scripts.
//
@@ -10,6 +11,7 @@ import { defineConfig } from 'vite';
// invocation, otherwise vitest fails loudly on it ("no test suite found") —
// loud-by-default beats silently unrun.
export default defineConfig({
+ plugins: [nxViteTsPaths()],
test: {
environment: 'node',
globals: true,
diff --git a/vercel.cockpit.json b/vercel.cockpit.json
index 90b66c7c9..4a744a7e4 100644
--- a/vercel.cockpit.json
+++ b/vercel.cockpit.json
@@ -1,6 +1,13 @@
{
+ "$schema": "https://openapi.vercel.sh/vercel.json",
"framework": "nextjs",
"buildCommand": "npx nx build cockpit --skip-nx-cache",
"outputDirectory": "dist/apps/cockpit/.next",
- "installCommand": "npm ci"
+ "installCommand": "npm ci",
+ "routes": [
+ {
+ "src": "^(?:.*//.*|.*(?:\\\\|%5[cC]|%2[fF]).*|.*(?:^|/)(?:\\.{1,2}|%2[eE](?:%2[eE])?)(?:/|$).*)$",
+ "status": 404
+ }
+ ]
}
- Shared development
+ {targetLabel}
{language} · {product}
{sanitizedTarget !== null ? (
-
- {sanitizedTarget}
-
+ {sanitizedTarget}
) : null}
{snapshot.checkedAt === null
diff --git a/libs/workspace-react/src/lib/components/control-plane/runtime-target-settings.spec.tsx b/libs/workspace-react/src/lib/components/control-plane/runtime-target-settings.spec.tsx
new file mode 100644
index 000000000..638978e58
--- /dev/null
+++ b/libs/workspace-react/src/lib/components/control-plane/runtime-target-settings.spec.tsx
@@ -0,0 +1,330 @@
+/** @vitest-environment jsdom */
+import React from 'react';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import type { RuntimeAdapter } from '@threadplane/cockpit-registry';
+import {
+ RuntimeTargetProvider,
+ useRuntimeTargetView,
+} from '../../runtime/runtime-target-provider';
+import { RuntimeTargetSettings } from './runtime-target-settings';
+
+const workspaceRoot = process.cwd().endsWith('/libs/workspace-react')
+ ? resolve(process.cwd(), '../..')
+ : process.cwd();
+const workspaceCss = readFileSync(
+ resolve(workspaceRoot, 'libs/workspace-react/src/styles/workspace.css'),
+ 'utf8'
+);
+const runtimeOrigin = 'https://streaming.runtime.example.test';
+const fixtureKey = 'test-key-redact-me';
+
+function ViewProbe({ adapter }: { adapter: RuntimeAdapter }) {
+ const view = useRuntimeTargetView(adapter);
+ return ;
+}
+
+function renderSettings(adapter: RuntimeAdapter) {
+ return render(
+
+
+ );
+}
+
+describe('RuntimeTargetSettings', () => {
+ beforeEach(() => {
+ window.history.replaceState({}, '', '/docs/langgraph/guides/streaming');
+ window.localStorage.clear();
+ window.sessionStorage.clear();
+ });
+
+ it('offers explicit Shared and Custom AG-UI choices with a normalized endpoint', () => {
+ renderSettings('ag-ui');
+
+ expect(
+ (
+ screen.getByRole('radio', {
+ name: 'Shared development',
+ }) as HTMLInputElement
+ ).checked
+ ).toBe(true);
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom AG-UI' }));
+ const endpoint = screen.getByRole('textbox', { name: 'Endpoint' });
+ expect(endpoint.getAttribute('autocomplete')).toBe('off');
+ fireEvent.change(endpoint, {
+ target: { value: 'HTTPS://Agents.Example.Test:443/ag-ui/' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'Use custom target' }));
+
+ expect(screen.getByTestId('target-view').textContent).toContain(
+ 'https://agents.example.test/ag-ui/'
+ );
+ expect(screen.getByText('https://agents.example.test/ag-ui/')).toBeTruthy();
+ expect(
+ screen.getByRole('button', { name: 'Use shared development' })
+ ).toBeTruthy();
+
+ fireEvent.click(
+ screen.getByRole('button', { name: 'Use shared development' })
+ );
+ expect(screen.getByTestId('target-view').textContent).toContain('shared');
+ expect((endpoint as HTMLInputElement).value).toBe('');
+ });
+
+ it('synchronizes sibling Settings from effective apply and clear transitions without clobbering local drafts', () => {
+ const settings = (revision: string) => (
+
+
+ );
+ const { rerender } = render(settings('first'));
+ const first = within(screen.getByTestId('settings-a'));
+ const sibling = within(screen.getByTestId('settings-b'));
+
+ fireEvent.click(first.getByRole('radio', { name: 'Custom AG-UI' }));
+ const firstEndpoint = first.getByRole('textbox', { name: 'Endpoint' });
+ fireEvent.change(firstEndpoint, {
+ target: { value: 'HTTPS://Agents.Example.Test:443/ag-ui/' },
+ });
+
+ rerender(settings('second'));
+ expect((firstEndpoint as HTMLInputElement).value).toBe(
+ 'HTTPS://Agents.Example.Test:443/ag-ui/'
+ );
+ expect(
+ (
+ sibling.getByRole('radio', {
+ name: 'Shared development',
+ }) as HTMLInputElement
+ ).checked
+ ).toBe(true);
+ fireEvent.click(first.getByRole('button', { name: 'Use custom target' }));
+
+ expect(
+ (
+ sibling.getByRole('radio', {
+ name: 'Custom AG-UI',
+ }) as HTMLInputElement
+ ).checked
+ ).toBe(true);
+ const siblingEndpoint = sibling.getByRole('textbox', {
+ name: 'Endpoint',
+ });
+ expect((siblingEndpoint as HTMLInputElement).value).toBe(
+ 'https://agents.example.test/ag-ui/'
+ );
+
+ fireEvent.click(
+ sibling.getByRole('button', { name: 'Use shared development' })
+ );
+ expect(
+ (
+ first.getByRole('radio', {
+ name: 'Shared development',
+ }) as HTMLInputElement
+ ).checked
+ ).toBe(true);
+ expect(
+ (
+ sibling.getByRole('radio', {
+ name: 'Shared development',
+ }) as HTMLInputElement
+ ).checked
+ ).toBe(true);
+ expect(first.queryByRole('textbox', { name: 'Endpoint' })).toBeNull();
+ expect(sibling.queryByRole('textbox', { name: 'Endpoint' })).toBeNull();
+ });
+
+ it('keeps the LangSmith key only in an uncontrolled password input before apply', () => {
+ const { container } = renderSettings('langgraph');
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom LangSmith' }));
+
+ const apiUrl = screen.getByRole('textbox', { name: 'API URL' });
+ const key = screen.getByLabelText('API key') as HTMLInputElement;
+ expect(apiUrl.getAttribute('autocomplete')).toBe('off');
+ expect(key.type).toBe('password');
+ expect(key.autocomplete).toBe('new-password');
+ expect(key.name).toBe('rts');
+ expect(key.getAttribute('value')).toBeNull();
+ expect(
+ screen.queryByRole('button', { name: /reveal|copy|save|history/i })
+ ).toBeNull();
+
+ fireEvent.change(apiUrl, {
+ target: { value: 'https://API.Example.Test:443/langgraph' },
+ });
+ fireEvent.input(key, { target: { value: fixtureKey } });
+
+ const beforeApply = container.cloneNode(true) as HTMLElement;
+ beforeApply.querySelector('input[type="password"]')?.remove();
+ expect(beforeApply.innerHTML).not.toContain(fixtureKey);
+
+ fireEvent.click(screen.getByRole('button', { name: 'Use custom target' }));
+
+ expect(key.value).toBe('');
+ expect(screen.getByTestId('target-view').textContent).toContain(
+ 'https://api.example.test/langgraph'
+ );
+ expect(container.innerHTML).not.toContain(fixtureKey);
+ expect(document.body.textContent).not.toContain(fixtureKey);
+ });
+
+ it('focuses the first invalid field and never echoes rejected input', () => {
+ renderSettings('langgraph');
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom LangSmith' }));
+ const apiUrl = screen.getByRole('textbox', { name: 'API URL' });
+ const key = screen.getByLabelText('API key');
+ fireEvent.change(apiUrl, {
+ target: {
+ value: 'https://raw-secret.example.test/path?token=raw-secret',
+ },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'Use custom target' }));
+
+ expect(document.activeElement).toBe(apiUrl);
+ const alert = screen.getByRole('alert');
+ expect(alert.textContent).toBe('Remove the query string from the URL.');
+ expect(alert.textContent).not.toContain('raw-secret');
+ expect(apiUrl.getAttribute('aria-describedby')).toBe(alert.id);
+ expect(key.getAttribute('aria-describedby')).toBeNull();
+ expect(screen.getByTestId('target-view').textContent).toContain('shared');
+ });
+
+ it('focuses the key when the URL is valid but the key is empty', () => {
+ renderSettings('langgraph');
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom LangSmith' }));
+ const langGraphUrl = screen.getByRole('textbox', { name: 'API URL' });
+ const key = screen.getByLabelText('API key');
+ fireEvent.change(langGraphUrl, {
+ target: { value: 'https://api.example.test/langgraph' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'Use custom target' }));
+
+ const alert = screen.getByRole('alert');
+ expect(document.activeElement).toBe(key);
+ expect(alert.textContent).toBe('Enter an API key.');
+ expect(langGraphUrl.getAttribute('aria-describedby')).toBeNull();
+ expect(key.getAttribute('aria-describedby')).toBe(alert.id);
+ });
+
+ it('shows exact iframe-origin CORS guidance and the memory-only note', () => {
+ renderSettings('ag-ui');
+ expect(
+ screen.getByText(
+ `Allow Origin: ${runtimeOrigin}. This is the embedded Angular runtime origin, not necessarily the top-level workspace origin.`
+ )
+ ).toBeTruthy();
+ expect(
+ screen.getByText('Kept in this tab until refresh. Nothing is saved.')
+ ).toBeTruthy();
+ });
+
+ it('explains unavailable static runtimes without rendering a target form', () => {
+ renderSettings('none');
+ expect(
+ screen.getByText(
+ 'Custom runtime targets are unavailable for this capability.'
+ )
+ ).toBeTruthy();
+ expect(screen.queryByRole('form')).toBeNull();
+ expect(screen.queryByRole('radio')).toBeNull();
+ expect(screen.queryByRole('textbox')).toBeNull();
+ });
+
+ it('clears mounted endpoint and key drafts on document lifecycle reset', () => {
+ renderSettings('langgraph');
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom LangSmith' }));
+ const apiUrl = screen.getByRole('textbox', { name: 'API URL' });
+ const key = screen.getByLabelText('API key') as HTMLInputElement;
+ fireEvent.change(apiUrl, { target: { value: 'https://api.example.test' } });
+ fireEvent.input(key, { target: { value: fixtureKey } });
+
+ act(() => window.dispatchEvent(new PageTransitionEvent('pagehide')));
+
+ expect((apiUrl as HTMLInputElement).value).toBe('');
+ expect(key.value).toBe('');
+ expect(
+ (
+ screen.getByRole('radio', {
+ name: 'Shared development',
+ }) as HTMLInputElement
+ ).checked
+ ).toBe(true);
+ });
+
+ it('does not carry a LangGraph draft or key into AG-UI after adapter navigation', () => {
+ const { rerender } = render(
+
+
+ );
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom LangSmith' }));
+ const langGraphUrl = screen.getByRole('textbox', { name: 'API URL' });
+ fireEvent.change(langGraphUrl, {
+ target: { value: 'https://langgraph-draft.example.test/path' },
+ });
+ const langGraphKey = screen.getByLabelText('API key') as HTMLInputElement;
+ fireEvent.input(langGraphKey, {
+ target: { value: fixtureKey },
+ });
+
+ rerender(
+
+
+ );
+
+ expect(screen.queryByLabelText('API key')).toBeNull();
+ expect(langGraphUrl.isConnected).toBe(false);
+ expect(langGraphKey.isConnected).toBe(false);
+ expect((langGraphUrl as HTMLInputElement).value).toBe('');
+ expect(langGraphKey.value).toBe('');
+ expect(
+ (
+ screen.getByRole('radio', {
+ name: 'Shared development',
+ }) as HTMLInputElement
+ ).checked
+ ).toBe(true);
+ fireEvent.click(screen.getByRole('radio', { name: 'Custom AG-UI' }));
+ const agUiEndpoint = screen.getByRole('textbox', {
+ name: 'Endpoint',
+ }) as HTMLInputElement;
+ expect(agUiEndpoint).not.toBe(langGraphUrl);
+ expect(agUiEndpoint.value).toBe('');
+ expect(document.body.textContent).not.toContain(fixtureKey);
+ expect(document.body.textContent).not.toContain(
+ 'langgraph-draft.example.test'
+ );
+ });
+
+ it('gives the utility panel its own scroll and all mobile controls a 44px target', () => {
+ expect(workspaceCss).toMatch(
+ /\[data-control-plane-utility-panel\][^{]*\{[^}]*overflow-y:\s*auto/
+ );
+ expect(workspaceCss).toMatch(
+ /\[data-runtime-target-settings\][\s\S]*?input[^}]*min-height:\s*44px/
+ );
+ expect(workspaceCss).toMatch(
+ /\[data-runtime-target-settings\][\s\S]*?button[^}]*min-height:\s*44px/
+ );
+ });
+});
diff --git a/libs/workspace-react/src/lib/components/control-plane/runtime-target-settings.tsx b/libs/workspace-react/src/lib/components/control-plane/runtime-target-settings.tsx
new file mode 100644
index 000000000..ba1237032
--- /dev/null
+++ b/libs/workspace-react/src/lib/components/control-plane/runtime-target-settings.tsx
@@ -0,0 +1,263 @@
+'use client';
+
+import {
+ useEffect,
+ useId,
+ useLayoutEffect,
+ useRef,
+ useState,
+ type FormEvent,
+} from 'react';
+import type { RuntimeAdapter } from '@threadplane/cockpit-registry';
+import { Cloud, KeyRound, Server } from 'lucide-react';
+import {
+ useAgUiRuntimeTarget,
+ useLangGraphRuntimeTarget,
+} from '../../runtime/runtime-target-provider';
+import type {
+ RuntimeTargetValidationError,
+ SanitizedRuntimeTargetDisplay,
+} from '../../runtime/runtime-target-session';
+
+export interface RuntimeTargetSettingsProps {
+ readonly adapter: RuntimeAdapter;
+ readonly runtimeOrigin: string | null;
+}
+
+type TargetChoice = 'shared' | 'custom';
+
+const customLabel = (adapter: Exclude): string =>
+ adapter === 'ag-ui' ? 'Custom AG-UI' : 'Custom LangSmith';
+
+const choiceForView = (view: SanitizedRuntimeTargetDisplay): TargetChoice =>
+ view.kind === 'shared' ? 'shared' : 'custom';
+
+export function RuntimeTargetSettings({
+ adapter,
+ runtimeOrigin,
+}: RuntimeTargetSettingsProps) {
+ return (
+ (() => choiceForView(view));
+ const [endpointDraft, setEndpointDraft] = useState(view.location ?? '');
+ const [error, setError] = useState(null);
+ const endpointRef = useRef(null);
+ const keyRef = useRef(null);
+ const errorId = useId();
+ const radioName = useId();
+
+ useEffect(() => {
+ setChoice(choiceForView(view));
+ setEndpointDraft(view.location ?? '');
+ setError(null);
+ }, [view.kind, view.location]);
+
+ useEffect(() => {
+ if (adapter === 'none') return undefined;
+ const clearDraft = () => {
+ setChoice('shared');
+ setEndpointDraft('');
+ setError(null);
+ if (endpointRef.current) endpointRef.current.value = '';
+ if (keyRef.current) keyRef.current.value = '';
+ };
+ return adapter === 'ag-ui'
+ ? agUi.registerDraftClear(clearDraft)
+ : langgraph.registerDraftClear(clearDraft);
+ }, [adapter, agUi, langgraph]);
+
+ useLayoutEffect(() => {
+ if (choice !== 'custom') return undefined;
+ const endpointInput = endpointRef.current;
+ const keyInput = keyRef.current;
+ return () => {
+ if (endpointInput) endpointInput.value = '';
+ if (keyInput) keyInput.value = '';
+ };
+ }, [choice]);
+
+ if (adapter === 'none') {
+ return (
+
+
+ );
+ }
+
+ const focusInvalidField = (nextError: RuntimeTargetValidationError) => {
+ if (nextError.code === 'api_key_required') keyRef.current?.focus();
+ else endpointRef.current?.focus();
+ };
+
+ const applyCustomTarget = (event: FormEvent) => {
+ event.preventDefault();
+ const formData = new FormData(event.currentTarget);
+ const endpoint = formData.get('rtu');
+ const result =
+ adapter === 'ag-ui'
+ ? agUi.applyCustomTarget(endpoint)
+ : langgraph.applyCustomTarget(endpoint, formData.get('rts'));
+
+ if (!result.ok) {
+ setError(result.error);
+ focusInvalidField(result.error);
+ return;
+ }
+
+ setError(null);
+ if (keyRef.current) keyRef.current.value = '';
+ };
+
+ const useSharedDevelopment = () => {
+ if (adapter === 'ag-ui') agUi.useSharedDevelopment();
+ else langgraph.useSharedDevelopment();
+ setChoice('shared');
+ setEndpointDraft('');
+ setError(null);
+ if (keyRef.current) keyRef.current.value = '';
+ };
+
+ const endpointLabel = adapter === 'ag-ui' ? 'Endpoint' : 'API URL';
+ const isCustom = choice === 'custom';
+ const hasCustomTarget = view.kind !== 'shared';
+
+ return (
+
+
+ );
+}
diff --git a/libs/workspace-react/src/lib/components/mobile-nav-overlay.spec.tsx b/libs/workspace-react/src/lib/components/mobile-nav-overlay.spec.tsx
index 9105d3438..9d08b43bd 100644
--- a/libs/workspace-react/src/lib/components/mobile-nav-overlay.spec.tsx
+++ b/libs/workspace-react/src/lib/components/mobile-nav-overlay.spec.tsx
@@ -17,6 +17,7 @@ import type {
} from './control-plane/cockpit-control-plane';
import type { WorkspaceHostServices } from '../workspace-contracts';
import { MobileNavOverlay } from './mobile-nav-overlay';
+import { RuntimeTargetProvider } from '../runtime/runtime-target-provider';
const tree = buildNavigationTree(cockpitManifest);
const entry = cockpitManifest.find(
@@ -74,44 +75,46 @@ const renderOverlay = ({
}, []);
return (
-
-
- {
- onActiveUtilityChange(utility);
- setActiveUtility(utility);
- },
- activityOpenCycle: 0,
- runtimeSnapshot: snapshot,
- events: [],
- unseenProblems: 0,
- expanded: { Capability: true, Runtime: true },
- onExpandedChange: vi.fn(),
- onClearActivity: vi.fn(),
- onRecheck: vi.fn(),
- onReload: vi.fn(),
- onOpenRuntime: vi.fn(),
- onCopyDiagnostics: vi.fn(),
- renderContextPane,
- }}
- isOpen={isOpen}
- onClose={close}
- onPresenceChange={onPresenceChange}
- triggerRef={triggerRef}
- onFocusDestination={onFocusDestination}
- variant={variant}
- controlPlaneLayout={controlPlaneLayout}
- onContextAction={onContextAction}
- />
-
+
+
+
+ {
+ onActiveUtilityChange(utility);
+ setActiveUtility(utility);
+ },
+ activityOpenCycle: 0,
+ runtimeSnapshot: snapshot,
+ events: [],
+ unseenProblems: 0,
+ expanded: { Capability: true, Runtime: true },
+ onExpandedChange: vi.fn(),
+ onClearActivity: vi.fn(),
+ onRecheck: vi.fn(),
+ onReload: vi.fn(),
+ onOpenRuntime: vi.fn(),
+ onCopyDiagnostics: vi.fn(),
+ renderContextPane,
+ }}
+ isOpen={isOpen}
+ onClose={close}
+ onPresenceChange={onPresenceChange}
+ triggerRef={triggerRef}
+ onFocusDestination={onFocusDestination}
+ variant={variant}
+ controlPlaneLayout={controlPlaneLayout}
+ onContextAction={onContextAction}
+ />
+
+
);
}
@@ -329,6 +332,9 @@ describe('MobileNavOverlay', () => {
),
});
+ const trigger = result.triggerRef.current;
+ if (!trigger) throw new Error('Expected the shell trigger');
+ const focus = vi.spyOn(trigger, 'focus');
fireEvent.click(
within(dialog()).getByRole('button', { name: 'Search docs' })
@@ -340,6 +346,7 @@ describe('MobileNavOverlay', () => {
expect(screen.queryByRole('dialog')).toBeNull();
expect(result.onContextAction).not.toHaveBeenCalled();
act(() => vi.advanceTimersByTime(16));
+ expect(focus).toHaveBeenCalledOnce();
expect(result.onContextAction).toHaveBeenCalledOnce();
expect(result.onContextAction).toHaveBeenCalledWith('search-docs');
});
diff --git a/libs/workspace-react/src/lib/components/mobile-nav-overlay.tsx b/libs/workspace-react/src/lib/components/mobile-nav-overlay.tsx
index b7e7faa58..349127d62 100644
--- a/libs/workspace-react/src/lib/components/mobile-nav-overlay.tsx
+++ b/libs/workspace-react/src/lib/components/mobile-nav-overlay.tsx
@@ -98,6 +98,7 @@ export function MobileNavOverlay({
restoreFocus: 'workspace-panel',
});
} else if (intent.kind === 'action') {
+ triggerRefRef.current?.current?.focus();
onContextAction?.(intent.action);
}
}, [cancelScheduledFocus, onContextAction, onFocusDestination]);
diff --git a/libs/workspace-react/src/lib/components/run-mode/run-mode.spec.tsx b/libs/workspace-react/src/lib/components/run-mode/run-mode.spec.tsx
index fbf98689d..1826be6d3 100644
--- a/libs/workspace-react/src/lib/components/run-mode/run-mode.spec.tsx
+++ b/libs/workspace-react/src/lib/components/run-mode/run-mode.spec.tsx
@@ -38,7 +38,7 @@ describe('RunMode', () => {
runtimeUrl="http://localhost:4300"
capabilitySlug="streaming"
{...requiredProps}
- />,
+ />
);
expect(html).not.toContain(' {
capabilitySlug="streaming"
{...requiredProps}
runtimePhase="not_configured"
- />,
+ />
);
expect(html).not.toContain(' {
capabilitySlug="streaming"
{...requiredProps}
runtimePhase="invalid_configuration"
- />,
+ />
);
expect(html).not.toContain(' {
runtimeUrl="http://localhost:4500/path"
capabilitySlug="streaming"
{...requiredProps}
- />,
+ />
);
});
@@ -115,7 +115,7 @@ describe('RunMode', () => {
runtimeUrl="http://localhost:4500/path"
capabilitySlug="streaming"
{...requiredProps}
- />,
+ />
);
});
const firstFrame = container.querySelector('iframe');
@@ -128,13 +128,51 @@ describe('RunMode', () => {
capabilitySlug="streaming"
{...requiredProps}
frameGeneration={1}
- />,
+ />
);
});
expect(container.querySelector('iframe')).not.toBe(firstFrame);
});
+ it('remounts the frame for a new target generation without placing target values in the DOM', () => {
+ container = document.createElement('div');
+ document.body.appendChild(container);
+ root = createRoot(container);
+
+ act(() => {
+ root!.render(
+ ;
frameGeneration?: number;
+ targetGeneration?: number;
onFrameLoad?(): void;
runtimePhase?: RuntimePhase;
getSessionId: WorkspaceSessionIdProvider;
@@ -33,8 +34,10 @@ function buildIframeSrc(
const phk = telemetry?.posthogToken;
if (phk) url.searchParams.set('cockpit_phk', phk);
const ingestHost =
- telemetry?.ingestHost
- ?? (typeof window !== 'undefined' ? `${window.location.origin}/ingest` : undefined);
+ telemetry?.ingestHost ??
+ (typeof window !== 'undefined'
+ ? `${window.location.origin}/ingest`
+ : undefined);
if (ingestHost) url.searchParams.set('cockpit_host', ingestHost);
return url.toString();
}
@@ -50,6 +53,7 @@ export function RunMode({
capabilitySlug,
frameRef: externalFrameRef,
frameGeneration = 0,
+ targetGeneration = 0,
onFrameLoad,
runtimePhase = runtimeUrl ? 'connecting' : 'not_configured',
getSessionId,
@@ -57,16 +61,19 @@ export function RunMode({
}: RunModeProps) {
const fallbackFrameRef = useRef(null);
const frameRef = externalFrameRef ?? fallbackFrameRef;
- const identity = runtimeUrl
- ? `${runtimeUrl}\u0000${capabilitySlug}`
- : null;
+ const identity = runtimeUrl ? `${runtimeUrl}\u0000${capabilitySlug}` : null;
const [iframeSource, setIframeSource] = useState(null);
useEffect(() => {
if (runtimeUrl && runtimePhase !== 'invalid_configuration') {
setIframeSource({
identity: `${runtimeUrl}\u0000${capabilitySlug}`,
- src: buildIframeSrc(runtimeUrl, capabilitySlug, getSessionId, telemetry),
+ src: buildIframeSrc(
+ runtimeUrl,
+ capabilitySlug,
+ getSessionId,
+ telemetry
+ ),
});
} else {
setIframeSource(null);
@@ -75,7 +82,10 @@ export function RunMode({
if (runtimePhase === 'invalid_configuration') {
return (
-
+
);
@@ -83,7 +93,10 @@ export function RunMode({
if (!runtimeUrl) {
return (
-
+
);
@@ -97,7 +110,10 @@ export function RunMode({
if (!src) {
return (
-
+
);
}
@@ -105,7 +121,7 @@ export function RunMode({
return (
+ match[1].split(',').some((part) => part.trim() === selector)
+ )
+ .map((match) => match[2])
+ .join(';');
+}
+
const createHostServices = (): WorkspaceHostServices => ({
resolveEntryHref: (entry) =>
`/workspace/${entry.product}/${entry.topic}/${entry.language}`,
@@ -28,6 +49,24 @@ describe('NavigationGroups capability link instrumentation', () => {
vi.clearAllMocks();
});
+ it('uses complete rounded sidebar states without a left marker', () => {
+ const item = declarationsFor(workspaceCss, '.cockpit-nav-item');
+ const hover = declarationsFor(workspaceCss, '.cockpit-nav-item:hover');
+ const active = declarationsFor(
+ workspaceCss,
+ ".cockpit-nav-item[aria-current='page']"
+ );
+
+ expect(item).toMatch(/border-radius:\s*(?:6px|7px)/);
+ expect(hover).toMatch(/background:\s*var\(--ds-surface-dim\)/);
+ expect(active).toMatch(/background:\s*var\(--ds-accent-surface\)/);
+ for (const declarations of [item, hover, active]) {
+ expect(declarations).not.toMatch(
+ /border-(?:left|inline-start)(?:-(?:color|style|width))?\s*:/
+ );
+ }
+ });
+
it('fires cockpit:recipe_opened on capability link click', () => {
container = document.createElement('div');
document.body.append(container);
@@ -134,8 +173,28 @@ describe('NavigationGroups capability link instrumentation', () => {
/>
);
+ const template = document.createElement('template');
+ template.innerHTML = html;
+ const chevrons = template.content.querySelectorAll(
+ '.cockpit-nav-caret > svg.lucide-chevron-right'
+ );
+
expect(html).toContain('cockpit-nav-group-label');
- expect(html).toContain('lucide-chevron-right');
+ expect(chevrons.length).toBeGreaterThan(0);
+ for (const chevron of chevrons) {
+ expect(chevron.getAttribute('width')).toBe('15');
+ expect(chevron.getAttribute('height')).toBe('15');
+ expect(chevron.getAttribute('stroke-width')).toBe('2');
+ expect(chevron.parentElement?.className).toContain(
+ 'cockpit-nav-caret--open'
+ );
+ }
+ expect(declarationsFor(workspaceCss, '.cockpit-nav-caret')).toMatch(
+ /transition:[^;]*transform\s+150ms\s+ease/
+ );
+ expect(declarationsFor(workspaceCss, '.cockpit-nav-caret--open')).toMatch(
+ /transform:\s*rotate\(90deg\)/
+ );
expect(html).not.toContain('text-transform:uppercase');
});
diff --git a/libs/workspace-react/src/lib/docs-links.ts b/libs/workspace-react/src/lib/docs-links.ts
deleted file mode 100644
index f2eee410f..000000000
--- a/libs/workspace-react/src/lib/docs-links.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NO_COCKPIT_DOCS_LINK } from '@threadplane/cockpit-registry';
-
-/**
- * Absolute URL for a capability's `docsPath`.
- *
- * `docsPath` is a website-relative path (`/docs///`),
- * but the cockpit is served from its own origin (cockpit.threadplane.ai), so
- * the link has to be absolutised against the docs site.
- *
- * Returns `null` when the capability has no published docs page — callers
- * render no link rather than one that 404s.
- */
-export function resolveDocsUrl(docsPath: string | undefined): string | null {
- if (!docsPath || docsPath === NO_COCKPIT_DOCS_LINK) return null;
- if (/^https?:\/\//.test(docsPath)) return docsPath;
-
- const baseUrl = (
- process.env['NEXT_PUBLIC_COCKPIT_DOCS_BASE_URL'] ?? 'https://threadplane.ai'
- ).replace(/\/$/, '');
-
- return `${baseUrl}${docsPath.startsWith('/') ? docsPath : `/${docsPath}`}`;
-}
diff --git a/libs/workspace-react/src/lib/public-api.spec.tsx b/libs/workspace-react/src/lib/public-api.spec.tsx
index 54a9fdbb3..c78352e1f 100644
--- a/libs/workspace-react/src/lib/public-api.spec.tsx
+++ b/libs/workspace-react/src/lib/public-api.spec.tsx
@@ -7,6 +7,7 @@ import {
CodeModePanel,
DocsModePanel,
RunModePanel,
+ RuntimeTargetProvider,
WorkspaceProvider,
WorkspaceShell,
useRuntimeController,
@@ -75,37 +76,39 @@ describe('@threadplane/workspace-react public boundary', () => {
const modes: readonly WorkspaceMode[] = ['Docs', 'Run', 'Code', 'API'];
render(
- workspace docs}
- pushIdentity={vi.fn()}
- pushMode={vi.fn()}
- replaceMode={vi.fn()}
- getSessionId={() => 'public-boundary-session'}
- >
- docs
- run
- code
- api
-
+
+ workspace docs}
+ pushIdentity={vi.fn()}
+ pushMode={vi.fn()}
+ replaceMode={vi.fn()}
+ getSessionId={() => 'public-boundary-session'}
+ >
+ docs
+ run
+ code
+ api
+
+
);
expect(screen.getByText('docs').dataset.workspaceMode).toBe('Docs');
diff --git a/libs/workspace-react/src/lib/runtime/runtime-diagnostics.spec.ts b/libs/workspace-react/src/lib/runtime/runtime-diagnostics.spec.ts
index fe5c0c725..326033f27 100644
--- a/libs/workspace-react/src/lib/runtime/runtime-diagnostics.spec.ts
+++ b/libs/workspace-react/src/lib/runtime/runtime-diagnostics.spec.ts
@@ -3,6 +3,7 @@ import { afterEach, describe, expect, test, vi } from 'vitest';
import {
buildRuntimeDiagnostics,
copyRuntimeDiagnostics,
+ type RuntimeDiagnosticsTargetContext,
} from './runtime-diagnostics';
import {
createRuntimeSnapshot,
@@ -18,9 +19,9 @@ import {
function createReadySnapshot(): RuntimeSnapshot {
const initial = createRuntimeSnapshot(
parseRuntimeTarget(
- 'https://runtime.test/path?cockpit_did=did&cockpit_phk=key&cockpit_host=host&session=session&nonce=nonce#prompt',
+ 'https://runtime.test/path?cockpit_did=did&cockpit_phk=key&cockpit_host=host&session=session&nonce=nonce#prompt'
),
- 'streaming',
+ 'streaming'
);
const checking = runtimeReducer(initial, {
type: 'check_started',
@@ -55,11 +56,14 @@ describe('buildRuntimeDiagnostics', () => {
expect(buildRuntimeDiagnostics(snapshot, [event])).toEqual({
capability: 'streaming',
- runtime: 'https://runtime.test/path',
+ adapter: 'none',
+ targetKind: 'none',
state: 'ready',
checkedAt: 1_250,
lastReadyAt: 1_250,
protocolVersion: RUNTIME_BRIDGE_VERSION,
+ configurationGeneration: 0,
+ reasonCode: null,
recentEvents: [
{
at: event.at,
@@ -78,7 +82,7 @@ describe('buildRuntimeDiagnostics', () => {
expect(payload.recentEvents).toHaveLength(20);
expect(payload.recentEvents.map(({ at }) => at)).toEqual(
- events.slice(0, 20).map(({ at }) => at),
+ events.slice(0, 20).map(({ at }) => at)
);
});
@@ -86,16 +90,16 @@ describe('buildRuntimeDiagnostics', () => {
const checking = runtimeReducer(
createRuntimeSnapshot(
parseRuntimeTarget(
- 'https://runtime.test/path?cockpit_did=did&cockpit_phk=key&cockpit_host=host&session=session&nonce=nonce#document',
+ 'https://runtime.test/path?cockpit_did=did&cockpit_phk=key&cockpit_host=host&session=session&nonce=nonce#document'
),
- 'streaming',
+ 'streaming'
),
{
type: 'check_started',
intent: 'recheck',
nonce: 'active-secret-nonce',
startedAt: 1_000,
- },
+ }
) as RuntimeSnapshot & {
stack: string;
prompt: string;
@@ -112,13 +116,13 @@ describe('buildRuntimeDiagnostics', () => {
};
const serialized = JSON.stringify(
- buildRuntimeDiagnostics(checking, [sourceEvent]),
+ buildRuntimeDiagnostics(checking, [sourceEvent])
);
expect(serialized).not.toMatch(
- /cockpit_did|cockpit_phk|cockpit_host|session=|nonce=|active-secret|secret|stack|prompt|document|chat|extra/i,
+ /cockpit_did|cockpit_phk|cockpit_host|session=|nonce=|active-secret|secret|stack|prompt|document|chat|extra/i
);
- expect(buildRuntimeDiagnostics(checking, [sourceEvent]).runtime).toBe(
- 'https://runtime.test/path',
+ expect(buildRuntimeDiagnostics(checking, [sourceEvent])).not.toHaveProperty(
+ 'runtime'
);
});
@@ -126,27 +130,30 @@ describe('buildRuntimeDiagnostics', () => {
const rejected = 'javascript:raw-secret';
const snapshot = createRuntimeSnapshot(
parseRuntimeTarget(rejected),
- 'streaming',
+ 'streaming'
);
const serialized = JSON.stringify(buildRuntimeDiagnostics(snapshot, []));
- expect(buildRuntimeDiagnostics(snapshot, []).runtime).toBeNull();
+ expect(buildRuntimeDiagnostics(snapshot, [])).not.toHaveProperty('runtime');
+ expect(buildRuntimeDiagnostics(snapshot, []).reasonCode).toBe(
+ 'invalid_runtime_url'
+ );
expect(serialized).not.toContain(rejected);
expect(serialized).not.toContain('raw-secret');
});
- test('does not expose the allowlisted bridge code as an extra diagnostic field', () => {
+ test('projects an allowlisted reason code without exposing arbitrary details', () => {
const checking = runtimeReducer(
createRuntimeSnapshot(
parseRuntimeTarget('https://runtime.test'),
- 'streaming',
+ 'streaming'
),
{
type: 'check_started',
intent: 'recheck',
nonce: 'nonce-1',
startedAt: 1_000,
- },
+ }
);
const failed = runtimeReducer(checking, {
type: 'bootstrap_failed',
@@ -158,6 +165,175 @@ describe('buildRuntimeDiagnostics', () => {
expect(payload.state).toBe('error');
expect(payload).not.toHaveProperty('errorCode');
+ expect(payload.reasonCode).toBe('bootstrap_failed');
+ });
+
+ test('includes only allowlisted custom-target metadata and never endpoint or key fields', () => {
+ const payload = buildRuntimeDiagnostics(createReadySnapshot(), [], {
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ configurationGeneration: 4,
+ reasonCode: 'unauthorized',
+ });
+ const serialized = JSON.stringify(payload);
+
+ expect(payload).toMatchObject({
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ protocolVersion: RUNTIME_BRIDGE_VERSION,
+ configurationGeneration: 4,
+ state: 'ready',
+ reasonCode: 'unauthorized',
+ });
+ expect(serialized).not.toMatch(
+ /endpoint|apiUrl|apiKey|authorization|test-key-redact-me|https:\/\/api\.example\.test/i
+ );
+ });
+
+ test('projects hostile runtime event context onto the six-field allowlist', () => {
+ const hostileEvent = {
+ ...activity(0),
+ runtime: {
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ protocolVersion: 2,
+ configurationGeneration: 7,
+ phase: 'ready',
+ reasonCode: null,
+ endpoint: 'https://api.example.test/langgraph',
+ apiKey: 'test-key-redact-me',
+ },
+ } as SessionActivityEvent;
+
+ const payload = buildRuntimeDiagnostics(createReadySnapshot(), [
+ hostileEvent,
+ ]);
+
+ expect(payload.recentEvents[0]?.runtime).toEqual({
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ protocolVersion: 2,
+ configurationGeneration: 7,
+ phase: 'ready',
+ reasonCode: null,
+ });
+ expect(JSON.stringify(payload)).not.toMatch(
+ /api\.example\.test|test-key-redact-me|endpoint|apiKey/i
+ );
+ });
+
+ test('defaults hostile diagnostics context values without echoing them', () => {
+ const hostileMarker = 'test-key-redact-me';
+ const hostileEvent = {
+ ...activity(0),
+ runtime: {
+ adapter: `unknown-${hostileMarker}`,
+ targetKind: `unknown-${hostileMarker}`,
+ protocolVersion: Number.POSITIVE_INFINITY,
+ configurationGeneration: 1.5,
+ phase: `unknown-${hostileMarker}`,
+ reasonCode: `unknown-${hostileMarker}`,
+ },
+ } as unknown as SessionActivityEvent;
+ const hostileTargetContext = {
+ adapter: `unknown-${hostileMarker}`,
+ targetKind: `unknown-${hostileMarker}`,
+ configurationGeneration: -1,
+ reasonCode: `unknown-${hostileMarker}`,
+ } as unknown as RuntimeDiagnosticsTargetContext;
+
+ const payload = buildRuntimeDiagnostics(
+ createReadySnapshot(),
+ [hostileEvent],
+ hostileTargetContext
+ );
+
+ expect(payload).toMatchObject({
+ adapter: 'none',
+ targetKind: 'none',
+ protocolVersion: RUNTIME_BRIDGE_VERSION,
+ configurationGeneration: 0,
+ state: 'ready',
+ reasonCode: null,
+ });
+ expect(payload.recentEvents[0]?.runtime).toEqual({
+ adapter: 'none',
+ targetKind: 'none',
+ protocolVersion: 0,
+ configurationGeneration: 0,
+ phase: 'not_configured',
+ reasonCode: null,
+ });
+ expect(JSON.stringify(payload)).not.toContain(hostileMarker);
+ });
+
+ test('defaults throwing and revoked diagnostics contexts without throwing or echoing markers', () => {
+ const hostileMarker = 'throwing-diagnostics-marker';
+ const throwingContext = () =>
+ Object.defineProperty({}, 'adapter', {
+ enumerable: true,
+ get() {
+ throw new Error(hostileMarker);
+ },
+ });
+ const revokedTarget = Proxy.revocable(
+ {
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ configurationGeneration: 7,
+ reasonCode: null,
+ },
+ {}
+ );
+ const revokedRuntime = Proxy.revocable(
+ {
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ protocolVersion: 2,
+ configurationGeneration: 7,
+ phase: 'ready',
+ reasonCode: null,
+ },
+ {}
+ );
+ revokedTarget.revoke();
+ revokedRuntime.revoke();
+
+ for (const [targetContext, runtime] of [
+ [throwingContext(), throwingContext()],
+ [revokedTarget.proxy, revokedRuntime.proxy],
+ ] as const) {
+ const hostileEvent = {
+ ...activity(0),
+ runtime,
+ } as unknown as SessionActivityEvent;
+ let payload: ReturnType | undefined;
+
+ expect(() => {
+ payload = buildRuntimeDiagnostics(
+ createReadySnapshot(),
+ [hostileEvent],
+ targetContext as unknown as RuntimeDiagnosticsTargetContext
+ );
+ }).not.toThrow();
+ expect(payload).toMatchObject({
+ adapter: 'none',
+ targetKind: 'none',
+ protocolVersion: RUNTIME_BRIDGE_VERSION,
+ configurationGeneration: 0,
+ state: 'ready',
+ reasonCode: null,
+ });
+ expect(payload?.recentEvents[0]?.runtime).toEqual({
+ adapter: 'none',
+ targetKind: 'none',
+ protocolVersion: 0,
+ configurationGeneration: 0,
+ phase: 'not_configured',
+ reasonCode: null,
+ });
+ expect(JSON.stringify(payload)).not.toContain(hostileMarker);
+ }
});
test('freshly allocates the payload and projected event records', () => {
@@ -176,16 +352,39 @@ describe('buildRuntimeDiagnostics', () => {
});
describe('copyRuntimeDiagnostics', () => {
+ test('copies the sanitized active target context without endpoint or key fields', async () => {
+ const writeText = vi.fn().mockResolvedValue(undefined);
+ await expect(
+ copyRuntimeDiagnostics(createReadySnapshot(), [], writeText, {
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ configurationGeneration: 9,
+ reasonCode: 'unauthorized',
+ } as never)
+ ).resolves.toBe('succeeded');
+
+ const serialized = writeText.mock.calls[0]?.[0] as string;
+ expect(JSON.parse(serialized)).toMatchObject({
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ configurationGeneration: 9,
+ reasonCode: 'unauthorized',
+ });
+ expect(serialized).not.toMatch(
+ /endpoint|apiUrl|apiKey|authorization|test-key-redact-me/i
+ );
+ });
+
test('serializes the exact payload with two-space indentation', async () => {
const snapshot = createReadySnapshot();
const events = [activity(0)];
const writeText = vi.fn().mockResolvedValue(undefined);
await expect(
- copyRuntimeDiagnostics(snapshot, events, writeText),
+ copyRuntimeDiagnostics(snapshot, events, writeText)
).resolves.toBe('succeeded');
expect(writeText).toHaveBeenCalledWith(
- JSON.stringify(buildRuntimeDiagnostics(snapshot, events), null, 2),
+ JSON.stringify(buildRuntimeDiagnostics(snapshot, events), null, 2)
);
});
@@ -195,13 +394,13 @@ describe('copyRuntimeDiagnostics', () => {
() =>
new Promise((resolve) => {
resolveWrite = resolve;
- }),
+ })
);
let result: string | undefined;
const pending = copyRuntimeDiagnostics(
createReadySnapshot(),
[],
- writeText,
+ writeText
).then((value) => {
result = value;
});
@@ -218,16 +417,19 @@ describe('copyRuntimeDiagnostics', () => {
throw new Error('clipboard unavailable');
}),
vi.fn().mockRejectedValue(new Error('permission denied')),
- ])('returns failed when an injected clipboard writer fails', async (writer) => {
- await expect(
- copyRuntimeDiagnostics(createReadySnapshot(), [], writer),
- ).resolves.toBe('failed');
- });
+ ])(
+ 'returns failed when an injected clipboard writer fails',
+ async (writer) => {
+ await expect(
+ copyRuntimeDiagnostics(createReadySnapshot(), [], writer)
+ ).resolves.toBe('failed');
+ }
+ );
test('returns failed when the default clipboard is missing', async () => {
vi.stubGlobal('navigator', {});
await expect(
- copyRuntimeDiagnostics(createReadySnapshot(), []),
+ copyRuntimeDiagnostics(createReadySnapshot(), [])
).resolves.toBe('failed');
});
});
diff --git a/libs/workspace-react/src/lib/runtime/runtime-diagnostics.ts b/libs/workspace-react/src/lib/runtime/runtime-diagnostics.ts
index 04370fbe1..676f82e8e 100644
--- a/libs/workspace-react/src/lib/runtime/runtime-diagnostics.ts
+++ b/libs/workspace-react/src/lib/runtime/runtime-diagnostics.ts
@@ -1,5 +1,12 @@
import { RUNTIME_BRIDGE_VERSION } from '@threadplane/cockpit-runtime-bridge';
-import type { SessionActivityEvent } from './session-activity';
+import type { RuntimeAdapter } from '@threadplane/cockpit-registry';
+import type { SanitizedRuntimeTargetDisplay } from './runtime-target-session';
+import {
+ projectRuntimeActivityContext,
+ type RuntimeActivityContext,
+ type RuntimeActivityReasonCode,
+ type SessionActivityEvent,
+} from './session-activity';
import type { RuntimePhase, RuntimeSnapshot } from './runtime-state';
export interface RuntimeDiagnosticEvent {
@@ -8,18 +15,31 @@ export interface RuntimeDiagnosticEvent {
severity: SessionActivityEvent['severity'];
capability: string;
summary: string;
+ runtime?: RuntimeActivityContext;
}
export interface RuntimeDiagnostics {
capability: string;
- runtime: string | null;
+ adapter: RuntimeAdapter;
+ targetKind: SanitizedRuntimeTargetDisplay['kind'];
state: RuntimePhase;
checkedAt: number | null;
lastReadyAt: number | null;
- protocolVersion: typeof RUNTIME_BRIDGE_VERSION;
+ protocolVersion: number;
+ configurationGeneration: number;
+ reasonCode: RuntimeActivityReasonCode | null;
recentEvents: RuntimeDiagnosticEvent[];
}
+export interface RuntimeDiagnosticsTargetContext {
+ adapter: RuntimeAdapter;
+ targetKind: SanitizedRuntimeTargetDisplay['kind'];
+ protocolVersion?: number;
+ configurationGeneration: number;
+ phase?: RuntimePhase;
+ reasonCode: RuntimeActivityReasonCode | null;
+}
+
export type ClipboardWriter = (text: string) => void | PromiseLike;
export type CopyDiagnosticsOutcome = 'succeeded' | 'failed';
@@ -28,23 +48,48 @@ const MAX_DIAGNOSTIC_EVENTS = 20;
export function buildRuntimeDiagnostics(
snapshot: RuntimeSnapshot,
events: readonly SessionActivityEvent[],
+ targetContext?: RuntimeDiagnosticsTargetContext
): RuntimeDiagnostics {
+ const projectedInput = targetContext
+ ? projectRuntimeActivityContext(targetContext)
+ : null;
+ const projectedTargetContext = projectedInput
+ ? {
+ ...projectedInput,
+ protocolVersion:
+ projectedInput.protocolVersion || RUNTIME_BRIDGE_VERSION,
+ phase:
+ projectedInput.phase === 'not_configured'
+ ? snapshot.phase
+ : projectedInput.phase,
+ }
+ : null;
+ const reasonCode = projectedTargetContext
+ ? projectedTargetContext.reasonCode
+ : snapshot.phase === 'invalid_configuration'
+ ? 'invalid_runtime_url'
+ : snapshot.errorCode;
return {
capability: snapshot.capability,
- runtime:
- snapshot.target.kind === 'configured'
- ? snapshot.target.sanitizedUrl
- : null,
+ adapter: projectedTargetContext?.adapter ?? 'none',
+ targetKind: projectedTargetContext?.targetKind ?? 'none',
state: snapshot.phase,
checkedAt: snapshot.checkedAt,
lastReadyAt: snapshot.lastReadyAt,
- protocolVersion: RUNTIME_BRIDGE_VERSION,
+ protocolVersion:
+ projectedTargetContext?.protocolVersion ?? RUNTIME_BRIDGE_VERSION,
+ configurationGeneration:
+ projectedTargetContext?.configurationGeneration ?? 0,
+ reasonCode,
recentEvents: events.slice(0, MAX_DIAGNOSTIC_EVENTS).map((event) => ({
at: event.at,
kind: event.kind,
severity: event.severity,
capability: event.capability,
summary: event.summary,
+ ...(event.runtime
+ ? { runtime: projectRuntimeActivityContext(event.runtime) }
+ : {}),
})),
};
}
@@ -67,6 +112,7 @@ export async function copyRuntimeDiagnostics(
snapshot: RuntimeSnapshot,
events: readonly SessionActivityEvent[],
writeText?: ClipboardWriter,
+ targetContext?: RuntimeDiagnosticsTargetContext
): Promise {
const writer = writeText ?? getDefaultClipboardWriter();
if (writer === null) {
@@ -75,9 +121,9 @@ export async function copyRuntimeDiagnostics(
try {
const serialized = JSON.stringify(
- buildRuntimeDiagnostics(snapshot, events),
+ buildRuntimeDiagnostics(snapshot, events, targetContext),
null,
- 2,
+ 2
);
await writer(serialized);
return 'succeeded';
diff --git a/libs/workspace-react/src/lib/runtime/runtime-state.spec.ts b/libs/workspace-react/src/lib/runtime/runtime-state.spec.ts
index fb4a34aef..2a46e3eb5 100644
--- a/libs/workspace-react/src/lib/runtime/runtime-state.spec.ts
+++ b/libs/workspace-react/src/lib/runtime/runtime-state.spec.ts
@@ -10,7 +10,7 @@ import {
const capability = 'streaming';
const configuredTarget = parseRuntimeTarget(
- 'https://runtime.test/path?secret=x#hash',
+ 'https://runtime.test/path?secret=x#hash'
);
function checkingSnapshot(): RuntimeSnapshot {
@@ -35,7 +35,9 @@ describe('parseRuntimeTarget', () => {
'data:text/plain,secret',
'ftp://runtime.test/path',
])('rejects an unsafe configured value without exposing it: %s', (value) => {
- expect(parseRuntimeTarget(value)).toEqual({ kind: 'invalid_configuration' });
+ expect(parseRuntimeTarget(value)).toEqual({
+ kind: 'invalid_configuration',
+ });
});
test('treats an out-of-contract undefined value as invalid rather than throwing', () => {
@@ -56,12 +58,11 @@ describe('parseRuntimeTarget', () => {
test('accepts HTTP credentials while omitting them from the sanitized identity', () => {
expect(
parseRuntimeTarget(
- 'https://user:password@runtime.test/path?secret=x#hash',
- ),
+ 'https://user:password@runtime.test/path?secret=x#hash'
+ )
).toEqual({
kind: 'configured',
- configuredUrl:
- 'https://user:password@runtime.test/path?secret=x#hash',
+ configuredUrl: 'https://user:password@runtime.test/path?secret=x#hash',
sanitizedUrl: 'https://runtime.test/path',
origin: 'https://runtime.test',
});
@@ -87,10 +88,10 @@ describe('parseRuntimeTarget', () => {
describe('runtime state', () => {
test('initializes each target category to its distinct phase', () => {
expect(
- createRuntimeSnapshot(parseRuntimeTarget(null), capability).phase,
+ createRuntimeSnapshot(parseRuntimeTarget(null), capability).phase
).toBe('not_configured');
expect(
- createRuntimeSnapshot(parseRuntimeTarget('invalid'), capability).phase,
+ createRuntimeSnapshot(parseRuntimeTarget('invalid'), capability).phase
).toBe('invalid_configuration');
expect(createRuntimeSnapshot(configuredTarget, capability)).toMatchObject({
phase: 'connecting',
@@ -103,10 +104,75 @@ describe('runtime state', () => {
errorCode: null,
frameGeneration: 0,
routeGeneration: 0,
+ targetGeneration: 0,
recoveryOrigin: null,
});
});
+ test('tracks configuration and target generations independently from routes and frames', () => {
+ const initial = createRuntimeSnapshot(configuredTarget, capability);
+ const configuring = runtimeReducer(initial, {
+ type: 'configuration_started',
+ } as never);
+ expect(configuring).toMatchObject({
+ phase: 'configuring',
+ routeGeneration: 0,
+ frameGeneration: 0,
+ targetGeneration: 0,
+ });
+
+ const configured = runtimeReducer(configuring, {
+ type: 'configuration_succeeded',
+ } as never);
+ expect(configured.phase).toBe('connecting');
+
+ const targetChanged = runtimeReducer(configured, {
+ type: 'context_reset',
+ target: configuredTarget,
+ capability,
+ routeChanged: false,
+ targetChanged: true,
+ } as never);
+ expect(targetChanged).toMatchObject({
+ phase: 'connecting',
+ routeGeneration: 0,
+ frameGeneration: 1,
+ targetGeneration: 1,
+ });
+
+ const routeChanged = runtimeReducer(targetChanged, {
+ type: 'context_reset',
+ target: configuredTarget,
+ capability: 'persistence',
+ routeChanged: true,
+ targetChanged: false,
+ } as never);
+ expect(routeChanged).toMatchObject({
+ routeGeneration: 1,
+ frameGeneration: 1,
+ targetGeneration: 1,
+ });
+ });
+
+ test.each([
+ ['unauthorized', 'unauthorized'],
+ ['network_blocked', 'network_blocked'],
+ ['incompatible_bridge', 'incompatible_bridge'],
+ ] as const)(
+ 'records the allowlisted %s runtime failure phase',
+ (code, phase) => {
+ const failed = runtimeReducer(
+ createRuntimeSnapshot(configuredTarget, capability),
+ { type: 'runtime_failure', code, at: 1_250 } as never
+ );
+ expect(failed).toMatchObject({
+ phase,
+ errorCode: code,
+ checkedAt: 1_250,
+ });
+ }
+ );
+
test('starts an initial frame check without claiming ready', () => {
const state = runtimeReducer(
createRuntimeSnapshot(configuredTarget, capability),
@@ -115,7 +181,7 @@ describe('runtime state', () => {
intent: 'frame_load',
nonce: 'nonce-1',
startedAt: 1_000,
- },
+ }
);
expect(state).toMatchObject({
@@ -168,7 +234,7 @@ describe('runtime state', () => {
type: 'timeout',
nonce: 'nonce-2',
at: 7_000,
- }),
+ })
).toMatchObject({
phase: 'unresponsive',
activeNonce: null,
@@ -186,7 +252,7 @@ describe('runtime state', () => {
nonce: 'nonce-1',
code: 'bootstrap_failed',
at: 1_300,
- }),
+ })
).toMatchObject({
phase: 'error',
activeNonce: null,
@@ -243,13 +309,13 @@ describe('runtime state', () => {
intent: 'frame_load',
nonce: 'nonce-3',
startedAt: 2_100,
- }).phase,
+ }).phase
).toBe('reloading');
});
test('cancellation invalidates a nonce without inventing a terminal phase', () => {
expect(
- runtimeReducer(checkingSnapshot(), { type: 'check_cancelled' }),
+ runtimeReducer(checkingSnapshot(), { type: 'check_cancelled' })
).toMatchObject({
phase: 'checking',
activeNonce: null,
@@ -265,7 +331,7 @@ describe('runtime state', () => {
type: 'route_reset',
target: resetTarget,
capability: 'persistence',
- }),
+ })
).toEqual({
...createRuntimeSnapshot(resetTarget, 'persistence'),
routeGeneration: 1,
@@ -279,9 +345,9 @@ describe('classifyRuntimeTerminalTransition', () => {
(phase) => {
const previous = createRuntimeSnapshot(configuredTarget, capability);
expect(
- classifyRuntimeTerminalTransition(previous, { ...previous, phase }),
+ classifyRuntimeTerminalTransition(previous, { ...previous, phase })
).toBeNull();
- },
+ }
);
test('does not classify a duplicate semantic terminal state', () => {
@@ -294,7 +360,7 @@ describe('classifyRuntimeTerminalTransition', () => {
classifyRuntimeTerminalTransition(ready, {
...ready,
checkedAt: 2_000,
- }),
+ })
).toBeNull();
});
@@ -328,7 +394,7 @@ describe('classifyRuntimeTerminalTransition', () => {
toState: 'ready',
transition: 'recovered',
});
- },
+ }
);
test('classifies unresponsive through recheck to ready as exactly one recovery', () => {
@@ -355,7 +421,7 @@ describe('classifyRuntimeTerminalTransition', () => {
classifyRuntimeTerminalTransition(unresponsive, rechecking),
classifyRuntimeTerminalTransition(rechecking, ready),
classifyRuntimeTerminalTransition(ready, { ...ready }),
- ].filter((transition) => transition !== null),
+ ].filter((transition) => transition !== null)
).toEqual([
{
capability,
@@ -393,7 +459,7 @@ describe('classifyRuntimeTerminalTransition', () => {
classifyRuntimeTerminalTransition(failed, reloading),
classifyRuntimeTerminalTransition(reloading, checkingReload),
classifyRuntimeTerminalTransition(checkingReload, ready),
- ].filter((transition) => transition !== null),
+ ].filter((transition) => transition !== null)
).toEqual([
{
capability,
@@ -436,7 +502,7 @@ describe('classifyRuntimeTerminalTransition', () => {
});
expect(
- classifyRuntimeTerminalTransition(ordinaryCheck, readyAgain),
+ classifyRuntimeTerminalTransition(ordinaryCheck, readyAgain)
).toEqual({
capability,
fromState: 'checking',
@@ -463,7 +529,7 @@ describe('classifyRuntimeTerminalTransition', () => {
type: 'ready',
nonce: 'stale',
at: 7_250,
- }),
+ })
).toBe(rechecking);
expect(rechecking.recoveryOrigin).toBe('unresponsive');
});
@@ -488,11 +554,11 @@ describe('classifyRuntimeTerminalTransition', () => {
test('classifies invalid configuration without exposing its rejected value', () => {
const previous = createRuntimeSnapshot(
parseRuntimeTarget(null),
- capability,
+ capability
);
const next = createRuntimeSnapshot(
parseRuntimeTarget('https://runtime.test/?secret=x'),
- capability,
+ capability
);
const invalid = {
...next,
@@ -532,7 +598,7 @@ describe('classifyRuntimeTerminalTransition', () => {
test('classifies invalid configuration again after a capability route reset', () => {
const previous = createRuntimeSnapshot(
parseRuntimeTarget('invalid-a'),
- 'capability-a',
+ 'capability-a'
);
const next = runtimeReducer(previous, {
type: 'route_reset',
@@ -552,7 +618,7 @@ describe('classifyRuntimeTerminalTransition', () => {
test('classifies a new invalid route for the same capability but dedupes its renders', () => {
const previous = createRuntimeSnapshot(
parseRuntimeTarget('invalid-a'),
- capability,
+ capability
);
const next = runtimeReducer(previous, {
type: 'route_reset',
@@ -570,7 +636,7 @@ describe('classifyRuntimeTerminalTransition', () => {
classifyRuntimeTerminalTransition(next, {
...next,
checkedAt: 2_000,
- }),
+ })
).toBeNull();
});
});
@@ -585,6 +651,10 @@ describe('runtimeRailStatus', () => {
kind: 'working',
label: 'runtime starting',
});
+ expect(runtimeRailStatus('configuring' as never)).toEqual({
+ kind: 'working',
+ label: 'runtime starting',
+ });
expect(runtimeRailStatus('checking')).toEqual({
kind: 'working',
label: 'runtime starting',
@@ -601,6 +671,16 @@ describe('runtimeRailStatus', () => {
kind: 'error',
label: 'runtime error',
});
+ for (const phase of [
+ 'unauthorized',
+ 'network_blocked',
+ 'incompatible_bridge',
+ ] as const) {
+ expect(runtimeRailStatus(phase as never)).toEqual({
+ kind: 'error',
+ label: 'runtime error',
+ });
+ }
expect(runtimeRailStatus('invalid_configuration')).toEqual({
kind: 'error',
label: 'runtime error',
diff --git a/libs/workspace-react/src/lib/runtime/runtime-state.ts b/libs/workspace-react/src/lib/runtime/runtime-state.ts
index cb761c864..6b9587bc0 100644
--- a/libs/workspace-react/src/lib/runtime/runtime-state.ts
+++ b/libs/workspace-react/src/lib/runtime/runtime-state.ts
@@ -3,12 +3,16 @@ import type { ControlPlaneRailItemStatus } from '@threadplane/ui-react';
export type RuntimePhase =
| 'not_configured'
| 'invalid_configuration'
+ | 'configuring'
| 'connecting'
| 'checking'
| 'ready'
| 'unresponsive'
| 'reloading'
- | 'error';
+ | 'error'
+ | 'unauthorized'
+ | 'network_blocked'
+ | 'incompatible_bridge';
export type RuntimeTarget =
| { kind: 'not_configured' }
@@ -20,8 +24,17 @@ export type RuntimeTarget =
origin: string;
};
-export type RuntimeErrorCode = 'bootstrap_failed';
-export type RuntimeRecoveryOrigin = 'unresponsive' | 'error';
+export type RuntimeErrorCode =
+ | 'bootstrap_failed'
+ | 'unauthorized'
+ | 'network_blocked'
+ | 'incompatible_bridge';
+export type RuntimeRecoveryOrigin =
+ | 'unresponsive'
+ | 'error'
+ | 'unauthorized'
+ | 'network_blocked'
+ | 'incompatible_bridge';
export interface RuntimeSnapshot {
phase: RuntimePhase;
@@ -34,6 +47,7 @@ export interface RuntimeSnapshot {
errorCode: RuntimeErrorCode | null;
frameGeneration: number;
routeGeneration: number;
+ targetGeneration: number;
recoveryOrigin: RuntimeRecoveryOrigin | null;
}
@@ -54,13 +68,33 @@ export type RuntimeAction =
}
| { type: 'reload_requested' }
| { type: 'check_cancelled' }
- | { type: 'route_reset'; target: RuntimeTarget; capability: string };
+ | { type: 'configuration_started' }
+ | { type: 'configuration_succeeded' }
+ | {
+ type: 'runtime_failure';
+ code: Extract<
+ RuntimeErrorCode,
+ 'unauthorized' | 'network_blocked' | 'incompatible_bridge'
+ >;
+ at: number;
+ }
+ | { type: 'route_reset'; target: RuntimeTarget; capability: string }
+ | {
+ type: 'context_reset';
+ target: RuntimeTarget;
+ capability: string;
+ routeChanged: boolean;
+ targetChanged: boolean;
+ };
export type RuntimeTerminalPhase =
| 'invalid_configuration'
| 'ready'
| 'unresponsive'
- | 'error';
+ | 'error'
+ | 'unauthorized'
+ | 'network_blocked'
+ | 'incompatible_bridge';
export interface RuntimeTerminalTransition {
capability: string;
@@ -68,7 +102,7 @@ export interface RuntimeTerminalTransition {
toState: RuntimeTerminalPhase;
elapsedMs?: number;
transition?: 'recovered';
- reasonCode?: 'bootstrap_failed' | 'invalid_runtime_url';
+ reasonCode?: RuntimeErrorCode | 'invalid_runtime_url';
}
export function parseRuntimeTarget(value: string | null): RuntimeTarget {
@@ -101,13 +135,15 @@ export function createRuntimeSnapshot(
target: RuntimeTarget,
capability: string,
routeGeneration = 0,
+ targetGeneration = 0,
+ frameGeneration = 0
): RuntimeSnapshot {
const phase =
target.kind === 'not_configured'
? 'not_configured'
: target.kind === 'invalid_configuration'
- ? 'invalid_configuration'
- : 'connecting';
+ ? 'invalid_configuration'
+ : 'connecting';
return {
phase,
@@ -118,8 +154,9 @@ export function createRuntimeSnapshot(
checkedAt: null,
lastReadyAt: null,
errorCode: null,
- frameGeneration: 0,
+ frameGeneration,
routeGeneration,
+ targetGeneration,
recoveryOrigin: null,
};
}
@@ -137,9 +174,15 @@ function clearActiveCheck(state: RuntimeSnapshot): RuntimeSnapshot {
}
function recoveryOriginFor(
- state: RuntimeSnapshot,
+ state: RuntimeSnapshot
): RuntimeRecoveryOrigin | null {
- if (state.phase === 'unresponsive' || state.phase === 'error') {
+ if (
+ state.phase === 'unresponsive' ||
+ state.phase === 'error' ||
+ state.phase === 'unauthorized' ||
+ state.phase === 'network_blocked' ||
+ state.phase === 'incompatible_bridge'
+ ) {
return state.phase;
}
return state.recoveryOrigin;
@@ -147,7 +190,7 @@ function recoveryOriginFor(
export function runtimeReducer(
state: RuntimeSnapshot,
- action: RuntimeAction,
+ action: RuntimeAction
): RuntimeSnapshot {
switch (action.type) {
case 'check_started':
@@ -209,11 +252,47 @@ export function runtimeReducer(
};
case 'check_cancelled':
return clearActiveCheck(state);
+ case 'configuration_started':
+ if (state.target.kind !== 'configured') return state;
+ return {
+ ...clearActiveCheck(state),
+ phase: 'configuring',
+ errorCode: null,
+ recoveryOrigin: recoveryOriginFor(state),
+ };
+ case 'configuration_succeeded':
+ if (state.target.kind !== 'configured' || state.phase !== 'configuring') {
+ return state;
+ }
+ return {
+ ...state,
+ phase: 'connecting',
+ errorCode: null,
+ };
+ case 'runtime_failure':
+ if (state.target.kind !== 'configured') return state;
+ return {
+ ...clearActiveCheck(state),
+ phase: action.code,
+ checkedAt: action.at,
+ errorCode: action.code,
+ recoveryOrigin: null,
+ };
case 'route_reset':
return createRuntimeSnapshot(
action.target,
action.capability,
state.routeGeneration + 1,
+ state.targetGeneration,
+ state.frameGeneration
+ );
+ case 'context_reset':
+ return createRuntimeSnapshot(
+ action.target,
+ action.capability,
+ state.routeGeneration + (action.routeChanged ? 1 : 0),
+ state.targetGeneration + (action.targetChanged ? 1 : 0),
+ state.frameGeneration + (action.targetChanged ? 1 : 0)
);
}
}
@@ -223,13 +302,16 @@ function isTerminalPhase(phase: RuntimePhase): phase is RuntimeTerminalPhase {
phase === 'invalid_configuration' ||
phase === 'ready' ||
phase === 'unresponsive' ||
- phase === 'error'
+ phase === 'error' ||
+ phase === 'unauthorized' ||
+ phase === 'network_blocked' ||
+ phase === 'incompatible_bridge'
);
}
function safeElapsedMs(
startedAt: number | null,
- completedAt: number | null,
+ completedAt: number | null
): number | undefined {
if (
startedAt === null ||
@@ -245,7 +327,7 @@ function safeElapsedMs(
export function classifyRuntimeTerminalTransition(
previous: RuntimeSnapshot,
- next: RuntimeSnapshot,
+ next: RuntimeSnapshot
): RuntimeTerminalTransition | null {
if (
!isTerminalPhase(next.phase) ||
@@ -271,12 +353,20 @@ export function classifyRuntimeTerminalTransition(
next.phase === 'ready' &&
(previous.phase === 'unresponsive' ||
previous.phase === 'error' ||
+ previous.phase === 'unauthorized' ||
+ previous.phase === 'network_blocked' ||
+ previous.phase === 'incompatible_bridge' ||
previous.recoveryOrigin !== null)
) {
result.transition = 'recovered';
}
- if (next.phase === 'error') {
- result.reasonCode = 'bootstrap_failed';
+ if (
+ next.phase === 'error' ||
+ next.phase === 'unauthorized' ||
+ next.phase === 'network_blocked' ||
+ next.phase === 'incompatible_bridge'
+ ) {
+ if (next.errorCode !== null) result.reasonCode = next.errorCode;
} else if (next.phase === 'invalid_configuration') {
result.reasonCode = 'invalid_runtime_url';
}
@@ -290,11 +380,15 @@ export function runtimeRailStatus(
case 'ready':
return { kind: 'success', label: 'runtime ready' };
case 'connecting':
+ case 'configuring':
case 'checking':
case 'reloading':
return { kind: 'working', label: 'runtime starting' };
case 'unresponsive':
case 'error':
+ case 'unauthorized':
+ case 'network_blocked':
+ case 'incompatible_bridge':
case 'invalid_configuration':
return { kind: 'error', label: 'runtime error' };
case 'not_configured':
diff --git a/libs/workspace-react/src/lib/runtime/runtime-target-provider.spec.tsx b/libs/workspace-react/src/lib/runtime/runtime-target-provider.spec.tsx
new file mode 100644
index 000000000..cb2777aa1
--- /dev/null
+++ b/libs/workspace-react/src/lib/runtime/runtime-target-provider.spec.tsx
@@ -0,0 +1,508 @@
+/** @vitest-environment jsdom */
+import React, { useEffect, useState } from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { RuntimeAdapter } from '@threadplane/cockpit-registry';
+import {
+ RuntimeTargetProvider,
+ useAgUiRuntimeTarget,
+ useEffectiveRuntimeTarget,
+ useLangGraphRuntimeTarget,
+ useRuntimeTargetView,
+} from './runtime-target-provider';
+import * as publicWorkspaceApi from '../../index';
+
+const endpoint = 'https://agents.example.test/ag-ui';
+const apiUrl = 'https://api.example.test/langgraph/';
+const apiKey = 'test-key-redact-me';
+
+function Probe({ adapter = 'langgraph' }: { adapter?: RuntimeAdapter }) {
+ const agUi = useAgUiRuntimeTarget();
+ const langgraph = useLangGraphRuntimeTarget();
+ const view = useRuntimeTargetView(adapter);
+ const [draft, setDraft] = useState('');
+
+ useEffect(
+ () =>
+ adapter === 'none'
+ ? undefined
+ : adapter === 'ag-ui'
+ ? agUi.registerDraftClear(() => setDraft(''))
+ : langgraph.registerDraftClear(() => setDraft('')),
+ [adapter, agUi.registerDraftClear, langgraph.registerDraftClear]
+ );
+
+ return (
+
+
+ );
+
+describe('RuntimeTargetProvider', () => {
+ beforeEach(() => {
+ window.history.replaceState({}, '', '/docs/langgraph/guides/streaming');
+ window.localStorage.clear();
+ window.sessionStorage.clear();
+ });
+
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ it('initializes independent AG-UI and LangGraph slots to Shared', () => {
+ renderProvider();
+
+ expect(screen.getByTestId('ag-ui-kind').textContent).toBe('shared');
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe('shared');
+ expect(screen.getByTestId('view').textContent).toContain(
+ 'Shared development'
+ );
+ });
+
+ it('validates and atomically applies only the selected adapter slot', () => {
+ let serializedApplyResult = '';
+ function AtomicProbe() {
+ const agUi = useAgUiRuntimeTarget();
+ const langgraph = useLangGraphRuntimeTarget();
+ return (
+ <>
+
+
+
+
+
+ );
+ }
+ render(
+
+
+ );
+
+ fireEvent.click(screen.getByRole('button', { name: 'Apply valid' }));
+ expect(screen.getByTestId('atomic-langgraph').textContent).toBe(
+ 'langsmith'
+ );
+ expect(screen.getByTestId('atomic-ag-ui').textContent).toBe('shared');
+ expect(serializedApplyResult).toBe('{"ok":true}');
+ expect(serializedApplyResult).not.toContain(apiKey);
+
+ fireEvent.click(screen.getByRole('button', { name: 'Apply invalid' }));
+ expect(screen.getByTestId('atomic-langgraph').textContent).toBe(
+ 'langsmith'
+ );
+ expect(screen.getByTestId('atomic-ag-ui').textContent).toBe('shared');
+ });
+
+ it('retains same-adapter values through every mode and route changes', () => {
+ const view = renderProvider('langgraph');
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+
+ for (const suffix of ['', '?mode=run', '?mode=code', '?mode=api']) {
+ window.history.pushState(
+ {},
+ '',
+ `/docs/langgraph/guides/streaming${suffix}`
+ );
+ view.rerender(
+
+
+ );
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe(
+ 'langsmith'
+ );
+ }
+
+ window.history.pushState({}, '', '/docs/langgraph/guides/persistence');
+ view.rerender(
+
+
+ );
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe('langsmith');
+ });
+
+ it('selects independent slots during cross-adapter navigation', () => {
+ const view = renderProvider('langgraph');
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+ fireEvent.click(screen.getByRole('button', { name: 'Apply AG-UI' }));
+
+ view.rerender(
+
+
+ );
+ expect(screen.getByTestId('view').textContent).toContain('Custom AG-UI');
+
+ view.rerender(
+
+
+ );
+ expect(screen.getByTestId('view').textContent).toContain(
+ 'Custom LangSmith'
+ );
+ });
+
+ it('clears only the requested adapter slot', () => {
+ renderProvider();
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+ fireEvent.click(screen.getByRole('button', { name: 'Apply AG-UI' }));
+
+ fireEvent.click(screen.getByRole('button', { name: 'Clear AG-UI' }));
+
+ expect(screen.getByTestId('ag-ui-kind').textContent).toBe('shared');
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe('langsmith');
+ });
+
+ it('keeps local draft edits outside effective target state', () => {
+ renderProvider('ag-ui');
+ fireEvent.change(screen.getByRole('textbox', { name: 'Local draft' }), {
+ target: { value: 'https://draft.example.test/never-applied' },
+ });
+
+ expect(screen.getByTestId('ag-ui-kind').textContent).toBe('shared');
+ expect(screen.getByTestId('view').textContent).not.toContain(
+ 'draft.example.test'
+ );
+ });
+
+ it('synchronously clears both slots and registered drafts on pagehide', () => {
+ renderProvider();
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+ fireEvent.click(screen.getByRole('button', { name: 'Apply AG-UI' }));
+ fireEvent.change(screen.getByRole('textbox', { name: 'Local draft' }), {
+ target: { value: 'unsaved draft' },
+ });
+
+ act(() => window.dispatchEvent(new PageTransitionEvent('pagehide')));
+
+ expect(screen.getByTestId('ag-ui-kind').textContent).toBe('shared');
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe('shared');
+ expect(
+ (screen.getByRole('textbox', { name: 'Local draft' }) as HTMLInputElement)
+ .value
+ ).toBe('');
+ });
+
+ it('clears only on persisted pageshow and leaves ordinary routing alone', () => {
+ renderProvider();
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+
+ act(() => window.dispatchEvent(new PageTransitionEvent('pageshow')));
+ window.history.pushState(
+ {},
+ '',
+ '/docs/langgraph/guides/streaming?mode=api'
+ );
+ window.dispatchEvent(new PopStateEvent('popstate'));
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe('langsmith');
+
+ act(() =>
+ window.dispatchEvent(
+ new PageTransitionEvent('pageshow', { persisted: true })
+ )
+ );
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe('shared');
+ });
+
+ it('clears both slots and every registered draft on persisted pageshow', () => {
+ function BothDrafts() {
+ const agUi = useAgUiRuntimeTarget();
+ const langgraph = useLangGraphRuntimeTarget();
+ const [agUiDraft, setAgUiDraft] = useState('');
+ const [langgraphDraft, setLanggraphDraft] = useState('');
+ useEffect(
+ () => agUi.registerDraftClear(() => setAgUiDraft('')),
+ [agUi.registerDraftClear]
+ );
+ useEffect(
+ () => langgraph.registerDraftClear(() => setLanggraphDraft('')),
+ [langgraph.registerDraftClear]
+ );
+ return (
+ <>
+
+
+ setAgUiDraft(event.currentTarget.value)}
+ />
+ setLanggraphDraft(event.currentTarget.value)}
+ />
+
+
+
+ );
+ }
+ render(
+
+
+ );
+ fireEvent.click(screen.getByRole('button', { name: 'Apply both AG-UI' }));
+ fireEvent.click(
+ screen.getByRole('button', { name: 'Apply both LangGraph' })
+ );
+ fireEvent.change(screen.getByRole('textbox', { name: 'AG-UI draft' }), {
+ target: { value: 'ag-ui draft' },
+ });
+ fireEvent.change(screen.getByRole('textbox', { name: 'LangGraph draft' }), {
+ target: { value: 'langgraph draft' },
+ });
+
+ act(() =>
+ window.dispatchEvent(
+ new PageTransitionEvent('pageshow', { persisted: true })
+ )
+ );
+
+ expect(screen.getByTestId('both-ag-ui-kind').textContent).toBe('shared');
+ expect(screen.getByTestId('both-langgraph-kind').textContent).toBe(
+ 'shared'
+ );
+ expect(
+ (screen.getByRole('textbox', { name: 'AG-UI draft' }) as HTMLInputElement)
+ .value
+ ).toBe('');
+ expect(
+ (
+ screen.getByRole('textbox', {
+ name: 'LangGraph draft',
+ }) as HTMLInputElement
+ ).value
+ ).toBe('');
+ });
+
+ it('keeps raw effective target access narrow to the internal module hook', () => {
+ let internalTarget = '';
+ function TrustedRuntimeProbe() {
+ const langgraph = useLangGraphRuntimeTarget();
+ const effective = useEffectiveRuntimeTarget('langgraph');
+ internalTarget = JSON.stringify(effective);
+ return (
+
+ );
+ }
+ render(
+
+
+ );
+ fireEvent.click(
+ screen.getByRole('button', { name: 'Apply trusted target' })
+ );
+
+ expect(internalTarget).toContain(apiKey);
+ expect(screen.queryByText(apiKey)).toBeNull();
+ expect('useEffectiveRuntimeTarget' in publicWorkspaceApi).toBe(false);
+ });
+
+ it('keeps the internal effective object stable across ordinary rerenders and unrelated slot updates', () => {
+ let latestEffective: ReturnType | null =
+ null;
+ function StabilityProbe({ tick }: { tick: number }) {
+ const agUi = useAgUiRuntimeTarget();
+ latestEffective = useEffectiveRuntimeTarget('langgraph');
+ return (
+ <>
+
+
+
+ );
+ }
+ const view = render(
+
+
+ );
+ const initial = latestEffective;
+
+ view.rerender(
+
+
+ );
+ expect(latestEffective).toBe(initial);
+
+ fireEvent.click(
+ screen.getByRole('button', { name: 'Update unrelated slot' })
+ );
+ expect(latestEffective).toBe(initial);
+ });
+
+ it('changes the internal effective object only for a selected-slot effective change', () => {
+ let latestEffective: ReturnType | null =
+ null;
+ function SelectedSlotProbe() {
+ const langgraph = useLangGraphRuntimeTarget();
+ latestEffective = useEffectiveRuntimeTarget('langgraph');
+ return (
+
+ );
+ }
+ render(
+
+
+ );
+ const initial = latestEffective;
+
+ fireEvent.click(
+ screen.getByRole('button', { name: 'Apply selected slot' })
+ );
+ const custom = latestEffective;
+ expect(custom).not.toBe(initial);
+
+ fireEvent.click(
+ screen.getByRole('button', { name: 'Apply selected slot' })
+ );
+ expect(latestEffective).toBe(custom);
+ });
+
+ it('keeps internal raw targets aligned with the committed sanitized view', () => {
+ const committedSnapshots: string[] = [];
+ function ConsistencyProbe() {
+ const agUi = useAgUiRuntimeTarget();
+ const langgraph = useLangGraphRuntimeTarget();
+ const effective = useEffectiveRuntimeTarget('langgraph');
+ committedSnapshots.push(
+ `${effective.target?.kind ?? 'none'}:${langgraph.view.kind}`
+ );
+ return (
+ <>
+
+
+
+ );
+ }
+ render(
+
+
+ );
+ fireEvent.click(
+ screen.getByRole('button', {
+ name: 'Apply unrelated consistency target',
+ })
+ );
+ fireEvent.click(
+ screen.getByRole('button', { name: 'Apply selected consistency target' })
+ );
+
+ expect(committedSnapshots).toEqual([
+ 'shared:shared',
+ 'shared:shared',
+ 'langsmith:langsmith',
+ ]);
+ });
+
+ it('defaults again when the provider remounts', () => {
+ const view = renderProvider();
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe('langsmith');
+
+ view.unmount();
+ renderProvider();
+ expect(screen.getByTestId('langgraph-kind').textContent).toBe('shared');
+ });
+
+ it('does not copy target values into browser or generic observation surfaces', () => {
+ const localSet = vi.spyOn(Storage.prototype, 'setItem');
+ const pushState = vi.spyOn(window.history, 'pushState');
+ const replaceState = vi.spyOn(window.history, 'replaceState');
+ const analyticsBag: unknown[] = [];
+ Object.defineProperty(window, 'dataLayer', {
+ configurable: true,
+ value: analyticsBag,
+ });
+ const initialHref = window.location.href;
+
+ renderProvider();
+ fireEvent.click(screen.getByRole('button', { name: 'Apply LangGraph' }));
+
+ expect(window.location.href).toBe(initialHref);
+ expect(pushState).not.toHaveBeenCalled();
+ expect(replaceState).not.toHaveBeenCalled();
+ expect(localSet).not.toHaveBeenCalled();
+ expect(window.localStorage.length).toBe(0);
+ expect(window.sessionStorage.length).toBe(0);
+ expect(analyticsBag).toEqual([]);
+ expect(document.documentElement.outerHTML).not.toContain(apiKey);
+ expect(screen.getByTestId('view').textContent).not.toContain(apiKey);
+ expect(screen.getByTestId('public-controls').textContent).not.toContain(
+ apiKey
+ );
+ expect(
+ Array.from(document.querySelectorAll('*')).flatMap((element) =>
+ Array.from(element.attributes, (attribute) => attribute.value)
+ )
+ ).not.toContain(apiKey);
+ });
+});
diff --git a/libs/workspace-react/src/lib/runtime/runtime-target-provider.tsx b/libs/workspace-react/src/lib/runtime/runtime-target-provider.tsx
new file mode 100644
index 000000000..a4a115b0d
--- /dev/null
+++ b/libs/workspace-react/src/lib/runtime/runtime-target-provider.tsx
@@ -0,0 +1,347 @@
+'use client';
+
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+ type ReactNode,
+} from 'react';
+import { flushSync } from 'react-dom';
+import type { RuntimeAdapter } from '@threadplane/cockpit-registry';
+import {
+ areEffectiveRuntimeTargetsEqual,
+ createDefaultRuntimeTargetSession,
+ getSanitizedRuntimeTargetDisplay,
+ validateAgUiTarget,
+ validateLangGraphTarget,
+ type AgUiTarget,
+ type EffectiveRuntimeTarget,
+ type LangGraphTarget,
+ type RuntimeTargetValidationError,
+ type SanitizedRuntimeTargetDisplay,
+} from './runtime-target-session';
+
+type DraftClearCallback = () => void;
+
+export type RuntimeTargetApplyResult =
+ | { readonly ok: true }
+ | { readonly ok: false; readonly error: RuntimeTargetValidationError };
+
+interface RuntimeTargetContextValue {
+ readonly agUiView: SanitizedRuntimeTargetDisplay;
+ readonly langgraphView: SanitizedRuntimeTargetDisplay;
+ readonly noneView: SanitizedRuntimeTargetDisplay;
+ readonly applyAgUiTarget: (endpoint: unknown) => RuntimeTargetApplyResult;
+ readonly applyLangGraphTarget: (
+ apiUrl: unknown,
+ apiKey: unknown
+ ) => RuntimeTargetApplyResult;
+ readonly clearAgUiTarget: () => void;
+ readonly clearLangGraphTarget: () => void;
+ readonly registerDraftClear: (
+ adapter: Exclude,
+ callback: DraftClearCallback
+ ) => () => void;
+}
+
+export interface AgUiRuntimeTargetControls {
+ readonly view: SanitizedRuntimeTargetDisplay;
+ readonly applyCustomTarget: (endpoint: unknown) => RuntimeTargetApplyResult;
+ readonly useSharedDevelopment: () => void;
+ readonly registerDraftClear: (callback: DraftClearCallback) => () => void;
+}
+
+export interface LangGraphRuntimeTargetControls {
+ readonly view: SanitizedRuntimeTargetDisplay;
+ readonly applyCustomTarget: (
+ apiUrl: unknown,
+ apiKey: unknown
+ ) => RuntimeTargetApplyResult;
+ readonly useSharedDevelopment: () => void;
+ readonly registerDraftClear: (callback: DraftClearCallback) => () => void;
+}
+
+const RuntimeTargetContext = createContext(
+ null
+);
+const AgUiEffectiveTargetContext = createContext(null);
+const LangGraphEffectiveTargetContext = createContext(
+ null
+);
+
+const useRuntimeTargetContext = (): RuntimeTargetContextValue => {
+ const context = useContext(RuntimeTargetContext);
+ if (!context) {
+ throw new Error('Runtime target hooks require RuntimeTargetProvider.');
+ }
+ return context;
+};
+
+const runDraftClearCallbacks = (
+ callbacks: ReadonlySet
+): void => {
+ for (const callback of callbacks) {
+ try {
+ callback();
+ } catch {
+ // Lifecycle clearing must continue even if one mounted draft was removed.
+ }
+ }
+};
+
+export function RuntimeTargetProvider({
+ children,
+}: {
+ readonly children: ReactNode;
+}) {
+ const defaults = useMemo(createDefaultRuntimeTargetSession, []);
+ const [agUiTarget, setAgUiTarget] = useState(defaults.agUi);
+ const [langgraphTarget, setLangGraphTarget] = useState(
+ defaults.langgraph
+ );
+ const agUiTargetRef = useRef(agUiTarget);
+ const langgraphTargetRef = useRef(langgraphTarget);
+ const draftClearCallbacks = useRef({
+ agUi: new Set(),
+ langgraph: new Set(),
+ });
+
+ const clearDrafts = useCallback(
+ (adapter: Exclude) => {
+ runDraftClearCallbacks(
+ adapter === 'ag-ui'
+ ? draftClearCallbacks.current.agUi
+ : draftClearCallbacks.current.langgraph
+ );
+ },
+ []
+ );
+
+ const applyAgUiTarget = useCallback((endpoint: unknown) => {
+ const result = validateAgUiTarget(endpoint);
+ if (!result.ok) return { ok: false, error: result.error } as const;
+ if (
+ areEffectiveRuntimeTargetsEqual(
+ { adapter: 'ag-ui', target: agUiTargetRef.current },
+ { adapter: 'ag-ui', target: result.value }
+ )
+ ) {
+ return { ok: true } as const;
+ }
+ agUiTargetRef.current = result.value;
+ setAgUiTarget(result.value);
+ return { ok: true } as const;
+ }, []);
+
+ const applyLangGraphTarget = useCallback(
+ (apiUrl: unknown, apiKey: unknown) => {
+ const result = validateLangGraphTarget(apiUrl, apiKey);
+ if (!result.ok) return { ok: false, error: result.error } as const;
+ if (
+ areEffectiveRuntimeTargetsEqual(
+ { adapter: 'langgraph', target: langgraphTargetRef.current },
+ { adapter: 'langgraph', target: result.value }
+ )
+ ) {
+ return { ok: true } as const;
+ }
+ langgraphTargetRef.current = result.value;
+ setLangGraphTarget(result.value);
+ return { ok: true } as const;
+ },
+ []
+ );
+
+ const clearAgUiTarget = useCallback(() => {
+ if (agUiTargetRef.current.kind !== 'shared') {
+ const shared: AgUiTarget = { kind: 'shared' };
+ agUiTargetRef.current = shared;
+ setAgUiTarget(shared);
+ }
+ clearDrafts('ag-ui');
+ }, [clearDrafts]);
+
+ const clearLangGraphTarget = useCallback(() => {
+ if (langgraphTargetRef.current.kind !== 'shared') {
+ const shared: LangGraphTarget = { kind: 'shared' };
+ langgraphTargetRef.current = shared;
+ setLangGraphTarget(shared);
+ }
+ clearDrafts('langgraph');
+ }, [clearDrafts]);
+
+ const registerDraftClear = useCallback(
+ (
+ adapter: Exclude,
+ callback: DraftClearCallback
+ ) => {
+ const callbacks =
+ adapter === 'ag-ui'
+ ? draftClearCallbacks.current.agUi
+ : draftClearCallbacks.current.langgraph;
+ callbacks.add(callback);
+ return () => callbacks.delete(callback);
+ },
+ []
+ );
+
+ const resetForDocumentLifecycle = useCallback(() => {
+ const next = createDefaultRuntimeTargetSession();
+ agUiTargetRef.current = next.agUi;
+ langgraphTargetRef.current = next.langgraph;
+ flushSync(() => {
+ setAgUiTarget(next.agUi);
+ setLangGraphTarget(next.langgraph);
+ clearDrafts('ag-ui');
+ clearDrafts('langgraph');
+ });
+ }, [clearDrafts]);
+
+ useEffect(() => {
+ const handlePageHide = () => resetForDocumentLifecycle();
+ const handlePageShow = (event: PageTransitionEvent) => {
+ if (event.persisted) resetForDocumentLifecycle();
+ };
+ window.addEventListener('pagehide', handlePageHide);
+ window.addEventListener('pageshow', handlePageShow);
+ return () => {
+ window.removeEventListener('pagehide', handlePageHide);
+ window.removeEventListener('pageshow', handlePageShow);
+ };
+ }, [resetForDocumentLifecycle]);
+
+ const agUiView = useMemo(
+ () =>
+ getSanitizedRuntimeTargetDisplay({
+ adapter: 'ag-ui',
+ target: agUiTarget,
+ }),
+ [agUiTarget]
+ );
+ const langgraphView = useMemo(
+ () =>
+ getSanitizedRuntimeTargetDisplay({
+ adapter: 'langgraph',
+ target: langgraphTarget,
+ }),
+ [langgraphTarget]
+ );
+ const noneView = useMemo(
+ () =>
+ getSanitizedRuntimeTargetDisplay({
+ adapter: 'none',
+ target: null,
+ }),
+ []
+ );
+
+ const value = useMemo(
+ () => ({
+ agUiView,
+ langgraphView,
+ noneView,
+ applyAgUiTarget,
+ applyLangGraphTarget,
+ clearAgUiTarget,
+ clearLangGraphTarget,
+ registerDraftClear,
+ }),
+ [
+ agUiView,
+ applyAgUiTarget,
+ applyLangGraphTarget,
+ clearAgUiTarget,
+ clearLangGraphTarget,
+ langgraphView,
+ noneView,
+ registerDraftClear,
+ ]
+ );
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+export const useAgUiRuntimeTarget = (): AgUiRuntimeTargetControls => {
+ const context = useRuntimeTargetContext();
+ return useMemo(
+ () => ({
+ view: context.agUiView,
+ applyCustomTarget: context.applyAgUiTarget,
+ useSharedDevelopment: context.clearAgUiTarget,
+ registerDraftClear: (callback: DraftClearCallback) =>
+ context.registerDraftClear('ag-ui', callback),
+ }),
+ [context]
+ );
+};
+
+export const useLangGraphRuntimeTarget = (): LangGraphRuntimeTargetControls => {
+ const context = useRuntimeTargetContext();
+ return useMemo(
+ () => ({
+ view: context.langgraphView,
+ applyCustomTarget: context.applyLangGraphTarget,
+ useSharedDevelopment: context.clearLangGraphTarget,
+ registerDraftClear: (callback: DraftClearCallback) =>
+ context.registerDraftClear('langgraph', callback),
+ }),
+ [context]
+ );
+};
+
+/** Internal trusted selector for WorkspaceProvider and runtime-controller wiring. */
+export const useEffectiveRuntimeTarget = (
+ adapter: RuntimeAdapter
+): EffectiveRuntimeTarget => {
+ const agUiTarget = useContext(AgUiEffectiveTargetContext);
+ const langgraphTarget = useContext(LangGraphEffectiveTargetContext);
+ if (agUiTarget === null || langgraphTarget === null) {
+ throw new Error('Runtime target hooks require RuntimeTargetProvider.');
+ }
+ const agUiEffectiveTarget = useMemo(
+ () => ({ adapter: 'ag-ui', target: agUiTarget }),
+ [agUiTarget]
+ );
+ const langgraphEffectiveTarget = useMemo(
+ () => ({ adapter: 'langgraph', target: langgraphTarget }),
+ [langgraphTarget]
+ );
+ const noneEffectiveTarget = useMemo(
+ () => ({ adapter: 'none', target: null }),
+ []
+ );
+ switch (adapter) {
+ case 'ag-ui':
+ return agUiEffectiveTarget;
+ case 'langgraph':
+ return langgraphEffectiveTarget;
+ case 'none':
+ return noneEffectiveTarget;
+ }
+};
+
+export const useRuntimeTargetView = (
+ adapter: RuntimeAdapter
+): SanitizedRuntimeTargetDisplay => {
+ const context = useRuntimeTargetContext();
+ switch (adapter) {
+ case 'ag-ui':
+ return context.agUiView;
+ case 'langgraph':
+ return context.langgraphView;
+ case 'none':
+ return context.noneView;
+ }
+};
diff --git a/libs/workspace-react/src/lib/runtime/runtime-target-session.spec.ts b/libs/workspace-react/src/lib/runtime/runtime-target-session.spec.ts
new file mode 100644
index 000000000..1d837642b
--- /dev/null
+++ b/libs/workspace-react/src/lib/runtime/runtime-target-session.spec.ts
@@ -0,0 +1,354 @@
+import { describe, expect, it } from 'vitest';
+import * as runtimeTargetSessionModule from './runtime-target-session';
+import {
+ areEffectiveRuntimeTargetsEqual,
+ createDefaultRuntimeTargetSession,
+ getEffectiveRuntimeTarget,
+ getSanitizedRuntimeTargetDisplay,
+ validateAgUiTarget,
+ validateLangGraphTarget,
+} from './runtime-target-session';
+
+describe('runtime target session', () => {
+ it('exports only pure construction, validation, selection, display, and equality helpers', () => {
+ expect(Object.keys(runtimeTargetSessionModule).sort()).toEqual([
+ 'areEffectiveRuntimeTargetsEqual',
+ 'createDefaultRuntimeTargetSession',
+ 'getEffectiveRuntimeTarget',
+ 'getSanitizedRuntimeTargetDisplay',
+ 'validateAgUiTarget',
+ 'validateLangGraphTarget',
+ ]);
+ });
+
+ it('defaults both adapter slots independently to shared development', () => {
+ const session = createDefaultRuntimeTargetSession();
+
+ expect(session).toEqual({
+ agUi: { kind: 'shared' },
+ langgraph: { kind: 'shared' },
+ });
+ expect(session.agUi).not.toBe(session.langgraph);
+ });
+
+ it('selects only the slot owned by the current runtime adapter', () => {
+ const session = {
+ agUi: { kind: 'ag-ui' as const, endpoint: 'https://ag.example.test/agent' },
+ langgraph: {
+ kind: 'langsmith' as const,
+ apiUrl: 'https://lang.example.test/api/',
+ apiKey: 'test-key-redact-me',
+ },
+ };
+
+ expect(getEffectiveRuntimeTarget(session, 'ag-ui')).toEqual({
+ adapter: 'ag-ui',
+ target: session.agUi,
+ });
+ expect(getEffectiveRuntimeTarget(session, 'langgraph')).toEqual({
+ adapter: 'langgraph',
+ target: session.langgraph,
+ });
+ expect(getEffectiveRuntimeTarget(session, 'none')).toEqual({
+ adapter: 'none',
+ target: null,
+ });
+ });
+});
+
+describe('runtime target URL validation', () => {
+ it('normalizes scheme, host, and default ports while preserving path identity', () => {
+ expect(validateAgUiTarget('HTTPS://AG.EXAMPLE.TEST:443/agents/')).toEqual({
+ ok: true,
+ value: {
+ kind: 'ag-ui',
+ endpoint: 'https://ag.example.test/agents/',
+ },
+ });
+ expect(validateLangGraphTarget('http://LOCALHOST:80/api', 'test-key-redact-me')).toEqual({
+ ok: true,
+ value: {
+ kind: 'langsmith',
+ apiUrl: 'http://localhost/api',
+ apiKey: 'test-key-redact-me',
+ },
+ });
+ expect(validateAgUiTarget('https://ag.example.test/agent')).toEqual({
+ ok: true,
+ value: { kind: 'ag-ui', endpoint: 'https://ag.example.test/agent' },
+ });
+ expect(validateAgUiTarget('https://ag.example.test/agent/')).toEqual({
+ ok: true,
+ value: { kind: 'ag-ui', endpoint: 'https://ag.example.test/agent/' },
+ });
+ });
+
+ it.each([
+ ['http://localhost:3000/agent', 'http://localhost:3000/agent'],
+ ['http://127.0.0.1:8123/agent', 'http://127.0.0.1:8123/agent'],
+ ['http://[::1]:4200/agent', 'http://[::1]:4200/agent'],
+ ])('allows an HTTP loopback target: %s', (input, normalized) => {
+ expect(validateAgUiTarget(input)).toEqual({
+ ok: true,
+ value: { kind: 'ag-ui', endpoint: normalized },
+ });
+ });
+
+ it.each([
+ 'http://127.1/agent',
+ 'http://2130706433/agent',
+ 'http://0x7f000001/agent',
+ 'http://0177.0.0.1/agent',
+ 'http://[0:0:0:0:0:0:0:1]/agent',
+ 'http://localhost./agent',
+ ])('rejects a non-exact raw HTTP loopback spelling: %s', (input) => {
+ expect(validateAgUiTarget(input)).toMatchObject({
+ ok: false,
+ error: { code: 'https_required' },
+ });
+ });
+
+ it('allows case-normalized exact localhost with a port', () => {
+ expect(validateAgUiTarget('http://LOCALHOST:4200/agent')).toEqual({
+ ok: true,
+ value: { kind: 'ag-ui', endpoint: 'http://localhost:4200/agent' },
+ });
+ });
+
+ it.each([
+ 'https://example.test/a/../secret',
+ 'https://example.test/a/%2e%2e/secret',
+ 'https://example.test/a/%2E./secret',
+ 'https://example.test/a\\secret',
+ 'https://example.test\\secret',
+ ])('rejects a pathname rewritten by URL parsing: %s', (input) => {
+ expect(validateAgUiTarget(input)).toMatchObject({
+ ok: false,
+ error: { code: 'invalid_url' },
+ });
+ });
+
+ it.each([
+ ['', 'empty_url'],
+ [' ', 'empty_url'],
+ ['/relative', 'invalid_url'],
+ ['ftp://example.test/agent', 'invalid_url'],
+ ['http://example.test/agent', 'https_required'],
+ ['http://127.0.0.2/agent', 'https_required'],
+ ['https://user:password@example.test/agent', 'credentials_not_allowed'],
+ ['https://@example.test/agent', 'credentials_not_allowed'],
+ ['https://example.test/agent?token=secret', 'query_not_allowed'],
+ ['https://example.test/agent?', 'query_not_allowed'],
+ ['https://example.test/agent#secret', 'fragment_not_allowed'],
+ ['https://example.test/agent#', 'fragment_not_allowed'],
+ ['https://example.test/agent\n', 'control_characters_not_allowed'],
+ ['https://example.test/\u007fagent', 'control_characters_not_allowed'],
+ ['https://example.test/\u0085agent', 'control_characters_not_allowed'],
+ ])('rejects an unsafe AG-UI target with a safe code: %s', (input, code) => {
+ const result = validateAgUiTarget(input);
+
+ expect(result).toMatchObject({ ok: false, error: { code } });
+ expect(JSON.stringify(result)).not.toContain(input || 'definitely-not-present');
+ });
+
+ it('requires a nonempty LangSmith key without exposing it in the error', () => {
+ const result = validateLangGraphTarget('https://lang.example.test/api', ' ');
+
+ expect(result).toEqual({
+ ok: false,
+ error: {
+ code: 'api_key_required',
+ message: 'Enter an API key.',
+ },
+ });
+ });
+
+ it('uses only allowlisted safe error copy and never echoes rejected input', () => {
+ const rejected = 'https://sensitive.example.test/agent?apiKey=test-key-redact-me';
+ const result = validateAgUiTarget(rejected);
+
+ expect(result).toEqual({
+ ok: false,
+ error: {
+ code: 'query_not_allowed',
+ message: 'Remove the query string from the URL.',
+ },
+ });
+ expect(JSON.stringify(result)).not.toContain('sensitive.example.test');
+ expect(JSON.stringify(result)).not.toContain('test-key-redact-me');
+ });
+});
+
+describe('effective target identity and display', () => {
+ it('compares adapter, normalized URL, target kind, and LangSmith key', () => {
+ const agUi = getEffectiveRuntimeTarget(
+ {
+ ...createDefaultRuntimeTargetSession(),
+ agUi: validateAgUiTarget('HTTPS://AG.EXAMPLE.TEST:443/agent').ok
+ ? validateAgUiTarget('HTTPS://AG.EXAMPLE.TEST:443/agent').value
+ : { kind: 'shared' },
+ },
+ 'ag-ui',
+ );
+ const sameAgUi = getEffectiveRuntimeTarget(
+ {
+ ...createDefaultRuntimeTargetSession(),
+ agUi: validateAgUiTarget('https://ag.example.test/agent').ok
+ ? validateAgUiTarget('https://ag.example.test/agent').value
+ : { kind: 'shared' },
+ },
+ 'ag-ui',
+ );
+
+ expect(areEffectiveRuntimeTargetsEqual(agUi, sameAgUi)).toBe(true);
+ expect(
+ areEffectiveRuntimeTargetsEqual(
+ sameAgUi,
+ getEffectiveRuntimeTarget(createDefaultRuntimeTargetSession(), 'ag-ui'),
+ ),
+ ).toBe(false);
+ expect(
+ areEffectiveRuntimeTargetsEqual(
+ sameAgUi,
+ getEffectiveRuntimeTarget(createDefaultRuntimeTargetSession(), 'langgraph'),
+ ),
+ ).toBe(false);
+
+ const langsmithA = getEffectiveRuntimeTarget(
+ {
+ ...createDefaultRuntimeTargetSession(),
+ langgraph: {
+ kind: 'langsmith',
+ apiUrl: 'https://lang.example.test/api',
+ apiKey: 'key-a',
+ },
+ },
+ 'langgraph',
+ );
+ const langsmithB = getEffectiveRuntimeTarget(
+ {
+ ...createDefaultRuntimeTargetSession(),
+ langgraph: {
+ kind: 'langsmith',
+ apiUrl: 'https://lang.example.test/api',
+ apiKey: 'key-b',
+ },
+ },
+ 'langgraph',
+ );
+
+ expect(areEffectiveRuntimeTargetsEqual(langsmithA, langsmithB)).toBe(false);
+ });
+
+ it('returns sanitized display data without the LangSmith key', () => {
+ const display = getSanitizedRuntimeTargetDisplay({
+ adapter: 'langgraph',
+ target: {
+ kind: 'langsmith',
+ apiUrl: 'https://lang.example.test/api/',
+ apiKey: 'test-key-redact-me',
+ },
+ });
+
+ expect(display).toEqual({
+ kind: 'langsmith',
+ label: 'Custom LangSmith',
+ origin: 'https://lang.example.test',
+ pathname: '/api/',
+ location: 'https://lang.example.test/api/',
+ });
+ expect(JSON.stringify(display)).not.toContain('test-key-redact-me');
+ expect(
+ getSanitizedRuntimeTargetDisplay({ adapter: 'none', target: null }),
+ ).toEqual({
+ kind: 'none',
+ label: 'Runtime target unavailable',
+ origin: null,
+ pathname: null,
+ location: null,
+ });
+ });
+
+ it.each([
+ {
+ adapter: 'ag-ui' as const,
+ target: {
+ kind: 'ag-ui' as const,
+ endpoint: 'https://user:secret@example.test/agent?token=secret#fragment',
+ },
+ },
+ {
+ adapter: 'langgraph' as const,
+ target: {
+ kind: 'langsmith' as const,
+ apiUrl: 'not a URL containing test-key-redact-me',
+ apiKey: 'test-key-redact-me',
+ },
+ },
+ ])('sanitizes a structurally forged unvalidated target without throwing', (target) => {
+ expect(() => getSanitizedRuntimeTargetDisplay(target)).not.toThrow();
+ const display = getSanitizedRuntimeTargetDisplay(target);
+
+ expect(display).toMatchObject({
+ kind: target.target.kind,
+ origin: null,
+ pathname: null,
+ location: null,
+ });
+ expect(JSON.stringify(display)).not.toMatch(
+ /user|secret|token|fragment|test-key-redact-me/i,
+ );
+ });
+
+ it('compares invalid custom identities reflexively without collapsing different values', () => {
+ const first = {
+ adapter: 'ag-ui' as const,
+ target: { kind: 'ag-ui' as const, endpoint: 'invalid-one' },
+ };
+ const sameAsFirst = {
+ adapter: 'ag-ui' as const,
+ target: { kind: 'ag-ui' as const, endpoint: 'invalid-one' },
+ };
+ const second = {
+ adapter: 'ag-ui' as const,
+ target: { kind: 'ag-ui' as const, endpoint: 'invalid-two' },
+ };
+
+ expect(areEffectiveRuntimeTargetsEqual(first, first)).toBe(true);
+ expect(areEffectiveRuntimeTargetsEqual(first, sameAsFirst)).toBe(true);
+ expect(areEffectiveRuntimeTargetsEqual(first, second)).toBe(false);
+ });
+
+ it('includes the key when comparing structurally identical invalid LangSmith targets', () => {
+ const target = {
+ adapter: 'langgraph' as const,
+ target: {
+ kind: 'langsmith' as const,
+ apiUrl: 'invalid-langsmith-url',
+ apiKey: 'key-a',
+ },
+ };
+
+ expect(areEffectiveRuntimeTargetsEqual(target, target)).toBe(true);
+ expect(
+ areEffectiveRuntimeTargetsEqual(target, {
+ adapter: 'langgraph',
+ target: {
+ kind: 'langsmith',
+ apiUrl: 'invalid-langsmith-url',
+ apiKey: 'key-a',
+ },
+ }),
+ ).toBe(true);
+ expect(
+ areEffectiveRuntimeTargetsEqual(target, {
+ adapter: 'langgraph',
+ target: {
+ kind: 'langsmith',
+ apiUrl: 'invalid-langsmith-url',
+ apiKey: 'key-b',
+ },
+ }),
+ ).toBe(false);
+ });
+});
diff --git a/libs/workspace-react/src/lib/runtime/runtime-target-session.ts b/libs/workspace-react/src/lib/runtime/runtime-target-session.ts
new file mode 100644
index 000000000..a348d708d
--- /dev/null
+++ b/libs/workspace-react/src/lib/runtime/runtime-target-session.ts
@@ -0,0 +1,297 @@
+import type { RuntimeAdapter } from '@threadplane/cockpit-registry';
+
+export type SharedTarget = { readonly kind: 'shared' };
+
+export type AgUiTarget =
+ | SharedTarget
+ | { readonly kind: 'ag-ui'; readonly endpoint: string };
+
+export type LangGraphTarget =
+ | SharedTarget
+ | {
+ readonly kind: 'langsmith';
+ readonly apiUrl: string;
+ readonly apiKey: string;
+ };
+
+export interface RuntimeTargetSession {
+ readonly agUi: AgUiTarget;
+ readonly langgraph: LangGraphTarget;
+}
+
+export type EffectiveRuntimeTarget =
+ | { readonly adapter: 'ag-ui'; readonly target: AgUiTarget }
+ | { readonly adapter: 'langgraph'; readonly target: LangGraphTarget }
+ | { readonly adapter: 'none'; readonly target: null };
+
+export type RuntimeTargetValidationErrorCode =
+ | 'empty_url'
+ | 'invalid_url'
+ | 'https_required'
+ | 'credentials_not_allowed'
+ | 'query_not_allowed'
+ | 'fragment_not_allowed'
+ | 'control_characters_not_allowed'
+ | 'api_key_required';
+
+export interface RuntimeTargetValidationError {
+ code: RuntimeTargetValidationErrorCode;
+ message: string;
+}
+
+export type RuntimeTargetValidationResult =
+ | { ok: true; value: T }
+ | { ok: false; error: RuntimeTargetValidationError };
+
+export type SanitizedRuntimeTargetDisplay = {
+ kind: 'shared' | 'ag-ui' | 'langsmith' | 'none';
+ label: string;
+ origin: string | null;
+ pathname: string | null;
+ location: string | null;
+};
+
+const ERROR_MESSAGES: Readonly<
+ Record
+> = {
+ empty_url: 'Enter an absolute HTTP or HTTPS URL.',
+ invalid_url: 'Enter a valid absolute HTTP or HTTPS URL.',
+ https_required: 'Use HTTPS unless targeting localhost.',
+ credentials_not_allowed: 'Remove credentials from the URL.',
+ query_not_allowed: 'Remove the query string from the URL.',
+ fragment_not_allowed: 'Remove the fragment from the URL.',
+ control_characters_not_allowed: 'Remove control characters from the URL.',
+ api_key_required: 'Enter an API key.',
+};
+
+const failure = (
+ code: RuntimeTargetValidationErrorCode
+): RuntimeTargetValidationResult => ({
+ ok: false,
+ error: { code, message: ERROR_MESSAGES[code] },
+});
+
+const hasControlCharacters = (value: string): boolean =>
+ Array.from(value).some((character) => {
+ const code = character.charCodeAt(0);
+ return code <= 31 || (code >= 127 && code <= 159);
+ });
+
+interface RawUrlParts {
+ authority: string;
+ pathname: string;
+}
+
+const getRawUrlParts = (value: string): RawUrlParts => {
+ const authorityStart = value.indexOf('://') + 3;
+ const pathStart = value.indexOf('/', authorityStart);
+ return {
+ authority: value.slice(
+ authorityStart,
+ pathStart === -1 ? value.length : pathStart
+ ),
+ pathname: pathStart === -1 ? '' : value.slice(pathStart),
+ };
+};
+
+const getRawHostname = (authority: string): string | null => {
+ if (authority.startsWith('[')) {
+ const closingBracket = authority.indexOf(']');
+ if (closingBracket === -1) return null;
+ const suffix = authority.slice(closingBracket + 1);
+ if (suffix !== '' && !/^:\d+$/.test(suffix)) return null;
+ return authority.slice(0, closingBracket + 1).toLowerCase();
+ }
+
+ const portSeparator = authority.lastIndexOf(':');
+ if (
+ portSeparator !== -1 &&
+ (!/^\d+$/.test(authority.slice(portSeparator + 1)) ||
+ authority.indexOf(':') !== portSeparator)
+ ) {
+ return null;
+ }
+ return (
+ portSeparator === -1 ? authority : authority.slice(0, portSeparator)
+ ).toLowerCase();
+};
+
+const normalizeTargetUrl = (
+ input: unknown
+): RuntimeTargetValidationResult => {
+ if (typeof input !== 'string') return failure('invalid_url');
+ if (input.trim().length === 0) return failure('empty_url');
+ if (hasControlCharacters(input)) {
+ return failure('control_characters_not_allowed');
+ }
+
+ const candidate = input.trim();
+ if (candidate.includes('?')) return failure('query_not_allowed');
+ if (candidate.includes('#')) return failure('fragment_not_allowed');
+ if (candidate.includes('\\')) return failure('invalid_url');
+ if (!/^https?:\/\//i.test(candidate)) return failure('invalid_url');
+
+ const raw = getRawUrlParts(candidate);
+ if (raw.authority.includes('@')) return failure('credentials_not_allowed');
+ if (candidate.slice(0, candidate.indexOf(':')).toLowerCase() === 'http') {
+ const loopbackHosts = new Set(['localhost', '127.0.0.1', '[::1]']);
+ const rawHostname = getRawHostname(raw.authority);
+ if (rawHostname === null || !loopbackHosts.has(rawHostname)) {
+ return failure('https_required');
+ }
+ }
+
+ let url: URL;
+ try {
+ url = new URL(candidate);
+ } catch {
+ return failure('invalid_url');
+ }
+
+ if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+ return failure('invalid_url');
+ }
+ if (url.username || url.password) return failure('credentials_not_allowed');
+
+ if (url.pathname !== (raw.pathname || '/')) return failure('invalid_url');
+
+ return { ok: true, value: `${url.origin}${raw.pathname || '/'}` };
+};
+
+export const createDefaultRuntimeTargetSession = (): RuntimeTargetSession => ({
+ agUi: { kind: 'shared' },
+ langgraph: { kind: 'shared' },
+});
+
+export const validateAgUiTarget = (
+ endpoint: unknown
+): RuntimeTargetValidationResult> => {
+ const normalized = normalizeTargetUrl(endpoint);
+ if (!normalized.ok) return normalized;
+ return {
+ ok: true,
+ value: { kind: 'ag-ui', endpoint: normalized.value },
+ };
+};
+
+export const validateLangGraphTarget = (
+ apiUrl: unknown,
+ apiKey: unknown
+): RuntimeTargetValidationResult<
+ Extract
+> => {
+ const normalized = normalizeTargetUrl(apiUrl);
+ if (!normalized.ok) return normalized;
+ if (typeof apiKey !== 'string') return failure('api_key_required');
+ if (apiKey.trim().length === 0) return failure('api_key_required');
+ return {
+ ok: true,
+ value: { kind: 'langsmith', apiUrl: normalized.value, apiKey },
+ };
+};
+
+export const getEffectiveRuntimeTarget = (
+ session: RuntimeTargetSession,
+ adapter: RuntimeAdapter
+): EffectiveRuntimeTarget => {
+ switch (adapter) {
+ case 'ag-ui':
+ return { adapter, target: session.agUi };
+ case 'langgraph':
+ return { adapter, target: session.langgraph };
+ case 'none':
+ return { adapter, target: null };
+ }
+};
+
+const identityUrl = (target: EffectiveRuntimeTarget): string | null =>
+ target.target?.kind === 'ag-ui'
+ ? target.target.endpoint
+ : target.target?.kind === 'langsmith'
+ ? target.target.apiUrl
+ : null;
+
+const normalizedIdentityUrl = (
+ target: EffectiveRuntimeTarget
+): RuntimeTargetValidationResult => {
+ const value = identityUrl(target);
+ if (value === null) return failure('invalid_url');
+ return normalizeTargetUrl(value);
+};
+
+export const areEffectiveRuntimeTargetsEqual = (
+ left: EffectiveRuntimeTarget,
+ right: EffectiveRuntimeTarget
+): boolean => {
+ if (left.adapter !== right.adapter) return false;
+ if (left.target === null || right.target === null) {
+ return left.target === right.target;
+ }
+ if (left.target.kind !== right.target.kind) return false;
+ if (left.target.kind === 'shared' || right.target.kind === 'shared') {
+ return left.target.kind === right.target.kind;
+ }
+ const leftUrl = normalizedIdentityUrl(left);
+ const rightUrl = normalizedIdentityUrl(right);
+ if (!leftUrl.ok || !rightUrl.ok) {
+ if (leftUrl.ok || rightUrl.ok || identityUrl(left) !== identityUrl(right)) {
+ return false;
+ }
+ } else if (leftUrl.value !== rightUrl.value) {
+ return false;
+ }
+ return left.target.kind === 'langsmith' && right.target.kind === 'langsmith'
+ ? left.target.apiKey === right.target.apiKey
+ : true;
+};
+
+export const getSanitizedRuntimeTargetDisplay = (
+ effectiveTarget: EffectiveRuntimeTarget
+): SanitizedRuntimeTargetDisplay => {
+ const { target } = effectiveTarget;
+ if (target === null) {
+ return {
+ kind: 'none',
+ label: 'Runtime target unavailable',
+ origin: null,
+ pathname: null,
+ location: null,
+ };
+ }
+ if (target.kind === 'shared') {
+ return {
+ kind: 'shared',
+ label: 'Shared development',
+ origin: null,
+ pathname: null,
+ location: null,
+ };
+ }
+
+ const validated =
+ target.kind === 'ag-ui'
+ ? validateAgUiTarget(target.endpoint)
+ : validateLangGraphTarget(target.apiUrl, target.apiKey);
+ if (!validated.ok) {
+ return {
+ kind: target.kind,
+ label: target.kind === 'ag-ui' ? 'Custom AG-UI' : 'Custom LangSmith',
+ origin: null,
+ pathname: null,
+ location: null,
+ };
+ }
+
+ const location =
+ validated.value.kind === 'ag-ui'
+ ? validated.value.endpoint
+ : validated.value.apiUrl;
+ const parsed = new URL(location);
+ return {
+ kind: target.kind,
+ label: target.kind === 'ag-ui' ? 'Custom AG-UI' : 'Custom LangSmith',
+ origin: parsed.origin,
+ pathname: parsed.pathname,
+ location: parsed.href,
+ };
+};
diff --git a/libs/workspace-react/src/lib/runtime/session-activity.spec.ts b/libs/workspace-react/src/lib/runtime/session-activity.spec.ts
index 222437798..15573a155 100644
--- a/libs/workspace-react/src/lib/runtime/session-activity.spec.ts
+++ b/libs/workspace-react/src/lib/runtime/session-activity.spec.ts
@@ -3,6 +3,7 @@ import {
activityReducer,
countUnseenProblems,
createSessionActivityEvent,
+ projectRuntimeActivityContext,
type ActivityKind,
type ActivitySeverity,
type RuntimeActivityInput,
@@ -33,6 +34,21 @@ describe('createSessionActivityEvent', () => {
'error',
'Runtime initialization failed',
],
+ [
+ { ...common, kind: 'runtime_unauthorized' },
+ 'error',
+ 'Runtime authorization failed',
+ ],
+ [
+ { ...common, kind: 'runtime_network_blocked' },
+ 'error',
+ 'Runtime network request blocked',
+ ],
+ [
+ { ...common, kind: 'runtime_incompatible_bridge' },
+ 'error',
+ 'Runtime bridge incompatible',
+ ],
[
{ ...common, kind: 'runtime_reload_requested' },
'neutral',
@@ -79,9 +95,7 @@ describe('createSessionActivityEvent', () => {
'error',
'Runtime configuration invalid',
],
- ] satisfies ReadonlyArray<
- readonly [RuntimeActivityInput, SessionActivityEvent['severity'], string]
- >)(
+ ] satisfies ReadonlyArray)(
'formats $0.kind with fixed severity and summary',
(input, severity, summary) => {
expect(createSessionActivityEvent(input)).toEqual({
@@ -92,7 +106,7 @@ describe('createSessionActivityEvent', () => {
capability: common.capability,
summary,
});
- },
+ }
);
test('exports only the semantic allowlist as event kinds', () => {
@@ -101,6 +115,9 @@ describe('createSessionActivityEvent', () => {
| 'runtime_ready'
| 'runtime_unresponsive'
| 'runtime_initialization_error'
+ | 'runtime_unauthorized'
+ | 'runtime_network_blocked'
+ | 'runtime_incompatible_bridge'
| 'runtime_reload_requested'
| 'runtime_recovered'
| 'mode_changed'
@@ -110,6 +127,127 @@ describe('createSessionActivityEvent', () => {
| 'configuration_invalid'
>();
});
+
+ test('projects only allowlisted runtime target context into Activity', () => {
+ const event = createSessionActivityEvent({
+ ...common,
+ kind: 'runtime_ready',
+ runtime: {
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ protocolVersion: 2,
+ configurationGeneration: 7,
+ phase: 'ready',
+ reasonCode: null,
+ endpoint: 'https://api.example.test/langgraph',
+ apiKey: 'test-key-redact-me',
+ },
+ } as RuntimeActivityInput & {
+ runtime: RuntimeActivityInput['runtime'] & {
+ endpoint: string;
+ apiKey: string;
+ };
+ });
+
+ expect(event.runtime).toEqual({
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ protocolVersion: 2,
+ configurationGeneration: 7,
+ phase: 'ready',
+ reasonCode: null,
+ });
+ expect(JSON.stringify(event)).not.toMatch(
+ /api\.example\.test|test-key-redact-me|endpoint|apiKey/i
+ );
+ });
+
+ test('defaults hostile runtime context values without echoing them', () => {
+ const hostileMarker = 'test-key-redact-me';
+ const event = createSessionActivityEvent({
+ ...common,
+ kind: 'runtime_ready',
+ runtime: {
+ adapter: `unknown-${hostileMarker}`,
+ targetKind: `unknown-${hostileMarker}`,
+ protocolVersion: Number.POSITIVE_INFINITY,
+ configurationGeneration: -1,
+ phase: `unknown-${hostileMarker}`,
+ reasonCode: `unknown-${hostileMarker}`,
+ },
+ } as unknown as RuntimeActivityInput);
+
+ expect(event.runtime).toEqual({
+ adapter: 'none',
+ targetKind: 'none',
+ protocolVersion: 0,
+ configurationGeneration: 0,
+ phase: 'not_configured',
+ reasonCode: null,
+ });
+ expect(JSON.stringify(event)).not.toContain(hostileMarker);
+
+ for (const invalidNumber of [
+ Number.NaN,
+ -1,
+ 1.5,
+ Number.MAX_SAFE_INTEGER + 1,
+ ]) {
+ const invalidNumbers = createSessionActivityEvent({
+ ...common,
+ kind: 'runtime_ready',
+ runtime: {
+ adapter: 'ag-ui',
+ targetKind: 'ag-ui',
+ protocolVersion: invalidNumber,
+ configurationGeneration: invalidNumber,
+ phase: 'ready',
+ reasonCode: null,
+ },
+ });
+ expect(invalidNumbers.runtime?.protocolVersion).toBe(0);
+ expect(invalidNumbers.runtime?.configurationGeneration).toBe(0);
+ }
+ });
+
+ test('defaults throwing and revoked runtime contexts without throwing or echoing markers', () => {
+ const hostileMarker = 'throwing-runtime-marker';
+ const throwingContext = Object.defineProperty({}, 'adapter', {
+ enumerable: true,
+ get() {
+ throw new Error(hostileMarker);
+ },
+ });
+ const revocable = Proxy.revocable(
+ {
+ adapter: 'langgraph',
+ targetKind: 'langsmith',
+ protocolVersion: 2,
+ configurationGeneration: 7,
+ phase: 'ready',
+ reasonCode: null,
+ },
+ {}
+ );
+ revocable.revoke();
+
+ for (const hostileContext of [throwingContext, revocable.proxy]) {
+ let projected: ReturnType | null =
+ null;
+ expect(() => {
+ projected = projectRuntimeActivityContext(hostileContext);
+ }).not.toThrow();
+ expect(projected).toEqual({
+ adapter: 'none',
+ targetKind: 'none',
+ protocolVersion: 0,
+ configurationGeneration: 0,
+ phase: 'not_configured',
+ reasonCode: null,
+ });
+ expect(JSON.stringify(projected)).not.toContain(hostileMarker);
+ }
+ });
});
describe('activityReducer', () => {
@@ -129,7 +267,7 @@ describe('activityReducer', () => {
activityReducer(activityReducer([], { type: 'add', event: first }), {
type: 'add',
event: second,
- }),
+ })
).toEqual([second, first]);
});
@@ -148,9 +286,7 @@ describe('activityReducer', () => {
});
test('clear returns an empty event list', () => {
- expect(
- activityReducer([event('1')], { type: 'clear' }),
- ).toEqual([]);
+ expect(activityReducer([event('1')], { type: 'clear' })).toEqual([]);
});
test('retains capability labels on older entries', () => {
@@ -160,7 +296,7 @@ describe('activityReducer', () => {
activityReducer(activityReducer([], { type: 'add', event: older }), {
type: 'add',
event: newer,
- }).map(({ capability }) => capability),
+ }).map(({ capability }) => capability)
).toEqual(['persistence', 'streaming']);
});
});
@@ -169,7 +305,7 @@ describe('countUnseenProblems', () => {
const event = (
id: string,
kind: ActivityKind,
- severity: ActivitySeverity,
+ severity: ActivitySeverity
): SessionActivityEvent => ({
id,
at: '2026-08-31T17:00:00.000Z',
diff --git a/libs/workspace-react/src/lib/runtime/session-activity.ts b/libs/workspace-react/src/lib/runtime/session-activity.ts
index dce3308bd..e250b570c 100644
--- a/libs/workspace-react/src/lib/runtime/session-activity.ts
+++ b/libs/workspace-react/src/lib/runtime/session-activity.ts
@@ -1,11 +1,115 @@
+import type { RuntimeAdapter } from '@threadplane/cockpit-registry';
+import type { SanitizedRuntimeTargetDisplay } from './runtime-target-session';
+import type { RuntimePhase } from './runtime-state';
+
export type ActivitySeverity = 'neutral' | 'success' | 'error';
export type ActivityMode = 'Run' | 'Code' | 'Docs' | 'API';
+export type RuntimeActivityReasonCode =
+ | 'bootstrap_failed'
+ | 'invalid_runtime_url'
+ | 'unauthorized'
+ | 'network_blocked'
+ | 'incompatible_bridge';
+
+export interface RuntimeActivityContext {
+ adapter: RuntimeAdapter;
+ targetKind: SanitizedRuntimeTargetDisplay['kind'];
+ protocolVersion: number;
+ configurationGeneration: number;
+ phase: RuntimePhase;
+ reasonCode: RuntimeActivityReasonCode | null;
+}
+
+const RUNTIME_ADAPTERS = ['ag-ui', 'langgraph', 'none'] as const;
+const RUNTIME_TARGET_KINDS = ['shared', 'ag-ui', 'langsmith', 'none'] as const;
+const RUNTIME_PHASES = [
+ 'not_configured',
+ 'invalid_configuration',
+ 'configuring',
+ 'connecting',
+ 'checking',
+ 'ready',
+ 'unresponsive',
+ 'reloading',
+ 'error',
+ 'unauthorized',
+ 'network_blocked',
+ 'incompatible_bridge',
+] as const;
+const RUNTIME_REASON_CODES = [
+ 'bootstrap_failed',
+ 'invalid_runtime_url',
+ 'unauthorized',
+ 'network_blocked',
+ 'incompatible_bridge',
+] as const;
+
+const knownString = (
+ value: unknown,
+ allowed: readonly T[],
+ fallback: T
+): T =>
+ typeof value === 'string' && (allowed as readonly string[]).includes(value)
+ ? (value as T)
+ : fallback;
+
+const safeNonnegativeInteger = (value: unknown): number =>
+ typeof value === 'number' && Number.isSafeInteger(value) && value >= 0
+ ? value
+ : 0;
+
+const knownReasonCode = (value: unknown): RuntimeActivityReasonCode | null =>
+ typeof value === 'string' &&
+ (RUNTIME_REASON_CODES as readonly string[]).includes(value)
+ ? (value as RuntimeActivityReasonCode)
+ : null;
+
+const defaultRuntimeActivityContext = (): RuntimeActivityContext => ({
+ adapter: 'none',
+ targetKind: 'none',
+ protocolVersion: 0,
+ configurationGeneration: 0,
+ phase: 'not_configured',
+ reasonCode: null,
+});
+
+export function projectRuntimeActivityContext(
+ context: unknown
+): RuntimeActivityContext {
+ if (typeof context !== 'object' || context === null) {
+ return defaultRuntimeActivityContext();
+ }
+
+ try {
+ const source = context as Record;
+ return {
+ adapter: knownString(source['adapter'], RUNTIME_ADAPTERS, 'none'),
+ targetKind: knownString(
+ source['targetKind'],
+ RUNTIME_TARGET_KINDS,
+ 'none'
+ ),
+ protocolVersion: safeNonnegativeInteger(source['protocolVersion']),
+ configurationGeneration: safeNonnegativeInteger(
+ source['configurationGeneration']
+ ),
+ phase: knownString(source['phase'], RUNTIME_PHASES, 'not_configured'),
+ reasonCode: knownReasonCode(source['reasonCode']),
+ };
+ } catch {
+ return defaultRuntimeActivityContext();
+ }
+}
+
type RuntimeActivityKind =
| 'runtime_check_requested'
| 'runtime_ready'
| 'runtime_unresponsive'
| 'runtime_initialization_error'
+ | 'runtime_unauthorized'
+ | 'runtime_network_blocked'
+ | 'runtime_incompatible_bridge'
| 'runtime_reload_requested'
| 'runtime_recovered'
| 'runtime_open_requested'
@@ -17,6 +121,7 @@ interface RuntimeActivityInputBase {
id: string;
at: string;
capability: string;
+ runtime?: RuntimeActivityContext;
}
export type RuntimeActivityInput = RuntimeActivityInputBase &
@@ -34,6 +139,7 @@ export interface SessionActivityEvent {
severity: ActivitySeverity;
capability: string;
summary: string;
+ runtime?: RuntimeActivityContext;
}
export type ActivityAction =
@@ -41,7 +147,7 @@ export type ActivityAction =
| { type: 'clear' };
export function createSessionActivityEvent(
- input: RuntimeActivityInput,
+ input: RuntimeActivityInput
): SessionActivityEvent {
let severity: ActivitySeverity;
let summary: string;
@@ -63,6 +169,18 @@ export function createSessionActivityEvent(
severity = 'error';
summary = 'Runtime initialization failed';
break;
+ case 'runtime_unauthorized':
+ severity = 'error';
+ summary = 'Runtime authorization failed';
+ break;
+ case 'runtime_network_blocked':
+ severity = 'error';
+ summary = 'Runtime network request blocked';
+ break;
+ case 'runtime_incompatible_bridge':
+ severity = 'error';
+ summary = 'Runtime bridge incompatible';
+ break;
case 'runtime_reload_requested':
severity = 'neutral';
summary = 'Runtime reload requested';
@@ -100,6 +218,11 @@ export function createSessionActivityEvent(
severity,
capability: input.capability,
summary,
+ ...(input.runtime
+ ? {
+ runtime: projectRuntimeActivityContext(input.runtime),
+ }
+ : {}),
};
}
@@ -107,7 +230,7 @@ const MAX_ACTIVITY_EVENTS = 50;
export function activityReducer(
state: SessionActivityEvent[],
- action: ActivityAction,
+ action: ActivityAction
): SessionActivityEvent[] {
switch (action.type) {
case 'add':
@@ -134,10 +257,9 @@ export function activityReducer(
*/
export function countUnseenProblems(
events: readonly SessionActivityEvent[],
- seenCount: number,
+ seenCount: number
): number {
const unseen = Math.max(0, events.length - seenCount);
- return events
- .slice(0, unseen)
- .filter((event) => event.severity === 'error').length;
+ return events.slice(0, unseen).filter((event) => event.severity === 'error')
+ .length;
}
diff --git a/libs/workspace-react/src/lib/runtime/use-runtime-controller.spec.tsx b/libs/workspace-react/src/lib/runtime/use-runtime-controller.spec.tsx
index 7cf6b8cb2..5923e8b2a 100644
--- a/libs/workspace-react/src/lib/runtime/use-runtime-controller.spec.tsx
+++ b/libs/workspace-react/src/lib/runtime/use-runtime-controller.spec.tsx
@@ -11,8 +11,12 @@ import {
vi,
type Mock,
} from 'vitest';
-import { RUNTIME_BRIDGE_VERSION } from '@threadplane/cockpit-runtime-bridge';
+import {
+ RUNTIME_BRIDGE_VERSION,
+ RUNTIME_CONFIGURATION_VERSION,
+} from '@threadplane/cockpit-runtime-bridge';
import type { RuntimeActivityInput } from './session-activity';
+import type { EffectiveRuntimeTarget } from './runtime-target-session';
import type { RuntimeTerminalTransition } from './runtime-state';
import {
useRuntimeController,
@@ -76,10 +80,45 @@ function runtimeError(nonce: string) {
} as const;
}
+const noneTarget: EffectiveRuntimeTarget = {
+ adapter: 'none',
+ target: null,
+};
+
+const sharedLangGraphTarget: EffectiveRuntimeTarget = {
+ adapter: 'langgraph',
+ target: { kind: 'shared' },
+};
+
+const customLangGraphTarget = (
+ apiUrl = 'https://api.example.test/langgraph',
+ apiKey = 'test-key-redact-me'
+): EffectiveRuntimeTarget => ({
+ adapter: 'langgraph',
+ target: { kind: 'langsmith', apiUrl, apiKey },
+});
+
+function childReady(nonce: string) {
+ return {
+ type: 'tplane:runtime-child-ready',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce,
+ } as const;
+}
+
+function configured(nonce: string, generation: number) {
+ return {
+ type: 'tplane:runtime-configured',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce,
+ generation,
+ } as const;
+}
+
function emitMessage(
data: unknown,
origin: string,
- source: MessageEventSource | null,
+ source: MessageEventSource | null
) {
act(() => {
window.dispatchEvent(new MessageEvent('message', { data, origin, source }));
@@ -90,25 +129,27 @@ describe('useRuntimeController', () => {
let container: HTMLDivElement;
let root: Root;
let onActivity: Mock<(event: RuntimeActivityInput) => void>;
- let onTerminalTransition: Mock<
- (event: RuntimeTerminalTransition) => void
+ let onTerminalTransition: Mock<(event: RuntimeTerminalTransition) => void>;
+ let randomUUID: Mock<
+ () => `${string}-${string}-${string}-${string}-${string}`
>;
- let randomUUID: Mock<() => `${string}-${string}-${string}-${string}-${string}`>;
const render = (
runtimeUrl: string | null,
capability = 'streaming',
mountFrame = true,
+ effectiveTarget: EffectiveRuntimeTarget = noneTarget
) => {
act(() => {
root.render(
+
+ );
+ });
+ expect(controller.snapshot.phase).toBe('configuring');
+ expect(vi.getTimerCount()).toBe(1);
+
+ act(() => vi.advanceTimersByTime(5_000));
+ expect(controller.snapshot).toMatchObject({
+ phase: 'incompatible_bridge',
+ errorCode: 'incompatible_bridge',
+ targetGeneration: 0,
+ });
+ expect(vi.getTimerCount()).toBe(0);
+ });
+
+ it('ignores late child-ready after a no-session terminal timeout until explicit retry', () => {
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ true,
+ customLangGraphTarget()
+ );
+ const frameWindow = controller.frameRef.current!.contentWindow!;
+ const postMessage = vi.spyOn(frameWindow, 'postMessage');
+ act(() => vi.advanceTimersByTime(5_000));
+
+ emitMessage(
+ childReady('late-child-nonce'),
+ 'https://runtime.test',
+ frameWindow
+ );
+ expect(controller.snapshot.phase).toBe('incompatible_bridge');
+ expect(postMessage).not.toHaveBeenCalled();
+ expect(vi.getTimerCount()).toBe(0);
+
+ act(() => controller.recheck());
+ expect(controller.snapshot.phase).toBe('configuring');
+ expect(postMessage).not.toHaveBeenCalled();
+ emitMessage(
+ childReady('retry-child-nonce'),
+ 'https://runtime.test',
+ frameWindow
+ );
+ expect(postMessage).toHaveBeenCalledWith(
+ expect.objectContaining({
+ nonce: 'retry-child-nonce',
+ generation: 0,
+ }),
+ 'https://runtime.test'
+ );
+ });
+
+ it('ignores a late frame load after a no-session terminal timeout until explicit retry', () => {
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ true,
+ customLangGraphTarget()
+ );
+ const frameWindow = controller.frameRef.current!.contentWindow!;
+ const postMessage = vi.spyOn(frameWindow, 'postMessage');
+ act(() => vi.advanceTimersByTime(5_000));
+
+ act(() => controller.onFrameLoad());
+ expect(controller.snapshot.phase).toBe('incompatible_bridge');
+ expect(postMessage).not.toHaveBeenCalled();
+ expect(vi.getTimerCount()).toBe(0);
+
+ act(() => controller.reload());
+ expect(controller.snapshot).toMatchObject({
+ phase: 'reloading',
+ frameGeneration: 1,
+ targetGeneration: 0,
+ });
+ expect(vi.getTimerCount()).toBe(1);
+ });
+
+ it('does not let duplicate child-ready retries extend the frame configuration deadline', () => {
+ const childNonce = 'bounded-child-nonce';
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ true,
+ customLangGraphTarget()
+ );
+ const frameWindow = controller.frameRef.current!.contentWindow!;
+ act(() => vi.advanceTimersByTime(4_999));
+ emitMessage(childReady(childNonce), 'https://runtime.test', frameWindow);
+ emitMessage(childReady(childNonce), 'https://runtime.test', frameWindow);
+ act(() => vi.advanceTimersByTime(1));
+
+ expect(controller.snapshot.phase).toBe('incompatible_bridge');
+ expect(vi.getTimerCount()).toBe(0);
+ });
+
+ it('maps a strict configuration failure and invalidates every old-generation response after replacement', () => {
+ const oldNonce = 'old-child-nonce';
+ const nextNonce = 'next-child-nonce';
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ true,
+ customLangGraphTarget()
+ );
+ const frameWindow = controller.frameRef.current!.contentWindow!;
+ emitMessage(childReady(oldNonce), 'https://runtime.test', frameWindow);
+ emitMessage(
+ {
+ type: 'tplane:runtime-configuration-failed',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce: oldNonce,
+ generation: 0,
+ code: 'incompatible_bridge',
+ },
+ 'https://runtime.test',
+ frameWindow
+ );
+ expect(controller.snapshot.phase).toBe('incompatible_bridge');
+
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ true,
+ customLangGraphTarget(
+ 'https://api.example.test/langgraph',
+ 'replacement-key'
+ )
+ );
+ expect(controller.snapshot).toMatchObject({
+ phase: 'configuring',
+ targetGeneration: 1,
+ frameGeneration: 1,
+ });
+
+ emitMessage(
+ {
+ type: 'tplane:runtime-operation-failed',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce: oldNonce,
+ generation: 0,
+ code: 'unauthorized',
+ },
+ 'https://runtime.test',
+ frameWindow
+ );
+ expect(controller.snapshot.phase).toBe('configuring');
+
+ emitMessage(childReady(nextNonce), 'https://runtime.test', frameWindow);
+ emitMessage(configured(nextNonce, 1), 'https://runtime.test', frameWindow);
+ emitMessage(
+ {
+ type: 'tplane:runtime-operation-failed',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce: oldNonce,
+ generation: 0,
+ code: 'network_blocked',
+ },
+ 'https://runtime.test',
+ frameWindow
+ );
+ expect(controller.snapshot.phase).toBe('connecting');
+ });
+
+ it('cancels an active health check before replacing the target generation', () => {
+ const childNonce = 'health-child-nonce';
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ true,
+ customLangGraphTarget()
+ );
+ const frameWindow = controller.frameRef.current!.contentWindow!;
+ emitMessage(childReady(childNonce), 'https://runtime.test', frameWindow);
+ emitMessage(configured(childNonce, 0), 'https://runtime.test', frameWindow);
+ act(() => controller.onFrameLoad());
+ expect(controller.snapshot.activeNonce).toBe(firstNonce);
+ expect(vi.getTimerCount()).toBe(1);
+
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ true,
+ customLangGraphTarget(
+ 'https://api.example.test/langgraph',
+ 'replacement-key'
+ )
+ );
+ expect(controller.snapshot).toMatchObject({
+ phase: 'configuring',
+ activeNonce: null,
+ targetGeneration: 1,
+ });
+ expect(vi.getTimerCount()).toBe(1);
+
+ emitMessage(runtimeReady(firstNonce), 'https://runtime.test', frameWindow);
+ expect(controller.snapshot.phase).toBe('configuring');
+ });
+
+ it('keeps reload and recheck bound to the current target generation', () => {
+ const childNonce = 'reload-child-nonce';
+ render(
+ 'https://runtime.test/path',
+ 'streaming',
+ true,
+ customLangGraphTarget()
+ );
+ const frameWindow = controller.frameRef.current!.contentWindow!;
+ emitMessage(childReady(childNonce), 'https://runtime.test', frameWindow);
+ emitMessage(configured(childNonce, 0), 'https://runtime.test', frameWindow);
+
+ act(() => controller.reload());
+ expect(controller.snapshot).toMatchObject({
+ phase: 'reloading',
+ targetGeneration: 0,
+ frameGeneration: 1,
+ });
+ emitMessage(
+ {
+ type: 'tplane:runtime-operation-failed',
+ version: RUNTIME_CONFIGURATION_VERSION,
+ nonce: childNonce,
+ generation: 0,
+ code: 'unauthorized',
+ },
+ 'https://runtime.test',
+ frameWindow
+ );
+ expect(controller.snapshot.phase).toBe('reloading');
+
+ act(() => controller.onFrameLoad());
+ expect(controller.snapshot).toMatchObject({
+ phase: 'configuring',
+ targetGeneration: 0,
+ frameGeneration: 1,
+ });
+ act(() => controller.recheck());
+ expect(controller.snapshot.targetGeneration).toBe(0);
+ });
+
it('accepts ready only from the mounted frame, exact origin, valid shape, and current nonce', () => {
randomUUID
.mockReturnValueOnce(firstNonce)
@@ -244,12 +924,12 @@ describe('useRuntimeController', () => {
emitMessage(
{ ...runtimeReady(firstNonce), version: 2 },
'https://runtime.test',
- frameWindow,
+ frameWindow
);
emitMessage(
{ ...runtimeReady(firstNonce), extra: true },
'https://runtime.test',
- frameWindow,
+ frameWindow
);
emitMessage(runtimeReady('stale'), 'https://runtime.test', frameWindow);
expect(controller.snapshot.phase).toBe('connecting');
@@ -289,7 +969,7 @@ describe('useRuntimeController', () => {
emitMessage(
{ ...runtimeError(firstNonce), code: 'raw_failure' },
'https://runtime.test',
- frameWindow,
+ frameWindow
);
expect(controller.snapshot.phase).toBe('connecting');
@@ -455,7 +1135,7 @@ describe('useRuntimeController', () => {
routeGeneration: 1,
});
expect(controller.validatedRuntimeUrl).toBe(
- 'https://next.runtime.test/new',
+ 'https://next.runtime.test/new'
);
expect(vi.getTimerCount()).toBe(0);
emitMessage(runtimeReady(firstNonce), 'https://runtime.test', frameWindow);
@@ -463,16 +1143,12 @@ describe('useRuntimeController', () => {
act(() => controller.onFrameLoad());
expect(controller.snapshot.activeNonce).toBe(secondNonce);
- emitMessage(
- runtimeReady(secondNonce),
- 'https://runtime.test',
- frameWindow,
- );
+ emitMessage(runtimeReady(secondNonce), 'https://runtime.test', frameWindow);
expect(controller.snapshot.phase).toBe('connecting');
emitMessage(
runtimeReady(secondNonce),
'https://next.runtime.test',
- frameWindow,
+ frameWindow
);
expect(controller.snapshot.phase).toBe('ready');
});
@@ -491,8 +1167,7 @@ describe('useRuntimeController', () => {
const activityCount = onActivity.mock.calls.length;
const terminalCount = onTerminalTransition.mock.calls.length;
- const latestConfiguredUrl =
- 'https://user:pw@runtime.test/path?token=b#two';
+ const latestConfiguredUrl = 'https://user:pw@runtime.test/path?token=b#two';
render(latestConfiguredUrl);
expect(controller.validatedRuntimeUrl).toBe('https://runtime.test/path');
@@ -514,7 +1189,7 @@ describe('useRuntimeController', () => {
expect(open).toHaveBeenCalledWith(
latestConfiguredUrl,
'_blank',
- 'noopener,noreferrer',
+ 'noopener,noreferrer'
);
});
@@ -532,12 +1207,13 @@ describe('useRuntimeController', () => {
capability: string,
suspend: boolean,
activity = onActivity,
- terminalTransition = onTerminalTransition,
+ terminalTransition = onTerminalTransition
) => (
Suspended
}>
+
+
+
+ Runtime target
+Custom runtime targets are unavailable for this capability.
+Runtime target
+ + + {view.location ? ( +
+ Active
+ {view.location}
+
+ {runtimeOrigin + ? `Allow Origin: ${runtimeOrigin}. This is the embedded Angular runtime origin, not necessarily the top-level workspace origin.` + : 'The embedded Angular runtime origin is unavailable for this capability.'} +
++ Kept in this tab until refresh. Nothing is saved. +
+Invalid runtime URL.
No runtime available. Start the local dev server to preview.
+
+
+
+
+ setDraft(event.currentTarget.value)}
+ />
+
+
+
+
+
+ );
+}
+
+const renderProvider = (adapter: RuntimeAdapter = 'langgraph') =>
+ render(
+