@contractspec/module.examples 3.7.7 → 3.8.2

package/README.md

@@ -9,6 +9,8 @@ Website: https://contractspec.io
 - **Layer**: module.
 - **Consumers**: apps (web-landing, docs), bundles (contractspec-studio).
 - Related ContractSpec packages include `@contractspec/example.agent-console`, `@contractspec/example.ai-chat-assistant`, `@contractspec/example.ai-support-bot`, `@contractspec/example.analytics-dashboard`, `@contractspec/example.calendar-google`, `@contractspec/example.content-generation`, ...
+- `agent-console` is the default autonomous-agent showcase surfaced through `/sandbox`.
+- `data-grid-showcase` is the focused ContractSpec table showcase surfaced through `/sandbox?template=data-grid-showcase`.
 
 ## Installation
 
@@ -63,3 +65,5 @@ Import the root entrypoint from `@contractspec/module.examples`, or choose a doc
 - This module is a thin aggregator -- business logic belongs in individual example packages under `packages/examples/`.
 - Adding a new example requires both creating the example package and wiring it as a dependency here.
 - Depends on ~30 example workspace packages; keep the dependency list in sync with `packages/examples/`.
+- The meetup-ready autonomous-agent path is the deterministic `agent-console` sandbox plus its replay proof lane.
+- The shared ContractSpec table stack is demonstrated directly by `data-grid-showcase` and reused in `analytics-dashboard`, `crm-pipeline`, `integration-hub`, and `agent-console`.

package/dist/builtins.d.ts

@@ -1,2 +1,2 @@
-import type { ExampleSpec } from "@contractspec/lib.contracts-spec/examples/types";
+import type { ExampleSpec } from '@contractspec/lib.contracts-spec/examples/types';
 export declare const EXAMPLE_REGISTRY: readonly ExampleSpec[];

package/dist/index.js

@@ -10,6 +10,7 @@ import AnalyticsDashboard from "@contractspec/example.analytics-dashboard/exampl
 import CalendarGoogle from "@contractspec/example.calendar-google/example";
 import ContentGeneration from "@contractspec/example.content-generation/example";
 import CrmPipeline from "@contractspec/example.crm-pipeline/example";
+import DataGridShowcase from "@contractspec/example.data-grid-showcase/example";
 import EmailGmail from "@contractspec/example.email-gmail/example";
 import InAppDocs from "@contractspec/example.in-app-docs/example";
 import IntegrationHub from "@contractspec/example.integration-hub/example";
@@ -35,7 +36,10 @@ import LifecycleDashboard from "@contractspec/example.lifecycle-dashboard/exampl
 import LocaleJurisdictionGate from "@contractspec/example.locale-jurisdiction-gate/example";
 import Marketplace from "@contractspec/example.marketplace/example";
 import MeetingRecorderProviders from "@contractspec/example.meeting-recorder-providers/example";
+import MessagingAgentActions from "@contractspec/example.messaging-agent-actions/example";
+import Minimal from "@contractspec/example.minimal/example";
 import OpenbankingPowens from "@contractspec/example.openbanking-powens/example";
+import OpencodeCli from "@contractspec/example.opencode-cli/example";
 import Personalization from "@contractspec/example.personalization/example";
 import PocketFamilyOffice from "@contractspec/example.pocket-family-office/example";
 import PolicySafeKnowledgeAssistant from "@contractspec/example.policy-safe-knowledge-assistant/example";
@@ -48,6 +52,7 @@ import VersionedKnowledgeBase from "@contractspec/example.versioned-knowledge-ba
 import VideoApiShowcase from "@contractspec/example.video-api-showcase/example";
 import VideoDocsTerminal from "@contractspec/example.video-docs-terminal/example";
 import VideoMarketingClip from "@contractspec/example.video-marketing-clip/example";
+import VisualizationShowcase from "@contractspec/example.visualization-showcase/example";
 import VoiceProviders from "@contractspec/example.voice-providers/example";
 import WealthSnapshot from "@contractspec/example.wealth-snapshot/example";
 import WorkflowSystem from "@contractspec/example.workflow-system/example";
