archrip 0.2.2 → 0.2.4

package/dist/templates/slash-commands/claude/archrip-scan.md

@@ -20,9 +20,16 @@ Analyze the current codebase and generate `.archrip/architecture.json`.
 
 ## Phase 2: Documentation Discovery
 Read existing documentation to understand architecture context:
-1. Check for: README.md, CLAUDE.md, docs/, doc/, wiki/, ARCHITECTURE.md, CONTRIBUTING.md
-2. Extract: system overview, component descriptions, external service integrations, design decisions
-3. Use this knowledge to inform the analysis — documentation often reveals architectural intent that code alone does not show (use cases, business context, external dependencies)
+1. Check for: README.md, CLAUDE.md, docs/, doc/, wiki/, ARCHITECTURE.md, CONTRIBUTING.md, ADR/
+2. For each document, extract and take notes on:
+   - **Business context**: What problem does this system solve? Who are the users?
+   - **Component responsibilities**: What each module/service does and why it exists
+   - **Design decisions & constraints**: Why certain patterns/libraries were chosen, known limitations
+   - **Data flow**: How data moves through the system (request lifecycle, event flow, etc.)
+   - **External integrations**: What external services are used, why, and how
+   - **Non-functional requirements**: SLAs, performance targets, security policies
+   - **Deployment & infrastructure**: Hosting, CI/CD, environment details
+3. Keep these notes — you will use them in Phase 4 to write rich node/edge descriptions and metadata
 
 ## Phase 3: Layer Identification
 Assign each component a `layer` integer. The rule: **higher layer = closer to domain core (more stable, fewer external dependencies). Lower layer = closer to external world (more volatile, I/O-bound).**
@@ -58,6 +65,21 @@ For each layer, read representative files to extract:
 - Public methods/routes
 - Database schemas (from migrations or model definitions)
 
+**Enrich descriptions from documentation:** Cross-reference code with your Phase 2 notes.
+For each component, compose a `description` (1-3 sentences) that covers:
+- **What**: Its responsibility (from code analysis)
+- **Why**: Business context or design rationale (from docs)
+- **How**: Key implementation details, constraints, or patterns worth noting
+
+A good description tells the reader something they cannot see from the label alone.
+- BAD: "User service" (just echoes the label)
+- GOOD: "Handles user registration, login, and profile management. Uses JWT for session tokens with 24h expiry. Password hashing via bcrypt (cost=12)."
+
+Also identify metadata candidates:
+- SLA/performance notes → `metadata` with `type: "list"`
+- Related doc links → `metadata` with `type: "link"`
+- Infrastructure details (Lambda ARN, DB engine, etc.) → `metadata` with `type: "code"` or `"text"`
+
 **Do NOT read every file.** Focus on entry points, core logic, interfaces, and data models.
 
 ## Phase 5: Map Relationships
@@ -129,10 +151,11 @@ After writing the file:
 - UseCase: `id`, `name`, `nodeIds` — all required
 
 ### Node Rules
-- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, ext-, job-, dto-)
+- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, db-, ext-, job-, dto-)
 - `layer`: non-negative integer. **Higher = closer to domain core / more stable. Lower = closer to external world / more volatile.** Dagre (TB) places higher layers lower on screen; concentric places them at center. Use as many layers as the architecture requires (typically 3-6). Example for DDD: 0=external, 1=adapters, 2=controllers, 3=app services, 4=ports, 5=domain entities. Example for MVC: 0=external, 1=controllers, 2=services, 3=models.
-- `category`: one of controller, service, port, adapter, model, external, job, dto (or custom)
+- `category`: one of controller, service, port, adapter, model, database, external, job, dto (or custom). Use `model` for domain entities/value objects (core business logic). Use `database` for DB tables, migrations, ORMs, and infrastructure persistence.
 - `label`: display name for the node
+- `description`: 1-3 sentences explaining responsibility + business context. Do NOT just echo the label. Cross-reference documentation for richer context (see Description Guidelines below)
 - `filePath`: relative from project root
 - `depth` (optional): 0=overview, 1=structure, 2=detail. Auto-inferred from `layer` if omitted: with 3+ unique layers, lowest → 0, middle → 1, highest → 2. With 1-2 layers, all nodes get depth 0 (always visible).
 - `useCases`: array of use case IDs this node participates in
