@datatechsolutions/ui 2.11.92 → 3.1.0

package/dist/{chunk-ZKUYNCAG.js → chunk-I2NZGVBG.js}

@@ -4,7 +4,7 @@
 var chunkUZ3CMNUJ_js = require('./chunk-UZ3CMNUJ.js');
 var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
 var chunkS7KHTUHA_js = require('./chunk-S7KHTUHA.js');
-var chunkARVLVWUC_js = require('./chunk-ARVLVWUC.js');
+var chunkF54Q2YJY_js = require('./chunk-F54Q2YJY.js');
 var Headless6 = require('@headlessui/react');
 var clsx = require('clsx');
 var React12 = require('react');
@@ -19,8 +19,8 @@ var dateFns = require('date-fns');
 var locale = require('date-fns/locale');
 var reactTransitionProgress = require('react-transition-progress');
 var lucideReact = require('lucide-react');
-var d3Geo = require('d3-geo');
 var ProgressPrimitive = require('@radix-ui/react-progress');
+var d3Geo = require('d3-geo');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var nextIntl = require('next-intl');
 var zustand = require('zustand');
@@ -2906,7 +2906,7 @@ function InputRequestForm({
     try {
       const payload = decision === "approved" ? sanitizeForSubmit(values) : void 0;
       const reason = decision === "rejected" ? typeof values.reason === "string" ? values.reason : "rejected" : void 0;
-      await chunkARVLVWUC_js.submitApproval(runId, data.nodeId, {
+      await chunkF54Q2YJY_js.submitApproval(runId, data.nodeId, {
         approved: decision === "approved",
         ...payload ? { payload } : {},
         ...reason ? { reason } : {}
@@ -3154,7 +3154,7 @@ function StreamingDashboard({
     if (phase === "completed" || phase === "failed" || phase === "cancelled") {
       return;
     }
-    const unsubscribe = chunkARVLVWUC_js.subscribeToRunEvents(
+    const unsubscribe = chunkF54Q2YJY_js.subscribeToRunEvents(
       runId,
       (event) => handleEvent(event),
       (err) => {
@@ -3165,15 +3165,15 @@ function StreamingDashboard({
   }, [runId]);
   function handleEvent(event) {
     switch (event.type) {
-      case "run_started":
+      case "run-started":
         setPhase("running");
         break;
-      case "node_started":
+      case "node-started":
         if (event.nodeId) {
           setTimeline((prev) => upsertTimelineRunning(prev, event));
         }
         break;
-      case "node_completed":
+      case "node-completed":
         if (event.nodeId) {
           setTimeline(
             (prev) => upsertTimelineDone(prev, event, "done")
@@ -3181,18 +3181,14 @@ function StreamingDashboard({
           mergeNodeOutput(event);
         }
         break;
-      // The engine emits `node_error` (not `node_failed`) for executor
-      // errors. Keep `node_failed` as a soft alias in case a future
-      // event source uses it.
-      case "node_error":
-      case "node_failed":
+      case "node-failed":
         if (event.nodeId) {
           setTimeline(
             (prev) => upsertTimelineDone(prev, event, "failed")
           );
         }
         break;
-      case "run_paused":
+      case "run-paused":
         setPhase("paused");
         if (event.nodeId) {
           setTimeline(
@@ -3201,20 +3197,22 @@ function StreamingDashboard({
         }
         appendPauseSection(event);
         break;
-      case "ui_render":
+      case "ui-render":
         appendSectionFromEvent(event);
         break;
-      case "run_completed":
+      case "run-completed":
         setPhase("completed");
         break;
-      case "run_failed":
+      case "run-failed":
         setPhase("failed");
-        setError(event.error ?? "Workflow run failed");
+        setError(
+          event.data?.error ?? "Workflow run failed"
+        );
         break;
     }
   }
   function mergeNodeOutput(event) {
-    const output = event.outputs;
+    const output = event.data?.outputs;
     if (!output) return;
     const candidateSpec = isDashboardSpecLike(output) ? output : null;
     if (candidateSpec) {
@@ -3229,14 +3227,14 @@ function StreamingDashboard({
     }
   }
   function appendSectionFromEvent(event) {
-    const sectionPayload = event.outputs?.section ?? event.outputs;
+    const sectionPayload = event.data?.section ?? event.data;
     if (!sectionPayload || !sectionPayload.type) return;
     setSpec((prev) => appendSectionToSpec(prev, sectionPayload));
     specRef.current = appendSectionToSpec(specRef.current, sectionPayload);
   }
   function appendPauseSection(event) {
-    const promptValue = event.outputs?.prompt;
-    const payloadValue = event.outputs?.payload;
+    const promptValue = event.data?.prompt;
+    const payloadValue = event.data?.payload;
     const prompt = typeof promptValue === "string" ? promptValue : void 0;
     const section = {
       type: "note",
@@ -3339,9 +3337,10 @@ function Timeline({ entries }) {
 function upsertTimelineRunning(prev, event) {
   if (!event.nodeId) return prev;
   const idx = prev.findIndex((entry) => entry.nodeId === event.nodeId);
+  const nodeType = typeof event.data?.nodeType === "string" ? event.data.nodeType : void 0;
   const fresh = {
     nodeId: event.nodeId,
-    nodeType: event.nodeType,
+    nodeType,
     status: "running",
     startedAt: event.timestamp
   };
@@ -3353,16 +3352,18 @@ function upsertTimelineRunning(prev, event) {
 function upsertTimelineDone(prev, event, status) {
   if (!event.nodeId) return prev;
   const idx = prev.findIndex((entry) => entry.nodeId === event.nodeId);
+  const nodeType = typeof event.data?.nodeType === "string" ? event.data.nodeType : void 0;
+  const error = typeof event.data?.error === "string" ? event.data.error : void 0;
   if (idx === -1) {
     return [
       ...prev,
       {
         nodeId: event.nodeId,
-        nodeType: event.nodeType,
+        nodeType,
         status,
         startedAt: event.timestamp,
         finishedAt: event.timestamp,
-        error: event.error
+        error
       }
     ];
   }
@@ -3371,7 +3372,7 @@ function upsertTimelineDone(prev, event, status) {
     ...next[idx],
     status,
     finishedAt: event.timestamp,
-    error: event.error ?? next[idx].error
+    error: error ?? next[idx].error
   };
   return next;
 }
@@ -3614,7 +3615,7 @@ var defaultFilterTypeConfig = {
     icon: HeroIcons.ClockIcon,
     className: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
   },
-  fuel: {
+  category: {
     icon: HeroIcons.MapIcon,
     className: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
   },
@@ -9773,9 +9774,6 @@ function getDockAccent(id, accentRgb) {
   if (id === "models") {
     return { icon: "text-sky-600 dark:text-sky-400", bg: "bg-sky-100 dark:bg-sky-900/35", dot: "bg-sky-500 dark:bg-sky-400", rgb: "14, 165, 233" };
   }
-  if (id === "fuels") {
-    return { icon: "text-orange-600 dark:text-orange-400", bg: "bg-orange-100 dark:bg-orange-900/35", dot: "bg-orange-500 dark:bg-orange-400", rgb: "249, 115, 22" };
-  }
   if (id === "rules") {
     return { icon: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-100 dark:bg-emerald-900/35", dot: "bg-emerald-500 dark:bg-emerald-400", rgb: "16, 185, 129" };
   }
@@ -10468,7 +10466,6 @@ function DashboardProgressShell({ children }) {
 }
 var APP_COLORS = {
   astrlabe: "bg-sky-500/30 text-sky-100 ring-sky-400/30",
-  "fuel-price-ai": "bg-emerald-500/30 text-emerald-100 ring-emerald-400/30",
   "kori-erp": "bg-amber-500/30 text-amber-100 ring-amber-400/30",
   windsock: "bg-indigo-500/30 text-indigo-100 ring-indigo-400/30"
 };
@@ -11089,7 +11086,7 @@ var ICON_MAP = {
   "plus-circle": getIcon("PlusCircleIcon"),
   "link": getIcon("LinkIcon"),
   "folder-open": getIcon("FolderOpenIcon"),
-  "fuel": getIcon("BeakerIcon")
+  "beaker": getIcon("BeakerIcon")
 };
 var ACCENT_MAP = {
   "map-pin": {
@@ -11168,7 +11165,7 @@ var ACCENT_MAP = {
     container: "bg-slate-50/80 dark:bg-slate-900/30 border-slate-100/50 dark:border-slate-800/30",
     icon: "text-slate-500 dark:text-slate-400"
   },
-  "fuel": {
+  "beaker": {
     container: "bg-emerald-50/80 dark:bg-emerald-900/30 border-emerald-100/50 dark:border-emerald-800/30",
     icon: "text-emerald-500 dark:text-emerald-400"
   }
@@ -11364,7 +11361,6 @@ function PageErrorState({
   );
 }
 var WINDSOCK_LOADER = { gradient: "from-emerald-500 to-teal-600", accentRing: "ring-emerald-500/30" };
-var FUEL_PRICE_LOADER = { gradient: "from-blue-500 to-indigo-600", accentRing: "ring-blue-500/30" };
 var KORI_ERP_LOADER = { gradient: "from-purple-500 to-violet-600", accentRing: "ring-purple-500/30" };
 var WIRE_LOADER = { gradient: "from-sky-500 to-indigo-600", accentRing: "ring-indigo-500/30" };
 function BrandedLoader({
@@ -13324,1995 +13320,667 @@ function UserMobileInfo({ user, labels = {} }) {
     ] })
   ] });
 }
-var MIN_ZOOM = 0.8;
-var MAX_ZOOM = 4;
-var ZOOM_STEP = 0.5;
-function useGeoMapState({
-  items,
-  getRegionCode,
-  regionCoordinates,
-  defaultCenter = [0, 0]
-}) {
-  const [zoom, setZoom] = React12.useState(1);
-  const [center, setCenter] = React12.useState(defaultCenter);
-  const [hoveredRegion, setHoveredRegion] = React12.useState(null);
-  const [animatedRegions, setAnimatedRegions] = React12.useState(/* @__PURE__ */ new Set());
-  const [panOffset, setPanOffset] = React12.useState([0, 0]);
-  const handleZoomIn = React12.useCallback(() => {
-    setZoom((previous) => Math.min(previous + ZOOM_STEP, MAX_ZOOM));
+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: "inventory-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: "inventory-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: inventory-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 AVATARS = {
+  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: AVATARS.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: AVATARS.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: AVATARS.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_LABELS = [
+  "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 step2 = 0;
+    intervalRef.current = setInterval(() => {
+      step2 += 1;
+      if (step2 > 7) {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+        setActiveStep(7);
+      } else {
+        setActiveStep(step2);
+      }
+    }, 1200);
   }, []);
-  const handleZoomOut = React12.useCallback(() => {
-    setZoom((previous) => Math.max(previous - ZOOM_STEP, MIN_ZOOM));
+  const handleStop = React12.useCallback(() => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    setActiveStep(-1);
   }, []);
-  const handleMoveEnd = React12.useCallback(
-    (position) => {
-      setCenter(position.coordinates);
-      setZoom(position.zoom);
-    },
-    []
-  );
-  const handlePan = React12.useCallback((dx, dy) => {
-    setPanOffset((previous) => [previous[0] + dx, previous[1] + dy]);
+  const handleIncidentSelect = React12.useCallback((id) => {
+    setActiveIncident(id);
+    onIncidentChange?.(id);
+    if (!isIdle) handleStop();
+  }, [isIdle, handleStop, onIncidentChange]);
+  React12.useEffect(() => () => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
   }, []);
-  const regionGroups = React12.useMemo(() => {
-    const grouped = /* @__PURE__ */ new Map();
-    items.forEach((item) => {
-      const code = getRegionCode(item);
-      if (!grouped.has(code)) {
-        grouped.set(code, []);
-      }
-      grouped.get(code).push(item);
-    });
-    return Array.from(grouped.entries()).filter(([code]) => regionCoordinates[code]).map(([code, regionItems]) => ({
-      code,
-      items: regionItems,
-      coordinates: regionCoordinates[code]
-    })).sort((a, b) => b.items.length - a.items.length);
-  }, [items, getRegionCode, regionCoordinates]);
-  const animationCodes = React12.useMemo(
-    () => regionGroups.map((regionData) => regionData.code),
-    [regionGroups]
-  );
-  const animationSignature = React12.useMemo(
-    () => animationCodes.join("|"),
-    [animationCodes]
-  );
-  React12.useEffect(() => {
-    if (animationCodes.length === 0) return;
-    setAnimatedRegions(/* @__PURE__ */ new Set());
-    const timers = [];
-    animationCodes.forEach((code, index) => {
-      const timer = setTimeout(() => {
-        setAnimatedRegions((previous) => /* @__PURE__ */ new Set([...previous, code]));
-      }, index * 100);
-      timers.push(timer);
-    });
-    return () => timers.forEach(clearTimeout);
-  }, [animationSignature]);
-  const getMarkerSize = React12.useCallback(
-    (count) => {
-      const baseSize = count >= 10 ? 14 : count >= 5 ? 11 : count >= 2 ? 8 : 6;
-      return baseSize / Math.sqrt(zoom);
-    },
-    [zoom]
-  );
-  const getFontSize = React12.useCallback(
-    (markerSize) => {
-      const baseSize = markerSize > 10 ? 10 : 8;
-      const scaledSize = baseSize / Math.sqrt(zoom);
-      return `${Math.max(scaledSize, 6)}px`;
-    },
-    [zoom]
-  );
-  return {
-    zoom,
-    setZoom,
-    handleZoomIn,
-    handleZoomOut,
-    handleMoveEnd,
-    MIN_ZOOM,
-    MAX_ZOOM,
-    center,
-    setCenter,
-    panOffset,
-    handlePan,
-    hoveredRegion,
-    setHoveredRegion,
-    animatedRegions,
-    regionGroups,
-    getMarkerSize,
-    getFontSize
+  const getStatus = (node2) => {
+    if (activeStep < 0) return "idle";
+    if (node2.step < activeStep) return "complete";
+    if (node2.step === activeStep) return "active";
+    return "idle";
   };
-}
-var MAP_DEFAULT_STATE_COLOR = "rgba(100, 116, 139, 0.35)";
-var MAP_DEFAULT_MARKER_COLOR = "#6366f1";
-var VIEWBOX_WIDTH = 1e3;
-var VIEWBOX_HEIGHT = 500;
-var ALBERS_WIDTH = 960;
-var ALBERS_HEIGHT = 600;
-function GeoMapCanvasInner({
-  regionGroups,
-  regionColorMap,
-  animatedRegions,
-  zoom,
-  panOffset,
-  hoveredRegion,
-  onPan,
-  onRegionHover,
-  onRegionClick,
-  isRegionActive,
-  getMarkerSize,
-  getFontSize,
-  geoJsonUrl,
-  regionPropertyKey = "code",
-  projectionType = "mercator",
-  ariaLabel = "Interactive map"
-}, ref) {
-  const [geoData, setGeoData] = React12.useState(null);
-  const svgRef = React12.useRef(null);
-  const dragState = React12.useRef(null);
-  React12.useEffect(() => {
-    let cancelled = false;
-    async function loadGeoData() {
-      try {
-        const response = await fetch(geoJsonUrl);
-        if (!response.ok) return;
-        const data = await response.json();
-        if (!cancelled) setGeoData(data);
-      } catch {
-      }
-    }
-    loadGeoData();
-    return () => {
-      cancelled = true;
-    };
-  }, [geoJsonUrl]);
-  const handleMouseDown = React12.useCallback(
-    (event) => {
-      if (event.button !== 0) return;
-      dragState.current = {
-        active: true,
-        startX: event.clientX,
-        startY: event.clientY,
-        lastX: event.clientX,
-        lastY: event.clientY,
-        didDrag: false
-      };
-    },
-    []
-  );
-  const handleMouseMove = React12.useCallback(
-    (event) => {
-      if (!dragState.current?.active || !svgRef.current) return;
-      const totalDx = event.clientX - dragState.current.startX;
-      const totalDy = event.clientY - dragState.current.startY;
-      if (!dragState.current.didDrag) {
-        if (Math.abs(totalDx) < 5 && Math.abs(totalDy) < 5) return;
-        dragState.current.didDrag = true;
+  const rows = React12.useMemo(() => {
+    const result = [];
+    let step2 = -1;
+    for (const node2 of nodes) {
+      if (node2.step !== step2) {
+        result.push([]);
+        step2 = node2.step;
       }
-      const dx = event.clientX - dragState.current.lastX;
-      const dy = event.clientY - dragState.current.lastY;
-      const rect = svgRef.current.getBoundingClientRect();
-      const viewBoxWidth = VIEWBOX_WIDTH / zoom;
-      const scaleRatio = viewBoxWidth / rect.width;
-      onPan(dx * scaleRatio, dy * scaleRatio);
-      dragState.current.lastX = event.clientX;
-      dragState.current.lastY = event.clientY;
-    },
-    [zoom, onPan]
-  );
-  const handleMouseUp = React12.useCallback(() => {
-    if (dragState.current) {
-      dragState.current.active = false;
-    }
-  }, []);
-  const wasDragAction = React12.useCallback(() => {
-    return dragState.current?.didDrag === true;
-  }, []);
-  const getLighterColor = (hexColor) => {
-    const r = parseInt(hexColor.slice(1, 3), 16);
-    const g = parseInt(hexColor.slice(3, 5), 16);
-    const b = parseInt(hexColor.slice(5, 7), 16);
-    return `rgba(${r}, ${g}, ${b}, 0.15)`;
-  };
-  const lighterColors = React12.useMemo(() => {
-    const colors3 = /* @__PURE__ */ new Map();
-    regionColorMap.forEach((color, code) => {
-      colors3.set(code, getLighterColor(color));
-    });
-    return colors3;
-  }, [regionColorMap]);
-  const featureCollection = React12.useMemo(() => {
-    if (!geoData) return null;
-    return {
-      type: "FeatureCollection",
-      features: geoData.features
-    };
-  }, [geoData]);
-  const projection = React12.useMemo(() => {
-    if (!featureCollection) return null;
-    if (projectionType === "albersUsa") {
-      return d3Geo.geoAlbersUsa();
-    }
-    return d3Geo.geoMercator().fitSize([VIEWBOX_WIDTH, VIEWBOX_HEIGHT], featureCollection);
-  }, [featureCollection, projectionType]);
-  const pathGenerator = React12.useMemo(() => {
-    if (!projection) return null;
-    return d3Geo.geoPath(projection);
-  }, [projection]);
-  const regionsWithItems = React12.useMemo(() => {
-    return new Set(regionGroups.map((regionData) => regionData.code));
-  }, [regionGroups]);
-  const hasAnyActiveFilter = React12.useMemo(() => {
-    return regionGroups.some((regionData) => isRegionActive?.(regionData.code));
-  }, [regionGroups, isRegionActive]);
-  const featureBounds = React12.useMemo(() => {
-    if (!pathGenerator || !geoData) return null;
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const feature of geoData.features) {
-      const bounds = pathGenerator.bounds(feature);
-      if (!bounds || !isFinite(bounds[0][0])) continue;
-      minX = Math.min(minX, bounds[0][0]);
-      minY = Math.min(minY, bounds[0][1]);
-      maxX = Math.max(maxX, bounds[1][0]);
-      maxY = Math.max(maxY, bounds[1][1]);
+      result[result.length - 1].push(node2);
     }
-    if (!isFinite(minX)) return null;
-    const pad = 15;
-    return { x: minX - pad, y: minY - pad, width: maxX - minX + pad * 2, height: maxY - minY + pad * 2 };
-  }, [pathGenerator, geoData]);
-  const effectiveWidth = featureBounds?.width ?? (projectionType === "albersUsa" ? ALBERS_WIDTH : VIEWBOX_WIDTH);
-  const effectiveHeight = featureBounds?.height ?? (projectionType === "albersUsa" ? ALBERS_HEIGHT : VIEWBOX_HEIGHT);
-  const baseX = featureBounds?.x ?? 0;
-  const baseY = featureBounds?.y ?? 0;
-  const viewBoxParts = React12.useMemo(() => {
-    const width = effectiveWidth / zoom;
-    const height = effectiveHeight / zoom;
-    const x = baseX + (effectiveWidth - width) / 2 - panOffset[0];
-    const y = baseY + (effectiveHeight - height) / 2 - panOffset[1];
-    return { x, y, width, height };
-  }, [zoom, panOffset, effectiveWidth, effectiveHeight, baseX, baseY]);
-  const viewBox = `${viewBoxParts.x} ${viewBoxParts.y} ${viewBoxParts.width} ${viewBoxParts.height}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: "relative w-full h-full overflow-hidden rounded-2xl border border-white/20 dark:border-white/[0.12] shadow-lg shadow-black/5 dark:shadow-black/30",
-      "data-testid": "map-canvas",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "svg",
-        {
-          ref: svgRef,
-          viewBox,
-          className: "w-full h-full cursor-grab active:cursor-grabbing",
-          "aria-label": ariaLabel,
-          style: { touchAction: "none", background: "transparent" },
-          onMouseDown: handleMouseDown,
-          onMouseMove: handleMouseMove,
-          onMouseUp: handleMouseUp,
-          onMouseLeave: handleMouseUp,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("filter", { id: "glow-active", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsxRuntime.jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "3", floodColor: "#fff", floodOpacity: "0.6" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("filter", { id: "inactive-dim", x: "0%", y: "0%", width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { type: "saturate", values: "0.3" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("filter", { id: "marker-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsxRuntime.jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: "#fff", floodOpacity: "0.7" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "geo-inset-clip", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: viewBoxParts.x + 2,
-                  y: viewBoxParts.y + 2,
-                  width: viewBoxParts.width - 4,
-                  height: viewBoxParts.height - 4
-                }
-              ) })
+    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_LABELS.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_LABELS[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((node2) => {
+          const status = getStatus(node2);
+          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": node2.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: [
+                  node2.avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: node2.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 ${node2.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(node2.icon, { className: `h-5 w-5 ${node2.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: node2.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[9px] text-gray-500", children: node2.subtitle })
+                  ] }),
+                  status === "complete" && /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-5 w-5 shrink-0 text-emerald-400" })
+                ] }),
+                node2.badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: node2.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)) })
+              ]
+            },
+            node2.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: AVATARS.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("g", { clipPath: "url(#geo-inset-clip)", children: geoData && pathGenerator ? geoData.features.map((feature, index) => {
-              const regionCode = feature.properties?.[regionPropertyKey] || feature.properties?.name || "";
-              const hasItems = regionsWithItems.has(regionCode);
-              const regionColor = regionColorMap.get(regionCode) ?? MAP_DEFAULT_STATE_COLOR;
-              const isActive = isRegionActive?.(regionCode);
-              const isHovered = hoveredRegion === regionCode;
-              const isDimmed = hasAnyActiveFilter && !isActive && hasItems;
-              let pathData = pathGenerator(feature);
-              if (pathData && projectionType === "albersUsa") {
-                const subpaths = pathData.split("Z").filter(Boolean);
-                const cleaned = subpaths.filter((sub) => {
-                  const lCount = (sub.match(/L/g) || []).length;
-                  if (lCount !== 3) return true;
-                  const nums = sub.match(/-?\d+\.?\d*/g)?.map(Number);
-                  if (!nums || nums.length !== 8) return true;
-                  const [x1, y1, x2, y2, x3, y3, x4, y4] = nums;
-                  const xs = /* @__PURE__ */ new Set([x1, x2, x3, x4]);
-                  const ys = /* @__PURE__ */ new Set([y1, y2, y3, y4]);
-                  return xs.size !== 2 || ys.size !== 2;
-                });
-                pathData = cleaned.length > 0 ? cleaned.join("Z") + "Z" : null;
-              }
-              if (!pathData) return null;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  d: pathData,
-                  fillRule: "evenodd",
-                  "data-region": hasItems ? regionCode : void 0,
-                  onMouseEnter: () => hasItems && onRegionHover(regionCode),
-                  onMouseLeave: () => onRegionHover(null),
-                  onClick: () => {
-                    if (hasItems && !wasDragAction()) {
-                      onRegionClick(regionCode);
-                    }
-                  },
-                  fill: hasItems ? isHovered ? regionColor : isActive ? regionColor : lighterColors.get(regionCode) || getLighterColor(regionColor) : MAP_DEFAULT_STATE_COLOR,
-                  stroke: isActive ? "#fff" : isDimmed ? "rgba(148, 163, 184, 0.15)" : "rgba(148, 163, 184, 0.40)",
-                  strokeWidth: (isActive ? 2.5 : 0.5) / zoom,
-                  filter: isActive ? "url(#glow-active)" : isDimmed ? "url(#inactive-dim)" : void 0,
-                  opacity: isDimmed ? 0.45 : 1,
-                  style: {
-                    transition: "fill 0.3s ease, opacity 0.3s ease",
-                    cursor: hasItems ? "pointer" : void 0
-                  }
-                },
-                `${regionCode}-${index}`
-              );
-            }) : null }),
-            projection ? regionGroups.map((regionData) => {
-              const point = projection(regionData.coordinates);
-              if (!point) return null;
-              const [x, y] = point;
-              const isAnimated = animatedRegions.has(regionData.code);
-              const markerSize = getMarkerSize(regionData.items.length);
-              const markerColor = regionColorMap.get(regionData.code) ?? MAP_DEFAULT_MARKER_COLOR;
-              const isActive = isRegionActive?.(regionData.code);
-              const isDimmed = hasAnyActiveFilter && !isActive;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "g",
-                {
-                  transform: `translate(${x}, ${y})`,
-                  "data-region": regionData.code,
-                  "data-testid": `marker-${regionData.code}`,
-                  onMouseEnter: () => onRegionHover(regionData.code),
-                  onMouseLeave: () => onRegionHover(null),
-                  onClick: () => {
-                    if (!wasDragAction()) {
-                      onRegionClick(regionData.code);
-                    }
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "g",
-                    {
-                      style: {
-                        transform: isAnimated ? "scale(1)" : "scale(0)",
-                        transformOrigin: "0 0",
-                        opacity: isAnimated ? isDimmed ? 0.35 : 1 : 0,
-                        transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
-                        cursor: "pointer"
-                      },
-                      filter: isActive ? "url(#marker-glow)" : void 0,
-                      children: [
-                        isActive ? /* @__PURE__ */ jsxRuntime.jsx(
-                          "circle",
-                          {
-                            r: markerSize + 6,
-                            fill: "none",
-                            stroke: "#fff",
-                            strokeWidth: 2,
-                            opacity: 0.8
-                          }
-                        ) : /* @__PURE__ */ jsxRuntime.jsx(
-                          "circle",
-                          {
-                            r: markerSize + 4,
-                            fill: "none",
-                            stroke: markerColor,
-                            strokeWidth: 1,
-                            opacity: isDimmed ? 0 : 0.4,
-                            className: isDimmed ? void 0 : "animate-ping",
-                            style: isDimmed ? void 0 : { animationDuration: "2s" }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "circle",
-                          {
-                            r: markerSize,
-                            fill: markerColor,
-                            stroke: isActive ? "#fff" : markerColor,
-                            strokeWidth: isActive ? 3 : 2,
-                            className: "transition-colors",
-                            style: {
-                              filter: isActive ? "brightness(1.2) saturate(1.3)" : isDimmed ? "saturate(0.3) brightness(0.8)" : "none"
-                            }
-                          }
-                        ),
-                        regionData.items.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                          "text",
-                          {
-                            textAnchor: "middle",
-                            dominantBaseline: "central",
-                            style: {
-                              fontFamily: "system-ui",
-                              fontSize: getFontSize(markerSize),
-                              fontWeight: "bold",
-                              fill: "#fff",
-                              pointerEvents: "none",
-                              opacity: isDimmed ? 0.5 : 1
-                            },
-                            children: regionData.items.length
-                          }
-                        )
-                      ]
-                    }
-                  )
-                },
-                regionData.code
-              );
-            }) : null
-          ]
-        }
-      )
-    }
-  );
+            /* @__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: AVATARS.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: AVATARS.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)) })
+        ] })
+      ] })
+    ] })
+  ] }) });
 }
-var GeoMapCanvas = React12__namespace.default.forwardRef(GeoMapCanvasInner);
-var MapZoomControls = React12__namespace.default.forwardRef(
-  ({ zoom, minZoom, maxZoom, onZoomIn, onZoomOut, labels }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+function IconTile({ icon: Icon, gradient, size = "md" }) {
+  const wrapper = size === "md" ? "h-12 w-12" : "h-10 w-10";
+  const icon = size === "md" ? "h-6 w-6" : "h-5 w-5";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${wrapper} rounded-xl bg-gradient-to-br ${gradient} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: `${icon} text-white` }) });
+}
+function BentoFeatureGrid({
+  aiPanel,
+  metricsPanel,
+  securityPanel,
+  agentsPanel,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full min-h-screen h-full flex items-center justify-center p-4 md:p-6 lg:p-8 ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full max-w-7xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-3 lg:grid-rows-2 h-full min-h-[600px] lg:min-h-[700px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
       {
-        ref,
-        className: "flex flex-col gap-1",
-        "data-testid": "map-zoom-controls",
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.6, delay: 0.1 },
+        className: "relative lg:row-span-2",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: onZoomIn,
-              disabled: zoom >= maxZoom,
-              className: "p-2 liquid-surface rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-              "aria-label": labels?.zoomIn ?? "Zoom in",
-              "data-testid": "zoom-in-button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.PlusIcon, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: onZoomOut,
-              disabled: zoom <= minZoom,
-              className: "p-2 liquid-surface rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-              "aria-label": labels?.zoomOut ?? "Zoom out",
-              "data-testid": "zoom-out-button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.MinusIcon, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 px-2 py-1 liquid-surface rounded-lg text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "text-xs font-medium text-gray-600 dark:text-gray-400",
-              "data-testid": "zoom-level",
-              children: [
-                Math.round(zoom * 100),
-                "%"
-              ]
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-MapZoomControls.displayName = "MapZoomControls";
-function InteractiveGeoMapInner({
-  items,
-  getRegionCode,
-  regionCoordinates,
-  defaultCenter,
-  geoJsonUrl,
-  regionPropertyKey,
-  projectionType,
-  getRegionColor,
-  isRegionActive,
-  onRegionToggle,
-  renderHoverContent,
-  formatCounter,
-  zoomLabels,
-  ariaLabel,
-  className
-}, ref) {
-  const mapStateOptions = {
-    items,
-    getRegionCode,
-    regionCoordinates,
-    defaultCenter
-  };
-  const mapState = useGeoMapState(mapStateOptions);
-  const regionColorMap = React12.useMemo(() => {
-    const colorMap2 = /* @__PURE__ */ new Map();
-    for (const code of Object.keys(regionCoordinates)) {
-      colorMap2.set(code, getRegionColor(code));
-    }
-    mapState.regionGroups.forEach((regionData) => {
-      if (!colorMap2.has(regionData.code)) {
-        colorMap2.set(regionData.code, getRegionColor(regionData.code));
+          aiPanel.bgTint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-px rounded-2xl bg-gradient-to-br ${aiPanel.bgTint}` }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col overflow-hidden rounded-2xl border ${aiPanel.borderColor ?? "border-gray-200 dark:border-gray-800"} bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pt-6 pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconTile, { icon: aiPanel.icon, gradient: aiPanel.gradient, size: "md" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-bold text-gray-900 dark:text-white", children: aiPanel.title })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: aiPanel.description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-[200px] w-full grow p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: aiPanel.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              framerMotion.motion.div,
+              {
+                initial: { opacity: 0, x: -20 },
+                animate: { opacity: 1, x: 0 },
+                transition: { delay: 0.3 + index * 0.2 },
+                className: `flex items-center gap-3 p-3 rounded-xl ${item.bgTint}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-2 w-2 rounded-full animate-pulse ${item.dotColor}` }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs font-medium ${item.textColor}`, children: item.label })
+                ]
+              },
+              `${item.label}-${index}`
+            )) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-px rounded-2xl shadow-sm" })
+        ]
       }
-    });
-    return colorMap2;
-  }, [regionCoordinates, mapState.regionGroups, getRegionColor]);
-  const handleRegionClick = (code) => {
-    onRegionToggle?.(code);
-  };
-  const hoveredRegionData = React12.useMemo(() => {
-    if (!mapState.hoveredRegion) return null;
-    return mapState.regionGroups.find(
-      (regionData) => regionData.code === mapState.hoveredRegion
-    ) ?? null;
-  }, [mapState.hoveredRegion, mapState.regionGroups]);
-  const counterText = React12.useMemo(() => {
-    if (!formatCounter) return null;
-    const hasActiveFilter = isRegionActive && mapState.regionGroups.some(
-      (regionData) => isRegionActive(regionData.code)
-    );
-    if (hasActiveFilter) {
-      const activeRegions = mapState.regionGroups.filter(
-        (regionData) => isRegionActive(regionData.code)
-      );
-      const activeItemCount = activeRegions.reduce(
-        (sum, regionData) => sum + regionData.items.length,
-        0
-      );
-      return formatCounter(items.length, mapState.regionGroups.length, activeItemCount, activeRegions.length);
-    }
-    return formatCounter(items.length, mapState.regionGroups.length);
-  }, [formatCounter, isRegionActive, mapState.regionGroups, items.length]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: `space-y-4 h-full ${className ?? ""}`,
-      "data-testid": "interactive-geo-map-container",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          GeoMapCanvas,
-          {
-            regionGroups: mapState.regionGroups,
-            regionColorMap,
-            animatedRegions: mapState.animatedRegions,
-            zoom: mapState.zoom,
-            panOffset: mapState.panOffset,
-            hoveredRegion: mapState.hoveredRegion,
-            onPan: mapState.handlePan,
-            onRegionHover: mapState.setHoveredRegion,
-            onRegionClick: handleRegionClick,
-            isRegionActive,
-            getMarkerSize: mapState.getMarkerSize,
-            getFontSize: mapState.getFontSize,
-            geoJsonUrl,
-            regionPropertyKey,
-            projectionType,
-            ariaLabel
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-          MapZoomControls,
-          {
-            zoom: mapState.zoom,
-            minZoom: mapState.MIN_ZOOM,
-            maxZoom: mapState.MAX_ZOOM,
-            onZoomIn: mapState.handleZoomIn,
-            onZoomOut: mapState.handleZoomOut,
-            labels: zoomLabels
-          }
-        ) }),
-        mapState.hoveredRegion && hoveredRegionData && renderHoverContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10 pointer-events-none", children: renderHoverContent(mapState.hoveredRegion, hoveredRegionData.items) }),
-        counterText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 left-3 z-10 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface rounded-lg px-3 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-300", children: counterText }) }) })
-      ] })
-    }
-  );
-}
-var InteractiveGeoMap = React12__namespace.default.forwardRef(InteractiveGeoMapInner);
-var DEFAULT_LEGEND_COLOR = "#6366f1";
-var GeoMapLegend = React12__namespace.default.forwardRef(
-  ({ items, colorMap: colorMap2, getFlagUrl, getLabel, labels, maxItems = 5 }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
       {
-        ref,
-        className: "liquid-surface rounded-lg p-3",
-        "data-testid": "map-legend",
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.6, delay: 0.2 },
+        className: "relative max-lg:row-start-1",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2", children: labels.title }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-            items.slice(0, maxItems).map((item) => {
-              const flagUrl = getFlagUrl?.(item.code);
-              const regionColor = colorMap2.get(item.code) ?? DEFAULT_LEGEND_COLOR;
-              const displayLabel = getLabel?.(item.code) ?? item.code;
+          metricsPanel.bgTint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-px rounded-2xl bg-gradient-to-br ${metricsPanel.bgTint}` }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col overflow-hidden rounded-2xl border ${metricsPanel.borderColor ?? "border-gray-200 dark:border-gray-800"} bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pt-6 pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconTile, { icon: metricsPanel.icon, gradient: metricsPanel.gradient, size: "sm" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-bold text-gray-900 dark:text-white", children: metricsPanel.title })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: metricsPanel.description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center px-6 pb-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 w-full", children: metricsPanel.metrics.map((metric, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              framerMotion.motion.div,
+              {
+                initial: { scale: 0 },
+                animate: { scale: 1 },
+                transition: { delay: 0.5 + index * 0.1 },
+                className: `${metric.bgTint} rounded-xl p-3 text-center`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-2xl font-bold ${metric.valueColor}`, children: metric.value }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-600 dark:text-gray-400", children: metric.label })
+                ]
+              },
+              `${metric.label}-${index}`
+            )) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-px rounded-2xl shadow-sm" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.6, delay: 0.3 },
+        className: "relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2",
+        children: [
+          securityPanel.bgTint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-px rounded-2xl bg-gradient-to-br ${securityPanel.bgTint}` }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col overflow-hidden rounded-2xl border ${securityPanel.borderColor ?? "border-gray-200 dark:border-gray-800"} bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pt-6 pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconTile, { icon: securityPanel.icon, gradient: securityPanel.gradient, size: "sm" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-bold text-gray-900 dark:text-white", children: securityPanel.title })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: securityPanel.description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center px-6 pb-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full space-y-2", children: securityPanel.bars.map((bar, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-1.5 flex-1 rounded-full overflow-hidden ${bar.trackColor}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.div,
+                {
+                  initial: { width: 0 },
+                  animate: { width: "100%" },
+                  transition: { delay: 0.7 + index * 0.2, duration: 1 },
+                  className: `h-full ${bar.fillColor}`
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium ${bar.labelColor}`, children: bar.label })
+            ] }, `${bar.label}-${index}`)) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-px rounded-2xl shadow-sm" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.6, delay: 0.4 },
+        className: "relative lg:row-span-2",
+        children: [
+          agentsPanel.bgTint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-px rounded-2xl bg-gradient-to-br ${agentsPanel.bgTint}` }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col overflow-hidden rounded-2xl border ${agentsPanel.borderColor ?? "border-gray-200 dark:border-gray-800"} bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pt-6 pb-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconTile, { icon: agentsPanel.icon, gradient: agentsPanel.gradient, size: "md" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-bold text-gray-900 dark:text-white", children: agentsPanel.title })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: agentsPanel.description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full grow p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: agentsPanel.agents.map((agent, index) => {
+              const delay = 0.5 + index * 0.1;
               return /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
+                framerMotion.motion.div,
                 {
-                  className: "flex items-center gap-2",
-                  "data-testid": `legend-item-${item.code}`,
+                  initial: { opacity: 0, scale: 0.8 },
+                  animate: { opacity: 1, scale: 1 },
+                  transition: { delay },
+                  className: `relative overflow-hidden rounded-xl bg-gradient-to-br ${agent.color} p-3 text-white`,
                   children: [
-                    flagUrl ? (
-                      // eslint-disable-next-line @next/next/no-img-element
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "img",
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold", children: agent.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 h-1 w-12 bg-white/30 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        framerMotion.motion.div,
                         {
-                          src: flagUrl,
-                          alt: item.code,
-                          className: "w-4 h-4 shadow-sm"
+                          initial: { width: 0 },
+                          animate: { width: "100%" },
+                          transition: { delay: delay + 0.3, duration: 0.8 },
+                          className: "h-full bg-white rounded-full"
                         }
-                      )
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: "w-4 h-4 rounded-full",
-                        style: { backgroundColor: regionColor },
-                        "data-testid": `legend-color-${item.code}`
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
-                      displayLabel,
-                      " (",
-                      item.count,
-                      ")"
-                    ] })
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 w-16 h-16 bg-white/10 rounded-full -mr-8 -mt-8" })
                   ]
                 },
-                item.code
+                agent.name
               );
-            }),
-            items.length > maxItems && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 italic pt-1", children: [
-              "+",
-              items.length - maxItems,
-              " ",
-              labels.more
-            ] })
-          ] })
+            }) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-px rounded-2xl shadow-sm" })
         ]
       }
-    );
-  }
-);
-GeoMapLegend.displayName = "GeoMapLegend";
-
-// src/lib/themes/brazil.ts
-var BRAZIL_STATE_PALETTES = {
-  AC: { primary: "#009b43", secondary: "#ffcf44", text: "light" },
-  AL: { primary: "#d9251d", secondary: "#01a2ce", text: "light" },
-  AM: { primary: "#213572", secondary: "#d9251d", text: "light" },
-  AP: { primary: "#213572", secondary: "#009b43", text: "light" },
-  BA: { primary: "#213572", secondary: "#d9251d", text: "light" },
-  CE: { primary: "#009b43", secondary: "#ffcf44", text: "light" },
-  DF: { primary: "#009b43", secondary: "#ffcf44", text: "light" },
-  ES: { primary: "#ea5a8d", secondary: "#01a2ce", text: "light" },
-  GO: { primary: "#009b43", secondary: "#213572", text: "light" },
-  MA: { primary: "#213572", secondary: "#d9251d", text: "light" },
-  MG: { primary: "#d9251d", secondary: "#f0f0f0", text: "light" },
-  MS: { primary: "#009b43", secondary: "#01a2ce", text: "light" },
-  MT: { primary: "#213572", secondary: "#009b43", text: "light" },
-  PA: { primary: "#d9251d", secondary: "#213572", text: "light" },
-  PB: { primary: "#d9251d", secondary: "#1d1d1b", text: "light" },
-  PE: { primary: "#213572", secondary: "#ffcf44", text: "light" },
-  PI: { primary: "#009b43", secondary: "#ffcf44", text: "light" },
-  PR: { primary: "#009b43", secondary: "#213572", text: "light" },
-  RJ: { primary: "#01a2ce", secondary: "#009b43", text: "light" },
-  RN: { primary: "#009b43", secondary: "#01a2ce", text: "light" },
-  RO: { primary: "#213572", secondary: "#009b43", text: "light" },
-  RR: { primary: "#009b43", secondary: "#01a2ce", text: "light" },
-  RS: { primary: "#009b43", secondary: "#d9251d", text: "light" },
-  SC: { primary: "#d9251d", secondary: "#a6ce39", text: "light" },
-  SE: { primary: "#009b43", secondary: "#213572", text: "light" },
-  SP: { primary: "#1d1d1b", secondary: "#d9251d", text: "light" },
-  TO: { primary: "#ef9926", secondary: "#213572", text: "dark" }
-};
-var BRAZIL_ACCENT_MAP = {
-  AC: "green",
-  AL: "red",
-  AM: "blue",
-  AP: "blue",
-  BA: "blue",
-  CE: "green",
-  DF: "green",
-  ES: "pink",
-  GO: "green",
-  MA: "blue",
-  MG: "red",
-  MS: "green",
-  MT: "blue",
-  PA: "red",
-  PB: "red",
-  PE: "blue",
-  PI: "green",
-  PR: "green",
-  RJ: "blue",
-  RN: "green",
-  RO: "blue",
-  RR: "green",
-  RS: "green",
-  SC: "red",
-  SE: "green",
-  SP: "black",
-  TO: "yellow"
-};
-var VALID_UFS = Object.keys(BRAZIL_STATE_PALETTES);
-var BR_THEME_CONFIG = {
-  palettes: BRAZIL_STATE_PALETTES,
-  accents: BRAZIL_ACCENT_MAP,
-  flagUrlTemplate: (code) => VALID_UFS.includes(code) ? `/flags/${code}.svg` : null
-};
-var BRAZIL_STATE_COORDINATES = {
-  AC: [-70, -9],
-  AL: [-36.6, -9.5],
-  AM: [-64, -4],
-  AP: [-51, 1],
-  BA: [-41.5, -12.5],
-  CE: [-39, -5],
-  DF: [-47.9, -15.8],
-  ES: [-40.3, -19.5],
-  GO: [-49.5, -16],
-  MA: [-45, -5],
-  MG: [-44.5, -18.5],
-  MS: [-55, -21],
-  MT: [-56, -13],
-  PA: [-52, -4],
-  PB: [-36.8, -7.1],
-  PE: [-37.5, -8.3],
-  PI: [-43, -7.5],
-  PR: [-51.5, -25],
-  RJ: [-43.2, -22.5],
-  RN: [-36.5, -5.8],
-  RO: [-63, -11],
-  RR: [-61, 2],
-  RS: [-53, -30],
-  SC: [-49.5, -27.5],
-  SE: [-37, -10.5],
-  SP: [-48.5, -22.5],
-  TO: [-48, -10]
-};
-var BRAZIL_MAP_CENTER = [-54, -15];
-var BRAZIL_MACRO_REGIONS = [
-  {
-    key: "sudeste",
-    label: "",
-    codes: ["SP", "RJ", "MG", "ES"],
-    gradient: "from-blue-500/15 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/15",
-    iconColor: "text-blue-600 dark:text-blue-400"
-  },
-  {
-    key: "sul",
-    label: "",
-    codes: ["PR", "SC", "RS"],
-    gradient: "from-emerald-500/15 to-teal-500/10 dark:from-emerald-500/20 dark:to-teal-500/15",
-    iconColor: "text-emerald-600 dark:text-emerald-400"
-  },
-  {
-    key: "nordeste",
-    label: "",
-    codes: ["BA", "PE", "CE", "MA", "PB", "RN", "AL", "SE", "PI"],
-    gradient: "from-orange-500/15 to-amber-500/10 dark:from-orange-500/20 dark:to-amber-500/15",
-    iconColor: "text-orange-600 dark:text-orange-400"
-  },
-  {
-    key: "centroOeste",
-    label: "",
-    codes: ["GO", "MT", "MS", "DF"],
-    gradient: "from-purple-500/15 to-fuchsia-500/10 dark:from-purple-500/20 dark:to-fuchsia-500/15",
-    iconColor: "text-purple-600 dark:text-purple-400"
-  },
-  {
-    key: "norte",
-    label: "",
-    codes: ["PA", "AM", "RO", "TO", "AC", "AP", "RR"],
-    gradient: "from-cyan-500/15 to-sky-500/10 dark:from-cyan-500/20 dark:to-sky-500/15",
-    iconColor: "text-cyan-600 dark:text-cyan-400"
-  }
-];
-var getBrazilFlagUrl = (uf) => getSubdivisionFlagUrl("BR", uf);
-var getBrazilHexColor = (uf) => getSubdivisionHexColor("BR", uf);
-var getBrazilPalette = (uf) => getSubdivisionPalette("BR", uf);
-var getBrazilGradient = (uf, direction) => getSubdivisionGradient("BR", uf, direction);
-var getBrazilColors = (uf) => getSubdivisionColors("BR", uf);
-var getBrazilAccent = (uf) => getSubdivisionAccent("BR", uf);
-var isValidBrazilState = (uf) => isValidSubdivision("BR", uf);
-var FUELS = [
-  { id: "gasolina", label: "Gasolina", color: "text-orange-400", bg: "bg-orange-500/15", ring: "ring-orange-500/40" },
-  { id: "etanol", label: "Etanol", color: "text-emerald-400", bg: "bg-emerald-500/15", ring: "ring-emerald-500/40" },
-  { id: "diesel", label: "Diesel", color: "text-slate-300", bg: "bg-slate-500/15", ring: "ring-slate-500/40" },
-  { id: "gnv", label: "GNV", color: "text-cyan-400", bg: "bg-cyan-500/15", ring: "ring-cyan-500/40" }
-];
-var FUEL_PRICING = {
-  gasolina: {
-    currentPrice: "R$ 5.77",
-    aiPrice: "R$ 5.89",
-    delta: "+R$ 0.12",
-    deltaUp: true,
-    confidence: "94%",
-    revenue: "R$ 2.4M",
-    volume: "890K L",
-    margin: "12.8%",
-    minMax: "MIN 5.20 \u2014 MAX 6.10",
-    competitors: [
-      { name: "Shell Paulista", distance: "0.8km", price: "R$ 5.99", change: "+1.7%", up: true },
-      { name: "Ipiranga Centro", distance: "1.2km", price: "R$ 5.85", change: "-0.7%", up: false },
-      { name: "BR Distribuidora", distance: "2.1km", price: "R$ 5.92", change: "+0.5%", up: true }
-    ]
-  },
-  etanol: {
-    currentPrice: "R$ 3.45",
-    aiPrice: "R$ 3.49",
-    delta: "+R$ 0.04",
-    deltaUp: true,
-    confidence: "91%",
-    revenue: "R$ 980K",
-    volume: "620K L",
-    margin: "14.2%",
-    minMax: "MIN 2.90 \u2014 MAX 3.80",
-    competitors: [
-      { name: "Shell Paulista", distance: "0.8km", price: "R$ 3.59", change: "+2.9%", up: true },
-      { name: "Ipiranga Centro", distance: "1.2km", price: "R$ 3.42", change: "-0.9%", up: false },
-      { name: "BR Distribuidora", distance: "2.1km", price: "R$ 3.55", change: "+1.1%", up: true }
-    ]
-  },
-  diesel: {
-    currentPrice: "R$ 6.04",
-    aiPrice: "R$ 6.12",
-    delta: "+R$ 0.08",
-    deltaUp: true,
-    confidence: "89%",
-    revenue: "R$ 1.8M",
-    volume: "450K L",
-    margin: "10.5%",
-    minMax: "MIN 5.60 \u2014 MAX 6.50",
-    competitors: [
-      { name: "Shell Paulista", distance: "0.8km", price: "R$ 6.19", change: "+1.1%", up: true },
-      { name: "Ipiranga Centro", distance: "1.2km", price: "R$ 6.02", change: "-0.5%", up: false },
-      { name: "BR Distribuidora", distance: "2.1km", price: "R$ 6.15", change: "+0.8%", up: true }
-    ]
-  },
-  gnv: {
-    currentPrice: "R$ 4.22",
-    aiPrice: "R$ 4.29",
-    delta: "+R$ 0.07",
-    deltaUp: true,
-    confidence: "87%",
-    revenue: "R$ 420K",
-    volume: "180K m\xB3",
-    margin: "15.1%",
-    minMax: "MIN 3.80 \u2014 MAX 4.60",
-    competitors: [
-      { name: "GNV Center SP", distance: "1.5km", price: "R$ 4.35", change: "+1.4%", up: true },
-      { name: "Posto GNV Sul", distance: "2.8km", price: "R$ 4.19", change: "-0.7%", up: false },
-      { name: "Auto Gas BR", distance: "3.2km", price: "R$ 4.28", change: "+0.2%", up: true }
-    ]
-  }
-};
-var STATIONS = [
-  { id: "1", name: "Posto Paulista", region: "SP", value: 42e4, fuel: "gasolina", price: "R$ 5.89" },
-  { id: "2", name: "Posto Moema", region: "SP", value: 38e4, fuel: "etanol", price: "R$ 3.49" },
-  { id: "3", name: "Posto Campinas", region: "SP", value: 34e4, fuel: "diesel", price: "R$ 6.12" },
-  { id: "4", name: "Posto Santos", region: "SP", value: 29e4, fuel: "gnv", price: "R$ 4.29" },
-  { id: "5", name: "Posto Barra", region: "RJ", value: 31e4, fuel: "gasolina", price: "R$ 6.05" },
-  { id: "6", name: "Posto Niter\xF3i", region: "RJ", value: 26e4, fuel: "etanol", price: "R$ 3.59" },
-  { id: "7", name: "Posto Savassi", region: "MG", value: 29e4, fuel: "gasolina", price: "R$ 5.79" },
-  { id: "8", name: "Posto Contagem", region: "MG", value: 22e4, fuel: "diesel", price: "R$ 6.05" },
-  { id: "9", name: "Posto Boa Viagem", region: "PE", value: 24e4, fuel: "gasolina", price: "R$ 5.85" },
-  { id: "10", name: "Posto Moinhos", region: "RS", value: 26e4, fuel: "etanol", price: "R$ 3.42" },
-  { id: "11", name: "Posto Curitiba", region: "PR", value: 27e4, fuel: "diesel", price: "R$ 5.99" },
-  { id: "12", name: "Posto Salvador", region: "BA", value: 25e4, fuel: "gasolina", price: "R$ 5.82" },
-  { id: "13", name: "Posto Bras\xEDlia", region: "DF", value: 3e5, fuel: "gnv", price: "R$ 4.15" },
-  { id: "14", name: "Posto Goi\xE2nia", region: "GO", value: 21e4, fuel: "gasolina", price: "R$ 5.78" },
-  { id: "15", name: "Posto Bel\xE9m", region: "PA", value: 19e4, fuel: "diesel", price: "R$ 6.25" }
-];
-var AVATARS = {
-  data: "https://api.dicebear.com/9.x/lorelei/svg?seed=Laura&hair=variant31&beardProbability=0&mouth=happy01",
-  market: "https://api.dicebear.com/9.x/notionists/svg?seed=Paulo&hair=variant35&beardProbability=0&gestureProbability=0&glasses=variant03&glassesProbability=100",
-  pricing: "https://api.dicebear.com/9.x/lorelei/svg?seed=Roberta&hair=variant31&beardProbability=0&glasses=variant01&glassesProbability=100&mouth=happy01"
-};
-function buildPipelineNodes(fuelLabel, aiPrice, state, stationName) {
-  const isAll = state === "ALL";
-  const location = stationName ? `${stationName} (${state})` : isAll ? "All Regions" : `${state} Region`;
-  const stateLabel = isAll ? "BR" : state;
-  return [
-    { id: "start", label: "Start", subtitle: `${fuelLabel} \xB7 ${location}`, icon: HeroIcons.PlayIcon, color: "text-emerald-400", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.5)", step: 0 },
-    { id: "bigquery", label: "BigQuery Sales", subtitle: `${fuelLabel} \xB7 ${stateLabel} sales_daily`, icon: HeroIcons.ServerStackIcon, color: "text-blue-400", bg: "bg-blue-500/15", glow: "rgba(59,130,246,0.5)", badges: [{ text: "datasource", color: "bg-blue-500/20 text-blue-300" }], step: 1 },
-    { id: "postgres", label: "Pricing DB", subtitle: `${stateLabel} competitor_prices`, icon: HeroIcons.ServerStackIcon, color: "text-blue-400", bg: "bg-blue-500/15", glow: "rgba(59,130,246,0.5)", badges: [{ text: "datasource", color: "bg-blue-500/20 text-blue-300" }], step: 1 },
-    { id: "weather", label: "Weather", subtitle: `${stateLabel} \xB7 OpenMeteo API`, icon: HeroIcons.CloudIcon, color: "text-cyan-400", bg: "bg-cyan-500/15", glow: "rgba(6,182,212,0.5)", badges: [{ text: "tool", color: "bg-cyan-500/20 text-cyan-300" }, { text: "external", color: "bg-gray-500/20 text-gray-300" }], step: 1 },
-    { id: "market", label: "Market Data", subtitle: "Brent, USD/BRL, Petrobras", icon: HeroIcons.ArrowTrendingUpIcon, color: "text-amber-400", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.5)", badges: [{ text: "tool", color: "bg-amber-500/20 text-amber-300" }, { text: "market", color: "bg-gray-500/20 text-gray-300" }], step: 1 },
-    { id: "news", label: "News", subtitle: `${fuelLabel} \xB7 ${stateLabel} headlines`, icon: HeroIcons.NewspaperIcon, color: "text-orange-400", bg: "bg-orange-500/15", glow: "rgba(249,115,22,0.5)", badges: [{ text: "tool", color: "bg-orange-500/20 text-orange-300" }, { text: "external", color: "bg-gray-500/20 text-gray-300" }], step: 1 },
-    { id: "agg", label: "Aggregate", subtitle: `5 inputs \u2192 ${fuelLabel} \xB7 ${stateLabel}`, icon: HeroIcons.BoltIcon, color: "text-teal-400", bg: "bg-teal-500/15", glow: "rgba(20,184,166,0.5)", badges: [{ text: "aggregator", color: "bg-teal-500/20 text-teal-300" }], step: 2 },
-    { id: "data-analyst", label: "Data Analyst", subtitle: `${fuelLabel} \xB7 ${stateLabel} patterns`, icon: HeroIcons.CpuChipIcon, color: "text-purple-400", bg: "bg-purple-500/15", glow: "rgba(168,85,247,0.5)", avatar: AVATARS.data, badges: [{ text: "agent", color: "bg-purple-500/20 text-purple-300" }, { text: "intermediate", color: "bg-blue-500/20 text-blue-300" }], step: 3 },
-    { id: "market-analyst", label: "Market Analyst", subtitle: `${fuelLabel} \xB7 ${stateLabel} trends`, icon: HeroIcons.CpuChipIcon, color: "text-purple-400", bg: "bg-purple-500/15", glow: "rgba(168,85,247,0.5)", avatar: AVATARS.market, badges: [{ text: "agent", color: "bg-purple-500/20 text-purple-300" }, { text: "advanced", color: "bg-amber-500/20 text-amber-300" }], step: 4 },
-    { id: "pricing-mgr", label: "Pricing Manager", subtitle: `${fuelLabel} \xB7 ${location}`, icon: HeroIcons.CpuChipIcon, color: "text-purple-400", bg: "bg-purple-500/15", glow: "rgba(168,85,247,0.5)", avatar: AVATARS.pricing, badges: [{ text: "agent", color: "bg-purple-500/20 text-purple-300" }, { text: "advanced", color: "bg-amber-500/20 text-amber-300" }], step: 5 },
-    { id: "rule", label: "Peak Hours", subtitle: `+2% \xB7 ${fuelLabel} \xB7 ${stateLabel}`, icon: HeroIcons.ShieldCheckIcon, color: "text-rose-400", bg: "bg-rose-500/15", glow: "rgba(244,63,94,0.5)", badges: [{ text: "rule", color: "bg-rose-500/20 text-rose-300" }, { text: "percentage", color: "bg-gray-500/20 text-gray-300" }], step: 6 },
-    { id: "end", label: "End", subtitle: `${aiPrice} \xB7 ${location}`, icon: HeroIcons.StopIcon, color: "text-red-400", bg: "bg-red-500/15", glow: "rgba(239,68,68,0.5)", step: 7 }
-  ];
+    )
+  ] }) }) });
 }
-var STEP_LABELS = [
-  "Triggering pipeline",
-  "Fetching data sources (parallel)",
-  "Aggregating context",
-  "Running Data Analyst",
-  "Running Market Analyst",
-  "Running Pricing Manager",
-  "Applying business rules",
-  "Complete \u2014 R$ 5.89/L \xB7 94% confidence"
-];
-function PipelinePreview({ activeFuel, activeState, activeStation, onActiveFuelChange, onActiveStateChange, onActiveStationChange, onStepChange }) {
-  const fuelMeta = FUELS.find((f) => f.id === activeFuel);
-  const fuelPricing = FUEL_PRICING[activeFuel];
-  const stationsInState = React12.useMemo(() => activeState === "ALL" ? [] : STATIONS.filter((s) => s.region === activeState && s.fuel === activeFuel), [activeFuel, activeState]);
-  const availableStates = React12.useMemo(() => [...new Set(STATIONS.filter((s) => s.fuel === activeFuel).map((s) => s.region))], [activeFuel]);
-  const selectedStationName = activeStation ? STATIONS.find((s) => s.id === activeStation)?.name.replace("Posto ", "") ?? null : null;
-  const pipelineNodes = React12.useMemo(() => buildPipelineNodes(fuelMeta.label, fuelPricing.aiPrice, activeState, selectedStationName), [activeFuel, activeState, activeStation, fuelMeta.label, fuelPricing.aiPrice, selectedStationName]);
-  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);
-    onStepChange?.(0);
-    let step2 = 0;
-    intervalRef.current = setInterval(() => {
-      step2 += 1;
-      if (step2 > 7) {
-        if (intervalRef.current) clearInterval(intervalRef.current);
-        setActiveStep(7);
-        onStepChange?.(7);
-      } else {
-        setActiveStep(step2);
-        onStepChange?.(step2);
-      }
-    }, 1400);
-  }, [onStepChange]);
-  const handleStop = React12.useCallback(() => {
-    if (intervalRef.current) clearInterval(intervalRef.current);
-    setActiveStep(-1);
-    onStepChange?.(-1);
-  }, [onStepChange]);
-  React12.useEffect(() => () => {
-    if (intervalRef.current) clearInterval(intervalRef.current);
-  }, []);
-  const getStatus = (node2) => {
-    if (activeStep < 0) return "idle";
-    if (node2.step < activeStep) return "complete";
-    if (node2.step === activeStep) return "active";
-    return "idle";
-  };
-  const rows = React12.useMemo(() => {
-    const result = [];
-    let step2 = -1;
-    for (const node2 of pipelineNodes) {
-      if (node2.step !== step2) {
-        result.push([]);
-        step2 = node2.step;
-      }
-      result[result.length - 1].push(node2);
-    }
-    return result;
-  }, [pipelineNodes]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 border-b border-white/5 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: "text-[7px] font-bold uppercase tracking-wider text-gray-600 px-1.5", children: "Fuel" }),
-        FUELS.map((fuel) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+var CustomerAnalyticsDemo = () => /* @__PURE__ */ jsxRuntime.jsx(
+  framerMotion.motion.div,
+  {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.5 },
+    className: "flex flex-col h-full overflow-hidden",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          initial: { y: -20, opacity: 0 },
+          animate: { y: 0, opacity: 1 },
+          transition: { duration: 0.5, delay: 0.3 },
+          className: "h-14 border-b bg-background/95 backdrop-blur-sm flex items-center justify-between px-4",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: "An\xE1lise de Clientes" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 font-medium", children: "IA Analytics" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BellIcon, { className: "h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.MagnifyingGlassIcon, { className: "h-4 w-4 text-muted-foreground" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
           {
-            type: "button",
-            onClick: () => {
-              onActiveFuelChange?.(fuel.id);
-              if (!isIdle) handleStop();
-            },
-            className: `px-2 py-1 rounded-md text-[9px] font-semibold transition-all duration-200 ${activeFuel === fuel.id ? `${fuel.bg} ${fuel.color} shadow-sm` : "text-gray-500 hover:text-gray-300 hover:bg-white/5"}`,
-            children: fuel.label
-          },
-          fuel.id
-        ))
-      ] }),
-      /* @__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: "text-[7px] font-bold uppercase tracking-wider text-gray-600 px-1.5", children: "State" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onActiveStateChange?.("ALL");
-              onActiveStationChange?.(null);
-              if (!isIdle) handleStop();
-            },
-            className: `px-2 py-1 rounded-md text-[9px] font-semibold transition-all duration-200 ${activeState === "ALL" ? "bg-white/10 text-white shadow-sm" : "text-gray-500 hover:text-gray-300 hover:bg-white/5"}`,
-            children: "All"
-          }
-        ),
-        availableStates.map((state) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onActiveStateChange?.(state);
-              onActiveStationChange?.(null);
-              if (!isIdle) handleStop();
-            },
-            className: `flex items-center gap-1 px-1.5 py-1 rounded-md text-[9px] font-semibold transition-all duration-200 ${activeState === state ? "bg-white/10 text-white shadow-sm" : "text-gray-500 hover:text-gray-300 hover:bg-white/5"}`,
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: 0.5 },
+            className: "grid grid-cols-2 gap-3",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("img", { src: `/flags/${state}.svg`, alt: state, className: "h-3.5 w-3.5 rounded-sm", loading: "lazy" }),
-              state
+              /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 bg-gradient-to-br from-blue-500 to-cyan-500 text-white", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.UsersIcon, { className: "h-5 w-5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-white/20 text-white border-white/30 h-5 text-xs", children: "+12%" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: "2.547" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: "Clientes Ativos" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 bg-gradient-to-br from-purple-500 to-pink-500 text-white", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingUpIcon, { className: "h-5 w-5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-white/20 text-white border-white/30 h-5 text-xs", children: "+28%" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: "R$ 485k" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: "Receita Mensal" })
+              ] })
             ]
-          },
-          state
-        ))
-      ] }),
-      activeState !== "ALL" && stationsInState.length > 0 && /* @__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: "text-[7px] font-bold uppercase tracking-wider text-gray-600 px-1.5", children: "Station" }),
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          framerMotion.motion.div,
           {
-            type: "button",
-            onClick: () => {
-              onActiveStationChange?.(null);
-              if (!isIdle) handleStop();
-            },
-            className: `px-2 py-1 rounded-md text-[9px] font-semibold transition-all duration-200 ${!activeStation ? "bg-white/10 text-white shadow-sm" : "text-gray-500 hover:text-gray-300 hover:bg-white/5"}`,
-            children: "All"
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: 0.7 },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-b bg-gradient-to-r from-blue-600 to-cyan-600 text-white", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-bold", children: "Insights IA" })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.div,
+                  {
+                    initial: { opacity: 0, x: -10 },
+                    animate: { opacity: 1, x: 0 },
+                    transition: { delay: 0.9 },
+                    className: "flex items-start gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded-full bg-green-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3 w-3 text-green-500" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium", children: "Segmento Premium crescendo" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "+45% de convers\xE3o em produtos acima de R$ 500" })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.div,
+                  {
+                    initial: { opacity: 0, x: -10 },
+                    animate: { opacity: 1, x: 0 },
+                    transition: { delay: 1.1 },
+                    className: "flex items-start gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded-full bg-blue-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingUpIcon, { className: "h-3 w-3 text-blue-500" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium", children: "Reten\xE7\xE3o melhorou 32%" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "Ap\xF3s implementa\xE7\xE3o do programa de fidelidade" })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.div,
+                  {
+                    initial: { opacity: 0, x: -10 },
+                    animate: { opacity: 1, x: 0 },
+                    transition: { delay: 1.3 },
+                    className: "flex items-start gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded-full bg-purple-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.UsersIcon, { className: "h-3 w-3 text-purple-500" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium", children: "847 clientes em risco" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "Sem compras h\xE1 60+ dias - recomendar campanha" })
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ] })
           }
         ),
-        stationsInState.map((station) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
           {
-            type: "button",
-            onClick: () => {
-              onActiveStationChange?.(station.id);
-              if (!isIdle) handleStop();
-            },
-            className: `px-2 py-1 rounded-md text-[9px] font-semibold transition-all duration-200 ${activeStation === station.id ? "bg-blue-500/15 text-blue-300 shadow-sm" : "text-gray-500 hover:text-gray-300 hover:bg-white/5"}`,
-            children: station.name.replace("Posto ", "")
-          },
-          station.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_LABELS.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-blue-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.jsxs("span", { className: "text-[8px] font-semibold text-emerald-400", children: [
-            fuelPricing.aiPrice,
-            " \xB7 ",
-            fuelPricing.confidence
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-2 w-2 rounded-full ${isRunning ? "bg-blue-500 animate-pulse" : isComplete ? "bg-emerald-500" : "bg-gray-600"}` }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-gray-500 max-w-[120px] truncate", children: activeStep >= 0 ? STEP_LABELS[activeStep] : "Ready" }),
-        isIdle ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: handleRun, className: "flex items-center gap-1 rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 px-3 py-1 text-[10px] font-semibold text-white shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 hover:scale-105 active:scale-95 transition-all", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.PlayIcon, { className: "h-3 w-3" }),
-          " Run"
-        ] }) : 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.PlayIcon, { className: "h-3 w-3" }),
-          " Run Again"
-        ] })
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: 1.5 },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-semibold mb-2", children: "Top Clientes (\xDAltimo M\xEAs)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: ["Maria Silva", "Jo\xE3o Santos", "Ana Costa"].map((name, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                framerMotion.motion.div,
+                {
+                  initial: { opacity: 0, x: -10 },
+                  animate: { opacity: 1, x: 0 },
+                  transition: { delay: 1.7 + i * 0.2 },
+                  className: "flex items-center justify-between",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded-full bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center text-white text-[10px] font-bold", children: name.charAt(0) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: name })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                      "R$ ",
+                      Math.floor(Math.random() * 50 + 10),
+                      "k"
+                    ] })
+                  ]
+                },
+                name
+              )) })
+            ] })
+          }
+        )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 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 items-center gap-0 shrink-0", children: [
-        rowIndex > 0 && row[0] && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "40", height: "2", className: "shrink-0 mx-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "1", x2: "40", y2: "1", stroke: activeStep >= row[0].step ? "#10b981" : "#374151", strokeWidth: "2", strokeDasharray: "4 3", style: { animation: activeStep === row[0].step ? "edgeFlow 0.8s linear infinite" : "none" } }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex ${row.length > 1 ? "flex-col gap-2" : ""}`, children: row.map((node2) => {
-          const status = getStatus(node2);
-          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" ? "ring-2 ring-blue-500/50 scale-[1.03]" : status === "complete" ? "ring-1 ring-emerald-500/30" : "opacity-40"}`,
-              style: status === "active" ? { "--glow": node2.glow, animation: "nodeGlow 1.5s ease-in-out infinite" } : void 0,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 mb-1.5", children: [
-                  node2.avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: node2.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 ${node2.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(node2.icon, { className: `h-5 w-5 ${node2.color}` }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13px] font-semibold text-white truncate", children: node2.label }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[9px] text-gray-500 truncate", children: node2.subtitle })
-                  ] }),
-                  status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-5 w-5 text-emerald-400 shrink-0" }) : null
-                ] }),
-                node2.badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: node2.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)) })
-              ]
-            },
-            node2.id
-          );
-        }) })
-      ] }, rowIndex))
     ] })