@@ -59,6 +64,7 @@ var EXAMPLE_REGISTRY = [
   CalendarGoogle,
   ContentGeneration,
   CrmPipeline,
+  DataGridShowcase,
   EmailGmail,
   InAppDocs,
   IntegrationHub,
@@ -84,7 +90,10 @@ var EXAMPLE_REGISTRY = [
   LocaleJurisdictionGate,
   Marketplace,
   MeetingRecorderProviders,
+  MessagingAgentActions,
+  Minimal,
   OpenbankingPowens,
+  OpencodeCli,
   Personalization,
   PocketFamilyOffice,
   PolicySafeKnowledgeAssistant,
@@ -97,6 +106,7 @@ var EXAMPLE_REGISTRY = [
   VideoApiShowcase,
   VideoDocsTerminal,
   VideoMarketingClip,
+  VisualizationShowcase,
   VoiceProviders,
   WealthSnapshot,
   WorkflowSystem
@@ -123,7 +133,9 @@ import { ApolloProvider } from "@apollo/client/react";
 import { web as web2 } from "@contractspec/lib.runtime-sandbox";
 import { useEffect, useMemo, useState } from "react";
 import {
-  createAgentHandlers
+  AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+  createAgentConsoleDemoHandlers,
+  getAgentConsoleDashboardData
 } from "@contractspec/example.agent-console";
 import {
   createAnalyticsHandlers
@@ -186,6 +198,7 @@ import {
   saasBillingMarkdownRenderer,
   saasDashboardMarkdownRenderer
 } from "@contractspec/example.saas-boilerplate";
+import { visualizationShowcaseMarkdownRenderer } from "@contractspec/example.visualization-showcase/ui/renderers";
 import {
   workflowDashboardMarkdownRenderer,
   workflowDefinitionListMarkdownRenderer,
@@ -228,6 +241,7 @@ function registerTemplateRenderers(engine) {
   engine.register(analyticsDashboardMarkdownRenderer);
   engine.register(dashboardListMarkdownRenderer);
   engine.register(queryBuilderMarkdownRenderer);
+  engine.register(visualizationShowcaseMarkdownRenderer);
 }
 var templateEngine = null;
 function getTemplateEngine() {
@@ -253,9 +267,9 @@ var PRESENTATIONS_BY_TEMPLATE = {
   "crm-pipeline": ["crm-pipeline.dashboard", "crm-pipeline.deal.pipeline"],
   "agent-console": [
     "agent-console.dashboard",
-    "agent-console.agent.list",
+    "agent-console.agent.viewList",
     "agent-console.run.list",
-    "agent-console.tool.registry"
+    "agent-console.tool.list"
   ],
   "workflow-system": [
     "workflow-system.dashboard",
@@ -265,8 +279,7 @@ var PRESENTATIONS_BY_TEMPLATE = {
   marketplace: [
     "marketplace.dashboard",
     "marketplace.product.catalog",
-    "marketplace.order.list",
-    "marketplace.store.manage"
+    "marketplace.order.list"
   ],
   "integration-hub": [
     "integration-hub.dashboard",
@@ -278,6 +291,7 @@ var PRESENTATIONS_BY_TEMPLATE = {
     "analytics-dashboard.list",
     "analytics-dashboard.query.builder"
   ],
+  "visualization-showcase": ["visualization-showcase.gallery"],
   "learning-journey-studio-onboarding": [
     "learning.journey.track_list",
     "learning.journey.track_detail",
@@ -309,6 +323,28 @@ var PRESENTATIONS_BY_TEMPLATE = {
     "learning.journey.progress_widget"
   ]
 };
+var GENERATED_TEMPLATE_REGISTRY = listExamples().filter((example) => example.meta.key !== "agent-console").map((example) => {
+  const tags = [...example.meta.tags ?? []];
+  const category = tags.some((tag) => tag.toLowerCase() === "ai") || tags.some((tag) => tag.toLowerCase() === "assistant") ? "ai" : "business";
+  return {
+    id: example.meta.key,
+    name: example.meta.title ?? example.meta.key,
+    description: example.meta.description ?? "",
+    category,
+    complexity: "beginner",
+    icon: "\uD83D\uDCE6",
+    features: [],
+    tags,
+    schema: { models: [], contracts: [] },
+    components: { list: "ExampleList", detail: "ExampleDetail" },
+    preview: {
+      demoUrl: `/sandbox?template=${encodeURIComponent(example.meta.key)}`
+    },
+    package: example.entrypoints.packageName,
+    presentations: PRESENTATIONS_BY_TEMPLATE[example.meta.key] ?? [],
+    renderTargets: ["react", "markdown"]
+  };
+});
 var TEMPLATE_REGISTRY = [
   {
     id: "todos-app",
@@ -395,30 +431,42 @@ var TEMPLATE_REGISTRY = [
       quickstart: "/docs/templates/recipe-app-i18n"
     }
   },
-  ...listExamples().map((example) => {
-    const tags = example.meta.keywords ?? [];
-    const category = tags.some((t) => t.toLowerCase() === "ai") || tags.some((t) => t.toLowerCase() === "assistant") ? "ai" : "business";
-    const complexity = "beginner";
-    const icon = "\uD83D\uDCE6";
-    return {
-      id: example.meta.key,
-      name: example.meta.title ?? example.meta.key,
-      description: example.meta.description ?? "",
-      category,
-      complexity,
-      icon,
-      features: [],
-      tags: [...tags],
-      schema: { models: [], contracts: [] },
-      components: { list: "ExampleList", detail: "ExampleDetail" },
-      preview: {
-        demoUrl: `/sandbox?template=${encodeURIComponent(example.meta.key)}`
-      },
-      package: example.entrypoints.packageName,
-      presentations: PRESENTATIONS_BY_TEMPLATE[example.meta.key] ?? [],
-      renderTargets: ["react", "markdown"]
-    };
-  })
+  {
+    id: "agent-console",
+    name: "Agent Console",
+    description: "Deterministic autonomous-agent walkthrough with seeded agents, tool registry, runs, metrics, and replayable proof.",
+    category: "ai",
+    complexity: "intermediate",
+    icon: "\uD83E\uDD16",
+    features: [
+      "Seeded autonomous agents",
+      "Tool registry",
+      "Run execution history",
+      "Metrics",
+      "Markdown and React views"
+    ],
+    tags: ["ai", "agents", "autonomous", "meetup", "sandbox"],
+    schema: {
+      models: ["Agent", "Tool", "Run"],
+      contracts: [
+        "agent-console.agent.list",
+        "agent-console.agent.create",
+        "agent-console.run.execute"
+      ]
+    },
+    components: {
+      list: "AgentListView",
+      detail: "RunListView",
+      form: "CreateAgentModal"
+    },
+    preview: {
+      demoUrl: "/sandbox?template=agent-console"
+    },
+    package: "@contractspec/example.agent-console",
+    presentations: PRESENTATIONS_BY_TEMPLATE["agent-console"] ?? [],
+    renderTargets: ["react", "markdown"]
+  },
+  ...GENERATED_TEMPLATE_REGISTRY
 ];
 function listTemplates(filter) {
   if (!filter)
@@ -598,6 +646,58 @@ function toBase64(bytes) {
   return btoa(binary);
 }
 
+// src/runtime/presentations.ts
+function createComponentPresentation(key, title, description, goal, context, componentKey) {
+  return {
+    meta: {
+      key,
+      version: "1.0.0",
+      title,
+      description,
+      stability: "experimental",
+      goal,
+      context,
+      owners: ["@contractspec/examples"],
+      tags: ["template", "sandbox"]
+    },
+    source: {
+      type: "component",
+      framework: "react",
+      componentKey
+    },
+    targets: ["react", "markdown"]
+  };
+}
+var TEMPLATE_PRESENTATIONS = {
+  "agent-console.dashboard": createComponentPresentation("agent-console.dashboard", "Agent Console Dashboard", "Operational dashboard for the agent console example.", "Review agent activity, throughput, and execution health.", "Sandbox presentation used for markdown previews.", "AgentConsoleDashboard"),
+  "agent-console.agent.list": createComponentPresentation("agent-console.agent.list", "Agent List", "List of seeded agents in the agent console example.", "Browse configured agents and their current capabilities.", "Sandbox presentation used for markdown previews.", "AgentListView"),
+  "agent-console.agent.viewList": createComponentPresentation("agent-console.agent.viewList", "Agent List", "List of seeded agents in the agent console example.", "Browse configured agents and their current capabilities.", "Sandbox presentation used for markdown previews.", "AgentListView"),
+  "agent-console.run.list": createComponentPresentation("agent-console.run.list", "Run List", "Execution history for the agent console example.", "Inspect recent runs and their outcomes.", "Sandbox presentation used for markdown previews.", "RunListView"),
+  "agent-console.tool.list": createComponentPresentation("agent-console.tool.list", "Tool Registry", "Available tools for the agent console example.", "Inspect the tool registry exposed to the seeded agents.", "Sandbox presentation used for markdown previews.", "ToolRegistryView"),
+  "agent-console.tool.registry": createComponentPresentation("agent-console.tool.registry", "Tool Registry", "Available tools for the agent console example.", "Inspect the tool registry exposed to the seeded agents.", "Sandbox presentation used for markdown previews.", "ToolRegistryView"),
+  "analytics-dashboard.dashboard": createComponentPresentation("analytics-dashboard.dashboard", "Analytics Dashboard", "Dashboard view for the analytics example.", "Review saved widgets and query-backed dashboards.", "Sandbox presentation used for markdown previews.", "AnalyticsDashboard"),
+  "analytics-dashboard.list": createComponentPresentation("analytics-dashboard.list", "Dashboard List", "List view for analytics dashboards.", "Browse dashboards available in the analytics example.", "Sandbox presentation used for markdown previews.", "DashboardList"),
+  "analytics-dashboard.query.builder": createComponentPresentation("analytics-dashboard.query.builder", "Query Builder", "Query authoring surface for the analytics example.", "Inspect reusable queries that power dashboards.", "Sandbox presentation used for markdown previews.", "QueryBuilder"),
+  "crm-pipeline.dashboard": createComponentPresentation("crm-pipeline.dashboard", "CRM Dashboard", "Dashboard for the CRM pipeline example.", "Track pipeline health and revenue progress.", "Sandbox presentation used for markdown previews.", "CrmDashboard"),
+  "crm-pipeline.deal.pipeline": createComponentPresentation("crm-pipeline.deal.pipeline", "Pipeline Kanban", "Pipeline board for the CRM pipeline example.", "Review deal flow across pipeline stages.", "Sandbox presentation used for markdown previews.", "PipelineKanbanView"),
+  "integration-hub.connection.list": createComponentPresentation("integration-hub.connection.list", "Connection List", "Connected systems in the integration hub example.", "Review connected systems and connection health.", "Sandbox presentation used for markdown previews.", "ConnectionList"),
+  "integration-hub.dashboard": createComponentPresentation("integration-hub.dashboard", "Integration Dashboard", "Operational dashboard for the integration hub example.", "Monitor integration mix, connection health, and sync issues.", "Sandbox presentation used for markdown previews.", "IntegrationDashboard"),
+  "integration-hub.sync.config": createComponentPresentation("integration-hub.sync.config", "Sync Configuration", "Sync configuration surface for the integration hub example.", "Inspect sync configuration and field mapping defaults.", "Sandbox presentation used for markdown previews.", "SyncConfigEditor"),
+  "marketplace.dashboard": createComponentPresentation("marketplace.dashboard", "Marketplace Dashboard", "Dashboard for the marketplace example.", "Review order flow, category mix, and revenue summaries.", "Sandbox presentation used for markdown previews.", "MarketplaceDashboard"),
+  "marketplace.order.list": createComponentPresentation("marketplace.order.list", "Order List", "Order list for the marketplace example.", "Inspect order activity and fulfillment state.", "Sandbox presentation used for markdown previews.", "OrderList"),
+  "marketplace.product.catalog": createComponentPresentation("marketplace.product.catalog", "Product Catalog", "Product catalog for the marketplace example.", "Browse the available products and merchandising data.", "Sandbox presentation used for markdown previews.", "ProductCatalog"),
+  "saas-boilerplate.billing.settings": createComponentPresentation("saas-boilerplate.billing.settings", "Billing Settings", "Subscription and usage settings for the SaaS example.", "Review billing configuration and current subscription data.", "Sandbox presentation used for markdown previews.", "SubscriptionView"),
+  "saas-boilerplate.dashboard": createComponentPresentation("saas-boilerplate.dashboard", "SaaS Dashboard", "Dashboard for the SaaS boilerplate example.", "Review account, project, and billing summaries.", "Sandbox presentation used for markdown previews.", "SaasDashboard"),
+  "saas-boilerplate.project.list": createComponentPresentation("saas-boilerplate.project.list", "Project List", "Project list for the SaaS boilerplate example.", "Browse projects and their current lifecycle state.", "Sandbox presentation used for markdown previews.", "ProjectListView"),
+  "visualization-showcase.gallery": createComponentPresentation("visualization-showcase.gallery", "Visualization Showcase", "Focused showcase of ContractSpec visualization primitives.", "Review the canonical visualization catalog and design-system wrappers.", "Sandbox presentation used for markdown previews.", "VisualizationShowcase"),
+  "workflow-system.dashboard": createComponentPresentation("workflow-system.dashboard", "Workflow Dashboard", "Dashboard for the workflow system example.", "Review workflow instance health and workload metrics.", "Sandbox presentation used for markdown previews.", "WorkflowDashboard"),
+  "workflow-system.definition.list": createComponentPresentation("workflow-system.definition.list", "Workflow Definition List", "Workflow definitions in the workflow system example.", "Browse available workflow definitions.", "Sandbox presentation used for markdown previews.", "WorkflowDefinitionList"),
+  "workflow-system.instance.detail": createComponentPresentation("workflow-system.instance.detail", "Workflow Instance Detail", "Workflow instance details in the workflow system example.", "Inspect the state and approvals for a workflow instance.", "Sandbox presentation used for markdown previews.", "WorkflowInstanceDetail")
+};
+function resolveTemplatePresentation(presentationName) {
+  return TEMPLATE_PRESENTATIONS[presentationName];
+}
+
 // src/runtime/context.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
@@ -628,7 +728,7 @@ class TemplateHandlers {
 }
 function TemplateRuntimeProvider({
   templateId,
-  projectId = "default-project",
+  projectId = "local-project",
   lazy = false,
   children
 }) {
@@ -653,7 +753,7 @@ function TemplateRuntimeProvider({
         const handlers = new TemplateHandlers;
         handlers.crm = createCrmHandlers(runtime.db);
         handlers.saas = createSaasHandlers(runtime.db);
-        handlers.agent = createAgentHandlers(runtime.db);
+        handlers.agent = createAgentConsoleDemoHandlers({ projectId });
         handlers.workflow = createWorkflowHandlers(runtime.db);
         handlers.marketplace = createMarketplaceHandlers(runtime.db);
         handlers.integration = createIntegrationHandlers(runtime.db);
@@ -750,37 +850,19 @@ function TemplateRuntimeProvider({
             };
           }
           if (presentationName === "agent-console.dashboard") {
-            const [agentsResult, runsResult, toolsResult] = await Promise.all([
-              handlers.agent.listAgents({
-                projectId,
-                organizationId: "demo-org",
-                limit: 10
-              }),
-              handlers.agent.listRuns({ projectId, limit: 10 }),
-              handlers.agent.listTools({
-                projectId,
-                organizationId: "demo-org",
-                limit: 10
-              })
-            ]);
+            const data = await getAgentConsoleDashboardData(handlers.agent, {
+              projectId,
+              organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID
+            });
             return {
-              data: {
-                agents: agentsResult.items,
-                runs: runsResult.items,
-                tools: toolsResult.items,
-                summary: {
-                  totalAgents: agentsResult.total,
-                  totalRuns: runsResult.total,
-                  totalTools: toolsResult.total
-                }
-              },
+              data,
               metadata: { timestamp: new Date, source: "agent-console" }
             };
           }
-          if (presentationName === "agent-console.agent.list") {
+          if (presentationName === "agent-console.agent.viewList" || presentationName === "agent-console.agent.list") {
             const result = await handlers.agent.listAgents({
               projectId,
-              organizationId: "demo-org",
+              organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
               limit: 50
             });
             return {
@@ -806,10 +888,10 @@ function TemplateRuntimeProvider({
               }
             };
           }
-          if (presentationName === "agent-console.tool.registry") {
+          if (presentationName === "agent-console.tool.list" || presentationName === "agent-console.tool.registry") {
             const result = await handlers.agent.listTools({
               projectId,
-              organizationId: "demo-org",
+              organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
               limit: 50
             });
             return {
@@ -821,6 +903,15 @@ function TemplateRuntimeProvider({
               }
             };
           }
+          if (presentationName === "visualization-showcase.gallery") {
+            return {
+              data: null,
+              metadata: {
+                timestamp: new Date,
+                source: "visualization-showcase"
+              }
+            };
+          }
           console.warn(`No data fetcher found for presentation: ${presentationName}`);
           return {
             data: null,
@@ -837,7 +928,8 @@ function TemplateRuntimeProvider({
             projectId,
             engine,
             handlers,
-            fetchData
+            fetchData,
+            resolvePresentation: resolveTemplatePresentation
           });
         }
       } catch (err) {

package/dist/node/index.js

@@ -9,6 +9,7 @@ import AnalyticsDashboard from "@contractspec/example.analytics-dashboard/exampl
 import CalendarGoogle from "@contractspec/example.calendar-google/example";
 import ContentGeneration from "@contractspec/example.content-generation/example";
 import CrmPipeline from "@contractspec/example.crm-pipeline/example";
+import DataGridShowcase from "@contractspec/example.data-grid-showcase/example";
 import EmailGmail from "@contractspec/example.email-gmail/example";
 import InAppDocs from "@contractspec/example.in-app-docs/example";
 import IntegrationHub from "@contractspec/example.integration-hub/example";
@@ -34,7 +35,10 @@ import LifecycleDashboard from "@contractspec/example.lifecycle-dashboard/exampl
 import LocaleJurisdictionGate from "@contractspec/example.locale-jurisdiction-gate/example";
 import Marketplace from "@contractspec/example.marketplace/example";
 import MeetingRecorderProviders from "@contractspec/example.meeting-recorder-providers/example";
+import MessagingAgentActions from "@contractspec/example.messaging-agent-actions/example";
+import Minimal from "@contractspec/example.minimal/example";
 import OpenbankingPowens from "@contractspec/example.openbanking-powens/example";
+import OpencodeCli from "@contractspec/example.opencode-cli/example";
 import Personalization from "@contractspec/example.personalization/example";
 import PocketFamilyOffice from "@contractspec/example.pocket-family-office/example";
 import PolicySafeKnowledgeAssistant from "@contractspec/example.policy-safe-knowledge-assistant/example";
@@ -47,6 +51,7 @@ import VersionedKnowledgeBase from "@contractspec/example.versioned-knowledge-ba
 import VideoApiShowcase from "@contractspec/example.video-api-showcase/example";
 import VideoDocsTerminal from "@contractspec/example.video-docs-terminal/example";
 import VideoMarketingClip from "@contractspec/example.video-marketing-clip/example";
+import VisualizationShowcase from "@contractspec/example.visualization-showcase/example";
 import VoiceProviders from "@contractspec/example.voice-providers/example";
 import WealthSnapshot from "@contractspec/example.wealth-snapshot/example";
 import WorkflowSystem from "@contractspec/example.workflow-system/example";
@@ -58,6 +63,7 @@ var EXAMPLE_REGISTRY = [
   CalendarGoogle,
   ContentGeneration,
   CrmPipeline,
+  DataGridShowcase,
   EmailGmail,
   InAppDocs,
   IntegrationHub,
@@ -83,7 +89,10 @@ var EXAMPLE_REGISTRY = [
   LocaleJurisdictionGate,
   Marketplace,
   MeetingRecorderProviders,
+  MessagingAgentActions,
+  Minimal,
   OpenbankingPowens,
+  OpencodeCli,
   Personalization,
   PocketFamilyOffice,
   PolicySafeKnowledgeAssistant,
@@ -96,6 +105,7 @@ var EXAMPLE_REGISTRY = [
   VideoApiShowcase,
   VideoDocsTerminal,
   VideoMarketingClip,
+  VisualizationShowcase,
   VoiceProviders,
   WealthSnapshot,
   WorkflowSystem
@@ -122,7 +132,9 @@ import { ApolloProvider } from "@apollo/client/react";
 import { web as web2 } from "@contractspec/lib.runtime-sandbox";
 import { useEffect, useMemo, useState } from "react";
 import {
-  createAgentHandlers
+  AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
+  createAgentConsoleDemoHandlers,
+  getAgentConsoleDashboardData
 } from "@contractspec/example.agent-console";
 import {
   createAnalyticsHandlers
@@ -185,6 +197,7 @@ import {
   saasBillingMarkdownRenderer,
   saasDashboardMarkdownRenderer
 } from "@contractspec/example.saas-boilerplate";
+import { visualizationShowcaseMarkdownRenderer } from "@contractspec/example.visualization-showcase/ui/renderers";
 import {
   workflowDashboardMarkdownRenderer,
   workflowDefinitionListMarkdownRenderer,
@@ -227,6 +240,7 @@ function registerTemplateRenderers(engine) {
   engine.register(analyticsDashboardMarkdownRenderer);
   engine.register(dashboardListMarkdownRenderer);
   engine.register(queryBuilderMarkdownRenderer);
+  engine.register(visualizationShowcaseMarkdownRenderer);
 }
 var templateEngine = null;
 function getTemplateEngine() {
@@ -252,9 +266,9 @@ var PRESENTATIONS_BY_TEMPLATE = {
   "crm-pipeline": ["crm-pipeline.dashboard", "crm-pipeline.deal.pipeline"],
   "agent-console": [
     "agent-console.dashboard",
-    "agent-console.agent.list",
+    "agent-console.agent.viewList",
     "agent-console.run.list",
-    "agent-console.tool.registry"
+    "agent-console.tool.list"
   ],
   "workflow-system": [
     "workflow-system.dashboard",
@@ -264,8 +278,7 @@ var PRESENTATIONS_BY_TEMPLATE = {
   marketplace: [
     "marketplace.dashboard",
     "marketplace.product.catalog",
-    "marketplace.order.list",
-    "marketplace.store.manage"
+    "marketplace.order.list"
   ],
   "integration-hub": [
     "integration-hub.dashboard",
@@ -277,6 +290,7 @@ var PRESENTATIONS_BY_TEMPLATE = {
     "analytics-dashboard.list",
     "analytics-dashboard.query.builder"
   ],
+  "visualization-showcase": ["visualization-showcase.gallery"],
   "learning-journey-studio-onboarding": [
     "learning.journey.track_list",
     "learning.journey.track_detail",
@@ -308,6 +322,28 @@ var PRESENTATIONS_BY_TEMPLATE = {
     "learning.journey.progress_widget"
   ]
 };
+var GENERATED_TEMPLATE_REGISTRY = listExamples().filter((example) => example.meta.key !== "agent-console").map((example) => {
+  const tags = [...example.meta.tags ?? []];
+  const category = tags.some((tag) => tag.toLowerCase() === "ai") || tags.some((tag) => tag.toLowerCase() === "assistant") ? "ai" : "business";
+  return {
+    id: example.meta.key,
+    name: example.meta.title ?? example.meta.key,
+    description: example.meta.description ?? "",
+    category,
+    complexity: "beginner",
+    icon: "\uD83D\uDCE6",
+    features: [],
+    tags,
+    schema: { models: [], contracts: [] },
+    components: { list: "ExampleList", detail: "ExampleDetail" },
+    preview: {
+      demoUrl: `/sandbox?template=${encodeURIComponent(example.meta.key)}`
+    },
+    package: example.entrypoints.packageName,
+    presentations: PRESENTATIONS_BY_TEMPLATE[example.meta.key] ?? [],
+    renderTargets: ["react", "markdown"]
+  };
+});
 var TEMPLATE_REGISTRY = [
   {
     id: "todos-app",
@@ -394,30 +430,42 @@ var TEMPLATE_REGISTRY = [
       quickstart: "/docs/templates/recipe-app-i18n"
     }
   },
-  ...listExamples().map((example) => {
-    const tags = example.meta.keywords ?? [];
-    const category = tags.some((t) => t.toLowerCase() === "ai") || tags.some((t) => t.toLowerCase() === "assistant") ? "ai" : "business";
-    const complexity = "beginner";
-    const icon = "\uD83D\uDCE6";
-    return {
-      id: example.meta.key,
-      name: example.meta.title ?? example.meta.key,
-      description: example.meta.description ?? "",
-      category,
-      complexity,
-      icon,
-      features: [],
-      tags: [...tags],
-      schema: { models: [], contracts: [] },
-      components: { list: "ExampleList", detail: "ExampleDetail" },
-      preview: {
-        demoUrl: `/sandbox?template=${encodeURIComponent(example.meta.key)}`
-      },
-      package: example.entrypoints.packageName,
-      presentations: PRESENTATIONS_BY_TEMPLATE[example.meta.key] ?? [],
-      renderTargets: ["react", "markdown"]
-    };
-  })
+  {
+    id: "agent-console",
+    name: "Agent Console",
+    description: "Deterministic autonomous-agent walkthrough with seeded agents, tool registry, runs, metrics, and replayable proof.",
+    category: "ai",
+    complexity: "intermediate",
+    icon: "\uD83E\uDD16",
+    features: [
+      "Seeded autonomous agents",
+      "Tool registry",
+      "Run execution history",
+      "Metrics",
+      "Markdown and React views"
+    ],
+    tags: ["ai", "agents", "autonomous", "meetup", "sandbox"],
+    schema: {
+      models: ["Agent", "Tool", "Run"],
+      contracts: [
+        "agent-console.agent.list",
+        "agent-console.agent.create",
+        "agent-console.run.execute"
+      ]
+    },
+    components: {
+      list: "AgentListView",
+      detail: "RunListView",
+      form: "CreateAgentModal"
+    },
+    preview: {
+      demoUrl: "/sandbox?template=agent-console"
+    },
+    package: "@contractspec/example.agent-console",
+    presentations: PRESENTATIONS_BY_TEMPLATE["agent-console"] ?? [],
+    renderTargets: ["react", "markdown"]
+  },
+  ...GENERATED_TEMPLATE_REGISTRY
 ];
 function listTemplates(filter) {
   if (!filter)
@@ -597,6 +645,58 @@ function toBase64(bytes) {
   return btoa(binary);
 }
 
+// src/runtime/presentations.ts
+function createComponentPresentation(key, title, description, goal, context, componentKey) {
+  return {
+    meta: {
+      key,
+      version: "1.0.0",
+      title,
+      description,
+      stability: "experimental",
+      goal,
+      context,
+      owners: ["@contractspec/examples"],
+      tags: ["template", "sandbox"]
+    },
+    source: {
+      type: "component",
+      framework: "react",
+      componentKey
+    },
+    targets: ["react", "markdown"]
+  };
+}
+var TEMPLATE_PRESENTATIONS = {
+  "agent-console.dashboard": createComponentPresentation("agent-console.dashboard", "Agent Console Dashboard", "Operational dashboard for the agent console example.", "Review agent activity, throughput, and execution health.", "Sandbox presentation used for markdown previews.", "AgentConsoleDashboard"),
+  "agent-console.agent.list": createComponentPresentation("agent-console.agent.list", "Agent List", "List of seeded agents in the agent console example.", "Browse configured agents and their current capabilities.", "Sandbox presentation used for markdown previews.", "AgentListView"),
+  "agent-console.agent.viewList": createComponentPresentation("agent-console.agent.viewList", "Agent List", "List of seeded agents in the agent console example.", "Browse configured agents and their current capabilities.", "Sandbox presentation used for markdown previews.", "AgentListView"),
+  "agent-console.run.list": createComponentPresentation("agent-console.run.list", "Run List", "Execution history for the agent console example.", "Inspect recent runs and their outcomes.", "Sandbox presentation used for markdown previews.", "RunListView"),
+  "agent-console.tool.list": createComponentPresentation("agent-console.tool.list", "Tool Registry", "Available tools for the agent console example.", "Inspect the tool registry exposed to the seeded agents.", "Sandbox presentation used for markdown previews.", "ToolRegistryView"),
+  "agent-console.tool.registry": createComponentPresentation("agent-console.tool.registry", "Tool Registry", "Available tools for the agent console example.", "Inspect the tool registry exposed to the seeded agents.", "Sandbox presentation used for markdown previews.", "ToolRegistryView"),
+  "analytics-dashboard.dashboard": createComponentPresentation("analytics-dashboard.dashboard", "Analytics Dashboard", "Dashboard view for the analytics example.", "Review saved widgets and query-backed dashboards.", "Sandbox presentation used for markdown previews.", "AnalyticsDashboard"),
+  "analytics-dashboard.list": createComponentPresentation("analytics-dashboard.list", "Dashboard List", "List view for analytics dashboards.", "Browse dashboards available in the analytics example.", "Sandbox presentation used for markdown previews.", "DashboardList"),
+  "analytics-dashboard.query.builder": createComponentPresentation("analytics-dashboard.query.builder", "Query Builder", "Query authoring surface for the analytics example.", "Inspect reusable queries that power dashboards.", "Sandbox presentation used for markdown previews.", "QueryBuilder"),
+  "crm-pipeline.dashboard": createComponentPresentation("crm-pipeline.dashboard", "CRM Dashboard", "Dashboard for the CRM pipeline example.", "Track pipeline health and revenue progress.", "Sandbox presentation used for markdown previews.", "CrmDashboard"),
+  "crm-pipeline.deal.pipeline": createComponentPresentation("crm-pipeline.deal.pipeline", "Pipeline Kanban", "Pipeline board for the CRM pipeline example.", "Review deal flow across pipeline stages.", "Sandbox presentation used for markdown previews.", "PipelineKanbanView"),
+  "integration-hub.connection.list": createComponentPresentation("integration-hub.connection.list", "Connection List", "Connected systems in the integration hub example.", "Review connected systems and connection health.", "Sandbox presentation used for markdown previews.", "ConnectionList"),
+  "integration-hub.dashboard": createComponentPresentation("integration-hub.dashboard", "Integration Dashboard", "Operational dashboard for the integration hub example.", "Monitor integration mix, connection health, and sync issues.", "Sandbox presentation used for markdown previews.", "IntegrationDashboard"),
+  "integration-hub.sync.config": createComponentPresentation("integration-hub.sync.config", "Sync Configuration", "Sync configuration surface for the integration hub example.", "Inspect sync configuration and field mapping defaults.", "Sandbox presentation used for markdown previews.", "SyncConfigEditor"),
+  "marketplace.dashboard": createComponentPresentation("marketplace.dashboard", "Marketplace Dashboard", "Dashboard for the marketplace example.", "Review order flow, category mix, and revenue summaries.", "Sandbox presentation used for markdown previews.", "MarketplaceDashboard"),
+  "marketplace.order.list": createComponentPresentation("marketplace.order.list", "Order List", "Order list for the marketplace example.", "Inspect order activity and fulfillment state.", "Sandbox presentation used for markdown previews.", "OrderList"),
+  "marketplace.product.catalog": createComponentPresentation("marketplace.product.catalog", "Product Catalog", "Product catalog for the marketplace example.", "Browse the available products and merchandising data.", "Sandbox presentation used for markdown previews.", "ProductCatalog"),
+  "saas-boilerplate.billing.settings": createComponentPresentation("saas-boilerplate.billing.settings", "Billing Settings", "Subscription and usage settings for the SaaS example.", "Review billing configuration and current subscription data.", "Sandbox presentation used for markdown previews.", "SubscriptionView"),
+  "saas-boilerplate.dashboard": createComponentPresentation("saas-boilerplate.dashboard", "SaaS Dashboard", "Dashboard for the SaaS boilerplate example.", "Review account, project, and billing summaries.", "Sandbox presentation used for markdown previews.", "SaasDashboard"),
+  "saas-boilerplate.project.list": createComponentPresentation("saas-boilerplate.project.list", "Project List", "Project list for the SaaS boilerplate example.", "Browse projects and their current lifecycle state.", "Sandbox presentation used for markdown previews.", "ProjectListView"),
+  "visualization-showcase.gallery": createComponentPresentation("visualization-showcase.gallery", "Visualization Showcase", "Focused showcase of ContractSpec visualization primitives.", "Review the canonical visualization catalog and design-system wrappers.", "Sandbox presentation used for markdown previews.", "VisualizationShowcase"),
+  "workflow-system.dashboard": createComponentPresentation("workflow-system.dashboard", "Workflow Dashboard", "Dashboard for the workflow system example.", "Review workflow instance health and workload metrics.", "Sandbox presentation used for markdown previews.", "WorkflowDashboard"),
+  "workflow-system.definition.list": createComponentPresentation("workflow-system.definition.list", "Workflow Definition List", "Workflow definitions in the workflow system example.", "Browse available workflow definitions.", "Sandbox presentation used for markdown previews.", "WorkflowDefinitionList"),
+  "workflow-system.instance.detail": createComponentPresentation("workflow-system.instance.detail", "Workflow Instance Detail", "Workflow instance details in the workflow system example.", "Inspect the state and approvals for a workflow instance.", "Sandbox presentation used for markdown previews.", "WorkflowInstanceDetail")
+};
+function resolveTemplatePresentation(presentationName) {
+  return TEMPLATE_PRESENTATIONS[presentationName];
+}
+
 // src/runtime/context.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
@@ -627,7 +727,7 @@ class TemplateHandlers {
 }
 function TemplateRuntimeProvider({
   templateId,
-  projectId = "default-project",
+  projectId = "local-project",
   lazy = false,
   children
 }) {
@@ -652,7 +752,7 @@ function TemplateRuntimeProvider({
         const handlers = new TemplateHandlers;
         handlers.crm = createCrmHandlers(runtime.db);
         handlers.saas = createSaasHandlers(runtime.db);
-        handlers.agent = createAgentHandlers(runtime.db);
+        handlers.agent = createAgentConsoleDemoHandlers({ projectId });
         handlers.workflow = createWorkflowHandlers(runtime.db);
         handlers.marketplace = createMarketplaceHandlers(runtime.db);
         handlers.integration = createIntegrationHandlers(runtime.db);
@@ -749,37 +849,19 @@ function TemplateRuntimeProvider({
             };
           }
           if (presentationName === "agent-console.dashboard") {
-            const [agentsResult, runsResult, toolsResult] = await Promise.all([
-              handlers.agent.listAgents({
-                projectId,
-                organizationId: "demo-org",
-                limit: 10
-              }),
-              handlers.agent.listRuns({ projectId, limit: 10 }),
-              handlers.agent.listTools({
-                projectId,
-                organizationId: "demo-org",
-                limit: 10
-              })
-            ]);
+            const data = await getAgentConsoleDashboardData(handlers.agent, {
+              projectId,
+              organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID
+            });
             return {
-              data: {
-                agents: agentsResult.items,
-                runs: runsResult.items,
-                tools: toolsResult.items,
-                summary: {
-                  totalAgents: agentsResult.total,
-                  totalRuns: runsResult.total,
-                  totalTools: toolsResult.total
-                }
-              },
+              data,
               metadata: { timestamp: new Date, source: "agent-console" }
             };
           }
-          if (presentationName === "agent-console.agent.list") {
+          if (presentationName === "agent-console.agent.viewList" || presentationName === "agent-console.agent.list") {
             const result = await handlers.agent.listAgents({
               projectId,
-              organizationId: "demo-org",
+              organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
               limit: 50
             });
             return {
@@ -805,10 +887,10 @@ function TemplateRuntimeProvider({
               }
             };
           }
-          if (presentationName === "agent-console.tool.registry") {
+          if (presentationName === "agent-console.tool.list" || presentationName === "agent-console.tool.registry") {
             const result = await handlers.agent.listTools({
               projectId,
-              organizationId: "demo-org",
+              organizationId: AGENT_CONSOLE_DEMO_ORGANIZATION_ID,
               limit: 50
             });
             return {
@@ -820,6 +902,15 @@ function TemplateRuntimeProvider({
               }
             };
           }
+          if (presentationName === "visualization-showcase.gallery") {
+            return {
+              data: null,
+              metadata: {
+                timestamp: new Date,
+                source: "visualization-showcase"
+              }
+            };
+          }
           console.warn(`No data fetcher found for presentation: ${presentationName}`);
           return {
             data: null,
@@ -836,7 +927,8 @@ function TemplateRuntimeProvider({
             projectId,
             engine,
             handlers,
-            fetchData
+            fetchData,
+            resolvePresentation: resolveTemplatePresentation
           });
         }
       } catch (err) {

package/dist/runtime/presentations.d.ts

@@ -0,0 +1,2 @@
+import type { PresentationSpec } from '@contractspec/lib.contracts-spec/presentations';
+export declare function resolveTemplatePresentation(presentationName: string): PresentationSpec | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/module.examples",
-  "version": "3.7.7",
+  "version": "3.8.2",
   "description": "Example contract specifications collection",
   "keywords": [
     "contractspec",
@@ -33,63 +33,68 @@
   },
   "dependencies": {
     "@apollo/client": "^4.1.6",
-    "@contractspec/example.agent-console": "3.7.7",
-    "@contractspec/example.ai-chat-assistant": "3.7.7",
-    "@contractspec/example.ai-support-bot": "3.7.7",
-    "@contractspec/example.analytics-dashboard": "3.8.0",
-    "@contractspec/example.calendar-google": "3.7.7",
-    "@contractspec/example.content-generation": "3.7.7",
-    "@contractspec/example.crm-pipeline": "3.7.7",
-    "@contractspec/example.email-gmail": "3.7.7",
-    "@contractspec/example.in-app-docs": "3.7.7",
-    "@contractspec/example.integration-hub": "3.7.7",
-    "@contractspec/example.integration-posthog": "3.7.7",
-    "@contractspec/example.integration-stripe": "3.7.7",
-    "@contractspec/example.integration-supabase": "3.7.7",
-    "@contractspec/example.voice-providers": "3.7.7",
-    "@contractspec/example.kb-update-pipeline": "3.7.7",
-    "@contractspec/example.knowledge-canon": "3.7.7",
-    "@contractspec/example.learning-journey-ambient-coach": "3.7.7",
-    "@contractspec/example.learning-journey-crm-onboarding": "3.7.7",
-    "@contractspec/example.learning-journey-duo-drills": "3.7.7",
-    "@contractspec/example.learning-journey-platform-tour": "3.7.7",
-    "@contractspec/example.learning-journey-quest-challenges": "3.7.7",
-    "@contractspec/example.learning-journey-registry": "3.7.7",
-    "@contractspec/example.learning-journey-studio-onboarding": "3.7.7",
-    "@contractspec/example.learning-journey-ui-coaching": "3.7.7",
-    "@contractspec/example.learning-journey-ui-gamified": "3.7.7",
-    "@contractspec/example.learning-journey-ui-onboarding": "3.7.7",
-    "@contractspec/example.learning-journey-ui-shared": "3.7.7",
-    "@contractspec/example.learning-patterns": "3.7.7",
-    "@contractspec/example.lifecycle-cli": "3.7.7",
-    "@contractspec/example.lifecycle-dashboard": "3.7.7",
-    "@contractspec/example.locale-jurisdiction-gate": "3.7.7",
-    "@contractspec/example.marketplace": "3.7.7",
-    "@contractspec/example.meeting-recorder-providers": "3.7.7",
-    "@contractspec/example.openbanking-powens": "3.7.7",
-    "@contractspec/example.personalization": "3.7.7",
-    "@contractspec/example.pocket-family-office": "3.7.7",
-    "@contractspec/example.policy-safe-knowledge-assistant": "3.7.7",
-    "@contractspec/example.product-intent": "3.7.7",
-    "@contractspec/example.project-management-sync": "3.7.7",
-    "@contractspec/example.saas-boilerplate": "3.7.7",
-    "@contractspec/example.service-business-os": "3.7.7",
-    "@contractspec/example.team-hub": "3.7.7",
-    "@contractspec/example.versioned-knowledge-base": "3.7.7",
-    "@contractspec/example.video-api-showcase": "3.7.7",
-    "@contractspec/example.video-docs-terminal": "3.7.7",
-    "@contractspec/example.video-marketing-clip": "3.7.7",
-    "@contractspec/example.wealth-snapshot": "3.7.7",
-    "@contractspec/example.workflow-system": "3.7.7",
-    "@contractspec/lib.contracts-spec": "4.0.0",
-    "@contractspec/lib.example-shared-ui": "6.0.7",
-    "@contractspec/lib.runtime-sandbox": "2.7.6",
+    "@contractspec/example.agent-console": "3.8.2",
+    "@contractspec/example.ai-chat-assistant": "3.8.2",
+    "@contractspec/example.ai-support-bot": "3.7.10",
+    "@contractspec/example.analytics-dashboard": "3.9.2",
+    "@contractspec/example.calendar-google": "3.7.10",
+    "@contractspec/example.content-generation": "3.7.10",
+    "@contractspec/example.crm-pipeline": "3.7.10",
+    "@contractspec/example.data-grid-showcase": "3.8.2",
+    "@contractspec/example.email-gmail": "3.7.10",
+    "@contractspec/example.in-app-docs": "3.7.10",
+    "@contractspec/example.integration-hub": "3.8.2",
+    "@contractspec/example.integration-posthog": "3.7.10",
+    "@contractspec/example.integration-stripe": "3.7.10",
+    "@contractspec/example.integration-supabase": "3.7.10",
+    "@contractspec/example.voice-providers": "3.7.10",
+    "@contractspec/example.kb-update-pipeline": "3.7.10",
+    "@contractspec/example.knowledge-canon": "3.7.10",
+    "@contractspec/example.learning-journey-ambient-coach": "3.7.10",
+    "@contractspec/example.learning-journey-crm-onboarding": "3.7.10",
+    "@contractspec/example.learning-journey-duo-drills": "3.7.10",
+    "@contractspec/example.learning-journey-platform-tour": "3.7.10",
+    "@contractspec/example.learning-journey-quest-challenges": "3.7.10",
+    "@contractspec/example.learning-journey-registry": "3.7.10",
+    "@contractspec/example.learning-journey-studio-onboarding": "3.7.10",
+    "@contractspec/example.learning-journey-ui-coaching": "3.7.10",
+    "@contractspec/example.learning-journey-ui-gamified": "3.7.10",
+    "@contractspec/example.learning-journey-ui-onboarding": "3.7.10",
+    "@contractspec/example.learning-journey-ui-shared": "3.7.10",
+    "@contractspec/example.learning-patterns": "3.7.10",
+    "@contractspec/example.lifecycle-cli": "3.7.10",
+    "@contractspec/example.lifecycle-dashboard": "3.7.10",
+    "@contractspec/example.locale-jurisdiction-gate": "3.7.10",
+    "@contractspec/example.marketplace": "3.8.2",
+    "@contractspec/example.meeting-recorder-providers": "3.7.10",
+    "@contractspec/example.messaging-agent-actions": "3.8.2",
+    "@contractspec/example.minimal": "2.8.2",
+    "@contractspec/example.openbanking-powens": "3.7.10",
+    "@contractspec/example.opencode-cli": "2.8.2",
+    "@contractspec/example.personalization": "3.7.10",
+    "@contractspec/example.pocket-family-office": "3.7.10",
+    "@contractspec/example.policy-safe-knowledge-assistant": "3.7.10",
+    "@contractspec/example.product-intent": "3.7.10",
+    "@contractspec/example.project-management-sync": "3.7.10",
+    "@contractspec/example.saas-boilerplate": "3.8.2",
+    "@contractspec/example.service-business-os": "3.7.10",
+    "@contractspec/example.team-hub": "3.7.10",
+    "@contractspec/example.versioned-knowledge-base": "3.7.10",
+    "@contractspec/example.video-api-showcase": "3.7.10",
+    "@contractspec/example.video-docs-terminal": "3.7.10",
+    "@contractspec/example.video-marketing-clip": "3.7.10",
+    "@contractspec/example.visualization-showcase": "3.9.2",
+    "@contractspec/example.wealth-snapshot": "3.7.10",
+    "@contractspec/example.workflow-system": "3.8.2",
+    "@contractspec/lib.contracts-spec": "4.1.2",
+    "@contractspec/lib.example-shared-ui": "6.0.10",
+    "@contractspec/lib.runtime-sandbox": "2.7.9",
     "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@contractspec/tool.typescript": "3.7.6",
+    "@contractspec/tool.typescript": "3.7.8",
     "typescript": "^5.9.3",
-    "@contractspec/tool.bun": "3.7.6"
+    "@contractspec/tool.bun": "3.7.8"
   },
   "exports": {
     ".": {