@@ -158,6 +181,31 @@ After writing the file:
 - DDD / Clean Architecture / Hexagonal / Onion Architecture → add `"layout": "concentric"` to `project`
 - MVC / standard layered → `"layout": "dagre"` (default, can be omitted)
 
+### Description Guidelines
+
+#### Node `description`
+Write 1-3 sentences that explain responsibility AND business context.
+Cross-reference project documentation (README, CLAUDE.md, docs/) for richer context.
+- BAD: "User service" (just echoes the label)
+- BAD: "Handles users" (too vague)
+- GOOD: "Handles user registration, authentication, and profile management. Uses JWT for session tokens; password hashing via bcrypt. Rate-limited to 10 req/s per IP."
+
+#### Edge `description`
+Explain WHY the dependency exists, not just THAT it exists.
+- BAD: "calls" / "depends on"
+- GOOD: "Delegates payment processing via Stripe SDK; retries on timeout (3x with exponential backoff)"
+
+#### `metadata` for supplementary details
+Use `metadata` to capture information from docs that doesn't fit in `description`:
+```json
+"metadata": [
+  { "label": "SLA", "value": ["99.9% uptime", "p95 < 200ms"], "type": "list" },
+  { "label": "Design Doc", "value": "https://...", "type": "link" },
+  { "label": "Infrastructure", "value": "Lambda + DynamoDB (on-demand)", "type": "text" },
+  { "label": "Rate Limit", "value": "10 req/s per IP", "type": "text" }
+]
+```
+
 ### Schema Rules
 - Include table schema only when migration files or model annotations are available
 - Reference from node data using schema key name

package/dist/templates/slash-commands/codex/archrip-scan.md

@@ -20,9 +20,16 @@ Analyze the current codebase and generate `.archrip/architecture.json`.
 
 ## Phase 2: Documentation Discovery
 Read existing documentation to understand architecture context:
-1. Check for: README.md, CLAUDE.md, docs/, doc/, wiki/, ARCHITECTURE.md, CONTRIBUTING.md
-2. Extract: system overview, component descriptions, external service integrations, design decisions
-3. Use this knowledge to inform the analysis — documentation often reveals architectural intent that code alone does not show (use cases, business context, external dependencies)
+1. Check for: README.md, CLAUDE.md, docs/, doc/, wiki/, ARCHITECTURE.md, CONTRIBUTING.md, ADR/
+2. For each document, extract and take notes on:
+   - **Business context**: What problem does this system solve? Who are the users?
+   - **Component responsibilities**: What each module/service does and why it exists
+   - **Design decisions & constraints**: Why certain patterns/libraries were chosen, known limitations
+   - **Data flow**: How data moves through the system (request lifecycle, event flow, etc.)
+   - **External integrations**: What external services are used, why, and how
+   - **Non-functional requirements**: SLAs, performance targets, security policies
+   - **Deployment & infrastructure**: Hosting, CI/CD, environment details
+3. Keep these notes — you will use them in Phase 4 to write rich node/edge descriptions and metadata
 
 ## Phase 3: Layer Identification
 Assign each component a `layer` integer. The rule: **higher layer = closer to domain core (more stable, fewer external dependencies). Lower layer = closer to external world (more volatile, I/O-bound).**
@@ -58,6 +65,21 @@ For each layer, read representative files to extract:
 - Public methods/routes
 - Database schemas (from migrations or model definitions)
 
+**Enrich descriptions from documentation:** Cross-reference code with your Phase 2 notes.
+For each component, compose a `description` (1-3 sentences) that covers:
+- **What**: Its responsibility (from code analysis)
+- **Why**: Business context or design rationale (from docs)
+- **How**: Key implementation details, constraints, or patterns worth noting
+
+A good description tells the reader something they cannot see from the label alone.
+- BAD: "User service" (just echoes the label)
+- GOOD: "Handles user registration, login, and profile management. Uses JWT for session tokens with 24h expiry. Password hashing via bcrypt (cost=12)."
+
+Also identify metadata candidates:
+- SLA/performance notes → `metadata` with `type: "list"`
+- Related doc links → `metadata` with `type: "link"`
+- Infrastructure details (Lambda ARN, DB engine, etc.) → `metadata` with `type: "code"` or `"text"`
+
 **Do NOT read every file.** Focus on entry points, core logic, interfaces, and data models.
 
 ## Phase 5: Map Relationships