-  ] });
-}
-function AgentAnalysisCard2({ name, avatar, duration, output }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-xl p-3 transition-all duration-300", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatar, 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: name }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[8px] text-gray-500", children: duration })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3.5 w-3.5 text-emerald-400 shrink-0" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[8px] text-gray-400 leading-relaxed", children: output })
-  ] });
-}
-function MarketPricesCard2({ competitors }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-xl p-3.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-1.5 text-[10px] font-semibold text-gray-400", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.TableCellsIcon, { className: "h-3 w-3 text-sky-500" }),
-      "Market Prices"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: competitors.map((competitor) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-[9px]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 truncate mr-2", children: competitor.name }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: competitor.distance }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-white", children: competitor.price }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-semibold ${competitor.up ? "text-emerald-400" : "text-rose-400"}`, children: competitor.change })
-      ] })
-    ] }, competitor.name)) })
-  ] });
-}
-var TOOL_OUTPUTS = {
-  SP: {
-    weather: "Clear skies next 7 days. Temp 28-32\xB0C. No rain expected \u2014 stable demand pattern for commuters.",
-    market: "Brent $82.40 (+2.3%). USD/BRL 5.12 (stable). Petrobras wholesale +1.2% effective Monday.",
-    news: "OPEC holds production steady. Petrobras announces refinery maintenance in Cubat\xE3o \u2014 supply may tighten in SP region next week."
-  },
-  RJ: {
-    weather: "Scattered rain Thu-Fri. Temp 26-30\xB0C. Weekend clear \u2014 expect lower weekday volumes, rebound Sat-Sun.",
-    market: "Brent $82.40 (+2.3%). USD/BRL 5.12. Reduc refinery running at 92% capacity \u2014 normal supply.",
-    news: "Rio toll road expansion opening next month. New stations in Barra da Tijuca corridor \u2014 increased competition expected."
-  },
-  MG: {
-    weather: "Dry season continues. Temp 24-28\xB0C. Rural demand rising with harvest season logistics.",
-    market: "Brent $82.40. REGAP refinery at full capacity. Ethanol supply strong from Tri\xE2ngulo Mineiro mills.",
-    news: "MG state reduces ICMS on diesel by 2% starting next month. Fleet operators may shift purchasing patterns."
-  },
-  PE: {
-    weather: "Tropical heat 30-34\xB0C. Brief showers. High AC usage boosting GNV demand for taxi fleets.",
-    market: "Northeast wholesale prices 3% below Southeast. Lower logistics costs from Suape port proximity.",
-    news: "Recife urban mobility plan adds 50 GNV buses. Growing alternative fuel adoption in metro region."
-  },
-  RS: {
-    weather: "Cold front arriving. Temp dropping to 12-18\xB0C. Diesel demand spike expected for heating and freight.",
-    market: "Brent $82.40. Cross-border pricing from Argentina putting downward pressure on border stations.",
-    news: "RS floods recovery driving construction diesel demand. Federal highway repairs boosting freight volumes."
-  },
-  ALL: {
-    weather: "National: mixed conditions. Clear in SE, rain in NE coast, cold front in South. Regional demand patterns diverging.",
-    market: "Brent $82.40 (+2.3%). USD/BRL 5.12. Petrobras wholesale adjustment +1.2% Monday. Ethanol harvest underway.",
-    news: "OPEC holds output. Petrobras maintenance in SP. MG cuts diesel ICMS. RS recovery drives freight demand."
-  }
-};
-var AGENT_ANALYSES = {
-  gasolina: {
-    dataAnalyst: "Sales volume up 12% MoM in SP region. Peak demand 6-9 AM and 5-8 PM. Weekend volumes 18% lower. 3 stations below target margin at current pricing.",
-    marketAnalyst: "Shell Paulista raised prices +1.7% yesterday. Ipiranga holding steady. Brent crude up 2.3% this week. USD/BRL stable at 5.12. Weather forecast clear \u2014 no demand impact expected.",
-    pricingManager: "Recommend R$ 5.89/L (+R$ 0.12). Captures competitor gap while maintaining 12.8% margin. Peak hours rule adds +2% during rush. All prices within MIN 5.20 \u2014 MAX 6.10 guardrails."
-  },
-  etanol: {
-    dataAnalyst: "Etanol demand rising seasonally. Volume 620K L with 14.2% margin. Sugar crop outlook positive \u2014 supply stable through Q2.",
-    marketAnalyst: "Etanol/gasoline ratio at 68% \u2014 below the 70% threshold that drives consumer switching. Competitors averaging R$ 3.52 in SP region.",
-    pricingManager: "Recommend R$ 3.49/L (+R$ 0.04). Conservative increase to maintain ratio advantage. Confidence 91% based on stable supply and competitor positioning."
-  },
-  diesel: {
-    dataAnalyst: "Diesel volumes declining 3% \u2014 seasonal fleet maintenance cycle. B2B contracts account for 72% of volume. Margin pressure from logistics operators.",
-    marketAnalyst: "Diesel supply tightening globally. Brent+crack spread widening. Competitor BR Distribuidora cut prices -0.5% to gain fleet contracts.",
-    pricingManager: "Recommend R$ 6.12/L (+R$ 0.08). Modest increase justified by supply constraints. Fleet contracts locked \u2014 minimal churn risk. Confidence 89%."
-  },
-  gnv: {
-    dataAnalyst: "GNV adoption accelerating \u2014 15% new vehicle conversions in SP. Volume 180K m\xB3 with highest margin at 15.1%. Limited competition in the segment.",
-    marketAnalyst: "Only 3 GNV competitors within 5km radius. GNV Center SP at R$ 4.35 is the price ceiling. Natural gas wholesale costs flat this quarter.",
-    pricingManager: "Recommend R$ 4.29/L (+R$ 0.07). Room to increase given limited competition. Confidence 87% \u2014 lower due to smaller dataset but strong margin signal."
   }
-};
-function FuelDashboardView({ activeFuel, onActiveFuelChange }) {
-  const [activeState, setActiveState] = React12.useState("ALL");
-  const [activeStation, setActiveStation] = React12.useState(null);
-  const [pipelineStep, setPipelineStep] = React12.useState(-1);
-  const pricing = FUEL_PRICING[activeFuel];
-  const fuelMeta = FUELS.find((f) => f.id === activeFuel);
-  const analysis = AGENT_ANALYSES[activeFuel];
-  const selectedMapState = activeState === "ALL" ? null : activeState;
-  const toggleMapState = React12.useCallback((code) => {
-    setActiveState((prev) => prev === code ? "ALL" : code);
-    setActiveStation(null);
-  }, []);
-  const isMapActive = React12.useCallback((code) => code === selectedMapState, [selectedMapState]);
-  const toolOutputs = TOOL_OUTPUTS[selectedMapState ?? "ALL"] ?? TOOL_OUTPUTS["ALL"];
-  const filteredStations = React12.useMemo(() => {
-    const byFuel = STATIONS.filter((s) => s.fuel === activeFuel);
-    return selectedMapState ? byFuel.filter((s) => s.region === selectedMapState) : byFuel;
-  }, [activeFuel, selectedMapState]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-xl overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PipelinePreview,
-      {
-        activeFuel,
-        activeState,
-        activeStation,
-        onActiveFuelChange,
-        onActiveStateChange: setActiveState,
-        onActiveStationChange: setActiveStation,
-        onStepChange: setPipelineStep
-      }
-    ),
-    pipelineStep >= 3 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 px-3 py-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
-        pipelineStep >= 3 && /* @__PURE__ */ jsxRuntime.jsx(AgentAnalysisCard2, { name: "Data Analyst", avatar: AVATARS.data, duration: "1.8s", output: analysis.dataAnalyst }),
-        pipelineStep >= 4 && /* @__PURE__ */ jsxRuntime.jsx(AgentAnalysisCard2, { name: "Market Analyst", avatar: AVATARS.market, duration: "2.1s", output: analysis.marketAnalyst }),
-        pipelineStep >= 5 && /* @__PURE__ */ jsxRuntime.jsx(AgentAnalysisCard2, { name: "Pricing Manager", avatar: AVATARS.pricing, duration: "1.4s", output: analysis.pricingManager })
-      ] }),
-      pipelineStep >= 6 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 grid grid-cols-[200px_1fr_1fr] gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface rounded-xl overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-          InteractiveGeoMap,
-          {
-            items: STATIONS.filter((s) => s.fuel === activeFuel),
-            getRegionCode: (item) => item.region,
-            regionCoordinates: BRAZIL_STATE_COORDINATES,
-            defaultCenter: BRAZIL_MAP_CENTER,
-            geoJsonUrl: "/maps/brazil.geo.json",
-            regionPropertyKey: "code",
-            projectionType: "mercator",
-            getRegionColor: (code) => BRAZIL_STATE_PALETTES[code]?.primary ?? "#374151",
-            isRegionActive: isMapActive,
-            onRegionToggle: toggleMapState,
-            formatCounter: (total, regions, activeItems) => selectedMapState ? `${activeItems ?? 0} ${fuelMeta.label} stations in ${selectedMapState}` : `${total} stations \xB7 ${regions} states`,
-            ariaLabel: `Brazil ${fuelMeta.label} stations`,
-            className: "h-full"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-xl p-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-1.5 text-[10px] font-semibold text-gray-400", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.RocketLaunchIcon, { className: "h-3.5 w-3.5 text-amber-500" }),
-            "AI Recommendations \u2014 ",
-            fuelMeta.label,
-            selectedMapState && /* @__PURE__ */ jsxRuntime.jsx("img", { src: `/flags/${selectedMapState}.svg`, alt: selectedMapState, className: "h-4 w-4 rounded-sm" }),
-            selectedMapState && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold text-white", children: selectedMapState }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[8px] font-semibold text-emerald-400", children: [
-              pricing.confidence,
-              " confidence"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr_auto_auto_auto_auto] items-center gap-x-3 px-2 py-1 text-[8px] font-bold uppercase tracking-wider text-gray-600", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "State" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Station" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Current" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "AI Price" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Delta" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Status" })
-            ] }),
-            filteredStations.slice(0, 6).map((station) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr_auto_auto_auto_auto] items-center gap-x-3 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] text-[9px]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("img", { src: `/flags/${station.region}.svg`, alt: station.region, className: "h-4 w-4 rounded-sm" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300 truncate", children: station.name }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 line-through", children: station.price }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-white", children: pricing.aiPrice }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-emerald-400", children: pricing.delta }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[7px] font-semibold text-emerald-400", children: "\u2713" })
-            ] }, station.id)),
-            filteredStations.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-3 text-center text-[9px] text-gray-500 italic", children: [
-              "No ",
-              fuelMeta.label,
-              " stations in ",
-              selectedMapState
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2 border-t border-white/5 pt-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "rounded-lg bg-emerald-600 px-2.5 py-1 text-[9px] font-semibold text-white flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.HandThumbUpIcon, { className: "h-3 w-3" }),
-              " Approve ",
-              selectedMapState ? filteredStations.length : "All"
+);
+var FinancialDemo = () => /* @__PURE__ */ jsxRuntime.jsx(
+  framerMotion.motion.div,
+  {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.5 },
+    className: "flex flex-col h-full overflow-hidden",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          initial: { y: -20, opacity: 0 },
+          animate: { y: 0, opacity: 1 },
+          transition: { duration: 0.5, delay: 0.3 },
+          className: "h-14 border-b bg-background/95 backdrop-blur-sm flex items-center justify-between px-4",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: "Planejamento Financeiro" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full bg-green-500/10 text-green-600 dark:text-green-400 font-medium", children: "Q4 2024" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rounded-lg bg-gray-700 px-2.5 py-1 text-[9px] font-semibold text-gray-300", children: "Modify" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto text-[8px] text-purple-400 flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.AdjustmentsHorizontalIcon, { className: "h-3 w-3" }),
-              " ",
-              pricing.minMax
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BellIcon, { className: "h-4 w-4 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.MagnifyingGlassIcon, { className: "h-4 w-4 text-muted-foreground" })
             ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-xl p-2.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5 flex items-center gap-1.5 text-[8px] font-bold uppercase tracking-wider text-gray-600", children: [
-              "Tool Outputs",
-              selectedMapState && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "normal-case tracking-normal font-semibold text-white", children: [
-                " \u2014 ",
-                selectedMapState
-              ] })
-            ] }),
-            [
-              { icon: HeroIcons.CloudIcon, tool: "Weather", color: "text-cyan-400", bg: "bg-cyan-500/15", output: toolOutputs.weather },
-              { icon: HeroIcons.ArrowTrendingUpIcon, tool: "Market", color: "text-amber-400", bg: "bg-amber-500/15", output: toolOutputs.market },
-              { icon: HeroIcons.NewspaperIcon, tool: "News", color: "text-orange-400", bg: "bg-orange-500/15", output: toolOutputs.news }
-            ].map((t) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mb-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(t.icon, { className: `h-3 w-3 ${t.color}` }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[9px] font-semibold ${t.color}`, children: t.tool }),
-                /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "ml-auto h-3 w-3 text-emerald-400" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[8px] text-gray-400 leading-relaxed", children: t.output })
-            ] }, t.tool))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(MarketPricesCard2, { competitors: pricing.competitors })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function FuelPipelineDemo({ defaultFuel = "gasolina", onFuelChange } = {}) {
-  const [activeFuel, setActiveFuel] = React12.useState(defaultFuel);
-  const handleFuelChange = React12.useCallback((fuel) => {
-    setActiveFuel(fuel);
-    onFuelChange?.(fuel);
-  }, [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 step2 = 0;
-    intervalRef.current = setInterval(() => {
-      step2 += 1;
-      if (step2 > 7) {
-        if (intervalRef.current) clearInterval(intervalRef.current);
-        setActiveStep(7);
-      } else {
-        setActiveStep(step2);
-      }
-    }, 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 = (node2) => {
-    if (activeStep < 0) return "idle";
-    if (node2.step < activeStep) return "complete";
-    if (node2.step === activeStep) return "active";
-    return "idle";
-  };
-  const rows = React12.useMemo(() => {
-    const result = [];
-    let step2 = -1;
-    for (const node2 of nodes) {
-      if (node2.step !== step2) {
-        result.push([]);
-        step2 = node2.step;
-      }
-      result[result.length - 1].push(node2);
-    }
-    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",
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
           {
-            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((node2) => {
-          const status = getStatus(node2);
-          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": node2.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: [
-                  node2.avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: node2.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 ${node2.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(node2.icon, { className: `h-5 w-5 ${node2.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: node2.label }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[9px] text-gray-500", children: node2.subtitle })
-                  ] }),
-                  status === "complete" && /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-5 w-5 shrink-0 text-emerald-400" })
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: 0.5 },
+            className: "grid grid-cols-2 gap-3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 bg-gradient-to-br from-green-500 to-emerald-500 text-white", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingUpIcon, { className: "h-5 w-5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-white/20 text-white border-white/30 h-5 text-xs", children: "+18%" })
                 ] }),
-                node2.badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: node2.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)) })
-              ]
-            },
-            node2.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 IconTile({ icon: Icon, gradient, size = "md" }) {
-  const wrapper = size === "md" ? "h-12 w-12" : "h-10 w-10";
-  const icon = size === "md" ? "h-6 w-6" : "h-5 w-5";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${wrapper} rounded-xl bg-gradient-to-br ${gradient} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: `${icon} text-white` }) });
-}
-function BentoFeatureGrid({
-  aiPanel,
-  metricsPanel,
-  securityPanel,
-  agentsPanel,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full min-h-screen h-full flex items-center justify-center p-4 md:p-6 lg:p-8 ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full max-w-7xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 lg:grid-cols-3 lg:grid-rows-2 h-full min-h-[600px] lg:min-h-[700px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      framerMotion.motion.div,
-      {
-        initial: { opacity: 0, y: 20 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.6, delay: 0.1 },
-        className: "relative lg:row-span-2",
-        children: [
-          aiPanel.bgTint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-px rounded-2xl bg-gradient-to-br ${aiPanel.bgTint}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col overflow-hidden rounded-2xl border ${aiPanel.borderColor ?? "border-gray-200 dark:border-gray-800"} bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm`, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pt-6 pb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconTile, { icon: aiPanel.icon, gradient: aiPanel.gradient, size: "md" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-bold text-gray-900 dark:text-white", children: aiPanel.title })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: aiPanel.description })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-[200px] w-full grow p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: aiPanel.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-              framerMotion.motion.div,
-              {
-                initial: { opacity: 0, x: -20 },
-                animate: { opacity: 1, x: 0 },
-                transition: { delay: 0.3 + index * 0.2 },
-                className: `flex items-center gap-3 p-3 rounded-xl ${item.bgTint}`,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-2 w-2 rounded-full animate-pulse ${item.dotColor}` }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs font-medium ${item.textColor}`, children: item.label })
-                ]
-              },
-              `${item.label}-${index}`
-            )) }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-px rounded-2xl shadow-sm" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      framerMotion.motion.div,
-      {
-        initial: { opacity: 0, y: 20 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.6, delay: 0.2 },
-        className: "relative max-lg:row-start-1",
-        children: [
-          metricsPanel.bgTint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-px rounded-2xl bg-gradient-to-br ${metricsPanel.bgTint}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col overflow-hidden rounded-2xl border ${metricsPanel.borderColor ?? "border-gray-200 dark:border-gray-800"} bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm`, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pt-6 pb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconTile, { icon: metricsPanel.icon, gradient: metricsPanel.gradient, size: "sm" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-bold text-gray-900 dark:text-white", children: metricsPanel.title })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: metricsPanel.description })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center px-6 pb-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 w-full", children: metricsPanel.metrics.map((metric, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-              framerMotion.motion.div,
-              {
-                initial: { scale: 0 },
-                animate: { scale: 1 },
-                transition: { delay: 0.5 + index * 0.1 },
-                className: `${metric.bgTint} rounded-xl p-3 text-center`,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-2xl font-bold ${metric.valueColor}`, children: metric.value }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-600 dark:text-gray-400", children: metric.label })
-                ]
-              },
-              `${metric.label}-${index}`
-            )) }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-px rounded-2xl shadow-sm" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      framerMotion.motion.div,
-      {
-        initial: { opacity: 0, y: 20 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.6, delay: 0.3 },
-        className: "relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2",
-        children: [
-          securityPanel.bgTint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-px rounded-2xl bg-gradient-to-br ${securityPanel.bgTint}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col overflow-hidden rounded-2xl border ${securityPanel.borderColor ?? "border-gray-200 dark:border-gray-800"} bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm`, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pt-6 pb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconTile, { icon: securityPanel.icon, gradient: securityPanel.gradient, size: "sm" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-bold text-gray-900 dark:text-white", children: securityPanel.title })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: securityPanel.description })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center px-6 pb-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full space-y-2", children: securityPanel.bars.map((bar, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-1.5 flex-1 rounded-full overflow-hidden ${bar.trackColor}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.div,
-                {
-                  initial: { width: 0 },
-                  animate: { width: "100%" },
-                  transition: { delay: 0.7 + index * 0.2, duration: 1 },
-                  className: `h-full ${bar.fillColor}`
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium ${bar.labelColor}`, children: bar.label })
-            ] }, `${bar.label}-${index}`)) }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-px rounded-2xl shadow-sm" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      framerMotion.motion.div,
-      {
-        initial: { opacity: 0, y: 20 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.6, delay: 0.4 },
-        className: "relative lg:row-span-2",
-        children: [
-          agentsPanel.bgTint && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-px rounded-2xl bg-gradient-to-br ${agentsPanel.bgTint}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full flex-col overflow-hidden rounded-2xl border ${agentsPanel.borderColor ?? "border-gray-200 dark:border-gray-800"} bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm`, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pt-6 pb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconTile, { icon: agentsPanel.icon, gradient: agentsPanel.gradient, size: "md" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-bold text-gray-900 dark:text-white", children: agentsPanel.title })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: agentsPanel.description })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full grow p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3", children: agentsPanel.agents.map((agent, index) => {
-              const delay = 0.5 + index * 0.1;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                framerMotion.motion.div,
-                {
-                  initial: { opacity: 0, scale: 0.8 },
-                  animate: { opacity: 1, scale: 1 },
-                  transition: { delay },
-                  className: `relative overflow-hidden rounded-xl bg-gradient-to-br ${agent.color} p-3 text-white`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold", children: agent.name }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 h-1 w-12 bg-white/30 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        framerMotion.motion.div,
-                        {
-                          initial: { width: 0 },
-                          animate: { width: "100%" },
-                          transition: { delay: delay + 0.3, duration: 0.8 },
-                          className: "h-full bg-white rounded-full"
-                        }
-                      ) })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 w-16 h-16 bg-white/10 rounded-full -mr-8 -mt-8" })
-                  ]
-                },
-                agent.name
-              );
-            }) }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-px rounded-2xl shadow-sm" })
-        ]
-      }
-    )
-  ] }) }) });
-}
-var CustomerAnalyticsDemo = () => /* @__PURE__ */ jsxRuntime.jsx(
-  framerMotion.motion.div,
-  {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-    transition: { duration: 0.5 },
-    className: "flex flex-col h-full overflow-hidden",
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        framerMotion.motion.div,
-        {
-          initial: { y: -20, opacity: 0 },
-          animate: { y: 0, opacity: 1 },
-          transition: { duration: 0.5, delay: 0.3 },
-          className: "h-14 border-b bg-background/95 backdrop-blur-sm flex items-center justify-between px-4",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: "An\xE1lise de Clientes" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 font-medium", children: "IA Analytics" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BellIcon, { className: "h-4 w-4 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.MagnifyingGlassIcon, { className: "h-4 w-4 text-muted-foreground" })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.motion.div,
-          {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { delay: 0.5 },
-            className: "grid grid-cols-2 gap-3",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 bg-gradient-to-br from-blue-500 to-cyan-500 text-white", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.UsersIcon, { className: "h-5 w-5" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-white/20 text-white border-white/30 h-5 text-xs", children: "+12%" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: "2.547" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: "Clientes Ativos" })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: "R$ 1.2M" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: "Receita do Trimestre" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 bg-gradient-to-br from-purple-500 to-pink-500 text-white", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 bg-gradient-to-br from-red-500 to-orange-500 text-white", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingUpIcon, { className: "h-5 w-5" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-white/20 text-white border-white/30 h-5 text-xs", children: "+28%" })
+                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.DocumentTextIcon, { className: "h-5 w-5" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-white/20 text-white border-white/30 h-5 text-xs", children: "Auto" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: "R$ 485k" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: "Receita Mensal" })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
-          {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { delay: 0.7 },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "border-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-b bg-gradient-to-r from-blue-600 to-cyan-600 text-white", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-4 w-4" }),
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-bold", children: "Insights IA" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  framerMotion.motion.div,
-                  {
-                    initial: { opacity: 0, x: -10 },
-                    animate: { opacity: 1, x: 0 },
-                    transition: { delay: 0.9 },
-                    className: "flex items-start gap-2",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded-full bg-green-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3 w-3 text-green-500" }) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium", children: "Segmento Premium crescendo" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "+45% de convers\xE3o em produtos acima de R$ 500" })
-                      ] })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  framerMotion.motion.div,
-                  {
-                    initial: { opacity: 0, x: -10 },
-                    animate: { opacity: 1, x: 0 },
-                    transition: { delay: 1.1 },
-                    className: "flex items-start gap-2",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded-full bg-blue-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingUpIcon, { className: "h-3 w-3 text-blue-500" }) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium", children: "Reten\xE7\xE3o melhorou 32%" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "Ap\xF3s implementa\xE7\xE3o do programa de fidelidade" })
-                      ] })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  framerMotion.motion.div,
-                  {
-                    initial: { opacity: 0, x: -10 },
-                    animate: { opacity: 1, x: 0 },
-                    transition: { delay: 1.3 },
-                    className: "flex items-start gap-2",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded-full bg-purple-500/10 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.UsersIcon, { className: "h-3 w-3 text-purple-500" }) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium", children: "847 clientes em risco" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "Sem compras h\xE1 60+ dias - recomendar campanha" })
-                      ] })
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
-          {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { delay: 1.5 },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-semibold mb-2", children: "Top Clientes (\xDAltimo M\xEAs)" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: ["Maria Silva", "Jo\xE3o Santos", "Ana Costa"].map((name, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-                framerMotion.motion.div,
-                {
-                  initial: { opacity: 0, x: -10 },
-                  animate: { opacity: 1, x: 0 },
-                  transition: { delay: 1.7 + i * 0.2 },
-                  className: "flex items-center justify-between",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-6 rounded-full bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center text-white text-[10px] font-bold", children: name.charAt(0) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: name })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-                      "R$ ",
-                      Math.floor(Math.random() * 50 + 10),
-                      "k"
-                    ] })
-                  ]
-                },
-                name
-              )) })
-            ] })
-          }
-        )
-      ] })
-    ] })
-  }
-);
-var FinancialDemo = () => /* @__PURE__ */ jsxRuntime.jsx(
-  framerMotion.motion.div,
-  {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-    transition: { duration: 0.5 },
-    className: "flex flex-col h-full overflow-hidden",
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        framerMotion.motion.div,
-        {
-          initial: { y: -20, opacity: 0 },
-          animate: { y: 0, opacity: 1 },
-          transition: { duration: 0.5, delay: 0.3 },
-          className: "h-14 border-b bg-background/95 backdrop-blur-sm flex items-center justify-between px-4",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: "Planejamento Financeiro" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-1 rounded-full bg-green-500/10 text-green-600 dark:text-green-400 font-medium", children: "Q4 2024" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BellIcon, { className: "h-4 w-4 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.MagnifyingGlassIcon, { className: "h-4 w-4 text-muted-foreground" })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.motion.div,
-          {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { delay: 0.5 },
-            className: "grid grid-cols-2 gap-3",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 bg-gradient-to-br from-green-500 to-emerald-500 text-white", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingUpIcon, { className: "h-5 w-5" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-white/20 text-white border-white/30 h-5 text-xs", children: "+18%" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: "R$ 1.2M" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: "Receita do Trimestre" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 bg-gradient-to-br from-red-500 to-orange-500 text-white", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.DocumentTextIcon, { className: "h-5 w-5" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "bg-white/20 text-white border-white/30 h-5 text-xs", children: "Auto" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: "R$ 387k" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: "Impostos Calculados" })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: "R$ 387k" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-90", children: "Impostos Calculados" })
               ] })
             ]
           }
@@ -18251,186 +16919,975 @@ function DepartmentAssistantDemo({
         },
         `dashboard-${flow.id}`
       )
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t border-white/5 px-5 py-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-500 dark:text-gray-400", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: `h-3.5 w-3.5 ${t.progressActiveBar.replace("bg-", "text-")}` }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-          stage === "input" && L.footerInput,
-          stage === "workflow" && L.footerWorkflow,
-          stage === "dashboard" && L.footerDashboard
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: flows.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: `h-1 rounded-full transition-all duration-500 ${index === flowIndex ? `w-8 ${t.progressActiveBar}` : "w-1.5 bg-gray-300 dark:bg-white/10"}`
-        },
-        entry.id
-      )) })
-    ] })
-  ] });
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t border-white/5 px-5 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: `h-3.5 w-3.5 ${t.progressActiveBar.replace("bg-", "text-")}` }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+          stage === "input" && L.footerInput,
+          stage === "workflow" && L.footerWorkflow,
+          stage === "dashboard" && L.footerDashboard
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: flows.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: `h-1 rounded-full transition-all duration-500 ${index === flowIndex ? `w-8 ${t.progressActiveBar}` : "w-1.5 bg-gray-300 dark:bg-white/10"}`
+        },
+        entry.id
+      )) })
+    ] })
+  ] });
+}
+function StageChip({ label, stageIndex, mine, activeBadge }) {
+  const isActive = stageIndex === mine;
+  const isDone = stageIndex > mine;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 font-semibold transition-colors ${isActive ? activeBadge : isDone ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-300" : "bg-white/5 text-gray-500 dark:text-gray-500"}`,
+      children: [
+        isDone ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3.5 w-3.5" }) : isActive ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3.5 w-3.5 animate-pulse" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current" }),
+        label
+      ]
+    }
+  );
+}
+function InputStage3({
+  userPrompt,
+  assistantMessage,
+  phase,
+  assistantComplete,
+  department,
+  assistantAvatar,
+  assistantName,
+  agents,
+  agentAvatars,
+  avatarGradient,
+  cursorClass,
+  conversationLabel,
+  personaTagFn,
+  composerHint,
+  composerEnter
+}) {
+  const cursor = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-0.5 inline-block w-[2px] h-4 align-middle ${cursorClass} animate-pulse` });
+  const showAssistant = phase === "assistant";
+  const personaName = assistantName ?? department;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col px-4 py-6 sm:px-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5 flex items-center justify-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1 w-1 rounded-full bg-emerald-500 animate-pulse" }),
+      conversationLabel(personaName, department)
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-1 flex-col justify-end gap-4 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface max-w-[88%] rounded-2xl rounded-tr-md px-5 py-3.5", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base leading-relaxed text-gray-900 dark:text-white", children: [
+        userPrompt,
+        phase === "user" && cursor
+      ] }) }) }),
+      showAssistant && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2.5", children: [
+        assistantAvatar ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: assistantAvatar,
+            alt: personaName,
+            className: `h-11 w-11 shrink-0 rounded-2xl bg-white/40 dark:bg-white/[0.06] ring-2 ring-white/30 dark:ring-white/10 shadow-md`
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br ${avatarGradient} shadow-md`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-5 w-5 text-white" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface max-w-[88%] rounded-2xl rounded-bl-md px-5 py-3.5", children: [
+          assistantMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: personaTagFn(personaName) }),
+          assistantMessage.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse`, style: { animationDelay: "150ms" } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse`, style: { animationDelay: "300ms" } })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base leading-relaxed text-gray-900 dark:text-white", children: [
+              assistantMessage,
+              !assistantComplete && cursor
+            ] }),
+            assistantComplete && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: agents.map((agent) => {
+              const avatar = agentAvatars?.[agent];
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "inline-flex items-center gap-1.5 rounded-full bg-white/40 dark:bg-white/[0.08] py-0.5 pl-0.5 pr-3 text-[11px] font-semibold text-gray-700 dark:text-gray-200 shadow-sm",
+                  children: [
+                    avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatar, alt: "", className: "h-6 w-6 rounded-full bg-white/40 dark:bg-white/[0.06]" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br ${avatarGradient}`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3 w-3 text-white" }) }),
+                    agent
+                  ]
+                },
+                agent
+              );
+            }) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-5 w-full max-w-3xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface flex items-center gap-3 rounded-full px-4 py-2.5 opacity-60", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs italic text-gray-500 dark:text-gray-400", children: composerHint }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500", children: composerEnter })
+    ] }) })
+  ] });
+}
+var koriDepartmentFlows = [
+  {
+    id: "sales",
+    name: "Vendas",
+    icon: HeroIcons.ShoppingCartIcon,
+    accent: "from-blue-500 to-indigo-500",
+    prompt: "Qualificar lead empresa XPTO e preparar proposta comercial",
+    agents: ["Sales", "CRM", "Scoring", "Proposal"],
+    workflow: salesWorkflow,
+    dashboard: /* @__PURE__ */ jsxRuntime.jsx(SalesDemo, {})
+  },
+  {
+    id: "financial",
+    name: "Financeiro",
+    icon: HeroIcons.BanknotesIcon,
+    accent: "from-emerald-500 to-teal-500",
+    prompt: "Gerar relat\xF3rio financeiro e calcular impostos do trimestre",
+    agents: ["Finance", "Tax", "Reports", "Compliance"],
+    workflow: financialWorkflow,
+    dashboard: /* @__PURE__ */ jsxRuntime.jsx(FinancialDemo, {})
+  },
+  {
+    id: "marketing",
+    name: "Marketing",
+    icon: HeroIcons.MegaphoneIcon,
+    accent: "from-pink-500 to-rose-500",
+    prompt: "Criar campanha de Black Friday para e-commerce",
+    agents: ["Marketing", "Design", "E-commerce", "Email"],
+    workflow: marketingWorkflow,
+    dashboard: /* @__PURE__ */ jsxRuntime.jsx(MarketingDemo, {})
+  },
+  {
+    id: "inventory",
+    name: "Estoque",
+    icon: HeroIcons.CubeIcon,
+    accent: "from-orange-500 to-amber-500",
+    prompt: "Verificar estoque e sugerir reposi\xE7\xF5es autom\xE1ticas",
+    agents: ["Inventory", "Supply", "Forecast", "Logistics"],
+    workflow: inventoryWorkflow,
+    dashboard: /* @__PURE__ */ jsxRuntime.jsx(InventoryDemo, {})
+  },
+  {
+    id: "hr",
+    name: "RH",
+    icon: HeroIcons.UsersIcon,
+    accent: "from-green-500 to-emerald-500",
+    prompt: "Processar candidaturas para vaga de Desenvolvedor Senior",
+    agents: ["HR", "Recruiter", "Skills", "Interview"],
+    workflow: hrWorkflow,
+    dashboard: /* @__PURE__ */ jsxRuntime.jsx(HRRecruitmentDemo, {})
+  },
+  {
+    id: "analytics",
+    name: "Analytics",
+    icon: HeroIcons.DocumentTextIcon,
+    accent: "from-indigo-500 to-violet-500",
+    prompt: "Analisar comportamento dos clientes e identificar oportunidades",
+    agents: ["Analytics", "CRM", "Insights", "Reports"],
+    workflow: customerAnalyticsWorkflow,
+    dashboard: /* @__PURE__ */ jsxRuntime.jsx(CustomerAnalyticsDemo, {})
+  },
+  {
+    id: "lgpd",
+    name: "LGPD",
+    icon: HeroIcons.ShieldCheckIcon,
+    accent: "from-red-500 to-rose-500",
+    prompt: "Auditar dados pessoais e verificar conformidade LGPD",
+    agents: ["LGPD", "Privacy", "Audit", "Security"],
+    workflow: lgpdWorkflow,
+    dashboard: /* @__PURE__ */ jsxRuntime.jsx(LGPDComplianceDemo, {})
+  }
+];
+var MIN_ZOOM = 0.8;
+var MAX_ZOOM = 4;
+var ZOOM_STEP = 0.5;
+function useGeoMapState({
+  items,
+  getRegionCode,
+  regionCoordinates,
+  defaultCenter = [0, 0]
+}) {
+  const [zoom, setZoom] = React12.useState(1);
+  const [center, setCenter] = React12.useState(defaultCenter);
+  const [hoveredRegion, setHoveredRegion] = React12.useState(null);
+  const [animatedRegions, setAnimatedRegions] = React12.useState(/* @__PURE__ */ new Set());
+  const [panOffset, setPanOffset] = React12.useState([0, 0]);
+  const handleZoomIn = React12.useCallback(() => {
+    setZoom((previous) => Math.min(previous + ZOOM_STEP, MAX_ZOOM));
+  }, []);
+  const handleZoomOut = React12.useCallback(() => {
+    setZoom((previous) => Math.max(previous - ZOOM_STEP, MIN_ZOOM));
+  }, []);
+  const handleMoveEnd = React12.useCallback(
+    (position) => {
+      setCenter(position.coordinates);
+      setZoom(position.zoom);
+    },
+    []
+  );
+  const handlePan = React12.useCallback((dx, dy) => {
+    setPanOffset((previous) => [previous[0] + dx, previous[1] + dy]);
+  }, []);
+  const regionGroups = React12.useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const code = getRegionCode(item);
+      if (!grouped.has(code)) {
+        grouped.set(code, []);
+      }
+      grouped.get(code).push(item);
+    });
+    return Array.from(grouped.entries()).filter(([code]) => regionCoordinates[code]).map(([code, regionItems]) => ({
+      code,
+      items: regionItems,
+      coordinates: regionCoordinates[code]
+    })).sort((a, b) => b.items.length - a.items.length);
+  }, [items, getRegionCode, regionCoordinates]);
+  const animationCodes = React12.useMemo(
+    () => regionGroups.map((regionData) => regionData.code),
+    [regionGroups]
+  );
+  const animationSignature = React12.useMemo(
+    () => animationCodes.join("|"),
+    [animationCodes]
+  );
+  React12.useEffect(() => {
+    if (animationCodes.length === 0) return;
+    setAnimatedRegions(/* @__PURE__ */ new Set());
+    const timers = [];
+    animationCodes.forEach((code, index) => {
+      const timer = setTimeout(() => {
+        setAnimatedRegions((previous) => /* @__PURE__ */ new Set([...previous, code]));
+      }, index * 100);
+      timers.push(timer);
+    });
+    return () => timers.forEach(clearTimeout);
+  }, [animationSignature]);
+  const getMarkerSize = React12.useCallback(
+    (count) => {
+      const baseSize = count >= 10 ? 14 : count >= 5 ? 11 : count >= 2 ? 8 : 6;
+      return baseSize / Math.sqrt(zoom);
+    },
+    [zoom]
+  );
+  const getFontSize = React12.useCallback(
+    (markerSize) => {
+      const baseSize = markerSize > 10 ? 10 : 8;
+      const scaledSize = baseSize / Math.sqrt(zoom);
+      return `${Math.max(scaledSize, 6)}px`;
+    },
+    [zoom]
+  );
+  return {
+    zoom,
+    setZoom,
+    handleZoomIn,
+    handleZoomOut,
+    handleMoveEnd,
+    MIN_ZOOM,
+    MAX_ZOOM,
+    center,
+    setCenter,
+    panOffset,
+    handlePan,
+    hoveredRegion,
+    setHoveredRegion,
+    animatedRegions,
+    regionGroups,
+    getMarkerSize,
+    getFontSize
+  };
+}
+var MAP_DEFAULT_STATE_COLOR = "rgba(100, 116, 139, 0.35)";
+var MAP_DEFAULT_MARKER_COLOR = "#6366f1";
+var VIEWBOX_WIDTH = 1e3;
+var VIEWBOX_HEIGHT = 500;
+var ALBERS_WIDTH = 960;
+var ALBERS_HEIGHT = 600;
+function GeoMapCanvasInner({
+  regionGroups,
+  regionColorMap,
+  animatedRegions,
+  zoom,
+  panOffset,
+  hoveredRegion,
+  onPan,
+  onRegionHover,
+  onRegionClick,
+  isRegionActive,
+  getMarkerSize,
+  getFontSize,
+  geoJsonUrl,
+  regionPropertyKey = "code",
+  projectionType = "mercator",
+  ariaLabel = "Interactive map"
+}, ref) {
+  const [geoData, setGeoData] = React12.useState(null);
+  const svgRef = React12.useRef(null);
+  const dragState = React12.useRef(null);
+  React12.useEffect(() => {
+    let cancelled = false;
+    async function loadGeoData() {
+      try {
+        const response = await fetch(geoJsonUrl);
+        if (!response.ok) return;
+        const data = await response.json();
+        if (!cancelled) setGeoData(data);
+      } catch {
+      }
+    }
+    loadGeoData();
+    return () => {
+      cancelled = true;
+    };
+  }, [geoJsonUrl]);
+  const handleMouseDown = React12.useCallback(
+    (event) => {
+      if (event.button !== 0) return;
+      dragState.current = {
+        active: true,
+        startX: event.clientX,
+        startY: event.clientY,
+        lastX: event.clientX,
+        lastY: event.clientY,
+        didDrag: false
+      };
+    },
+    []
+  );
+  const handleMouseMove = React12.useCallback(
+    (event) => {
+      if (!dragState.current?.active || !svgRef.current) return;
+      const totalDx = event.clientX - dragState.current.startX;
+      const totalDy = event.clientY - dragState.current.startY;
+      if (!dragState.current.didDrag) {
+        if (Math.abs(totalDx) < 5 && Math.abs(totalDy) < 5) return;
+        dragState.current.didDrag = true;
+      }
+      const dx = event.clientX - dragState.current.lastX;
+      const dy = event.clientY - dragState.current.lastY;
+      const rect = svgRef.current.getBoundingClientRect();
+      const viewBoxWidth = VIEWBOX_WIDTH / zoom;
+      const scaleRatio = viewBoxWidth / rect.width;
+      onPan(dx * scaleRatio, dy * scaleRatio);
+      dragState.current.lastX = event.clientX;
+      dragState.current.lastY = event.clientY;
+    },
+    [zoom, onPan]
+  );
+  const handleMouseUp = React12.useCallback(() => {
+    if (dragState.current) {
+      dragState.current.active = false;
+    }
+  }, []);
+  const wasDragAction = React12.useCallback(() => {
+    return dragState.current?.didDrag === true;
+  }, []);
+  const getLighterColor = (hexColor) => {
+    const r = parseInt(hexColor.slice(1, 3), 16);
+    const g = parseInt(hexColor.slice(3, 5), 16);
+    const b = parseInt(hexColor.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, 0.15)`;
+  };
+  const lighterColors = React12.useMemo(() => {
+    const colors3 = /* @__PURE__ */ new Map();
+    regionColorMap.forEach((color, code) => {
+      colors3.set(code, getLighterColor(color));
+    });
+    return colors3;
+  }, [regionColorMap]);
+  const featureCollection = React12.useMemo(() => {
+    if (!geoData) return null;
+    return {
+      type: "FeatureCollection",
+      features: geoData.features
+    };
+  }, [geoData]);
+  const projection = React12.useMemo(() => {
+    if (!featureCollection) return null;
+    if (projectionType === "albersUsa") {
+      return d3Geo.geoAlbersUsa();
+    }
+    return d3Geo.geoMercator().fitSize([VIEWBOX_WIDTH, VIEWBOX_HEIGHT], featureCollection);
+  }, [featureCollection, projectionType]);
+  const pathGenerator = React12.useMemo(() => {
+    if (!projection) return null;
+    return d3Geo.geoPath(projection);
+  }, [projection]);
+  const regionsWithItems = React12.useMemo(() => {
+    return new Set(regionGroups.map((regionData) => regionData.code));
+  }, [regionGroups]);
+  const hasAnyActiveFilter = React12.useMemo(() => {
+    return regionGroups.some((regionData) => isRegionActive?.(regionData.code));
+  }, [regionGroups, isRegionActive]);
+  const featureBounds = React12.useMemo(() => {
+    if (!pathGenerator || !geoData) return null;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const feature of geoData.features) {
+      const bounds = pathGenerator.bounds(feature);
+      if (!bounds || !isFinite(bounds[0][0])) continue;
+      minX = Math.min(minX, bounds[0][0]);
+      minY = Math.min(minY, bounds[0][1]);
+      maxX = Math.max(maxX, bounds[1][0]);
+      maxY = Math.max(maxY, bounds[1][1]);
+    }
+    if (!isFinite(minX)) return null;
+    const pad = 15;
+    return { x: minX - pad, y: minY - pad, width: maxX - minX + pad * 2, height: maxY - minY + pad * 2 };
+  }, [pathGenerator, geoData]);
+  const effectiveWidth = featureBounds?.width ?? (projectionType === "albersUsa" ? ALBERS_WIDTH : VIEWBOX_WIDTH);
+  const effectiveHeight = featureBounds?.height ?? (projectionType === "albersUsa" ? ALBERS_HEIGHT : VIEWBOX_HEIGHT);
+  const baseX = featureBounds?.x ?? 0;
+  const baseY = featureBounds?.y ?? 0;
+  const viewBoxParts = React12.useMemo(() => {
+    const width = effectiveWidth / zoom;
+    const height = effectiveHeight / zoom;
+    const x = baseX + (effectiveWidth - width) / 2 - panOffset[0];
+    const y = baseY + (effectiveHeight - height) / 2 - panOffset[1];
+    return { x, y, width, height };
+  }, [zoom, panOffset, effectiveWidth, effectiveHeight, baseX, baseY]);
+  const viewBox = `${viewBoxParts.x} ${viewBoxParts.y} ${viewBoxParts.width} ${viewBoxParts.height}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: "relative w-full h-full overflow-hidden rounded-2xl border border-white/20 dark:border-white/[0.12] shadow-lg shadow-black/5 dark:shadow-black/30",
+      "data-testid": "map-canvas",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          ref: svgRef,
+          viewBox,
+          className: "w-full h-full cursor-grab active:cursor-grabbing",
+          "aria-label": ariaLabel,
+          style: { touchAction: "none", background: "transparent" },
+          onMouseDown: handleMouseDown,
+          onMouseMove: handleMouseMove,
+          onMouseUp: handleMouseUp,
+          onMouseLeave: handleMouseUp,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("filter", { id: "glow-active", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsxRuntime.jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "3", floodColor: "#fff", floodOpacity: "0.6" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("filter", { id: "inactive-dim", x: "0%", y: "0%", width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { type: "saturate", values: "0.3" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("filter", { id: "marker-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsxRuntime.jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "4", floodColor: "#fff", floodOpacity: "0.7" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "geo-inset-clip", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: viewBoxParts.x + 2,
+                  y: viewBoxParts.y + 2,
+                  width: viewBoxParts.width - 4,
+                  height: viewBoxParts.height - 4
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#geo-inset-clip)", children: geoData && pathGenerator ? geoData.features.map((feature, index) => {
+              const regionCode = feature.properties?.[regionPropertyKey] || feature.properties?.name || "";
+              const hasItems = regionsWithItems.has(regionCode);
+              const regionColor = regionColorMap.get(regionCode) ?? MAP_DEFAULT_STATE_COLOR;
+              const isActive = isRegionActive?.(regionCode);
+              const isHovered = hoveredRegion === regionCode;
+              const isDimmed = hasAnyActiveFilter && !isActive && hasItems;
+              let pathData = pathGenerator(feature);
+              if (pathData && projectionType === "albersUsa") {
+                const subpaths = pathData.split("Z").filter(Boolean);
+                const cleaned = subpaths.filter((sub) => {
+                  const lCount = (sub.match(/L/g) || []).length;
+                  if (lCount !== 3) return true;
+                  const nums = sub.match(/-?\d+\.?\d*/g)?.map(Number);
+                  if (!nums || nums.length !== 8) return true;
+                  const [x1, y1, x2, y2, x3, y3, x4, y4] = nums;
+                  const xs = /* @__PURE__ */ new Set([x1, x2, x3, x4]);
+                  const ys = /* @__PURE__ */ new Set([y1, y2, y3, y4]);
+                  return xs.size !== 2 || ys.size !== 2;
+                });
+                pathData = cleaned.length > 0 ? cleaned.join("Z") + "Z" : null;
+              }
+              if (!pathData) return null;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: pathData,
+                  fillRule: "evenodd",
+                  "data-region": hasItems ? regionCode : void 0,
+                  onMouseEnter: () => hasItems && onRegionHover(regionCode),
+                  onMouseLeave: () => onRegionHover(null),
+                  onClick: () => {
+                    if (hasItems && !wasDragAction()) {
+                      onRegionClick(regionCode);
+                    }
+                  },
+                  fill: hasItems ? isHovered ? regionColor : isActive ? regionColor : lighterColors.get(regionCode) || getLighterColor(regionColor) : MAP_DEFAULT_STATE_COLOR,
+                  stroke: isActive ? "#fff" : isDimmed ? "rgba(148, 163, 184, 0.15)" : "rgba(148, 163, 184, 0.40)",
+                  strokeWidth: (isActive ? 2.5 : 0.5) / zoom,
+                  filter: isActive ? "url(#glow-active)" : isDimmed ? "url(#inactive-dim)" : void 0,
+                  opacity: isDimmed ? 0.45 : 1,
+                  style: {
+                    transition: "fill 0.3s ease, opacity 0.3s ease",
+                    cursor: hasItems ? "pointer" : void 0
+                  }
+                },
+                `${regionCode}-${index}`
+              );
+            }) : null }),
+            projection ? regionGroups.map((regionData) => {
+              const point = projection(regionData.coordinates);
+              if (!point) return null;
+              const [x, y] = point;
+              const isAnimated = animatedRegions.has(regionData.code);
+              const markerSize = getMarkerSize(regionData.items.length);
+              const markerColor = regionColorMap.get(regionData.code) ?? MAP_DEFAULT_MARKER_COLOR;
+              const isActive = isRegionActive?.(regionData.code);
+              const isDimmed = hasAnyActiveFilter && !isActive;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "g",
+                {
+                  transform: `translate(${x}, ${y})`,
+                  "data-region": regionData.code,
+                  "data-testid": `marker-${regionData.code}`,
+                  onMouseEnter: () => onRegionHover(regionData.code),
+                  onMouseLeave: () => onRegionHover(null),
+                  onClick: () => {
+                    if (!wasDragAction()) {
+                      onRegionClick(regionData.code);
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "g",
+                    {
+                      style: {
+                        transform: isAnimated ? "scale(1)" : "scale(0)",
+                        transformOrigin: "0 0",
+                        opacity: isAnimated ? isDimmed ? 0.35 : 1 : 0,
+                        transition: "all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                        cursor: "pointer"
+                      },
+                      filter: isActive ? "url(#marker-glow)" : void 0,
+                      children: [
+                        isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "circle",
+                          {
+                            r: markerSize + 6,
+                            fill: "none",
+                            stroke: "#fff",
+                            strokeWidth: 2,
+                            opacity: 0.8
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx(
+                          "circle",
+                          {
+                            r: markerSize + 4,
+                            fill: "none",
+                            stroke: markerColor,
+                            strokeWidth: 1,
+                            opacity: isDimmed ? 0 : 0.4,
+                            className: isDimmed ? void 0 : "animate-ping",
+                            style: isDimmed ? void 0 : { animationDuration: "2s" }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "circle",
+                          {
+                            r: markerSize,
+                            fill: markerColor,
+                            stroke: isActive ? "#fff" : markerColor,
+                            strokeWidth: isActive ? 3 : 2,
+                            className: "transition-colors",
+                            style: {
+                              filter: isActive ? "brightness(1.2) saturate(1.3)" : isDimmed ? "saturate(0.3) brightness(0.8)" : "none"
+                            }
+                          }
+                        ),
+                        regionData.items.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                          "text",
+                          {
+                            textAnchor: "middle",
+                            dominantBaseline: "central",
+                            style: {
+                              fontFamily: "system-ui",
+                              fontSize: getFontSize(markerSize),
+                              fontWeight: "bold",
+                              fill: "#fff",
+                              pointerEvents: "none",
+                              opacity: isDimmed ? 0.5 : 1
+                            },
+                            children: regionData.items.length
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                regionData.code
+              );
+            }) : null
+          ]
+        }
+      )
+    }
+  );
 }
-function StageChip({ label, stageIndex, mine, activeBadge }) {
-  const isActive = stageIndex === mine;
-  const isDone = stageIndex > mine;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+var GeoMapCanvas = React12__namespace.default.forwardRef(GeoMapCanvasInner);
+var MapZoomControls = React12__namespace.default.forwardRef(
+  ({ zoom, minZoom, maxZoom, onZoomIn, onZoomOut, labels }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: "flex flex-col gap-1",
+        "data-testid": "map-zoom-controls",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onZoomIn,
+              disabled: zoom >= maxZoom,
+              className: "p-2 liquid-surface rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+              "aria-label": labels?.zoomIn ?? "Zoom in",
+              "data-testid": "zoom-in-button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.PlusIcon, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onZoomOut,
+              disabled: zoom <= minZoom,
+              className: "p-2 liquid-surface rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+              "aria-label": labels?.zoomOut ?? "Zoom out",
+              "data-testid": "zoom-out-button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.MinusIcon, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 px-2 py-1 liquid-surface rounded-lg text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "text-xs font-medium text-gray-600 dark:text-gray-400",
+              "data-testid": "zoom-level",
+              children: [
+                Math.round(zoom * 100),
+                "%"
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+MapZoomControls.displayName = "MapZoomControls";
+function InteractiveGeoMapInner({
+  items,
+  getRegionCode,
+  regionCoordinates,
+  defaultCenter,
+  geoJsonUrl,
+  regionPropertyKey,
+  projectionType,
+  getRegionColor,
+  isRegionActive,
+  onRegionToggle,
+  renderHoverContent,
+  formatCounter,
+  zoomLabels,
+  ariaLabel,
+  className
+}, ref) {
+  const mapStateOptions = {
+    items,
+    getRegionCode,
+    regionCoordinates,
+    defaultCenter
+  };
+  const mapState = useGeoMapState(mapStateOptions);
+  const regionColorMap = React12.useMemo(() => {
+    const colorMap2 = /* @__PURE__ */ new Map();
+    for (const code of Object.keys(regionCoordinates)) {
+      colorMap2.set(code, getRegionColor(code));
+    }
+    mapState.regionGroups.forEach((regionData) => {
+      if (!colorMap2.has(regionData.code)) {
+        colorMap2.set(regionData.code, getRegionColor(regionData.code));
+      }
+    });
+    return colorMap2;
+  }, [regionCoordinates, mapState.regionGroups, getRegionColor]);
+  const handleRegionClick = (code) => {
+    onRegionToggle?.(code);
+  };
+  const hoveredRegionData = React12.useMemo(() => {
+    if (!mapState.hoveredRegion) return null;
+    return mapState.regionGroups.find(
+      (regionData) => regionData.code === mapState.hoveredRegion
+    ) ?? null;
+  }, [mapState.hoveredRegion, mapState.regionGroups]);
+  const counterText = React12.useMemo(() => {
+    if (!formatCounter) return null;
+    const hasActiveFilter = isRegionActive && mapState.regionGroups.some(
+      (regionData) => isRegionActive(regionData.code)
+    );
+    if (hasActiveFilter) {
+      const activeRegions = mapState.regionGroups.filter(
+        (regionData) => isRegionActive(regionData.code)
+      );
+      const activeItemCount = activeRegions.reduce(
+        (sum, regionData) => sum + regionData.items.length,
+        0
+      );
+      return formatCounter(items.length, mapState.regionGroups.length, activeItemCount, activeRegions.length);
+    }
+    return formatCounter(items.length, mapState.regionGroups.length);
+  }, [formatCounter, isRegionActive, mapState.regionGroups, items.length]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 font-semibold transition-colors ${isActive ? activeBadge : isDone ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-300" : "bg-white/5 text-gray-500 dark:text-gray-500"}`,
-      children: [
-        isDone ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3.5 w-3.5" }) : isActive ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3.5 w-3.5 animate-pulse" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current" }),
-        label
-      ]
+      ref,
+      className: `space-y-4 h-full ${className ?? ""}`,
+      "data-testid": "interactive-geo-map-container",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          GeoMapCanvas,
+          {
+            regionGroups: mapState.regionGroups,
+            regionColorMap,
+            animatedRegions: mapState.animatedRegions,
+            zoom: mapState.zoom,
+            panOffset: mapState.panOffset,
+            hoveredRegion: mapState.hoveredRegion,
+            onPan: mapState.handlePan,
+            onRegionHover: mapState.setHoveredRegion,
+            onRegionClick: handleRegionClick,
+            isRegionActive,
+            getMarkerSize: mapState.getMarkerSize,
+            getFontSize: mapState.getFontSize,
+            geoJsonUrl,
+            regionPropertyKey,
+            projectionType,
+            ariaLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+          MapZoomControls,
+          {
+            zoom: mapState.zoom,
+            minZoom: mapState.MIN_ZOOM,
+            maxZoom: mapState.MAX_ZOOM,
+            onZoomIn: mapState.handleZoomIn,
+            onZoomOut: mapState.handleZoomOut,
+            labels: zoomLabels
+          }
+        ) }),
+        mapState.hoveredRegion && hoveredRegionData && renderHoverContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10 pointer-events-none", children: renderHoverContent(mapState.hoveredRegion, hoveredRegionData.items) }),
+        counterText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 left-3 z-10 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface rounded-lg px-3 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-300", children: counterText }) }) })
+      ] })
     }
   );
 }
