From 78c8ce260228be0714c137a273d6d402adca7f5a Mon Sep 17 00:00:00 2001
From: Lum1104 <linyux1104@163.com>
Date: Sat, 28 Mar 2026 18:46:49 +0800
Subject: [PATCH] feat(dashboard): add file type breakdown to ProjectOverview

Show a categorized count of node types (Code, Config, Docs, Infra, Data)
with colored dots matching node type colors. Only displayed when non-code
nodes are present in the graph.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/ProjectOverview.tsx        | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx b/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
index 3969511..81d4018 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
@@ -21,6 +21,16 @@ export default function ProjectOverview() {
     typeCounts[node.type] = (typeCounts[node.type] ?? 0) + 1;
   }
 
+  // Category breakdowns
+  const categoryBreakdown = [
+    { label: "Code", color: "var(--color-node-file)", count: (typeCounts["file"] ?? 0) + (typeCounts["function"] ?? 0) + (typeCounts["class"] ?? 0) },
+    { label: "Config", color: "var(--color-node-config)", count: typeCounts["config"] ?? 0 },
+    { label: "Docs", color: "var(--color-node-document)", count: typeCounts["document"] ?? 0 },
+    { label: "Infra", color: "var(--color-node-service)", count: (typeCounts["service"] ?? 0) + (typeCounts["resource"] ?? 0) + (typeCounts["pipeline"] ?? 0) },
+    { label: "Data", color: "var(--color-node-table)", count: (typeCounts["table"] ?? 0) + (typeCounts["endpoint"] ?? 0) + (typeCounts["schema"] ?? 0) },
+  ];
+  const hasNonCodeNodes = categoryBreakdown.some((c) => c.label !== "Code" && c.count > 0);
+
   return (
     <div className="h-full w-full overflow-auto p-5 animate-fade-slide-in">
       {/* Project name */}
@@ -47,6 +57,25 @@ export default function ProjectOverview() {
         </div>
       </div>
 
+      {/* File Types breakdown */}
+      {hasNonCodeNodes && (
+        <div className="mb-5">
+          <h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">File Types</h3>
+          <div className="space-y-1.5">
+            {categoryBreakdown.filter((c) => c.count > 0).map((cat) => (
+              <div key={cat.label} className="flex items-center gap-2">
+                <span
+                  className="w-2.5 h-2.5 rounded-full shrink-0"
+                  style={{ backgroundColor: cat.color }}
+                />
+                <span className="text-xs text-text-secondary flex-1">{cat.label}</span>
+                <span className="text-xs font-mono text-text-muted">{cat.count}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Languages */}
       {project.languages.length > 0 && (
         <div className="mb-5">