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>
This commit is contained in:
Lum1104
2026-03-15 00:30:34 +08:00
co-authored by Claude Opus 4.6
parent 8e13f77e23
commit f69ad5887e
3 changed files with 91 additions and 48 deletions
+57 -47
View File
@@ -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:
+28 -1
View File
@@ -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();
});
},
},
],
});
@@ -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