feat: symbol-level views with edge validity and API gap fixes

- Add Symbols and Types views (symbol graph, call edges, type filtering)
- Fix edge validity: filter node_modules edges, auto-create symbolNodes
  for non-exported callers (<module> scope, internal functions)
- Expand graph builder to extract interface/type/enum symbol nodes
- Add symbol module derivation for module cloud grouping
- Fix API gaps: groups wrapper, search suggestions, MCP hotspot defaults
- Remove dead exports (ForceThresholds, un-export internal-only symbols)
- Update tests for new API response shapes

Author: bntvllnt

app/api/file/[...path]/route.ts

@@ -25,7 +25,17 @@ export function GET(
       path: filePath,
       loc: node?.loc ?? 0,
       module: node?.module ?? "",
-      functions: functions.map((f) => ({ name: f.label, loc: f.loc })),
+      functions: functions.map((f) => {
+        const symId = `${filePath}::${f.label}`;
+        const symMetrics = graph.symbolMetrics.get(symId);
+        return {
+          name: f.label,
+          loc: f.loc,
+          fanIn: symMetrics?.fanIn ?? 0,
+          fanOut: symMetrics?.fanOut ?? 0,
+          pageRank: symMetrics?.pageRank ?? 0,
+        };
+      }),
       imports: imports.map((e) => ({ from: e.target, symbols: e.symbols })),
       dependents: dependents.map((e) => ({
         path: e.source,

app/api/groups/route.ts

@@ -3,5 +3,5 @@ import { getGraph } from "@/src/server/graph-store";
 
 export function GET(): NextResponse {
   const graph = getGraph();
-  return NextResponse.json(graph.groups);
+  return NextResponse.json({ groups: graph.groups });
 }

app/api/mcp/route.ts

@@ -125,7 +125,7 @@ function runTool(graph: CodebaseGraph, tool: string, params: Record<string, unkn
     }
 
     case "find_hotspots": {
-      const metric = params.metric as string;
+      const metric = (params.metric as string | undefined) ?? "coupling";
       const limit = (params.limit as number | undefined) ?? 10;
       type ScoredFile = { path: string; score: number; reason: string };
       const scored: ScoredFile[] = [];

app/api/search/route.ts

@@ -32,5 +32,5 @@ export function GET(request: Request): NextResponse {
     })),
   }));
 
-  return NextResponse.json({ query, results: mapped });
+  return NextResponse.json({ query, results: mapped, suggestions: [] });
 }

app/api/symbol-graph/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { getGraph } from "@/src/server/graph-store";
+import type { SymbolGraphResponse } from "@/lib/types";
+
+export function GET(): NextResponse<SymbolGraphResponse> {
+  const graph = getGraph();
+
+  const symbolNodes = graph.symbolNodes.map((s) => {
+    const metrics = graph.symbolMetrics.get(s.id);
+    return {
+      id: s.id,
+      name: s.name,
+      type: s.type,
+      file: s.file,
+      loc: s.loc,
+      isDefault: s.isDefault,
+      fanIn: metrics?.fanIn ?? 0,
+      fanOut: metrics?.fanOut ?? 0,
+      pageRank: metrics?.pageRank ?? 0,
+      betweenness: metrics?.betweenness ?? 0,
+    };
+  });
+
+  const callEdges = graph.callEdges.map((e) => ({
+    source: e.source,
+    target: e.target,
+    callerSymbol: e.callerSymbol,
+    calleeSymbol: e.calleeSymbol,
+    confidence: e.confidence,
+  }));
+
+  const symbolMetrics = [...graph.symbolMetrics.values()].map((m) => ({
+    symbolId: m.symbolId,
+    name: m.name,
+    file: m.file,
+    fanIn: m.fanIn,
+    fanOut: m.fanOut,
+    pageRank: m.pageRank,
+    betweenness: m.betweenness,
+  }));
+
+  return NextResponse.json({ symbolNodes, callEdges, symbolMetrics });
+}

app/api/symbols/[name]/route.ts

@@ -46,6 +46,7 @@ export function GET(
     }
 
     const sym = deduped[0];
+    const symbolNode = graph.symbolNodes.find((s) => s.id === sym.symbolId);
 
     const callers = graph.callEdges
       .filter((e) => e.calleeSymbol === symbolName || e.target === sym.symbolId)