@@ -129,10 +151,11 @@ After writing the file:
 - UseCase: `id`, `name`, `nodeIds` — all required
 
 ### Node Rules
-- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, ext-, job-, dto-)
+- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, db-, ext-, job-, dto-)
 - `layer`: non-negative integer. **Higher = closer to domain core / more stable. Lower = closer to external world / more volatile.** Dagre (TB) places higher layers lower on screen; concentric places them at center. Use as many layers as the architecture requires (typically 3-6). Example for DDD: 0=external, 1=adapters, 2=controllers, 3=app services, 4=ports, 5=domain entities. Example for MVC: 0=external, 1=controllers, 2=services, 3=models.
-- `category`: one of controller, service, port, adapter, model, external, job, dto (or custom)
+- `category`: one of controller, service, port, adapter, model, database, external, job, dto (or custom). Use `model` for domain entities/value objects (core business logic). Use `database` for DB tables, migrations, ORMs, and infrastructure persistence.
 - `label`: display name for the node
+- `description`: 1-3 sentences explaining responsibility + business context. Do NOT just echo the label. Cross-reference documentation for richer context (see Description Guidelines below)
 - `filePath`: relative from project root
 - `depth` (optional): 0=overview, 1=structure, 2=detail. Auto-inferred from `layer` if omitted: with 3+ unique layers, lowest → 0, middle → 1, highest → 2. With 1-2 layers, all nodes get depth 0 (always visible).
 - `useCases`: array of use case IDs this node participates in
@@ -158,6 +181,31 @@ After writing the file:
 - DDD / Clean Architecture / Hexagonal / Onion Architecture → add `"layout": "concentric"` to `project`
 - MVC / standard layered → `"layout": "dagre"` (default, can be omitted)
 
+### Description Guidelines
+
+#### Node `description`
+Write 1-3 sentences that explain responsibility AND business context.
+Cross-reference project documentation (README, CLAUDE.md, docs/) for richer context.
+- BAD: "User service" (just echoes the label)
+- BAD: "Handles users" (too vague)
+- GOOD: "Handles user registration, authentication, and profile management. Uses JWT for session tokens; password hashing via bcrypt. Rate-limited to 10 req/s per IP."
+
+#### Edge `description`
+Explain WHY the dependency exists, not just THAT it exists.
+- BAD: "calls" / "depends on"
+- GOOD: "Delegates payment processing via Stripe SDK; retries on timeout (3x with exponential backoff)"
+
+#### `metadata` for supplementary details
+Use `metadata` to capture information from docs that doesn't fit in `description`:
+```json
+"metadata": [
+  { "label": "SLA", "value": ["99.9% uptime", "p95 < 200ms"], "type": "list" },
+  { "label": "Design Doc", "value": "https://...", "type": "link" },
+  { "label": "Infrastructure", "value": "Lambda + DynamoDB (on-demand)", "type": "text" },
+  { "label": "Rate Limit", "value": "10 req/s per IP", "type": "text" }
+]
+```
+
 ### Schema Rules
 - Include table schema only when migration files or model annotations are available
 - Reference from node data using schema key name

package/dist/templates/slash-commands/gemini/archrip-scan.md

@@ -20,9 +20,16 @@ Analyze the current codebase and generate `.archrip/architecture.json`.
 
 ## Phase 2: Documentation Discovery
 Read existing documentation to understand architecture context:
