@contractspec/bundle.library 3.7.6 → 3.7.7

package/src/components/docs/advanced/AdvancedWorkflowMonitoringPage.tsx

@@ -1,22 +1,22 @@
 export function AdvancedWorkflowMonitoringPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Workflow Monitoring</h1>
-        <p className="text-muted-foreground text-lg">
-          Production workflows need robust observability. ContractSpec provides
-          SLA monitoring, distributed tracing, and audit logging out of the box.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Workflow Monitoring</h1>
+				<p className="text-lg text-muted-foreground">
+					Production workflows need robust observability. ContractSpec provides
+					SLA monitoring, distributed tracing, and audit logging out of the box.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">SLA Monitoring</h2>
-        <p>
-          Use the <code>SLAMonitor</code> to detect when workflows or individual
-          steps exceed their budgeted duration.
-        </p>
-        <pre className="bg-muted rounded-lg border p-4 text-sm">
-          {`import { SLAMonitor } from '@contractspec/lib.contracts-spec/workflow/sla-monitor';
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">SLA Monitoring</h2>
+				<p>
+					Use the <code>SLAMonitor</code> to detect when workflows or individual
+					steps exceed their budgeted duration.
+				</p>
+				<pre className="rounded-lg border bg-muted p-4 text-sm">
+					{`import { SLAMonitor } from '@contractspec/lib.contracts-spec/workflow/sla-monitor';
 
 const monitor = new SLAMonitor((event, payload) => {
   if (event === 'workflow.sla_breach') {
@@ -27,31 +27,31 @@ const monitor = new SLAMonitor((event, payload) => {
 
 // Check periodically
 monitor.check(currentState, workflowSpec);`}
-        </pre>
-      </div>
+				</pre>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Telemetry & Tracing</h2>
-        <p>Workflows automatically generate OpenTelemetry spans for:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Overall workflow execution</li>
-          <li>Individual steps</li>
-          <li>Retries and compensation</li>
-        </ul>
-        <p>
-          Configure your OpenTelemetry exporter to send traces to Jaeger,
-          Datadog, or Honeycomb.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Telemetry & Tracing</h2>
+				<p>Workflows automatically generate OpenTelemetry spans for:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Overall workflow execution</li>
+					<li>Individual steps</li>
+					<li>Retries and compensation</li>
+				</ul>
+				<p>
+					Configure your OpenTelemetry exporter to send traces to Jaeger,
+					Datadog, or Honeycomb.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Dashboarding</h2>
-        <p>
-          You can build a custom dashboard using <code>DataViews</code> over
-          your workflow state database. See the DataViews tutorial for how to
-          visualize <code>WorkflowState</code> records.
-        </p>
-      </div>
-    </div>
-  );
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Dashboarding</h2>
+				<p>
+					You can build a custom dashboard using <code>DataViews</code> over
+					your workflow state database. See the DataViews tutorial for how to
+					visualize <code>WorkflowState</code> records.
+				</p>
+			</div>
+		</div>
+	);
 }

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

@@ -1,6 +1,6 @@
 export * from './AdvancedMCPPage';
+export * from './AdvancedOverlayEditorPage';
 export * from './AdvancedRenderersPage';
+export * from './AdvancedSpecExperimentsPage';
 export * from './AdvancedTelemetryPage';
-export * from './AdvancedOverlayEditorPage';
 export * from './AdvancedWorkflowMonitoringPage';
-export * from './AdvancedSpecExperimentsPage';

package/src/components/docs/architecture/ArchitectureAppConfigPage.tsx

@@ -3,27 +3,27 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function ArchitectureAppConfigPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">App Configuration</h1>
-        <p className="text-muted-foreground">
-          ContractSpec uses a three-tier configuration model that separates
-          global app definitions from tenant-specific settings and runtime
-          resolution.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">App Configuration</h1>
+				<p className="text-muted-foreground">
+					ContractSpec uses a three-tier configuration model that separates
+					global app definitions from tenant-specific settings and runtime
+					resolution.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">AppBlueprintSpec</h2>
-        <p className="text-muted-foreground">
-          The <strong>AppBlueprintSpec</strong> is the global, versioned
-          definition of your application. It contains no tenant-specific
-          information and is stored in version control.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`type AppBlueprintSpec = {
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">AppBlueprintSpec</h2>
+				<p className="text-muted-foreground">
+					The <strong>AppBlueprintSpec</strong> is the global, versioned
+					definition of your application. It contains no tenant-specific
+					information and is stored in version control.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`type AppBlueprintSpec = {
   id: string;
   version: string;
   name: string;
@@ -61,19 +61,19 @@ export function ArchitectureAppConfigPage() {
   // Schema evolution
   migrations: MigrationSpec[];
 };`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">TenantAppConfig</h2>
-        <p className="text-muted-foreground">
-          The <strong>TenantAppConfig</strong> is the per-tenant,
-          per-environment configuration that customizes how a specific tenant
-          uses the app.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`type TenantAppConfig = {
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">TenantAppConfig</h2>
+				<p className="text-muted-foreground">
+					The <strong>TenantAppConfig</strong> is the per-tenant,
+					per-environment configuration that customizes how a specific tenant
+					uses the app.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`type TenantAppConfig = {
   tenantId: string;
   blueprintId: string;
   blueprintVersion: string;
@@ -105,18 +105,18 @@ export function ArchitectureAppConfigPage() {
   createdAt: string;
   updatedAt: string;
 };`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">AppIntegrationBinding</h2>
-        <p className="text-muted-foreground">
-          Defines how a tenant connects specific integration instances to
-          satisfy capabilities and workflows.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`type AppIntegrationBinding = {
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">AppIntegrationBinding</h2>
+				<p className="text-muted-foreground">
+					Defines how a tenant connects specific integration instances to
+					satisfy capabilities and workflows.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`type AppIntegrationBinding = {
   slotId: string;          // References AppIntegrationSlot.slotId
   connectionId: string;    // References IntegrationConnection.meta.id
   scope?: {
@@ -137,17 +137,17 @@ export function ArchitectureAppConfigPage() {
   },
   priority: 1
 }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">AppKnowledgeBinding</h2>
-        <p className="text-muted-foreground">
-          Defines which knowledge spaces a tenant's app can access and how.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`type AppKnowledgeBinding = {
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">AppKnowledgeBinding</h2>
+				<p className="text-muted-foreground">
+					Defines which knowledge spaces a tenant's app can access and how.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`type AppKnowledgeBinding = {
   spaceId: string;
   enabled: boolean;
   
@@ -178,19 +178,19 @@ export function ArchitectureAppConfigPage() {
   allowedCategories: ["canonical", "operational"],
   sources: ["src_notion_product_docs", "src_database_schema"]
 }`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">ResolvedAppConfig</h2>
-        <p className="text-muted-foreground">
-          The <strong>ResolvedAppConfig</strong> is the runtime result of
-          merging AppBlueprintSpec with TenantAppConfig. It's computed on-demand
-          and never persisted.
-        </p>
-        <CodeBlock
-          language="typescript"
-          code={`type ResolvedAppConfig = {
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">ResolvedAppConfig</h2>
+				<p className="text-muted-foreground">
+					The <strong>ResolvedAppConfig</strong> is the runtime result of
+					merging AppBlueprintSpec with TenantAppConfig. It's computed on-demand
+					and never persisted.
+				</p>
+				<CodeBlock
+					language="typescript"
+					code={`type ResolvedAppConfig = {
   appId: string;
   tenantId: string;
   blueprintName: string;
@@ -218,69 +218,69 @@ export function ArchitectureAppConfigPage() {
   branding: ResolvedBranding;           // { appName, assets, colors, domain }
   notes?: string;
 };`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Configuration flow</h2>
-        <p className="text-muted-foreground">
-          Here's how configuration flows from definition to runtime:
-        </p>
-        <ol className="text-muted-foreground list-inside list-decimal space-y-3">
-          <li>
-            <strong>Development</strong> - Define AppBlueprintSpec with required
-            integrations and knowledge spaces
-          </li>
-          <li>
-            <strong>Deployment</strong> - Deploy blueprint to environment
-            (sandbox, staging, production)
-          </li>
-          <li>
-            <strong>Tenant Setup</strong> - Create TenantAppConfig with specific
-            integration connections and knowledge sources
-          </li>
-          <li>
-            <strong>Runtime</strong> - Resolve configuration on-demand when
-            tenant accesses the app
-          </li>
-          <li>
-            <strong>Execution</strong> - Use ResolvedAppConfig to execute
-            capabilities, workflows, and enforce policies
-          </li>
-        </ol>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Configuration flow</h2>
+				<p className="text-muted-foreground">
+					Here's how configuration flows from definition to runtime:
+				</p>
+				<ol className="list-inside list-decimal space-y-3 text-muted-foreground">
+					<li>
+						<strong>Development</strong> - Define AppBlueprintSpec with required
+						integrations and knowledge spaces
+					</li>
+					<li>
+						<strong>Deployment</strong> - Deploy blueprint to environment
+						(sandbox, staging, production)
+					</li>
+					<li>
+						<strong>Tenant Setup</strong> - Create TenantAppConfig with specific
+						integration connections and knowledge sources
+					</li>
+					<li>
+						<strong>Runtime</strong> - Resolve configuration on-demand when
+						tenant accesses the app
+					</li>
+					<li>
+						<strong>Execution</strong> - Use ResolvedAppConfig to execute
+						capabilities, workflows, and enforce policies
+					</li>
+				</ol>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Best practices</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            Keep AppBlueprintSpec environment-agnostic - no secrets or
-            tenant-specific data
-          </li>
-          <li>
-            Use TenantAppConfig for all tenant-specific settings and connections
-          </li>
-          <li>
-            Cache ResolvedAppConfig per request to avoid repeated resolution
-          </li>
-          <li>Version blueprints carefully - migrations affect all tenants</li>
-          <li>
-            Test blueprint changes in sandbox before promoting to production
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Best practices</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						Keep AppBlueprintSpec environment-agnostic - no secrets or
+						tenant-specific data
+					</li>
+					<li>
+						Use TenantAppConfig for all tenant-specific settings and connections
+					</li>
+					<li>
+						Cache ResolvedAppConfig per request to avoid repeated resolution
+					</li>
+					<li>Version blueprints carefully - migrations affect all tenants</li>
+					<li>
+						Test blueprint changes in sandbox before promoting to production
+					</li>
+				</ul>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link href="/docs/architecture" className="btn-ghost">
-          Back to Architecture
-        </Link>
-        <Link
-          href="/docs/architecture/integration-binding"
-          className="btn-primary"
-        >
-          Integration Binding <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link href="/docs/architecture" className="btn-ghost">
+					Back to Architecture
+				</Link>
+				<Link
+					href="/docs/architecture/integration-binding"
+					className="btn-primary"
+				>
+					Integration Binding <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }

package/src/components/docs/architecture/ArchitectureControlPlanePage.tsx

@@ -3,39 +3,39 @@ import Link from '@contractspec/lib.ui-link';
 import { ChevronRight } from 'lucide-react';
 
 export function ArchitectureControlPlanePage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-4">
-        <h1 className="text-4xl font-bold">Control Plane Runtime</h1>
-        <p className="text-muted-foreground">
-          The control plane is the governance layer for agentic execution. It
-          turns incoming intent into deterministic plans, enforces risk policy
-          before side effects, and records replayable traces for audits.
-        </p>
-      </div>
+	return (
+		<div className="space-y-8">
+			<div className="space-y-4">
+				<h1 className="font-bold text-4xl">Control Plane Runtime</h1>
+				<p className="text-muted-foreground">
+					The control plane is the governance layer for agentic execution. It
+					turns incoming intent into deterministic plans, enforces risk policy
+					before side effects, and records replayable traces for audits.
+				</p>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Canonical execution loop</h2>
-        <ol className="text-muted-foreground list-inside list-decimal space-y-2">
-          <li>Accept intent and create execution identity + trace context.</li>
-          <li>Compile intent into a typed, deterministic plan DAG.</li>
-          <li>Verify plan against policy and risk rules.</li>
-          <li>Route into autonomous or assist mode based on verdict.</li>
-          <li>Execute steps with idempotent keys and explicit stage events.</li>
-          <li>Persist outcomes for replay, audits, and operator visibility.</li>
-        </ol>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Canonical execution loop</h2>
+				<ol className="list-inside list-decimal space-y-2 text-muted-foreground">
+					<li>Accept intent and create execution identity + trace context.</li>
+					<li>Compile intent into a typed, deterministic plan DAG.</li>
+					<li>Verify plan against policy and risk rules.</li>
+					<li>Route into autonomous or assist mode based on verdict.</li>
+					<li>Execute steps with idempotent keys and explicit stage events.</li>
+					<li>Persist outcomes for replay, audits, and operator visibility.</li>
+				</ol>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Contract surfaces (v1 baseline)</h2>
-        <p className="text-muted-foreground">
-          The runtime is contract-first. Commands, queries, events, and
-          capabilities are explicit and versioned under
-          <code> @contractspec/lib.contracts-spec</code>.
-        </p>
-        <CodeBlock
-          language="text"
-          code={`Commands
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Contract surfaces (v1 baseline)</h2>
+				<p className="text-muted-foreground">
+					The runtime is contract-first. Commands, queries, events, and
+					capabilities are explicit and versioned under
+					<code> @contractspec/lib.contracts-spec</code>.
+				</p>
+				<CodeBlock
+					language="text"
+					code={`Commands
 - controlPlane.intent.submit
 - controlPlane.plan.compile
 - controlPlane.plan.verify
@@ -72,33 +72,33 @@ Capabilities
 - control-plane.audit
 - control-plane.skill-registry
 - control-plane.channel-runtime`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Policy and safety posture</h2>
-        <ul className="text-muted-foreground list-inside list-disc space-y-2">
-          <li>
-            No side-effect action executes unless it comes from a compiled plan.
-          </li>
-          <li>High-risk actions are blocked from autonomous mode in v1.</li>
-          <li>
-            Approval commands provide explicit human-in-the-loop transitions.
-          </li>
-          <li>
-            Skill installation is modeled as governance-controlled operations.
-          </li>
-          <li>
-            Trace queries expose policy rationale and step outcomes for replay.
-          </li>
-        </ul>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Policy and safety posture</h2>
+				<ul className="list-inside list-disc space-y-2 text-muted-foreground">
+					<li>
+						No side-effect action executes unless it comes from a compiled plan.
+					</li>
+					<li>High-risk actions are blocked from autonomous mode in v1.</li>
+					<li>
+						Approval commands provide explicit human-in-the-loop transitions.
+					</li>
+					<li>
+						Skill installation is modeled as governance-controlled operations.
+					</li>
+					<li>
+						Trace queries expose policy rationale and step outcomes for replay.
+					</li>
+				</ul>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">Implementation map</h2>
-        <CodeBlock
-          language="text"
-          code={`packages/libs/contracts-spec/src/control-plane/
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">Implementation map</h2>
+				<CodeBlock
+					language="text"
+					code={`packages/libs/contracts-spec/src/control-plane/
   commands/
   queries/
   events/
@@ -108,29 +108,29 @@ Capabilities
 
 packages/apps/web-landing/src/app/docs/architecture/control-plane/page.tsx
 implementation_plan_controle_plane.md`}
-        />
-      </div>
+				/>
+			</div>
 
-      <div className="space-y-4">
-        <h2 className="text-2xl font-bold">What comes next</h2>
-        <p className="text-muted-foreground">
-          WS1 delivers the contract fabric. Next increments add planner/executor
-          split, policy escalation, capability-bound authorization, signed skill
-          compatibility checks, and full replay tooling.
-        </p>
-      </div>
+			<div className="space-y-4">
+				<h2 className="font-bold text-2xl">What comes next</h2>
+				<p className="text-muted-foreground">
+					WS1 delivers the contract fabric. Next increments add planner/executor
+					split, policy escalation, capability-bound authorization, signed skill
+					compatibility checks, and full replay tooling.
+				</p>
+			</div>
 
-      <div className="flex items-center gap-4 pt-4">
-        <Link
-          href="/docs/architecture/integration-binding"
-          className="btn-ghost"
-        >
-          Previous: Integration Binding
-        </Link>
-        <Link href="/docs/safety/auditing" className="btn-primary">
-          Audit Logs <ChevronRight size={16} />
-        </Link>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-4 pt-4">
+				<Link
+					href="/docs/architecture/integration-binding"
+					className="btn-ghost"
+				>
+					Previous: Integration Binding
+				</Link>
+				<Link href="/docs/safety/auditing" className="btn-primary">
+					Audit Logs <ChevronRight size={16} />
+				</Link>
+			</div>
+		</div>
+	);
 }