@@ -58,8 +59,12 @@ export function GET(
     return NextResponse.json({
       name: sym.name,
       file: sym.file,
+      loc: symbolNode?.loc ?? 0,
+      type: symbolNode?.type ?? "function",
       fanIn: sym.fanIn,
       fanOut: sym.fanOut,
+      pageRank: sym.pageRank,
+      betweenness: sym.betweenness,
       callers,
       callees,
       nextSteps: getHints("symbol_context"),

app/page.tsx

@@ -7,6 +7,7 @@ import { ProjectBar } from "@/components/project-bar";
 import { ViewTabs } from "@/components/view-tabs";
 import { SearchInput } from "@/components/search-input";
 import { DetailPanel } from "@/components/detail-panel";
+import { SymbolDetailPanel } from "@/components/symbol-detail";
 import { SettingsPanel } from "@/components/settings-panel";
 import { Legend } from "@/components/legend";
 import { FileTree } from "@/components/file-tree";
@@ -17,6 +18,7 @@ function App(): React.ReactElement | null {
     graphData,
     forceData,
     groupData,
+    symbolData,
     projectName,
     staleness,
     isLoading,
@@ -27,6 +29,8 @@ function App(): React.ReactElement | null {
     setCurrentView,
     selectedNode,
     setSelectedNode,
+    selectedSymbol,
+    setSelectedSymbol,
     focusNodeId,
     handleNodeClick,
     handleNavigate,
@@ -74,7 +78,9 @@ function App(): React.ReactElement | null {
         focusNodeId={focusNodeId}
         forceData={forceData}
         circularDeps={graphData.stats.circularDeps}
+        symbolData={symbolData}
         onNodeClick={handleNodeClick}
+        onSymbolClick={setSelectedSymbol}
       />
       <DetailPanel
         node={selectedNode}
@@ -83,6 +89,11 @@ function App(): React.ReactElement | null {
         onNavigate={handleNavigate}
         onFocus={handleFocus}
       />
+      <SymbolDetailPanel
+        symbol={selectedSymbol}
+        callEdges={symbolData?.callEdges ?? []}
+        onClose={() => { setSelectedSymbol(null); }}
+      />
       <Legend view={currentView} groups={groupData} showClouds={config.showModuleBoxes} />
       <SettingsPanel config={config} onChange={setConfig} />
     </>

components/detail-panel.tsx

@@ -84,6 +84,11 @@ export function DetailPanel({
             {node.functions.map((f) => (
               <div key={f.name} className="py-0.5">
                 {f.name} ({f.loc} LOC)
+                {f.fanIn !== undefined && (
+                  <span className="text-[#666] ml-1">
+                    in:{f.fanIn} out:{f.fanOut ?? 0} PR:{(f.pageRank ?? 0).toFixed(3)}
+                  </span>
+                )}
               </div>
             ))}
           </div>

components/graph-canvas.tsx

@@ -16,6 +16,8 @@ import type {
   GraphConfig,
   ForceApiResponse,
   ViewType,
+  SymbolGraphResponse,
+  SymbolApiNode,
 } from "@/lib/types";
 import {
   galaxyView,
@@ -26,6 +28,8 @@ import {
   forcesView,
   churnView,
   coverageView,
+  symbolView,
+  typesView,
   getModuleColor,
 } from "@/lib/views";
 import { cloudGroup } from "@/src/cloud-group";
@@ -55,7 +59,9 @@ export function GraphCanvas({
   focusNodeId,
   forceData,
   circularDeps,
+  symbolData,
   onNodeClick,
+  onSymbolClick,
 }: {
   nodes: GraphApiNode[];
   edges: GraphApiEdge[];
@@ -64,7 +70,9 @@ export function GraphCanvas({
   focusNodeId: string | null;
   forceData: ForceApiResponse | undefined;
   circularDeps: string[][];
+  symbolData: SymbolGraphResponse | undefined;
   onNodeClick: (node: GraphApiNode) => void;
+  onSymbolClick: (symbol: SymbolApiNode) => void;
 }): React.ReactElement {
   const fgRef = useRef<ForceGraph3DInstance | undefined>(undefined);
   const cloudsRef = useRef(new Map<string, CloudEntry>());
@@ -99,10 +107,18 @@ export function GraphCanvas({
         return churnView(nodes, edges, config);
       case "coverage":
         return coverageView(nodes, edges, config);
+      case "symbols":
+        return symbolData
+          ? symbolView(symbolData.symbolNodes, symbolData.callEdges, config)
+          : { nodes: [], links: [] };
+      case "types":
+        return symbolData
+          ? typesView(symbolData.symbolNodes, symbolData.callEdges, config)
+          : { nodes: [], links: [] };
       default:
         return galaxyView(nodes, edges, config);
     }
-  }, [nodes, edges, config, currentView, focusNodeId, forceData, circularDeps, nodeById]);
+  }, [nodes, edges, config, currentView, focusNodeId, forceData, circularDeps, nodeById, symbolData]);
 
   // Build stable node/link objects for ForceGraph3D — store refs for tick handler access
   const fgGraphData = useMemo(() => {
@@ -347,20 +363,48 @@ export function GraphCanvas({
     return () => { window.removeEventListener("search-fly", handleSearchFly); };
   }, []);
 
+  const symbolById = useMemo(
+    () => new Map(symbolData?.symbolNodes.map((s) => [s.id, s]) ?? []),
+    [symbolData],
+  );
+
+  const isSymbolView = currentView === "symbols" || currentView === "types";
+
   const handleNodeClick = useCallback(
     (node: Record<string, unknown>) => {
-      const apiNode = nodeById.get(node.id as string);
-      if (apiNode) onNodeClick(apiNode);
+      const id = node.id as string;
+      if (isSymbolView) {
+        const sym = symbolById.get(id);
+        if (sym) onSymbolClick(sym);
+      } else {
+        const apiNode = nodeById.get(id);
+        if (apiNode) onNodeClick(apiNode);
+      }
     },
-    [nodeById, onNodeClick],
+    [nodeById, symbolById, onNodeClick, onSymbolClick, isSymbolView],
   );
 
+  const showEmptyPlaceholder =
+    isSymbolView && symbolData?.symbolNodes.length === 0;
+
+  if (showEmptyPlaceholder) {
+    return (
+      <div className="w-screen h-screen flex items-center justify-center bg-[#0a0a0f]">
+        <div className="text-[#888] text-lg">No symbols found</div>
+      </div>
+    );
+  }
+
   return (
     <div ref={containerRef} className="w-screen h-screen" data-cloud-count="0">
       <ForceGraph3D
         ref={fgRef}
         graphData={fgGraphData}
-        nodeLabel={(n: Record<string, unknown>) => `${n.path as string} (${n.loc as number} LOC)`}
+        nodeLabel={(n: Record<string, unknown>) =>
+          isSymbolView
+            ? `${n.label as string} (${n.path as string})`
+            : `${n.path as string} (${n.loc as number} LOC)`
+        }
         nodeColor={(n: Record<string, unknown>) => n.color as string}
         nodeVal={(n: Record<string, unknown>) => n.size as number}
         nodeOpacity={config.nodeOpacity}

components/graph-provider.tsx

@@ -2,8 +2,9 @@
 
 import { createContext, useContext, useState, useCallback, useEffect } from "react";
 import { useGraphData } from "@/hooks/use-graph-data";
+import { useSymbolData } from "@/hooks/use-symbol-data";
 import { useGraphConfig } from "@/hooks/use-graph-config";
-import type { GraphApiNode, GraphApiResponse, ForceApiResponse, GroupMetrics, GraphConfig, ViewType } from "@/lib/types";
+import type { GraphApiNode, GraphApiResponse, ForceApiResponse, GroupMetrics, GraphConfig, ViewType, SymbolGraphResponse, SymbolApiNode } from "@/lib/types";
 
 interface StalenessInfo {
   stale: boolean;
@@ -14,6 +15,7 @@ interface GraphContextValue {
   graphData: GraphApiResponse | undefined;
   forceData: ForceApiResponse | undefined;
   groupData: GroupMetrics[] | undefined;
+  symbolData: SymbolGraphResponse | undefined;
   projectName: string;
   staleness: StalenessInfo | undefined;
   isLoading: boolean;
@@ -24,6 +26,8 @@ interface GraphContextValue {
   setCurrentView: (view: ViewType) => void;
   selectedNode: GraphApiNode | null;
   setSelectedNode: (node: GraphApiNode | null) => void;
+  selectedSymbol: SymbolApiNode | null;
+  setSelectedSymbol: (symbol: SymbolApiNode | null) => void;
   focusNodeId: string | null;
   setFocusNodeId: (id: string | null) => void;
   handleNodeClick: (node: GraphApiNode) => void;
@@ -45,7 +49,15 @@ export function GraphProvider({ children }: { children: React.ReactNode }) {
   const { config, setConfig } = useGraphConfig();
   const [currentView, setCurrentView] = useState<ViewType>("galaxy");
   const [selectedNode, setSelectedNode] = useState<GraphApiNode | null>(null);
+  const [selectedSymbol, setSelectedSymbol] = useState<SymbolApiNode | null>(null);
   const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
+  const isSymbolView = currentView === "symbols" || currentView === "types";
+  const { symbolData } = useSymbolData(isSymbolView);
+
+  useEffect(() => {
+    if (!isSymbolView) setSelectedSymbol(null);
+    if (isSymbolView) setSelectedNode(null);
+  }, [isSymbolView]);
 
   useEffect(() => {
     if (projectName) {
@@ -85,6 +97,7 @@ export function GraphProvider({ children }: { children: React.ReactNode }) {
         graphData,
         forceData,
         groupData,
+        symbolData,
         projectName,
         staleness,
         isLoading,
@@ -95,6 +108,8 @@ export function GraphProvider({ children }: { children: React.ReactNode }) {
         setCurrentView,
         selectedNode,
         setSelectedNode,
+        selectedSymbol,
+        setSelectedSymbol,
         focusNodeId,
         setFocusNodeId,
         handleNodeClick,