-function InputStage3({
-  userPrompt,
-  assistantMessage,
-  phase,
-  assistantComplete,
-  department,
-  assistantAvatar,
-  assistantName,
-  agents,
-  agentAvatars,
-  avatarGradient,
-  cursorClass,
-  conversationLabel,
-  personaTagFn,
-  composerHint,
-  composerEnter
-}) {
-  const cursor = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-0.5 inline-block w-[2px] h-4 align-middle ${cursorClass} animate-pulse` });
-  const showAssistant = phase === "assistant";
-  const personaName = assistantName ?? department;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col px-4 py-6 sm:px-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5 flex items-center justify-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1 w-1 rounded-full bg-emerald-500 animate-pulse" }),
-      conversationLabel(personaName, department)
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-1 flex-col justify-end gap-4 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "liquid-surface max-w-[88%] rounded-2xl rounded-tr-md px-5 py-3.5", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base leading-relaxed text-gray-900 dark:text-white", children: [
-        userPrompt,
-        phase === "user" && cursor
-      ] }) }) }),
-      showAssistant && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2.5", children: [
-        assistantAvatar ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: assistantAvatar,
-            alt: personaName,
-            className: `h-11 w-11 shrink-0 rounded-2xl bg-white/40 dark:bg-white/[0.06] ring-2 ring-white/30 dark:ring-white/10 shadow-md`
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br ${avatarGradient} shadow-md`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-5 w-5 text-white" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface max-w-[88%] rounded-2xl rounded-bl-md px-5 py-3.5", children: [
-          assistantMessage.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: personaTagFn(personaName) }),
-          assistantMessage.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 py-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse` }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse`, style: { animationDelay: "150ms" } }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cursorClass} animate-pulse`, style: { animationDelay: "300ms" } })
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base leading-relaxed text-gray-900 dark:text-white", children: [
-              assistantMessage,
-              !assistantComplete && cursor
-            ] }),
-            assistantComplete && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: agents.map((agent) => {
-              const avatar = agentAvatars?.[agent];
+var InteractiveGeoMap = React12__namespace.default.forwardRef(InteractiveGeoMapInner);
+var DEFAULT_LEGEND_COLOR = "#6366f1";
+var GeoMapLegend = React12__namespace.default.forwardRef(
+  ({ items, colorMap: colorMap2, getFlagUrl, getLabel, labels, maxItems = 5 }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: "liquid-surface rounded-lg p-3",
+        "data-testid": "map-legend",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2", children: labels.title }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+            items.slice(0, maxItems).map((item) => {
+              const flagUrl = getFlagUrl?.(item.code);
+              const regionColor = colorMap2.get(item.code) ?? DEFAULT_LEGEND_COLOR;
+              const displayLabel = getLabel?.(item.code) ?? item.code;
               return /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
+                "div",
                 {
-                  className: "inline-flex items-center gap-1.5 rounded-full bg-white/40 dark:bg-white/[0.08] py-0.5 pl-0.5 pr-3 text-[11px] font-semibold text-gray-700 dark:text-gray-200 shadow-sm",
+                  className: "flex items-center gap-2",
+                  "data-testid": `legend-item-${item.code}`,
                   children: [
-                    avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: avatar, alt: "", className: "h-6 w-6 rounded-full bg-white/40 dark:bg-white/[0.06]" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br ${avatarGradient}`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3 w-3 text-white" }) }),
-                    agent
+                    flagUrl ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: flagUrl,
+                          alt: item.code,
+                          className: "w-4 h-4 shadow-sm"
+                        }
+                      )
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "w-4 h-4 rounded-full",
+                        style: { backgroundColor: regionColor },
+                        "data-testid": `legend-color-${item.code}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+                      displayLabel,
+                      " (",
+                      item.count,
+                      ")"
+                    ] })
                   ]
                 },
-                agent
+                item.code
               );
-            }) })
+            }),
+            items.length > maxItems && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400 italic pt-1", children: [
+              "+",
+              items.length - maxItems,
+              " ",
+              labels.more
+            ] })
           ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-5 w-full max-w-3xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface flex items-center gap-3 rounded-full px-4 py-2.5 opacity-60", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs italic text-gray-500 dark:text-gray-400", children: composerHint }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500", children: composerEnter })
-    ] }) })
-  ] });
-}
-var koriDepartmentFlows = [
-  {
-    id: "sales",
-    name: "Vendas",
-    icon: HeroIcons.ShoppingCartIcon,
-    accent: "from-blue-500 to-indigo-500",
-    prompt: "Qualificar lead empresa XPTO e preparar proposta comercial",
-    agents: ["Sales", "CRM", "Scoring", "Proposal"],
-    workflow: salesWorkflow,
-    dashboard: /* @__PURE__ */ jsxRuntime.jsx(SalesDemo, {})
-  },
-  {
-    id: "financial",
-    name: "Financeiro",
-    icon: HeroIcons.BanknotesIcon,
-    accent: "from-emerald-500 to-teal-500",
-    prompt: "Gerar relat\xF3rio financeiro e calcular impostos do trimestre",
-    agents: ["Finance", "Tax", "Reports", "Compliance"],
-    workflow: financialWorkflow,
-    dashboard: /* @__PURE__ */ jsxRuntime.jsx(FinancialDemo, {})
-  },
+        ]
+      }
+    );
+  }
+);
+GeoMapLegend.displayName = "GeoMapLegend";
+
+// src/lib/themes/brazil.ts
+var BRAZIL_STATE_PALETTES = {
+  AC: { primary: "#009b43", secondary: "#ffcf44", text: "light" },
+  AL: { primary: "#d9251d", secondary: "#01a2ce", text: "light" },
+  AM: { primary: "#213572", secondary: "#d9251d", text: "light" },
+  AP: { primary: "#213572", secondary: "#009b43", text: "light" },
+  BA: { primary: "#213572", secondary: "#d9251d", text: "light" },
+  CE: { primary: "#009b43", secondary: "#ffcf44", text: "light" },
+  DF: { primary: "#009b43", secondary: "#ffcf44", text: "light" },
+  ES: { primary: "#ea5a8d", secondary: "#01a2ce", text: "light" },
+  GO: { primary: "#009b43", secondary: "#213572", text: "light" },
+  MA: { primary: "#213572", secondary: "#d9251d", text: "light" },
+  MG: { primary: "#d9251d", secondary: "#f0f0f0", text: "light" },
+  MS: { primary: "#009b43", secondary: "#01a2ce", text: "light" },
+  MT: { primary: "#213572", secondary: "#009b43", text: "light" },
+  PA: { primary: "#d9251d", secondary: "#213572", text: "light" },
+  PB: { primary: "#d9251d", secondary: "#1d1d1b", text: "light" },
+  PE: { primary: "#213572", secondary: "#ffcf44", text: "light" },
+  PI: { primary: "#009b43", secondary: "#ffcf44", text: "light" },
+  PR: { primary: "#009b43", secondary: "#213572", text: "light" },
+  RJ: { primary: "#01a2ce", secondary: "#009b43", text: "light" },
+  RN: { primary: "#009b43", secondary: "#01a2ce", text: "light" },
+  RO: { primary: "#213572", secondary: "#009b43", text: "light" },
+  RR: { primary: "#009b43", secondary: "#01a2ce", text: "light" },
+  RS: { primary: "#009b43", secondary: "#d9251d", text: "light" },
+  SC: { primary: "#d9251d", secondary: "#a6ce39", text: "light" },
+  SE: { primary: "#009b43", secondary: "#213572", text: "light" },
+  SP: { primary: "#1d1d1b", secondary: "#d9251d", text: "light" },
+  TO: { primary: "#ef9926", secondary: "#213572", text: "dark" }
+};
+var BRAZIL_ACCENT_MAP = {
+  AC: "green",
+  AL: "red",
+  AM: "blue",
+  AP: "blue",
+  BA: "blue",
+  CE: "green",
+  DF: "green",
+  ES: "pink",
+  GO: "green",
+  MA: "blue",
+  MG: "red",
+  MS: "green",
+  MT: "blue",
+  PA: "red",
+  PB: "red",
+  PE: "blue",
+  PI: "green",
+  PR: "green",
+  RJ: "blue",
+  RN: "green",
+  RO: "blue",
+  RR: "green",
+  RS: "green",
+  SC: "red",
+  SE: "green",
+  SP: "black",
+  TO: "yellow"
+};
+var VALID_UFS = Object.keys(BRAZIL_STATE_PALETTES);
+var BR_THEME_CONFIG = {
+  palettes: BRAZIL_STATE_PALETTES,
+  accents: BRAZIL_ACCENT_MAP,
+  flagUrlTemplate: (code) => VALID_UFS.includes(code) ? `/flags/${code}.svg` : null
+};
+var BRAZIL_STATE_COORDINATES = {
+  AC: [-70, -9],
+  AL: [-36.6, -9.5],
+  AM: [-64, -4],
+  AP: [-51, 1],
+  BA: [-41.5, -12.5],
+  CE: [-39, -5],
+  DF: [-47.9, -15.8],
+  ES: [-40.3, -19.5],
+  GO: [-49.5, -16],
+  MA: [-45, -5],
+  MG: [-44.5, -18.5],
+  MS: [-55, -21],
+  MT: [-56, -13],
+  PA: [-52, -4],
+  PB: [-36.8, -7.1],
+  PE: [-37.5, -8.3],
+  PI: [-43, -7.5],
+  PR: [-51.5, -25],
+  RJ: [-43.2, -22.5],
+  RN: [-36.5, -5.8],
+  RO: [-63, -11],
+  RR: [-61, 2],
+  RS: [-53, -30],
+  SC: [-49.5, -27.5],
+  SE: [-37, -10.5],
+  SP: [-48.5, -22.5],
+  TO: [-48, -10]
+};
+var BRAZIL_MAP_CENTER = [-54, -15];
+var BRAZIL_MACRO_REGIONS = [
   {
-    id: "marketing",
-    name: "Marketing",
-    icon: HeroIcons.MegaphoneIcon,
-    accent: "from-pink-500 to-rose-500",
-    prompt: "Criar campanha de Black Friday para e-commerce",
-    agents: ["Marketing", "Design", "E-commerce", "Email"],
-    workflow: marketingWorkflow,
-    dashboard: /* @__PURE__ */ jsxRuntime.jsx(MarketingDemo, {})
+    key: "sudeste",
+    label: "",
+    codes: ["SP", "RJ", "MG", "ES"],
+    gradient: "from-blue-500/15 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/15",
+    iconColor: "text-blue-600 dark:text-blue-400"
   },
   {
-    id: "inventory",
-    name: "Estoque",
-    icon: HeroIcons.CubeIcon,
-    accent: "from-orange-500 to-amber-500",
-    prompt: "Verificar estoque e sugerir reposi\xE7\xF5es autom\xE1ticas",
-    agents: ["Inventory", "Supply", "Forecast", "Logistics"],
-    workflow: inventoryWorkflow,
-    dashboard: /* @__PURE__ */ jsxRuntime.jsx(InventoryDemo, {})
+    key: "sul",
+    label: "",
+    codes: ["PR", "SC", "RS"],
+    gradient: "from-emerald-500/15 to-teal-500/10 dark:from-emerald-500/20 dark:to-teal-500/15",
+    iconColor: "text-emerald-600 dark:text-emerald-400"
   },
   {
-    id: "hr",
-    name: "RH",
-    icon: HeroIcons.UsersIcon,
-    accent: "from-green-500 to-emerald-500",
-    prompt: "Processar candidaturas para vaga de Desenvolvedor Senior",
-    agents: ["HR", "Recruiter", "Skills", "Interview"],
-    workflow: hrWorkflow,
-    dashboard: /* @__PURE__ */ jsxRuntime.jsx(HRRecruitmentDemo, {})
+    key: "nordeste",
+    label: "",
+    codes: ["BA", "PE", "CE", "MA", "PB", "RN", "AL", "SE", "PI"],
+    gradient: "from-orange-500/15 to-amber-500/10 dark:from-orange-500/20 dark:to-amber-500/15",
+    iconColor: "text-orange-600 dark:text-orange-400"
   },
   {
-    id: "analytics",
-    name: "Analytics",
-    icon: HeroIcons.DocumentTextIcon,
-    accent: "from-indigo-500 to-violet-500",
-    prompt: "Analisar comportamento dos clientes e identificar oportunidades",
-    agents: ["Analytics", "CRM", "Insights", "Reports"],
-    workflow: customerAnalyticsWorkflow,
-    dashboard: /* @__PURE__ */ jsxRuntime.jsx(CustomerAnalyticsDemo, {})
+    key: "centroOeste",
+    label: "",
+    codes: ["GO", "MT", "MS", "DF"],
+    gradient: "from-purple-500/15 to-fuchsia-500/10 dark:from-purple-500/20 dark:to-fuchsia-500/15",
+    iconColor: "text-purple-600 dark:text-purple-400"
   },
   {
-    id: "lgpd",
-    name: "LGPD",
-    icon: HeroIcons.ShieldCheckIcon,
-    accent: "from-red-500 to-rose-500",
-    prompt: "Auditar dados pessoais e verificar conformidade LGPD",
-    agents: ["LGPD", "Privacy", "Audit", "Security"],
-    workflow: lgpdWorkflow,
-    dashboard: /* @__PURE__ */ jsxRuntime.jsx(LGPDComplianceDemo, {})
+    key: "norte",
+    label: "",
+    codes: ["PA", "AM", "RO", "TO", "AC", "AP", "RR"],
+    gradient: "from-cyan-500/15 to-sky-500/10 dark:from-cyan-500/20 dark:to-sky-500/15",
+    iconColor: "text-cyan-600 dark:text-cyan-400"
   }
 ];
+var getBrazilFlagUrl = (uf) => getSubdivisionFlagUrl("BR", uf);
+var getBrazilHexColor = (uf) => getSubdivisionHexColor("BR", uf);
+var getBrazilPalette = (uf) => getSubdivisionPalette("BR", uf);
+var getBrazilGradient = (uf, direction) => getSubdivisionGradient("BR", uf, direction);
+var getBrazilColors = (uf) => getSubdivisionColors("BR", uf);
+var getBrazilAccent = (uf) => getSubdivisionAccent("BR", uf);
+var isValidBrazilState = (uf) => isValidSubdivision("BR", uf);
 function EntityDrawer({
   open,
   onClose,
@@ -25768,7 +25225,6 @@ exports.FRANCE_MAP_CENTER = FRANCE_MAP_CENTER;
 exports.FRANCE_REGION_COORDINATES = FRANCE_REGION_COORDINATES;
 exports.FRANCE_REGION_PALETTES = FRANCE_REGION_PALETTES;
 exports.FR_THEME_CONFIG = FR_THEME_CONFIG;
-exports.FUEL_PRICE_LOADER = FUEL_PRICE_LOADER;
 exports.FavoriteSwipeAction = FavoriteSwipeAction;
 exports.FeatureCard = FeatureCard;
 exports.FeedItemCard = FeedItemCard;
@@ -25797,7 +25253,6 @@ exports.FormSection = FormSection;
 exports.FormSelect = FormSelect;
 exports.FormTextarea = FormTextarea;
 exports.FormToggle = FormToggle;
-exports.FuelPipelineDemo = FuelPipelineDemo;
 exports.GB_THEME_CONFIG = GB_THEME_CONFIG;
 exports.GERMANY_ACCENT_MAP = GERMANY_ACCENT_MAP;
 exports.GERMANY_MACRO_REGIONS = GERMANY_MACRO_REGIONS;
@@ -26365,5 +25820,5 @@ exports.usePullToRefresh = usePullToRefresh;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-ZKUYNCAG.js.map
-//# sourceMappingURL=chunk-ZKUYNCAG.js.map
+//# sourceMappingURL=chunk-I2NZGVBG.js.map
+//# sourceMappingURL=chunk-I2NZGVBG.js.map