{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "stream-processing-flink-topology",
  "title": "Stream Processing Flink Topology",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/stream-processing-flink-topology/StreamProcessingFlinkTopology.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  AlertTriangle,\n  ArrowRight,\n  Camera,\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  Cpu,\n  Database,\n  Loader2,\n  Radio,\n  Square,\n  Workflow,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport StreamOperatorDetail from './StreamOperatorDetail.vue'\nimport StreamTopologyTelemetry from './StreamTopologyTelemetry.vue'\nimport type { FlinkOperatorNode, FlinkSubtask } from './stream-topology-types'\nimport { defaultFlinkOperators } from './stream-topology-data'\n\nexport type { FlinkOperatorNode, FlinkSubtask }\n\ninterface Props {\n  operators?: FlinkOperatorNode[]\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  operators: () => defaultFlinkOperators,\n})\n\nconst selectedOperatorId = ref<string>('op-ml-scoring')\nconst isTriggeringSavepoint = ref<boolean>(false)\nconst savepointNotice = ref<string | null>(null)\nconst isCanceling = ref<boolean>(false)\nconst cancelConfirmed = ref<boolean>(false)\nconst copiedKey = ref<string | null>(null)\n\nconst selectedOperator = computed(() => {\n  return props.operators.find((op) => op.id === selectedOperatorId.value) ?? props.operators[0]\n})\n\nfunction selectOperator(id: string) {\n  selectedOperatorId.value = id\n}\n\nfunction handleTriggerSavepoint() {\n  if (isTriggeringSavepoint.value) return\n  isTriggeringSavepoint.value = true\n  savepointNotice.value = null\n\n  setTimeout(() => {\n    isTriggeringSavepoint.value = false\n    savepointNotice.value = 's3://flink-savepoints/prod/savepoint-fraud-90412-20260821-143245/'\n    setTimeout(() => {\n      if (savepointNotice.value?.includes('savepoint-fraud-90412')) {\n        savepointNotice.value = null\n      }\n    }, 6500)\n  }, 1800)\n}\n\nfunction handleCancelJob() {\n  if (isCanceling.value) return\n  isCanceling.value = true\n  setTimeout(() => {\n    isCanceling.value = false\n    cancelConfirmed.value = true\n    setTimeout(() => {\n      cancelConfirmed.value = false\n    }, 4500)\n  }, 2000)\n}\n\nfunction copyText(key: string, value: string) {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(value)\n    copiedKey.value = key\n    setTimeout(() => {\n      if (copiedKey.value === key) {\n        copiedKey.value = null\n      }\n    }, 2000)\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"stream-processing-flink-topology\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- 1. Header Section -->\n    <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <div\n            class=\"bg-muted text-muted-foreground border-border flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n            aria-hidden=\"true\"\n          >\n            <Workflow class=\"text-primary size-4.5\" />\n          </div>\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <h1 class=\"text-foreground font-mono text-xl font-bold tracking-tight break-all sm:text-2xl\">\n              realtime-fraud-scoring-pipeline\n            </h1>\n            <Badge variant=\"outline\" class=\"font-mono text-xs\"> Flink 1.19 on Kubernetes </Badge>\n          </div>\n          <Badge variant=\"success\" class=\"gap-1.5 text-xs font-medium\">\n            <span class=\"relative flex size-2 shrink-0\">\n              <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n              <span class=\"bg-success relative inline-flex size-2 rounded-full\" />\n            </span>\n            <span>Job Running · Checkpointing Healthy</span>\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground font-mono text-xs\">\n          Checkpoint Interval: Every 10s · RocksDB StateBackend · SLA Target: &lt; 50ms Lag · Job ID: flink_job_992014\n        </p>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"gap-1.5 text-xs font-medium\"\n          :disabled=\"isTriggeringSavepoint\"\n          @click=\"handleTriggerSavepoint\"\n        >\n          <Loader2 v-if=\"isTriggeringSavepoint\" class=\"size-3.5 animate-spin\" aria-hidden=\"true\" />\n          <Camera v-else class=\"text-info size-3.5\" aria-hidden=\"true\" />\n          <span>{{ isTriggeringSavepoint ? 'Creating Savepoint...' : 'Trigger Savepoint' }}</span>\n        </Button>\n\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"text-destructive hover:border-destructive/40 hover:bg-destructive/10 gap-1.5 text-xs font-medium\"\n          :disabled=\"isCanceling\"\n          @click=\"handleCancelJob\"\n        >\n          <Loader2 v-if=\"isCanceling\" class=\"size-3.5 animate-spin\" aria-hidden=\"true\" />\n          <Square v-else class=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n          <span>{{ isCanceling ? 'Canceling with Savepoint...' : 'Cancel Job with Savepoint' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- Active Savepoint Notice Banner -->\n    <div\n      v-if=\"savepointNotice\"\n      class=\"text-foreground border-info/30 bg-info/10 flex items-center justify-between rounded-lg border p-3 text-xs shadow-xs\"\n      role=\"status\"\n    >\n      <div class=\"flex items-center gap-2.5\">\n        <CheckCircle2 class=\"text-info size-4 shrink-0\" aria-hidden=\"true\" />\n        <div>\n          <span class=\"text-info font-semibold\">Savepoint completed successfully:</span>\n          <span class=\"ml-1 font-mono text-xs\">{{ savepointNotice }}</span>\n        </div>\n      </div>\n      <Button variant=\"ghost\" size=\"xs\" class=\"h-6 gap-1 px-2 text-xs\" @click=\"copyText('savepoint', savepointNotice)\">\n        <Check v-if=\"copiedKey === 'savepoint'\" class=\"text-success size-3\" />\n        <Copy v-else class=\"size-3\" />\n        <span>{{ copiedKey === 'savepoint' ? 'Copied' : 'Copy URI' }}</span>\n      </Button>\n    </div>\n\n    <!-- Active Cancellation Notice Banner -->\n    <div\n      v-if=\"cancelConfirmed\"\n      class=\"text-foreground border-warning/30 bg-warning/10 flex items-center justify-between rounded-lg border p-3 text-xs shadow-xs\"\n      role=\"status\"\n    >\n      <div class=\"flex items-center gap-2.5\">\n        <AlertTriangle class=\"text-warning size-4 shrink-0\" aria-hidden=\"true\" />\n        <div>\n          <span class=\"text-warning font-semibold\">Graceful Job Drain Initiated:</span>\n          <span class=\"ml-1\">Stopping topology sources and committing final RocksDB savepoint to S3 storage.</span>\n        </div>\n      </div>\n      <Badge variant=\"outline\" class=\"font-mono text-xs\">Drain Status: 100%</Badge>\n    </div>\n\n    <!-- 2. 4 Stream Telemetry KPI Cards -->\n    <StreamTopologyTelemetry />\n\n    <!-- 3. Interactive 4-Operator Streaming Topology DAG -->\n    <Card class=\"shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <div class=\"flex items-center gap-2\">\n              <CardTitle class=\"text-base font-semibold\">Streaming Execution Topology DAG</CardTitle>\n              <Badge variant=\"outline\" class=\"font-mono text-xs\">4 Stateful Operators</Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Live dataflow graph with event-time watermarking, state sizes, and backpressure telemetry. Click any\n              operator to inspect metrics and subtasks.\n            </CardDescription>\n          </div>\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <div\n              class=\"border-border bg-muted/40 text-muted-foreground flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs\"\n            >\n              <span class=\"bg-success size-2 rounded-full\" />\n              <span>Backpressure Heat: 0.0% (Green)</span>\n            </div>\n            <div\n              class=\"border-border bg-muted/40 text-muted-foreground flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs\"\n            >\n              <Database class=\"size-3\" />\n              <span>Total Managed State: 57.0 MB</span>\n            </div>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-4 pt-1 sm:p-6\">\n        <div class=\"border-border bg-muted/15 rounded-xl border p-4 sm:p-5\">\n          <!-- 4 Connected Nodes Grid -->\n          <div class=\"grid grid-cols-1 gap-4 lg:grid-cols-4\">\n            <!-- Node 1: Kafka Ingestion Source -->\n            <div\n              role=\"button\"\n              tabindex=\"0\"\n              :class=\"\n                cn(\n                  'group focus-visible:ring-ring relative flex cursor-pointer flex-col justify-between rounded-xl border p-4 transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none',\n                  selectedOperatorId === 'op-kafka-source'\n                    ? 'border-primary bg-primary/[0.04] ring-primary/30 shadow-xs ring-2'\n                    : 'border-border bg-card hover:border-primary/50 hover:bg-muted/30',\n                )\n              \"\n              @click=\"selectOperator('op-kafka-source')\"\n              @keydown.enter=\"selectOperator('op-kafka-source')\"\n              @keydown.space.prevent=\"selectOperator('op-kafka-source')\"\n            >\n              <div class=\"space-y-3\">\n                <div class=\"flex items-start justify-between gap-2\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      class=\"border-info/30 bg-info/10 text-info flex size-7 items-center justify-center rounded-md border\"\n                    >\n                      <Radio class=\"size-3.5\" />\n                    </div>\n                    <Badge variant=\"outline\" class=\"border-info/30 text-info font-mono text-xs\"> SOURCE </Badge>\n                  </div>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\">p=8</Badge>\n                </div>\n\n                <div>\n                  <div class=\"text-foreground font-mono text-xs leading-snug font-bold\">Kafka Ingestion Source</div>\n                  <p class=\"text-muted-foreground mt-1 font-mono text-xs\">42.5k rec/s · Backpressure: 0%</p>\n                </div>\n\n                <div class=\"border-border/60 space-y-1.5 border-t pt-2.5 font-mono text-xs\">\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Throughput:</span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">8.4 MB/s</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>State Size:</span>\n                    <span class=\"text-foreground tabular-nums\">0 MB (Stateless)</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2 text-xs\">\n                <span class=\"text-muted-foreground font-mono\">events.fraud.transactions</span>\n                <ArrowRight\n                  class=\"text-muted-foreground group-hover:text-primary size-3.5 shrink-0 transition-colors\"\n                />\n              </div>\n            </div>\n\n            <!-- Node 2: Keyed Sliding Window -->\n            <div\n              role=\"button\"\n              tabindex=\"0\"\n              :class=\"\n                cn(\n                  'group focus-visible:ring-ring relative flex cursor-pointer flex-col justify-between rounded-xl border p-4 transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none',\n                  selectedOperatorId === 'op-keyed-window'\n                    ? 'border-primary bg-primary/[0.04] ring-primary/30 shadow-xs ring-2'\n                    : 'border-border bg-card hover:border-primary/50 hover:bg-muted/30',\n                )\n              \"\n              @click=\"selectOperator('op-keyed-window')\"\n              @keydown.enter=\"selectOperator('op-keyed-window')\"\n              @keydown.space.prevent=\"selectOperator('op-keyed-window')\"\n            >\n              <div class=\"space-y-3\">\n                <div class=\"flex items-start justify-between gap-2\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      class=\"border-chart-1/30 bg-chart-1/10 text-chart-1 flex size-7 items-center justify-center rounded-md border\"\n                    >\n                      <Clock class=\"size-3.5\" />\n                    </div>\n                    <Badge variant=\"outline\" class=\"border-chart-1/30 text-chart-1 font-mono text-xs\"> WINDOW </Badge>\n                  </div>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\">p=16</Badge>\n                </div>\n\n                <div>\n                  <div class=\"text-foreground font-mono text-xs leading-snug font-bold\">Keyed Sliding Window</div>\n                  <p class=\"text-muted-foreground mt-1 font-mono text-xs\">5-min window, 10s slide · 12,400 keys</p>\n                </div>\n\n                <div class=\"border-border/60 space-y-1.5 border-t pt-2.5 font-mono text-xs\">\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Output Rate:</span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">38.2k rec/s</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>RocksDB State:</span>\n                    <span class=\"text-foreground text-chart-1 font-semibold tabular-nums\">18.4 MB</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2 text-xs\">\n                <span class=\"text-muted-foreground font-mono\">Cardholder Velocity Agg</span>\n                <ArrowRight\n                  class=\"text-muted-foreground group-hover:text-primary size-3.5 shrink-0 transition-colors\"\n                />\n              </div>\n            </div>\n\n            <!-- Node 3: ML Fraud Scoring Pattern Matcher -->\n            <div\n              role=\"button\"\n              tabindex=\"0\"\n              :class=\"\n                cn(\n                  'group focus-visible:ring-ring relative flex cursor-pointer flex-col justify-between rounded-xl border p-4 transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none',\n                  selectedOperatorId === 'op-ml-scoring'\n                    ? 'border-primary bg-primary/[0.04] ring-primary/30 shadow-xs ring-2'\n                    : 'border-border bg-card hover:border-primary/50 hover:bg-muted/30',\n                )\n              \"\n              @click=\"selectOperator('op-ml-scoring')\"\n              @keydown.enter=\"selectOperator('op-ml-scoring')\"\n              @keydown.space.prevent=\"selectOperator('op-ml-scoring')\"\n            >\n              <div class=\"space-y-3\">\n                <div class=\"flex items-start justify-between gap-2\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      class=\"border-chart-2/30 bg-chart-2/10 text-chart-2 flex size-7 items-center justify-center rounded-md border\"\n                    >\n                      <Cpu class=\"size-3.5\" />\n                    </div>\n                    <Badge variant=\"outline\" class=\"border-chart-2/30 text-chart-2 font-mono text-xs\"> CEP & ML </Badge>\n                  </div>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\">p=16</Badge>\n                </div>\n\n                <div>\n                  <div class=\"text-foreground font-mono text-xs leading-snug font-bold\">ML Fraud Scoring Matcher</div>\n                  <p class=\"text-muted-foreground mt-1 font-mono text-xs\">Inference: 1.2ms · RocksDB: 38.2 MB</p>\n                </div>\n\n                <div class=\"border-border/60 space-y-1.5 border-t pt-2.5 font-mono text-xs\">\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>ONNX Inference:</span>\n                    <span class=\"text-success text-success font-semibold tabular-nums\">p99 &lt; 1.2ms</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Managed State:</span>\n                    <span class=\"text-foreground text-chart-2 font-semibold tabular-nums\">38.2 MB</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2 text-xs\">\n                <span class=\"text-muted-foreground font-mono\">xgboost_v4.onnx</span>\n                <ArrowRight\n                  class=\"text-muted-foreground group-hover:text-primary size-3.5 shrink-0 transition-colors\"\n                />\n              </div>\n            </div>\n\n            <!-- Node 4: Sink: Alert Dispatcher & Redis Cache -->\n            <div\n              role=\"button\"\n              tabindex=\"0\"\n              :class=\"\n                cn(\n                  'group focus-visible:ring-ring relative flex cursor-pointer flex-col justify-between rounded-xl border p-4 transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none',\n                  selectedOperatorId === 'op-sink-dispatcher'\n                    ? 'border-primary bg-primary/[0.04] ring-primary/30 shadow-xs ring-2'\n                    : 'border-border bg-card hover:border-primary/50 hover:bg-muted/30',\n                )\n              \"\n              @click=\"selectOperator('op-sink-dispatcher')\"\n              @keydown.enter=\"selectOperator('op-sink-dispatcher')\"\n              @keydown.space.prevent=\"selectOperator('op-sink-dispatcher')\"\n            >\n              <div class=\"space-y-3\">\n                <div class=\"flex items-start justify-between gap-2\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      class=\"border-success/30 bg-success/10 text-success flex size-7 items-center justify-center rounded-md border\"\n                    >\n                      <Database class=\"size-3.5\" />\n                    </div>\n                    <Badge variant=\"outline\" class=\"border-success/30 text-success font-mono text-xs\"> SINK </Badge>\n                  </div>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\">p=8</Badge>\n                </div>\n\n                <div>\n                  <div class=\"text-foreground font-mono text-xs leading-snug font-bold\">Sink: Alert Dispatcher</div>\n                  <p class=\"text-muted-foreground mt-1 font-mono text-xs\">Redis Cache & Webhooks · 42.5k rec/s</p>\n                </div>\n\n                <div class=\"border-border/60 space-y-1.5 border-t pt-2.5 font-mono text-xs\">\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Semantics:</span>\n                    <span class=\"text-foreground font-semibold\">2PC Exactly-Once</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Fan-Out:</span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">42.5k rec/s</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2 text-xs\">\n                <span class=\"text-muted-foreground font-mono\">redis:6379 + alerts.queue</span>\n                <CheckCircle2 class=\"text-success size-3.5 shrink-0\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 4. Operator Detailed Performance & State Inspector Panel -->\n    <StreamOperatorDetail :operator=\"selectedOperator\" :copied-key=\"copiedKey\" @copy=\"copyText\" />\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/StreamProcessingFlinkTopology.vue"
    },
    {
      "path": "packages/registry-vue/blocks/stream-processing-flink-topology/StreamOperatorDetail.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Activity, Check, Copy, Server, ShieldCheck } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { FlinkOperatorNode } from './stream-topology-types'\n\ninterface Props {\n  operator: FlinkOperatorNode\n  copiedKey: string | null\n}\n\ndefineProps<Props>()\n\nconst emit = defineEmits<{\n  copy: [key: string, value: string]\n}>()\n\nconst activeInspectorTab = ref<'subtasks' | 'state' | 'resources' | 'config'>('subtasks')\n</script>\n\n<template>\n  <Card class=\"shadow-xs\">\n    <CardHeader class=\"pb-3\">\n      <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <CardTitle class=\"font-mono text-base font-bold\">{{ operator.name }}</CardTitle>\n            <Badge variant=\"success\" class=\"gap-1 font-mono text-xs\">\n              <span class=\"bg-success size-1.5 rounded-full\" />\n              {{ operator.status }}\n            </Badge>\n            <Badge variant=\"outline\" class=\"font-mono text-xs\">\n              Parallelism: {{ operator.parallelism }} subtasks\n            </Badge>\n          </div>\n          <CardDescription class=\"text-xs\">\n            {{ operator.description }}\n          </CardDescription>\n        </div>\n\n        <!-- Inspector Tab Navigation Buttons -->\n        <div class=\"bg-muted/60 flex flex-wrap items-center gap-1 rounded-lg border p-1\">\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                activeInspectorTab === 'subtasks'\n                  ? 'bg-card text-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"activeInspectorTab = 'subtasks'\"\n          >\n            Subtasks & Distribution\n          </button>\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                activeInspectorTab === 'state'\n                  ? 'bg-card text-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"activeInspectorTab = 'state'\"\n          >\n            RocksDB Managed State\n          </button>\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                activeInspectorTab === 'resources'\n                  ? 'bg-card text-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"activeInspectorTab = 'resources'\"\n          >\n            JVM & GC Telemetry\n          </button>\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                activeInspectorTab === 'config'\n                  ? 'bg-card text-foreground font-semibold shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"activeInspectorTab = 'config'\"\n          >\n            Configuration Parameters\n          </button>\n        </div>\n      </div>\n    </CardHeader>\n\n    <!-- Key Operator Telemetry Bar -->\n    <div class=\"bg-muted/20 divide-border/60 grid grid-cols-2 divide-x border-y sm:grid-cols-4 lg:grid-cols-6\">\n      <div class=\"p-3\">\n        <div class=\"text-muted-foreground text-xs font-medium\">Input Rate</div>\n        <div class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">\n          {{ operator.inputRecordsRate }}\n        </div>\n        <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ operator.inputBytesRate }}</div>\n      </div>\n      <div class=\"p-3\">\n        <div class=\"text-muted-foreground text-xs font-medium\">Output Rate</div>\n        <div class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">\n          {{ operator.outputRecordsRate }}\n        </div>\n        <div class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ operator.outputBytesRate }}</div>\n      </div>\n      <div class=\"p-3\">\n        <div class=\"text-muted-foreground text-xs font-medium\">Managed State</div>\n        <div class=\"text-primary mt-0.5 font-mono text-sm font-bold tabular-nums\">\n          {{ operator.managedStateSize }}\n        </div>\n        <div class=\"text-muted-foreground truncate font-mono text-xs\">{{ operator.stateBackend }}</div>\n      </div>\n      <div class=\"p-3\">\n        <div class=\"text-muted-foreground text-xs font-medium\">Watermark Lag</div>\n        <div class=\"text-success text-success mt-0.5 font-mono text-sm font-bold tabular-nums\">\n          {{ operator.watermarkLag }}\n        </div>\n        <div class=\"text-muted-foreground font-mono text-xs\">Event Time OK</div>\n      </div>\n      <div class=\"p-3\">\n        <div class=\"text-muted-foreground text-xs font-medium\">CPU Core Load</div>\n        <div class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">\n          {{ operator.cpuPeak }}\n        </div>\n        <div class=\"text-muted-foreground font-mono text-xs\">Across {{ operator.parallelism }} cores</div>\n      </div>\n      <div class=\"p-3\">\n        <div class=\"text-muted-foreground text-xs font-medium\">GC Pause Time</div>\n        <div class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">\n          {{ operator.gcTime }}\n        </div>\n        <div class=\"text-muted-foreground font-mono text-xs\">G1 Garbage Collector</div>\n      </div>\n    </div>\n\n    <CardContent class=\"p-0\">\n      <!-- TAB 1: Subtasks Table -->\n      <div v-if=\"activeInspectorTab === 'subtasks'\" class=\"overflow-x-auto\">\n        <Table density=\"cozy\">\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"text-xs font-semibold\">Subtask Index</TableHead>\n              <TableHead class=\"text-xs font-semibold\">Host / Pod</TableHead>\n              <TableHead class=\"text-right text-xs font-semibold\">Input Rate</TableHead>\n              <TableHead class=\"text-right text-xs font-semibold\">Output Rate</TableHead>\n              <TableHead class=\"text-right text-xs font-semibold\">CPU %</TableHead>\n              <TableHead class=\"text-right text-xs font-semibold\">Heap Usage</TableHead>\n              <TableHead class=\"text-right text-xs font-semibold\">Watermark Lag</TableHead>\n              <TableHead class=\"text-right text-xs font-semibold\">Checkpoint Ack</TableHead>\n              <TableHead class=\"text-center text-xs font-semibold\">Status</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow v-for=\"subtask in operator.subtasks\" :key=\"subtask.id\" class=\"group\">\n              <TableCell class=\"py-2.5\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\" />\n                  <span class=\"font-mono text-xs font-semibold\">Subtask #{{ subtask.id }}</span>\n                </div>\n              </TableCell>\n              <TableCell class=\"text-muted-foreground py-2.5 font-mono text-xs\">\n                {{ subtask.host }}\n              </TableCell>\n              <TableCell class=\"text-foreground py-2.5 text-right font-mono text-xs font-medium tabular-nums\">\n                {{ subtask.inRate }}\n              </TableCell>\n              <TableCell class=\"text-foreground py-2.5 text-right font-mono text-xs font-medium tabular-nums\">\n                {{ subtask.outRate }}\n              </TableCell>\n              <TableCell class=\"py-2.5 text-right font-mono text-xs tabular-nums\">\n                <Badge variant=\"outline\" class=\"font-mono text-xs\">{{ subtask.cpu }}</Badge>\n              </TableCell>\n              <TableCell class=\"text-muted-foreground py-2.5 text-right font-mono text-xs tabular-nums\">\n                {{ subtask.heapMemory }}\n              </TableCell>\n              <TableCell class=\"text-success text-success py-2.5 text-right font-mono text-xs font-medium tabular-nums\">\n                {{ subtask.watermarkLag }}\n              </TableCell>\n              <TableCell class=\"text-muted-foreground py-2.5 text-right font-mono text-xs tabular-nums\">\n                {{ subtask.checkpointAckMs }}ms\n              </TableCell>\n              <TableCell class=\"py-2.5 text-center\">\n                <Badge variant=\"success\" class=\"font-mono text-xs\">\n                  {{ subtask.status }}\n                </Badge>\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n\n      <!-- TAB 2: RocksDB Managed State -->\n      <div v-else-if=\"activeInspectorTab === 'state'\" class=\"space-y-5 p-5\">\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n          <div class=\"bg-muted/10 space-y-2 rounded-lg border p-4\">\n            <div class=\"text-muted-foreground text-xs font-medium\">State Backend Engine</div>\n            <div class=\"text-foreground font-mono text-base font-bold\">{{ operator.stateBackend }}</div>\n            <p class=\"text-muted-foreground text-xs\">\n              Off-heap SSD persistence with block caching and incremental checkpoints\n            </p>\n          </div>\n          <div class=\"bg-muted/10 space-y-2 rounded-lg border p-4\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Total Live State Size</div>\n            <div class=\"text-primary font-mono text-base font-bold\">{{ operator.managedStateSize }}</div>\n            <p class=\"text-muted-foreground text-xs\">Incremental checkpoint delta: ~2.4 MB / snapshot</p>\n          </div>\n          <div class=\"bg-muted/10 space-y-2 rounded-lg border p-4\">\n            <div class=\"text-muted-foreground text-xs font-medium\">Key Eviction & TTL</div>\n            <div class=\"text-foreground font-mono text-base font-bold\">10-min Sliding TTL</div>\n            <p class=\"text-muted-foreground text-xs\">\n              Automatic compaction filter evicts expired cardholder keys on disk\n            </p>\n          </div>\n        </div>\n\n        <!-- RocksDB Performance Metrics Grid -->\n        <div class=\"bg-card space-y-3 rounded-lg border p-4\">\n          <h4 class=\"text-foreground text-xs font-semibold\">RocksDB Native Engine Statistics</h4>\n          <div class=\"grid grid-cols-2 gap-4 font-mono text-xs sm:grid-cols-4\">\n            <div>\n              <span class=\"text-muted-foreground\">Block Cache Hit Ratio:</span>\n              <div class=\"text-foreground mt-0.5 font-bold tabular-nums\">99.42% (512 MB cache)</div>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">MemTable Flush Rate:</span>\n              <div class=\"text-foreground mt-0.5 font-bold tabular-nums\">14.2 MB/min</div>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">SST Files Count:</span>\n              <div class=\"text-foreground mt-0.5 font-bold tabular-nums\">128 active SSTs</div>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">Level-0 Compaction Stall:</span>\n              <div class=\"text-success text-success mt-0.5 font-bold tabular-nums\">0.0ms (No stalls)</div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- TAB 3: JVM & Resource Metrics -->\n      <div v-else-if=\"activeInspectorTab === 'resources'\" class=\"space-y-5 p-5\">\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n          <div class=\"bg-muted/10 space-y-3 rounded-lg border p-4\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-foreground font-medium\">JVM Heap Memory Utilization</span>\n              <span class=\"text-muted-foreground font-mono\">{{ operator.heapMemory }} / 4,096 MB</span>\n            </div>\n            <Progress :model-value=\"34\" class=\"h-2\" />\n            <div class=\"text-muted-foreground flex justify-between font-mono text-xs\">\n              <span>Survivor: 64 MB</span>\n              <span>Tenured / Old: 348 MB</span>\n            </div>\n          </div>\n\n          <div class=\"bg-muted/10 space-y-3 rounded-lg border p-4\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-foreground font-medium\">Managed Off-Heap & Native Memory</span>\n              <span class=\"text-muted-foreground font-mono\">{{ operator.managedMemory }} Allocated</span>\n            </div>\n            <Progress :model-value=\"50\" class=\"h-2\" />\n            <div class=\"text-muted-foreground flex justify-between font-mono text-xs\">\n              <span>RocksDB Cache: 512 MB</span>\n              <span>Network Buffers: 256 MB</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"bg-card space-y-2 rounded-lg border p-4\">\n          <div class=\"text-foreground text-xs font-semibold\">Garbage Collection Profile</div>\n          <p class=\"text-muted-foreground font-mono text-xs\">\n            Collector: Garbage-First (G1) GC · Max Pause Target: 20ms · Current Observed Pause:\n            {{ operator.gcTime }}\n          </p>\n        </div>\n      </div>\n\n      <!-- TAB 4: Configuration Parameters -->\n      <div v-else class=\"space-y-4 p-5\">\n        <div class=\"overflow-hidden rounded-lg border\">\n          <div class=\"bg-muted/50 text-foreground flex items-center justify-between border-b p-3 text-xs font-semibold\">\n            <span>Runtime Operator Configuration</span>\n            <Badge variant=\"outline\" class=\"font-mono text-xs\">{{ operator.operatorClass }}</Badge>\n          </div>\n          <div class=\"divide-y font-mono text-xs\">\n            <div\n              v-for=\"(val, key) in operator.config\"\n              :key=\"key\"\n              class=\"hover:bg-muted/20 flex flex-col justify-between gap-2 p-3 transition-colors sm:flex-row sm:items-center\"\n            >\n              <span class=\"text-muted-foreground font-medium\">{{ key }}</span>\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-foreground font-semibold\">{{ val }}</span>\n                <Button\n                  :aria-label=\"`Copy ${key}`\"\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  class=\"text-muted-foreground hover:text-foreground h-6 w-6 p-0\"\n                  @click=\"emit('copy', String(key), String(val))\"\n                >\n                  <Check v-if=\"copiedKey === String(key)\" class=\"text-success size-3\" />\n                  <Copy v-else class=\"size-3\" />\n                </Button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n\n    <!-- Bottom Engine Metadata Strip -->\n    <div\n      class=\"bg-muted/40 flex flex-col gap-2.5 border-t px-4 py-3 font-mono text-xs sm:flex-row sm:items-center sm:justify-between\"\n    >\n      <div class=\"text-muted-foreground flex flex-wrap items-center gap-4\">\n        <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n          <Activity class=\"text-success size-3.5\" aria-hidden=\"true\" />\n          <span>Pipeline Ingestion:</span>\n          <span>42,500 records/sec (8.4 MB/s)</span>\n        </div>\n\n        <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n\n        <div class=\"flex items-center gap-1.5\">\n          <Server class=\"text-info size-3.5\" aria-hidden=\"true\" />\n          <span>TaskManagers:</span>\n          <span class=\"text-foreground\">8 Kubernetes Pods</span>\n        </div>\n\n        <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n\n        <div class=\"flex items-center gap-1.5\">\n          <ShieldCheck class=\"text-success size-3.5\" aria-hidden=\"true\" />\n          <span>State Consistency:</span>\n          <span class=\"text-foreground\">Exactly-Once (2PC)</span>\n        </div>\n      </div>\n\n      <div class=\"text-muted-foreground flex items-center gap-2\">\n        <span class=\"bg-success size-1.5 rounded-full\" />\n        <span>Watermark Alignment: 42ms · Checkpoint #1,420 OK</span>\n      </div>\n    </div>\n  </Card>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/StreamOperatorDetail.vue"
    },
    {
      "path": "packages/registry-vue/blocks/stream-processing-flink-topology/StreamTopologyTelemetry.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Activity, Clock, Flame, Zap } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn('grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4', props.class)\">\n    <!-- Card 1: Current Ingestion Throughput -->\n    <Card class=\"flex flex-col justify-between shadow-xs\">\n      <CardHeader class=\"pb-2\">\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"flex min-w-0 items-center gap-2\">\n            <div\n              class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n              aria-hidden=\"true\"\n            >\n              <Activity class=\"text-primary size-4\" />\n            </div>\n            <CardTitle class=\"truncate text-xs font-medium\">Current Ingestion Throughput</CardTitle>\n          </div>\n          <Badge variant=\"outline\" class=\"shrink-0 text-xs font-normal tabular-nums\"> +4.2% 10m </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-3\">\n        <div>\n          <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">42,500 records/sec</div>\n          <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">8.4 MB/s ingress bandwidth</p>\n        </div>\n        <div class=\"space-y-1.5\">\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span>Ingress Capacity</span>\n            <span class=\"text-foreground font-mono font-medium tabular-nums\">68% allocated</span>\n          </div>\n          <Progress :model-value=\"68\" class=\"h-1.5\" />\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Card 2: Checkpoint Duration -->\n    <Card class=\"flex flex-col justify-between shadow-xs\">\n      <CardHeader class=\"pb-2\">\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"flex min-w-0 items-center gap-2\">\n            <div\n              class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n              aria-hidden=\"true\"\n            >\n              <Clock class=\"text-success size-4\" />\n            </div>\n            <CardTitle class=\"truncate text-xs font-medium\">Checkpoint Duration</CardTitle>\n          </div>\n          <Badge variant=\"success\" class=\"shrink-0 font-mono text-xs\"> 100% Succeeded </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-3\">\n        <div>\n          <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">185ms duration</div>\n          <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">42 MB state size · Checkpoint #1,420</p>\n        </div>\n        <div class=\"space-y-1.5\">\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span>SLA Budget (1,000ms)</span>\n            <span class=\"text-foreground font-mono font-medium tabular-nums\">18.5% of interval</span>\n          </div>\n          <Progress :model-value=\"18.5\" class=\"h-1.5\" />\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Card 3: Watermark Alignment Latency -->\n    <Card class=\"flex flex-col justify-between shadow-xs\">\n      <CardHeader class=\"pb-2\">\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"flex min-w-0 items-center gap-2\">\n            <div\n              class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n              aria-hidden=\"true\"\n            >\n              <Zap class=\"text-warning size-4\" />\n            </div>\n            <CardTitle class=\"truncate text-xs font-medium\">Watermark Alignment</CardTitle>\n          </div>\n          <Badge variant=\"outline\" class=\"border-success/30 text-success font-mono text-xs\"> Event Time </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-3\">\n        <div>\n          <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">Lag: 42ms</div>\n          <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">Event Time Alignment · 0 Late Drops</p>\n        </div>\n        <div class=\"space-y-1.5\">\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span>Skew Drift</span>\n            <span class=\"text-foreground font-mono font-medium tabular-nums\">Max 12ms cross-partition</span>\n          </div>\n          <Progress :model-value=\"8.4\" class=\"h-1.5\" />\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Card 4: Max Backpressure Heat Ratio -->\n    <Card class=\"flex flex-col justify-between shadow-xs\">\n      <CardHeader class=\"pb-2\">\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"flex min-w-0 items-center gap-2\">\n            <div\n              class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n              aria-hidden=\"true\"\n            >\n              <Flame class=\"text-success size-4\" />\n            </div>\n            <CardTitle class=\"truncate text-xs font-medium\">Max Backpressure Heat</CardTitle>\n          </div>\n          <Badge variant=\"success\" class=\"shrink-0 font-mono text-xs\"> Low Risk </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-3\">\n        <div>\n          <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">0.0% Backpressure</div>\n          <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">All 4 operators running at nominal load</p>\n        </div>\n        <div class=\"space-y-1.5\">\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span>Choked Subtasks</span>\n            <span class=\"text-success text-success font-mono font-medium tabular-nums\">0 / 48 active</span>\n          </div>\n          <Progress :model-value=\"0\" class=\"h-1.5\" />\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/StreamTopologyTelemetry.vue"
    },
    {
      "path": "packages/registry-vue/blocks/stream-processing-flink-topology/stream-topology-types.ts",
      "content": "export interface FlinkSubtask {\n  id: number\n  host: string\n  status: 'RUNNING' | 'DEPLOYING' | 'RECONCILING'\n  inRate: string\n  outRate: string\n  cpu: string\n  heapMemory: string\n  backpressure: number\n  watermarkLag: string\n  checkpointAckMs: number\n}\n\nexport interface FlinkOperatorNode {\n  id: string\n  name: string\n  shortTitle: string\n  stageNumber: number\n  category: 'source' | 'window' | 'inference' | 'sink'\n  operatorClass: string\n  parallelism: number\n  status: 'RUNNING' | 'CANCELED' | 'FAILING'\n  backpressure: number\n  inputRecordsRate: string\n  inputBytesRate: string\n  outputRecordsRate: string\n  outputBytesRate: string\n  totalRecordsIn: number\n  totalRecordsOut: number\n  managedStateSize: string\n  stateBackend: string\n  heapMemory: string\n  managedMemory: string\n  gcTime: string\n  cpuPeak: string\n  watermarkLag: string\n  currentWatermark: string\n  description: string\n  config: Record<string, string>\n  subtasks: FlinkSubtask[]\n}\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/stream-topology-types.ts"
    },
    {
      "path": "packages/registry-vue/blocks/stream-processing-flink-topology/stream-topology-data.ts",
      "content": "import type { FlinkOperatorNode } from './stream-topology-types'\n\nexport const defaultFlinkOperators: FlinkOperatorNode[] = [\n  {\n    id: 'op-kafka-source',\n    name: 'Source: Kafka Ingestion (events.fraud.transactions)',\n    shortTitle: 'Kafka Ingestion Source',\n    stageNumber: 1,\n    category: 'source',\n    operatorClass: 'org.apache.flink.connector.kafka.source.KafkaSource',\n    parallelism: 8,\n    status: 'RUNNING',\n    backpressure: 0.0,\n    inputRecordsRate: '42,500 rec/s',\n    inputBytesRate: '8.4 MB/s',\n    outputRecordsRate: '42,500 rec/s',\n    outputBytesRate: '8.4 MB/s',\n    totalRecordsIn: 184290410,\n    totalRecordsOut: 184290410,\n    managedStateSize: '0 MB (Stateless)',\n    stateBackend: 'None (Stateless Source)',\n    heapMemory: '412 MB',\n    managedMemory: '0 MB',\n    gcTime: '0.8 ms/min',\n    cpuPeak: '14%',\n    watermarkLag: '28ms',\n    currentWatermark: '2026-08-21 14:32:45.892 UTC',\n    description:\n      'Consumes high-throughput payment transaction stream with snappy decompression and bounded out-of-orderness watermark generation.',\n    config: {\n      topic: 'events.fraud.transactions',\n      'consumer.group.id': 'flink-fraud-scoring-v2',\n      'scan.startup.mode': 'latest-offset',\n      'watermark.strategy': 'BoundedOutOfOrderness(Duration.ofMillis(200))',\n      'partition.discovery.interval.ms': '30000',\n      'deserializer.format': 'AvroConfluentSchemaRegistry',\n    },\n    subtasks: [\n      {\n        id: 0,\n        host: 'taskmanager-pod-0.k8s',\n        status: 'RUNNING',\n        inRate: '5,320 rec/s',\n        outRate: '5,320 rec/s',\n        cpu: '14%',\n        heapMemory: '52 MB',\n        backpressure: 0.0,\n        watermarkLag: '22ms',\n        checkpointAckMs: 42,\n      },\n      {\n        id: 1,\n        host: 'taskmanager-pod-0.k8s',\n        status: 'RUNNING',\n        inRate: '5,310 rec/s',\n        outRate: '5,310 rec/s',\n        cpu: '13%',\n        heapMemory: '51 MB',\n        backpressure: 0.0,\n        watermarkLag: '24ms',\n        checkpointAckMs: 44,\n      },\n      {\n        id: 2,\n        host: 'taskmanager-pod-1.k8s',\n        status: 'RUNNING',\n        inRate: '5,315 rec/s',\n        outRate: '5,315 rec/s',\n        cpu: '15%',\n        heapMemory: '53 MB',\n        backpressure: 0.0,\n        watermarkLag: '26ms',\n        checkpointAckMs: 41,\n      },\n      {\n        id: 3,\n        host: 'taskmanager-pod-1.k8s',\n        status: 'RUNNING',\n        inRate: '5,305 rec/s',\n        outRate: '5,305 rec/s',\n        cpu: '14%',\n        heapMemory: '50 MB',\n        backpressure: 0.0,\n        watermarkLag: '23ms',\n        checkpointAckMs: 45,\n      },\n      {\n        id: 4,\n        host: 'taskmanager-pod-2.k8s',\n        status: 'RUNNING',\n        inRate: '5,325 rec/s',\n        outRate: '5,325 rec/s',\n        cpu: '14%',\n        heapMemory: '52 MB',\n        backpressure: 0.0,\n        watermarkLag: '25ms',\n        checkpointAckMs: 40,\n      },\n      {\n        id: 5,\n        host: 'taskmanager-pod-2.k8s',\n        status: 'RUNNING',\n        inRate: '5,310 rec/s',\n        outRate: '5,310 rec/s',\n        cpu: '13%',\n        heapMemory: '51 MB',\n        backpressure: 0.0,\n        watermarkLag: '24ms',\n        checkpointAckMs: 43,\n      },\n      {\n        id: 6,\n        host: 'taskmanager-pod-3.k8s',\n        status: 'RUNNING',\n        inRate: '5,308 rec/s',\n        outRate: '5,308 rec/s',\n        cpu: '15%',\n        heapMemory: '52 MB',\n        backpressure: 0.0,\n        watermarkLag: '28ms',\n        checkpointAckMs: 42,\n      },\n      {\n        id: 7,\n        host: 'taskmanager-pod-3.k8s',\n        status: 'RUNNING',\n        inRate: '5,307 rec/s',\n        outRate: '5,307 rec/s',\n        cpu: '14%',\n        heapMemory: '51 MB',\n        backpressure: 0.0,\n        watermarkLag: '25ms',\n        checkpointAckMs: 43,\n      },\n    ],\n  },\n  {\n    id: 'op-keyed-window',\n    name: 'Keyed Sliding Window (5-min window, 10s slide)',\n    shortTitle: 'Keyed Sliding Window',\n    stageNumber: 2,\n    category: 'window',\n    operatorClass: 'org.apache.flink.streaming.runtime.operators.windowing.WindowOperator',\n    parallelism: 16,\n    status: 'RUNNING',\n    backpressure: 0.0,\n    inputRecordsRate: '42,500 rec/s',\n    inputBytesRate: '8.4 MB/s',\n    outputRecordsRate: '38,200 rec/s',\n    outputBytesRate: '6.9 MB/s',\n    totalRecordsIn: 184290410,\n    totalRecordsOut: 165861369,\n    managedStateSize: '18.4 MB (RocksDB)',\n    stateBackend: 'EmbeddedRocksDBStateBackend',\n    heapMemory: '780 MB',\n    managedMemory: '1,024 MB',\n    gcTime: '1.2 ms/min',\n    cpuPeak: '28%',\n    watermarkLag: '34ms',\n    currentWatermark: '2026-08-21 14:32:45.886 UTC',\n    description:\n      'Aggregates velocity, cumulative transaction volumes, and rapid card-testing frequency per cardholder ID across 5m windows triggered every 10s.',\n    config: {\n      'window.assigner': 'SlidingEventTimeWindows.of(Time.minutes(5), Time.seconds(10))',\n      'allowed.lateness': '0ms',\n      'state.backend.ttl': '600000ms (10m TTL)',\n      'state.active.cardholders': '12,400 keys in state',\n      trigger: 'EventTimeTrigger.create()',\n      evictor: 'TimeEvictor.of(Time.minutes(5))',\n    },\n    subtasks: [\n      {\n        id: 0,\n        host: 'taskmanager-pod-0.k8s',\n        status: 'RUNNING',\n        inRate: '2,660 rec/s',\n        outRate: '2,390 rec/s',\n        cpu: '28%',\n        heapMemory: '49 MB',\n        backpressure: 0.0,\n        watermarkLag: '32ms',\n        checkpointAckMs: 65,\n      },\n      {\n        id: 1,\n        host: 'taskmanager-pod-0.k8s',\n        status: 'RUNNING',\n        inRate: '2,655 rec/s',\n        outRate: '2,385 rec/s',\n        cpu: '27%',\n        heapMemory: '48 MB',\n        backpressure: 0.0,\n        watermarkLag: '34ms',\n        checkpointAckMs: 68,\n      },\n      {\n        id: 2,\n        host: 'taskmanager-pod-1.k8s',\n        status: 'RUNNING',\n        inRate: '2,662 rec/s',\n        outRate: '2,392 rec/s',\n        cpu: '29%',\n        heapMemory: '50 MB',\n        backpressure: 0.0,\n        watermarkLag: '33ms',\n        checkpointAckMs: 64,\n      },\n      {\n        id: 3,\n        host: 'taskmanager-pod-1.k8s',\n        status: 'RUNNING',\n        inRate: '2,650 rec/s',\n        outRate: '2,380 rec/s',\n        cpu: '28%',\n        heapMemory: '48 MB',\n        backpressure: 0.0,\n        watermarkLag: '35ms',\n        checkpointAckMs: 66,\n      },\n      {\n        id: 4,\n        host: 'taskmanager-pod-2.k8s',\n        status: 'RUNNING',\n        inRate: '2,658 rec/s',\n        outRate: '2,388 rec/s',\n        cpu: '27%',\n        heapMemory: '49 MB',\n        backpressure: 0.0,\n        watermarkLag: '34ms',\n        checkpointAckMs: 65,\n      },\n      {\n        id: 5,\n        host: 'taskmanager-pod-2.k8s',\n        status: 'RUNNING',\n        inRate: '2,654 rec/s',\n        outRate: '2,386 rec/s',\n        cpu: '29%',\n        heapMemory: '50 MB',\n        backpressure: 0.0,\n        watermarkLag: '33ms',\n        checkpointAckMs: 67,\n      },\n      {\n        id: 6,\n        host: 'taskmanager-pod-3.k8s',\n        status: 'RUNNING',\n        inRate: '2,660 rec/s',\n        outRate: '2,390 rec/s',\n        cpu: '28%',\n        heapMemory: '49 MB',\n        backpressure: 0.0,\n        watermarkLag: '35ms',\n        checkpointAckMs: 66,\n      },\n      {\n        id: 7,\n        host: 'taskmanager-pod-3.k8s',\n        status: 'RUNNING',\n        inRate: '2,652 rec/s',\n        outRate: '2,384 rec/s',\n        cpu: '28%',\n        heapMemory: '48 MB',\n        backpressure: 0.0,\n        watermarkLag: '34ms',\n        checkpointAckMs: 64,\n      },\n      {\n        id: 8,\n        host: 'taskmanager-pod-4.k8s',\n        status: 'RUNNING',\n        inRate: '2,659 rec/s',\n        outRate: '2,389 rec/s',\n        cpu: '29%',\n        heapMemory: '50 MB',\n        backpressure: 0.0,\n        watermarkLag: '33ms',\n        checkpointAckMs: 65,\n      },\n      {\n        id: 9,\n        host: 'taskmanager-pod-4.k8s',\n        status: 'RUNNING',\n        inRate: '2,655 rec/s',\n        outRate: '2,385 rec/s',\n        cpu: '27%',\n        heapMemory: '48 MB',\n        backpressure: 0.0,\n        watermarkLag: '36ms',\n        checkpointAckMs: 68,\n      },\n      {\n        id: 10,\n        host: 'taskmanager-pod-5.k8s',\n        status: 'RUNNING',\n        inRate: '2,661 rec/s',\n        outRate: '2,391 rec/s',\n        cpu: '28%',\n        heapMemory: '49 MB',\n        backpressure: 0.0,\n        watermarkLag: '34ms',\n        checkpointAckMs: 63,\n      },\n      {\n        id: 11,\n        host: 'taskmanager-pod-5.k8s',\n        status: 'RUNNING',\n        inRate: '2,650 rec/s',\n        outRate: '2,380 rec/s',\n        cpu: '28%',\n        heapMemory: '48 MB',\n        backpressure: 0.0,\n        watermarkLag: '35ms',\n        checkpointAckMs: 66,\n      },\n      {\n        id: 12,\n        host: 'taskmanager-pod-6.k8s',\n        status: 'RUNNING',\n        inRate: '2,657 rec/s',\n        outRate: '2,387 rec/s',\n        cpu: '27%',\n        heapMemory: '49 MB',\n        backpressure: 0.0,\n        watermarkLag: '33ms',\n        checkpointAckMs: 67,\n      },\n      {\n        id: 13,\n        host: 'taskmanager-pod-6.k8s',\n        status: 'RUNNING',\n        inRate: '2,653 rec/s',\n        outRate: '2,383 rec/s',\n        cpu: '29%',\n        heapMemory: '50 MB',\n        backpressure: 0.0,\n        watermarkLag: '34ms',\n        checkpointAckMs: 65,\n      },\n      {\n        id: 14,\n        host: 'taskmanager-pod-7.k8s',\n        status: 'RUNNING',\n        inRate: '2,658 rec/s',\n        outRate: '2,388 rec/s',\n        cpu: '28%',\n        heapMemory: '49 MB',\n        backpressure: 0.0,\n        watermarkLag: '35ms',\n        checkpointAckMs: 66,\n      },\n      {\n        id: 15,\n        host: 'taskmanager-pod-7.k8s',\n        status: 'RUNNING',\n        inRate: '2,651 rec/s',\n        outRate: '2,382 rec/s',\n        cpu: '28%',\n        heapMemory: '48 MB',\n        backpressure: 0.0,\n        watermarkLag: '34ms',\n        checkpointAckMs: 64,\n      },\n    ],\n  },\n  {\n    id: 'op-ml-scoring',\n    name: 'ML Fraud Scoring Pattern Matcher (CEP + XGBoost ONNX)',\n    shortTitle: 'ML Fraud Scoring Pattern Matcher',\n    stageNumber: 3,\n    category: 'inference',\n    operatorClass: 'com.uipkge.fraud.engine.AsyncFraudScoringKeyedProcessFunction',\n    parallelism: 16,\n    status: 'RUNNING',\n    backpressure: 0.0,\n    inputRecordsRate: '38,200 rec/s',\n    inputBytesRate: '6.9 MB/s',\n    outputRecordsRate: '38,200 rec/s',\n    outputBytesRate: '7.1 MB/s',\n    totalRecordsIn: 165861369,\n    totalRecordsOut: 165861369,\n    managedStateSize: '38.2 MB (RocksDB)',\n    stateBackend: 'EmbeddedRocksDBStateBackend',\n    heapMemory: '1,420 MB',\n    managedMemory: '2,048 MB',\n    gcTime: '1.4 ms/min',\n    cpuPeak: '38%',\n    watermarkLag: '38ms',\n    currentWatermark: '2026-08-21 14:32:45.882 UTC',\n    description:\n      'Evaluates stateful complex event patterns (CEP) and executes low-latency XGBoost model scoring via embedded ONNX native runtime.',\n    config: {\n      'model.runtime': 'ONNX Runtime 1.18 (AVX-512)',\n      'model.artifact': 's3://ml-models-registry/fraud/xgboost_v4_18.onnx',\n      'inference.latency.p99': '1.2ms',\n      'rocksdb.block.cache.size': '512 MB',\n      'rocksdb.compaction.style': 'LEVEL',\n      'alert.confidence.threshold': '0.85',\n    },\n    subtasks: [\n      {\n        id: 0,\n        host: 'taskmanager-pod-0.k8s',\n        status: 'RUNNING',\n        inRate: '2,390 rec/s',\n        outRate: '2,390 rec/s',\n        cpu: '38%',\n        heapMemory: '89 MB',\n        backpressure: 0.0,\n        watermarkLag: '37ms',\n        checkpointAckMs: 110,\n      },\n      {\n        id: 1,\n        host: 'taskmanager-pod-0.k8s',\n        status: 'RUNNING',\n        inRate: '2,385 rec/s',\n        outRate: '2,385 rec/s',\n        cpu: '37%',\n        heapMemory: '88 MB',\n        backpressure: 0.0,\n        watermarkLag: '38ms',\n        checkpointAckMs: 114,\n      },\n      {\n        id: 2,\n        host: 'taskmanager-pod-1.k8s',\n        status: 'RUNNING',\n        inRate: '2,392 rec/s',\n        outRate: '2,392 rec/s',\n        cpu: '39%',\n        heapMemory: '90 MB',\n        backpressure: 0.0,\n        watermarkLag: '36ms',\n        checkpointAckMs: 108,\n      },\n      {\n        id: 3,\n        host: 'taskmanager-pod-1.k8s',\n        status: 'RUNNING',\n        inRate: '2,380 rec/s',\n        outRate: '2,380 rec/s',\n        cpu: '38%',\n        heapMemory: '87 MB',\n        backpressure: 0.0,\n        watermarkLag: '39ms',\n        checkpointAckMs: 112,\n      },\n      {\n        id: 4,\n        host: 'taskmanager-pod-2.k8s',\n        status: 'RUNNING',\n        inRate: '2,388 rec/s',\n        outRate: '2,388 rec/s',\n        cpu: '37%',\n        heapMemory: '88 MB',\n        backpressure: 0.0,\n        watermarkLag: '38ms',\n        checkpointAckMs: 111,\n      },\n      {\n        id: 5,\n        host: 'taskmanager-pod-2.k8s',\n        status: 'RUNNING',\n        inRate: '2,386 rec/s',\n        outRate: '2,386 rec/s',\n        cpu: '39%',\n        heapMemory: '90 MB',\n        backpressure: 0.0,\n        watermarkLag: '37ms',\n        checkpointAckMs: 115,\n      },\n      {\n        id: 6,\n        host: 'taskmanager-pod-3.k8s',\n        status: 'RUNNING',\n        inRate: '2,390 rec/s',\n        outRate: '2,390 rec/s',\n        cpu: '38%',\n        heapMemory: '89 MB',\n        backpressure: 0.0,\n        watermarkLag: '39ms',\n        checkpointAckMs: 110,\n      },\n      {\n        id: 7,\n        host: 'taskmanager-pod-3.k8s',\n        status: 'RUNNING',\n        inRate: '2,384 rec/s',\n        outRate: '2,384 rec/s',\n        cpu: '37%',\n        heapMemory: '87 MB',\n        backpressure: 0.0,\n        watermarkLag: '38ms',\n        checkpointAckMs: 112,\n      },\n      {\n        id: 8,\n        host: 'taskmanager-pod-4.k8s',\n        status: 'RUNNING',\n        inRate: '2,389 rec/s',\n        outRate: '2,389 rec/s',\n        cpu: '38%',\n        heapMemory: '89 MB',\n        backpressure: 0.0,\n        watermarkLag: '37ms',\n        checkpointAckMs: 109,\n      },\n      {\n        id: 9,\n        host: 'taskmanager-pod-4.k8s',\n        status: 'RUNNING',\n        inRate: '2,385 rec/s',\n        outRate: '2,385 rec/s',\n        cpu: '37%',\n        heapMemory: '88 MB',\n        backpressure: 0.0,\n        watermarkLag: '39ms',\n        checkpointAckMs: 113,\n      },\n      {\n        id: 10,\n        host: 'taskmanager-pod-5.k8s',\n        status: 'RUNNING',\n        inRate: '2,391 rec/s',\n        outRate: '2,391 rec/s',\n        cpu: '39%',\n        heapMemory: '90 MB',\n        backpressure: 0.0,\n        watermarkLag: '37ms',\n        checkpointAckMs: 108,\n      },\n      {\n        id: 11,\n        host: 'taskmanager-pod-5.k8s',\n        status: 'RUNNING',\n        inRate: '2,380 rec/s',\n        outRate: '2,380 rec/s',\n        cpu: '38%',\n        heapMemory: '87 MB',\n        backpressure: 0.0,\n        watermarkLag: '38ms',\n        checkpointAckMs: 112,\n      },\n      {\n        id: 12,\n        host: 'taskmanager-pod-6.k8s',\n        status: 'RUNNING',\n        inRate: '2,387 rec/s',\n        outRate: '2,387 rec/s',\n        cpu: '37%',\n        heapMemory: '88 MB',\n        backpressure: 0.0,\n        watermarkLag: '36ms',\n        checkpointAckMs: 111,\n      },\n      {\n        id: 13,\n        host: 'taskmanager-pod-6.k8s',\n        status: 'RUNNING',\n        inRate: '2,383 rec/s',\n        outRate: '2,383 rec/s',\n        cpu: '39%',\n        heapMemory: '90 MB',\n        backpressure: 0.0,\n        watermarkLag: '38ms',\n        checkpointAckMs: 114,\n      },\n      {\n        id: 14,\n        host: 'taskmanager-pod-7.k8s',\n        status: 'RUNNING',\n        inRate: '2,388 rec/s',\n        outRate: '2,388 rec/s',\n        cpu: '38%',\n        heapMemory: '89 MB',\n        backpressure: 0.0,\n        watermarkLag: '39ms',\n        checkpointAckMs: 110,\n      },\n      {\n        id: 15,\n        host: 'taskmanager-pod-7.k8s',\n        status: 'RUNNING',\n        inRate: '2,382 rec/s',\n        outRate: '2,382 rec/s',\n        cpu: '38%',\n        heapMemory: '88 MB',\n        backpressure: 0.0,\n        watermarkLag: '37ms',\n        checkpointAckMs: 112,\n      },\n    ],\n  },\n  {\n    id: 'op-sink-dispatcher',\n    name: 'Sink: Alert Dispatcher & Redis Cache',\n    shortTitle: 'Sink: Alert Dispatcher & Redis Cache',\n    stageNumber: 4,\n    category: 'sink',\n    operatorClass: 'com.uipkge.fraud.sink.TwoPhaseCommitRedisAlertSink',\n    parallelism: 8,\n    status: 'RUNNING',\n    backpressure: 0.0,\n    inputRecordsRate: '38,200 rec/s',\n    inputBytesRate: '7.1 MB/s',\n    outputRecordsRate: '42,500 rec/s',\n    outputBytesRate: '9.2 MB/s',\n    totalRecordsIn: 165861369,\n    totalRecordsOut: 165861369,\n    managedStateSize: '0.4 MB (2PC WAL)',\n    stateBackend: 'Transactional Two-Phase Commit',\n    heapMemory: '380 MB',\n    managedMemory: '128 MB',\n    gcTime: '0.9 ms/min',\n    cpuPeak: '16%',\n    watermarkLag: '42ms',\n    currentWatermark: '2026-08-21 14:32:45.878 UTC',\n    description:\n      'Commits risk scoring states to Redis Cluster for zero-latency checkout authorization gates and pushes flagged transactions to incident queues.',\n    config: {\n      'sink.semantics': 'EXACTLY_ONCE (2PC Transactional)',\n      'redis.cluster.nodes': 'redis-cluster.internal:6379 (6 nodes)',\n      'redis.ttl': '86400s (24-hour key expiration)',\n      'webhook.alert.queue': 'https://alerts.security.internal/v1/fraud',\n      'batch.flush.interval.ms': '50',\n    },\n    subtasks: [\n      {\n        id: 0,\n        host: 'taskmanager-pod-0.k8s',\n        status: 'RUNNING',\n        inRate: '4,775 rec/s',\n        outRate: '5,312 rec/s',\n        cpu: '16%',\n        heapMemory: '48 MB',\n        backpressure: 0.0,\n        watermarkLag: '41ms',\n        checkpointAckMs: 52,\n      },\n      {\n        id: 1,\n        host: 'taskmanager-pod-1.k8s',\n        status: 'RUNNING',\n        inRate: '4,770 rec/s',\n        outRate: '5,308 rec/s',\n        cpu: '15%',\n        heapMemory: '47 MB',\n        backpressure: 0.0,\n        watermarkLag: '43ms',\n        checkpointAckMs: 55,\n      },\n      {\n        id: 2,\n        host: 'taskmanager-pod-2.k8s',\n        status: 'RUNNING',\n        inRate: '4,780 rec/s',\n        outRate: '5,315 rec/s',\n        cpu: '17%',\n        heapMemory: '49 MB',\n        backpressure: 0.0,\n        watermarkLag: '40ms',\n        checkpointAckMs: 51,\n      },\n      {\n        id: 3,\n        host: 'taskmanager-pod-3.k8s',\n        status: 'RUNNING',\n        inRate: '4,765 rec/s',\n        outRate: '5,305 rec/s',\n        cpu: '16%',\n        heapMemory: '46 MB',\n        backpressure: 0.0,\n        watermarkLag: '44ms',\n        checkpointAckMs: 56,\n      },\n      {\n        id: 4,\n        host: 'taskmanager-pod-4.k8s',\n        status: 'RUNNING',\n        inRate: '4,778 rec/s',\n        outRate: '5,314 rec/s',\n        cpu: '16%',\n        heapMemory: '48 MB',\n        backpressure: 0.0,\n        watermarkLag: '42ms',\n        checkpointAckMs: 53,\n      },\n      {\n        id: 5,\n        host: 'taskmanager-pod-5.k8s',\n        status: 'RUNNING',\n        inRate: '4,772 rec/s',\n        outRate: '5,310 rec/s',\n        cpu: '15%',\n        heapMemory: '47 MB',\n        backpressure: 0.0,\n        watermarkLag: '43ms',\n        checkpointAckMs: 54,\n      },\n      {\n        id: 6,\n        host: 'taskmanager-pod-6.k8s',\n        status: 'RUNNING',\n        inRate: '4,782 rec/s',\n        outRate: '5,318 rec/s',\n        cpu: '17%',\n        heapMemory: '49 MB',\n        backpressure: 0.0,\n        watermarkLag: '41ms',\n        checkpointAckMs: 50,\n      },\n      {\n        id: 7,\n        host: 'taskmanager-pod-7.k8s',\n        status: 'RUNNING',\n        inRate: '4,768 rec/s',\n        outRate: '5,308 rec/s',\n        cpu: '16%',\n        heapMemory: '47 MB',\n        backpressure: 0.0,\n        watermarkLag: '43ms',\n        checkpointAckMs: 55,\n      },\n    ],\n  },\n]\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/stream-topology-data.ts"
    }
  ],
  "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/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Apache Flink & RisingWave stateful streaming graph: real-time DAG topology, window throughput, checkpointing duration, RocksDB state inspector, and backpressure heat monitor.",
  "categories": [
    "devops",
    "dashboard",
    "data",
    "app"
  ]
}