-1. Check for: README.md, CLAUDE.md, docs/, doc/, wiki/, ARCHITECTURE.md, CONTRIBUTING.md
-2. Extract: system overview, component descriptions, external service integrations, design decisions
-3. Use this knowledge to inform the analysis — documentation often reveals architectural intent that code alone does not show (use cases, business context, external dependencies)
+1. Check for: README.md, CLAUDE.md, docs/, doc/, wiki/, ARCHITECTURE.md, CONTRIBUTING.md, ADR/
+2. For each document, extract and take notes on:
+   - **Business context**: What problem does this system solve? Who are the users?
+   - **Component responsibilities**: What each module/service does and why it exists
+   - **Design decisions & constraints**: Why certain patterns/libraries were chosen, known limitations
+   - **Data flow**: How data moves through the system (request lifecycle, event flow, etc.)
+   - **External integrations**: What external services are used, why, and how
+   - **Non-functional requirements**: SLAs, performance targets, security policies
+   - **Deployment & infrastructure**: Hosting, CI/CD, environment details
+3. Keep these notes — you will use them in Phase 4 to write rich node/edge descriptions and metadata
 
 ## Phase 3: Layer Identification
 Assign each component a `layer` integer. The rule: **higher layer = closer to domain core (more stable, fewer external dependencies). Lower layer = closer to external world (more volatile, I/O-bound).**
@@ -58,6 +65,21 @@ For each layer, read representative files to extract:
 - Public methods/routes
 - Database schemas (from migrations or model definitions)
 
+**Enrich descriptions from documentation:** Cross-reference code with your Phase 2 notes.
+For each component, compose a `description` (1-3 sentences) that covers:
+- **What**: Its responsibility (from code analysis)
+- **Why**: Business context or design rationale (from docs)
+- **How**: Key implementation details, constraints, or patterns worth noting
+
+A good description tells the reader something they cannot see from the label alone.
+- BAD: "User service" (just echoes the label)
+- GOOD: "Handles user registration, login, and profile management. Uses JWT for session tokens with 24h expiry. Password hashing via bcrypt (cost=12)."
+
+Also identify metadata candidates:
+- SLA/performance notes → `metadata` with `type: "list"`
+- Related doc links → `metadata` with `type: "link"`
+- Infrastructure details (Lambda ARN, DB engine, etc.) → `metadata` with `type: "code"` or `"text"`
+
 **Do NOT read every file.** Focus on entry points, core logic, interfaces, and data models.
 
 ## Phase 5: Map Relationships
@@ -129,10 +151,11 @@ After writing the file:
 - UseCase: `id`, `name`, `nodeIds` — all required
 
 ### Node Rules
-- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, ext-, job-, dto-)
+- `id`: kebab-case, prefixed by category abbreviation (ctrl-, svc-, port-, adpt-, model-, db-, ext-, job-, dto-)
 - `layer`: non-negative integer. **Higher = closer to domain core / more stable. Lower = closer to external world / more volatile.** Dagre (TB) places higher layers lower on screen; concentric places them at center. Use as many layers as the architecture requires (typically 3-6). Example for DDD: 0=external, 1=adapters, 2=controllers, 3=app services, 4=ports, 5=domain entities. Example for MVC: 0=external, 1=controllers, 2=services, 3=models.
-- `category`: one of controller, service, port, adapter, model, external, job, dto (or custom)
+- `category`: one of controller, service, port, adapter, model, database, external, job, dto (or custom). Use `model` for domain entities/value objects (core business logic). Use `database` for DB tables, migrations, ORMs, and infrastructure persistence.
 - `label`: display name for the node
+- `description`: 1-3 sentences explaining responsibility + business context. Do NOT just echo the label. Cross-reference documentation for richer context (see Description Guidelines below)
 - `filePath`: relative from project root
 - `depth` (optional): 0=overview, 1=structure, 2=detail. Auto-inferred from `layer` if omitted: with 3+ unique layers, lowest → 0, middle → 1, highest → 2. With 1-2 layers, all nodes get depth 0 (always visible).
 - `useCases`: array of use case IDs this node participates in
@@ -158,6 +181,31 @@ After writing the file:
 - DDD / Clean Architecture / Hexagonal / Onion Architecture → add `"layout": "concentric"` to `project`
 - MVC / standard layered → `"layout": "dagre"` (default, can be omitted)
 
