@datatechsolutions/ui 2.11.57 → 2.11.59

package/dist/{chunk-JGVH3R46.js → chunk-GA72TPLH.js}

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
-var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
 var chunkS7KHTUHA_js = require('./chunk-S7KHTUHA.js');
 var chunkUZ3CMNUJ_js = require('./chunk-UZ3CMNUJ.js');
+var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
 var Headless6 = require('@headlessui/react');
 var clsx = require('clsx');
 var React12 = require('react');
@@ -13866,6 +13866,288 @@ function FuelPipelineDemo({ defaultFuel = "gasolina", onFuelChange } = {}) {
   }, [onFuelChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(FuelDashboardView, { activeFuel, onActiveFuelChange: handleFuelChange });
 }
+var INCIDENTS = [
+  { id: "lambda-timeout", label: "Lambda Timeout", service: "kori-customers", severity: "critical", color: "text-red-400", bg: "bg-red-500/15" },
+  { id: "db-pool", label: "DB Pool Exhausted", service: "fuel-analytics", severity: "critical", color: "text-orange-400", bg: "bg-orange-500/15" },
+  { id: "deploy-fail", label: "Deploy Rollback", service: "windsock-auth", severity: "high", color: "text-amber-400", bg: "bg-amber-500/15" },
+  { id: "memory-leak", label: "Memory Leak", service: "astrlabe-workflows", severity: "medium", color: "text-sky-400", bg: "bg-sky-500/15" }
+];
+var INCIDENT_DETAILS = {
+  "lambda-timeout": {
+    rootCause: "Cold starts + unoptimized Sequelize query scanning 2.3M rows without index on organization_id",
+    agentAnalysis: "Correlated Lambda Duration spike with Aurora slow query log. Found full table scan on customers table \u2014 missing index on (organization_id, created_at). Cold start adds 4.2s, query adds 24.8s = timeout.",
+    remediation: "CREATE INDEX CONCURRENTLY idx_customers_org_created ON customers(organization_id, created_at); Set provisioned concurrency to 5.",
+    result: "p99 latency: 29s \u2192 340ms. Zero timeouts in last 2 hours.",
+    timeline: [
+      { time: "03:14", event: "CloudWatch alarm: kori-customers Duration > 29s", color: "text-red-400" },
+      { time: "03:14", event: "Agent triggered \u2014 pulling CloudWatch metrics + Aurora slow query log", color: "text-sky-400" },
+      { time: "03:15", event: "Root cause identified: missing index on customers(organization_id)", color: "text-amber-400" },
+      { time: "03:15", event: "Remediation: CREATE INDEX CONCURRENTLY executed", color: "text-purple-400" },
+      { time: "03:16", event: "Provisioned concurrency set to 5 via CDK update", color: "text-purple-400" },
+      { time: "03:18", event: "Verified: p99 latency 340ms, 0 timeouts", color: "text-emerald-400" }
+    ]
+  },
+  "db-pool": {
+    rootCause: "fuel-analytics Lambda opening new connections per invocation without reusing pool. 300 concurrent executions = 300 connections.",
+    agentAnalysis: "Correlated RDS Proxy connection count with Lambda concurrency. Found pool initialization inside handler function (runs every invocation) instead of module scope (runs once per cold start).",
+    remediation: "Moved pool init to module scope. Set Lambda reserved concurrency to 50. Enabled RDS Proxy idle connection pruning at 60s.",
+    result: "Steady-state connections: 300 \u2192 12. Zero connection errors in last 4 hours.",
+    timeline: [
+      { time: "02:41", event: "CloudWatch alarm: fuel-analytics DatabaseConnections = 300", color: "text-red-400" },
+      { time: "02:41", event: "Agent triggered \u2014 analyzing connection patterns + Lambda code", color: "text-sky-400" },
+      { time: "02:42", event: "Root cause: pool created inside handler, not module scope", color: "text-amber-400" },
+      { time: "02:43", event: "Fix applied: pool init moved to module scope", color: "text-purple-400" },
+      { time: "02:43", event: "Reserved concurrency set to 50", color: "text-purple-400" },
+      { time: "02:45", event: "Verified: 12 steady connections, 0 errors", color: "text-emerald-400" }
+    ]
+  },
+  "deploy-fail": {
+    rootCause: "New Lambda handler binary missing from S3 asset bucket. CDK synth succeeded but cargo-lambda build artifact was not uploaded due to CI timeout.",
+    agentAnalysis: 'Traced CloudFormation events: Lambda function update failed with "S3 key not found". Cross-referenced with GitHub Actions run \u2014 cargo-lambda build step timed out at 10min limit. Build artifact never uploaded to cdk.out.',
+    remediation: "Triggered rebuild with extended timeout (20min). Verified S3 asset uploaded. Re-deployed stack successfully.",
+    result: "Stack status: UPDATE_COMPLETE. All 129 handlers healthy. CI timeout increased to 20min.",
+    timeline: [
+      { time: "14:22", event: "CDK deploy failed: UPDATE_ROLLBACK_COMPLETE", color: "text-red-400" },
+      { time: "14:22", event: "Agent triggered \u2014 reading CloudFormation events", color: "text-sky-400" },
+      { time: "14:23", event: "Root cause: S3 asset missing \u2014 CI build timeout", color: "text-amber-400" },
+      { time: "14:24", event: "Rebuild triggered with 20min timeout", color: "text-purple-400" },
+      { time: "14:38", event: "Build complete. Stack redeployed successfully.", color: "text-purple-400" },
+      { time: "14:40", event: "Verified: all 129 handlers healthy", color: "text-emerald-400" }
+    ]
+  },
+  "memory-leak": {
+    rootCause: "Workflow execution SSE connections not closed on client disconnect. EventSource objects accumulate in Node.js heap across warm invocations.",
+    agentAnalysis: "Memory usage trend shows linear growth correlated with SSE connection count. Found missing cleanup in workflow-runner SSE handler \u2014 no abort signal listener. Warm Lambda instances accumulate stale connections across invocations.",
+    remediation: "Added AbortSignal listener to SSE handler. Implemented connection TTL of 5 minutes. Forced Lambda recycling at 90% memory threshold.",
+    result: "Memory stable at 45-55%. Zero OOM kills in last 8 hours.",
+    timeline: [
+      { time: "10:00", event: "Memory trending alarm: 85% and rising", color: "text-amber-400" },
+      { time: "10:00", event: "Agent triggered \u2014 analyzing memory trend + heap snapshots", color: "text-sky-400" },
+      { time: "10:02", event: "Root cause: SSE connections not closed on disconnect", color: "text-amber-400" },
+      { time: "10:03", event: "Fix: AbortSignal listener + 5min TTL added", color: "text-purple-400" },
+      { time: "10:03", event: "Lambda recycling at 90% memory threshold", color: "text-purple-400" },
+      { time: "10:10", event: "Verified: memory stable at 48%, 0 OOM kills", color: "text-emerald-400" }
+    ]
+  }
+};
+var AVATARS2 = {
+  triage: "https://api.dicebear.com/9.x/lorelei/svg?seed=Sentinel&hair=variant31&beardProbability=0&mouth=happy01",
+  debug: "https://api.dicebear.com/9.x/notionists/svg?seed=Debugger&hair=variant35&beardProbability=0&gestureProbability=0&glasses=variant03&glassesProbability=100",
+  remediate: "https://api.dicebear.com/9.x/lorelei/svg?seed=Fixer&hair=variant31&beardProbability=0&glasses=variant01&glassesProbability=100&mouth=happy01"
+};
+function buildNodes(incident) {
+  return [
+    { id: "alert", label: "Alert Detected", subtitle: `${incident.service} \xB7 ${incident.severity}`, icon: HeroIcons.ExclamationTriangleIcon, color: "text-red-400", bg: "bg-red-500/15", glow: "rgba(239,68,68,0.5)", step: 0, badges: [{ text: incident.severity, color: "bg-red-500/20 text-red-300" }] },
+    { id: "metrics", label: "Pull Metrics", subtitle: "CloudWatch \xB7 15min window", icon: HeroIcons.ChartBarIcon, color: "text-sky-400", bg: "bg-sky-500/15", glow: "rgba(14,165,233,0.5)", step: 1, badges: [{ text: "datasource", color: "bg-sky-500/20 text-sky-300" }] },
+    { id: "logs", label: "Analyze Logs", subtitle: "CloudWatch Logs \xB7 error filter", icon: HeroIcons.CommandLineIcon, color: "text-sky-400", bg: "bg-sky-500/15", glow: "rgba(14,165,233,0.5)", step: 1, badges: [{ text: "datasource", color: "bg-sky-500/20 text-sky-300" }] },
+    { id: "infra", label: "Infra State", subtitle: "CDK \xB7 stack status \xB7 config", icon: HeroIcons.CloudIcon, color: "text-sky-400", bg: "bg-sky-500/15", glow: "rgba(14,165,233,0.5)", step: 1, badges: [{ text: "datasource", color: "bg-sky-500/20 text-sky-300" }] },
+    { id: "correlate", label: "Correlate", subtitle: "3 sources \u2192 unified context", icon: HeroIcons.BoltIcon, color: "text-amber-400", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.5)", step: 2, badges: [{ text: "aggregator", color: "bg-amber-500/20 text-amber-300" }] },
+    { id: "debug-agent", label: "Debug Agent", subtitle: "Root cause analysis", icon: HeroIcons.CpuChipIcon, color: "text-purple-400", bg: "bg-purple-500/15", glow: "rgba(168,85,247,0.5)", step: 3, avatar: AVATARS2.debug, badges: [{ text: "agent", color: "bg-purple-500/20 text-purple-300" }, { text: "Claude", color: "bg-violet-500/20 text-violet-300" }] },
+    { id: "plan", label: "Remediation Plan", subtitle: "Generate fix + rollback plan", icon: HeroIcons.DocumentMagnifyingGlassIcon, color: "text-amber-400", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.5)", step: 4, avatar: AVATARS2.triage, badges: [{ text: "agent", color: "bg-purple-500/20 text-purple-300" }, { text: "advanced", color: "bg-amber-500/20 text-amber-300" }] },
+    { id: "execute", label: "Auto-Remediate", subtitle: "Apply fix \xB7 human-in-the-loop", icon: HeroIcons.WrenchScrewdriverIcon, color: "text-red-400", bg: "bg-red-500/15", glow: "rgba(239,68,68,0.5)", step: 5, avatar: AVATARS2.remediate, badges: [{ text: "agent", color: "bg-purple-500/20 text-purple-300" }, { text: "HITL", color: "bg-amber-500/20 text-amber-300" }] },
+    { id: "verify", label: "Verify", subtitle: "Confirm resolution \xB7 metrics ok", icon: HeroIcons.ShieldCheckIcon, color: "text-emerald-400", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.5)", step: 6, badges: [{ text: "check", color: "bg-emerald-500/20 text-emerald-300" }] },
+    { id: "resolved", label: "Resolved", subtitle: "Incident closed \xB7 MTTR 4min", icon: HeroIcons.CheckCircleIcon, color: "text-emerald-400", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.5)", step: 7 }
+  ];
+}
+var STEP_LABELS2 = [
+  "Alert detected \u2014 triaging",
+  "Pulling metrics, logs, infra state (parallel)",
+  "Correlating across sources",
+  "Debug agent analyzing root cause",
+  "Generating remediation plan",
+  "Executing auto-remediation",
+  "Verifying resolution",
+  "Resolved \u2014 incident closed"
+];
+function IncidentPipelineDemo({
+  defaultIncident = "lambda-timeout",
+  onIncidentChange
+} = {}) {
+  const [activeIncident, setActiveIncident] = React12.useState(defaultIncident);
+  const incident = INCIDENTS.find((i) => i.id === activeIncident);
+  const detail = INCIDENT_DETAILS[activeIncident];
+  const nodes = React12.useMemo(() => buildNodes(incident), [activeIncident]);
+  const [activeStep, setActiveStep] = React12.useState(-1);
+  const intervalRef = React12.useRef(null);
+  const isIdle = activeStep === -1;
+  const isRunning = activeStep >= 0 && activeStep < 7;
+  const isComplete = activeStep === 7;
+  const handleRun = React12.useCallback(() => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    setActiveStep(0);
+    let step = 0;
+    intervalRef.current = setInterval(() => {
+      step += 1;
+      if (step > 7) {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+        setActiveStep(7);
+      } else {
+        setActiveStep(step);
+      }
+    }, 1200);
+  }, []);
+  const handleStop = React12.useCallback(() => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    setActiveStep(-1);
+  }, []);
+  const handleIncidentSelect = React12.useCallback((id) => {
+    setActiveIncident(id);
+    onIncidentChange?.(id);
+    if (!isIdle) handleStop();
+  }, [isIdle, handleStop, onIncidentChange]);
+  React12.useEffect(() => () => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+  }, []);
+  const getStatus = (node) => {
+    if (activeStep < 0) return "idle";
+    if (node.step < activeStep) return "complete";
+    if (node.step === activeStep) return "active";
+    return "idle";
+  };
+  const rows = React12.useMemo(() => {
+    const result = [];
+    let step = -1;
+    for (const node of nodes) {
+      if (node.step !== step) {
+        result.push([]);
+        step = node.step;
+      }
+      result[result.length - 1].push(node);
+    }
+    return result;
+  }, [nodes]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface rounded-2xl overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 border-b border-white/5 px-3 py-2 shrink-0 overflow-x-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center rounded-lg bg-white/[0.03] p-0.5 gap-0.5 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1.5 text-[7px] font-bold uppercase tracking-wider text-gray-600", children: "Incident" }),
+        INCIDENTS.map((inc) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleIncidentSelect(inc.id),
+            className: `rounded-md px-2 py-1 text-[9px] font-semibold transition-all duration-200 ${activeIncident === inc.id ? `${inc.bg} ${inc.color} shadow-sm` : "text-gray-500 hover:text-gray-300 hover:bg-white/5"}`,
+            children: inc.label
+          },
+          inc.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2 shrink-0", children: [
+        activeStep >= 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: STEP_LABELS2.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-1 w-2.5 rounded-full transition-all duration-500 ${index < activeStep || isComplete ? "bg-emerald-500" : index === activeStep ? "bg-red-500 animate-pulse" : "bg-white/10"}` }, index)) }),
+        isComplete && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3 w-3 text-emerald-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] font-semibold text-emerald-400", children: "Resolved \xB7 MTTR 4min" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-2 w-2 rounded-full ${isRunning ? "bg-red-500 animate-pulse" : isComplete ? "bg-emerald-500" : "bg-gray-600"}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[160px] truncate text-[9px] text-gray-500", children: activeStep >= 0 ? STEP_LABELS2[activeStep] : "Ready" }),
+        isIdle ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: handleRun, className: "flex items-center gap-1 rounded-lg bg-gradient-to-r from-red-600 to-rose-600 px-3 py-1 text-[10px] font-semibold text-white shadow-lg shadow-red-500/20 hover:shadow-red-500/30 hover:scale-105 active:scale-95 transition-all", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.PlayIcon, { className: "h-3 w-3" }),
+          " Simulate"
+        ] }) : isRunning ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: handleStop, className: "flex items-center gap-1 rounded-lg bg-rose-600/80 px-3 py-1 text-[10px] font-semibold text-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.StopIcon, { className: "h-3 w-3" }),
+          " Stop"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: handleRun, className: "flex items-center gap-1 rounded-lg border border-white/10 px-3 py-1 text-[10px] font-medium text-gray-300 hover:bg-white/5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowPathIcon, { className: "h-3 w-3" }),
+          " Replay"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0 overflow-x-auto px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+            @keyframes nodeGlow { 0%, 100% { box-shadow: 0 0 12px var(--glow); } 50% { box-shadow: 0 0 28px var(--glow); } }
+            @keyframes edgeFlow { to { stroke-dashoffset: -12; } }
+          ` }),
+      rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-0", children: [
+        rowIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "40", height: "2", className: "mx-1.5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "1", x2: "40", y2: "1", stroke: activeStep >= rows[rowIndex][0].step ? "#10b981" : "#374151", strokeWidth: "2", strokeDasharray: "4 3", style: { animation: activeStep === rows[rowIndex][0].step ? "edgeFlow 0.8s linear infinite" : "none" } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex ${row.length > 1 ? "flex-col gap-2" : ""}`, children: row.map((node) => {
+          const status = getStatus(node);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: `liquid-surface rounded-2xl px-4 py-3 transition-all duration-500 ${row.length > 1 ? "w-[180px]" : "w-[220px]"} ${status === "active" ? "scale-[1.03] ring-2 ring-red-500/50" : status === "complete" ? "ring-1 ring-emerald-500/30" : "opacity-40"}`,
+              style: status === "active" ? { "--glow": node.glow, animation: "nodeGlow 1.5s ease-in-out infinite" } : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5 flex items-center gap-2.5", children: [
+                  node.avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: node.avatar, alt: "", className: "h-9 w-9 rounded-xl shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-9 w-9 items-center justify-center rounded-xl shrink-0 ${node.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(node.icon, { className: `h-5 w-5 ${node.color}` }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[13px] font-semibold text-white", children: node.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[9px] text-gray-500", children: node.subtitle })
+                  ] }),
+                  status === "complete" && /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-5 w-5 shrink-0 text-emerald-400" })
+                ] }),
+                node.badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: node.badges.map((badge) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rounded-full px-2 py-0.5 text-[8px] font-semibold ${badge.color}`, children: badge.text }, badge.text)) })
+              ]
+            },
+            node.id
+          );
+        }) })
+      ] }, rowIndex))
+    ] }),
+    activeStep >= 3 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              .slide-active .fk-detail { opacity: 0; animation: fkDetailIn 0.4s ease forwards; }
+              .slide-active .fk-detail:nth-child(1) { animation-delay: 0s; }
+              .slide-active .fk-detail:nth-child(2) { animation-delay: 0.15s; }
+              .slide-active .fk-detail:nth-child(3) { animation-delay: 0.3s; }
+              .slide-active .fk-detail:nth-child(4) { animation-delay: 0.45s; }
+              .slide-active .fk-detail:nth-child(5) { animation-delay: 0.6s; }
+              @keyframes fkDetailIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+            ` }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+        activeStep >= 3 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fk-detail liquid-surface rounded-xl p-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: AVATARS2.debug, alt: "", className: "h-6 w-6 rounded-lg" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-semibold text-white", children: "Debug Agent" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[8px] text-gray-500", children: "Root cause analysis \xB7 1.2s" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3.5 w-3.5 shrink-0 text-emerald-400" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] leading-relaxed text-gray-300", children: detail.rootCause }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-[8px] leading-relaxed text-gray-400", children: detail.agentAnalysis })
+        ] }),
+        activeStep >= 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fk-detail liquid-surface rounded-xl p-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: AVATARS2.triage, alt: "", className: "h-6 w-6 rounded-lg" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-semibold text-white", children: "Triage Agent" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[8px] text-gray-500", children: "Remediation plan \xB7 0.8s" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3.5 w-3.5 shrink-0 text-emerald-400" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[8px] leading-relaxed text-gray-300", children: detail.remediation })
+        ] }),
+        activeStep >= 5 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fk-detail liquid-surface rounded-xl p-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("img", { src: AVATARS2.remediate, alt: "", className: "h-6 w-6 rounded-lg" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-semibold text-white", children: "Remediate Agent" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[8px] text-gray-500", children: "Executing fix \xB7 human-in-the-loop" })
+            ] }),
+            activeStep >= 6 ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3.5 w-3.5 shrink-0 text-emerald-400" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 shrink-0 rounded-full bg-amber-500 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[8px] leading-relaxed text-amber-300/80", children: "Applying changes with rollback plan ready. Awaiting verification..." })
+        ] })
+      ] }),
+      activeStep >= 6 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fk-detail rounded-xl border border-emerald-500/20 bg-emerald-500/[0.06] p-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3.5 w-3.5 text-emerald-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-emerald-400", children: "Result" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] font-semibold text-emerald-300", children: detail.result })
+        ] }),
+        isComplete && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fk-detail liquid-surface rounded-xl p-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block text-[10px] font-bold text-gray-400", children: "Timeline" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: detail.timeline.map((entry, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-mono text-[7px] text-gray-600", children: entry.time }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1 w-1 mt-1 shrink-0 rounded-full ${entry.color.replace("text-", "bg-")}` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[7px] text-gray-400", children: entry.event })
+          ] }, i)) })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
 function EntityDrawer({
   open,
   onClose,
@@ -21279,6 +21561,7 @@ exports.ITALY_REGION_PALETTES = ITALY_REGION_PALETTES;
 exports.IT_THEME_CONFIG = IT_THEME_CONFIG;
 exports.IconButton = IconButton;
 exports.ImageUpload = ImageUpload;
+exports.IncidentPipelineDemo = IncidentPipelineDemo;
 exports.InfoPopover = InfoPopover;
 exports.InlineForm = InlineForm;
 exports.InlineSpinner = InlineSpinner;
@@ -21790,5 +22073,5 @@ exports.usePullToRefresh = usePullToRefresh;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-JGVH3R46.js.map
-//# sourceMappingURL=chunk-JGVH3R46.js.map
+//# sourceMappingURL=chunk-GA72TPLH.js.map
+//# sourceMappingURL=chunk-GA72TPLH.js.map