@dilipod/ui 0.4.21 → 0.4.23

package/dist/index.js

@@ -426,6 +426,7 @@ __export(index_exports, {
   EmptyState: () => EmptyState,
   ErrorState: () => ErrorState,
   FilePreview: () => FilePreview,
+  FlowchartDiagram: () => FlowchartDiagram,
   FormField: () => FormField,
   IconBox: () => IconBox,
   ImpactMetricsForm: () => ImpactMetricsForm,
@@ -517,6 +518,7 @@ __export(index_exports, {
   TooltipTrigger: () => TooltipTrigger,
   UsageBar: () => UsageBar,
   UsageChart: () => UsageChart,
+  WorkerSpec: () => WorkerSpec,
   WorkflowFlow: () => WorkflowFlow,
   WorkflowViewer: () => WorkflowViewer,
   alertVariants: () => alertVariants,
@@ -4261,6 +4263,7 @@ function ScenarioCard({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-8 h-8 rounded-full flex items-center justify-center shrink-0", config.bgColor), children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 16, weight: "fill", className: config.color }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 pt-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", size: "sm", className: "font-medium", children: config.label }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-[var(--black)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "When:" }),
           " ",
@@ -4641,6 +4644,7 @@ function ImpactMetricsForm({
   const impliedFrequencyPerMonth = Math.round(impliedFrequencyPerYear / 12);
   const laborSavingsPerYear = metrics.fte_equivalent * HOURS_PER_FTE_YEAR * metrics.hourly_rate_euros;
   const netAnnualSavings = laborSavingsPerYear - workerCostPerYear;
+  const roiPercentage = workerCostPerYear > 0 ? netAnnualSavings / workerCostPerYear * 100 : 0;
   return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("border-[var(--cyan)]/20 bg-gradient-to-br from-white to-[var(--cyan)]/5", className), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-5", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: "Impact Metrics (ROI)" }),
@@ -4758,17 +4762,32 @@ function ImpactMetricsForm({
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [
           "\u20AC",
           laborSavingsPerYear.toLocaleString(void 0, { maximumFractionDigits: 0 }),
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: "labor saved" }),
           " \u2212 \u20AC",
-          workerCostPerYear
+          workerCostPerYear,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-60", children: "worker cost" })
         ] })
       ] })
     ] }),
-    impliedFrequencyPerYear > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mt-4 pt-3 border-t border-border/50", children: [
-      "Implied: ~",
-      impliedFrequencyPerMonth,
-      "\xD7/month (",
-      impliedFrequencyPerYear,
-      "\xD7/year)"
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 pt-3 border-t border-border/50 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn(
+        "text-sm",
+        roiPercentage > 0 ? "font-bold text-[var(--cyan)]" : "text-muted-foreground"
+      ), children: [
+        "ROI: ",
+        roiPercentage >= 0 ? "+" : "",
+        roiPercentage.toLocaleString(void 0, { maximumFractionDigits: 0 }),
+        "%"
+      ] }),
+      impliedFrequencyPerYear > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "Implied: ~",
+        impliedFrequencyPerMonth,
+        "\xD7/month (",
+        impliedFrequencyPerYear,
+        "\xD7/year)"
+      ] })
     ] })
   ] }) });
 }
@@ -6124,6 +6143,422 @@ function WorkflowViewer({
     ] })
   ] });
 }