+### Description Guidelines
+
+#### Node `description`
+Write 1-3 sentences that explain responsibility AND business context.
+Cross-reference project documentation (README, CLAUDE.md, docs/) for richer context.
+- BAD: "User service" (just echoes the label)
+- BAD: "Handles users" (too vague)
+- GOOD: "Handles user registration, authentication, and profile management. Uses JWT for session tokens; password hashing via bcrypt. Rate-limited to 10 req/s per IP."
+
+#### Edge `description`
+Explain WHY the dependency exists, not just THAT it exists.
+- BAD: "calls" / "depends on"
+- GOOD: "Delegates payment processing via Stripe SDK; retries on timeout (3x with exponential backoff)"
+
+#### `metadata` for supplementary details
+Use `metadata` to capture information from docs that doesn't fit in `description`:
+```json
+"metadata": [
+  { "label": "SLA", "value": ["99.9% uptime", "p95 < 200ms"], "type": "list" },
+  { "label": "Design Doc", "value": "https://...", "type": "link" },
+  { "label": "Infrastructure", "value": "Lambda + DynamoDB (on-demand)", "type": "text" },
+  { "label": "Rate Limit", "value": "10 req/s per IP", "type": "text" }
+]
+```
+
 ### Schema Rules
 - Include table schema only when migration files or model annotations are available
 - Reference from node data using schema key name

package/dist/utils/layout.js

