@contractspec/bundle.library 1.12.0 → 1.14.0

package/dist/components/docs/advanced/index.js

@@ -1,8 +1,1221 @@
-import { AdvancedMCPPage } from "./AdvancedMCPPage.js";
-import { AdvancedRenderersPage } from "./AdvancedRenderersPage.js";
-import { AdvancedTelemetryPage } from "./AdvancedTelemetryPage.js";
-import { AdvancedOverlayEditorPage } from "./AdvancedOverlayEditorPage.js";
-import { AdvancedWorkflowMonitoringPage } from "./AdvancedWorkflowMonitoringPage.js";
-import { AdvancedSpecExperimentsPage } from "./AdvancedSpecExperimentsPage.js";
-
-export { AdvancedMCPPage, AdvancedOverlayEditorPage, AdvancedRenderersPage, AdvancedSpecExperimentsPage, AdvancedTelemetryPage, AdvancedWorkflowMonitoringPage };
+// @bun
+// src/components/docs/advanced/AdvancedMCPPage.tsx
+import Link from "@contractspec/lib.ui-link";
+import { ChevronRight } from "lucide-react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function AdvancedMCPPage() {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h1", {
+            className: "text-4xl font-bold",
+            children: "MCP Adapters"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "The ",
+              /* @__PURE__ */ jsxDEV("strong", {
+                children: "Model Context Protocol (MCP)"
+              }, undefined, false, undefined, this),
+              " is an open standard for connecting AI models to external tools and data sources. ContractSpec provides MCP adapters that allow you to expose your capabilities as MCP tools and consume external MCP servers as capabilities."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Why MCP integration matters"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "AI agents need access to real-world tools and data to be useful. MCP provides a standardized way to expose these capabilities. By integrating ContractSpec with MCP, you can:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Let AI agents invoke your ContractSpec capabilities safely and securely"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Use external MCP servers (databases, APIs, search engines) as capability providers in your workflows"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Build AI-powered features without writing custom integration code"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Enforce policies on AI agent actions just like any other user"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Exposing capabilities as MCP tools"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "Any",
+              " ",
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/docs/specs/capabilities",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "CapabilitySpec"
+              }, undefined, false, undefined, this),
+              " ",
+              "can be automatically exposed as an MCP tool. ContractSpec generates:"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "A tool schema describing the capability's inputs, outputs, and purpose"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "An MCP server endpoint that AI agents can connect to"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Policy enforcement ensuring agents can only invoke capabilities they're authorized to use"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Audit logging of all agent actions for compliance and debugging"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Example: Exposing a capability"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "Here's how to expose ContractSpec operations as MCP tools:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV("pre", {
+              children: `import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { createMcpServer } from '@contractspec/lib.contracts/server/provider-mcp';
+import { registry, resources, prompts } from './lib/registry';
+
+const server = new McpServer({
+  name: 'my-app-mcp',
+  version: '1.0.0',
+});
+
+createMcpServer(server, registry, resources, prompts, {
+  toolCtx: () => ({ actor: 'ai-agent' }),
+  promptCtx: () => ({ userId: null, orgId: null }),
+  resourceCtx: () => ({ userId: null, orgId: null }),
+});
+
+const transport = new StdioServerTransport();
+await server.connect(transport);`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "AI agents can now discover and invoke your operations through the MCP protocol. ContractSpec handles authentication, authorization, and execution automatically via the `OperationSpecRegistry`."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Consuming external MCP servers"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "You can integrate external MCP servers into your workflows. Define an integration spec and use it in your operations:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV("pre", {
+              children: `import { defineIntegration } from '@contractspec/lib.contracts';
+import { SchemaModel, ScalarTypeEnum } from '@contractspec/lib.schema';
+
+const SearchProductsIntegration = defineIntegration({
+  meta: {
+    key: 'products.search',
+    version: '1.0.0',
+    category: 'mcp',
+    description: 'Search products via external MCP server',
+  },
+  connection: {
+    serverUrl: 'https://api.example.com/mcp',
+    toolName: 'search_products',
+  },
+  io: {
+    input: new SchemaModel({
+      name: 'SearchProductsInput',
+      fields: {
+        query: { type: ScalarTypeEnum.String(), isOptional: false },
+        category: { type: ScalarTypeEnum.String(), isOptional: true },
+      },
+    }),
+    output: new SchemaModel({
+      name: 'ProductResults',
+      fields: {
+        products: { type: ScalarTypeEnum.JSON(), isOptional: false, isArray: true },
+      },
+    }),
+  },
+});`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Policy enforcement for AI agents"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "AI agents are treated like any other actor in ContractSpec. They must authenticate, and all their actions are subject to",
+              " ",
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/docs/specs/policy",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "PolicySpecs"
+              }, undefined, false, undefined, this),
+              ". You can define specific policies in TypeScript:"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV("pre", {
+              children: `import { definePolicy } from '@contractspec/lib.contracts';
+
+export const AIAgentRestrictions = definePolicy({
+  meta: {
+    key: 'ai.agent.restrictions',
+    version: '1.0.0',
+    description: 'Restrict AI agent actions',
+  },
+  rules: [
+    {
+      id: 'agents-read-only',
+      effect: 'DENY',
+      condition: (ctx) => ctx.actor === 'ai-agent' && ctx.action === 'write',
+    },
+    {
+      id: 'agents-require-approval',
+      effect: 'DENY',
+      condition: (ctx, spec) => 
+        ctx.actor === 'ai-agent' && 
+        spec.policy.escalate === 'human_review' &&
+        !ctx.approvalGranted,
+    },
+  ],
+});`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Human-in-the-loop workflows"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: "For sensitive operations, you can require human approval before an AI agent can proceed. ContractSpec provides built-in approval workflows:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Agent requests permission to invoke a capability"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Request is sent to designated approvers (via email, Slack, etc.)"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Approver reviews the request and approves or denies it"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Agent receives the decision and can proceed if approved"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground",
+            children: [
+              "All approval decisions are logged in the",
+              " ",
+              /* @__PURE__ */ jsxDEV(Link, {
+                href: "/docs/safety/auditing",
+                className: "text-violet-400 hover:text-violet-300",
+                children: "audit log"
+              }, undefined, false, undefined, this),
+              "."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Start with read-only capabilities for AI agents\u2014only grant write access when necessary."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Use human-in-the-loop approval for any capability that modifies critical data or triggers financial transactions."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Set rate limits to prevent runaway agents from overwhelming your system."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Provide clear, detailed descriptions for each capability so agents know when to use them."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Monitor agent actions closely in production and adjust policies as needed."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("li", {
+                children: "Test agent integrations thoroughly with realistic scenarios before deploying."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/advanced/renderers",
+            className: "btn-ghost",
+            children: "Previous: Custom Renderers"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Link, {
+            href: "/docs/advanced/telemetry",
+            className: "btn-primary",
+            children: [
+              "Next: Telemetry ",
+              /* @__PURE__ */ jsxDEV(ChevronRight, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/advanced/AdvancedOverlayEditorPage.tsx
+import Link2 from "@contractspec/lib.ui-link";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function AdvancedOverlayEditorPage() {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h1", {
+            className: "text-4xl font-bold",
+            children: "Overlay Editor"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            className: "text-muted-foreground text-lg",
+            children: "A Next.js app (`@contractspec/app.overlay-editor`) that lets tenant admins tweak field visibility, labels, and ordering, then sign OverlaySpecs."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "Features"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("ul", {
+            className: "list-disc space-y-2 pl-6",
+            children: [
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Toggle visibility and rename labels without touching code."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Move fields up/down to define the overlay order."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Preview JSON output powered by `@contractspec/lib.overlay-engine`."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Server action for PEM signing (Ed25519/RSA-PSS)."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            children: [
+              "Project path: ",
+              /* @__PURE__ */ jsxDEV2("code", {
+                children: "packages/apps/overlay-editor"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-2xl font-bold",
+            children: "Provisioning flow"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("ol", {
+            className: "list-decimal space-y-2 pl-6",
+            children: [
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: [
+                  "Clone the repo and run ",
+                  /* @__PURE__ */ jsxDEV2("code", {
+                    children: "bun dev"
+                  }, undefined, false, undefined, this),
+                  " inside the app."
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Use the UI to craft the overlay for a tenant."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Paste the tenant's PEM private key (stored in Vault/KMS)."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Click \u201CSign overlay\u201D to get the final JSON payload."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("li", {
+                children: "Persist in the `Overlay` table and register with `OverlayRegistry`."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("p", {
+            children: [
+              "See also:",
+              " ",
+              /* @__PURE__ */ jsxDEV2(Link2, {
+                href: "/docs/ops/tenant-customization",
+                className: "text-violet-400 underline",
+                children: "Tenant customization runbook"
+              }, undefined, false, undefined, this),
+              "."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/advanced/AdvancedRenderersPage.tsx
+import Link3 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function AdvancedRenderersPage() {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV3("h1", {
+            className: "text-4xl font-bold",
+            children: "Custom Renderers"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground text-lg",
+            children: "ContractSpec ships with React and React Native renderers. You can build custom renderers for any framework."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "space-y-6",
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h2", {
+                className: "text-2xl font-bold",
+                children: "Overview"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "The presentation runtime libraries (",
+                  /* @__PURE__ */ jsxDEV3("code", {
+                    children: "@contractspec/lib.presentation-runtime-react"
+                  }, undefined, false, undefined, this),
+                  " and",
+                  /* @__PURE__ */ jsxDEV3("code", {
+                    children: "@contractspec/lib.presentation-runtime-react-native"
+                  }, undefined, false, undefined, this),
+                  ") provide hooks and components to render ContractSpec-defined UI like workflows and data views. You can extend these or create custom implementations for other frameworks."
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h2", {
+                className: "text-2xl font-bold",
+                children: "Using the React Renderer"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+                children: /* @__PURE__ */ jsxDEV3("pre", {
+                  children: `import { useWorkflow, WorkflowStepRenderer } from '@contractspec/lib.presentation-runtime-react';
+import { MyWorkflowSpec } from './specs';
+
+export function WorkflowPage() {
+  const workflow = useWorkflow(MyWorkflowSpec);
+
+  return (
+    <div>
+      <h1>{workflow.currentStep.title}</h1>
+      <WorkflowStepRenderer workflow={workflow} />
+      <button onClick={workflow.next} disabled={!workflow.canProceed}>
+        Next
+      </button>
+    </div>
+  );
+}`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV3("h2", {
+                className: "text-2xl font-bold",
+                children: "Custom Platform Support"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: "text-muted-foreground",
+                children: "To support a new platform (e.g., Vue, Svelte), you would:"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("ol", {
+                className: "text-muted-foreground list-inside list-decimal space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV3("li", {
+                    children: [
+                      "Implement the core workflow state machine (from",
+                      " ",
+                      /* @__PURE__ */ jsxDEV3("code", {
+                        children: "@contractspec/lib.presentation-runtime-core"
+                      }, undefined, false, undefined, this),
+                      ")"
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("li", {
+                    children: "Create framework-specific hooks/components for step rendering"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("li", {
+                    children: "Handle validation and submission via the ContractSpec I/O schemas"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex items-center gap-4 pt-4",
+            children: /* @__PURE__ */ jsxDEV3(Link3, {
+              href: "/docs",
+              className: "btn-primary",
+              children: [
+                "Back to docs ",
+                /* @__PURE__ */ jsxDEV3(ChevronRight2, {
+                  size: 16
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/advanced/AdvancedSpecExperimentsPage.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function AdvancedSpecExperimentsPage() {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h1", {
+            className: "text-4xl font-bold",
+            children: "Spec Experiments"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Run controlled experiments on ContractSpec operations, gradually shift traffic, and roll back automatically when guardrails trip."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Define control + variants"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("pre", {
+            className: "bg-muted rounded-lg border p-4 text-sm",
+            children: `import { SpecExperimentRegistry } from '@contractspec/lib.growth/spec-experiments';
+
+const registry = new SpecExperimentRegistry().register({
+  target: { name: 'billing.createInvoice', version: 4 },
+  experiment: {
+    key: 'billing.createInvoice.evolution',
+    version: '1.0.0',
+    goal: 'Reduce PO validation failures',
+    primaryMetric: 'latency_ms',
+    variants: [
+      { id: 'control' },
+      { id: 'po-required', description: 'Force PO field', weight: 1 },
+    ],
+  },
+  control: BillingCreateInvoiceV4,
+  variants: [
+    { id: 'po-required', spec: BillingCreateInvoiceForAcme },
+  ],
+  rolloutStages: [0.01, 0.1, 0.5, 1],
+  guardrails: { errorRateThreshold: 0.02, latencyP99ThresholdMs: 500 },
+});`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Attach to runtime"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("pre", {
+            className: "bg-muted rounded-lg border p-4 text-sm",
+            children: `import { createSpecVariantResolver } from '@contractspec/lib.growth/spec-experiments';
+
+adapterContext.specVariantResolver = createSpecVariantResolver({
+  adapter,
+  resolveUserId: (ctx) => ctx.userId ?? ctx.organizationId ?? 'anon',
+});`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-3",
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-2xl font-bold",
+            children: "Track outcomes + auto-rollback"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("pre", {
+            className: "bg-muted rounded-lg border p-4 text-sm",
+            children: `import {
+  SpecExperimentAnalyzer,
+  SpecExperimentController,
+} from '@contractspec/lib.growth/spec-experiments';
+
+const analyzer = new SpecExperimentAnalyzer(tracker);
+const controller = new SpecExperimentController({
+  registry,
+  analyzer,
+  onRollback: (target, evaluation) => notifyOps(target, evaluation.reasons),
+});`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "grid gap-4 md:grid-cols-2",
+        children: [
+          {
+            title: "Deterministic bucketing",
+            description: "ExperimentRunner reuses the same hashing logic as growth experiments\u2014every user sticks to a variant."
+          },
+          {
+            title: "Multi-stage rollouts",
+            description: "Use `rolloutStages` to shift 1% \u2192 10% \u2192 50% \u2192 100%. Guardrails trigger rollbacks automatically."
+          }
+        ].map((card) => /* @__PURE__ */ jsxDEV4("div", {
+          className: "card-subtle space-y-2 p-4",
+          children: [
+            /* @__PURE__ */ jsxDEV4("h3", {
+              className: "text-lg font-semibold",
+              children: card.title
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4("p", {
+              className: "text-muted-foreground text-sm",
+              children: card.description
+            }, undefined, false, undefined, this)
+          ]
+        }, card.title, true, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/advanced/AdvancedTelemetryPage.tsx
+import Link4 from "@contractspec/lib.ui-link";
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function AdvancedTelemetryPage() {
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h1", {
+            className: "text-4xl font-bold",
+            children: "Telemetry"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: [
+              "A ",
+              /* @__PURE__ */ jsxDEV5("strong", {
+                children: "TelemetrySpec"
+              }, undefined, false, undefined, this),
+              " defines what metrics, logs, and traces to collect for observability. ContractSpec automatically instruments your application based on these specs, ensuring you have the visibility you need to monitor, debug, and optimize your system."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Why telemetry matters"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "You can't fix what you can't see. Telemetry provides visibility into how your application is performing, where errors are occurring, and how users are interacting with your system. Without proper instrumentation, you're flying blind in production."
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec takes a spec-first approach to telemetry: you declare what you want to observe, and runtime adapters instrument operations automatically. This ensures consistent, comprehensive coverage without manual effort."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Three pillars of observability"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Metrics"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: "Numerical measurements collected over time. Examples: request count, error rate, latency percentiles, active users, queue depth. Metrics are cheap to collect and store, making them ideal for high-level monitoring and alerting."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Logs"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: 'Timestamped text records of events. Examples: "User 123 logged in", "Payment failed for order 456", "Database connection pool exhausted". Logs provide detailed context for debugging specific issues.'
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("h3", {
+                    className: "text-lg font-semibold",
+                    children: "Traces"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV5("p", {
+                    className: "text-muted-foreground",
+                    children: "Records of requests as they flow through your system. A trace shows the complete path of a request\u2014which services it touched, how long each step took, and where errors occurred. Traces are essential for debugging distributed systems."
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Example TelemetrySpec"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "Here's how telemetry is configured in TypeScript:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
+            children: /* @__PURE__ */ jsxDEV5("pre", {
+              children: `import { defineTelemetry } from '@contractspec/lib.contracts';
+
+export const OrderProcessingTelemetry = defineTelemetry({
+  meta: {
+    key: 'order.processing.observability',
+    version: '1.0.0',
+  },
+  metrics: [
+    {
+      name: 'orders_created_total',
+      type: 'counter',
+      description: 'Total number of orders created',
+      labels: ['status', 'payment_method'],
+    },
+    {
+      name: 'order_processing_duration_seconds',
+      type: 'histogram',
+      description: 'Time to process an order',
+      buckets: [0.1, 0.5, 1.0, 2.0, 5.0, 10.0],
+      labels: ['status'],
+    },
+  ],
+  traces: [
+    {
+      operation: 'createOrder',
+      sampleRate: 1.0, // Trace 100% of requests
+      includeInputs: true,
+      includeOutputs: true,
+      redactFields: ['creditCard', 'ssn'],
+    },
+    {
+      operation: 'processPayment',
+      sampleRate: 0.1, // Trace 10% of requests
+      includeInputs: false, // Don't log payment details
+    },
+  ],
+  alerts: [
+    {
+      name: 'high-error-rate',
+      condition: 'error_rate > 0.05',
+      duration: '5m',
+      severity: 'critical',
+      notify: ['pagerduty', 'slack'],
+    },
+  ],
+});`
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Automatic instrumentation"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec automatically instruments:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "All operations"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Request count, latency, error rate per Command/Query"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "All workflows"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Step execution time, retry counts, compensation events"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "All data views"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Query execution time, result set size"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "All policy decisions"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Decision time, permit/deny ratio"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "System resources"
+                  }, undefined, false, undefined, this),
+                  " \u2013 CPU, memory, disk, network usage"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "You don't need to add instrumentation code manually\u2014the runtime handles it based on your specs."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Integration with observability platforms"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "ContractSpec supports multiple observability backends:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Prometheus"
+                  }, undefined, false, undefined, this),
+                  " \u2013 For metrics collection and alerting"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Grafana"
+                  }, undefined, false, undefined, this),
+                  " \u2013 For dashboards and visualization"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Jaeger / Tempo"
+                  }, undefined, false, undefined, this),
+                  " \u2013 For distributed tracing"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Loki"
+                  }, undefined, false, undefined, this),
+                  " \u2013 For log aggregation"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Datadog"
+                  }, undefined, false, undefined, this),
+                  " \u2013 All-in-one observability platform"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "New Relic"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Application performance monitoring"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Honeycomb"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Observability for complex systems"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "You can configure multiple backends and send telemetry to all of them simultaneously."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Sampling and performance"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground",
+            children: "Collecting telemetry has a cost\u2014CPU, memory, network bandwidth, and storage. ContractSpec provides several mechanisms to control overhead:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Sampling"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Trace only a percentage of requests (e.g., 10%)"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Adaptive sampling"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Automatically reduce sampling rate under high load"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Tail-based sampling"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Keep traces for failed requests, sample successful ones"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Field redaction"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Remove sensitive data from traces and logs"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: [
+                  /* @__PURE__ */ jsxDEV5("strong", {
+                    children: "Aggregation"
+                  }, undefined, false, undefined, this),
+                  " \u2013 Pre-aggregate metrics before sending to reduce network traffic"
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5("h2", {
+            className: "text-2xl font-bold",
+            children: "Best practices"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5("ul", {
+            className: "text-muted-foreground list-inside list-disc space-y-2",
+            children: [
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Start with high-level metrics (request rate, error rate, latency) and add more detailed instrumentation as needed."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Use structured logging\u2014log events with structured fields, not free-form text."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Set up alerts for critical metrics so you're notified when things go wrong."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Use traces to debug complex issues\u2014they show the complete picture of a request."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Redact sensitive data from logs and traces to comply with privacy regulations."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Review dashboards regularly to understand normal behavior\u2014this makes anomalies easier to spot."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("li", {
+                children: "Use sampling to control costs, but always trace errors and slow requests."
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "flex items-center gap-4 pt-4",
+        children: [
+          /* @__PURE__ */ jsxDEV5(Link4, {
+            href: "/docs/advanced/mcp",
+            className: "btn-ghost",
+            children: "Previous: MCP Adapters"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Link4, {
+            href: "/docs/comparison",
+            className: "btn-primary",
+            children: [
+              "Next: Comparison ",
+              /* @__PURE__ */ jsxDEV5(ChevronRight3, {
+                size: 16
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/docs/advanced/AdvancedWorkflowMonitoringPage.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function AdvancedWorkflowMonitoringPage() {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "space-y-8",
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h1", {
+            className: "text-4xl font-bold",
+            children: "Workflow Monitoring"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            className: "text-muted-foreground text-lg",
+            children: "Production workflows need robust observability. ContractSpec provides SLA monitoring, distributed tracing, and audit logging out of the box."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "SLA Monitoring"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            children: [
+              "Use the ",
+              /* @__PURE__ */ jsxDEV6("code", {
+                children: "SLAMonitor"
+              }, undefined, false, undefined, this),
+              " to detect when workflows or individual steps exceed their budgeted duration."
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("pre", {
+            className: "bg-muted rounded-lg border p-4 text-sm",
+            children: `import { SLAMonitor } from '@contractspec/lib.contracts/workflow/sla-monitor';
+
+const monitor = new SLAMonitor((event, payload) => {
+  if (event === 'workflow.sla_breach') {
+    console.error('SLA Breach!', payload);
+    // Send to PagerDuty / Slack
+  }
+});
+
+// Check periodically
+monitor.check(currentState, workflowSpec);`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Telemetry & Tracing"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            children: "Workflows automatically generate OpenTelemetry spans for:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("ul", {
+            className: "list-disc space-y-2 pl-6",
+            children: [
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Overall workflow execution"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Individual steps"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV6("li", {
+                children: "Retries and compensation"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            children: "Configure your OpenTelemetry exporter to send traces to Jaeger, Datadog, or Honeycomb."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "space-y-4",
+        children: [
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "text-2xl font-bold",
+            children: "Dashboarding"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("p", {
+            children: [
+              "You can build a custom dashboard using ",
+              /* @__PURE__ */ jsxDEV6("code", {
+                children: "DataViews"
+              }, undefined, false, undefined, this),
+              " over your workflow state database. See the DataViews tutorial for how to visualize ",
+              /* @__PURE__ */ jsxDEV6("code", {
+                children: "WorkflowState"
+              }, undefined, false, undefined, this),
+              " records."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  AdvancedWorkflowMonitoringPage,
+  AdvancedTelemetryPage,
+  AdvancedSpecExperimentsPage,
+  AdvancedRenderersPage,
+  AdvancedOverlayEditorPage,
+  AdvancedMCPPage
+};