{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "integrations-connector-status",
  "title": "Integrations — Connector Status",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/integrations-connector-status/IntegrationsConnectorStatus.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CircleAlert, CircleCheck, RefreshCw } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nconst connectors = [\n  { mark: 'SF', name: 'Snowflake', auth: 'Key pair', cadence: 'Live query', lastRun: '12 s ago', healthy: true },\n  { mark: 'BQ', name: 'BigQuery', auth: 'Service account', cadence: 'Live query', lastRun: '41 s ago', healthy: true },\n  { mark: 'OK', name: 'Okta', auth: 'SCIM', cadence: 'Every 15 min', lastRun: '6 min ago', healthy: true },\n  {\n    mark: 'DT',\n    name: 'dbt Cloud',\n    auth: 'API token',\n    cadence: 'On DAG finish',\n    lastRun: '1 h 12 m ago',\n    healthy: true,\n  },\n  { mark: 'SL', name: 'Slack', auth: 'OAuth', cadence: 'On alert', lastRun: 'Token expired', healthy: false },\n  { mark: 'PD', name: 'PagerDuty', auth: 'API key', cadence: 'On alert', lastRun: '3 h ago', healthy: true },\n]\n\nconst healthy = computed(() => connectors.filter((c) => c.healthy).length)\nconst degraded = computed(() => connectors.length - healthy.value)\n</script>\n\n<template>\n  <section data-slot=\"integrations-connector-status\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <div class=\"flex flex-wrap items-end justify-between gap-6\">\n        <div class=\"max-w-2xl\">\n          <Badge variant=\"secondary\">Connector health</Badge>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">You can see what we see</h2>\n          <p class=\"text-muted-foreground mt-3 text-lg\">\n            Every connection reports its own auth method, cadence, and last successful run. No silent failures.\n          </p>\n        </div>\n        <Button variant=\"outline\" size=\"sm\">\n          <RefreshCw class=\"mr-2 size-3.5\" aria-hidden=\"true\" />\n          Re-check all\n        </Button>\n      </div>\n\n      <Card class=\"mt-10\">\n        <CardContent class=\"p-0\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Connector</TableHead>\n                <TableHead>Auth</TableHead>\n                <TableHead>Cadence</TableHead>\n                <TableHead>Last success</TableHead>\n                <TableHead class=\"text-right\">Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"connector in connectors\" :key=\"connector.name\">\n                <TableCell>\n                  <div class=\"flex items-center gap-3\">\n                    <span\n                      class=\"border-border text-muted-foreground flex size-8 items-center justify-center rounded-md border font-mono text-xs font-semibold\"\n                      aria-hidden=\"true\"\n                    >\n                      {{ connector.mark }}\n                    </span>\n                    <span class=\"font-medium\">{{ connector.name }}</span>\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-muted-foreground\">{{ connector.auth }}</TableCell>\n                <TableCell class=\"text-muted-foreground\">{{ connector.cadence }}</TableCell>\n                <TableCell class=\"text-muted-foreground font-mono text-xs\">{{ connector.lastRun }}</TableCell>\n                <TableCell class=\"text-right\">\n                  <Badge :variant=\"connector.healthy ? 'secondary' : 'outline'\" class=\"gap-1.5\">\n                    <CircleCheck v-if=\"connector.healthy\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                    <CircleAlert v-else class=\"text-destructive size-3\" aria-hidden=\"true\" />\n                    {{ connector.healthy ? 'Healthy' : 'Action needed' }}\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n\n          <Separator />\n\n          <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 px-6 py-4 text-sm\">\n            <span class=\"flex items-center gap-2\">\n              <CircleCheck class=\"text-success size-3.5\" aria-hidden=\"true\" />\n              {{ healthy }} healthy\n            </span>\n            <span class=\"flex items-center gap-2\">\n              <CircleAlert class=\"text-destructive size-3.5\" aria-hidden=\"true\" />\n              {{ degraded }} needing action\n            </span>\n            <span class=\"ml-auto font-mono text-xs\">Status refreshed every 60 s</span>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/IntegrationsConnectorStatus.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Connector health table listing each integration with its auth method, sync cadence, last successful run, and a status pill, plus a summary band counting healthy and degraded connectors.",
  "categories": [
    "marketing"
  ]
}