@@ -105,8 +105,9 @@ const CATEGORY_RING_PRIORITY = {
     dto: 3,
     controller: 4,
     adapter: 5,
-    job: 6,
-    external: 7,
+    database: 6,
+    job: 7,
+    external: 8,
 };
 const DEFAULT_RING_PRIORITY = 4; // unknown categories treated as controller-level
 /**

package/dist/utils/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/utils/layout.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/utils/layout.ts"],"names":[],"mappings":"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"}

package/dist/viewer-template/src/App.tsx

@@ -16,13 +16,17 @@ import type { ArchFlowNode, ArchNodeData } from './types.ts';
 import { getCategoryColors } from './types.ts';
 import { ArchNode } from './components/nodes/ArchNode.tsx';
 import { GroupNode } from './components/nodes/GroupNode.tsx';
+import { CommandPalette } from './components/CommandPalette.tsx';
 import { DetailPanel } from './components/DetailPanel.tsx';
 import { UseCaseFilter } from './components/UseCaseFilter.tsx';
 import { DepthFilter } from './components/DepthFilter.tsx';
 import { Legend } from './components/Legend.tsx';
 import { ThemeToggle } from './components/ThemeToggle.tsx';
 import { useArchitecture } from './hooks/useArchitecture.ts';
+import { useCategoryFilter } from './hooks/useCategoryFilter.ts';
+import { useCommandPalette } from './hooks/useCommandPalette.ts';
 import { useDepthFilter } from './hooks/useDepthFilter.ts';
+import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.ts';
 import { useUseCaseFilter } from './hooks/useUseCaseFilter.ts';
 import { useTheme } from './hooks/useTheme.ts';
 
@@ -31,10 +35,11 @@ const nodeTypes = { archNode: ArchNode, groupNode: GroupNode };
 function AppInner() {
   const { nodes, edges, useCases, projectName, layoutType, loading, error, onNodesChange, onEdgesChange } = useArchitecture();
   const { depthLevel, setDepthLevel, visibleNodes, visibleEdges } = useDepthFilter(nodes, edges, layoutType);
-  const { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges } = useUseCaseFilter(visibleNodes, visibleEdges, useCases);
+  const { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges, flowInfo } = useUseCaseFilter(visibleNodes, visibleEdges, useCases);
+  const categoryFilter = useCategoryFilter();
   const [selectedNodeId, setSelectedNodeId] = useQueryState('node', parseAsString.withOptions({ history: 'replace' }));
   const { theme, toggleTheme } = useTheme();
-  const { fitView } = useReactFlow();
+  const { fitView, setCenter, getNodes } = useReactFlow();
 
   const selectedNodeData: ArchNodeData | null = useMemo(() => {
     if (!selectedNodeId) return null;
@@ -66,6 +71,70 @@ function AppInner() {
     return () => cancelAnimationFrame(id);
   }, [depthLevel, selectedUseCase, fitView]);
 
+  // Auto-center viewport on active flow step
+  useEffect(() => {
+    if (!flowInfo.flowNodeIds || flowInfo.activeStep < 0) return;
+    const activeNodeId = flowInfo.flowNodeIds[flowInfo.activeStep];
+    if (!activeNodeId) return;
+    const rfNodes = getNodes();
+    const target = rfNodes.find((n) => n.id === activeNodeId);
+    if (!target) return;
+    const x = target.position.x + (target.measured?.width ?? 180) / 2;
+    const y = target.position.y + (target.measured?.height ?? 80) / 2;
+    void setCenter(x, y, { zoom: 1.2, duration: 400 });
+  }, [flowInfo.activeStep, flowInfo.flowNodeIds, getNodes, setCenter]);
+
+  // Category filter: dim hidden categories
+  const displayNodes = useMemo(() => {
+    if (categoryFilter.hiddenCategories.size === 0) return filteredNodes;
+    return filteredNodes.map((node) => {
+      if (categoryFilter.hiddenCategories.has(node.data.category)) {
+        return { ...node, style: { ...node.style, opacity: 0.08, transition: 'opacity 0.3s' } };
+      }
+      return node;
+    });
+  }, [filteredNodes, categoryFilter.hiddenCategories]);
+
+  const displayEdges = useMemo(() => {
+    if (categoryFilter.hiddenCategories.size === 0) return filteredEdges;
+    const hiddenNodeIds = new Set<string>();
+    for (const node of filteredNodes) {
+      if (categoryFilter.hiddenCategories.has(node.data.category)) {
+        hiddenNodeIds.add(node.id);
+      }
+    }
+    return filteredEdges.map((edge) => {
+      if (hiddenNodeIds.has(edge.source) || hiddenNodeIds.has(edge.target)) {
+        return {
+          ...edge,
+          style: { ...edge.style, opacity: 0.08, transition: 'opacity 0.3s' },
+          labelStyle: { ...((edge.labelStyle as Record<string, unknown>) ?? {}), opacity: 0 },
+        };
+      }
+      return edge;
+    });
+  }, [filteredEdges, filteredNodes, categoryFilter.hiddenCategories]);
+
+  // Command palette
+  const palette = useCommandPalette(displayNodes, categoryFilter.hiddenCategories);
+
+  const handlePaletteSelect = useCallback((nodeId: string) => {
+    palette.close();
+    void setSelectedNodeId(nodeId);
+  }, [palette, setSelectedNodeId]);
+
+  const handleEscape = useCallback(() => {
+    if (palette.isOpen) { palette.close(); return; }
+    if (selectedNodeId) { void setSelectedNodeId(null); return; }
+    if (selectedUseCase) { void setSelectedUseCase(null); return; }
+  }, [palette, selectedNodeId, setSelectedNodeId, selectedUseCase, setSelectedUseCase]);
+
+  useKeyboardShortcuts({
+    onTogglePalette: palette.toggle,
+    onEscape: handleEscape,
+    isPaletteOpen: palette.isOpen,
+  });
+
   if (loading) {
     return (
       <div className="w-full h-screen flex items-center justify-center" style={{ color: 'var(--color-content-tertiary)', background: 'var(--color-surface-canvas)' }}>
@@ -88,8 +157,8 @@ function AppInner() {
   return (
     <div className="w-full h-screen relative">
       <ReactFlow
-        nodes={filteredNodes}
-        edges={filteredEdges}
+        nodes={displayNodes}
+        edges={displayEdges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onNodeClick={onNodeClick}
@@ -120,11 +189,17 @@ function AppInner() {
             useCases={useCases}
             selectedUseCase={selectedUseCase}
             onSelect={handleUseCaseSelect}
+            flowInfo={flowInfo}
           />
         )}
         <DepthFilter depthLevel={depthLevel} onSelect={setDepthLevel} />
       </div>
-      <Legend categories={categories} />
+      <Legend
+        categories={categories}
+        hiddenCategories={categoryFilter.hiddenCategories}
+        onToggleCategory={categoryFilter.toggleCategory}
+        onShowAll={categoryFilter.showAll}
+      />
 
       {/* Title + Theme Toggle */}
       <div className="absolute top-3 right-3 z-10 flex items-center gap-2">
@@ -157,6 +232,19 @@ function AppInner() {
           />
         </>
       )}
+
+      {palette.isOpen && (
+        <CommandPalette
+          query={palette.query}
+          onQueryChange={palette.setQuery}
+          results={palette.results}
+          activeIndex={palette.activeIndex}
+          onMoveUp={palette.moveUp}
+          onMoveDown={palette.moveDown}
+          onSelect={handlePaletteSelect}
+          onClose={palette.close}
+        />
+      )}
     </div>
   );
 }

