@openclawcity/become 0.1.0

package/dist/dashboard.js

@@ -0,0 +1,767 @@
+// src/dashboard/theme.ts
+var STAGE_COLORS = {
+  novice: "#64748b",
+  beginner: "#22d3ee",
+  competent: "#34d399",
+  proficient: "#a78bfa",
+  expert: "#fbbf24"
+};
+var STAGE_LABELS = {
+  novice: "Novice",
+  beginner: "Beginner",
+  competent: "Competent",
+  proficient: "Proficient",
+  expert: "Expert"
+};
+var BACKGROUND = {
+  panel: "rgba(10, 12, 20, 0.94)",
+  card: "rgba(255, 255, 255, 0.03)",
+  hover: "rgba(255, 255, 255, 0.06)"
+};
+var BORDER = {
+  subtle: "rgba(0, 212, 255, 0.15)",
+  accent: "rgba(0, 212, 255, 0.3)"
+};
+var ACCENT = "#00d4ff";
+var GOLD = "rgba(255, 215, 0, 0.8)";
+var CELEBRATION_CONFIG = {
+  micro: { particles: 0, spread: 0, duration: 0 },
+  small: { particles: 20, spread: 50, duration: 1e3 },
+  medium: { particles: 60, spread: 70, duration: 1500 },
+  large: { particles: 80, spread: 90, duration: 2e3 },
+  epic: { particles: 120, spread: 120, duration: 4e3 }
+};
+
+// src/dashboard/components/SkillRing.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SkillRing({
+  skill,
+  score,
+  stage,
+  size = 80,
+  showLabel = true,
+  className
+}) {
+  const safeSize = Math.max(24, size);
+  const strokeWidth = Math.max(4, safeSize * 0.08);
+  const radius = (safeSize - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const progress = Math.min(100, Math.max(0, score)) / 100;
+  const offset = circumference * (1 - progress);
+  const color = STAGE_COLORS[stage];
+  const center = safeSize / 2;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: safeSize,
+            height: safeSize,
+            viewBox: `0 0 ${safeSize} ${safeSize}`,
+            role: "img",
+            "aria-label": `${skill}: ${score}/100, ${STAGE_LABELS[stage]}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: "rgba(255,255,255,0.08)",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: color,
+                  strokeWidth,
+                  strokeDasharray: circumference,
+                  strokeDashoffset: offset,
+                  strokeLinecap: "round",
+                  transform: `rotate(-90 ${center} ${center})`,
+                  style: { transition: "stroke-dashoffset 0.6s ease" }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: center,
+                  y: center,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  fill: "white",
+                  fontSize: safeSize * 0.28,
+                  fontWeight: "bold",
+                  fontFamily: "system-ui, sans-serif",
+                  children: score
+                }
+              )
+            ]
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                color: "rgba(255,255,255,0.9)",
+                fontSize: Math.max(10, safeSize * 0.14),
+                fontWeight: 500,
+                fontFamily: "system-ui, sans-serif"
+              },
+              children: skill
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                color,
+                fontSize: Math.max(9, safeSize * 0.12),
+                fontFamily: "system-ui, sans-serif",
+                textTransform: "uppercase",
+                letterSpacing: "0.05em"
+              },
+              children: STAGE_LABELS[stage]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/dashboard/components/Sparkline.tsx
+import { useId } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Sparkline({
+  data,
+  width = 300,
+  height = 40,
+  color = "#22d3ee",
+  showDots = false,
+  className
+}) {
+  if (data.length < 2) {
+    return /* @__PURE__ */ jsx2("svg", { width, height, className, role: "img", "aria-label": "Insufficient data", children: /* @__PURE__ */ jsx2("text", { x: width / 2, y: height / 2, textAnchor: "middle", dominantBaseline: "central", fill: "rgba(255,255,255,0.3)", fontSize: 10, children: "Not enough data" }) });
+  }
+  const strokeColor = Object.prototype.hasOwnProperty.call(STAGE_COLORS, color) ? STAGE_COLORS[color] : color;
+  const padding = 4;
+  const chartWidth = width - padding * 2;
+  const chartHeight = height - padding * 2;
+  const scores = data.map((d) => d.score);
+  let minScore = scores[0];
+  let maxScore = scores[0];
+  for (let i = 1; i < scores.length; i++) {
+    if (scores[i] < minScore) minScore = scores[i];
+    if (scores[i] > maxScore) maxScore = scores[i];
+  }
+  const range = maxScore - minScore || 1;
+  const points = data.map((d, i) => {
+    const x = padding + i / (data.length - 1) * chartWidth;
+    const y = padding + chartHeight - (d.score - minScore) / range * chartHeight;
+    return { x, y };
+  });
+  const polyline = points.map((p) => `${p.x},${p.y}`).join(" ");
+  const fillPoints = [
+    ...points.map((p) => `${p.x},${p.y}`),
+    `${points[points.length - 1].x},${height - padding}`,
+    `${points[0].x},${height - padding}`
+  ].join(" ");
+  const reactId = useId();
+  const gradientId = `sparkline-grad-${reactId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className,
+      role: "img",
+      "aria-label": `Trend: ${scores[0]} to ${scores[scores.length - 1]}`,
+      children: [
+        /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+          /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: strokeColor, stopOpacity: "0.2" }),
+          /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: strokeColor, stopOpacity: "0" })
+        ] }) }),
+        /* @__PURE__ */ jsx2("polygon", { points: fillPoints, fill: `url(#${gradientId})` }),
+        /* @__PURE__ */ jsx2(
+          "polyline",
+          {
+            points: polyline,
+            fill: "none",
+            stroke: strokeColor,
+            strokeWidth: 1.5,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        showDots && points.map((p, i) => /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            cx: p.x,
+            cy: p.y,
+            r: 2,
+            fill: strokeColor
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            cx: points[points.length - 1].x,
+            cy: points[points.length - 1].y,
+            r: 2.5,
+            fill: strokeColor
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/core/validation.ts
+var MAX_AGENT_ID_LENGTH = 200;
+var AGENT_ID_REGEX = /^[a-zA-Z0-9_.:@/-]+$/;
+function validateAgentId(agentId) {
+  if (!agentId || typeof agentId !== "string") {
+    throw new Error("agentId is required and must be a non-empty string");
+  }
+  if (agentId.length > MAX_AGENT_ID_LENGTH) {
+    throw new Error(`agentId too long (max ${MAX_AGENT_ID_LENGTH} chars)`);
+  }
+  if (!AGENT_ID_REGEX.test(agentId)) {
+    throw new Error("agentId contains invalid characters (allowed: alphanumeric, _ . : @ / -)");
+  }
+}
+
+// src/core/milestones.ts
+var BUILT_IN = {
+  skill_discovered: { threshold: 1, description: "First score for a skill" },
+  skill_competent: { threshold: 36, description: "Reached competent stage" },
+  skill_proficient: { threshold: 56, description: "Reached proficient stage" },
+  skill_expert: { threshold: 76, description: "Reached expert stage" },
+  first_artifact: { threshold: 1, description: "Created first output" },
+  ten_artifacts: { threshold: 10, description: "Created 10 outputs" },
+  first_collab: { threshold: 1, description: "Completed first collaboration" },
+  first_teaching: { threshold: 1, description: "Taught another agent for the first time" },
+  first_peer_review: { threshold: 1, description: "Gave first peer review" },
+  identity_shift: { threshold: 1, description: "Agent evolved its identity" },
+  norm_setter: { threshold: 1, description: "Started a cultural norm adopted by 3+ agents" }
+};
+var MilestoneDetector = class {
+  constructor(adapter) {
+    this.adapter = adapter;
+  }
+  custom = {};
+  register(type, config) {
+    this.custom[type] = config;
+  }
+  async check(agentId, scores) {
+    validateAgentId(agentId);
+    const awarded = [];
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    const globalChecked = /* @__PURE__ */ new Set();
+    for (const score of scores) {
+      if (score.score > 0) {
+        const type = `skill_discovered:${score.skill}`;
+        if (await this.tryAward(agentId, type, 1, score.skill, now)) {
+          awarded.push({ agent_id: agentId, milestone_type: type, threshold: 1, skill: score.skill, achieved_at: now });
+        }
+      }
+      const stageChecks = [
+        ["skill_competent", 36],
+        ["skill_proficient", 56],
+        ["skill_expert", 76]
+      ];
+      for (const [prefix, threshold] of stageChecks) {
+        if (score.score >= threshold) {
+          const type = `${prefix}:${score.skill}`;
+          if (await this.tryAward(agentId, type, threshold, score.skill, now)) {
+            awarded.push({ agent_id: agentId, milestone_type: type, threshold, skill: score.skill, achieved_at: now });
+          }
+        }
+      }
+      const globalMilestones = [
+        ["first_artifact", 1, score.evidence.artifact_count >= 1],
+        ["ten_artifacts", 10, score.evidence.artifact_count >= 10],
+        ["first_collab", 1, score.evidence.collab_count >= 1],
+        ["first_teaching", 1, score.evidence.teaching_events >= 1],
+        ["first_peer_review", 1, score.evidence.peer_reviews_given >= 1]
+      ];
+      for (const [type, threshold, eligible] of globalMilestones) {
+        if (eligible && !globalChecked.has(type)) {
+          globalChecked.add(type);
+          if (await this.tryAward(agentId, type, threshold, void 0, now)) {
+            awarded.push({ agent_id: agentId, milestone_type: type, threshold, achieved_at: now });
+          }
+        }
+      }
+    }
+    return awarded;
+  }
+  async tryAward(agentId, milestoneType, threshold, skill, now) {
+    const exists = await this.adapter.hasMilestone(agentId, milestoneType, skill);
+    if (exists) return false;
+    return this.adapter.saveMilestone({
+      agent_id: agentId,
+      milestone_type: milestoneType,
+      threshold,
+      skill,
+      achieved_at: now
+    });
+  }
+  static celebrationTier(milestoneType, threshold) {
+    if (milestoneType.startsWith("skill_expert")) return "epic";
+    if (milestoneType.startsWith("skill_proficient")) return "large";
+    if (milestoneType.startsWith("skill_competent")) return "medium";
+    if (milestoneType.startsWith("skill_discovered")) return "small";
+    if (threshold !== void 0) {
+      if (threshold >= 50) return "large";
+      if (threshold >= 10) return "medium";
+    }
+    return "small";
+  }
+  static getBuiltInMilestones() {
+    return { ...BUILT_IN };
+  }
+};
+
+// src/dashboard/components/MilestoneTimeline.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function formatMilestoneLabel(type) {
+  if (type.includes(":")) {
+    const [prefix, skill] = type.split(":");
+    const stage = prefix.replace("skill_", "");
+    return `${stage.charAt(0).toUpperCase() + stage.slice(1)}: ${skill}`;
+  }
+  return type.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function tierColor(tier) {
+  switch (tier) {
+    case "epic":
+      return GOLD;
+    case "large":
+      return STAGE_COLORS.proficient;
+    case "medium":
+      return STAGE_COLORS.competent;
+    case "small":
+      return STAGE_COLORS.beginner;
+    default:
+      return "rgba(255,255,255,0.3)";
+  }
+}
+function formatDate(iso) {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  } catch {
+    return "";
+  }
+}
+function MilestoneTimeline({
+  milestones,
+  limit = 10,
+  className
+}) {
+  const sorted = [...milestones].sort((a, b) => b.achieved_at.localeCompare(a.achieved_at)).slice(0, limit);
+  if (sorted.length === 0) {
+    return /* @__PURE__ */ jsx3("div", { className, style: { color: "rgba(255,255,255,0.4)", fontSize: 13, fontFamily: "system-ui, sans-serif", padding: 16 }, children: "No milestones yet" });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className, style: { position: "relative", paddingLeft: 20 }, role: "list", "aria-label": "Milestone timeline", children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 7,
+          top: 4,
+          bottom: 4,
+          width: 2,
+          background: "rgba(255,255,255,0.1)",
+          borderRadius: 1
+        }
+      }
+    ),
+    sorted.map((m, i) => {
+      const tier = MilestoneDetector.celebrationTier(m.milestone_type, m.threshold);
+      const color = tierColor(tier);
+      return /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          role: "listitem",
+          style: {
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 10,
+            marginBottom: 12,
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: -16,
+                  top: 4,
+                  width: 10,
+                  height: 10,
+                  borderRadius: "50%",
+                  background: color,
+                  border: `2px solid ${color}`,
+                  boxShadow: tier === "epic" ? `0 0 8px ${color}` : void 0
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    color: "rgba(255,255,255,0.9)",
+                    fontSize: 13,
+                    fontWeight: 500,
+                    fontFamily: "system-ui, sans-serif"
+                  },
+                  children: formatMilestoneLabel(m.milestone_type)
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    color: "rgba(255,255,255,0.4)",
+                    fontSize: 11,
+                    fontFamily: "system-ui, sans-serif",
+                    marginTop: 2
+                  },
+                  children: formatDate(m.achieved_at)
+                }
+              )
+            ] })
+          ]
+        },
+        `${m.milestone_type}-${m.achieved_at}-${i}`
+      );
+    })
+  ] });
+}
+
+// src/dashboard/components/GrowthCard.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function GrowthCard({
+  agentId,
+  agentName,
+  scores,
+  scoreHistory,
+  milestones,
+  className
+}) {
+  const sortedScores = [...scores].sort((a, b) => b.score - a.score);
+  const avgScore = scores.length > 0 ? Math.round(scores.reduce((sum, s) => sum + s.score, 0) / scores.length) : 0;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className,
+      style: {
+        background: BACKGROUND.panel,
+        border: `1px solid ${BORDER.subtle}`,
+        borderRadius: 12,
+        padding: 20,
+        fontFamily: "system-ui, sans-serif",
+        color: "white",
+        maxWidth: 380,
+        backdropFilter: "blur(20px) saturate(1.5)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs4("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsx4("div", { style: { fontSize: 16, fontWeight: 600, color: "rgba(255,255,255,0.95)" }, children: agentName ?? agentId }),
+          /* @__PURE__ */ jsxs4("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.4)", marginTop: 2 }, children: [
+            scores.length,
+            " skill",
+            scores.length !== 1 ? "s" : "",
+            " \xB7 avg score ",
+            avgScore
+          ] })
+        ] }),
+        sortedScores.length > 0 && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 16,
+              justifyContent: "center",
+              marginBottom: 20,
+              padding: "12px 0",
+              borderTop: `1px solid ${BORDER.subtle}`,
+              borderBottom: `1px solid ${BORDER.subtle}`
+            },
+            children: sortedScores.slice(0, 5).map((s) => /* @__PURE__ */ jsx4(
+              SkillRing,
+              {
+                skill: s.skill,
+                score: s.score,
+                stage: s.dreyfus_stage,
+                size: 64
+              },
+              s.skill
+            ))
+          }
+        ),
+        scoreHistory && sortedScores.length > 0 && /* @__PURE__ */ jsx4("div", { style: { marginBottom: 16 }, children: sortedScores.slice(0, 3).map((s) => {
+          const history = scoreHistory.get(s.skill);
+          if (!history || history.length < 2) return null;
+          return /* @__PURE__ */ jsxs4("div", { style: { marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsx4("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.5)", marginBottom: 2 }, children: s.skill }),
+            /* @__PURE__ */ jsx4(
+              Sparkline,
+              {
+                data: history,
+                width: 340,
+                height: 32,
+                color: s.dreyfus_stage
+              }
+            )
+          ] }, s.skill);
+        }) }),
+        milestones && milestones.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx4("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.5)", marginBottom: 8, fontWeight: 500 }, children: "Recent Milestones" }),
+          /* @__PURE__ */ jsx4(MilestoneTimeline, { milestones, limit: 5 })
+        ] }),
+        scores.length === 0 && /* @__PURE__ */ jsx4("div", { style: { textAlign: "center", padding: 24, color: "rgba(255,255,255,0.3)", fontSize: 13 }, children: "No skills scored yet" })
+      ]
+    }
+  );
+}
+
+// src/dashboard/components/PeerGraph.tsx
+import { useMemo } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function PeerGraph({
+  nodes,
+  edges,
+  width = 400,
+  height = 300,
+  className
+}) {
+  const layout = useMemo(() => {
+    const cx = width / 2;
+    const cy = height / 2;
+    const radius = Math.min(cx, cy) - 40;
+    return nodes.map((node, i) => {
+      const angle = 2 * Math.PI * i / nodes.length - Math.PI / 2;
+      return {
+        ...node,
+        x: cx + radius * Math.cos(angle),
+        y: cy + radius * Math.sin(angle)
+      };
+    });
+  }, [nodes, width, height]);
+  const nodeMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const n of layout) map.set(n.id, n);
+    return map;
+  }, [layout]);
+  const { edgeCounts, dedupedEdges, nodeEdgeCounts } = useMemo(() => {
+    const counts = /* @__PURE__ */ new Map();
+    const deduped = [];
+    const seen = /* @__PURE__ */ new Set();
+    const nodeCounts = /* @__PURE__ */ new Map();
+    for (const e of edges) {
+      const key = [e.from_agent, e.to_agent].sort().join("\u2194");
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+      nodeCounts.set(e.from_agent, (nodeCounts.get(e.from_agent) ?? 0) + 1);
+      nodeCounts.set(e.to_agent, (nodeCounts.get(e.to_agent) ?? 0) + 1);
+    }
+    for (const e of edges) {
+      const key = [e.from_agent, e.to_agent].sort().join("\u2194");
+      if (!seen.has(key)) {
+        seen.add(key);
+        deduped.push({ key, edge: e, count: counts.get(key) ?? 1 });
+      }
+    }
+    return { edgeCounts: counts, dedupedEdges: deduped, nodeEdgeCounts: nodeCounts };
+  }, [edges]);
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ jsx5("svg", { width, height, className, children: /* @__PURE__ */ jsx5("text", { x: width / 2, y: height / 2, textAnchor: "middle", fill: "rgba(255,255,255,0.3)", fontSize: 13, children: "No agents to display" }) });
+  }
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className,
+      role: "img",
+      "aria-label": `Learning network: ${nodes.length} agents, ${edges.length} connections`,
+      children: [
+        dedupedEdges.map(({ key, edge, count }) => {
+          const from = nodeMap.get(edge.from_agent);
+          const to = nodeMap.get(edge.to_agent);
+          if (!from || !to) return null;
+          const strokeWidth = Math.min(4, 0.5 + count * 0.5);
+          return /* @__PURE__ */ jsx5(
+            "line",
+            {
+              x1: from.x,
+              y1: from.y,
+              x2: to.x,
+              y2: to.y,
+              stroke: ACCENT,
+              strokeWidth,
+              strokeOpacity: 0.3 + Math.min(0.4, count * 0.1)
+            },
+            `edge-${key}`
+          );
+        }),
+        layout.map((node) => {
+          const color = node.stage ? STAGE_COLORS[node.stage] : ACCENT;
+          const edgeCount = nodeEdgeCounts.get(node.id) ?? 0;
+          const radius = Math.min(20, 8 + edgeCount * 1.5);
+          return /* @__PURE__ */ jsxs5("g", { children: [
+            /* @__PURE__ */ jsx5("circle", { cx: node.x, cy: node.y, r: radius + 4, fill: color, opacity: 0.1 }),
+            /* @__PURE__ */ jsx5("circle", { cx: node.x, cy: node.y, r: radius, fill: color, opacity: 0.8 }),
+            /* @__PURE__ */ jsx5(
+              "text",
+              {
+                x: node.x,
+                y: node.y + radius + 14,
+                textAnchor: "middle",
+                fill: "rgba(255,255,255,0.7)",
+                fontSize: 10,
+                fontFamily: "system-ui, sans-serif",
+                children: node.label ?? node.id
+              }
+            )
+          ] }, node.id);
+        })
+      ]
+    }
+  );
+}
+
+// src/dashboard/components/PopulationView.tsx
+import { useMemo as useMemo2 } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function PopulationView({ agents, className }) {
+  const { allScores, avgScore, stageDist, totalSkills, topSkills } = useMemo2(() => {
+    const scores = agents.flatMap((a) => a.scores);
+    const avg = scores.length > 0 ? Math.round(scores.reduce((s, sc) => s + sc.score, 0) / scores.length) : 0;
+    const dist = {
+      novice: 0,
+      beginner: 0,
+      competent: 0,
+      proficient: 0,
+      expert: 0
+    };
+    for (const s of scores) {
+      dist[s.dreyfus_stage]++;
+    }
+    const skillCounts = /* @__PURE__ */ new Map();
+    for (const s of scores) {
+      skillCounts.set(s.skill, (skillCounts.get(s.skill) ?? 0) + 1);
+    }
+    const top = [...skillCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 8);
+    return { allScores: scores, avgScore: avg, stageDist: dist, totalSkills: scores.length, topSkills: top };
+  }, [agents]);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className,
+      style: {
+        background: BACKGROUND.panel,
+        border: `1px solid ${BORDER.subtle}`,
+        borderRadius: 12,
+        padding: 20,
+        fontFamily: "system-ui, sans-serif",
+        color: "white",
+        maxWidth: 500,
+        backdropFilter: "blur(20px) saturate(1.5)"
+      },
+      children: [
+        /* @__PURE__ */ jsx6("div", { style: { fontSize: 16, fontWeight: 600, marginBottom: 16 }, children: "Population Overview" }),
+        /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 24, marginBottom: 20 }, children: [
+          /* @__PURE__ */ jsx6(Stat, { label: "Agents", value: agents.length }),
+          /* @__PURE__ */ jsx6(Stat, { label: "Skills tracked", value: totalSkills }),
+          /* @__PURE__ */ jsx6(Stat, { label: "Avg score", value: avgScore })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { style: { marginBottom: 20 }, children: [
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.5)", marginBottom: 8 }, children: "Stage Distribution" }),
+          totalSkills > 0 ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+            /* @__PURE__ */ jsx6("div", { style: { display: "flex", height: 20, borderRadius: 4, overflow: "hidden" }, children: Object.entries(stageDist).filter(([, count]) => count > 0).map(([stage, count]) => /* @__PURE__ */ jsx6(
+              "div",
+              {
+                style: {
+                  width: `${count / totalSkills * 100}%`,
+                  background: STAGE_COLORS[stage],
+                  minWidth: 2
+                },
+                title: `${STAGE_LABELS[stage]}: ${count}`
+              },
+              stage
+            )) }),
+            /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 12, marginTop: 6, flexWrap: "wrap" }, children: Object.entries(stageDist).filter(([, count]) => count > 0).map(([stage, count]) => /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+              /* @__PURE__ */ jsx6("div", { style: { width: 8, height: 8, borderRadius: 2, background: STAGE_COLORS[stage] } }),
+              /* @__PURE__ */ jsxs6("span", { style: { fontSize: 11, color: "rgba(255,255,255,0.6)" }, children: [
+                STAGE_LABELS[stage],
+                " (",
+                count,
+                ")"
+              ] })
+            ] }, stage)) })
+          ] }) : /* @__PURE__ */ jsx6("div", { style: { color: "rgba(255,255,255,0.3)", fontSize: 12 }, children: "No data" })
+        ] }),
+        topSkills.length > 0 && /* @__PURE__ */ jsxs6("div", { children: [
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "rgba(255,255,255,0.5)", marginBottom: 8 }, children: "Most Popular Skills" }),
+          topSkills.map(([skill, count]) => {
+            const pct = totalSkills > 0 ? count / totalSkills * 100 : 0;
+            return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [
+              /* @__PURE__ */ jsx6("div", { style: { width: 80, fontSize: 12, color: "rgba(255,255,255,0.7)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: skill }),
+              /* @__PURE__ */ jsx6("div", { style: { flex: 1, height: 6, background: "rgba(255,255,255,0.06)", borderRadius: 3 }, children: /* @__PURE__ */ jsx6("div", { style: { width: `${pct}%`, height: "100%", background: "#22d3ee", borderRadius: 3, minWidth: 2 } }) }),
+              /* @__PURE__ */ jsx6("div", { style: { width: 24, fontSize: 11, color: "rgba(255,255,255,0.4)", textAlign: "right" }, children: count })
+            ] }, skill);
+          })
+        ] })
+      ]
+    }
+  );
+}
+function Stat({ label, value }) {
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx6("div", { style: { fontSize: 22, fontWeight: 700, color: "rgba(255,255,255,0.95)" }, children: value }),
+    /* @__PURE__ */ jsx6("div", { style: { fontSize: 11, color: "rgba(255,255,255,0.4)" }, children: label })
+  ] });
+}
+export {
+  ACCENT,
+  BACKGROUND,
+  BORDER,
+  CELEBRATION_CONFIG,
+  GOLD,
+  GrowthCard,
+  MilestoneTimeline,
+  PeerGraph,
+  PopulationView,
+  STAGE_COLORS,
+  STAGE_LABELS,
+  SkillRing,
+  Sparkline
+};
+//# sourceMappingURL=dashboard.js.map