@contractspec/example.integration-hub 3.7.6 → 3.8.2

package/dist/index.js

@@ -496,6 +496,158 @@ var CreateIntegrationContract = defineCommand2({
     ]
   }
 });
+// src/mcp-example.ts
+import { randomUUID } from "crypto";
+import {
+  createMcpToolsets
+} from "@contractspec/lib.ai-agent/tools/mcp-client";
+var DEFAULT_STDIO_ARGS = [
+  "-y",
+  "@modelcontextprotocol/server-filesystem",
+  "."
+];
+async function runIntegrationHubMcpExampleFromEnv() {
+  const mode = resolveMode();
+  const transport = resolveTransport();
+  const config = buildMcpConfigFromEnv();
+  const toolset = await createMcpToolsets([config], {
+    onNameCollision: "error"
+  });
+  try {
+    const toolNames = Object.keys(toolset.tools).sort();
+    const output = {
+      mode,
+      server: {
+        name: config.name,
+        transport
+      },
+      authMethod: process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_AUTH_METHOD,
+      apiVersion: process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_API_VERSION,
+      tools: toolNames
+    };
+    if (mode === "call") {
+      const toolName = requireEnv("CONTRACTSPEC_INTEGRATION_HUB_MCP_TOOL_NAME");
+      const toolArgs = parseRecordEnvOrDefault("CONTRACTSPEC_INTEGRATION_HUB_MCP_TOOL_ARGS_JSON", {});
+      const tool = toolset.tools[toolName];
+      if (!tool?.execute) {
+        throw new Error(`Tool "${toolName}" was not found. Available tools: ${toolNames.join(", ")}`);
+      }
+      const toolOutput = await tool.execute(toolArgs, {
+        toolCallId: `integration-hub-${randomUUID()}`,
+        messages: []
+      });
+      output.toolCall = {
+        name: toolName,
+        args: toolArgs,
+        output: toolOutput
+      };
+    }
+    return output;
+  } finally {
+    await toolset.cleanup().catch(() => {
+      return;
+    });
+  }
+}
+function buildMcpConfigFromEnv() {
+  const name = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_NAME ?? "filesystem";
+  const transport = resolveTransport();
+  const toolPrefix = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_TOOL_PREFIX;
+  if (transport === "stdio") {
+    return {
+      name,
+      transport,
+      command: process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_COMMAND ?? "npx",
+      args: parseStringArrayEnv("CONTRACTSPEC_INTEGRATION_HUB_MCP_ARGS_JSON", DEFAULT_STDIO_ARGS),
+      toolPrefix
+    };
+  }
+  const accessToken = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_ACCESS_TOKEN;
+  const accessTokenEnvVar = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_ACCESS_TOKEN_ENV;
+  const mcpTransport = transport === "webhook" || transport === "http" ? "http" : "sse";
+  return {
+    name,
+    transport: mcpTransport,
+    url: requireEnv("CONTRACTSPEC_INTEGRATION_HUB_MCP_URL"),
+    headers: parseStringRecordEnv("CONTRACTSPEC_INTEGRATION_HUB_MCP_HEADERS_JSON"),
+    accessToken,
+    accessTokenEnvVar,
+    toolPrefix
+  };
+}
+function resolveMode() {
+  const rawMode = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_MODE?.toLowerCase() ?? "list";
+  if (rawMode === "list" || rawMode === "call") {
+    return rawMode;
+  }
+  throw new Error(`Unsupported CONTRACTSPEC_INTEGRATION_HUB_MCP_MODE: ${rawMode}. Use "list" or "call".`);
+}
+function resolveTransport() {
+  const rawTransport = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_TRANSPORT?.toLowerCase() ?? "stdio";
+  if (rawTransport === "stdio" || rawTransport === "http" || rawTransport === "sse" || rawTransport === "webhook") {
+    return rawTransport;
+  }
+  throw new Error(`Unsupported CONTRACTSPEC_INTEGRATION_HUB_MCP_TRANSPORT: ${rawTransport}. Use "stdio", "http", "sse", or "webhook".`);
+}
+function parseStringArrayEnv(key, fallback) {
+  const raw = process.env[key];
+  if (!raw) {
+    return fallback;
+  }
+  const parsed = parseJsonEnv(key);
+  if (!Array.isArray(parsed) || parsed.some((value) => typeof value !== "string")) {
+    throw new Error(`${key} must be a JSON string array.`);
+  }
+  return parsed;
+}
+function parseRecordEnv(key) {
+  const raw = process.env[key];
+  if (!raw) {
+    return;
+  }
+  const parsed = parseJsonEnv(key);
+  if (!isRecord(parsed)) {
+    throw new Error(`${key} must be a JSON object.`);
+  }
+  return parsed;
+}
+function parseRecordEnvOrDefault(key, fallback) {
+  return parseRecordEnv(key) ?? fallback;
+}
+function parseStringRecordEnv(key) {
+  const parsed = parseRecordEnv(key);
+  if (!parsed) {
+    return;
+  }
+  const entries = Object.entries(parsed);
+  const invalidEntry = entries.find(([, value]) => typeof value !== "string");
+  if (invalidEntry) {
+    throw new Error(`${key} must contain only string values.`);
+  }
+  return Object.fromEntries(entries);
+}
+function parseJsonEnv(key) {
+  const raw = process.env[key];
+  if (!raw) {
+    return;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    throw new Error(`${key} contains invalid JSON.`);
+  }
+}
+function requireEnv(key) {
+  const value = process.env[key];
+  if (!value) {
+    throw new Error(`Missing required env var: ${key}`);
+  }
+  return value;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
 // src/sync/sync.enum.ts
 import { defineEnum as defineEnum3 } from "@contractspec/lib.schema";
 var SyncDirectionEnum = defineEnum3("SyncDirection", [
@@ -811,277 +963,189 @@ var ListSyncRunsContract = defineQuery({
     ]
   }
 });
-// src/ui/renderers/integration.markdown.ts
-var mockIntegrations = [
-  {
-    id: "int-1",
-    name: "Salesforce",
-    type: "CRM",
-    status: "ACTIVE",
-    connectionCount: 3
-  },
-  {
-    id: "int-2",
-    name: "HubSpot",
-    type: "MARKETING",
-    status: "ACTIVE",
-    connectionCount: 2
-  },
-  {
-    id: "int-3",
-    name: "Stripe",
-    type: "PAYMENT",
-    status: "ACTIVE",
-    connectionCount: 1
-  },
-  {
-    id: "int-4",
-    name: "Slack",
-    type: "COMMUNICATION",
-    status: "INACTIVE",
-    connectionCount: 0
-  },
-  {
-    id: "int-5",
-    name: "Google Sheets",
-    type: "DATA",
-    status: "ACTIVE",
-    connectionCount: 5
-  },
-  {
-    id: "int-6",
-    name: "PostHog",
-    type: "ANALYTICS",
-    status: "ACTIVE",
-    connectionCount: 1
+// src/sync-engine/index.ts
+class BasicFieldTransformer {
+  transform(value, expression) {
+    try {
+      if (expression.startsWith("uppercase")) {
+        return typeof value === "string" ? value.toUpperCase() : value;
+      }
+      if (expression.startsWith("lowercase")) {
+        return typeof value === "string" ? value.toLowerCase() : value;
+      }
+      if (expression.startsWith("trim")) {
+        return typeof value === "string" ? value.trim() : value;
+      }
+      if (expression.startsWith("default:")) {
+        const defaultVal = expression.replace("default:", "");
+        return value ?? JSON.parse(defaultVal);
+      }
+      if (expression.startsWith("concat:")) {
+        const separator = expression.replace("concat:", "") || " ";
+        if (Array.isArray(value)) {
+          return value.join(separator);
+        }
+        return value;
+      }
+      if (expression.startsWith("split:")) {
+        const separator = expression.replace("split:", "") || ",";
+        if (typeof value === "string") {
+          return value.split(separator);
+        }
+        return value;
+      }
+      if (expression.startsWith("number")) {
+        return Number(value);
+      }
+      if (expression.startsWith("boolean")) {
+        return Boolean(value);
+      }
+      if (expression.startsWith("string")) {
+        return String(value);
+      }
+      return value;
+    } catch {
+      return value;
+    }
   }
-];
-var mockConnections = [
-  {
-    id: "conn-1",
-    integrationId: "int-1",
-    name: "Production Salesforce",
-    status: "CONNECTED",
-    lastSyncAt: "2024-01-16T10:00:00Z"
-  },
-  {
-    id: "conn-2",
-    integrationId: "int-1",
-    name: "Sandbox Salesforce",
-    status: "CONNECTED",
-    lastSyncAt: "2024-01-15T14:00:00Z"
-  },
-  {
-    id: "conn-3",
-    integrationId: "int-2",
-    name: "Marketing HubSpot",
-    status: "CONNECTED",
-    lastSyncAt: "2024-01-16T08:00:00Z"
-  },
-  {
-    id: "conn-4",
-    integrationId: "int-3",
-    name: "Stripe Live",
-    status: "CONNECTED",
-    lastSyncAt: "2024-01-16T12:00:00Z"
-  },
-  {
-    id: "conn-5",
-    integrationId: "int-5",
-    name: "Analytics Sheet",
-    status: "ERROR",
-    lastSyncAt: "2024-01-14T09:00:00Z",
-    error: "Authentication expired"
-  },
-  {
-    id: "conn-6",
-    integrationId: "int-6",
-    name: "PostHog Workspace",
-    status: "CONNECTED",
-    lastSyncAt: "2024-01-16T11:45:00Z"
+}
+
+class BasicSyncEngine {
+  transformer;
+  constructor(transformer) {
+    this.transformer = transformer ?? new BasicFieldTransformer;
   }
-];
-var mockSyncConfigs = [
-  {
-    id: "sync-1",
-    connectionId: "conn-1",
-    name: "Contacts Sync",
-    frequency: "HOURLY",
-    lastRunAt: "2024-01-16T10:00:00Z",
-    status: "SUCCESS",
-    recordsSynced: 1250
-  },
-  {
-    id: "sync-2",
-    connectionId: "conn-1",
-    name: "Opportunities Sync",
-    frequency: "DAILY",
-    lastRunAt: "2024-01-16T00:00:00Z",
-    status: "SUCCESS",
-    recordsSynced: 340
-  },
-  {
-    id: "sync-3",
-    connectionId: "conn-3",
-    name: "Orders Sync",
-    frequency: "REALTIME",
-    lastRunAt: "2024-01-16T12:30:00Z",
-    status: "SUCCESS",
-    recordsSynced: 89
-  },
-  {
-    id: "sync-4",
-    connectionId: "conn-5",
-    name: "Metrics Export",
-    frequency: "DAILY",
-    lastRunAt: "2024-01-14T09:00:00Z",
-    status: "FAILED",
-    recordsSynced: 0
+  async sync(_context) {
+    const result = {
+      success: true,
+      recordsProcessed: 0,
+      recordsCreated: 0,
+      recordsUpdated: 0,
+      recordsDeleted: 0,
+      recordsFailed: 0,
+      recordsSkipped: 0,
+      errors: []
+    };
+    return result;
   }
-];
-var integrationDashboardMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "IntegrationDashboard") {
-      throw new Error("integrationDashboardMarkdownRenderer: not IntegrationDashboard");
-    }
-    const integrations = mockIntegrations;
-    const connections = mockConnections;
-    const syncs = mockSyncConfigs;
-    const activeIntegrations = integrations.filter((i) => i.status === "ACTIVE");
-    const connectedConnections = connections.filter((c) => c.status === "CONNECTED");
-    const errorConnections = connections.filter((c) => c.status === "ERROR");
-    const successfulSyncs = syncs.filter((s) => s.status === "SUCCESS");
-    const totalRecordsSynced = successfulSyncs.reduce((sum, s) => sum + s.recordsSynced, 0);
-    const lines = [
-      "# Integration Hub",
-      "",
-      "> Connect and sync data with external services",
-      "",
-      "## Overview",
-      "",
-      "| Metric | Value |",
-      "|--------|-------|",
-      `| Active Integrations | ${activeIntegrations.length} |`,
-      `| Connected Services | ${connectedConnections.length} |`,
-      `| Error Connections | ${errorConnections.length} |`,
-      `| Sync Configs | ${syncs.length} |`,
-      `| Records Synced (24h) | ${totalRecordsSynced.toLocaleString()} |`,
-      "",
-      "## Integrations",
-      "",
-      "| Name | Type | Connections | Status |",
-      "|------|------|-------------|--------|"
-    ];
-    for (const integration of integrations) {
-      const statusIcon = integration.status === "ACTIVE" ? "\uD83D\uDFE2" : "\u26AB";
-      lines.push(`| ${integration.name} | ${integration.type} | ${integration.connectionCount} | ${statusIcon} ${integration.status} |`);
-    }
-    lines.push("");
-    lines.push("## Recent Sync Activity");
-    lines.push("");
-    lines.push("| Sync | Frequency | Last Run | Records | Status |");
-    lines.push("|------|-----------|----------|---------|--------|");
-    for (const sync of syncs) {
-      const lastRun = new Date(sync.lastRunAt).toLocaleString();
-      const statusIcon = sync.status === "SUCCESS" ? "\u2705" : "\u274C";
-      lines.push(`| ${sync.name} | ${sync.frequency} | ${lastRun} | ${sync.recordsSynced} | ${statusIcon} ${sync.status} |`);
+  transformRecord(sourceRecord, mappings, _context) {
+    const targetData = {};
+    for (const mapping of mappings) {
+      let value;
+      let sourceValue;
+      switch (mapping.mappingType) {
+        case "DIRECT":
+          value = this.getNestedValue(sourceRecord.data, mapping.sourceField);
+          break;
+        case "TRANSFORM":
+          sourceValue = this.getNestedValue(sourceRecord.data, mapping.sourceField);
+          value = mapping.transformExpression ? this.transformer.transform(sourceValue, mapping.transformExpression) : sourceValue;
+          break;
+        case "CONSTANT":
+          value = mapping.constantValue;
+          break;
+        case "LOOKUP":
+          value = this.getNestedValue(sourceRecord.data, mapping.sourceField);
+          break;
+        case "COMPUTED":
+          value = mapping.transformExpression ? this.evaluateComputed(sourceRecord.data, mapping.transformExpression) : null;
+          break;
+        default:
+          value = this.getNestedValue(sourceRecord.data, mapping.sourceField);
+      }
+      if (value === undefined || value === null) {
+        value = mapping.defaultValue;
+      }
+      this.setNestedValue(targetData, mapping.targetField, value);
     }
-    if (errorConnections.length > 0) {
-      lines.push("");
-      lines.push("## \u26A0\uFE0F Connections with Errors");
-      lines.push("");
-      for (const conn of errorConnections) {
-        const integration = integrations.find((i) => i.id === conn.integrationId);
-        lines.push(`- **${conn.name}** (${integration?.name ?? "Unknown"}): ${conn.error ?? "Unknown error"}`);
+    return {
+      id: sourceRecord.id,
+      data: targetData
+    };
+  }
+  validateRecord(record, mappings) {
+    const errors = [];
+    for (const mapping of mappings) {
+      if (mapping.isRequired) {
+        const value = this.getNestedValue(record.data, mapping.targetField);
+        if (value === undefined || value === null) {
+          errors.push({
+            recordId: record.id,
+            field: mapping.targetField,
+            message: `Required field ${mapping.targetField} is missing`,
+            code: "REQUIRED_FIELD_MISSING"
+          });
+        }
       }
     }
     return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
+      valid: errors.length === 0,
+      errors
     };
   }
-};
-var connectionListMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "ConnectionList") {
-      throw new Error("connectionListMarkdownRenderer: not ConnectionList");
+  getNestedValue(obj, path) {
+    const parts = path.split(".");
+    let current = obj;
+    for (const part of parts) {
+      if (current === null || current === undefined) {
+        return;
+      }
+      current = current[part];
     }
-    const connections = mockConnections;
-    const integrations = mockIntegrations;
-    const lines = [
-      "# Connections",
-      "",
-      "> Manage connections to external services",
-      ""
-    ];
-    for (const integration of integrations) {
-      const intConnections = connections.filter((c) => c.integrationId === integration.id);
-      if (intConnections.length === 0)
+    return current;
+  }
+  setNestedValue(obj, path, value) {
+    const parts = path.split(".");
+    let current = obj;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (part === undefined)
         continue;
-      lines.push(`## ${integration.name}`);
-      lines.push("");
-      lines.push("| Connection | Status | Last Sync |");
-      lines.push("|------------|--------|-----------|");
-      for (const conn of intConnections) {
-        const lastSync = new Date(conn.lastSyncAt).toLocaleString();
-        const statusIcon = conn.status === "CONNECTED" ? "\uD83D\uDFE2" : conn.status === "ERROR" ? "\uD83D\uDD34" : "\u26AB";
-        lines.push(`| ${conn.name} | ${statusIcon} ${conn.status} | ${lastSync} |`);
+      if (!(part in current)) {
+        current[part] = {};
       }
-      lines.push("");
+      current = current[part];
+    }
+    const lastPart = parts[parts.length - 1];
+    if (lastPart !== undefined) {
+      current[lastPart] = value;
     }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
   }
-};
-var syncConfigMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "SyncConfigEditor") {
-      throw new Error("syncConfigMarkdownRenderer: not SyncConfigEditor");
+  evaluateComputed(data, expression) {
+    try {
+      const result = expression.replace(/\$\{([^}]+)\}/g, (_, path) => {
+        const value = this.getNestedValue(data, path);
+        return String(value ?? "");
+      });
+      return result;
+    } catch {
+      return null;
     }
-    const syncs = mockSyncConfigs;
-    const connections = mockConnections;
-    const lines = [
-      "# Sync Configurations",
-      "",
-      "> Configure automated data synchronization",
-      ""
-    ];
-    for (const sync of syncs) {
-      const connection = connections.find((c) => c.id === sync.connectionId);
-      const statusIcon = sync.status === "SUCCESS" ? "\u2705" : "\u274C";
-      lines.push(`## ${sync.name}`);
-      lines.push("");
-      lines.push(`**Connection:** ${connection?.name ?? "Unknown"}`);
-      lines.push(`**Frequency:** ${sync.frequency}`);
-      lines.push(`**Status:** ${statusIcon} ${sync.status}`);
-      lines.push(`**Last Run:** ${new Date(sync.lastRunAt).toLocaleString()}`);
-      lines.push(`**Records Synced:** ${sync.recordsSynced.toLocaleString()}`);
-      lines.push("");
-    }
-    lines.push("## Frequency Options");
-    lines.push("");
-    lines.push("- **REALTIME**: Sync on every change");
-    lines.push("- **HOURLY**: Sync every hour");
-    lines.push("- **DAILY**: Sync once per day");
-    lines.push("- **WEEKLY**: Sync once per week");
-    lines.push("- **MANUAL**: Sync only when triggered");
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
   }
-};
+}
+function createSyncEngine(transformer) {
+  return new BasicSyncEngine(transformer);
+}
+function computeChecksum(data) {
+  const str = JSON.stringify(data, Object.keys(data).sort());
+  let hash = 0;
+  for (let i = 0;i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return hash.toString(16);
+}
+function hasChanges(sourceChecksum, targetChecksum) {
+  if (!sourceChecksum || !targetChecksum) {
+    return true;
+  }
+  return sourceChecksum !== targetChecksum;
+}
+
 // src/ui/hooks/useIntegrationData.ts
-import { useCallback, useEffect, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useState } from "react";
 "use client";
 function useIntegrationData(projectId = "local-project") {
   const { handlers } = useTemplateRuntime();
@@ -1131,9 +1195,260 @@ function useIntegrationData(projectId = "local-project") {
   };
 }
 
+// src/ui/hooks/index.ts
+"use client";
+
+// src/visualizations/catalog.ts
+import {
+  defineVisualization,
+  VisualizationRegistry
+} from "@contractspec/lib.contracts-spec/visualizations";
+var INTEGRATION_LIST_REF = {
+  key: "integration.list",
+  version: "1.0.0"
+};
+var CONNECTION_LIST_REF = {
+  key: "integration.connection.list",
+  version: "1.0.0"
+};
+var SYNC_CONFIG_REF = {
+  key: "integration.syncConfig.list",
+  version: "1.0.0"
+};
+var META = {
+  version: "1.0.0",
+  domain: "integration",
+  stability: "experimental",
+  owners: ["@example.integration-hub"],
+  tags: ["integration", "visualization", "sync"]
+};
+var IntegrationTypeVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "integration-hub.visualization.integration-types",
+    title: "Integration Types",
+    description: "Distribution of configured integration categories.",
+    goal: "Show where integration coverage is concentrated.",
+    context: "Integration overview."
+  },
+  source: { primary: INTEGRATION_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "pie",
+    nameDimension: "type",
+    valueMeasure: "count",
+    dimensions: [
+      { key: "type", label: "Type", dataPath: "type", type: "category" }
+    ],
+    measures: [
+      { key: "count", label: "Count", dataPath: "count", format: "number" }
+    ],
+    table: { caption: "Integration counts by type." }
+  }
+});
+var ConnectionStatusVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "integration-hub.visualization.connection-status",
+    title: "Connection Status",
+    description: "Status distribution across configured connections.",
+    goal: "Highlight connection health and instability.",
+    context: "Connection monitoring."
+  },
+  source: { primary: CONNECTION_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "bar",
+    xDimension: "status",
+    yMeasures: ["count"],
+    dimensions: [
+      { key: "status", label: "Status", dataPath: "status", type: "category" }
+    ],
+    measures: [
+      {
+        key: "count",
+        label: "Connections",
+        dataPath: "count",
+        format: "number",
+        color: "#1d4ed8"
+      }
+    ],
+    table: { caption: "Connection counts by status." }
+  }
+});
+var HealthySyncMetricVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "integration-hub.visualization.sync-healthy",
+    title: "Healthy Syncs",
+    description: "Sync configurations currently healthy or recently successful.",
+    goal: "Summarize healthy synchronization capacity.",
+    context: "Sync-state comparison."
+  },
+  source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
+  visualization: {
+    kind: "metric",
+    measure: "value",
+    measures: [
+      { key: "value", label: "Syncs", dataPath: "value", format: "number" }
+    ],
+    table: { caption: "Healthy sync count." }
+  }
+});
+var AttentionSyncMetricVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "integration-hub.visualization.sync-attention",
+    title: "Attention Needed",
+    description: "Sync configurations paused, failing, or otherwise needing review.",
+    goal: "Summarize syncs needing action.",
+    context: "Sync-state comparison."
+  },
+  source: { primary: SYNC_CONFIG_REF, resultPath: "data" },
+  visualization: {
+    kind: "metric",
+    measure: "value",
+    measures: [
+      { key: "value", label: "Syncs", dataPath: "value", format: "number" }
+    ],
+    table: { caption: "Syncs requiring attention." }
+  }
+});
+var IntegrationVisualizationSpecs = [
+  IntegrationTypeVisualization,
+  ConnectionStatusVisualization,
+  HealthySyncMetricVisualization,
+  AttentionSyncMetricVisualization
+];
+var IntegrationVisualizationRegistry = new VisualizationRegistry([
+  ...IntegrationVisualizationSpecs
+]);
+var IntegrationVisualizationRefs = IntegrationVisualizationSpecs.map((spec) => ({
+  key: spec.meta.key,
+  version: spec.meta.version
+}));
+
+// src/visualizations/selectors.ts
+function isHealthySync(status) {
+  return status === "ACTIVE" || status === "SUCCESS";
+}
+function createIntegrationVisualizationSections(integrations, connections, syncConfigs) {
+  const integrationTypes = new Map;
+  const connectionStatuses = new Map;
+  let healthySyncs = 0;
+  let attentionSyncs = 0;
+  for (const integration of integrations) {
+    integrationTypes.set(integration.type, (integrationTypes.get(integration.type) ?? 0) + 1);
+  }
+  for (const connection of connections) {
+    connectionStatuses.set(connection.status, (connectionStatuses.get(connection.status) ?? 0) + 1);
+  }
+  for (const syncConfig of syncConfigs) {
+    if (isHealthySync(syncConfig.status)) {
+      healthySyncs += 1;
+    } else {
+      attentionSyncs += 1;
+    }
+  }
+  const primaryItems = [
+    {
+      key: "integration-types",
+      spec: IntegrationTypeVisualization,
+      data: {
+        data: Array.from(integrationTypes.entries()).map(([type, count]) => ({
+          type,
+          count
+        }))
+      },
+      title: "Integration Types",
+      description: "Configured integrations grouped by category.",
+      height: 260
+    },
+    {
+      key: "connection-status",
+      spec: ConnectionStatusVisualization,
+      data: {
+        data: Array.from(connectionStatuses.entries()).map(([status, count]) => ({
+          status,
+          count
+        }))
+      },
+      title: "Connection Status",
+      description: "Operational health across current connections."
+    }
+  ];
+  const comparisonItems = [
+    {
+      key: "healthy-syncs",
+      spec: HealthySyncMetricVisualization,
+      data: { data: [{ value: healthySyncs }] },
+      title: "Healthy Syncs",
+      description: "Active or recently successful sync configurations.",
+      height: 200
+    },
+    {
+      key: "attention-syncs",
+      spec: AttentionSyncMetricVisualization,
+      data: { data: [{ value: attentionSyncs }] },
+      title: "Attention Needed",
+      description: "Paused, failed, or degraded sync configurations.",
+      height: 200
+    }
+  ];
+  return {
+    primaryItems,
+    comparisonItems
+  };
+}
+// src/ui/IntegrationDashboard.visualizations.tsx
+import {
+  ComparisonView,
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function IntegrationVisualizationOverview({
+  integrations,
+  connections,
+  syncConfigs
+}) {
+  const { primaryItems, comparisonItems } = createIntegrationVisualizationSections(integrations, connections, syncConfigs);
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: "space-y-4",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "font-semibold text-lg",
+            children: "Integration Visualizations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Contract-backed charts for integration coverage and sync health."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VisualizationGrid, {
+        children: primaryItems.map((item) => /* @__PURE__ */ jsxDEV(VisualizationCard, {
+          data: item.data,
+          description: item.description,
+          height: item.height,
+          spec: item.spec,
+          title: item.title
+        }, item.key, false, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(ComparisonView, {
+        description: "Comparison surface for healthy versus attention-needed syncs.",
+        items: comparisonItems,
+        title: "Sync-State Comparison"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/ui/IntegrationHubChat.tsx
 import { ChatWithSidebar } from "@contractspec/module.ai-chat";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 var DEFAULT_SUGGESTIONS = [
   "List my integrations",
@@ -1149,9 +1464,9 @@ function IntegrationHubChat({
   systemPrompt = DEFAULT_SYSTEM_PROMPT,
   className
 }) {
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxDEV2("div", {
     className: className ?? "flex h-[500px] flex-col",
-    children: /* @__PURE__ */ jsxDEV(ChatWithSidebar, {
+    children: /* @__PURE__ */ jsxDEV2(ChatWithSidebar, {
       className: "flex-1",
       systemPrompt,
       proxyUrl,
@@ -1163,16 +1478,373 @@ function IntegrationHubChat({
   }, undefined, false, undefined, this);
 }
 
+// src/ui/tables/integration-table.shared.tsx
+import { Button } from "@contractspec/lib.design-system";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+var STATUS_VARIANTS = {
+  ACTIVE: "default",
+  CONNECTED: "default",
+  SUCCESS: "default",
+  PENDING: "secondary",
+  PAUSED: "secondary",
+  ERROR: "destructive",
+  DISCONNECTED: "outline"
+};
+function formatDateTime(value) {
+  return value ? value.toLocaleString() : "Never";
+}
+function formatJson(value) {
+  return value ? JSON.stringify(value, null, 2) : "No configuration";
+}
+function StatusBadge({ status }) {
+  return /* @__PURE__ */ jsxDEV3(Badge, {
+    variant: STATUS_VARIANTS[status] ?? "outline",
+    children: status
+  }, undefined, false, undefined, this);
+}
+function IntegrationTableToolbar({
+  controller,
+  label,
+  toggleColumnId,
+  toggleVisibleLabel,
+  toggleHiddenLabel,
+  pinColumnId,
+  pinLabel,
+  resizeColumnId,
+  resizeLabel
+}) {
+  const firstRow = controller.rows[0];
+  const toggleColumn = controller.columns.find((column) => column.id === toggleColumnId);
+  const pinColumn = controller.columns.find((column) => column.id === pinColumnId);
+  const resizeColumn = controller.columns.find((column) => column.id === resizeColumnId);
+  const pinTarget = pinColumn?.pinState === "left" ? false : "left";
+  return /* @__PURE__ */ jsxDEV3(HStack, {
+    gap: "sm",
+    className: "flex-wrap",
+    children: [
+      /* @__PURE__ */ jsxDEV3(Badge, {
+        variant: "outline",
+        children: label
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
+        children: "Expand First Row"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => toggleColumn?.toggleVisibility?.(!toggleColumn?.visible),
+        children: toggleColumn?.visible ? toggleVisibleLabel : toggleHiddenLabel
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => pinColumn?.pin?.(pinTarget),
+        children: pinColumn?.pinState === "left" ? `Unpin ${pinLabel}` : `Pin ${pinLabel}`
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => resizeColumn?.resizeBy?.(40),
+        children: resizeLabel
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/tables/ConnectionsTable.tsx
+import { DataTable } from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import { VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function ConnectionsTable({
+  connections
+}) {
+  const controller = useContractTable({
+    data: connections,
+    columns: [
+      {
+        id: "connection",
+        header: "Connection",
+        label: "Connection",
+        accessor: (connection) => connection.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV4(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV4(Text, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4(Text, {
+              className: "text-muted-foreground text-xs",
+              children: [
+                "Created ",
+                item.createdAt.toLocaleDateString()
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 240,
+        minSize: 180,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "status",
+        header: "Status",
+        label: "Status",
+        accessorKey: "status",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV4(StatusBadge, {
+          status: String(value)
+        }, undefined, false, undefined, this),
+        size: 150,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "lastSyncAt",
+        header: "Last Sync",
+        label: "Last Sync",
+        accessor: (connection) => connection.lastSyncAt?.getTime() ?? 0,
+        cell: ({ item }) => formatDateTime(item.lastSyncAt),
+        size: 200,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "errorMessage",
+        header: "Errors",
+        label: "Errors",
+        accessor: (connection) => connection.errorMessage ?? "",
+        cell: ({ value }) => String(value || "No errors"),
+        size: 240,
+        canHide: true,
+        canResize: true
+      }
+    ],
+    initialState: {
+      pagination: { pageIndex: 0, pageSize: 3 },
+      columnVisibility: { errorMessage: false },
+      columnPinning: { left: ["connection"], right: [] }
+    },
+    renderExpandedContent: (connection) => /* @__PURE__ */ jsxDEV4(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV4(Text, {
+          className: "font-medium text-sm",
+          children: "Credentials"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4("pre", {
+          className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+          children: formatJson(connection.credentials)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4(Text, {
+          className: "font-medium text-sm",
+          children: "Config"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4("pre", {
+          className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+          children: formatJson(connection.config)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4(Text, {
+          className: "text-muted-foreground text-sm",
+          children: connection.errorMessage ?? "No sync errors recorded."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV4(DataTable, {
+    controller,
+    title: "Connections",
+    description: "Client-mode ContractSpec table with visibility, pinning, resizing, and expanded diagnostics.",
+    toolbar: /* @__PURE__ */ jsxDEV4(IntegrationTableToolbar, {
+      controller,
+      label: `${connections.length} total connections`,
+      toggleColumnId: "errorMessage",
+      toggleVisibleLabel: "Hide Error Column",
+      toggleHiddenLabel: "Show Error Column",
+      pinColumnId: "status",
+      pinLabel: "Status",
+      resizeColumnId: "connection",
+      resizeLabel: "Widen Connection"
+    }, undefined, false, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV4("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No connections found"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/ui/tables/SyncConfigsTable.tsx
+import { DataTable as DataTable2 } from "@contractspec/lib.design-system";
+import { useContractTable as useContractTable2 } from "@contractspec/lib.presentation-runtime-react";
+import { VStack as VStack2 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text as Text2 } from "@contractspec/lib.ui-kit-web/ui/text";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+"use client";
+function SyncConfigsTable({
+  syncConfigs
+}) {
+  const controller = useContractTable2({
+    data: syncConfigs,
+    columns: [
+      {
+        id: "sync",
+        header: "Sync Config",
+        label: "Sync Config",
+        accessor: (sync) => sync.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV5(VStack2, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV5(Text2, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5(Text2, {
+              className: "text-muted-foreground text-xs",
+              children: [
+                item.sourceEntity,
+                " \u2192 ",
+                item.targetEntity
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 260,
+        minSize: 200,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "frequency",
+        header: "Frequency",
+        label: "Frequency",
+        accessorKey: "frequency",
+        size: 160,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "status",
+        header: "Status",
+        label: "Status",
+        accessorKey: "status",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV5(StatusBadge, {
+          status: String(value)
+        }, undefined, false, undefined, this),
+        size: 150,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "recordsSynced",
+        header: "Records",
+        label: "Records",
+        accessorKey: "recordsSynced",
+        align: "right",
+        size: 140,
+        canSort: true,
+        canResize: true
+      },
+      {
+        id: "lastRunAt",
+        header: "Last Run",
+        label: "Last Run",
+        accessor: (sync) => sync.lastRunAt?.getTime() ?? 0,
+        cell: ({ item }) => formatDateTime(item.lastRunAt),
+        size: 200,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      }
+    ],
+    initialState: {
+      pagination: { pageIndex: 0, pageSize: 3 },
+      columnVisibility: { lastRunAt: false },
+      columnPinning: { left: ["sync"], right: [] }
+    },
+    renderExpandedContent: (sync) => /* @__PURE__ */ jsxDEV5(VStack2, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV5(Text2, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Connection ",
+            sync.connectionId
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV5(Text2, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Last run: ",
+            formatDateTime(sync.lastRunAt)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV5(Text2, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Last status: ",
+            sync.lastRunStatus ?? "No runs recorded"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV5(Text2, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Updated ",
+            sync.updatedAt.toLocaleString()
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV5(DataTable2, {
+    controller,
+    title: "Sync Configs",
+    description: "Shared table primitives applied to sync monitoring without changing the surrounding dashboard layout.",
+    toolbar: /* @__PURE__ */ jsxDEV5(IntegrationTableToolbar, {
+      controller,
+      label: `${syncConfigs.length} syncs`,
+      toggleColumnId: "lastRunAt",
+      toggleVisibleLabel: "Hide Last Run",
+      toggleHiddenLabel: "Show Last Run",
+      pinColumnId: "status",
+      pinLabel: "Status",
+      resizeColumnId: "sync",
+      resizeLabel: "Widen Sync"
+    }, undefined, false, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV5("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No sync configurations found"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
 // src/ui/IntegrationDashboard.tsx
-import { useState as useState2 } from "react";
 import {
-  Button,
+  Button as Button2,
   ErrorState,
   LoaderBlock,
   StatCard,
   StatCardGroup
 } from "@contractspec/lib.design-system";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+import { useState as useState2 } from "react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
 "use client";
 var STATUS_COLORS = {
   ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
@@ -1209,32 +1881,32 @@ function IntegrationDashboard() {
     { id: "chat", label: "Chat", icon: "\uD83D\uDCAC" }
   ];
   if (loading) {
-    return /* @__PURE__ */ jsxDEV2(LoaderBlock, {
+    return /* @__PURE__ */ jsxDEV6(LoaderBlock, {
       label: "Loading Integrations..."
     }, undefined, false, undefined, this);
   }
   if (error) {
-    return /* @__PURE__ */ jsxDEV2(ErrorState, {
+    return /* @__PURE__ */ jsxDEV6(ErrorState, {
       title: "Failed to load Integrations",
       description: error.message,
       onRetry: refetch,
       retryLabel: "Retry"
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV2("div", {
+  return /* @__PURE__ */ jsxDEV6("div", {
     className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxDEV2("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         className: "flex items-center justify-between",
         children: [
-          /* @__PURE__ */ jsxDEV2("h2", {
-            className: "text-2xl font-bold",
+          /* @__PURE__ */ jsxDEV6("h2", {
+            className: "font-bold text-2xl",
             children: "Integration Hub"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(Button, {
+          /* @__PURE__ */ jsxDEV6(Button2, {
             onClick: () => alert("Add integration modal"),
             children: [
-              /* @__PURE__ */ jsxDEV2("span", {
+              /* @__PURE__ */ jsxDEV6("span", {
                 className: "mr-2",
                 children: "+"
               }, undefined, false, undefined, this),
@@ -1243,66 +1915,71 @@ function IntegrationDashboard() {
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2(StatCardGroup, {
+      /* @__PURE__ */ jsxDEV6(StatCardGroup, {
         children: [
-          /* @__PURE__ */ jsxDEV2(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard, {
             label: "Integrations",
             value: stats.totalIntegrations,
             hint: `${stats.activeIntegrations} active`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard, {
             label: "Connections",
             value: stats.totalConnections,
             hint: `${stats.connectedCount} connected`
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV2(StatCard, {
+          /* @__PURE__ */ jsxDEV6(StatCard, {
             label: "Syncs",
             value: stats.totalSyncs,
             hint: `${stats.activeSyncs} active`
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV2("nav", {
-        className: "bg-muted flex gap-1 rounded-lg p-1",
+      /* @__PURE__ */ jsxDEV6(IntegrationVisualizationOverview, {
+        connections,
+        integrations,
+        syncConfigs
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6("nav", {
+        className: "flex gap-1 rounded-lg bg-muted p-1",
         role: "tablist",
-        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV2(Button, {
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV6(Button2, {
           type: "button",
           role: "tab",
           "aria-selected": activeTab === tab.id,
           onClick: () => setActiveTab(tab.id),
-          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+          className: `flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 font-medium text-sm transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
           children: [
-            /* @__PURE__ */ jsxDEV2("span", {
+            /* @__PURE__ */ jsxDEV6("span", {
               children: tab.icon
             }, undefined, false, undefined, this),
             tab.label
           ]
         }, tab.id, true, undefined, this))
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2("div", {
+      /* @__PURE__ */ jsxDEV6("div", {
         className: "min-h-[400px]",
         role: "tabpanel",
         children: [
-          activeTab === "integrations" && /* @__PURE__ */ jsxDEV2("div", {
+          activeTab === "integrations" && /* @__PURE__ */ jsxDEV6("div", {
             className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
             children: [
-              integrations.map((integration) => /* @__PURE__ */ jsxDEV2("div", {
-                className: "border-border bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 transition-colors",
+              integrations.map((integration) => /* @__PURE__ */ jsxDEV6("div", {
+                className: "cursor-pointer rounded-lg border border-border bg-card p-4 transition-colors hover:bg-muted/50",
                 children: [
-                  /* @__PURE__ */ jsxDEV2("div", {
+                  /* @__PURE__ */ jsxDEV6("div", {
                     className: "mb-3 flex items-center gap-3",
                     children: [
-                      /* @__PURE__ */ jsxDEV2("span", {
+                      /* @__PURE__ */ jsxDEV6("span", {
                         className: "text-2xl",
                         children: TYPE_ICONS[integration.type] ?? "\u2699\uFE0F"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("div", {
+                      /* @__PURE__ */ jsxDEV6("div", {
                         children: [
-                          /* @__PURE__ */ jsxDEV2("h3", {
+                          /* @__PURE__ */ jsxDEV6("h3", {
                             className: "font-medium",
                             children: integration.name
                           }, undefined, false, undefined, this),
-                          /* @__PURE__ */ jsxDEV2("p", {
+                          /* @__PURE__ */ jsxDEV6("p", {
                             className: "text-muted-foreground text-sm",
                             children: integration.type
                           }, undefined, false, undefined, this)
@@ -1310,14 +1987,14 @@ function IntegrationDashboard() {
                       }, undefined, true, undefined, this)
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV2("div", {
+                  /* @__PURE__ */ jsxDEV6("div", {
                     className: "flex items-center justify-between",
                     children: [
-                      /* @__PURE__ */ jsxDEV2("span", {
-                        className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[integration.status] ?? ""}`,
+                      /* @__PURE__ */ jsxDEV6("span", {
+                        className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${STATUS_COLORS[integration.status] ?? ""}`,
                         children: integration.status
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("span", {
+                      /* @__PURE__ */ jsxDEV6("span", {
                         className: "text-muted-foreground text-xs",
                         children: integration.createdAt.toLocaleDateString()
                       }, undefined, false, undefined, this)
@@ -1325,75 +2002,16 @@ function IntegrationDashboard() {
                   }, undefined, true, undefined, this)
                 ]
               }, integration.id, true, undefined, this)),
-              integrations.length === 0 && /* @__PURE__ */ jsxDEV2("div", {
-                className: "text-muted-foreground col-span-full flex h-64 items-center justify-center",
+              integrations.length === 0 && /* @__PURE__ */ jsxDEV6("div", {
+                className: "col-span-full flex h-64 items-center justify-center text-muted-foreground",
                 children: "No integrations configured"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          activeTab === "connections" && /* @__PURE__ */ jsxDEV2("div", {
-            className: "border-border rounded-lg border",
-            children: /* @__PURE__ */ jsxDEV2("table", {
-              className: "w-full",
-              children: [
-                /* @__PURE__ */ jsxDEV2("thead", {
-                  className: "border-border bg-muted/30 border-b",
-                  children: /* @__PURE__ */ jsxDEV2("tr", {
-                    children: [
-                      /* @__PURE__ */ jsxDEV2("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
-                        children: "Connection"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
-                        children: "Status"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
-                        children: "Last Sync"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("tbody", {
-                  className: "divide-border divide-y",
-                  children: [
-                    connections.map((conn) => /* @__PURE__ */ jsxDEV2("tr", {
-                      className: "hover:bg-muted/50",
-                      children: [
-                        /* @__PURE__ */ jsxDEV2("td", {
-                          className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV2("div", {
-                            className: "font-medium",
-                            children: conn.name
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("td", {
-                          className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV2("span", {
-                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[conn.status] ?? ""}`,
-                            children: conn.status
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("td", {
-                          className: "text-muted-foreground px-4 py-3 text-sm",
-                          children: conn.lastSyncAt?.toLocaleString() ?? "Never"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, conn.id, true, undefined, this)),
-                    connections.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
-                      children: /* @__PURE__ */ jsxDEV2("td", {
-                        colSpan: 3,
-                        className: "text-muted-foreground px-4 py-8 text-center",
-                        children: "No connections found"
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
+          activeTab === "connections" && /* @__PURE__ */ jsxDEV6(ConnectionsTable, {
+            connections
           }, undefined, false, undefined, this),
-          activeTab === "chat" && /* @__PURE__ */ jsxDEV2(IntegrationHubChat, {
+          activeTab === "chat" && /* @__PURE__ */ jsxDEV6(IntegrationHubChat, {
             proxyUrl: "/api/chat",
             thinkingLevel: "thinking",
             suggestions: [
@@ -1403,85 +2021,8 @@ function IntegrationDashboard() {
             ],
             className: "min-h-[400px]"
           }, undefined, false, undefined, this),
-          activeTab === "syncs" && /* @__PURE__ */ jsxDEV2("div", {
-            className: "border-border rounded-lg border",
-            children: /* @__PURE__ */ jsxDEV2("table", {
-              className: "w-full",
-              children: [
-                /* @__PURE__ */ jsxDEV2("thead", {
-                  className: "border-border bg-muted/30 border-b",
-                  children: /* @__PURE__ */ jsxDEV2("tr", {
-                    children: [
-                      /* @__PURE__ */ jsxDEV2("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
-                        children: "Sync Config"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
-                        children: "Frequency"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
-                        children: "Status"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV2("th", {
-                        className: "px-4 py-3 text-left text-sm font-medium",
-                        children: "Records"
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("tbody", {
-                  className: "divide-border divide-y",
-                  children: [
-                    syncConfigs.map((sync) => /* @__PURE__ */ jsxDEV2("tr", {
-                      className: "hover:bg-muted/50",
-                      children: [
-                        /* @__PURE__ */ jsxDEV2("td", {
-                          className: "px-4 py-3",
-                          children: [
-                            /* @__PURE__ */ jsxDEV2("div", {
-                              className: "font-medium",
-                              children: sync.name
-                            }, undefined, false, undefined, this),
-                            /* @__PURE__ */ jsxDEV2("div", {
-                              className: "text-muted-foreground text-sm",
-                              children: [
-                                sync.sourceEntity,
-                                " \u2192 ",
-                                sync.targetEntity
-                              ]
-                            }, undefined, true, undefined, this)
-                          ]
-                        }, undefined, true, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("td", {
-                          className: "px-4 py-3 text-sm",
-                          children: sync.frequency
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("td", {
-                          className: "px-4 py-3",
-                          children: /* @__PURE__ */ jsxDEV2("span", {
-                            className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[sync.status] ?? ""}`,
-                            children: sync.status
-                          }, undefined, false, undefined, this)
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV2("td", {
-                          className: "text-muted-foreground px-4 py-3 text-sm",
-                          children: sync.recordsSynced.toLocaleString()
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, sync.id, true, undefined, this)),
-                    syncConfigs.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
-                      children: /* @__PURE__ */ jsxDEV2("td", {
-                        colSpan: 4,
-                        className: "text-muted-foreground px-4 py-8 text-center",
-                        children: "No sync configurations found"
-                      }, undefined, false, undefined, this)
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              ]
-            }, undefined, true, undefined, this)
+          activeTab === "syncs" && /* @__PURE__ */ jsxDEV6(SyncConfigsTable, {
+            syncConfigs
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this)
@@ -1489,339 +2030,284 @@ function IntegrationDashboard() {
   }, undefined, true, undefined, this);
 }
 
-// src/ui/hooks/index.ts
-"use client";
-// src/sync-engine/index.ts
-class BasicFieldTransformer {
-  transform(value, expression) {
-    try {
-      if (expression.startsWith("uppercase")) {
-        return typeof value === "string" ? value.toUpperCase() : value;
-      }
-      if (expression.startsWith("lowercase")) {
-        return typeof value === "string" ? value.toLowerCase() : value;
-      }
-      if (expression.startsWith("trim")) {
-        return typeof value === "string" ? value.trim() : value;
-      }
-      if (expression.startsWith("default:")) {
-        const defaultVal = expression.replace("default:", "");
-        return value ?? JSON.parse(defaultVal);
-      }
-      if (expression.startsWith("concat:")) {
-        const separator = expression.replace("concat:", "") || " ";
-        if (Array.isArray(value)) {
-          return value.join(separator);
-        }
-        return value;
-      }
-      if (expression.startsWith("split:")) {
-        const separator = expression.replace("split:", "") || ",";
-        if (typeof value === "string") {
-          return value.split(separator);
-        }
-        return value;
-      }
-      if (expression.startsWith("number")) {
-        return Number(value);
-      }
-      if (expression.startsWith("boolean")) {
-        return Boolean(value);
-      }
-      if (expression.startsWith("string")) {
-        return String(value);
-      }
-      return value;
-    } catch {
-      return value;
-    }
+// src/ui/renderers/integration.markdown.ts
+var mockIntegrations = [
+  {
+    id: "int-1",
+    name: "Salesforce",
+    type: "CRM",
+    status: "ACTIVE",
+    connectionCount: 3
+  },
+  {
+    id: "int-2",
+    name: "HubSpot",
+    type: "MARKETING",
+    status: "ACTIVE",
+    connectionCount: 2
+  },
+  {
+    id: "int-3",
+    name: "Stripe",
+    type: "PAYMENT",
+    status: "ACTIVE",
+    connectionCount: 1
+  },
+  {
+    id: "int-4",
+    name: "Slack",
+    type: "COMMUNICATION",
+    status: "INACTIVE",
+    connectionCount: 0
+  },
+  {
+    id: "int-5",
+    name: "Google Sheets",
+    type: "DATA",
+    status: "ACTIVE",
+    connectionCount: 5
+  },
+  {
+    id: "int-6",
+    name: "PostHog",
+    type: "ANALYTICS",
+    status: "ACTIVE",
+    connectionCount: 1
   }
-}
-
-class BasicSyncEngine {
-  transformer;
-  constructor(transformer) {
-    this.transformer = transformer ?? new BasicFieldTransformer;
+];
+var mockConnections = [
+  {
+    id: "conn-1",
+    integrationId: "int-1",
+    name: "Production Salesforce",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-16T10:00:00Z"
+  },
+  {
+    id: "conn-2",
+    integrationId: "int-1",
+    name: "Sandbox Salesforce",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-15T14:00:00Z"
+  },
+  {
+    id: "conn-3",
+    integrationId: "int-2",
+    name: "Marketing HubSpot",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-16T08:00:00Z"
+  },
+  {
+    id: "conn-4",
+    integrationId: "int-3",
+    name: "Stripe Live",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-16T12:00:00Z"
+  },
+  {
+    id: "conn-5",
+    integrationId: "int-5",
+    name: "Analytics Sheet",
+    status: "ERROR",
+    lastSyncAt: "2024-01-14T09:00:00Z",
+    error: "Authentication expired"
+  },
+  {
+    id: "conn-6",
+    integrationId: "int-6",
+    name: "PostHog Workspace",
+    status: "CONNECTED",
+    lastSyncAt: "2024-01-16T11:45:00Z"
   }
-  async sync(_context) {
-    const result = {
-      success: true,
-      recordsProcessed: 0,
-      recordsCreated: 0,
-      recordsUpdated: 0,
-      recordsDeleted: 0,
-      recordsFailed: 0,
-      recordsSkipped: 0,
-      errors: []
-    };
-    return result;
+];
+var mockSyncConfigs = [
+  {
+    id: "sync-1",
+    connectionId: "conn-1",
+    name: "Contacts Sync",
+    frequency: "HOURLY",
+    lastRunAt: "2024-01-16T10:00:00Z",
+    status: "SUCCESS",
+    recordsSynced: 1250
+  },
+  {
+    id: "sync-2",
+    connectionId: "conn-1",
+    name: "Opportunities Sync",
+    frequency: "DAILY",
+    lastRunAt: "2024-01-16T00:00:00Z",
+    status: "SUCCESS",
+    recordsSynced: 340
+  },
+  {
+    id: "sync-3",
+    connectionId: "conn-3",
+    name: "Orders Sync",
+    frequency: "REALTIME",
+    lastRunAt: "2024-01-16T12:30:00Z",
+    status: "SUCCESS",
+    recordsSynced: 89
+  },
+  {
+    id: "sync-4",
+    connectionId: "conn-5",
+    name: "Metrics Export",
+    frequency: "DAILY",
+    lastRunAt: "2024-01-14T09:00:00Z",
+    status: "FAILED",
+    recordsSynced: 0
   }
-  transformRecord(sourceRecord, mappings, _context) {
-    const targetData = {};
-    for (const mapping of mappings) {
-      let value;
-      let sourceValue;
-      switch (mapping.mappingType) {
-        case "DIRECT":
-          value = this.getNestedValue(sourceRecord.data, mapping.sourceField);
-          break;
-        case "TRANSFORM":
-          sourceValue = this.getNestedValue(sourceRecord.data, mapping.sourceField);
-          value = mapping.transformExpression ? this.transformer.transform(sourceValue, mapping.transformExpression) : sourceValue;
-          break;
-        case "CONSTANT":
-          value = mapping.constantValue;
-          break;
-        case "LOOKUP":
-          value = this.getNestedValue(sourceRecord.data, mapping.sourceField);
-          break;
-        case "COMPUTED":
-          value = mapping.transformExpression ? this.evaluateComputed(sourceRecord.data, mapping.transformExpression) : null;
-          break;
-        default:
-          value = this.getNestedValue(sourceRecord.data, mapping.sourceField);
-      }
-      if (value === undefined || value === null) {
-        value = mapping.defaultValue;
-      }
-      this.setNestedValue(targetData, mapping.targetField, value);
+];
+var integrationDashboardMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "IntegrationDashboard") {
+      throw new Error("integrationDashboardMarkdownRenderer: not IntegrationDashboard");
     }
-    return {
-      id: sourceRecord.id,
-      data: targetData
-    };
-  }
-  validateRecord(record, mappings) {
-    const errors = [];
-    for (const mapping of mappings) {
-      if (mapping.isRequired) {
-        const value = this.getNestedValue(record.data, mapping.targetField);
-        if (value === undefined || value === null) {
-          errors.push({
-            recordId: record.id,
-            field: mapping.targetField,
-            message: `Required field ${mapping.targetField} is missing`,
-            code: "REQUIRED_FIELD_MISSING"
-          });
-        }
-      }
+    const integrations = mockIntegrations;
+    const connections = mockConnections;
+    const syncs = mockSyncConfigs;
+    const visualizations = createIntegrationVisualizationSections(integrations, connections, syncs);
+    const activeIntegrations = integrations.filter((i) => i.status === "ACTIVE");
+    const connectedConnections = connections.filter((c) => c.status === "CONNECTED");
+    const errorConnections = connections.filter((c) => c.status === "ERROR");
+    const successfulSyncs = syncs.filter((s) => s.status === "SUCCESS");
+    const totalRecordsSynced = successfulSyncs.reduce((sum, s) => sum + s.recordsSynced, 0);
+    const lines = [
+      "# Integration Hub",
+      "",
+      "> Connect and sync data with external services",
+      "",
+      "## Overview",
+      "",
+      "| Metric | Value |",
+      "|--------|-------|",
+      `| Active Integrations | ${activeIntegrations.length} |`,
+      `| Connected Services | ${connectedConnections.length} |`,
+      `| Error Connections | ${errorConnections.length} |`,
+      `| Sync Configs | ${syncs.length} |`,
+      `| Records Synced (24h) | ${totalRecordsSynced.toLocaleString()} |`,
+      ""
+    ];
+    lines.push("## Visualization Overview");
+    lines.push("");
+    for (const item of [
+      ...visualizations.primaryItems,
+      ...visualizations.comparisonItems
+    ]) {
+      lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
     }
-    return {
-      valid: errors.length === 0,
-      errors
-    };
-  }
-  getNestedValue(obj, path) {
-    const parts = path.split(".");
-    let current = obj;
-    for (const part of parts) {
-      if (current === null || current === undefined) {
-        return;
-      }
-      current = current[part];
+    lines.push("");
+    lines.push("## Integrations");
+    lines.push("");
+    lines.push("| Name | Type | Connections | Status |");
+    lines.push("|------|------|-------------|--------|");
+    for (const integration of integrations) {
+      const statusIcon = integration.status === "ACTIVE" ? "\uD83D\uDFE2" : "\u26AB";
+      lines.push(`| ${integration.name} | ${integration.type} | ${integration.connectionCount} | ${statusIcon} ${integration.status} |`);
     }
-    return current;
-  }
-  setNestedValue(obj, path, value) {
-    const parts = path.split(".");
-    let current = obj;
-    for (let i = 0;i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (part === undefined)
-        continue;
-      if (!(part in current)) {
-        current[part] = {};
+    lines.push("");
+    lines.push("## Recent Sync Activity");
+    lines.push("");
+    lines.push("| Sync | Frequency | Last Run | Records | Status |");
+    lines.push("|------|-----------|----------|---------|--------|");
+    for (const sync of syncs) {
+      const lastRun = new Date(sync.lastRunAt).toLocaleString();
+      const statusIcon = sync.status === "SUCCESS" ? "\u2705" : "\u274C";
+      lines.push(`| ${sync.name} | ${sync.frequency} | ${lastRun} | ${sync.recordsSynced} | ${statusIcon} ${sync.status} |`);
+    }
+    if (errorConnections.length > 0) {
+      lines.push("");
+      lines.push("## \u26A0\uFE0F Connections with Errors");
+      lines.push("");
+      for (const conn of errorConnections) {
+        const integration = integrations.find((i) => i.id === conn.integrationId);
+        lines.push(`- **${conn.name}** (${integration?.name ?? "Unknown"}): ${conn.error ?? "Unknown error"}`);
       }
-      current = current[part];
-    }
-    const lastPart = parts[parts.length - 1];
-    if (lastPart !== undefined) {
-      current[lastPart] = value;
     }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
   }
-  evaluateComputed(data, expression) {
-    try {
-      const result = expression.replace(/\$\{([^}]+)\}/g, (_, path) => {
-        const value = this.getNestedValue(data, path);
-        return String(value ?? "");
-      });
-      return result;
-    } catch {
-      return null;
+};
+var connectionListMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "ConnectionList") {
+      throw new Error("connectionListMarkdownRenderer: not ConnectionList");
     }
-  }
-}
-function createSyncEngine(transformer) {
-  return new BasicSyncEngine(transformer);
-}
-function computeChecksum(data) {
-  const str = JSON.stringify(data, Object.keys(data).sort());
-  let hash = 0;
-  for (let i = 0;i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-    hash = hash & hash;
-  }
-  return hash.toString(16);
-}
-function hasChanges(sourceChecksum, targetChecksum) {
-  if (!sourceChecksum || !targetChecksum) {
-    return true;
-  }
-  return sourceChecksum !== targetChecksum;
-}
-
-// src/mcp-example.ts
-import { randomUUID } from "crypto";
-import {
-  createMcpToolsets
-} from "@contractspec/lib.ai-agent/tools/mcp-client";
-var DEFAULT_STDIO_ARGS = [
-  "-y",
-  "@modelcontextprotocol/server-filesystem",
-  "."
-];
-async function runIntegrationHubMcpExampleFromEnv() {
-  const mode = resolveMode();
-  const transport = resolveTransport();
-  const config = buildMcpConfigFromEnv();
-  const toolset = await createMcpToolsets([config], {
-    onNameCollision: "error"
-  });
-  try {
-    const toolNames = Object.keys(toolset.tools).sort();
-    const output = {
-      mode,
-      server: {
-        name: config.name,
-        transport
-      },
-      authMethod: process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_AUTH_METHOD,
-      apiVersion: process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_API_VERSION,
-      tools: toolNames
-    };
-    if (mode === "call") {
-      const toolName = requireEnv("CONTRACTSPEC_INTEGRATION_HUB_MCP_TOOL_NAME");
-      const toolArgs = parseRecordEnvOrDefault("CONTRACTSPEC_INTEGRATION_HUB_MCP_TOOL_ARGS_JSON", {});
-      const tool = toolset.tools[toolName];
-      if (!tool?.execute) {
-        throw new Error(`Tool "${toolName}" was not found. Available tools: ${toolNames.join(", ")}`);
+    const connections = mockConnections;
+    const integrations = mockIntegrations;
+    const lines = [
+      "# Connections",
+      "",
+      "> Manage connections to external services",
+      ""
+    ];
+    for (const integration of integrations) {
+      const intConnections = connections.filter((c) => c.integrationId === integration.id);
+      if (intConnections.length === 0)
+        continue;
+      lines.push(`## ${integration.name}`);
+      lines.push("");
+      lines.push("| Connection | Status | Last Sync |");
+      lines.push("|------------|--------|-----------|");
+      for (const conn of intConnections) {
+        const lastSync = new Date(conn.lastSyncAt).toLocaleString();
+        const statusIcon = conn.status === "CONNECTED" ? "\uD83D\uDFE2" : conn.status === "ERROR" ? "\uD83D\uDD34" : "\u26AB";
+        lines.push(`| ${conn.name} | ${statusIcon} ${conn.status} | ${lastSync} |`);
       }
-      const toolOutput = await tool.execute(toolArgs, {
-        toolCallId: `integration-hub-${randomUUID()}`,
-        messages: []
-      });
-      output.toolCall = {
-        name: toolName,
-        args: toolArgs,
-        output: toolOutput
-      };
+      lines.push("");
     }
-    return output;
-  } finally {
-    await toolset.cleanup().catch(() => {
-      return;
-    });
-  }
-}
-function buildMcpConfigFromEnv() {
-  const name = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_NAME ?? "filesystem";
-  const transport = resolveTransport();
-  const toolPrefix = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_TOOL_PREFIX;
-  if (transport === "stdio") {
     return {
-      name,
-      transport,
-      command: process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_COMMAND ?? "npx",
-      args: parseStringArrayEnv("CONTRACTSPEC_INTEGRATION_HUB_MCP_ARGS_JSON", DEFAULT_STDIO_ARGS),
-      toolPrefix
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
     };
   }
-  const accessToken = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_ACCESS_TOKEN;
-  const accessTokenEnvVar = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_ACCESS_TOKEN_ENV;
-  const mcpTransport = transport === "webhook" || transport === "http" ? "http" : "sse";
-  return {
-    name,
-    transport: mcpTransport,
-    url: requireEnv("CONTRACTSPEC_INTEGRATION_HUB_MCP_URL"),
-    headers: parseStringRecordEnv("CONTRACTSPEC_INTEGRATION_HUB_MCP_HEADERS_JSON"),
-    accessToken,
-    accessTokenEnvVar,
-    toolPrefix
-  };
-}
-function resolveMode() {
-  const rawMode = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_MODE?.toLowerCase() ?? "list";
-  if (rawMode === "list" || rawMode === "call") {
-    return rawMode;
-  }
-  throw new Error(`Unsupported CONTRACTSPEC_INTEGRATION_HUB_MCP_MODE: ${rawMode}. Use "list" or "call".`);
-}
-function resolveTransport() {
-  const rawTransport = process.env.CONTRACTSPEC_INTEGRATION_HUB_MCP_TRANSPORT?.toLowerCase() ?? "stdio";
-  if (rawTransport === "stdio" || rawTransport === "http" || rawTransport === "sse" || rawTransport === "webhook") {
-    return rawTransport;
-  }
-  throw new Error(`Unsupported CONTRACTSPEC_INTEGRATION_HUB_MCP_TRANSPORT: ${rawTransport}. Use "stdio", "http", "sse", or "webhook".`);
-}
-function parseStringArrayEnv(key, fallback) {
-  const raw = process.env[key];
-  if (!raw) {
-    return fallback;
-  }
-  const parsed = parseJsonEnv(key);
-  if (!Array.isArray(parsed) || parsed.some((value) => typeof value !== "string")) {
-    throw new Error(`${key} must be a JSON string array.`);
-  }
-  return parsed;
-}
-function parseRecordEnv(key) {
-  const raw = process.env[key];
-  if (!raw) {
-    return;
-  }
-  const parsed = parseJsonEnv(key);
-  if (!isRecord(parsed)) {
-    throw new Error(`${key} must be a JSON object.`);
-  }
-  return parsed;
-}
-function parseRecordEnvOrDefault(key, fallback) {
-  return parseRecordEnv(key) ?? fallback;
-}
-function parseStringRecordEnv(key) {
-  const parsed = parseRecordEnv(key);
-  if (!parsed) {
-    return;
-  }
-  const entries = Object.entries(parsed);
-  const invalidEntry = entries.find(([, value]) => typeof value !== "string");
-  if (invalidEntry) {
-    throw new Error(`${key} must contain only string values.`);
-  }
-  return Object.fromEntries(entries);
-}
-function parseJsonEnv(key) {
-  const raw = process.env[key];
-  if (!raw) {
-    return;
-  }
-  try {
-    return JSON.parse(raw);
-  } catch {
-    throw new Error(`${key} contains invalid JSON.`);
-  }
-}
-function requireEnv(key) {
-  const value = process.env[key];
-  if (!value) {
-    throw new Error(`Missing required env var: ${key}`);
+};
+var syncConfigMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "SyncConfigEditor") {
+      throw new Error("syncConfigMarkdownRenderer: not SyncConfigEditor");
+    }
+    const syncs = mockSyncConfigs;
+    const connections = mockConnections;
+    const lines = [
+      "# Sync Configurations",
+      "",
+      "> Configure automated data synchronization",
+      ""
+    ];
+    for (const sync of syncs) {
+      const connection = connections.find((c) => c.id === sync.connectionId);
+      const statusIcon = sync.status === "SUCCESS" ? "\u2705" : "\u274C";
+      lines.push(`## ${sync.name}`);
+      lines.push("");
+      lines.push(`**Connection:** ${connection?.name ?? "Unknown"}`);
+      lines.push(`**Frequency:** ${sync.frequency}`);
+      lines.push(`**Status:** ${statusIcon} ${sync.status}`);
+      lines.push(`**Last Run:** ${new Date(sync.lastRunAt).toLocaleString()}`);
+      lines.push(`**Records Synced:** ${sync.recordsSynced.toLocaleString()}`);
+      lines.push("");
+    }
+    lines.push("## Frequency Options");
+    lines.push("");
+    lines.push("- **REALTIME**: Sync on every change");
+    lines.push("- **HOURLY**: Sync every hour");
+    lines.push("- **DAILY**: Sync once per day");
+    lines.push("- **WEEKLY**: Sync once per week");
+    lines.push("- **MANUAL**: Sync only when triggered");
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
   }
-  return value;
-}
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
+};
 export {
   useIntegrationData,
   syncConfigMarkdownRenderer,
@@ -1829,6 +2315,7 @@ export {
   integrationDashboardMarkdownRenderer,
   hasChanges,
   createSyncEngine,
+  createIntegrationVisualizationSections,
   createIntegrationHandlers,
   connectionListMarkdownRenderer,
   computeChecksum,
@@ -1842,10 +2329,15 @@ export {
   ListSyncRunsOutputModel,
   ListSyncRunsInputModel,
   ListSyncRunsContract,
+  IntegrationVisualizationSpecs,
+  IntegrationVisualizationRegistry,
+  IntegrationVisualizationRefs,
+  IntegrationTypeVisualization,
   IntegrationStatusEnum,
   IntegrationModel,
   IntegrationHubChat,
   IntegrationDashboard,
+  HealthySyncMetricVisualization,
   FieldMappingModel,
   CreateSyncConfigInputModel,
   CreateSyncConfigContract,
@@ -1853,10 +2345,12 @@ export {
   CreateIntegrationContract,
   CreateConnectionInputModel,
   CreateConnectionContract,
+  ConnectionStatusVisualization,
   ConnectionStatusEnum,
   ConnectionModel,
   BasicSyncEngine,
   BasicFieldTransformer,
+  AttentionSyncMetricVisualization,
   AddFieldMappingInputModel,
   AddFieldMappingContract
 };