@contractspec/bundle.library 3.8.9 → 3.8.11

package/src/components/docs/guides/GuideHostBuilderWorkbenchPage.tsx

@@ -0,0 +1,230 @@
+import { CodeBlock } from '@contractspec/lib.design-system';
+import Link from '@contractspec/lib.ui-link';
+import { ChevronRight } from 'lucide-react';
+
+const builderCommands = [
+	'builder.workspace.bootstrap',
+	'builder.channel.receiveInbound',
+	'builder.blueprint.generate',
+	'builder.plan.compile',
+	'builder.preview.create',
+	'builder.preview.runHarness',
+	'builder.export.prepare',
+	'builder.export.approve',
+	'builder.export.execute',
+];
+export function GuideHostBuilderWorkbenchPage() {
+	return (
+		<div className="space-y-8">
+			<div className="space-y-3">
+				<h1 className="font-bold text-4xl">Host the Builder workbench</h1>
+				<p className="text-lg text-muted-foreground">
+					Use the reusable Builder workbench as the desktop control surface for
+					snapshot loading, guided authoring, preview, readiness, export, and
+					mobile review handoff.
+				</p>
+			</div>
+
+			<div className="card-subtle space-y-4 p-6">
+				<h2 className="font-bold text-2xl">What you&apos;ll build</h2>
+				<ul className="space-y-2 text-muted-foreground text-sm">
+					<li>A workspace snapshot fetch path.</li>
+					<li>A `BuilderWorkbench` host with action callbacks.</li>
+					<li>
+						Runtime-mode aware preview/export controls plus mobile review links.
+					</li>
+				</ul>
+			</div>
+			<div className="space-y-6">
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">
+						1) Fetch the workspace snapshot
+					</h2>
+					<p className="text-muted-foreground text-sm">
+						The web shell already exposes a query path for the current Builder
+						workspace snapshot. Your host should load it first, then refresh it
+						after each successful command.
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="builder-workbench-controller.ts"
+						code={`export async function fetchBuilderSnapshot(workspaceId: string) {
+  const response = await fetch(
+    \`/api/operate/builder/queries/builder.workspace.snapshot?workspaceId=\${encodeURIComponent(workspaceId)}\`,
+    { cache: "no-store" }
+  );
+  if (!response.ok) {
+    throw new Error("Failed to fetch Builder workspace snapshot.");
+  }
+  const payload = await response.json() as {
+    ok: boolean;
+    result: BuilderWorkspaceSnapshot;
+  };
+  if (!payload.ok) {
+    throw new Error("Builder workspace snapshot query returned an error.");
+  }
+  return payload.result;
+}`}
+					/>
+					<p className="text-muted-foreground text-sm">
+						Expected output: one `BuilderWorkspaceSnapshot` containing
+						workspace, plan, providers, runtime targets, preview, export, and
+						mobile review state.
+					</p>
+				</div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">
+						2) Host the workbench and refresh on action
+					</h2>
+					<p className="text-muted-foreground text-sm">
+						The simplest host pattern is local state plus a small action wrapper
+						that executes one Builder command and then refreshes the snapshot.
+					</p>
+					<CodeBlock
+						language="tsx"
+						filename="BuilderWorkbenchHost.tsx"
+						code={`import {
+  BuilderWorkbench,
+  useBuilderWorkbenchState,
+} from "@contractspec/module.builder-workbench/presentation";
+
+const { snapshot, setSnapshot, promptDraft, setPromptDraft } =
+  useBuilderWorkbenchState({
+    workspace: initialSnapshot.workspace,
+    initialSnapshot,
+  });
+
+async function runAction(commandKey: string, payload?: Record<string, unknown>) {
+  await executeBuilderCommand({ commandKey, workspaceId, payload });
+  setSnapshot(await fetchBuilderSnapshot(workspaceId));
+}
+
+<BuilderWorkbench
+  snapshot={snapshot}
+  promptDraft={promptDraft}
+  onPromptDraftChange={setPromptDraft}
+  onCapturePrompt={() =>
+    runAction("builder.channel.receiveInbound", createPromptEnvelope(workspaceId, promptDraft))
+  }
+  onGenerateBlueprint={() => runAction("builder.blueprint.generate")}
+  onCompilePlan={() => runAction("builder.plan.compile")}
+  onCreatePreview={() => runAction("builder.preview.create", { runtimeMode: "hybrid" })}
+  onRunReadiness={() => runAction("builder.preview.runHarness")}
+  onPrepareExport={() => runAction("builder.export.prepare", { runtimeMode: "hybrid" })}
+  onApproveExport={() => runAction("builder.export.approve")}
+  onExecuteExport={() => runAction("builder.export.execute")}
+  selectedExportRuntimeMode="hybrid"
+/>;`}
+					/>
+					<p className="text-muted-foreground text-sm">
+						Expected output: each successful action leaves the host with a fresh
+						snapshot and keeps the workbench tabs aligned with current runtime
+						state.
+					</p>
+				</div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">
+						3) Bootstrap providers and routing policy explicitly
+					</h2>
+					<p className="text-muted-foreground text-sm">
+						Builder v3 treats provider routing as policy, not heuristic. Use the
+						workspace bootstrap command as the single managed-first setup path
+						instead of orchestrating provider registration in the app shell.
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="builder-bootstrap.ts"
+						code={`await executeBuilderCommand({
+  commandKey: "builder.workspace.bootstrap",
+  workspaceId,
+  payload: {
+    preset: "managed_mvp",
+    includeLocalHelperProvider: true,
+  },
+});`}
+					/>
+				</div>
+				<div className="card-subtle space-y-3 p-6">
+					<h3 className="font-semibold text-lg">Common command keys</h3>
+					<ul className="space-y-2 text-muted-foreground text-sm">
+						{builderCommands.map((command) => (
+							<li key={command}>
+								<code>{command}</code>
+							</li>
+						))}
+					</ul>
+				</div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">4) Keep runtime mode explicit</h2>
+					<p className="text-muted-foreground text-sm">
+						Preview and export flows are runtime-mode aware. The host chooses
+						between `managed`, `local`, and `hybrid` and passes that choice into
+						preview or export commands instead of hiding it behind provider
+						selection heuristics.
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="runtime-mode"
+						code={`const [selectedExportRuntimeMode, setSelectedExportRuntimeMode] =
+  React.useState(resolveBuilderExportRuntimeMode(initialSnapshot));
+
+await executeBuilderCommand({
+  commandKey: "builder.preview.create",
+  workspaceId,
+  payload: {
+    runtimeMode: selectedExportRuntimeMode,
+  },
+	});`}
+					/>
+				</div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">5) Link mobile review flows</h2>
+					<p className="text-muted-foreground text-sm">
+						When a patch proposal, approval ticket, or incident needs operator
+						follow-up away from the desktop workbench, deep-link into the mobile
+						review route instead of inventing a separate data model.
+					</p>
+					<CodeBlock
+						language="typescript"
+						filename="mobile-review-path.ts"
+						code={`export function buildBuilderMobileReviewPath(
+  workspaceId: string,
+  cardId: string
+) {
+  return \`/operate/builder/workspaces/\${encodeURIComponent(workspaceId)}/mobile-review/\${encodeURIComponent(cardId)}\`;
+}`}
+					/>
+					<p className="text-muted-foreground text-sm">
+						Expected output: the same Builder workspace state stays visible from
+						desktop workbench and mobile review surfaces.
+					</p>
+				</div>
+				<div className="space-y-3">
+					<h2 className="font-bold text-2xl">
+						6) Keep Connect adjacent, not embedded
+					</h2>
+					<p className="text-muted-foreground text-sm">
+						Builder owns the authoring control plane. When Builder delegates
+						into coding repositories, enable Connect in those target workspaces
+						for context packs, mutation verification, replay, and review
+						packets, but do not replace Builder contracts with Connect
+						artifacts.
+					</p>
+					<CodeBlock
+						language="bash"
+						filename="connect-init.sh"
+						code={`contractspec connect init --scope workspace`}
+					/>
+				</div>
+			</div>
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/specs/builder-control-plane" className="btn-primary">
+					Back to Builder control plane <ChevronRight size={16} />
+				</Link>
+				<Link href="/docs/studio" className="btn-ghost">
+					Studio overview
+				</Link>
+			</div>
+		</div>
+	);
+}