package/dist/viewer-template/src/components/CommandPalette.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useRef } from 'react';
+
+import { getCategoryColors, getCategoryLabel } from '../types.ts';
+import type { CommandPaletteResult } from '../hooks/useCommandPalette.ts';
+
+interface CommandPaletteProps {
+  query: string;
+  onQueryChange: (q: string) => void;
+  results: CommandPaletteResult[];
+  activeIndex: number;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  onSelect: (id: string) => void;
+  onClose: () => void;
+}
+
+export function CommandPalette({
+  query,
+  onQueryChange,
+  results,
+  activeIndex,
+  onMoveUp,
+  onMoveDown,
+  onSelect,
+  onClose,
+}: CommandPaletteProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Scroll active item into view
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const item = list.children[activeIndex] as HTMLElement | undefined;
+    item?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      onMoveUp();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      onMoveDown();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const item = results[activeIndex];
+      if (item) onSelect(item.id);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+    }
+  }
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className="fixed inset-0 z-60"
+        style={{ background: 'rgba(0, 0, 0, 0.3)' }}
+        onClick={onClose}
+      />
+
+      {/* Palette card */}
+      <div
+        className="fixed z-60 rounded-xl border overflow-hidden"
+        style={{
+          top: '20%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: 480,
+          maxWidth: 'calc(100vw - 32px)',
+          background: 'var(--color-surface-primary)',
+          borderColor: 'var(--color-border-primary)',
+          boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+        }}
+      >
+        {/* Search input */}
+        <div
+          className="border-b"
+          style={{ borderColor: 'var(--color-border-primary)' }}
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => onQueryChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search nodes..."
+            className="w-full px-4 py-3 text-sm bg-transparent outline-none"
+            style={{ color: 'var(--color-content-primary)' }}
+          />
+        </div>
+
+        {/* Results list */}
+        <div
+          ref={listRef}
+          className="overflow-y-auto"
+          style={{ maxHeight: 320 }}
+        >
+          {results.length === 0 && (
+            <div
+              className="px-4 py-6 text-center text-sm"
+              style={{ color: 'var(--color-content-tertiary)' }}
+            >
+              No nodes found
+            </div>
+          )}
+          {results.map((item, index) => {
+            const colors = getCategoryColors(item.category);
+            const isActive = index === activeIndex;
+            return (
+              <button
+                key={item.id}
+                onClick={() => onSelect(item.id)}
+                className="w-full px-4 py-2.5 flex items-start gap-3 text-left cursor-pointer border-none"
+                style={{
+                  background: isActive ? 'var(--color-surface-tertiary)' : 'transparent',
+                }}
+              >
+                <div
+                  className="w-3 h-3 rounded-sm border mt-0.5 shrink-0"
+                  style={{ background: colors.bg, borderColor: colors.border }}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="text-sm font-medium truncate"
+                      style={{ color: 'var(--color-content-primary)' }}
+                    >
+                      {item.label}
+                    </span>
+                    <span
+                      className="text-xs shrink-0"
+                      style={{ color: 'var(--color-content-tertiary)' }}
+                    >
+                      {getCategoryLabel(item.category)}
+                    </span>
+                  </div>
+                  {item.description && (
+                    <p
+                      className="text-xs mt-0.5 truncate"
+                      style={{ color: 'var(--color-content-secondary)' }}
+                    >
+                      {item.description}
+                    </p>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Footer */}
+        <div
+          className="px-4 py-2 border-t flex items-center gap-4 text-xs"
+          style={{
+            borderColor: 'var(--color-border-primary)',
+            color: 'var(--color-content-tertiary)',
+            background: 'var(--color-surface-secondary)',
+          }}
+        >
+          <span><kbd className="font-mono">{'\u2191\u2193'}</kbd> Navigate</span>
+          <span><kbd className="font-mono">{'\u21B5'}</kbd> Select</span>
+          <span><kbd className="font-mono">Esc</kbd> Close</span>
+        </div>
+      </div>
+    </>
+  );
+}