feat(panorama): add call-flow graph with Delta, Trace, and export

Ship Panorama as a first-class view: subgraph call trees at a commit,
delta-colored Graph tab, trace highlights, shareable drill-down URLs,
and vector SVG/hi-DPI PNG export. Includes graph-subgraph package,
server API, Android entry resolver, tests, and README updates.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: heqikai

CHANGELOG.md

@@ -10,6 +10,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [Unreleased]
 
 ### Added
+- **CodeDelta panorama view (全景图).** Interactive call-flow graph built from CodeGraph snapshots: entry exploration from routes/components/exported symbols, Delta View graph tab with change coloring, Trace View navigation with evidence highlighting, optional LLM node labels, and Android MAIN/LAUNCHER activity entry detection in CodeGraph.
 - **Java / Kotlin imports now resolve by fully-qualified name.** Extraction
   wraps every top-level declaration of a `.kt` / `.java` file in a `namespace`
   node carrying the file's `package` (so a class `Bar` in

README.md

@@ -5,7 +5,7 @@
 
 **Local-first, commit-aware structural code intelligence** — built on [CodeGraph](https://github.com/colbymchenry/codegraph).
 
-CodeDelta shows how a codebase’s **structure** changes between commits: symbols, dependency edges, blast radius, and review-oriented summaries. **Trace View** helps narrow down which commit may have introduced a behavior change, with evidence you can verify in **Delta View**.
+CodeDelta shows how a codebase’s **structure** changes between commits: symbols, dependency edges, blast radius, and review-oriented summaries. **Trace View** helps narrow down which commit may have introduced a behavior change, with evidence you can verify in **Delta View**. **Panorama** visualizes call-flow trees at a single commit (or a structural diff overlay between two commits).
 
 This repository is a fork: the **CodeGraph** engine lives under [`src/`](src/) (CLI + MCP + tree-sitter graph). The **CodeDelta** app lives under [`packages/`](packages/) and [`apps/web/`](apps/web/) (import, timeline, delta, trace, settings UI).
 
@@ -35,6 +35,19 @@ Compare two commits (`Base` = before, `Head` = after):
 - Delta summary (main areas, risks, suggested review order)
 - File-level unified diff modal (click files or symbols)
 - Per-snapshot metadata (`codegraph` vs `fallback` extraction)
+- **Graph tab** — React Flow call tree at the head commit with added/modified/removed coloring on nodes and edges
+
+### Panorama
+
+Interactive call-flow graph from CodeGraph snapshots (React Flow):
+
+- **Single commit** — top entry routes/components/exported symbols, expandable by call depth
+- **Branch + commit** selectors; auto-rebuild when either changes
+- **Drill-down** — *Expand from here*, breadcrumb trail, Back / All entry points
+- **Shareable URLs** — `?branch=&commit=&depth=&focusPath=` preserves your drill-down path
+- **Export** — SVG (vector) or hi-DPI PNG generated from graph data (not a DOM screenshot)
+- Optional LLM node labels (non-authoritative)
+- Linked from **Delta View → Graph**, **Trace View**, and **Commit Timeline**
 
 ### Trace View
 
@@ -44,13 +57,14 @@ Describe a bug, behavior change, or question in natural language:
 - Attach evidence per candidate (`previous → candidate` compare when a parent exists)
 - Return a direct answer, confidence, uncertainty, and suggested next steps
 - Jump to Delta View to verify each candidate
+- **View in Panorama** on a candidate commit (trace symbol highlights when available)
 
 **Without any LLM configured**, Trace still returns candidates, evidence, and impact radius (evidence-first, no invented facts).
 
 ### Commit timeline & import
 
 - Import a public GitHub repo (`owner/repo` or URL) or a **local git path**
-- Browse commits; open Delta or Trace from the timeline
+- Browse commits; open Delta, Trace, or Panorama from the timeline
 
 ## What CodeDelta is not
 
@@ -77,6 +91,7 @@ Open [http://localhost:5173](http://localhost:5173).
 2. **Commit Timeline** — pick a branch and browse history
 3. **Delta View** — choose `Base (before)` and `Head (after)`, then compare
 4. **Trace View** — describe an issue; review candidates and open Delta to verify
+5. **Panorama** — pick branch/commit and explore call trees; drill down from any entry or route
 
 ## UI walkthrough
 
@@ -105,6 +120,9 @@ API: [http://localhost:3847](http://localhost:3847)
 |----------|-------------|
 | `GET /api/health` | Health check |
 | `GET /api/repos/:id/compare?base=&head=` | Structural delta between commits |
+| `GET /api/repos/:id/panorama?commit=&depth=&root=` | Call-flow graph at one commit |
+| `GET /api/repos/:id/panorama?base=&head=&depth=` | Delta-colored call-flow graph (head commit tree) |
+| `POST /api/repos/:id/panorama/enrich` | Optional LLM labels for panorama nodes |
 | `GET /api/repos/:id/diff?base=&head=&file=` | Unified diff for one file |
 | `POST /api/repos/:id/trace` | Trace question → candidates + evidence |
 | `GET /api/settings/provider` | Current LLM provider settings |
@@ -191,11 +209,12 @@ packages/
   codedelta-server/           # REST API
   codedelta-snapshot-manager/
   codedelta-graph-diff/
+  codedelta-graph-subgraph/   # Panorama call-tree + layout
   codedelta-impact-score/
   codedelta-delta-summary/
   codedelta-trace-engine/
   codedelta-provider-runtime/
-apps/web/                     # React UI
+apps/web/                     # React UI (Delta, Trace, Panorama)
 apps/desktop/                 # macOS desktop shell (Tauri 2)
 ```
 
@@ -206,7 +225,8 @@ Roadmap and deferred work: [docs/codedelta/ROADMAP.md](docs/codedelta/ROADMAP.md
 - TypeScript/JavaScript-first practical path today
 - Delta and trace: **commit-to-commit** only (no PR/branch/working-tree compare yet)
 - Codex: local CLI session only (no in-browser OAuth)
-- UI: tables/lists (no full graph canvas yet)
+- Panorama overview shows **top entry surfaces** only on large repos — drill down with *Expand from here*; sparse graphs often mean mount points (`USE /api/*`) need expansion to see router internals
+- Panorama export is a simplified card layout (no live *Expand* buttons); prefer **SVG** for zoom/clarity
 - Symbol click opens **file** diff, not symbol-to-hunk mapping
 
 ## Desktop (macOS)
@@ -266,9 +286,10 @@ apps/desktop/
 npm run build:codedelta
 npm run dev:codedelta    # API :3847, web :5173, watches provider-runtime
 
-npm test -- packages/codedelta-graph-diff packages/codedelta-impact-score \
-  packages/codedelta-server packages/codedelta-snapshot-manager \
-  packages/codedelta-trace-engine packages/codedelta-provider-runtime
+npm test -- packages/codedelta-graph-diff packages/codedelta-graph-subgraph \
+  packages/codedelta-impact-score packages/codedelta-server \
+  packages/codedelta-snapshot-manager packages/codedelta-trace-engine \
+  packages/codedelta-provider-runtime __tests__/codedelta
 ```
 
 Environment variables:

__tests__/codedelta/panorama-export.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import type { PanoramaGraph } from '@codedelta/types';
+import { buildPanoramaSvg } from '../../apps/web/src/lib/panorama-export';
+
+function sampleGraph(): PanoramaGraph {
+  return {
+    repoId: 'r1',
+    commit: 'abc1234567890',
+    commitShortHash: 'abc1234',
+    nodes: [
+      {
+        id: 'n1',
+        kind: 'route',
+        name: 'GET /',
+        qualifiedName: 'GET /',
+        filePath: 'src/app.ts',
+        startLine: 1,
+        endLine: 5,
+        commitShortHash: 'abc1234',
+        role: 'entry',
+        position: { x: 0, y: 0 },
+      },
+      {
+        id: 'n2',
+        kind: 'function',
+        name: 'handler',
+        qualifiedName: 'handler',
+        filePath: 'src/app.ts',
+        startLine: 10,
+        endLine: 20,
+        commitShortHash: 'abc1234',
+        role: 'leaf',
+        position: { x: 0, y: 240 },
+      },
+    ],
+    edges: [{ id: 'e1', source: 'n1', target: 'n2', kind: 'calls' }],
+    entryPoints: ['n1'],
+    layout: 'layered',
+    stats: { nodeCount: 2, edgeCount: 1, truncated: false },
+  };
+}
+
+describe('buildPanoramaSvg', () => {
+  it('produces valid SVG with nodes and edges', () => {
+    const svg = buildPanoramaSvg(sampleGraph());
+    expect(svg).toContain('<svg');
+    expect(svg).toContain('GET /');
+    expect(svg).toContain('<path');
+    expect(svg).toContain('CodeDelta Panorama');
+  });
+
+  it('scales layout when renderScale is set', () => {
+    const base = buildPanoramaSvg(sampleGraph());
+    const scaled = buildPanoramaSvg(sampleGraph(), { renderScale: 2 });
+    const baseW = base.match(/width="(\d+)"/)?.[1];
+    const scaledW = scaled.match(/width="(\d+)"/)?.[1];
+    expect(Number(scaledW)).toBeGreaterThan(Number(baseW));
+  });
+});

__tests__/codedelta/panorama-focus.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildFocusTrail,
+  focusAtTrailIndex,
+  parseFocusPathParam,
+  serializeFocusPath,
+} from '../../apps/web/src/lib/panorama-focus';
+
+describe('panorama-focus URL trail', () => {
+  it('round-trips a multi-hop focus path', () => {
+    const trail = buildFocusTrail(['', 'MainActivity.onCreate'], 'handleClick');
+    const encoded = serializeFocusPath(trail);
+    expect(encoded).toBeTruthy();
+    const parsed = parseFocusPathParam(encoded);
+    expect(parsed.root).toBe('handleClick');
+    expect(parsed.stack).toEqual(['', 'MainActivity.onCreate']);
+  });
+
+  it('navigates breadcrumb index back to overview', () => {
+    const next = focusAtTrailIndex(['', 'A'], 'B', 0);
+    expect(next).toEqual({ stack: [], root: '' });
+  });
+
+  it('navigates breadcrumb index to intermediate hop', () => {
+    const next = focusAtTrailIndex(['', 'A'], 'B', 1);
+    expect(next).toEqual({ stack: [''], root: 'A' });
+  });
+
+  it('encodes symbols with special characters', () => {
+    const trail = buildFocusTrail([], 'GET /api/users');
+    const encoded = serializeFocusPath(trail)!;
+    const parsed = parseFocusPathParam(encoded);
+    expect(parsed.root).toBe('GET /api/users');
+  });
+});

apps/web/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@xyflow/react": "^12.6.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1"

apps/web/src/api/client.ts

@@ -9,6 +9,8 @@ import type {
   ImpactSummary,
   ImportRepoRequest,
   ModelProviderConfig,
+  PanoramaEnrichResult,
+  PanoramaGraph,
   ProviderKind,
   RepoRef,
   TraceAnswer,
@@ -84,6 +86,39 @@ export const api = {
       method: 'PUT',
       body: JSON.stringify(config),
     }),
+
+  getPanorama: (
+    id: string,
+    params: {
+      commit?: string;
+      base?: string;
+      head?: string;
+      root?: string;
+      depth?: number;
+      maxNodes?: number;
+      highlight?: 'trace';
+      traceSymbols?: string[];
+      traceEntryPoints?: string[];
+    },
+  ) => {
+    const q = new URLSearchParams();
+    if (params.commit) q.set('commit', params.commit);
+    if (params.base) q.set('base', params.base);
+    if (params.head) q.set('head', params.head);
+    if (params.root) q.set('root', params.root);
+    if (params.depth != null) q.set('depth', String(params.depth));
+    if (params.maxNodes != null) q.set('maxNodes', String(params.maxNodes));
+    if (params.highlight) q.set('highlight', params.highlight);
+    if (params.traceSymbols?.length) q.set('traceSymbols', params.traceSymbols.join(','));
+    if (params.traceEntryPoints?.length) q.set('traceEntryPoints', params.traceEntryPoints.join(','));
+    return request<PanoramaGraph>(`/api/repos/${id}/panorama?${q.toString()}`);
+  },
+
+  enrichPanorama: (id: string, body: { commit: string; nodeIds: string[] }) =>
+    request<PanoramaEnrichResult>(`/api/repos/${id}/panorama/enrich`, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    }),
 };
 
 export type {
@@ -100,4 +135,6 @@ export type {
   CodeNode,
   ModelProviderConfig,
   ProviderKind,
+  PanoramaGraph,
+  PanoramaEnrichResult,
 };

apps/web/src/components/AppShell.tsx

@@ -60,6 +60,12 @@ function ShellInner() {
                 >
                   Trace View
                 </NavLink>
+                <NavLink
+                  to={repoNavPath(repoId, 'panorama')}
+                  className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
+                >
+                  Panorama
+                </NavLink>
               </>
             ) : (
               <>
@@ -69,6 +75,9 @@ function ShellInner() {
                 <span className="nav-link disabled" title="Import a repository first">
                   Trace View
                 </span>
+                <span className="nav-link disabled" title="Import a repository first">
+                  Panorama
+                </span>
               </>
             )}
           </section>