From f69ad5887e3e9d7c808856cdaf0fd9b00133dae7 Mon Sep 17 00:00:00 2001
From: Lum1104 <linyux1104@163.com>
Date: Sun, 15 Mar 2026 00:30:34 +0800
Subject: [PATCH] fix(dashboard): auto-detect knowledge graph from
 .understand-anything/

The Vite dev server now looks for .understand-anything/knowledge-graph.json
in the project root, so users don't need to manually copy the graph file
into public/. Also updates README with clearer installation and usage
instructions, and adds dashboard viewing steps to /understand SKILL.md.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 README.md                                 | 104 ++++++++++++----------
 packages/dashboard/vite.config.ts         |  29 +++++-
 packages/skill/skills/understand/SKILL.md |   6 ++
 3 files changed, 91 insertions(+), 48 deletions(-)

diff --git a/README.md b/README.md
index d31a948..9ff62b7 100644
--- a/README.md
+++ b/README.md
@@ -41,20 +41,68 @@ An open-source tool that combines LLM intelligence with static analysis to help
 
 ## Quick Start
 
+### 1. Analyze any codebase (via Claude Code)
+
 ```bash
-# Install dependencies
+# Install the plugin
+claude --plugin-dir /path/to/Understand-Anything/packages/skill
+
+# In any project, run:
+/understand
+```
+
+This produces `.understand-anything/knowledge-graph.json` in your project.
+
+### 2. View the dashboard
+
+```bash
+# Clone this repo and install
+git clone https://github.com/Lum1104/Understand-Anything.git
+cd Understand-Anything
 pnpm install
 
-# Build the core package
-pnpm --filter @understand-anything/core build
-
-# Build the skill package
-pnpm --filter @understand-anything/skill build
-
-# Start the dashboard dev server
+# Start the dashboard (auto-detects .understand-anything/ from your project)
 pnpm dev:dashboard
 ```
 
+The dashboard dev server automatically looks for `.understand-anything/knowledge-graph.json` in the project root — no manual copying needed.
+
+### 3. Use other skill commands
+
+```bash
+# Ask questions about the codebase
+/understand-chat How does authentication work in this project?
+
+# Analyze impact of current changes
+/understand-diff
+
+# Deep-dive into a specific file
+/understand-explain src/auth/login.ts
+
+# Generate an onboarding guide
+/understand-onboard
+```
+
+## Plugin Installation
+
+The skill commands work in any project via Claude Code:
+
+```bash
+# Option 1: Load for current session
+claude --plugin-dir /path/to/Understand-Anything/packages/skill
+
+# Option 2: Add to .claude/settings.json for persistent use
+# (in the project where you cloned Understand-Anything)
+```
+
+```json
+{
+  "enabledPlugins": {
+    "understand-anything": {}
+  }
+}
+```
+
 ## Commands
 
 | Command | Description |
@@ -67,45 +115,7 @@ pnpm dev:dashboard
 | `pnpm --filter @understand-anything/dashboard build` | Build the dashboard |
 | `pnpm dev:dashboard` | Start dashboard dev server |
 
-### Claude Code Skills
-
-Install as a Claude Code plugin, then use these commands:
-
-```bash
-# Analyze a codebase (produces .understand-anything/knowledge-graph.json)
-/understand
-
-# Force a full rebuild
-/understand --full
-
-# Ask questions about the codebase
-/understand-chat How does authentication work in this project?
-
-# Analyze impact of current changes
-/understand-diff
-
-# Deep-dive into a specific file
-/understand-explain src/auth/login.ts
-
-# Generate an onboarding guide
-/understand-onboard
-```
-
-#### Plugin Installation
-
-```bash
-# Option 1: Load for current session
-claude --plugin-dir ./packages/skill
-
-# Option 2: Add to .claude/settings.json for persistent use
-{
-  "enabledPlugins": {
-    "understand-anything": {}
-  }
-}
-```
-
-#### Multi-Agent Architecture
+## Multi-Agent Architecture
 
 The `/understand` command orchestrates 5 specialized agents in a 7-phase pipeline:
 
diff --git a/packages/dashboard/vite.config.ts b/packages/dashboard/vite.config.ts
index 0ce1839..7e1f912 100644
--- a/packages/dashboard/vite.config.ts
+++ b/packages/dashboard/vite.config.ts
@@ -1,7 +1,34 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import path from "path";
+import fs from "fs";
 
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    {
+      name: "serve-knowledge-graph",
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          if (req.url === "/knowledge-graph.json") {
+            // Look for .understand-anything/knowledge-graph.json up from cwd
+            const candidates = [
+              path.resolve(process.cwd(), ".understand-anything/knowledge-graph.json"),
+              path.resolve(process.cwd(), "../../.understand-anything/knowledge-graph.json"),
+            ];
+            for (const candidate of candidates) {
+              if (fs.existsSync(candidate)) {
+                res.setHeader("Content-Type", "application/json");
+                fs.createReadStream(candidate).pipe(res);
+                return;
+              }
+            }
+          }
+          next();
+        });
+      },
+    },
+  ],
 });
diff --git a/packages/skill/skills/understand/SKILL.md b/packages/skill/skills/understand/SKILL.md
index 46ea545..17f836b 100644
--- a/packages/skill/skills/understand/SKILL.md
+++ b/packages/skill/skills/understand/SKILL.md
@@ -183,6 +183,12 @@ If the reviewer reports `approved: false`:
    - Tour steps generated
    - Any warnings from the reviewer
    - Path to the output file
+4. Tell the user how to view the dashboard:
+   ```
+   To view your codebase dashboard, clone the Understand Anything repo and run:
+     pnpm install && pnpm dev:dashboard
+   The dashboard auto-detects .understand-anything/knowledge-graph.json from the project root.
+   ```
 
 ## Error Handling