+function parseMermaidFlowchart(mermaid) {
+  const nodes = /* @__PURE__ */ new Map();
+  const edges = [];
+  const lines = mermaid.split(/\\n|\n/).map((l) => l.trim()).filter((l) => l && !l.startsWith("flowchart") && !l.startsWith("graph"));
+  function parseNodeDef(str) {
+    const decisionMatch = str.match(/^([A-Za-z0-9_]+)\{(.+?)\}$/);
+    if (decisionMatch) return { id: decisionMatch[1], label: decisionMatch[2], type: "decision" };
+    const bracketMatch = str.match(/^([A-Za-z0-9_]+)\[?\(?\[?(.+?)\]?\)?\]?$/);
+    if (bracketMatch) {
+      const label = bracketMatch[2];
+      const isTerminal = /^(start|end|begin|finish|done)$/i.test(label);
+      return { id: bracketMatch[1], label, type: isTerminal ? "terminal" : "action" };
+    }
+    return { id: str.trim() };
+  }
+  for (const line of lines) {
+    const edgeMatch = line.match(/^(.+?)\s*-->(?:\|(.+?)\|)?\s*(.+)$/);
+    if (!edgeMatch) continue;
+    const leftRaw = edgeMatch[1].trim();
+    const edgeLabel = edgeMatch[2]?.trim();
+    const rightRaw = edgeMatch[3].trim();
+    const left = parseNodeDef(leftRaw);
+    const right = parseNodeDef(rightRaw);
+    if (left.label && !nodes.has(left.id)) {
+      nodes.set(left.id, { id: left.id, label: left.label, type: left.type || "action" });
+    }
+    if (right.label && !nodes.has(right.id)) {
+      nodes.set(right.id, { id: right.id, label: right.label, type: right.type || "action" });
+    }
+    if (!nodes.has(left.id)) {
+      nodes.set(left.id, { id: left.id, label: left.id, type: "action" });
+    }
+    if (!nodes.has(right.id)) {
+      nodes.set(right.id, { id: right.id, label: right.id, type: "action" });
+    }
+    edges.push({ from: left.id, to: right.id, label: edgeLabel });
+  }
+  return { nodes: Array.from(nodes.values()), edges };
+}
+function findMergePoint(branchStarts, outgoing) {
+  const reachable = /* @__PURE__ */ new Map();
+  for (const start of branchStarts) {
+    const q2 = [start];
+    const seen2 = /* @__PURE__ */ new Set();
+    while (q2.length > 0) {
+      const id = q2.shift();
+      if (seen2.has(id)) continue;
+      seen2.add(id);
+      if (!reachable.has(id)) reachable.set(id, /* @__PURE__ */ new Set());
+      reachable.get(id).add(start);
+      const outs = outgoing.get(id) || [];
+      for (const e of outs) q2.push(e.to);
+    }
+  }
+  const allBranches = new Set(branchStarts);
+  const q = [branchStarts[0]];
+  const seen = /* @__PURE__ */ new Set();
+  while (q.length > 0) {
+    const id = q.shift();
+    if (seen.has(id)) continue;
+    seen.add(id);
+    if (!allBranches.has(id) && reachable.get(id)?.size === branchStarts.length) {
+      return id;
+    }
+    const outs = outgoing.get(id) || [];
+    for (const e of outs) q.push(e.to);
+  }
+  return null;
+}
+function buildLayout(startId, outgoing, incoming, nodeMap, visited) {
+  const items = [];
+  let currentId = startId;
+  while (currentId) {
+    if (visited.has(currentId)) break;
+    const node = nodeMap.get(currentId);
+    if (!node) break;
+    const outs = outgoing.get(currentId) || [];
+    if (outs.length <= 1) {
+      visited.add(currentId);
+      items.push({ type: "node", nodeId: currentId });
+      if (outs.length === 1) {
+        const nextId = outs[0].to;
+        if (visited.has(nextId)) break;
+        items.push({ type: "arrow", label: outs[0].label });
+        currentId = nextId;
+      } else {
+        currentId = null;
+      }
+    } else {
+      visited.add(currentId);
+      items.push({ type: "node", nodeId: currentId });
+      const branchStarts = outs.map((e) => e.to);
+      const mergeId = findMergePoint(branchStarts, outgoing);
+      const branches = [];
+      for (const edge of outs) {
+        if (visited.has(edge.to) && edge.to !== mergeId) {
+          branches.push({ label: edge.label, items: [] });
+          continue;
+        }
+        const branchItems = buildLayout(edge.to, outgoing, incoming, nodeMap, visited);
+        branches.push({ label: edge.label, items: branchItems });
+      }
+      items.push({ type: "branch", decision: currentId, branches, mergeId });
+      if (mergeId && !visited.has(mergeId)) {
+        items.push({ type: "arrow" });
+        currentId = mergeId;
+      } else {
+        currentId = null;
+      }
+    }
+  }
+  return items;
+}
+function FlowArrow({ label }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded mb-0.5", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-gray-300" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-0 h-0 border-l-[4px] border-r-[4px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-300" })
+  ] });
+}
+function FlowNodeBox({ node }) {
+  if (node.type === "decision") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "bg-amber-50 border-2 border-amber-300 rounded-lg px-4 py-2.5 text-xs font-medium text-amber-800 text-center my-1",
+        style: { minWidth: "120px" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-400 mr-1", children: "\u25C7" }),
+          node.label
+        ]
+      }
+    );
+  }
+  if (node.type === "terminal") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-100 border border-gray-200 rounded-full px-5 py-1.5 text-xs font-medium text-gray-500 text-center my-1", children: node.label });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200 rounded-sm px-4 py-2 text-xs font-medium text-[var(--black)] text-center shadow-sm my-1 max-w-[220px]", children: node.label });
+}
+function RenderLayoutItems({ items, nodeMap }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((item, i) => {
+    if (item.type === "node") {
+      const node = nodeMap.get(item.nodeId);
+      if (!node) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(FlowNodeBox, { node }, `node-${item.nodeId}`);
+    }
+    if (item.type === "arrow") {
+      return /* @__PURE__ */ jsxRuntime.jsx(FlowArrow, { label: item.label }, `arrow-${i}`);
+    }
+    if (item.type === "branch") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-gray-300" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-center gap-6 w-full", children: item.branches.map((branch, j) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center min-w-[100px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+            branch.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded mb-1", children: branch.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-0 h-0 border-l-[4px] border-r-[4px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-300" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsx(RenderLayoutItems, { items: branch.items, nodeMap }) })
+        ] }, j)) }),
+        item.mergeId && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-gray-300" })
+      ] }, `branch-${item.decision}-${i}`);
+    }
+    return null;
+  }) });
+}
+function FlowchartDiagram({ mermaid, className }) {
+  const { nodes, edges } = parseMermaidFlowchart(mermaid);
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs bg-white border border-gray-100 rounded-sm p-3 overflow-x-auto whitespace-pre-wrap", children: mermaid });
+  }
+  const outgoing = /* @__PURE__ */ new Map();
+  const incoming = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (!outgoing.has(edge.from)) outgoing.set(edge.from, []);
+    outgoing.get(edge.from).push(edge);
+    if (!incoming.has(edge.to)) incoming.set(edge.to, []);
+    incoming.get(edge.to).push(edge);
+  }
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const roots = nodes.filter((n) => !incoming.has(n.id) || incoming.get(n.id).length === 0);
+  const startId = roots.length > 0 ? roots[0].id : nodes[0].id;
+  const visited = /* @__PURE__ */ new Set();
+  const layout = buildLayout(startId, outgoing, incoming, nodeMap, visited);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(RenderLayoutItems, { items: layout, nodeMap }) }) });
+}
+var frequencyLabels = {
+  multiple_daily: "occurrence",
+  daily: "day",
+  weekly: "week",
+  monthly: "month",
+  quarterly: "quarter",
+  yearly: "year"
+};
+function SectionHeader({
+  icon,
+  title,
+  count: count2,
+  expanded,
+  onToggle,
+  iconColor = "text-[var(--cyan)]"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: onToggle,
+      className: "flex items-center gap-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wide hover:text-[var(--black)] transition-colors w-full",
+      children: [
+        expanded ? /* @__PURE__ */ jsxRuntime.jsx(react_star.CaretDown, { size: 12 }) : /* @__PURE__ */ jsxRuntime.jsx(react_star.CaretRight, { size: 12 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconColor, children: icon }),
+        title,
+        count2 !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground font-normal", children: [
+          "(",
+          count2,
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+function WorkerSpec({ documentation, className }) {
+  const [expandedSections, setExpandedSections] = React51.useState(
+    /* @__PURE__ */ new Set(["goal", "scope", "steps", "diagram", "impact", "requirements", "edge_cases"])
+  );
+  const toggleSection = (section) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+  if (!documentation) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-6 rounded-sm border border-dashed border-gray-300 bg-gray-50/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-sm bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(react_star.Robot, { size: 20, className: "text-gray-400" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-[var(--black)]", children: "Worker Spec Pending" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "The final specification will be generated automatically after the documentation is approved." })
+      ] })
+    ] }) });
+  }
+  const freqLabel = documentation.expected_impact?.frequency ? frequencyLabels[documentation.expected_impact.frequency] || documentation.expected_impact.frequency : "occurrence";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+    documentation.goal && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SectionHeader,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(react_star.Target, { size: 12, weight: "fill" }),
+          title: "Goal",
+          expanded: expandedSections.has("goal"),
+          onToggle: () => toggleSection("goal")
+        }
+      ),
+      expandedSections.has("goal") && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground leading-relaxed pl-5 mt-2", children: documentation.goal })
+    ] }),
+    documentation.scope && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SectionHeader,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(react_star.Crosshair, { size: 12, weight: "fill" }),
+          title: "Scope",
+          expanded: expandedSections.has("scope"),
+          onToggle: () => toggleSection("scope")
+        }
+      ),
+      expandedSections.has("scope") && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground leading-relaxed pl-5 mt-2", children: documentation.scope })
+    ] }),
+    documentation.steps && documentation.steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SectionHeader,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(react_star.ListNumbers, { size: 12, weight: "fill" }),
+          title: "Steps",
+          count: documentation.steps.length,
+          expanded: expandedSections.has("steps"),
+          onToggle: () => toggleSection("steps")
+        }
+      ),
+      expandedSections.has("steps") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 pl-5 mt-2", children: documentation.steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-6 h-6 rounded-sm bg-[var(--cyan)]/10 flex items-center justify-center text-xs font-bold text-[var(--cyan)] shrink-0 mt-0.5", children: step.step || i + 1 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-[var(--black)]", children: step.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-0.5", children: step.description }),
+          step.tools_used && step.tools_used.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-1.5", children: step.tools_used.map((tool, j) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-sm bg-gray-100 text-[10px] font-medium text-gray-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react_star.Wrench, { size: 10 }),
+            tool
+          ] }, j)) })
+        ] })
+      ] }, i)) })
+    ] }),
+    documentation.diagram && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SectionHeader,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(react_star.TreeStructure, { size: 12, weight: "fill" }),
+          title: "Workflow Diagram",
+          expanded: expandedSections.has("diagram"),
+          onToggle: () => toggleSection("diagram"),
+          iconColor: "text-purple-500"
+        }
+      ),
+      expandedSections.has("diagram") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-5 mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-100 rounded-sm p-4 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(FlowchartDiagram, { mermaid: documentation.diagram }) }) })
+    ] }),
+    documentation.expected_impact && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SectionHeader,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(react_star.Lightning, { size: 12, weight: "fill" }),
+          title: "Expected Impact",
+          expanded: expandedSections.has("impact"),
+          onToggle: () => toggleSection("impact"),
+          iconColor: "text-purple-500"
+        }
+      ),
+      expandedSections.has("impact") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-5 mt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-emerald-50/50 border border-emerald-100 rounded-sm p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-3 mb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-sm p-3 border border-emerald-100 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react_star.Clock, { size: 18, className: "text-emerald-600 mx-auto mb-1" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-bold text-[var(--black)]", children: [
+              documentation.expected_impact.time_saved_per_occurrence_minutes,
+              " min"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-muted-foreground", children: [
+              "saved per ",
+              freqLabel
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-sm p-3 border border-emerald-100 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react_star.TrendUp, { size: 18, className: "text-emerald-600 mx-auto mb-1" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-bold text-[var(--black)]", children: [
+              documentation.expected_impact.yearly_hours_saved,
+              "h"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "saved per year" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-sm p-3 border border-emerald-100 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react_star.CurrencyEur, { size: 18, className: "text-emerald-600 mx-auto mb-1" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-bold text-[var(--black)]", children: [
+              "\u20AC",
+              documentation.expected_impact.yearly_cost_savings_euros.toLocaleString()
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: "estimated yearly savings" })
+          ] })
+        ] }),
+        documentation.expected_impact.qualitative_benefits && documentation.expected_impact.qualitative_benefits.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: documentation.expected_impact.qualitative_benefits.map((benefit, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-sm text-emerald-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react_star.Sparkle, { size: 14, className: "text-emerald-500 shrink-0 mt-0.5", weight: "fill" }),
+          benefit
+        ] }, i)) })
+      ] }) })
+    ] }),
+    (documentation.technical_requirements && documentation.technical_requirements.length > 0 || documentation.integration_points && documentation.integration_points.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SectionHeader,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(react_star.Plugs, { size: 12, weight: "fill" }),
+          title: "Requirements & Integrations",
+          expanded: expandedSections.has("requirements"),
+          onToggle: () => toggleSection("requirements")
+        }
+      ),
+      expandedSections.has("requirements") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-2 gap-4 pl-5 mt-2", children: [
+        documentation.technical_requirements && documentation.technical_requirements.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Technical Requirements" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1.5", children: documentation.technical_requirements.map((req, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react_star.Wrench, { size: 12, className: "text-gray-400 shrink-0 mt-1" }),
+            req
+          ] }, i)) })
+        ] }),
+        documentation.integration_points && documentation.integration_points.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Integration Points" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1.5", children: documentation.integration_points.map((point, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react_star.Plugs, { size: 12, className: "text-gray-400 shrink-0 mt-1" }),
+            point
+          ] }, i)) })
+        ] })
+      ] })
+    ] }),
+    documentation.edge_cases_handled && documentation.edge_cases_handled.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SectionHeader,
+        {
+          icon: /* @__PURE__ */ jsxRuntime.jsx(react_star.ShieldCheck, { size: 12, weight: "fill" }),
+          title: "Edge Cases Handled",
+          count: documentation.edge_cases_handled.length,
+          expanded: expandedSections.has("edge_cases"),
+          onToggle: () => toggleSection("edge_cases"),
+          iconColor: "text-amber-500"
+        }
+      ),
+      expandedSections.has("edge_cases") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 pl-5 mt-2", children: documentation.edge_cases_handled.map((ec, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm p-3 bg-gray-50 rounded-sm border border-gray-100", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-[var(--black)]", children: ec.scenario }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground mt-1", children: [
+          "\u2192 ",
+          ec.handling
+        ] })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-3 border-t border-gray-100 flex items-center gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", size: "sm", children: [
+        "v",
+        documentation.version
+      ] }),
+      documentation.model_used && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: documentation.model_used })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "Updated ",
+        new Date(documentation.updated_at).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+      ] })
+    ] })
+  ] }) });
+}
 
 // src/index.ts
 __reExport(index_exports, icons_exports);
@@ -6192,6 +6627,7 @@ exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
 exports.ErrorState = ErrorState;
 exports.FilePreview = FilePreview;
+exports.FlowchartDiagram = FlowchartDiagram;
 exports.FormField = FormField;
 exports.IconBox = IconBox;
 exports.ImpactMetricsForm = ImpactMetricsForm;
@@ -6283,6 +6719,7 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.UsageBar = UsageBar;
 exports.UsageChart = UsageChart;
+exports.WorkerSpec = WorkerSpec;
 exports.WorkflowFlow = WorkflowFlow;
 exports.WorkflowViewer = WorkflowViewer;
 exports.alertVariants = alertVariants;