@contractspec/example.integration-hub 3.8.8 → 3.8.10

package/dist/ui/index.js

@@ -1,1174 +1,5 @@
 // @bun
-// src/ui/hooks/useIntegrationData.ts
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-import { useCallback, useEffect, useState } from "react";
-"use client";
-function useIntegrationData(projectId = "local-project") {
-  const { handlers } = useTemplateRuntime();
-  const integration = handlers.integration;
-  const [integrations, setIntegrations] = useState([]);
-  const [connections, setConnections] = useState([]);
-  const [syncConfigs, setSyncConfigs] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const fetchData = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const [integResult, connResult, syncResult] = await Promise.all([
-        integration.listIntegrations({ projectId, limit: 100 }),
-        integration.listConnections({ limit: 100 }),
-        integration.listSyncConfigs({ limit: 100 })
-      ]);
-      setIntegrations(integResult.integrations);
-      setConnections(connResult.connections);
-      setSyncConfigs(syncResult.configs);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error("Failed to load integrations"));
-    } finally {
-      setLoading(false);
-    }
-  }, [integration, projectId]);
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-  const stats = {
-    totalIntegrations: integrations.length,
-    activeIntegrations: integrations.filter((i) => i.status === "ACTIVE").length,
-    totalConnections: connections.length,
-    connectedCount: connections.filter((c) => c.status === "CONNECTED").length,
-    totalSyncs: syncConfigs.length,
-    activeSyncs: syncConfigs.filter((s) => s.status === "ACTIVE").length
-  };
-  return {
-    integrations,
-    connections,
-    syncConfigs,
-    loading,
-    error,
-    stats,
-    refetch: fetchData
-  };
-}
-
-// 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 as jsxDEV2 } from "react/jsx-dev-runtime";
-"use client";
-var DEFAULT_SUGGESTIONS = [
-  "List my integrations",
-  "Show sync status",
-  "Add a connection"
-];
-var DEFAULT_SYSTEM_PROMPT = `You are an Integration Hub assistant. Help users manage integrations, connections, and sync configurations. When asked about integrations, connections, or syncs, provide clear, actionable guidance.`;
-function IntegrationHubChat({
-  proxyUrl = "/api/chat",
-  mcpServers,
-  thinkingLevel = "thinking",
-  suggestions = DEFAULT_SUGGESTIONS,
-  systemPrompt = DEFAULT_SYSTEM_PROMPT,
-  className
-}) {
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: className ?? "flex h-[500px] flex-col",
-    children: /* @__PURE__ */ jsxDEV2(ChatWithSidebar, {
-      className: "flex-1",
-      systemPrompt,
-      proxyUrl,
-      mcpServers,
-      thinkingLevel,
-      suggestions,
-      showSuggestionsWhenEmpty: true
-    }, undefined, false, undefined, this)
-  }, 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 {
-  Button as Button2,
-  ErrorState,
-  LoaderBlock,
-  StatCard,
-  StatCardGroup
-} from "@contractspec/lib.design-system";
-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",
-  INACTIVE: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
-  CONNECTED: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-  DISCONNECTED: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",
-  PENDING: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
-  ERROR: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
-  PAUSED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
-};
-var TYPE_ICONS = {
-  CRM: "\uD83D\uDCCA",
-  MARKETING: "\uD83D\uDCE3",
-  PAYMENT: "\uD83D\uDCB3",
-  COMMUNICATION: "\uD83D\uDCAC",
-  DATA: "\uD83D\uDDC4\uFE0F",
-  CUSTOM: "\u2699\uFE0F"
-};
-function IntegrationDashboard() {
-  const [activeTab, setActiveTab] = useState2("integrations");
-  const {
-    integrations,
-    connections,
-    syncConfigs,
-    loading,
-    error,
-    stats,
-    refetch
-  } = useIntegrationData();
-  const tabs = [
-    { id: "integrations", label: "Integrations", icon: "\uD83D\uDD0C" },
-    { id: "connections", label: "Connections", icon: "\uD83D\uDD17" },
-    { id: "syncs", label: "Sync Configs", icon: "\uD83D\uDD04" },
-    { id: "chat", label: "Chat", icon: "\uD83D\uDCAC" }
-  ];
-  if (loading) {
-    return /* @__PURE__ */ jsxDEV6(LoaderBlock, {
-      label: "Loading Integrations..."
-    }, undefined, false, undefined, this);
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxDEV6(ErrorState, {
-      title: "Failed to load Integrations",
-      description: error.message,
-      onRetry: refetch,
-      retryLabel: "Retry"
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV6("div", {
-    className: "space-y-6",
-    children: [
-      /* @__PURE__ */ jsxDEV6("div", {
-        className: "flex items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV6("h2", {
-            className: "font-bold text-2xl",
-            children: "Integration Hub"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(Button2, {
-            onClick: () => alert("Add integration modal"),
-            children: [
-              /* @__PURE__ */ jsxDEV6("span", {
-                className: "mr-2",
-                children: "+"
-              }, undefined, false, undefined, this),
-              " Add Integration"
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsxDEV6(StatCardGroup, {
-        children: [
-          /* @__PURE__ */ jsxDEV6(StatCard, {
-            label: "Integrations",
-            value: stats.totalIntegrations,
-            hint: `${stats.activeIntegrations} active`
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(StatCard, {
-            label: "Connections",
-            value: stats.totalConnections,
-            hint: `${stats.connectedCount} connected`
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsxDEV6(StatCard, {
-            label: "Syncs",
-            value: stats.totalSyncs,
-            hint: `${stats.activeSyncs} active`
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__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__ */ 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 font-medium text-sm transition-colors ${activeTab === tab.id ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
-          children: [
-            /* @__PURE__ */ jsxDEV6("span", {
-              children: tab.icon
-            }, undefined, false, undefined, this),
-            tab.label
-          ]
-        }, tab.id, true, undefined, this))
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
-        className: "min-h-[400px]",
-        role: "tabpanel",
-        children: [
-          activeTab === "integrations" && /* @__PURE__ */ jsxDEV6("div", {
-            className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-            children: [
-              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__ */ jsxDEV6("div", {
-                    className: "mb-3 flex items-center gap-3",
-                    children: [
-                      /* @__PURE__ */ jsxDEV6("span", {
-                        className: "text-2xl",
-                        children: TYPE_ICONS[integration.type] ?? "\u2699\uFE0F"
-                      }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsxDEV6("div", {
-                        children: [
-                          /* @__PURE__ */ jsxDEV6("h3", {
-                            className: "font-medium",
-                            children: integration.name
-                          }, undefined, false, undefined, this),
-                          /* @__PURE__ */ jsxDEV6("p", {
-                            className: "text-muted-foreground text-sm",
-                            children: integration.type
-                          }, undefined, false, undefined, this)
-                        ]
-                      }, undefined, true, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsxDEV6("div", {
-                    className: "flex items-center justify-between",
-                    children: [
-                      /* @__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__ */ jsxDEV6("span", {
-                        className: "text-muted-foreground text-xs",
-                        children: integration.createdAt.toLocaleDateString()
-                      }, undefined, false, undefined, this)
-                    ]
-                  }, undefined, true, undefined, this)
-                ]
-              }, integration.id, true, undefined, this)),
-              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__ */ jsxDEV6(ConnectionsTable, {
-            connections
-          }, undefined, false, undefined, this),
-          activeTab === "chat" && /* @__PURE__ */ jsxDEV6(IntegrationHubChat, {
-            proxyUrl: "/api/chat",
-            thinkingLevel: "thinking",
-            suggestions: [
-              "List my integrations",
-              "Show sync status",
-              "Add a connection"
-            ],
-            className: "min-h-[400px]"
-          }, undefined, false, undefined, this),
-          activeTab === "syncs" && /* @__PURE__ */ jsxDEV6(SyncConfigsTable, {
-            syncConfigs
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// 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
-  }
-];
-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"
-  }
-];
-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
-  }
-];
-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 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}\``);
-    }
-    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} |`);
-    }
-    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"}`);
-      }
-    }
-    return {
-      mimeType: "text/markdown",
-      body: lines.join(`
-`)
-    };
-  }
-};
-var connectionListMarkdownRenderer = {
-  target: "markdown",
-  render: async (desc) => {
-    if (desc.source.type !== "component" || desc.source.componentKey !== "ConnectionList") {
-      throw new Error("connectionListMarkdownRenderer: not ConnectionList");
-    }
-    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} |`);
-      }
-      lines.push("");
-    }
-    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");
-    }
-    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(`
-`)
-    };
-  }
-};
-export {
-  useIntegrationData,
-  syncConfigMarkdownRenderer,
-  integrationDashboardMarkdownRenderer,
-  connectionListMarkdownRenderer,
-  IntegrationHubChat,
-  IntegrationDashboard
-};
+import{useTemplateRuntime as Zq}from"@contractspec/lib.example-shared-ui";import{useCallback as $q,useEffect as Wq,useState as N}from"react";function d(K="local-project"){let{handlers:W}=Zq(),q=W.integration,[Q,$]=N([]),[J,H]=N([]),[w,D]=N([]),[Y,X]=N(!0),[Z,U]=N(null),F=$q(async()=>{try{X(!0),U(null);let[M,Qq,Xq]=await Promise.all([q.listIntegrations({projectId:K,limit:100}),q.listConnections({limit:100}),q.listSyncConfigs({limit:100})]);$(M.integrations),H(Qq.connections),D(Xq.configs)}catch(M){U(M instanceof Error?M:Error("Failed to load integrations"))}finally{X(!1)}},[q,K]);Wq(()=>{F()},[F]);let O={totalIntegrations:Q.length,activeIntegrations:Q.filter((M)=>M.status==="ACTIVE").length,totalConnections:J.length,connectedCount:J.filter((M)=>M.status==="CONNECTED").length,totalSyncs:w.length,activeSyncs:w.filter((M)=>M.status==="ACTIVE").length};return{integrations:Q,connections:J,syncConfigs:w,loading:Y,error:Z,stats:O,refetch:F}}import{defineVisualization as z,VisualizationRegistry as Jq}from"@contractspec/lib.contracts-spec/visualizations";var Hq={key:"integration.list",version:"1.0.0"},wq={key:"integration.connection.list",version:"1.0.0"},l={key:"integration.syncConfig.list",version:"1.0.0"},V={version:"1.0.0",domain:"integration",stability:"experimental",owners:["@example.integration-hub"],tags:["integration","visualization","sync"]},b=z({meta:{...V,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:Hq,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."}}}),T=z({meta:{...V,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:wq,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."}}}),C=z({meta:{...V,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:l,resultPath:"data"},visualization:{kind:"metric",measure:"value",measures:[{key:"value",label:"Syncs",dataPath:"value",format:"number"}],table:{caption:"Healthy sync count."}}}),S=z({meta:{...V,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:l,resultPath:"data"},visualization:{kind:"metric",measure:"value",measures:[{key:"value",label:"Syncs",dataPath:"value",format:"number"}],table:{caption:"Syncs requiring attention."}}}),a=[b,T,C,S],jq=new Jq([...a]),xq=a.map((K)=>({key:K.meta.key,version:K.meta.version}));function Yq(K){return K==="ACTIVE"||K==="SUCCESS"}function f(K,W,q){let Q=new Map,$=new Map,J=0,H=0;for(let Y of K)Q.set(Y.type,(Q.get(Y.type)??0)+1);for(let Y of W)$.set(Y.status,($.get(Y.status)??0)+1);for(let Y of q)if(Yq(Y.status))J+=1;else H+=1;return{primaryItems:[{key:"integration-types",spec:b,data:{data:Array.from(Q.entries()).map(([Y,X])=>({type:Y,count:X}))},title:"Integration Types",description:"Configured integrations grouped by category.",height:260},{key:"connection-status",spec:T,data:{data:Array.from($.entries()).map(([Y,X])=>({status:Y,count:X}))},title:"Connection Status",description:"Operational health across current connections."}],comparisonItems:[{key:"healthy-syncs",spec:C,data:{data:[{value:J}]},title:"Healthy Syncs",description:"Active or recently successful sync configurations.",height:200},{key:"attention-syncs",spec:S,data:{data:[{value:H}]},title:"Attention Needed",description:"Paused, failed, or degraded sync configurations.",height:200}]}}import{ComparisonView as Pq,VisualizationCard as Uq,VisualizationGrid as Gq}from"@contractspec/lib.design-system";import{jsx as k,jsxs as c}from"react/jsx-runtime";function o({integrations:K,connections:W,syncConfigs:q}){let{primaryItems:Q,comparisonItems:$}=f(K,W,q);return c("section",{className:"space-y-4",children:[c("div",{children:[k("h3",{className:"font-semibold text-lg",children:"Integration Visualizations"}),k("p",{className:"text-muted-foreground text-sm",children:"Contract-backed charts for integration coverage and sync health."})]}),k(Gq,{children:Q.map((J)=>k(Uq,{data:J.data,description:J.description,height:J.height,spec:J.spec,title:J.title},J.key))}),k(Pq,{description:"Comparison surface for healthy versus attention-needed syncs.",items:$,title:"Sync-State Comparison"})]})}import{ChatWithSidebar as Mq}from"@contractspec/module.ai-chat";import{jsx as i}from"react/jsx-runtime";var Bq=["List my integrations","Show sync status","Add a connection"],Dq="You are an Integration Hub assistant. Help users manage integrations, connections, and sync configurations. When asked about integrations, connections, or syncs, provide clear, actionable guidance.";function y({proxyUrl:K="/api/chat",mcpServers:W,thinkingLevel:q="thinking",suggestions:Q=Bq,systemPrompt:$=Dq,className:J}){return i("div",{className:J??"flex h-[500px] flex-col",children:i(Mq,{className:"flex-1",systemPrompt:$,proxyUrl:K,mcpServers:W,thinkingLevel:q,suggestions:Q,showSuggestionsWhenEmpty:!0})})}import{Button as v}from"@contractspec/lib.design-system";import{Badge as e}from"@contractspec/lib.ui-kit-web/ui/badge";import{HStack as Fq}from"@contractspec/lib.ui-kit-web/ui/stack";import{jsx as A,jsxs as Rq}from"react/jsx-runtime";var Oq={ACTIVE:"default",CONNECTED:"default",SUCCESS:"default",PENDING:"secondary",PAUSED:"secondary",ERROR:"destructive",DISCONNECTED:"outline"};function L(K){return K?K.toLocaleString():"Never"}function m(K){return K?JSON.stringify(K,null,2):"No configuration"}function I({status:K}){return A(e,{variant:Oq[K]??"outline",children:K})}function p({controller:K,label:W,toggleColumnId:q,toggleVisibleLabel:Q,toggleHiddenLabel:$,pinColumnId:J,pinLabel:H,resizeColumnId:w,resizeLabel:D}){let Y=K.rows[0],X=K.columns.find((O)=>O.id===q),Z=K.columns.find((O)=>O.id===J),U=K.columns.find((O)=>O.id===w),F=Z?.pinState==="left"?!1:"left";return Rq(Fq,{gap:"sm",className:"flex-wrap",children:[A(e,{variant:"outline",children:W}),A(v,{variant:"outline",size:"sm",onPress:()=>Y?.toggleExpanded?.(!Y?.isExpanded),children:"Expand First Row"}),A(v,{variant:"outline",size:"sm",onPress:()=>X?.toggleVisibility?.(!X?.visible),children:X?.visible?Q:$}),A(v,{variant:"outline",size:"sm",onPress:()=>Z?.pin?.(F),children:Z?.pinState==="left"?`Unpin ${H}`:`Pin ${H}`}),A(v,{variant:"outline",size:"sm",onPress:()=>U?.resizeBy?.(40),children:D})]})}import{DataTable as Aq}from"@contractspec/lib.design-system";import{useContractTable as _q}from"@contractspec/lib.presentation-runtime-react";import{VStack as s}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as h}from"@contractspec/lib.ui-kit-web/ui/text";import{jsx as B,jsxs as j}from"react/jsx-runtime";function x({connections:K}){let W=_q({data:K,columns:[{id:"connection",header:"Connection",label:"Connection",accessor:(q)=>q.name,cell:({item:q})=>j(s,{gap:"xs",children:[B(h,{className:"font-medium text-sm",children:q.name}),j(h,{className:"text-muted-foreground text-xs",children:["Created ",q.createdAt.toLocaleDateString()]})]}),size:240,minSize:180,canSort:!0,canPin:!0,canResize:!0},{id:"status",header:"Status",label:"Status",accessorKey:"status",cell:({value:q})=>B(I,{status:String(q)}),size:150,canSort:!0,canPin:!0,canResize:!0},{id:"lastSyncAt",header:"Last Sync",label:"Last Sync",accessor:(q)=>q.lastSyncAt?.getTime()??0,cell:({item:q})=>L(q.lastSyncAt),size:200,canSort:!0,canHide:!0,canResize:!0},{id:"errorMessage",header:"Errors",label:"Errors",accessor:(q)=>q.errorMessage??"",cell:({value:q})=>String(q||"No errors"),size:240,canHide:!0,canResize:!0}],initialState:{pagination:{pageIndex:0,pageSize:3},columnVisibility:{errorMessage:!1},columnPinning:{left:["connection"],right:[]}},renderExpandedContent:(q)=>j(s,{gap:"sm",className:"py-2",children:[B(h,{className:"font-medium text-sm",children:"Credentials"}),B("pre",{className:"overflow-auto rounded-md bg-muted/40 p-3 text-xs",children:m(q.credentials)}),B(h,{className:"font-medium text-sm",children:"Config"}),B("pre",{className:"overflow-auto rounded-md bg-muted/40 p-3 text-xs",children:m(q.config)}),B(h,{className:"text-muted-foreground text-sm",children:q.errorMessage??"No sync errors recorded."})]}),getCanExpand:()=>!0});return B(Aq,{controller:W,title:"Connections",description:"Client-mode ContractSpec table with visibility, pinning, resizing, and expanded diagnostics.",toolbar:B(p,{controller:W,label:`${K.length} total connections`,toggleColumnId:"errorMessage",toggleVisibleLabel:"Hide Error Column",toggleHiddenLabel:"Show Error Column",pinColumnId:"status",pinLabel:"Status",resizeColumnId:"connection",resizeLabel:"Widen Connection"}),emptyState:B("div",{className:"rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",children:"No connections found"})})}import{DataTable as Nq}from"@contractspec/lib.design-system";import{useContractTable as kq}from"@contractspec/lib.presentation-runtime-react";import{VStack as t}from"@contractspec/lib.ui-kit-web/ui/stack";import{Text as _}from"@contractspec/lib.ui-kit-web/ui/text";import{jsx as E,jsxs as R}from"react/jsx-runtime";function g({syncConfigs:K}){let W=kq({data:K,columns:[{id:"sync",header:"Sync Config",label:"Sync Config",accessor:(q)=>q.name,cell:({item:q})=>R(t,{gap:"xs",children:[E(_,{className:"font-medium text-sm",children:q.name}),R(_,{className:"text-muted-foreground text-xs",children:[q.sourceEntity," \u2192 ",q.targetEntity]})]}),size:260,minSize:200,canSort:!0,canPin:!0,canResize:!0},{id:"frequency",header:"Frequency",label:"Frequency",accessorKey:"frequency",size:160,canSort:!0,canHide:!0,canResize:!0},{id:"status",header:"Status",label:"Status",accessorKey:"status",cell:({value:q})=>E(I,{status:String(q)}),size:150,canSort:!0,canPin:!0,canResize:!0},{id:"recordsSynced",header:"Records",label:"Records",accessorKey:"recordsSynced",align:"right",size:140,canSort:!0,canResize:!0},{id:"lastRunAt",header:"Last Run",label:"Last Run",accessor:(q)=>q.lastRunAt?.getTime()??0,cell:({item:q})=>L(q.lastRunAt),size:200,canSort:!0,canHide:!0,canResize:!0}],initialState:{pagination:{pageIndex:0,pageSize:3},columnVisibility:{lastRunAt:!1},columnPinning:{left:["sync"],right:[]}},renderExpandedContent:(q)=>R(t,{gap:"sm",className:"py-2",children:[R(_,{className:"text-muted-foreground text-sm",children:["Connection ",q.connectionId]}),R(_,{className:"text-muted-foreground text-sm",children:["Last run: ",L(q.lastRunAt)]}),R(_,{className:"text-muted-foreground text-sm",children:["Last status: ",q.lastRunStatus??"No runs recorded"]}),R(_,{className:"text-muted-foreground text-sm",children:["Updated ",q.updatedAt.toLocaleString()]})]}),getCanExpand:()=>!0});return E(Nq,{controller:W,title:"Sync Configs",description:"Shared table primitives applied to sync monitoring without changing the surrounding dashboard layout.",toolbar:E(p,{controller:W,label:`${K.length} syncs`,toggleColumnId:"lastRunAt",toggleVisibleLabel:"Hide Last Run",toggleHiddenLabel:"Show Last Run",pinColumnId:"status",pinLabel:"Status",resizeColumnId:"sync",resizeLabel:"Widen Sync"}),emptyState:E("div",{className:"rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",children:"No sync configurations found"})})}import{Button as n,ErrorState as Lq,LoaderBlock as hq,StatCard as u,StatCardGroup as Eq}from"@contractspec/lib.design-system";import{useState as zq}from"react";import{jsx as P,jsxs as G}from"react/jsx-runtime";var Vq={ACTIVE:"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",INACTIVE:"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",CONNECTED:"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",DISCONNECTED:"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400",PENDING:"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",ERROR:"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",PAUSED:"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"},fq={CRM:"\uD83D\uDCCA",MARKETING:"\uD83D\uDCE3",PAYMENT:"\uD83D\uDCB3",COMMUNICATION:"\uD83D\uDCAC",DATA:"\uD83D\uDDC4\uFE0F",CUSTOM:"\u2699\uFE0F"};function vq(){let[K,W]=zq("integrations"),{integrations:q,connections:Q,syncConfigs:$,loading:J,error:H,stats:w,refetch:D}=d(),Y=[{id:"integrations",label:"Integrations",icon:"\uD83D\uDD0C"},{id:"connections",label:"Connections",icon:"\uD83D\uDD17"},{id:"syncs",label:"Sync Configs",icon:"\uD83D\uDD04"},{id:"chat",label:"Chat",icon:"\uD83D\uDCAC"}];if(J)return P(hq,{label:"Loading Integrations..."});if(H)return P(Lq,{title:"Failed to load Integrations",description:H.message,onRetry:D,retryLabel:"Retry"});return G("div",{className:"space-y-6",children:[G("div",{className:"flex items-center justify-between",children:[P("h2",{className:"font-bold text-2xl",children:"Integration Hub"}),G(n,{onClick:()=>alert("Add integration modal"),children:[P("span",{className:"mr-2",children:"+"})," Add Integration"]})]}),G(Eq,{children:[P(u,{label:"Integrations",value:w.totalIntegrations,hint:`${w.activeIntegrations} active`}),P(u,{label:"Connections",value:w.totalConnections,hint:`${w.connectedCount} connected`}),P(u,{label:"Syncs",value:w.totalSyncs,hint:`${w.activeSyncs} active`})]}),P(o,{connections:Q,integrations:q,syncConfigs:$}),P("nav",{className:"flex gap-1 rounded-lg bg-muted p-1",role:"tablist",children:Y.map((X)=>G(n,{type:"button",role:"tab","aria-selected":K===X.id,onClick:()=>W(X.id),className:`flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2 font-medium text-sm transition-colors ${K===X.id?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"}`,children:[P("span",{children:X.icon}),X.label]},X.id))}),G("div",{className:"min-h-[400px]",role:"tabpanel",children:[K==="integrations"&&G("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-3",children:[q.map((X)=>G("div",{className:"cursor-pointer rounded-lg border border-border bg-card p-4 transition-colors hover:bg-muted/50",children:[G("div",{className:"mb-3 flex items-center gap-3",children:[P("span",{className:"text-2xl",children:fq[X.type]??"\u2699\uFE0F"}),G("div",{children:[P("h3",{className:"font-medium",children:X.name}),P("p",{className:"text-muted-foreground text-sm",children:X.type})]})]}),G("div",{className:"flex items-center justify-between",children:[P("span",{className:`inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${Vq[X.status]??""}`,children:X.status}),P("span",{className:"text-muted-foreground text-xs",children:X.createdAt.toLocaleDateString()})]})]},X.id)),q.length===0&&P("div",{className:"col-span-full flex h-64 items-center justify-center text-muted-foreground",children:"No integrations configured"})]}),K==="connections"&&P(x,{connections:Q}),K==="chat"&&P(y,{proxyUrl:"/api/chat",thinkingLevel:"thinking",suggestions:["List my integrations","Show sync status","Add a connection"],className:"min-h-[400px]"}),K==="syncs"&&P(g,{syncConfigs:$})]})]})}var qq=[{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}],r=[{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"}],Kq=[{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}],Iq={target:"markdown",render:async(K)=>{if(K.source.type!=="component"||K.source.componentKey!=="IntegrationDashboard")throw Error("integrationDashboardMarkdownRenderer: not IntegrationDashboard");let W=qq,q=r,Q=Kq,$=f(W,q,Q),J=W.filter((Z)=>Z.status==="ACTIVE"),H=q.filter((Z)=>Z.status==="CONNECTED"),w=q.filter((Z)=>Z.status==="ERROR"),Y=Q.filter((Z)=>Z.status==="SUCCESS").reduce((Z,U)=>Z+U.recordsSynced,0),X=["# Integration Hub","","> Connect and sync data with external services","","## Overview","","| Metric | Value |","|--------|-------|",`| Active Integrations | ${J.length} |`,`| Connected Services | ${H.length} |`,`| Error Connections | ${w.length} |`,`| Sync Configs | ${Q.length} |`,`| Records Synced (24h) | ${Y.toLocaleString()} |`,""];X.push("## Visualization Overview"),X.push("");for(let Z of[...$.primaryItems,...$.comparisonItems])X.push(`- **${Z.title}** via \`${Z.spec.meta.key}\``);X.push(""),X.push("## Integrations"),X.push(""),X.push("| Name | Type | Connections | Status |"),X.push("|------|------|-------------|--------|");for(let Z of W){let U=Z.status==="ACTIVE"?"\uD83D\uDFE2":"\u26AB";X.push(`| ${Z.name} | ${Z.type} | ${Z.connectionCount} | ${U} ${Z.status} |`)}X.push(""),X.push("## Recent Sync Activity"),X.push(""),X.push("| Sync | Frequency | Last Run | Records | Status |"),X.push("|------|-----------|----------|---------|--------|");for(let Z of Q){let U=new Date(Z.lastRunAt).toLocaleString(),F=Z.status==="SUCCESS"?"\u2705":"\u274C";X.push(`| ${Z.name} | ${Z.frequency} | ${U} | ${Z.recordsSynced} | ${F} ${Z.status} |`)}if(w.length>0){X.push(""),X.push("## \u26A0\uFE0F Connections with Errors"),X.push("");for(let Z of w){let U=W.find((F)=>F.id===Z.integrationId);X.push(`- **${Z.name}** (${U?.name??"Unknown"}): ${Z.error??"Unknown error"}`)}}return{mimeType:"text/markdown",body:X.join(`
+`)}}},pq={target:"markdown",render:async(K)=>{if(K.source.type!=="component"||K.source.componentKey!=="ConnectionList")throw Error("connectionListMarkdownRenderer: not ConnectionList");let W=r,q=qq,Q=["# Connections","","> Manage connections to external services",""];for(let $ of q){let J=W.filter((H)=>H.integrationId===$.id);if(J.length===0)continue;Q.push(`## ${$.name}`),Q.push(""),Q.push("| Connection | Status | Last Sync |"),Q.push("|------------|--------|-----------|");for(let H of J){let w=new Date(H.lastSyncAt).toLocaleString(),D=H.status==="CONNECTED"?"\uD83D\uDFE2":H.status==="ERROR"?"\uD83D\uDD34":"\u26AB";Q.push(`| ${H.name} | ${D} ${H.status} | ${w} |`)}Q.push("")}return{mimeType:"text/markdown",body:Q.join(`
+`)}}},dq={target:"markdown",render:async(K)=>{if(K.source.type!=="component"||K.source.componentKey!=="SyncConfigEditor")throw Error("syncConfigMarkdownRenderer: not SyncConfigEditor");let W=Kq,q=r,Q=["# Sync Configurations","","> Configure automated data synchronization",""];for(let $ of W){let J=q.find((w)=>w.id===$.connectionId),H=$.status==="SUCCESS"?"\u2705":"\u274C";Q.push(`## ${$.name}`),Q.push(""),Q.push(`**Connection:** ${J?.name??"Unknown"}`),Q.push(`**Frequency:** ${$.frequency}`),Q.push(`**Status:** ${H} ${$.status}`),Q.push(`**Last Run:** ${new Date($.lastRunAt).toLocaleString()}`),Q.push(`**Records Synced:** ${$.recordsSynced.toLocaleString()}`),Q.push("")}return Q.push("## Frequency Options"),Q.push(""),Q.push("- **REALTIME**: Sync on every change"),Q.push("- **HOURLY**: Sync every hour"),Q.push("- **DAILY**: Sync once per day"),Q.push("- **WEEKLY**: Sync once per week"),Q.push("- **MANUAL**: Sync only when triggered"),{mimeType:"text/markdown",body:Q.join(`
+`)}}};export{d as useIntegrationData,dq as syncConfigMarkdownRenderer,Iq as integrationDashboardMarkdownRenderer,pq as connectionListMarkdownRenderer,y as IntegrationHubChat,vq as IntegrationDashboard};