package/src/components/docs/guides/GuidesIndexPage.tsx

@@ -38,6 +38,27 @@ const guides = [
 		href: '/docs/guides/docs-generation-pipeline',
 		time: '20 min',
 	},
+	{
+		title: 'Build a first module bundle',
+		description:
+			'Define one bundle spec, resolve a surface plan, and render it through the React host layer.',
+		href: '/docs/guides/first-module-bundle',
+		time: '20 min',
+	},
+	{
+		title: 'Host the Builder workbench',
+		description:
+			'Wire a Builder workspace snapshot, common commands, runtime modes, and mobile review links into the reusable host.',
+		href: '/docs/guides/host-builder-workbench',
+		time: '20 min',
+	},
+	{
+		title: 'Use Connect in a repo',
+		description:
+			'Enable Connect, verify agent actions locally, and inspect the resulting review and replay artifacts.',
+		href: '/docs/guides/connect-in-a-repo',
+		time: '15 min',
+	},
 	{
 		title: 'CI diff gating',
 		description:

package/src/components/docs/guides/index.ts

@@ -1,9 +1,12 @@
 import './guides.docblocks';
 
 export { GuideCIDiffGatingPage } from './GuideCIDiffGatingPage';
+export { GuideConnectInRepoPage } from './GuideConnectInRepoPage';
 export { GuideContractTypesPage } from './GuideContractTypesPage';
 export { GuideDocsPipelinePage } from './GuideDocsPipelinePage';
+export { GuideFirstModuleBundlePage } from './GuideFirstModuleBundlePage';
 export { GuideGenerateDocsClientsSchemasPage } from './GuideGenerateDocsClientsSchemasPage';
+export { GuideHostBuilderWorkbenchPage } from './GuideHostBuilderWorkbenchPage';
 export { GuideImportExistingCodebasesPage } from './GuideImportExistingCodebasesPage';
 export { GuideNextjsOneEndpointPage } from './GuideNextjsOneEndpointPage';
 export { GuideSpecValidationTypingPage } from './GuideSpecValidationTypingPage';

package/src/components/docs/specs/SpecsBuilderControlPlanePage.tsx

@@ -0,0 +1,210 @@
+import { CodeBlock } from '@contractspec/lib.design-system';
+import Link from '@contractspec/lib.ui-link';
+
+const runtimeModes = [
+	{
+		title: 'Managed',
+		body: 'Best when the team wants the platform to own setup, routing, readiness, and mobile-safe defaults.',
+	},
+	{
+		title: 'Local',
+		body: 'Best for power users who want tenant-local execution providers and tighter data-locality control.',
+	},
+	{
+		title: 'Hybrid',
+		body: 'Best when some work should stay local while preview, review, or export flows still use managed coordination.',
+	},
+];
+
+const builderLoop = [
+	'Capture prompts, files, voice, and other inbound sources into a typed workspace instead of relying on a single chat transcript.',
+	'Fuse the sources into decisions, assumptions, and blueprint updates with provenance and approval memory.',
+	'Compile authoring work into execution lanes, then route the work to explicit provider profiles and runtime targets.',
+	'Create previews, run readiness gates, and record receipts before export becomes an operator action.',
+	'Keep mobile review parity so approvals, incidents, and patch proposals can be inspected away from the desktop workbench.',
+];
+
+export function SpecsBuilderControlPlanePage() {
+	return (
+		<div className="space-y-10">
+			<section className="space-y-3">
+				<p className="editorial-kicker">Spec pack</p>
+				<h1 className="font-serif text-4xl tracking-[-0.04em] md:text-5xl">
+					Builder is a governed authoring control plane, not a frontier coding
+					agent.
+				</h1>
+				<p className="max-w-3xl text-lg text-muted-foreground leading-8">
+					The implemented Builder stack sits across{' '}
+					<code>@contractspec/lib.builder-spec</code>,{' '}
+					<code>@contractspec/lib.builder-runtime</code>,{' '}
+					<code>@contractspec/lib.provider-spec</code>, and the reusable
+					workbench/mobile modules. It orchestrates inputs, provider routing,
+					readiness, and export decisions on top of the OSS ContractSpec
+					foundation and the Studio operating layer.
+				</p>
+			</section>
+
+			<section className="editorial-proof-strip">
+				<div className="editorial-stat">
+					<span className="editorial-label">What Builder owns</span>
+					<span className="editorial-stat-value">
+						fusion, routing, readiness, export
+					</span>
+				</div>
+				<p className="max-w-2xl text-muted-foreground text-sm leading-7">
+					Builder delegates synthesis and coding to external execution
+					providers. Its job is to keep those runs policy-aware,
+					provenance-rich, and usable from both desktop and mobile operator
+					surfaces.
+				</p>
+			</section>
+
+			<section className="editorial-panel space-y-5">
+				<div className="space-y-2">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						Implemented stack and entrypoints
+					</h2>
+					<p className="text-muted-foreground text-sm leading-7">
+						You can use the type surfaces directly in code, or start from the
+						already wired workbench and mobile review routes in the public app
+						shell.
+					</p>
+				</div>
+				<CodeBlock
+					language="text"
+					filename="builder-stack"
+					code={`Packages
+- @contractspec/lib.builder-spec
+- @contractspec/lib.builder-runtime
+- @contractspec/lib.provider-spec
+- @contractspec/module.builder-workbench
+- @contractspec/module.mobile-review
+
+Web app routes
+- /operate/builder/workspaces/:workspaceId
+- /operate/builder/workspaces/:workspaceId/mobile-review/:cardId
+
+Operate API proxy
+- /api/operate/builder/queries/builder.workspace.snapshot
+- /api/operate/builder/commands/builder.blueprint.patch
+- /api/operate/builder/commands/builder.export.execute`}
+				/>
+			</section>
+
+			<section className="grid gap-4 md:grid-cols-3">
+				{runtimeModes.map((item) => (
+					<article key={item.title} className="editorial-panel space-y-3">
+						<h2 className="font-semibold text-xl">{item.title}</h2>
+						<p className="text-muted-foreground text-sm leading-7">
+							{item.body}
+						</p>
+					</article>
+				))}
+			</section>
+
+			<section className="grid gap-5 lg:grid-cols-2">
+				<article className="editorial-panel space-y-4">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						Typical Builder loop
+					</h2>
+					<ol className="list-inside list-decimal space-y-3 text-muted-foreground text-sm leading-7">
+						{builderLoop.map((step) => (
+							<li key={step}>{step}</li>
+						))}
+					</ol>
+				</article>
+
+				<article className="editorial-panel space-y-4">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						What Builder should not become
+					</h2>
+					<ul className="editorial-list">
+						<li>
+							<span className="editorial-list-marker" />
+							<span>
+								Not a competitor to specialized coding agents such as Codex or
+								Claude Code.
+							</span>
+						</li>
+						<li>
+							<span className="editorial-list-marker" />
+							<span>
+								Not a managed-only product that traps teams away from OSS-local
+								runtime paths.
+							</span>
+						</li>
+						<li>
+							<span className="editorial-list-marker" />
+							<span>
+								Not a hidden routing layer that obscures provider provenance,
+								receipts, or runtime mode.
+							</span>
+						</li>
+						<li>
+							<span className="editorial-list-marker" />
+							<span>
+								Not a desktop-only surface. Mobile review parity is part of the
+								control-plane contract.
+							</span>
+						</li>
+					</ul>
+				</article>
+			</section>
+
+			<section className="editorial-panel space-y-5">
+				<div className="space-y-2">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						Use the workbench UI as the host surface
+					</h2>
+					<p className="text-muted-foreground text-sm leading-7">
+						The reusable module already exposes the desktop workbench shell.
+						Your host app keeps control of action wiring, runtime mode
+						selection, and approval flows.
+					</p>
+				</div>
+				<CodeBlock
+					language="tsx"
+					filename="BuilderWorkbenchHost.tsx"
+					code={`import { BuilderWorkbench, useBuilderWorkbenchState } from "@contractspec/module.builder-workbench";
+
+const state = useBuilderWorkbenchState({
+  workspace: initialSnapshot.workspace,
+  initialSnapshot,
+});
+
+<BuilderWorkbench
+  snapshot={state.snapshot}
+  promptDraft={state.promptDraft}
+  onPromptDraftChange={state.setPromptDraft}
+  onCapturePrompt={capturePrompt}
+  onGenerateBlueprint={generateBlueprint}
+  onCompilePlan={compilePlan}
+  onCreatePreview={createPreview}
+  onRunReadiness={runReadiness}
+  onExecuteExport={executeExport}
+  selectedExportRuntimeMode="hybrid"
+/>;`}
+				/>
+			</section>
+
+			<section className="editorial-panel space-y-4">
+				<h2 className="font-serif text-3xl tracking-[-0.03em]">
+					Read this with the Studio bridge in mind
+				</h2>
+				<p className="text-muted-foreground text-sm leading-7">
+					Builder is where the OSS foundation meets the richer operating layer.
+					Use the Studio overview when you want the higher-level product posture
+					and team workflows on top of these contracts.
+				</p>
+				<div className="flex flex-wrap gap-3">
+					<Link href="/docs/studio" className="btn-primary">
+						Studio overview
+					</Link>
+					<Link href="/docs/architecture/control-plane" className="btn-ghost">
+						Control-plane runtime
+					</Link>
+				</div>
+			</section>
+		</div>
+	);
+}

package/src/components/docs/specs/SpecsConnectPage.tsx

@@ -0,0 +1,162 @@
+import { CodeBlock } from '@contractspec/lib.design-system';
+import Link from '@contractspec/lib.ui-link';
+
+const artifacts = [
+	{
+		title: 'ContextPack',
+		body: 'Projects the current repo state, impacted contracts, canon packs, policy bindings, and acceptance checks into one task-scoped envelope.',
+	},
+	{
+		title: 'PlanPacket',
+		body: 'Compiles a candidate objective into ACP-aware steps plus explicit refs back to control-plane intent, plan compile, and plan verify contracts.',
+	},
+	{
+		title: 'PatchVerdict',
+		body: 'Classifies one file edit or shell command as permit, rewrite, require_review, or deny, with runtime-linked control-plane state when available.',
+	},
+	{
+		title: 'ReviewPacket',
+		body: 'Persists the evidence a human needs when Connect escalates, while keeping the local artifact trail authoritative in OSS mode.',
+	},
+];
+
+const adoptionSteps = [
+	'Enable `connect` in `.contractsrc.json` and keep your protected, immutable, generated, and smoke-check policies explicit.',
+	'Run `contractspec connect context` and `contractspec connect plan` before risky work so the agent is operating on task-scoped evidence, not ambient repo assumptions.',
+	'Gate file and shell mutations through `contractspec connect verify` or the host hook commands instead of inventing editor-specific approval logic.',
+	'Inspect pending review packets locally first, then sync them to the Studio bridge only if your team wants centralized operator workflows.',
+	'Use replay and harness evaluation to prove whether a prior decision stayed safe when the workspace changed.',
+];
+
+const guardrails = [
+	'Connect is not a second control plane or a second package family.',
+	'Verdicts are projections over existing `controlPlane.*`, ACP, workspace, and harness primitives.',
+	'Studio is optional for baseline enforcement. Local artifacts remain the OSS source of truth.',
+	'Destructive commands, protected paths, drift, and unknown impact stay visible instead of being hidden behind adapter magic.',
+];
+
+export function SpecsConnectPage() {
+	return (
+		<div className="space-y-10">
+			<section className="space-y-3">
+				<p className="editorial-kicker">Spec pack</p>
+				<h1 className="font-serif text-4xl tracking-[-0.04em] md:text-5xl">
+					ContractSpec Connect puts coding-agent actions behind explicit,
+					local-first governance.
+				</h1>
+				<p className="max-w-3xl text-lg text-muted-foreground leading-8">
+					Connect is the adapter layer between agent-native actions and the
+					existing ContractSpec stack. It reuses control-plane, ACP, workspace,
+					knowledge, and harness primitives to explain what the agent is trying
+					to do before a file edit or shell command lands.
+				</p>
+			</section>
+
+			<section className="editorial-proof-strip">
+				<div className="editorial-stat">
+					<span className="editorial-label">Authoritative surfaces</span>
+					<span className="editorial-stat-value">
+						control plane, ACP, workspace, harness
+					</span>
+				</div>
+				<p className="max-w-2xl text-muted-foreground text-sm leading-7">
+					Connect stays narrow on purpose. It projects local evidence, maps its
+					verdicts back to runtime semantics, and leaves the canonical system
+					contracts where they already live.
+				</p>
+			</section>
+
+			<section className="editorial-panel space-y-5">
+				<div className="space-y-2">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						What you use in practice
+					</h2>
+					<p className="text-muted-foreground text-sm leading-7">
+						The CLI and the workspace service already implement the pack. The
+						main workflow is local initialization, task projection,
+						verification, then optional review sync.
+					</p>
+				</div>
+				<CodeBlock
+					language="bash"
+					filename="contractspec-connect"
+					code={`contractspec connect init --scope workspace
+contractspec connect context --task refactor-docs --paths packages/libs/contracts-spec/src/control-plane/contracts.ts --json
+printf '{"objective":"Document the control-plane contract surface","commands":["bun run typecheck"]}' | contractspec connect plan --task refactor-docs --stdin --json
+printf '{"operation":"edit","path":"packages/libs/contracts-spec/src/control-plane/contracts.ts"}' | contractspec connect verify --task refactor-docs --tool acp.fs.access --stdin --json
+printf 'bun run typecheck' | contractspec connect verify --task refactor-docs --tool acp.terminal.exec --stdin --json
+contractspec connect review list --json
+contractspec connect replay <decisionId> --json`}
+				/>
+			</section>
+
+			<section className="space-y-5">
+				<div className="space-y-2">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						The four core artifacts
+					</h2>
+					<p className="text-muted-foreground text-sm leading-7">
+						Every Connect command is there to emit or inspect one of these
+						reviewable objects under `.contractspec/connect/*`.
+					</p>
+				</div>
+				<div className="grid gap-4 md:grid-cols-2">
+					{artifacts.map((item) => (
+						<article key={item.title} className="editorial-panel space-y-3">
+							<h3 className="font-semibold text-xl">{item.title}</h3>
+							<p className="text-muted-foreground text-sm leading-7">
+								{item.body}
+							</p>
+						</article>
+					))}
+				</div>
+			</section>
+
+			<section className="grid gap-5 lg:grid-cols-2">
+				<article className="editorial-panel space-y-4">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						Adopt Connect in this order
+					</h2>
+					<ol className="list-inside list-decimal space-y-3 text-muted-foreground text-sm leading-7">
+						{adoptionSteps.map((step) => (
+							<li key={step}>{step}</li>
+						))}
+					</ol>
+				</article>
+
+				<article className="editorial-panel space-y-4">
+					<h2 className="font-serif text-3xl tracking-[-0.03em]">
+						Boundaries that keep it trustworthy
+					</h2>
+					<ul className="editorial-list">
+						{guardrails.map((item) => (
+							<li key={item}>
+								<span className="editorial-list-marker" />
+								<span>{item}</span>
+							</li>
+						))}
+					</ul>
+				</article>
+			</section>
+
+			<section className="editorial-panel space-y-4">
+				<h2 className="font-serif text-3xl tracking-[-0.03em]">
+					Where Connect fits in the rest of the docs
+				</h2>
+				<p className="text-muted-foreground text-sm leading-7">
+					Read the control-plane runtime page when you want the underlying
+					governance contracts, then use the Studio bridge only if your team
+					wants centralized review queues on top of the OSS-local evidence path.
+				</p>
+				<div className="flex flex-wrap gap-3">
+					<Link href="/docs/architecture/control-plane" className="btn-primary">
+						Control-plane runtime
+					</Link>
+					<Link href="/docs/studio" className="btn-ghost">
+						Studio bridge
+					</Link>
+				</div>
+			</section>
+		</div>
+	);
+}