From 0d7180b170d56eb1641f665b89ba3f74cf599e1f Mon Sep 17 00:00:00 2001
From: chorewer <1175794600@qq.com>
Date: Thu, 21 May 2026 17:14:55 +0800
Subject: [PATCH 1/2] feat(dashboard): multi-project switcher with runtime
 switching

Add a project switcher to the dashboard header that lets users switch
between KIP and KIP-infra (and any future sibling projects) without
restarting the server.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docker-compose.yml              |  4 ++-
 tools/kip-state/index.py        |  4 ++-
 ui/client/src/App.tsx           | 35 +++++++++++++++++++++---
 ui/client/src/hooks/useApi.ts   | 27 +++++++++++++++++++
 ui/client/src/styles/global.css | 13 +++++++++
 ui/client/src/views/Nodes.tsx   | 20 +++++++++++---
 ui/server/src/index.ts          | 48 +++++++++++++++++++++++++++++----
 ui/server/src/routes/agents.ts  |  8 +++---
 ui/server/src/routes/logs.ts    |  9 ++++---
 ui/server/src/routes/nodes.ts   | 13 ++++++---
 ui/server/src/routes/project.ts | 24 +++++++++++++----
 ui/server/src/routes/summary.ts |  7 +++--
 12 files changed, 177 insertions(+), 35 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 1336f05..4aac5ad 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -18,5 +18,7 @@ services:
     ports:
       - "18080:8081"
     volumes:
-      - .:/project
+      - .:/projects/KIP
+      - /root/ai4math/KIP-infra:/projects/KIP-infra
+    command: ["node", "server/dist/index.js", "--project", "/projects/KIP", "--port", "8081"]
     restart: unless-stopped
diff --git a/tools/kip-state/index.py b/tools/kip-state/index.py
index 31bad2f..3e11ce3 100644
--- a/tools/kip-state/index.py
+++ b/tools/kip-state/index.py
@@ -301,6 +301,8 @@ def main(argv: list[str] | None = None) -> int:
                     help="KIP project root (default: cwd)")
     ap.add_argument("--db", type=Path, default=None,
                     help="Output SQLite path (default: <project>/.dashboard/state.db)")
+    ap.add_argument("--lean-root", type=Path, default=None,
+                    help="Lean source root (default: <project>/KIP)")
     ap.add_argument("--quiet", action="store_true")
     args = ap.parse_args(argv)
 
@@ -315,7 +317,7 @@ def main(argv: list[str] | None = None) -> int:
 
     status_path = project / "blueprint" / "status.yaml"
     chapters_dir = project / "blueprint" / "src" / "chapters"
-    lean_root = project / "KIP"
+    lean_root = args.lean_root.resolve() if args.lean_root else project / "KIP"
     agents_dir = project / "agents"
 
     log(f"[kip-state] project={project}")
diff --git a/ui/client/src/App.tsx b/ui/client/src/App.tsx
index 5c24e17..11ecf7b 100644
--- a/ui/client/src/App.tsx
+++ b/ui/client/src/App.tsx
@@ -1,5 +1,5 @@
 import { Routes, Route, NavLink, Navigate } from 'react-router-dom';
-import { useProject } from './hooks/useApi';
+import { useProject, useProjects, useProjectSwitch } from './hooks/useApi';
 import Overview from './views/Overview';
 import LogViewer from './views/LogViewer';
 import Nodes from './views/Nodes';
@@ -17,15 +17,42 @@ function ConnectionBanner({ isError }: { isError: boolean }) {
   );
 }
 
+function ProjectSwitcher() {
+  const { data: project } = useProject();
+  const { data: projects } = useProjects();
+  const switcher = useProjectSwitch();
+
+  if (!projects || projects.length <= 1) {
+    return (
+      <span className="project-badge" title={project?.path}>
+        {project?.name ?? '…'}
+      </span>
+    );
+  }
+
+  return (
+    <select
+      className="project-switcher"
+      value={project?.path ?? ''}
+      onChange={(e) => switcher.mutate(e.target.value)}
+      disabled={switcher.isPending}
+      title={project?.path}
+    >
+      {projects.map(p => (
+        <option key={p.path} value={p.path}>{p.name}</option>
+      ))}
+    </select>
+  );
+}
+
 export default function App() {
-  const { data: project, isError } = useProject();
+  const { isError } = useProject();
 
   return (
     <div className="app">
       <ConnectionBanner isError={isError} />
       <header className="header">
-        <h1>KIP</h1>
-        {project && <span className="project-badge" title={project.path}>{project.name}</span>}
+        <ProjectSwitcher />
         <nav className="header-nav">
           <NavLink to="/" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} end>Nodes</NavLink>
           <NavLink to="/overview" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>Overview</NavLink>
diff --git a/ui/client/src/hooks/useApi.ts b/ui/client/src/hooks/useApi.ts
index 999c22f..0fb1369 100644
--- a/ui/client/src/hooks/useApi.ts
+++ b/ui/client/src/hooks/useApi.ts
@@ -17,6 +17,33 @@ export function useProject() {
   });
 }
 
