@industry-theme/principal-view-panels 0.3.1 → 0.3.3

package/dist/panels.bundle.js

@@ -53249,13 +53249,8 @@ const CanvasDetailPanel = ({
     setState((prev) => ({ ...prev, viewMode: mode }));
   }, []);
   const handleOpenInEditor = useCallback(() => {
-    var _a2;
-    if (!state.canvas || !state.selectedCanvasId) {
-      return;
-    }
-    const canvasPath = canvasPathProp || ((_a2 = state.canvas.pv) == null ? void 0 : _a2.name) ? `.principal-views/${state.canvas.pv.name}.otel.canvas` : null;
-    if (!canvasPath) {
-      console.warn("[CanvasDetailPanel] Cannot open in editor: canvas path not available");
+    if (!state.canvas || !state.selectedCanvasId || !canvasPathProp) {
+      console.warn("[CanvasDetailPanel] Cannot open in editor: missing canvas path prop");
       return;
     }
     if (eventsRef.current) {
@@ -53268,7 +53263,7 @@ const CanvasDetailPanel = ({
           canvasId: state.selectedCanvasId,
           canvas: {
             id: state.selectedCanvasId,
-            path: canvasPath,
+            path: canvasPathProp,
             name: state.canvasName || state.selectedCanvasId
           }
         }
@@ -53743,19 +53738,21 @@ const CanvasDetailPanel = ({
                 "button",
                 {
                   onClick: handleOpenInEditor,
+                  disabled: !canvasPathProp,
                   style: {
                     padding: "6px 12px",
                     background: "#2a2a2a",
                     border: "1px solid #3a3a3a",
                     borderRadius: "4px",
                     color: "#fff",
-                    cursor: "pointer",
+                    cursor: canvasPathProp ? "pointer" : "not-allowed",
+                    opacity: canvasPathProp ? 1 : 0.5,
                     display: "flex",
                     alignItems: "center",
                     gap: "6px",
                     fontSize: "13px"
                   },
-                  title: "Open in Canvas Editor",
+                  title: canvasPathProp ? "Open in Canvas Editor" : "Canvas path not available",
                   children: [
                     /* @__PURE__ */ jsx(Pencil, { size: 14 }),
                     /* @__PURE__ */ jsx("span", { children: "Edit" })
@@ -56329,6 +56326,7 @@ const CanvasListPanel = ({
       ref: panelRef,
       tabIndex: -1,
       style: {
+        position: "relative",
         padding: "clamp(12px, 3vw, 20px)",
         fontFamily: theme.fonts.body,
         height: "100%",
@@ -56617,7 +56615,7 @@ const CanvasListPanel = ({
           }
         ),
         showHelp && /* @__PURE__ */ jsx("div", { style: {
-          position: "fixed",
+          position: "absolute",
           inset: 0,
           backgroundColor: "rgba(0, 0, 0, 0.5)",
           display: "flex",
@@ -63961,6 +63959,936 @@ const ChangeImpactAnalysisExplainerPanel = ({ className }) => {
     }
   );
 };
+const Step1TraditionalDevelopment = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 250", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "100", cy: "100", r: "30", fill: "#3b82f6", stroke: "#60a5fa", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "105", textAnchor: "middle", fill: "#fff", fontSize: "28", children: "👨‍💻" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "150", textAnchor: "middle", fill: "#94a3b8", fontSize: "12", fontWeight: "600", children: "DEVELOPER" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "140", y1: "100", x2: "220", y2: "100", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen)" }),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "90", textAnchor: "middle", fill: "#10b981", fontSize: "10", fontWeight: "600", children: "Builds Code" }),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "118", textAnchor: "middle", fill: "#10b981", fontSize: "9", children: "Gains Expertise" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "230", y: "70", width: "120", height: "60", fill: "#1e293b", stroke: "#475569", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "92", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "CODE" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "106", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "system.ts" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "120", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "features.ts" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "290", y1: "140", x2: "290", y2: "180", stroke: "#3b82f6", strokeWidth: "2", markerEnd: "url(#arrowblue)" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "165", fill: "#3b82f6", fontSize: "10", fontWeight: "600", children: "Monitors" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "230", y: "190", width: "120", height: "45", fill: "#064e3b", stroke: "#059669", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "210", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "600", children: "PRODUCTION" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "224", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: "Running System" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 360 100 Q 420 100, 420 160 Q 420 220, 360 220",
+            stroke: "#fbbf24",
+            strokeWidth: "2",
+            fill: "none",
+            strokeDasharray: "5,5",
+            markerEnd: "url(#arrowyellow)"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "160", fill: "#fbbf24", fontSize: "10", fontWeight: "600", children: "Developer" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "172", fill: "#fbbf24", fontSize: "10", fontWeight: "600", children: "Knowledge" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "184", fill: "#fbbf24", fontSize: "10", fontWeight: "600", children: "= Monitoring" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowgreen", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowblue", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowyellow", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#fbbf24" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#cbd5e1",
+      backgroundColor: "#1e293b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #475569"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Traditional Development:" }),
+      " Engineers built deep system knowledge while writing code. Their expertise was the monitoring system - they could debug because they understood every piece."
+    ] })
+  ] });
+};
+const Step2AgentDevelopment = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 250", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "100", cy: "100", r: "30", fill: "#3b82f6", stroke: "#60a5fa", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "105", textAnchor: "middle", fill: "#fff", fontSize: "28", children: "👨‍💻" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "150", textAnchor: "middle", fill: "#94a3b8", fontSize: "12", fontWeight: "600", children: "DEVELOPER" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "130", y1: "80", x2: "210", y2: "50", stroke: "#a78bfa", strokeWidth: "2", markerEnd: "url(#arrowpurple)" }),
+        /* @__PURE__ */ jsx("text", { x: "170", y: "55", textAnchor: "middle", fill: "#a78bfa", fontSize: "10", fontWeight: "600", children: "Directs" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "220", y: "20", width: "100", height: "50", fill: "#4c1d95", stroke: "#a78bfa", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "42", textAnchor: "middle", fill: "#e9d5ff", fontSize: "24", children: "🤖" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "63", textAnchor: "middle", fill: "#c4b5fd", fontSize: "10", fontWeight: "600", children: "AI AGENT" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "270", y1: "80", x2: "270", y2: "120", stroke: "#ef4444", strokeWidth: "2", markerEnd: "url(#arrowred)", strokeDasharray: "5,5" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "105", fill: "#ef4444", fontSize: "10", fontWeight: "600", children: "Generates" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "117", fill: "#ef4444", fontSize: "9", children: "Without Context" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "220", y: "130", width: "100", height: "60", fill: "#1e293b", stroke: "#ef4444", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "150", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "CODE" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "164", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "agent-gen.ts" }),
+        /* @__PURE__ */ jsx("text", { x: "270", y: "178", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "auto-feat.ts" }),
+        /* @__PURE__ */ jsx("text", { x: "245", y: "148", fill: "#ef4444", fontSize: "24", children: "⚠️" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "380", y: "130", width: "120", height: "60", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "152", textAnchor: "middle", fill: "#fca5a5", fontSize: "11", fontWeight: "600", children: "PRODUCTION" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "166", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "Unknown Behavior" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "180", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "No Understanding" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "330", y1: "160", x2: "370", y2: "160", stroke: "#64748b", strokeWidth: "2", markerEnd: "url(#arrowgray)" }),
+        /* @__PURE__ */ jsx("text", { x: "350", y: "150", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "Deploy" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 100 130 Q 100 200, 440 200",
+            stroke: "#ef4444",
+            strokeWidth: "3",
+            fill: "none",
+            strokeDasharray: "5,5"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "70", y: "225", fill: "#ef4444", fontSize: "11", fontWeight: "700", children: "❌ KNOWLEDGE GAP" }),
+        /* @__PURE__ */ jsx("text", { x: "240", y: "225", fill: "#ef4444", fontSize: "9", children: "Developer didn't build it = No debugging context" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowpurple", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#a78bfa" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowred", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#ef4444" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowgray", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#64748b" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#fca5a5",
+      backgroundColor: "#7f1d1d",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #ef4444"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Agent Gap:" }),
+      " AI generates code without building developer understanding. When issues arise in production, there's no expertise to rely on. Traditional monitoring can't fill this gap."
+    ] })
+  ] });
+};
+const Step3TheGap = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 320", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "THE MONITORING GAP" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "220", height: "250", fill: "#1e293b", stroke: "#475569", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "75", textAnchor: "middle", fill: "#10b981", fontSize: "12", fontWeight: "600", children: "TRADITIONAL (Before)" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "90", width: "180", height: "50", fill: "#064e3b", stroke: "#059669", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "108", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "600", children: "Developer Expertise" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "122", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: "Built while coding" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "133", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: "Deep system knowledge" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "160", textAnchor: "middle", fill: "#94a3b8", fontSize: "10", children: "+" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "170", width: "180", height: "45", fill: "#0f172a", stroke: "#334155", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "188", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "Basic Monitoring" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "202", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "Logs, metrics, traces" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "235", textAnchor: "middle", fill: "#10b981", fontSize: "11", children: "=" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "245", width: "180", height: "40", fill: "#064e3b", stroke: "#059669", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "264", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "700", children: "✓ Effective Monitoring" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "277", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: "Human knowledge filled gaps" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "340", y: "50", width: "220", height: "250", fill: "#1e293b", stroke: "#475569", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "75", textAnchor: "middle", fill: "#ef4444", fontSize: "12", fontWeight: "600", children: "AI-ERA (Now)" }),
+        /* @__PURE__ */ jsx("rect", { x: "360", y: "90", width: "180", height: "50", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "108", textAnchor: "middle", fill: "#fca5a5", fontSize: "11", fontWeight: "600", children: "❌ No Expertise" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "122", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "AI wrote the code" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "133", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "Developer has no context" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "160", textAnchor: "middle", fill: "#94a3b8", fontSize: "10", children: "+" }),
+        /* @__PURE__ */ jsx("rect", { x: "360", y: "170", width: "180", height: "45", fill: "#0f172a", stroke: "#334155", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "188", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "Basic Monitoring" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "202", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "Same logs, metrics, traces" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "235", textAnchor: "middle", fill: "#ef4444", fontSize: "11", children: "=" }),
+        /* @__PURE__ */ jsx("rect", { x: "360", y: "245", width: "180", height: "40", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "264", textAnchor: "middle", fill: "#fca5a5", fontSize: "11", fontWeight: "700", children: "❌ Monitoring Gap" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "277", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "No knowledge to fill gaps" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("path", { d: "M 280 200 L 320 200", stroke: "#fbbf24", strokeWidth: "3", markerEnd: "url(#arrowyellow2)" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "190", textAnchor: "middle", fill: "#fbbf24", fontSize: "11", fontWeight: "700", children: "THE GAP" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowyellow2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#fbbf24" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#fef3c7",
+      backgroundColor: "#78350f",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "2px solid #fbbf24"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Critical Gap:" }),
+      " Traditional monitoring worked because developer expertise filled the gaps. With AI agents, that expertise is missing. ",
+      /* @__PURE__ */ jsx("strong", { children: "We need tools to encapsulate what was once in developers' heads." })
+    ] })
+  ] });
+};
+const Step4ImplicationsDevelopers = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 280", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "WHAT THIS MEANS FOR DEVELOPERS" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "250", height: "100", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "165", y: "72", textAnchor: "middle", fill: "#60a5fa", fontSize: "12", fontWeight: "700", children: "Every Engineer = Team Lead" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "92", fill: "#94a3b8", fontSize: "10", children: "✓ Manages AI agents making changes" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "108", fill: "#94a3b8", fontSize: "10", children: "✓ Reviews agent-generated code" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "124", fill: "#94a3b8", fontSize: "10", children: "✓ Ensures quality & correctness" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "140", fill: "#10b981", fontSize: "10", fontWeight: "600", children: "→ Time shifts from coding to oversight" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "310", y: "50", width: "250", height: "100", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "435", y: "72", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "The Challenge" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "92", fill: "#fca5a5", fontSize: "10", children: "❌ Can't fully trust agent output" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "108", fill: "#fca5a5", fontSize: "10", children: "❌ No context for debugging issues" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "124", fill: "#fca5a5", fontSize: "10", children: "❌ Traditional tools don't help" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "140", fill: "#fca5a5", fontSize: "10", fontWeight: "600", children: "→ Can't leverage agents without risk" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "170", width: "520", height: "90", fill: "#064e3b", stroke: "#10b981", strokeWidth: "3", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "195", textAnchor: "middle", fill: "#6ee7b7", fontSize: "13", fontWeight: "700", children: "WHAT DEVELOPERS NEED" }),
+        /* @__PURE__ */ jsxs("text", { x: "60", y: "218", fill: "#a7f3d0", fontSize: "11", children: [
+          "1. ",
+          /* @__PURE__ */ jsx("tspan", { fontWeight: "600", children: "Encode Expectations:" }),
+          " Define what the system should do"
+        ] }),
+        /* @__PURE__ */ jsxs("text", { x: "60", y: "235", fill: "#a7f3d0", fontSize: "11", children: [
+          "2. ",
+          /* @__PURE__ */ jsx("tspan", { fontWeight: "600", children: "Automatic Validation:" }),
+          " Verify agent changes against expectations"
+        ] }),
+        /* @__PURE__ */ jsxs("text", { x: "60", y: "252", fill: "#a7f3d0", fontSize: "11", children: [
+          "3. ",
+          /* @__PURE__ */ jsx("tspan", { fontWeight: "600", children: "Confidence to Deploy:" }),
+          " Trust that agents' work is correct"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#cbd5e1",
+      backgroundColor: "#1e293b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #475569"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Opportunity:" }),
+      " Developers have time to craft system expectations instead of writing every line. They need tools that turn those expectations into automated verification - making agent work trustworthy."
+    ] })
+  ] });
+};
+const AgentMonitoringGapExplainerPanel = ({
+  className
+}) => {
+  var _a;
+  const [activeSection, setActiveSection] = useState("traditional");
+  const sections2 = [
+    { id: "traditional", title: "Traditional Development", component: Step1TraditionalDevelopment },
+    { id: "agent-era", title: "Agent Era", component: Step2AgentDevelopment },
+    { id: "the-gap", title: "The Gap", component: Step3TheGap },
+    { id: "implications", title: "What Developers Need", component: Step4ImplicationsDevelopers }
+  ];
+  const ActiveComponent = ((_a = sections2.find((s) => s.id === activeSection)) == null ? void 0 : _a.component) || Step1TraditionalDevelopment;
+  return /* @__PURE__ */ jsxs("div", { className, style: {
+    backgroundColor: "#0f172a",
+    color: "#cbd5e1",
+    padding: "24px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    minHeight: "100vh"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px" }, children: [
+      /* @__PURE__ */ jsx("h1", { style: {
+        fontSize: "24px",
+        fontWeight: "700",
+        color: "#f1f5f9",
+        marginBottom: "8px"
+      }, children: "The Agent Monitoring Gap" }),
+      /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "14px",
+        color: "#94a3b8",
+        margin: 0
+      }, children: "Why traditional monitoring fails with AI-generated code" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      gap: "8px",
+      marginBottom: "24px",
+      borderBottom: "1px solid #334155",
+      paddingBottom: "12px"
+    }, children: sections2.map((section) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveSection(section.id),
+        style: {
+          padding: "8px 16px",
+          backgroundColor: activeSection === section.id ? "#3b82f6" : "#1e293b",
+          color: activeSection === section.id ? "#fff" : "#94a3b8",
+          border: "1px solid",
+          borderColor: activeSection === section.id ? "#60a5fa" : "#334155",
+          borderRadius: "6px",
+          cursor: "pointer",
+          fontSize: "13px",
+          fontWeight: activeSection === section.id ? "600" : "400",
+          transition: "all 0.2s"
+        },
+        children: section.title
+      },
+      section.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: {
+      backgroundColor: "#1e293b",
+      borderRadius: "8px",
+      padding: "24px",
+      border: "1px solid #334155"
+    }, children: /* @__PURE__ */ jsx(ActiveComponent, {}) })
+  ] });
+};
+const Step1WhatAreStories = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 240", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "STORIES = HOW HUMANS UNDERSTAND SYSTEMS" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "240", height: "170", fill: "#1e293b", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "73", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "❌ Traditional Monitoring" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "85", width: "200", height: "120", fill: "#0f172a", stroke: "#334155", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "100", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "span.duration = 1234ms" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "115", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "http.status_code = 200" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "130", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "db.query.count = 12" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "145", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: 'event.type = "order.created"' }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "160", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: 'trace.id = "abc123..."' }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "175", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "error.count = 0" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "190", textAnchor: "middle", fill: "#64748b", fontSize: "9", fontFamily: "monospace", children: "..." }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "215", textAnchor: "middle", fill: "#fca5a5", fontSize: "10", fontStyle: "italic", children: "Needle in haystack" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "290", y1: "135", x2: "310", y2: "135", stroke: "#3b82f6", strokeWidth: "2", markerEnd: "url(#arrowblue)" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "127", textAnchor: "middle", fill: "#3b82f6", fontSize: "10", fontWeight: "600", children: "vs" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "320", y: "50", width: "240", height: "170", fill: "#064e3b", stroke: "#10b981", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "73", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "✓ System Stories" }),
+        /* @__PURE__ */ jsx("rect", { x: "340", y: "85", width: "200", height: "120", fill: "#022c22", stroke: "#059669", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "103", textAnchor: "middle", fill: "#d1fae5", fontSize: "11", fontWeight: "600", children: 'Story: "User Checkout"' }),
+        /* @__PURE__ */ jsx("text", { x: "350", y: "120", fill: "#a7f3d0", fontSize: "9", children: "When user completes checkout:" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "135", fill: "#a7f3d0", fontSize: "9", children: "• Payment processes in <2s" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "148", fill: "#a7f3d0", fontSize: "9", children: "• Order confirmation sent" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "161", fill: "#a7f3d0", fontSize: "9", children: "• Inventory decremented" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "174", fill: "#a7f3d0", fontSize: "9", children: "• Analytics event fired" }),
+        /* @__PURE__ */ jsx("text", { x: "355", y: "187", fill: "#a7f3d0", fontSize: "9", children: "• User redirected to success" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "215", textAnchor: "middle", fill: "#6ee7b7", fontSize: "10", fontStyle: "italic", children: "Human-readable expectations" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowblue", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #059669"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Stories work because:" }),
+      ' Humans naturally think in narratives, not metrics. "User checkout should take <2s and send confirmation" is clearer than tracking 50 telemetry signals.'
+    ] })
+  ] });
+};
+const Step2HowStoriesWork = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 280", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "30", y: "30", width: "180", height: "80", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "52", textAnchor: "middle", fill: "#60a5fa", fontSize: "11", fontWeight: "700", children: "1. DEFINE STORY" }),
+        /* @__PURE__ */ jsx("text", { x: "40", y: "70", fill: "#cbd5e1", fontSize: "9", children: 'Story: "Payment Flow"' }),
+        /* @__PURE__ */ jsx("text", { x: "45", y: "84", fill: "#94a3b8", fontSize: "8", children: "Expected behavior:" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "96", fill: "#94a3b8", fontSize: "8", children: "• Charge succeeds" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "105", fill: "#94a3b8", fontSize: "8", children: "• Receipt generated" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "220", y1: "70", x2: "270", y2: "70", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen)" }),
+        /* @__PURE__ */ jsx("text", { x: "245", y: "65", textAnchor: "middle", fill: "#10b981", fontSize: "9", children: "Maps to" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "280", y: "30", width: "180", height: "80", fill: "#0f172a", stroke: "#6366f1", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "370", y: "52", textAnchor: "middle", fill: "#a78bfa", fontSize: "11", fontWeight: "700", children: "2. TELEMETRY SIGNALS" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "70", fill: "#c4b5fd", fontSize: "8", fontFamily: "monospace", children: 'span: "ProcessPayment"' }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "82", fill: "#c4b5fd", fontSize: "8", fontFamily: "monospace", children: 'event: "payment.success"' }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "94", fill: "#c4b5fd", fontSize: "8", fontFamily: "monospace", children: 'event: "receipt.generated"' }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "106", fill: "#c4b5fd", fontSize: "8", fontFamily: "monospace", children: "attr: amount, customer_id" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "370", y1: "120", x2: "370", y2: "160", stroke: "#fbbf24", strokeWidth: "2", markerEnd: "url(#arrowyellow)" }),
+        /* @__PURE__ */ jsx("text", { x: "400", y: "145", fill: "#fbbf24", fontSize: "9", children: "Monitors" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "280", y: "170", width: "180", height: "80", fill: "#064e3b", stroke: "#059669", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "370", y: "192", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "700", children: "3. PRODUCTION SYSTEM" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "210", fill: "#a7f3d0", fontSize: "9", children: "Real telemetry events" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "224", fill: "#a7f3d0", fontSize: "9", children: "flowing from system" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "238", fill: "#10b981", fontSize: "9", fontWeight: "600", children: "✓ Story validated in real-time" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 270 210 Q 120 210, 120 120",
+            stroke: "#3b82f6",
+            strokeWidth: "2",
+            fill: "none",
+            strokeDasharray: "5,5",
+            markerEnd: "url(#arrowblue2)"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "230", fill: "#3b82f6", fontSize: "9", children: "Alert if story breaks" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "120", cy: "195", r: "25", fill: "#3b82f6", stroke: "#60a5fa", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "200", textAnchor: "middle", fill: "#fff", fontSize: "20", children: "👨‍💻" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "235", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", fontWeight: "600", children: "ENGINEER" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "247", textAnchor: "middle", fill: "#10b981", fontSize: "8", children: "Gets alerts" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowgreen", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowyellow", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#fbbf24" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowblue2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#cbd5e1",
+      backgroundColor: "#1e293b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #475569"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "How it works:" }),
+      " Define expected behavior as a story → Map to telemetry signals → Monitor production in real-time → Get alerts when expectations are violated."
+    ] })
+  ] });
+};
+const Step3AvoidNeedleInHaystack = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 300", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "AVOIDING THE NEEDLE IN THE HAYSTACK" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "240", height: "220", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "73", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "❌ Reactive Monitoring" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "88", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: '"Something is wrong, find it!"' }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "100", width: "200", height: "130", fill: "#450a0a", stroke: "#991b1b", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "118", textAnchor: "middle", fill: "#7f1d1d", fontSize: "40", children: "🌾" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "155", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "10,000 spans/sec" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "168", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "500 services" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "181", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "millions of events" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "194", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "complex traces" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "207", fill: "#fca5a5", fontSize: "8", fontFamily: "monospace", children: "distributed systems" }),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "175", fill: "#ef4444", fontSize: "28", children: "📍" }),
+        /* @__PURE__ */ jsx("text", { x: "160", y: "248", textAnchor: "middle", fill: "#fca5a5", fontSize: "10", fontStyle: "italic", children: "Hours hunting for root cause" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "290", y1: "160", x2: "310", y2: "160", stroke: "#10b981", strokeWidth: "3", markerEnd: "url(#arrowgreen2)" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "150", textAnchor: "middle", fill: "#10b981", fontSize: "10", fontWeight: "700", children: "VS" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "320", y: "50", width: "240", height: "220", fill: "#064e3b", stroke: "#10b981", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "73", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "✓ Proactive Stories" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "88", textAnchor: "middle", fill: "#a7f3d0", fontSize: "9", children: '"This is what should happen"' }),
+        /* @__PURE__ */ jsx("rect", { x: "340", y: "100", width: "200", height: "130", fill: "#022c22", stroke: "#059669", strokeWidth: "1.5", rx: "4" }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "120", textAnchor: "middle", fill: "#d1fae5", fontSize: "10", fontWeight: "600", children: "Expected Stories:" }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "138", r: "4", fill: "#10b981" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "142", fill: "#a7f3d0", fontSize: "9", children: "✓ User Login (Active)" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "155", r: "4", fill: "#10b981" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "159", fill: "#a7f3d0", fontSize: "9", children: "✓ Checkout Flow (Active)" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "172", r: "4", fill: "#10b981" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "176", fill: "#a7f3d0", fontSize: "9", children: "✓ Payment Process (Active)" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "189", r: "4", fill: "#ef4444" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "193", fill: "#fca5a5", fontSize: "9", children: "❌ Email Send (VIOLATED!)" }),
+          /* @__PURE__ */ jsx("text", { x: "375", y: "203", fill: "#fbbf24", fontSize: "8", children: "→ Immediate alert" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx("circle", { cx: "355", cy: "215", r: "4", fill: "#10b981" }),
+          /* @__PURE__ */ jsx("text", { x: "365", y: "219", fill: "#a7f3d0", fontSize: "9", children: "✓ Analytics Track (Active)" })
+        ] }),
+        /* @__PURE__ */ jsx("text", { x: "440", y: "248", textAnchor: "middle", fill: "#6ee7b7", fontSize: "10", fontStyle: "italic", children: "Know immediately what broke" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowgreen2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #059669"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Key Insight:" }),
+      " Instead of searching millions of events for problems, define expected behaviors upfront. When a story is violated, you know exactly what broke and why."
+    ] })
+  ] });
+};
+const Step4AgentIntegration = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 340", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "STORIES MAKE AGENT WORK TRUSTWORTHY" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "160", height: "80", fill: "#4c1d95", stroke: "#a78bfa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "70", textAnchor: "middle", fill: "#e9d5ff", fontSize: "11", fontWeight: "700", children: "1. AGENT WRITES CODE" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "88", textAnchor: "middle", fill: "#e9d5ff", fontSize: "24", children: "🤖" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "110", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Makes change to" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "122", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "checkout flow" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "210", y1: "90", x2: "270", y2: "90", stroke: "#3b82f6", strokeWidth: "2", markerEnd: "url(#arrowblue3)" }),
+        /* @__PURE__ */ jsx("text", { x: "240", y: "82", textAnchor: "middle", fill: "#3b82f6", fontSize: "9", children: "Deploy" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "280", y: "50", width: "160", height: "80", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "360", y: "70", textAnchor: "middle", fill: "#60a5fa", fontSize: "11", fontWeight: "700", children: "2. STORIES VALIDATE" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "90", fill: "#94a3b8", fontSize: "9", children: 'Story: "Checkout"' }),
+        /* @__PURE__ */ jsx("text", { x: "295", y: "103", fill: "#a7f3d0", fontSize: "8", children: "✓ Payment processes" }),
+        /* @__PURE__ */ jsx("text", { x: "295", y: "114", fill: "#fca5a5", fontSize: "8", children: "❌ Email not sent!" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "360", y1: "140", x2: "360", y2: "180", stroke: "#ef4444", strokeWidth: "2", markerEnd: "url(#arrowred)" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "165", fill: "#ef4444", fontSize: "9", fontWeight: "600", children: "Alert!" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "280", y: "190", width: "160", height: "80", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "360", y: "210", textAnchor: "middle", fill: "#fca5a5", fontSize: "11", fontWeight: "700", children: "3. IMMEDIATE FEEDBACK" }),
+        /* @__PURE__ */ jsx("text", { x: "360", y: "228", textAnchor: "middle", fill: "#fca5a5", fontSize: "24", children: "⚠️" }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "250", fill: "#fca5a5", fontSize: "9", children: '"Agent broke checkout' }),
+        /* @__PURE__ */ jsx("text", { x: "290", y: "262", fill: "#fca5a5", fontSize: "9", children: 'confirmation emails"' })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 270 230 Q 220 230, 220 190",
+            stroke: "#fbbf24",
+            strokeWidth: "2",
+            fill: "none",
+            markerEnd: "url(#arrowyellow2)"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "235", y: "225", fill: "#fbbf24", fontSize: "9", children: "Fix & redeploy" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "190", width: "160", height: "80", fill: "#064e3b", stroke: "#10b981", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "210", textAnchor: "middle", fill: "#6ee7b7", fontSize: "11", fontWeight: "700", children: "4. CONFIDENCE" }),
+        /* @__PURE__ */ jsx("text", { x: "120", y: "228", textAnchor: "middle", fill: "#10b981", fontSize: "24", children: "✓" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "250", fill: "#a7f3d0", fontSize: "9", children: "All stories pass =" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "262", fill: "#a7f3d0", fontSize: "9", children: "Safe to trust agent" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "290", width: "520", height: "40", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "310", textAnchor: "middle", fill: "#60a5fa", fontSize: "11", fontWeight: "700", children: "RESULT: Engineers can leverage agents without fear" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "323", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "Stories act as automated acceptance tests for all agent changes" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowblue3", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowred", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#ef4444" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowyellow2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#fbbf24" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #059669"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Why This Works:" }),
+      " Every engineer now spends time defining system stories instead of writing all code. Stories automatically verify agent changes in production. When all stories pass, you can trust the agent's work."
+    ] })
+  ] });
+};
+const SystemStoriesSolutionExplainerPanel = ({
+  className
+}) => {
+  var _a;
+  const [activeSection, setActiveSection] = useState("what");
+  const sections2 = [
+    { id: "what", title: "What Are Stories?", component: Step1WhatAreStories },
+    { id: "how", title: "How They Work", component: Step2HowStoriesWork },
+    { id: "avoid-haystack", title: "Avoid Haystack Problem", component: Step3AvoidNeedleInHaystack },
+    { id: "agent-integration", title: "Agent Integration", component: Step4AgentIntegration }
+  ];
+  const ActiveComponent = ((_a = sections2.find((s) => s.id === activeSection)) == null ? void 0 : _a.component) || Step1WhatAreStories;
+  return /* @__PURE__ */ jsxs("div", { className, style: {
+    backgroundColor: "#0f172a",
+    color: "#cbd5e1",
+    padding: "24px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    minHeight: "100vh"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px" }, children: [
+      /* @__PURE__ */ jsx("h1", { style: {
+        fontSize: "24px",
+        fontWeight: "700",
+        color: "#f1f5f9",
+        marginBottom: "8px"
+      }, children: "System Stories: The Solution" }),
+      /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "14px",
+        color: "#94a3b8",
+        margin: 0
+      }, children: "How stories transform telemetry into trustworthy agent monitoring" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      gap: "8px",
+      marginBottom: "24px",
+      borderBottom: "1px solid #334155",
+      paddingBottom: "12px",
+      flexWrap: "wrap"
+    }, children: sections2.map((section) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveSection(section.id),
+        style: {
+          padding: "8px 16px",
+          backgroundColor: activeSection === section.id ? "#3b82f6" : "#1e293b",
+          color: activeSection === section.id ? "#fff" : "#94a3b8",
+          border: "1px solid",
+          borderColor: activeSection === section.id ? "#60a5fa" : "#334155",
+          borderRadius: "6px",
+          cursor: "pointer",
+          fontSize: "13px",
+          fontWeight: activeSection === section.id ? "600" : "400",
+          transition: "all 0.2s"
+        },
+        children: section.title
+      },
+      section.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: {
+      backgroundColor: "#1e293b",
+      borderRadius: "8px",
+      padding: "24px",
+      border: "1px solid #334155"
+    }, children: /* @__PURE__ */ jsx(ActiveComponent, {}) })
+  ] });
+};
+const Step1AgentAdoption = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 280", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "THE AGENT REVOLUTION IS HERE" }),
+      /* @__PURE__ */ jsx("line", { x1: "50", y1: "100", x2: "550", y2: "100", stroke: "#475569", strokeWidth: "3" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "100", cy: "100", r: "8", fill: "#64748b" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "125", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "2020" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "140", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "GPT-3" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "152", textAnchor: "middle", fill: "#64748b", fontSize: "9", children: "Copilot beta" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "220", cy: "100", r: "10", fill: "#3b82f6" }),
+        /* @__PURE__ */ jsx("text", { x: "220", y: "125", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "2022" }),
+        /* @__PURE__ */ jsx("text", { x: "220", y: "140", textAnchor: "middle", fill: "#60a5fa", fontSize: "9", children: "ChatGPT" }),
+        /* @__PURE__ */ jsx("text", { x: "220", y: "152", textAnchor: "middle", fill: "#60a5fa", fontSize: "9", children: "GitHub Copilot GA" }),
+        /* @__PURE__ */ jsx("text", { x: "220", y: "164", textAnchor: "middle", fill: "#60a5fa", fontSize: "9", children: "~30% code assist" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "380", cy: "100", r: "12", fill: "#8b5cf6" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "125", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "2024" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "140", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Claude Sonnet 3.5" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "152", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Cursor, Claude Code" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "164", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Agents write entire features" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "176", textAnchor: "middle", fill: "#a78bfa", fontSize: "9", fontWeight: "600", children: "~50-80% agent-written" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("circle", { cx: "500", cy: "100", r: "14", fill: "#10b981" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "125", textAnchor: "middle", fill: "#94a3b8", fontSize: "11", fontWeight: "700", children: "2025+" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "140", textAnchor: "middle", fill: "#6ee7b7", fontSize: "9", children: "Autonomous agents" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "152", textAnchor: "middle", fill: "#6ee7b7", fontSize: "9", children: "Full feature ownership" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "164", textAnchor: "middle", fill: "#6ee7b7", fontSize: "9", children: "Engineers = reviewers" }),
+        /* @__PURE__ */ jsx("text", { x: "500", y: "176", textAnchor: "middle", fill: "#10b981", fontSize: "9", fontWeight: "700", children: "~90%+ agent-written" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M 100 250 Q 220 240, 380 200 Q 440 180, 500 150",
+            stroke: "#10b981",
+            strokeWidth: "3",
+            fill: "none",
+            markerEnd: "url(#arrowgreen)"
+          }
+        ),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "230", textAnchor: "middle", fill: "#10b981", fontSize: "11", fontWeight: "600", children: "Exponential Agent Adoption" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowgreen", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #059669"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "200%+ YoY Growth:" }),
+      ` AI coding assistants went from autocomplete to writing entire features in 3 years. GitHub Copilot, Cursor, Claude Code are now table stakes. The question isn't "if" but "how much" code is agent-generated.`
+    ] })
+  ] });
+};
+const Step2GrowingGap = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 300", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "THE EXPERIENCE GAP IS GROWING" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "220", height: "220", fill: "#1e293b", stroke: "#60a5fa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "72", textAnchor: "middle", fill: "#60a5fa", fontSize: "12", fontWeight: "700", children: "CODE VOLUME" }),
+        /* @__PURE__ */ jsx("rect", { x: "60", y: "220", width: "40", height: "30", fill: "#3b82f6" }),
+        /* @__PURE__ */ jsx("text", { x: "80", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2020" }),
+        /* @__PURE__ */ jsx("rect", { x: "110", y: "190", width: "40", height: "60", fill: "#3b82f6" }),
+        /* @__PURE__ */ jsx("text", { x: "130", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2022" }),
+        /* @__PURE__ */ jsx("rect", { x: "160", y: "140", width: "40", height: "110", fill: "#6366f1" }),
+        /* @__PURE__ */ jsx("text", { x: "180", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2024" }),
+        /* @__PURE__ */ jsx("rect", { x: "210", y: "90", width: "40", height: "160", fill: "#8b5cf6" }),
+        /* @__PURE__ */ jsx("text", { x: "230", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2026" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "95", textAnchor: "middle", fill: "#a78bfa", fontSize: "20", children: "📈" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "115", textAnchor: "middle", fill: "#c4b5fd", fontSize: "10", fontWeight: "600", children: "10x more code" }),
+        /* @__PURE__ */ jsx("text", { x: "150", y: "128", textAnchor: "middle", fill: "#c4b5fd", fontSize: "9", children: "Agents ship faster" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "340", y: "50", width: "220", height: "220", fill: "#1e293b", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "72", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "DEVELOPER CONTEXT" }),
+        /* @__PURE__ */ jsx("rect", { x: "360", y: "140", width: "40", height: "110", fill: "#10b981" }),
+        /* @__PURE__ */ jsx("text", { x: "380", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2020" }),
+        /* @__PURE__ */ jsx("rect", { x: "410", y: "170", width: "40", height: "80", fill: "#fbbf24" }),
+        /* @__PURE__ */ jsx("text", { x: "430", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2022" }),
+        /* @__PURE__ */ jsx("rect", { x: "460", y: "210", width: "40", height: "40", fill: "#f97316" }),
+        /* @__PURE__ */ jsx("text", { x: "480", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2024" }),
+        /* @__PURE__ */ jsx("rect", { x: "510", y: "235", width: "40", height: "15", fill: "#ef4444" }),
+        /* @__PURE__ */ jsx("text", { x: "530", y: "264", textAnchor: "middle", fill: "#94a3b8", fontSize: "9", children: "2026" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "95", textAnchor: "middle", fill: "#fca5a5", fontSize: "20", children: "📉" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "115", textAnchor: "middle", fill: "#fca5a5", fontSize: "10", fontWeight: "600", children: "90% less context" }),
+        /* @__PURE__ */ jsx("text", { x: "450", y: "128", textAnchor: "middle", fill: "#fca5a5", fontSize: "9", children: "Didn't write code" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("path", { d: "M 270 160 L 330 160", stroke: "#fbbf24", strokeWidth: "4", strokeDasharray: "8,4" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "155", textAnchor: "middle", fill: "#fbbf24", fontSize: "11", fontWeight: "700", children: "WIDENING" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "175", textAnchor: "middle", fill: "#fbbf24", fontSize: "11", fontWeight: "700", children: "GAP" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#fef3c7",
+      backgroundColor: "#78350f",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "2px solid #fbbf24"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "The Scissors Problem:" }),
+      " Code volume exploding while developer understanding plummets. Junior devs manage agent output without context. Senior devs lose touch with details. Traditional monitoring can't bridge this gap."
+    ] })
+  ] });
+};
+const Step3InfrastructureReady = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 280", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "TELEMETRY INFRASTRUCTURE IS MATURE" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "80", y: "200", width: "440", height: "60", fill: "#064e3b", stroke: "#059669", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "222", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "MATURE FOUNDATION" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "240", fill: "#a7f3d0", fontSize: "10", children: "✓ OpenTelemetry standard" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "253", fill: "#a7f3d0", fontSize: "10", children: "✓ Distributed tracing" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "240", fill: "#a7f3d0", fontSize: "10", children: "✓ Cloud-native observability" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "253", fill: "#a7f3d0", fontSize: "10", children: "✓ Wide adoption" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "80", y: "120", width: "440", height: "60", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", strokeDasharray: "8,4", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "142", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "MISSING: INTELLIGENCE LAYER" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "160", fill: "#fca5a5", fontSize: "10", children: "❌ No behavior expectations" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "173", fill: "#fca5a5", fontSize: "10", children: "❌ No story understanding" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "160", fill: "#fca5a5", fontSize: "10", children: "❌ No agent validation" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "173", fill: "#fca5a5", fontSize: "10", children: "❌ Reactive, not proactive" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "80", y: "40", width: "440", height: "60", fill: "#1e40af", stroke: "#3b82f6", strokeWidth: "3", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "62", textAnchor: "middle", fill: "#60a5fa", fontSize: "13", fontWeight: "700", children: "PRINCIPAL AI: THE INTELLIGENCE LAYER" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "80", fill: "#bfdbfe", fontSize: "10", children: "✓ Story-based expectations" }),
+        /* @__PURE__ */ jsx("text", { x: "100", y: "93", fill: "#bfdbfe", fontSize: "10", children: "✓ Telemetry synthesis" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "80", fill: "#bfdbfe", fontSize: "10", children: "✓ Agent workflow integration" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "93", fill: "#bfdbfe", fontSize: "10", children: "✓ Automated validation" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("line", { x1: "300", y1: "110", x2: "300", y2: "115", stroke: "#3b82f6", strokeWidth: "2", markerEnd: "url(#arrowblue)" }),
+        /* @__PURE__ */ jsx("line", { x1: "300", y1: "190", x2: "300", y2: "195", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen2)" })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "arrowblue", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#3b82f6" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "arrowgreen2", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#cbd5e1",
+      backgroundColor: "#1e293b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "1px solid #475569"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Perfect Timing:" }),
+      " OpenTelemetry and distributed tracing solved the data collection problem. The infrastructure is ready for an intelligent layer that understands behavior, not just metrics."
+    ] })
+  ] });
+};
+const Step4MarketOpportunity = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 320", style: { width: "100%", height: "auto" }, children: [
+      /* @__PURE__ */ jsx("text", { x: "300", y: "25", textAnchor: "middle", fill: "#94a3b8", fontSize: "14", fontWeight: "700", children: "CONVERGING MARKET FORCES" }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "50", width: "250", height: "80", fill: "#4c1d95", stroke: "#a78bfa", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "165", y: "72", textAnchor: "middle", fill: "#e9d5ff", fontSize: "12", fontWeight: "700", children: "🤖 AGENT ADOPTION" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "90", fill: "#c4b5fd", fontSize: "10", children: "• Every team using AI coding tools" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "104", fill: "#c4b5fd", fontSize: "10", children: "• 50-80% code now agent-generated" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "118", fill: "#c4b5fd", fontSize: "10", children: "• Growing dependency on automation" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "310", y: "50", width: "250", height: "80", fill: "#1e40af", stroke: "#3b82f6", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "435", y: "72", textAnchor: "middle", fill: "#bfdbfe", fontSize: "12", fontWeight: "700", children: "⚡ PRODUCTIVITY PRESSURE" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "90", fill: "#bfdbfe", fontSize: "10", children: "• Ship faster with fewer engineers" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "104", fill: "#bfdbfe", fontSize: "10", children: "• Do more with AI leverage" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "118", fill: "#bfdbfe", fontSize: "10", children: "• Need confidence to deploy" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "40", y: "150", width: "250", height: "80", fill: "#7c2d12", stroke: "#f97316", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "165", y: "172", textAnchor: "middle", fill: "#fed7aa", fontSize: "12", fontWeight: "700", children: "🌐 SYSTEM COMPLEXITY" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "190", fill: "#fed7aa", fontSize: "10", children: "• Microservices proliferation" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "204", fill: "#fed7aa", fontSize: "10", children: "• Distributed systems everywhere" }),
+        /* @__PURE__ */ jsx("text", { x: "50", y: "218", fill: "#fed7aa", fontSize: "10", children: "• Traditional monitoring overwhelmed" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: "310", y: "150", width: "250", height: "80", fill: "#7f1d1d", stroke: "#ef4444", strokeWidth: "2", rx: "6" }),
+        /* @__PURE__ */ jsx("text", { x: "435", y: "172", textAnchor: "middle", fill: "#fca5a5", fontSize: "12", fontWeight: "700", children: "🧠 KNOWLEDGE PROBLEM" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "190", fill: "#fca5a5", fontSize: "10", children: "• Junior devs managing agent output" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "204", fill: "#fca5a5", fontSize: "10", children: "• Team scaling loses context" }),
+        /* @__PURE__ */ jsx("text", { x: "320", y: "218", fill: "#fca5a5", fontSize: "10", children: "• Tribal knowledge doesn't scale" })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("path", { d: "M 165 140 L 300 270", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen3)" }),
+        /* @__PURE__ */ jsx("path", { d: "M 435 140 L 300 270", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen3)" }),
+        /* @__PURE__ */ jsx("path", { d: "M 165 240 L 300 270", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen3)" }),
+        /* @__PURE__ */ jsx("path", { d: "M 435 240 L 300 270", stroke: "#10b981", strokeWidth: "2", markerEnd: "url(#arrowgreen3)" }),
+        /* @__PURE__ */ jsx("circle", { cx: "300", cy: "275", r: "30", fill: "#064e3b", stroke: "#10b981", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "280", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "PERFECT" }),
+        /* @__PURE__ */ jsx("text", { x: "300", y: "293", textAnchor: "middle", fill: "#6ee7b7", fontSize: "12", fontWeight: "700", children: "TIMING" })
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "arrowgreen3", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L0,6 L9,3 z", fill: "#10b981" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: {
+      fontSize: "14px",
+      color: "#d1fae5",
+      backgroundColor: "#064e3b",
+      padding: "16px",
+      borderRadius: "6px",
+      border: "2px solid #10b981"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Why Now:" }),
+      " Agent adoption + productivity pressure + system complexity + knowledge distribution = urgent need for story-based monitoring. The market timing has never been better."
+    ] })
+  ] });
+};
+const WhyNowAgentRevolutionExplainerPanel = ({
+  className
+}) => {
+  var _a;
+  const [activeSection, setActiveSection] = useState("adoption");
+  const sections2 = [
+    { id: "adoption", title: "Agent Adoption", component: Step1AgentAdoption },
+    { id: "growing-gap", title: "Growing Gap", component: Step2GrowingGap },
+    { id: "infrastructure", title: "Infrastructure Ready", component: Step3InfrastructureReady },
+    { id: "market", title: "Market Opportunity", component: Step4MarketOpportunity }
+  ];
+  const ActiveComponent = ((_a = sections2.find((s) => s.id === activeSection)) == null ? void 0 : _a.component) || Step1AgentAdoption;
+  return /* @__PURE__ */ jsxs("div", { className, style: {
+    backgroundColor: "#0f172a",
+    color: "#cbd5e1",
+    padding: "24px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    minHeight: "100vh"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px" }, children: [
+      /* @__PURE__ */ jsx("h1", { style: {
+        fontSize: "24px",
+        fontWeight: "700",
+        color: "#f1f5f9",
+        marginBottom: "8px"
+      }, children: "Why Now: The Agent Revolution" }),
+      /* @__PURE__ */ jsx("p", { style: {
+        fontSize: "14px",
+        color: "#94a3b8",
+        margin: 0
+      }, children: "Understanding the perfect market timing for story-based monitoring" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      gap: "8px",
+      marginBottom: "24px",
+      borderBottom: "1px solid #334155",
+      paddingBottom: "12px",
+      flexWrap: "wrap"
+    }, children: sections2.map((section) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveSection(section.id),
+        style: {
+          padding: "8px 16px",
+          backgroundColor: activeSection === section.id ? "#3b82f6" : "#1e293b",
+          color: activeSection === section.id ? "#fff" : "#94a3b8",
+          border: "1px solid",
+          borderColor: activeSection === section.id ? "#60a5fa" : "#334155",
+          borderRadius: "6px",
+          cursor: "pointer",
+          fontSize: "13px",
+          fontWeight: activeSection === section.id ? "600" : "400",
+          transition: "all 0.2s"
+        },
+        children: section.title
+      },
+      section.id
+    )) }),
+    /* @__PURE__ */ jsx("div", { style: {
+      backgroundColor: "#1e293b",
+      borderRadius: "8px",
+      padding: "24px",
+      border: "1px solid #334155"
+    }, children: /* @__PURE__ */ jsx(ActiveComponent, {}) })
+  ] });
+};
 class PanelFileSystemAdapter {
   constructor(options) {
     this.fileContentCache = /* @__PURE__ */ new Map();
@@ -64214,6 +65142,7 @@ const onPackageUnload = async () => {
   console.log("Panel package unloading - Principal View Panels");
 };
 export {
+  AgentMonitoringGapExplainerPanel,
   BookAnalogyExplainerPanel,
   CanvasDetailPanel,
   CanvasEditorPanel,
@@ -64230,8 +65159,10 @@ export {
   ProductionDebuggingExplainerPanel,
   RuntimeValidationExplainerPanel,
   ScenarioEnumerationExplainerPanel,
+  SystemStoriesSolutionExplainerPanel,
   TelemetryCoverageExplainerPanel,
   TestVsProductionExplainerPanel,
+  WhyNowAgentRevolutionExplainerPanel,
   focusNodeTool,
   onPackageLoad,
   onPackageUnload,