+export function useProjects() {
+  return useQuery<{ name: string; path: string }[]>({
+    queryKey: ['projects'], queryFn: () => fetchJson('/api/projects'), staleTime: 30000,
+  });
+}
+
+export function useProjectSwitch() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (projectPath: string) => {
+      const res = await fetch(apiUrl('/api/project/switch'), {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ path: projectPath }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error((body as { error?: string }).error || `API ${res.status}`);
+      }
+      return res.json() as Promise<{ name: string; path: string; agentsPath: string }>;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries();
+    },
+  });
+}
+
 export function useAgents() {
   return useQuery<AgentSummary[]>({
     queryKey: ['agents'], queryFn: () => fetchJson('/api/agents'), refetchInterval: 10000,
diff --git a/ui/client/src/styles/global.css b/ui/client/src/styles/global.css
index f0ad052..6d13b5c 100644
--- a/ui/client/src/styles/global.css
+++ b/ui/client/src/styles/global.css
@@ -52,6 +52,19 @@ code, pre { font-family: var(--font-mono); }
   cursor: default;
 }
 
+.project-switcher {
+  font-size: 11px; font-weight: 500; font-family: var(--font-mono);
+  padding: 2px 8px; border-radius: 3px;
+  background: rgba(3,102,214,0.08); color: var(--blue);
+  border: none; cursor: pointer;
+  appearance: none; -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%230366d6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  padding-right: 20px;
+}
+.project-switcher:hover { background-color: rgba(3,102,214,0.14); }
+
 .header-nav { display: flex; gap: 2px; }
 .nav-link {
   padding: 6px 12px;
diff --git a/ui/client/src/views/Nodes.tsx b/ui/client/src/views/Nodes.tsx
index cad95e3..5bba1b1 100644
--- a/ui/client/src/views/Nodes.tsx
+++ b/ui/client/src/views/Nodes.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import svgPanZoom from 'svg-pan-zoom';
-import { useGraph, useGraphSvg } from '../hooks/useApi';
+import { useGraph, useGraphSvg, useProject } from '../hooks/useApi';
 import { PHASE_COLORS, PHASE_ORDER, PHASE_LABELS } from '../utils/constants';
 import NodeDetail from '../components/NodeDetail';
 import type { Phase } from '../types';
@@ -77,6 +77,18 @@ export default function Nodes() {
   };
 
   const { data: graph } = useGraph();
+  const { data: project } = useProject();
+
+  // Reset chapter state when switching projects so stale chaptersInit doesn't
+  // trigger an SVG fetch against the new (possibly empty) project.
+  const prevProjectPath = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (prevProjectPath.current !== undefined && prevProjectPath.current !== project?.path) {
+      setChaptersInit(false);
+      setActiveChapters(new Set());
+    }
+    prevProjectPath.current = project?.path;
+  }, [project?.path]);
 
   // Debounce search → 300 ms before re-fetching SVG
   useEffect(() => {
@@ -170,11 +182,12 @@ export default function Nodes() {
     [allChapters, activeChapters, chaptersInit],
   );
 
+  const hasGraphData = (graph?.nodes?.length ?? 0) > 0;
   const { data: svgText, isFetching, isError } = useGraphSvg({
     phases: phasesArr,
     chapters: chaptersArr,
     q: debouncedSearch,
-    enabled: chaptersInit,
+    enabled: chaptersInit && hasGraphData,
   });
 
   // Mount the SVG, init pan-zoom, attach click bridging.
@@ -410,7 +423,8 @@ export default function Nodes() {
         <div className={styles.canvasOverlay}>
           {isFetching && 'rendering… '}
           {isError && 'render failed (check server log)'}
-          {!isFetching && !isError && (
+          {!isFetching && !isError && chaptersInit && !hasGraphData && 'No graph data (state.db not built)'}
+          {!isFetching && !isError && hasGraphData && (
             <>graph rendered server-side via <code>dot</code> · {totalNodes} nodes total</>
           )}
         </div>
diff --git a/ui/server/src/index.ts b/ui/server/src/index.ts
index 47e248e..7aa9091 100644
--- a/ui/server/src/index.ts
+++ b/ui/server/src/index.ts
@@ -17,6 +17,39 @@ export interface ProjectPaths {
   agentsPath: string;
 }
 
+export interface ProjectInfo {
+  name: string;
+  path: string;
+}
+
+export interface ProjectState {
+  paths: ProjectPaths;
+  allProjects: ProjectInfo[];
+}
+
+function discoverProjects(primaryPath: string): ProjectInfo[] {
+  const parent = path.dirname(primaryPath);
+  const found: ProjectInfo[] = [];
+  try {
+    for (const entry of fs.readdirSync(parent, { withFileTypes: true })) {
+      if (!entry.isDirectory()) continue;
+      const full = path.join(parent, entry.name);
+      const hasBarchon = fs.existsSync(path.join(full, '.barchon'));
+      const hasAgents = fs.existsSync(path.join(full, 'agents'));
+      if (hasBarchon || hasAgents) found.push({ name: entry.name, path: full });
+    }
+  } catch { /* ignore */ }
+  if (!found.find(p => p.path === primaryPath)) {
+    found.unshift({ name: path.basename(primaryPath), path: primaryPath });
+  }
+  found.sort((a, b) => {
+    if (a.path === primaryPath) return -1;
+    if (b.path === primaryPath) return 1;
+    return a.name.localeCompare(b.name);
+  });
+  return found;
+}
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -39,6 +72,11 @@ export async function createServer(options: { projectPath: string; port: number
     agentsPath: path.join(projectPath, 'agents'),
   };
 
+  const state: ProjectState = {
+    paths,
+    allProjects: discoverProjects(projectPath),
+  };
+
   const fastify = Fastify({
     logger: false,
     rewriteUrl: (req) => {
@@ -59,11 +97,11 @@ export async function createServer(options: { projectPath: string; port: number
     });
   }
 
-  registerProject(fastify, paths);
-  registerAgents(fastify, paths);
-  registerLogs(fastify, paths);
-  registerSummary(fastify, paths);
-  registerNodes(fastify, paths);
+  registerProject(fastify, state);
+  registerAgents(fastify, state);
+  registerLogs(fastify, state);
+  registerSummary(fastify, state);
+  registerNodes(fastify, state);
 
   await fastify.listen({ port, host: '0.0.0.0' });
   return fastify;
diff --git a/ui/server/src/routes/agents.ts b/ui/server/src/routes/agents.ts
index d8e02cc..8baa34e 100644
--- a/ui/server/src/routes/agents.ts
+++ b/ui/server/src/routes/agents.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import type { FastifyInstance } from 'fastify';
-import type { ProjectPaths } from '../index.js';
+import type { ProjectState } from '../index.js';
 import type { AgentSummary, AgentRun } from '../types.js';
 
 function listAgents(agentsPath: string): string[] {
@@ -53,10 +53,9 @@ function listRuns(agentsPath: string, agentName: string): AgentRun[] {
     });
 }
 
-export function register(fastify: FastifyInstance, paths: ProjectPaths) {
-  const { agentsPath } = paths;
-
+export function register(fastify: FastifyInstance, state: ProjectState) {
   fastify.get('/api/agents', async (): Promise<AgentSummary[]> => {
+    const { agentsPath } = state.paths;
     return listAgents(agentsPath).map(name => {
       const runs = listRuns(agentsPath, name);
       return {
@@ -68,6 +67,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
   });
 
   fastify.get<{ Params: { name: string } }>('/api/agents/:name/runs', async (req, reply) => {
+    const { agentsPath } = state.paths;
     const { name } = req.params;
     if (!fs.existsSync(path.join(agentsPath, name, 'logs'))) {
       return reply.status(404).send({ error: 'Agent not found' });
diff --git a/ui/server/src/routes/logs.ts b/ui/server/src/routes/logs.ts
index fce788c..460ad3c 100644
--- a/ui/server/src/routes/logs.ts
+++ b/ui/server/src/routes/logs.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import type { FastifyInstance } from 'fastify';
-import type { ProjectPaths } from '../index.js';
+import type { ProjectState } from '../index.js';
 import { parseJsonl } from '../utils.js';
 
 interface LogFileEntry { name: string; path: string; size: number; modified: string; agent?: string; runId?: string }
@@ -15,10 +15,9 @@ function resolveLogPath(agentsPath: string, logPath: string): string | null {
   return full;
 }
 
-export function register(fastify: FastifyInstance, paths: ProjectPaths) {
-  const { agentsPath } = paths;
-
+export function register(fastify: FastifyInstance, state: ProjectState) {
   fastify.get('/api/logs', async () => {
+    const { agentsPath } = state.paths;
     if (!fs.existsSync(agentsPath)) return { flat: [], groups: [] };
 
     const groups: LogGroup[] = [];
@@ -67,6 +66,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
   });
 
   fastify.get('/api/logs/*', async (req, reply) => {
+    const { agentsPath } = state.paths;
     const subpath = (req.params as Record<string, string>)['*'];
     if (!subpath) return reply.status(400).send({ error: 'Missing path' });
     const filePath = resolveLogPath(agentsPath, subpath);
@@ -75,6 +75,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
   });
 
   fastify.get('/api/log-stream/*', { websocket: true }, (socket, req) => {
+    const { agentsPath } = state.paths;
     const subpath = (req.params as Record<string, string>)['*'] || '';
     const filePath = resolveLogPath(agentsPath, subpath);
     if (!filePath || !fs.existsSync(filePath)) {
diff --git a/ui/server/src/routes/nodes.ts b/ui/server/src/routes/nodes.ts
index 67beba3..f4973f7 100644
--- a/ui/server/src/routes/nodes.ts
+++ b/ui/server/src/routes/nodes.ts
@@ -3,7 +3,7 @@ import path from 'path';
 import Database from 'better-sqlite3';
 import yaml from 'js-yaml';
 import type { FastifyInstance } from 'fastify';
-import type { ProjectPaths } from '../index.js';
+import type { ProjectState } from '../index.js';
 import { buildDot, renderSvg, BLUEPRINT_KINDS, type GraphFilters } from './graph_svg.js';
 
 interface NodeRow {
@@ -326,10 +326,9 @@ function shapeNode(r: NodeRow) {
   };
 }
 
-export function register(fastify: FastifyInstance, paths: ProjectPaths) {
-  const { projectPath } = paths;
-
+export function register(fastify: FastifyInstance, state: ProjectState) {
   fastify.get('/api/state/health', async () => {
+    const { projectPath } = state.paths;
     const db = openDb(projectPath);
     if (!db) {
       return {
@@ -356,6 +355,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
   });
 
   fastify.get('/api/nodes', async () => {
+    const { projectPath } = state.paths;
     const db = openDb(projectPath);
     if (!db) return [];
     const rows = db.prepare(
@@ -365,6 +365,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
   });
 
   fastify.get('/api/edges', async () => {
+    const { projectPath } = state.paths;
     const db = openDb(projectPath);
     if (!db) return [];
     const rows = db.prepare(
@@ -384,6 +385,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
   fastify.get<{ Querystring: { phases?: string; chapters?: string; q?: string; orphans?: string } }>(
     '/api/graph/svg',
     async (req, reply) => {
+      const { projectPath } = state.paths;
       const db = openDb(projectPath);
       if (!db) {
         reply.status(503);
@@ -419,6 +421,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
 
   // Combined payload sized for one round-trip into the DAG view.
   fastify.get('/api/graph', async () => {
+    const { projectPath } = state.paths;
     const db = openDb(projectPath);
     if (!db) return { nodes: [], edges: [], chapters: [] };
     // Restrict to blueprint kinds — remarks/examples/questions are commentary
@@ -445,6 +448,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
   });
 
   fastify.get<{ Params: { id: string } }>('/api/nodes/:id', async (req, reply) => {
+    const { projectPath } = state.paths;
     const db = openDb(projectPath);
     if (!db) return reply.status(503).send({ error: 'state.db not built' });
     const id = req.params.id;
@@ -563,6 +567,7 @@ export function register(fastify: FastifyInstance, paths: ProjectPaths) {
     Params: { id: string };
     Body: { action?: string; reviewer?: string; comment?: string };
   }>('/api/nodes/:id/review', async (req, reply) => {
+    const { projectPath } = state.paths;
     const id = req.params.id;
     const action = (req.body?.action || '').trim();
     const reviewer = (req.body?.reviewer || '').trim();
diff --git a/ui/server/src/routes/project.ts b/ui/server/src/routes/project.ts
index ad7b359..a9320c3 100644
--- a/ui/server/src/routes/project.ts
+++ b/ui/server/src/routes/project.ts
@@ -1,11 +1,25 @@
 import path from 'path';
 import type { FastifyInstance } from 'fastify';
-import type { ProjectPaths } from '../index.js';
+import type { ProjectState } from '../index.js';
 
-export function register(fastify: FastifyInstance, paths: ProjectPaths) {
+export function register(fastify: FastifyInstance, state: ProjectState) {
   fastify.get('/api/project', async () => ({
-    name: path.basename(paths.projectPath),
-    path: paths.projectPath,
-    agentsPath: paths.agentsPath,
+    name: path.basename(state.paths.projectPath),
+    path: state.paths.projectPath,
+    agentsPath: state.paths.agentsPath,
   }));
+
+  fastify.get('/api/projects', async () => state.allProjects);
+
+  fastify.post<{ Body: { path: string } }>('/api/project/switch', async (req, reply) => {
+    const { path: newPath } = req.body ?? {};
+    if (!newPath) return reply.status(400).send({ error: 'path required' });
+    const found = state.allProjects.find(p => p.path === newPath);
+    if (!found) return reply.status(404).send({ error: 'Project not found' });
+    state.paths = {
+      projectPath: found.path,
+      agentsPath: path.join(found.path, 'agents'),
+    };
+    return { name: found.name, path: found.path, agentsPath: state.paths.agentsPath };
+  });
 }
diff --git a/ui/server/src/routes/summary.ts b/ui/server/src/routes/summary.ts
index 3b88671..4ec90db 100644
--- a/ui/server/src/routes/summary.ts
+++ b/ui/server/src/routes/summary.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import type { FastifyInstance } from 'fastify';
-import type { ProjectPaths } from '../index.js';
+import type { ProjectState } from '../index.js';
 import type { LogEntry, AggregatedStats, SessionSummary } from '../types.js';
 import { parseJsonl } from '../utils.js';
 
@@ -29,10 +29,9 @@ function calculateStats(logs: LogEntry[]): AggregatedStats {
   return { totalCost, totalDuration, totalTokensIn, totalTokensOut, sessionCount: sessions.length, sessions };
 }
 
-export function register(fastify: FastifyInstance, paths: ProjectPaths) {
-  const { agentsPath } = paths;
-
+export function register(fastify: FastifyInstance, state: ProjectState) {
   fastify.get('/api/summary', async () => {
+    const { agentsPath } = state.paths;
     if (!fs.existsSync(agentsPath)) return { totalCost: 0, totalDuration: 0, totalTokensIn: 0, totalTokensOut: 0, sessionCount: 0, sessions: [] };
     let allLogs: LogEntry[] = [];
     function walkJsonl(dir: string) {

From dbab45d45a4fb4e883b3166a9996b9661997c235 Mon Sep 17 00:00:00 2001
From: chorewer <1175794600@qq.com>
Date: Fri, 22 May 2026 13:40:48 +0800
Subject: [PATCH 2/2] chore(deploy): build dashboard from Barchon source; align
 state.db path

- docker-compose.yml: change dashboard build context to Barchon repo
  (src/barchon) so the deployed image always reflects the canonical UI
- kip-state/index.py: change default output from .dashboard/state.db to
  .barchon/state.db to match Barchon's nodes route expectation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docker-compose.yml       | 2 +-
 tools/kip-state/index.py | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 4aac5ad..5d1fada 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -12,7 +12,7 @@ services:
 
   dashboard:
     build:
-      context: .
+      context: /root/ai4math/Barchon/src/barchon
       dockerfile: ui/Dockerfile
     container_name: kip-dashboard
     ports:
diff --git a/tools/kip-state/index.py b/tools/kip-state/index.py
index 3e11ce3..84f50a4 100644
--- a/tools/kip-state/index.py
+++ b/tools/kip-state/index.py
@@ -300,14 +300,14 @@ def main(argv: list[str] | None = None) -> int:
     ap.add_argument("--project", type=Path, default=Path.cwd(),
                     help="KIP project root (default: cwd)")
     ap.add_argument("--db", type=Path, default=None,
-                    help="Output SQLite path (default: <project>/.dashboard/state.db)")
+                    help="Output SQLite path (default: <project>/.barchon/state.db)")
     ap.add_argument("--lean-root", type=Path, default=None,
                     help="Lean source root (default: <project>/KIP)")
     ap.add_argument("--quiet", action="store_true")
     args = ap.parse_args(argv)
 
     project: Path = args.project.resolve()
-    db_path: Path = args.db or (project / ".dashboard" / "state.db")
+    db_path: Path = args.db or (project / ".barchon" / "state.db")
     db_path.parent.mkdir(parents=True, exist_ok=True)
 
     log = (lambda *a, **k: None) if args.quiet else (lambda *a, **k: print(*a, **k, file=sys.stderr))