From 3cd4c47d88f0f1a074530f207cb66369029de2a8 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Mon, 30 Mar 2026 20:24:15 +0530
Subject: [PATCH 01/19] feat: add heatmap feature

---
 client/src/features/ai/components/AiPanel.jsx |  88 ++++++-
 client/src/features/ai/services/aiService.js  |  22 ++
 .../graph/components/GraphToolbar.jsx         |  50 +++-
 .../features/graph/components/GraphView.jsx   | 106 ++++++--
 .../features/graph/services/graphService.js   |  11 +
 .../src/features/graph/slices/graphSlice.js   |  38 ++-
 server/package.json                           |   2 +-
 server/src/api/ai/routes/ai.routes.js         |  86 +++++++
 server/src/api/graph/routes/graph.routes.js   |  34 +++
 server/test/ai.suggest-refactor.test.js       | 226 ++++++++++++++++++
 server/test/graph.heatmap.test.js             | 124 ++++++++++
 11 files changed, 759 insertions(+), 28 deletions(-)
 create mode 100644 server/test/ai.suggest-refactor.test.js
 create mode 100644 server/test/graph.heatmap.test.js

diff --git a/client/src/features/ai/components/AiPanel.jsx b/client/src/features/ai/components/AiPanel.jsx
index d5048c6..01146aa 100644
--- a/client/src/features/ai/components/AiPanel.jsx
+++ b/client/src/features/ai/components/AiPanel.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { X, AlertTriangle, Loader2, Zap } from 'lucide-react';
+import { X, AlertTriangle, Loader2, Zap, Wrench } from 'lucide-react';
 import {
   analyzeImpact,
   selectAiImpactState,
@@ -16,6 +16,9 @@ export default function AiPanel({ nodeId, graph, onClose }) {
   const [streamedText, setStreamedText] = useState('');
   const [isStreaming, setIsStreaming] = useState(false);
   const [streamError, setStreamError] = useState('');
+  const [isLoadingRefactor, setIsLoadingRefactor] = useState(false);
+  const [refactorError, setRefactorError] = useState('');
+  const [refactorSuggestion, setRefactorSuggestion] = useState(null);
 
   const nodeData = nodeId ? graph?.[nodeId] : null;
 
@@ -33,6 +36,8 @@ export default function AiPanel({ nodeId, graph, onClose }) {
     setStreamedText('');
     setIsStreaming(true);
     setStreamError('');
+    setRefactorSuggestion(null);
+    setRefactorError('');
 
     aiService
       .streamExplain({
@@ -78,6 +83,27 @@ export default function AiPanel({ nodeId, graph, onClose }) {
     dispatch(analyzeImpact({ jobId, filePath: nodeId }));
   };
 
+  const handleSuggestRefactor = async () => {
+    if (!jobId || !nodeId || isLoadingRefactor) return;
+
+    setIsLoadingRefactor(true);
+    setRefactorError('');
+
+    try {
+      const result = await aiService.suggestRefactor({
+        jobId,
+        filePath: nodeId,
+      });
+
+      setRefactorSuggestion(result);
+    } catch (error) {
+      setRefactorSuggestion(null);
+      setRefactorError(error?.response?.data?.error || error?.message || 'Failed to load suggestions.');
+    } finally {
+      setIsLoadingRefactor(false);
+    }
+  };
+
   return (
     <div className="absolute top-2 right-2 z-10 w-80 max-h-[85vh] overflow-y-auto rounded-xl border border-border bg-card/95 backdrop-blur-sm p-4 text-xs shadow-xl transition-all">
       <div className="flex items-start justify-between gap-2 mb-3">
@@ -124,6 +150,66 @@ export default function AiPanel({ nodeId, graph, onClose }) {
         )}
       </div>
 
+      <div className="mb-3 rounded-lg border border-border bg-background/40 p-3">
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <p className="text-muted-foreground/60 uppercase tracking-wider text-[10px] flex items-center gap-1">
+            <Wrench className="size-3" /> Refactor Suggestions
+          </p>
+          <button
+            type="button"
+            onClick={handleSuggestRefactor}
+            disabled={!jobId || isLoadingRefactor}
+            className="text-[10px] text-primary/70 hover:text-primary disabled:opacity-40 transition-colors"
+          >
+            {isLoadingRefactor ? 'Analyzing...' : 'Suggest refactor ->'}
+          </button>
+        </div>
+
+        {isLoadingRefactor && (
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Loader2 className="size-3 animate-spin" />
+            <span>Evaluating architecture risk...</span>
+          </div>
+        )}
+
+        {refactorError && (
+          <p className="text-red-400 flex items-center gap-1">
+            <AlertTriangle className="size-3" /> {refactorError}
+          </p>
+        )}
+
+        {refactorSuggestion && !isLoadingRefactor && !refactorError && (
+          <div className="space-y-2">
+            <p className="text-foreground/80">
+              Priority: <span className="uppercase">{refactorSuggestion.priority || 'medium'}</span>
+              {' '}· Effort: <span>{refactorSuggestion.estimatedEffort || 'unknown'}</span>
+            </p>
+
+            {refactorSuggestion.concerns?.length > 0 && (
+              <div>
+                <p className="mb-1 text-muted-foreground/60 uppercase tracking-wider text-[10px]">Concerns</p>
+                <ul className="list-disc pl-4 space-y-1 text-foreground/90">
+                  {refactorSuggestion.concerns.map((item, index) => (
+                    <li key={`concern-${index}`}>{item}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {refactorSuggestion.suggestions?.length > 0 && (
+              <div>
+                <p className="mb-1 text-muted-foreground/60 uppercase tracking-wider text-[10px]">Suggestions</p>
+                <ul className="list-disc pl-4 space-y-1 text-foreground/90">
+                  {refactorSuggestion.suggestions.map((item, index) => (
+                    <li key={`suggestion-${index}`}>{item}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
       {declarations.length > 0 && (
         <div className="mb-3">
           <p className="mb-1 text-muted-foreground/60 uppercase tracking-wider text-[10px]">
diff --git a/client/src/features/ai/services/aiService.js b/client/src/features/ai/services/aiService.js
index df616d6..dc52628 100644
--- a/client/src/features/ai/services/aiService.js
+++ b/client/src/features/ai/services/aiService.js
@@ -107,6 +107,28 @@ export const aiService = {
     return data;
   },
 
+  async suggestRefactor({ jobId, filePath }) {
+    const normalizedJobId = normalizeText(jobId);
+    const normalizedFilePath = normalizeText(filePath);
+
+    if (!normalizedJobId || !normalizedFilePath) {
+      throw new Error('suggestRefactor requires jobId and filePath.');
+    }
+
+    const { data } = await aiClient.post('/api/ai/suggest-refactor', {
+      jobId: normalizedJobId,
+      filePath: normalizedFilePath,
+    });
+
+    return {
+      filePath: normalizeText(data?.filePath) || normalizedFilePath,
+      concerns: Array.isArray(data?.concerns) ? data.concerns : [],
+      suggestions: Array.isArray(data?.suggestions) ? data.suggestions : [],
+      priority: normalizeText(data?.priority) || 'medium',
+      estimatedEffort: normalizeText(data?.estimatedEffort) || 'unknown',
+    };
+  },
+
   async streamExplain({ question, jobId, onChunk, onDone, onError, signal } = {}) {
     const normalizedQuestion = normalizeText(question);
     const normalizedJobId = normalizeText(jobId);
diff --git a/client/src/features/graph/components/GraphToolbar.jsx b/client/src/features/graph/components/GraphToolbar.jsx
index e06f7e5..17ce167 100644
--- a/client/src/features/graph/components/GraphToolbar.jsx
+++ b/client/src/features/graph/components/GraphToolbar.jsx
@@ -6,6 +6,7 @@ import {
   Code2,
   FolderOpen,
   FileCode2,
+  Flame,
   Maximize2,
   Minimize2,
   Share2,
@@ -13,7 +14,13 @@ import {
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { graphService } from '../services/graphService';
-import { clearGraph, selectGraphData } from '../slices/graphSlice';
+import {
+  clearGraph,
+  selectGraphData,
+  selectHeatmapMode,
+  setHeatmapHotspots,
+  setHeatmapMode,
+} from '../slices/graphSlice';
 
 async function copyToClipboard(value) {
   if (navigator?.clipboard?.writeText) {
@@ -36,8 +43,10 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const data = useSelector(selectGraphData);
+  const heatmapMode = useSelector(selectHeatmapMode);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [isSharing, setIsSharing] = useState(false);
+  const [isHeatmapLoading, setIsHeatmapLoading] = useState(false);
   const [shareFeedback, setShareFeedback] = useState(null);
 
   useEffect(() => {
@@ -108,6 +117,30 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
     }
   };
 
+  const handleHeatmapToggle = async () => {
+    if (!jobId || isHeatmapLoading) return;
+
+    if (heatmapMode) {
+      dispatch(setHeatmapMode(false));
+      return;
+    }
+
+    setIsHeatmapLoading(true);
+
+    try {
+      const { hotspots } = await graphService.getHeatmap(jobId);
+      dispatch(setHeatmapHotspots(hotspots));
+      dispatch(setHeatmapMode(true));
+    } catch (error) {
+      setShareFeedback({
+        type: 'error',
+        message: error?.response?.data?.error || error?.message || 'Failed to load heatmap data.',
+      });
+    } finally {
+      setIsHeatmapLoading(false);
+    }
+  };
+
   return (
     <header className="flex items-center justify-between gap-4 px-4 py-2.5 border-b border-border bg-background/80 backdrop-blur-sm shrink-0">
       <div className="flex items-center gap-3 min-w-0">
@@ -143,6 +176,21 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
             {shareFeedback.message}
           </span>
         )}
+        <Button
+          variant={heatmapMode ? 'default' : 'outline'}
+          size="sm"
+          onClick={handleHeatmapToggle}
+          disabled={!jobId || isHeatmapLoading}
+          title={heatmapMode ? 'Disable complexity heatmap' : 'Enable complexity heatmap'}
+          className="gap-1.5"
+        >
+          {isHeatmapLoading ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Flame className="size-3.5" />
+          )}
+          Heatmap
+        </Button>
         <Button
           variant="outline"
           size="sm"
diff --git a/client/src/features/graph/components/GraphView.jsx b/client/src/features/graph/components/GraphView.jsx
index c53a3b1..bc24c29 100644
--- a/client/src/features/graph/components/GraphView.jsx
+++ b/client/src/features/graph/components/GraphView.jsx
@@ -41,6 +41,8 @@ import {
   selectNode,
   selectSelectedNodeId,
   selectGraphData,
+  selectHeatmapMode,
+  selectHeatmapHotspots,
 } from '../slices/graphSlice';
 import { selectDeadFiles, selectHighlightedNodeIds } from '../../ai/slices/aiSlice';
 import { graphService } from '../services/graphService';
@@ -120,26 +122,53 @@ function applyDagreLayout(nodes, edges) {
   });
 }
 
-function graphToFlow(graph, highlightedNodeIds, deadFiles, theme = 'dark') {
+function riskToColor(inDegree = 0, loc = 0, riskScore = null) {
+  const hasRiskScore = Number.isFinite(Number(riskScore));
+  const score = hasRiskScore ? Number(riskScore) : (Number(inDegree) || 0) * ((Number(loc) || 0) / 100);
+
+  if (score > 20) return '#ef4444';
+  if (score > 8) return '#f59e0b';
+  return '#22c55e';
+}
+
+function graphToFlow(
+  graph,
+  highlightedNodeIds,
+  deadFiles,
+  theme = 'dark',
+  heatmapMode = false,
+  heatmapHotspots = {},
+) {
   const highlightSet = new Set(highlightedNodeIds || []);
   const deadSet = new Set(deadFiles || []);
   const colors = getTypeColors(theme);
 
-  const nodes = Object.entries(graph).map(([file, { type }]) => ({
-    id: file,
-    data: { label: file },
-    position: { x: 0, y: 0 },
-    style: {
-      ...getTypeStyle(type, theme),
-      boxShadow: highlightSet.has(file)
-        ? '0 0 0 2px rgba(251,191,36,0.95), 0 0 20px rgba(251,191,36,0.45)'
-        : undefined,
-      border: deadSet.has(file)
-        ? '1px dashed rgba(248,113,113,0.9)'
-        : getTypeStyle(type, theme).border,
-      opacity: deadSet.has(file) ? 0.75 : 1,
-    },
-  }));
+  const nodes = Object.entries(graph).map(([file, { type, metrics }]) => {
+    const baseStyle = getTypeStyle(type, theme);
+    const hotspot = heatmapHotspots[file] || null;
+    const heatmapColor = heatmapMode
+      ? riskToColor(hotspot?.inDegree ?? metrics?.inDegree, hotspot?.loc ?? metrics?.loc, hotspot?.riskScore)
+      : null;
+
+    return {
+      id: file,
+      data: { label: file },
+      position: { x: 0, y: 0 },
+      style: {
+        ...baseStyle,
+        background: heatmapColor ? `${heatmapColor}22` : baseStyle.background,
+        boxShadow: highlightSet.has(file)
+          ? '0 0 0 2px rgba(251,191,36,0.95), 0 0 20px rgba(251,191,36,0.45)'
+          : undefined,
+        border: deadSet.has(file)
+          ? '1px dashed rgba(248,113,113,0.9)'
+          : heatmapColor
+            ? `1px solid ${heatmapColor}`
+            : baseStyle.border,
+        opacity: deadSet.has(file) ? 0.75 : 1,
+      },
+    };
+  });
 
   const edges = [];
   for (const [source, { deps }] of Object.entries(graph)) {
@@ -166,6 +195,8 @@ export default function GraphView() {
   const selectedNodeId = useSelector(selectSelectedNodeId);
   const highlightedNodeIds = useSelector(selectHighlightedNodeIds);
   const deadFiles = useSelector(selectDeadFiles);
+  const heatmapMode = useSelector(selectHeatmapMode);
+  const heatmapHotspots = useSelector(selectHeatmapHotspots);
   const themeMode = useSelector(selectThemeMode);
   const graph = rawData?.graph ?? EMPTY_GRAPH;
   const jobId = rawData?.jobId || null;
@@ -173,8 +204,8 @@ export default function GraphView() {
     rawData?.message || 'No JS/TS files found in the selected directory.';
 
   const { nodes: initialNodes, edges: initialEdges } = useMemo(
-    () => graphToFlow(graph, highlightedNodeIds, deadFiles, themeMode),
-    [graph, highlightedNodeIds, deadFiles, themeMode],
+    () => graphToFlow(graph, highlightedNodeIds, deadFiles, themeMode, heatmapMode, heatmapHotspots),
+    [graph, highlightedNodeIds, deadFiles, themeMode, heatmapMode, heatmapHotspots],
   );
 
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
@@ -320,6 +351,15 @@ export default function GraphView() {
       >
         <MiniMap
           nodeColor={(n) => {
+            if (heatmapMode) {
+              const metrics = graph[n.id]?.metrics || {};
+              const hotspot = heatmapHotspots[n.id] || null;
+              return riskToColor(
+                hotspot?.inDegree ?? metrics?.inDegree,
+                hotspot?.loc ?? metrics?.loc,
+                hotspot?.riskScore,
+              );
+            }
             const colors = getTypeColors(themeMode);
             return (colors[graph[n.id]?.type] || colors.module).border;
           }}
@@ -330,12 +370,30 @@ export default function GraphView() {
         <Background color="rgb(var(--foreground) / 0.05)" gap={20} />
 
         <div className="absolute bottom-14 left-3 z-10 rounded-lg border border-border bg-card/90 backdrop-blur-sm p-3 text-[11px] shadow-lg">
-          {Object.entries(getTypeColors(themeMode)).map(([type, { border }]) => (
-            <div key={type} className="flex items-center gap-2 mb-1 last:mb-0">
-              <span className="inline-block size-2.5 rounded-sm shrink-0" style={{ background: border }} />
-              <span className="text-muted-foreground capitalize">{type}</span>
-            </div>
-          ))}
+          {heatmapMode ? (
+            <>
+              <div className="mb-2 text-muted-foreground font-medium">Complexity heatmap</div>
+              <div className="flex items-center gap-2 mb-1">
+                <span className="inline-block size-2.5 rounded-sm shrink-0" style={{ background: '#22c55e' }} />
+                <span className="text-muted-foreground">Low risk</span>
+              </div>
+              <div className="flex items-center gap-2 mb-1">
+                <span className="inline-block size-2.5 rounded-sm shrink-0" style={{ background: '#f59e0b' }} />
+                <span className="text-muted-foreground">Medium risk</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="inline-block size-2.5 rounded-sm shrink-0" style={{ background: '#ef4444' }} />
+                <span className="text-muted-foreground">High risk</span>
+              </div>
+            </>
+          ) : (
+            Object.entries(getTypeColors(themeMode)).map(([type, { border }]) => (
+              <div key={type} className="flex items-center gap-2 mb-1 last:mb-0">
+                <span className="inline-block size-2.5 rounded-sm shrink-0" style={{ background: border }} />
+                <span className="text-muted-foreground capitalize">{type}</span>
+              </div>
+            ))
+          )}
         </div>
       </ReactFlow>
 
diff --git a/client/src/features/graph/services/graphService.js b/client/src/features/graph/services/graphService.js
index cde2079..449c295 100644
--- a/client/src/features/graph/services/graphService.js
+++ b/client/src/features/graph/services/graphService.js
@@ -88,6 +88,17 @@ export const graphService = {
     return data;
   },
 
+  getHeatmap: async (jobId) => {
+    if (!jobId) {
+      throw new Error('jobId is required to fetch heatmap data.');
+    }
+
+    const { data } = await graphClient.get(`/api/graph/${jobId}/heatmap`);
+    return {
+      hotspots: Array.isArray(data?.hotspots) ? data.hotspots : [],
+    };
+  },
+
   getSharedGraph: async (token) => {
     if (!token) {
       throw new Error('A share token is required to load a shared graph.');
diff --git a/client/src/features/graph/slices/graphSlice.js b/client/src/features/graph/slices/graphSlice.js
index 4cd6fe9..d5157c3 100644
--- a/client/src/features/graph/slices/graphSlice.js
+++ b/client/src/features/graph/slices/graphSlice.js
@@ -157,6 +157,8 @@ const graphSlice = createSlice({
   initialState: {
     data: null,
     job: null,
+    heatmapMode: false,
+    heatmapHotspots: {},
     selectedNodeId: null,
     status: 'idle',
     error: null,
@@ -171,9 +173,27 @@ const graphSlice = createSlice({
     selectNode(state, action) {
       state.selectedNodeId = action.payload;
     },
+    setHeatmapMode(state, action) {
+      state.heatmapMode = Boolean(action.payload);
+    },
+    setHeatmapHotspots(state, action) {
+      const hotspots = Array.isArray(action.payload) ? action.payload : [];
+      state.heatmapHotspots = hotspots.reduce((acc, hotspot) => {
+        const filePath = String(hotspot?.filePath || '').trim();
+        if (!filePath) return acc;
+        acc[filePath] = {
+          riskScore: Number(hotspot?.riskScore) || 0,
+          inDegree: Number(hotspot?.inDegree) || 0,
+          loc: Number(hotspot?.loc) || 0,
+        };
+        return acc;
+      }, {});
+    },
     clearGraph(state) {
       state.data = null;
       state.job = null;
+      state.heatmapMode = false;
+      state.heatmapHotspots = {};
       state.selectedNodeId = null;
       state.status = 'idle';
       state.error = null;
@@ -186,12 +206,16 @@ const graphSlice = createSlice({
         state.error = null;
         state.data = null;
         state.job = null;
+        state.heatmapMode = false;
+        state.heatmapHotspots = {};
         state.selectedNodeId = null;
       })
       .addCase(analyzeCodebase.fulfilled, (state, action) => {
         state.status = 'succeeded';
         state.data = action.payload;
         state.job = action.payload.job || state.job;
+        state.heatmapMode = false;
+        state.heatmapHotspots = {};
       })
       .addCase(analyzeCodebase.rejected, (state, action) => {
         state.status = 'failed';
@@ -206,6 +230,8 @@ const graphSlice = createSlice({
         state.status = 'succeeded';
         state.data = action.payload;
         state.job = action.payload.job || state.job;
+        state.heatmapMode = false;
+        state.heatmapHotspots = {};
       })
       .addCase(loadSavedGraph.rejected, (state, action) => {
         state.status = 'failed';
@@ -220,6 +246,8 @@ const graphSlice = createSlice({
         state.status = 'succeeded';
         state.data = action.payload;
         state.job = action.payload.job || null;
+        state.heatmapMode = false;
+        state.heatmapHotspots = {};
       })
       .addCase(loadSharedGraph.rejected, (state, action) => {
         state.status = 'failed';
@@ -228,12 +256,20 @@ const graphSlice = createSlice({
   },
 });
 
-export const { updateAnalysisJob, selectNode, clearGraph } = graphSlice.actions;
+export const {
+  updateAnalysisJob,
+  selectNode,
+  setHeatmapMode,
+  setHeatmapHotspots,
+  clearGraph,
+} = graphSlice.actions;
 
 export const selectGraphData = (state) => state.graph.data;
 export const selectAnalysisJob = (state) => state.graph.job;
 export const selectGraphStatus = (state) => state.graph.status;
 export const selectGraphError = (state) => state.graph.error;
 export const selectSelectedNodeId = (state) => state.graph.selectedNodeId;
+export const selectHeatmapMode = (state) => state.graph.heatmapMode;
+export const selectHeatmapHotspots = (state) => state.graph.heatmapHotspots;
 
 export default graphSlice.reducer;
diff --git a/server/package.json b/server/package.json
index 55fbbc0..60825b9 100644
--- a/server/package.json
+++ b/server/package.json
@@ -11,7 +11,7 @@
     "dev": "nodemon index.js",
     "migrate": "psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/001_initial.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/002_function_nodes.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/003_share_tokens.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/004_analysis_jobs_metadata.sql",
     "db:migrate": "npm run migrate",
-    "test": "node --test test/ai.queries.test.js test/github.webhook.test.js test/parser.multilang.test.js test/pr-comment.test.js",
+    "test": "node --test test/ai.queries.test.js test/ai.suggest-refactor.test.js test/graph.heatmap.test.js test/github.webhook.test.js test/parser.multilang.test.js test/pr-comment.test.js",
     "test:ai-queries": "node --test test/ai.queries.test.js",
     "test:unit": "vitest run --configLoader native --pool threads",
     "test:coverage": "vitest run --coverage --configLoader native --pool threads"
diff --git a/server/src/api/ai/routes/ai.routes.js b/server/src/api/ai/routes/ai.routes.js
index 0927901..9547f17 100644
--- a/server/src/api/ai/routes/ai.routes.js
+++ b/server/src/api/ai/routes/ai.routes.js
@@ -5,6 +5,7 @@ import OpenAI from 'openai';
 import { QueryAgent } from '../../../agents/query/QueryAgent.js';
 import { AnalysisAgent } from '../../../agents/analysis/AnalysisAgent.js';
 import { pgPool, redisClient } from '../../../infrastructure/connections.js';
+import { requirePlan } from '../../../middleware/planGuard.middleware.js';
 
 const router = Router();
 const openaiClient = process.env.OPENAI_API_KEY
@@ -136,6 +137,91 @@ function toGraphFromRows(nodeRows = [], edgeRows = []) {
 
 router.use(aiLimiter);
 
+router.post('/suggest-refactor', requirePlan('pro', 'team'), async (req, res, next) => {
+  const jobId = String(req.body?.jobId || '').trim();
+  const filePath = String(req.body?.filePath || '').trim();
+
+  if (!jobId || !filePath) {
+    return res.status(400).json({ error: 'jobId and filePath are required.' });
+  }
+
+  try {
+    const nodeResult = await pgPool.query(
+      `
+        SELECT file_path, file_type, declarations, metrics, summary
+        FROM graph_nodes
+        WHERE job_id = $1 AND file_path = $2
+        LIMIT 1
+      `,
+      [jobId, filePath],
+    );
+
+    if (nodeResult.rowCount === 0) {
+      return res.status(404).json({ error: 'File not found.' });
+    }
+
+    if (!openaiClient) {
+      return res.status(503).json({ error: 'OpenAI is not configured.' });
+    }
+
+    const node = nodeResult.rows[0];
+    const exportsList = (node.declarations || []).map((declaration) => declaration?.name).filter(Boolean);
+
+    const prompt = `You are a senior software architect reviewing a file in a dependency graph analysis.
+
+File: ${node.file_path}
+Type: ${node.file_type}
+Lines of code: ${node.metrics?.loc || 'unknown'}
+In-degree (files that import this): ${node.metrics?.inDegree || 0}
+Out-degree (files this imports): ${node.metrics?.outDegree || 0}
+Exports: ${exportsList.join(', ') || 'none'}
+Summary: ${node.summary || 'no summary available'}
+
+Respond with a JSON object:
+{
+  "concerns": ["list of specific architectural concerns"],
+  "suggestions": ["list of concrete refactoring steps"],
+  "priority": "high | medium | low",
+  "estimatedEffort": "hours estimate as a string, e.g. '2-4 hours'"
+}
+Only respond with the JSON object.`;
+
+    const response = await openaiClient.chat.completions.create({
+      model: process.env.OPENAI_MODEL || 'gpt-4o-mini',
+      max_tokens: 400,
+      temperature: 0.2,
+      messages: [{ role: 'user', content: prompt }],
+    });
+
+    const content = response?.choices?.[0]?.message?.content?.trim() || '';
+
+    let parsed;
+    try {
+      parsed = JSON.parse(content);
+    } catch {
+      parsed = {
+        concerns: [],
+        suggestions: content ? [content] : [],
+        priority: 'medium',
+        estimatedEffort: 'unknown',
+      };
+    }
+
+    return res.status(200).json({
+      filePath,
+      concerns: Array.isArray(parsed?.concerns) ? parsed.concerns : [],
+      suggestions: Array.isArray(parsed?.suggestions) ? parsed.suggestions : [],
+      priority: ['high', 'medium', 'low'].includes(parsed?.priority) ? parsed.priority : 'medium',
+      estimatedEffort:
+        typeof parsed?.estimatedEffort === 'string' && parsed.estimatedEffort.trim()
+          ? parsed.estimatedEffort.trim()
+          : 'unknown',
+    });
+  } catch (error) {
+    return next(error);
+  }
+});
+
 router.get('/queries', async (req, res, next) => {
   const authUser = getAuthUser(req);
   if (!authUser?.id) {
diff --git a/server/src/api/graph/routes/graph.routes.js b/server/src/api/graph/routes/graph.routes.js
index 087fda7..3bf2e6a 100644
--- a/server/src/api/graph/routes/graph.routes.js
+++ b/server/src/api/graph/routes/graph.routes.js
@@ -161,6 +161,40 @@ router.post('/:jobId/share', shareLimiter, async (req, res, next) => {
   }
 });
 
+router.get('/:jobId/heatmap', async (req, res, next) => {
+  const { jobId } = req.params;
+
+  if (!jobId) {
+    return res.status(400).json({ error: 'jobId is required.' });
+  }
+
+  try {
+    const result = await pgPool.query(
+      `
+        SELECT file_path, file_type, metrics,
+               (metrics->>'inDegree')::int * COALESCE((metrics->>'complexity')::numeric, 1) AS risk_score
+        FROM graph_nodes
+        WHERE job_id = $1
+        ORDER BY risk_score DESC
+        LIMIT 50
+      `,
+      [jobId],
+    );
+
+    return res.status(200).json({
+      hotspots: result.rows.map((row) => ({
+        filePath: row.file_path,
+        type: row.file_type,
+        riskScore: Number.parseFloat(row.risk_score) || 0,
+        inDegree: Number(row.metrics?.inDegree) || 0,
+        loc: Number(row.metrics?.loc) || 0,
+      })),
+    });
+  } catch (error) {
+    return next(error);
+  }
+});
+
 router.get('/:jobId', async (req, res, next) => {
   const { jobId } = req.params;
 
diff --git a/server/test/ai.suggest-refactor.test.js b/server/test/ai.suggest-refactor.test.js
new file mode 100644
index 0000000..3a3ac6d
--- /dev/null
+++ b/server/test/ai.suggest-refactor.test.js
@@ -0,0 +1,226 @@
+import { after, before, test } from 'node:test';
+import assert from 'node:assert/strict';
+import jwt from 'jsonwebtoken';
+
+process.env.JWT_SECRET = process.env.JWT_SECRET || 'test-secret';
+process.env.DATABASE_URL =
+  process.env.DATABASE_URL || 'postgres://postgres:postgres@localhost:5433/codegraph';
+process.env.REDIS_URL = process.env.REDIS_URL || 'redis://localhost:6379';
+delete process.env.OPENAI_API_KEY;
+
+let app;
+let pgPool;
+let redisClient;
+let server;
+let baseUrl;
+
+async function settleWithTimeout(promise, timeoutMs = 3000) {
+  let timer;
+
+  try {
+    await Promise.race([
+      promise.catch(() => undefined),
+      new Promise((resolve) => {
+        timer = setTimeout(resolve, timeoutMs);
+        timer.unref?.();
+      }),
+    ]);
+  } finally {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }
+}
+
+before(async () => {
+  ({ default: app } = await import('../app.js'));
+  ({ pgPool, redisClient } = await import('../src/infrastructure/connections.js'));
+
+  await new Promise((resolve) => {
+    server = app.listen(0, resolve);
+  });
+
+  const address = server.address();
+  baseUrl = `http://127.0.0.1:${address.port}`;
+});
+
+after(async () => {
+  await settleWithTimeout(
+    new Promise((resolve, reject) => {
+      server.close((error) => {
+        if (error) return reject(error);
+        return resolve();
+      });
+    }),
+  );
+
+  await settleWithTimeout(redisClient.quit());
+  await settleWithTimeout(pgPool.end());
+});
+
+test('POST /api/ai/suggest-refactor requires authentication', async () => {
+  const response = await fetch(`${baseUrl}/api/ai/suggest-refactor`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ jobId: 'x', filePath: 'src/file.js' }),
+  });
+
+  assert.equal(response.status, 401);
+  const payload = await response.json();
+  assert.equal(payload.error, 'Authentication required.');
+});
+
+test('POST /api/ai/suggest-refactor validates required fields', async () => {
+  const userId = '7a28f1e2-4477-449b-8c89-963b6c4f7111';
+  const token = jwt.sign({ id: userId, username: 'refactor-user' }, process.env.JWT_SECRET, {
+    expiresIn: '1h',
+  });
+
+  await pgPool.query(
+    `
+      INSERT INTO users (id, username, email)
+      VALUES ($1, $2, $3)
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [userId, 'refactor-user', 'refactor@example.com'],
+  );
+
+  try {
+    const response = await fetch(`${baseUrl}/api/ai/suggest-refactor`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({ jobId: 'job-only' }),
+    });
+
+    assert.equal(response.status, 400);
+    const payload = await response.json();
+    assert.equal(payload.error, 'jobId and filePath are required.');
+  } finally {
+    await pgPool.query('DELETE FROM users WHERE id = $1', [userId]);
+  }
+});
+
+test('POST /api/ai/suggest-refactor returns 404 when file is not part of the graph job', async () => {
+  const userId = 'd12f12de-94f9-4330-9414-25f4a4f07222';
+  const repositoryId = 'a0f9d493-fb2a-4e89-9f4d-48448a7e4333';
+  const jobId = '97ab3bb2-4ef6-4c3a-8df0-f4bf8f91a444';
+  const token = jwt.sign({ id: userId, username: 'refactor-user-2' }, process.env.JWT_SECRET, {
+    expiresIn: '1h',
+  });
+
+  await pgPool.query(
+    `
+      INSERT INTO users (id, username, email)
+      VALUES ($1, $2, $3)
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [userId, 'refactor-user-2', 'refactor2@example.com'],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO repositories (id, owner_id, source, full_name)
+      VALUES ($1, $2, 'local', 'refactor/repo')
+      ON CONFLICT (owner_id, full_name) DO UPDATE
+      SET full_name = EXCLUDED.full_name
+    `,
+    [repositoryId, userId],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO analysis_jobs (id, repository_id, user_id, status)
+      VALUES ($1, $2, $3, 'completed')
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [jobId, repositoryId, userId],
+  );
+
+  try {
+    const response = await fetch(`${baseUrl}/api/ai/suggest-refactor`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({ jobId, filePath: 'src/missing-file.js' }),
+    });
+
+    assert.equal(response.status, 404);
+    const payload = await response.json();
+    assert.equal(payload.error, 'File not found.');
+  } finally {
+    await pgPool.query('DELETE FROM analysis_jobs WHERE id = $1', [jobId]);
+    await pgPool.query('DELETE FROM repositories WHERE id = $1', [repositoryId]);
+    await pgPool.query('DELETE FROM users WHERE id = $1', [userId]);
+  }
+});
+
+test('POST /api/ai/suggest-refactor returns 503 when OpenAI is not configured', async () => {
+  const userId = '97bcd6cf-eb90-40dc-a429-11eb45422555';
+  const repositoryId = '5cd42d0d-e6d3-40dd-966e-5a2d4b0d3666';
+  const jobId = '8085b4cb-1718-428e-9694-9e22cfb76777';
+  const token = jwt.sign({ id: userId, username: 'refactor-user-3' }, process.env.JWT_SECRET, {
+    expiresIn: '1h',
+  });
+
+  await pgPool.query(
+    `
+      INSERT INTO users (id, username, email)
+      VALUES ($1, $2, $3)
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [userId, 'refactor-user-3', 'refactor3@example.com'],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO repositories (id, owner_id, source, full_name)
+      VALUES ($1, $2, 'local', 'refactor/repo-3')
+      ON CONFLICT (owner_id, full_name) DO UPDATE
+      SET full_name = EXCLUDED.full_name
+    `,
+    [repositoryId, userId],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO analysis_jobs (id, repository_id, user_id, status)
+      VALUES ($1, $2, $3, 'completed')
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [jobId, repositoryId, userId],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO graph_nodes (job_id, file_path, file_type, declarations, metrics, summary)
+      VALUES ($1, 'src/high-risk.js', 'service', '[{"name":"runRisk"}]'::jsonb, '{"loc": 200, "inDegree": 8, "outDegree": 5}'::jsonb, 'Hot path orchestration')
+      ON CONFLICT (job_id, file_path) DO NOTHING
+    `,
+    [jobId],
+  );
+
+  try {
+    const response = await fetch(`${baseUrl}/api/ai/suggest-refactor`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({ jobId, filePath: 'src/high-risk.js' }),
+    });
+
+    assert.equal(response.status, 503);
+    const payload = await response.json();
+    assert.equal(payload.error, 'OpenAI is not configured.');
+  } finally {
+    await pgPool.query('DELETE FROM graph_nodes WHERE job_id = $1', [jobId]);
+    await pgPool.query('DELETE FROM analysis_jobs WHERE id = $1', [jobId]);
+    await pgPool.query('DELETE FROM repositories WHERE id = $1', [repositoryId]);
+    await pgPool.query('DELETE FROM users WHERE id = $1', [userId]);
+  }
+});
diff --git a/server/test/graph.heatmap.test.js b/server/test/graph.heatmap.test.js
new file mode 100644
index 0000000..1595e68
--- /dev/null
+++ b/server/test/graph.heatmap.test.js
@@ -0,0 +1,124 @@
+import { after, before, test } from 'node:test';
+import assert from 'node:assert/strict';
+
+process.env.JWT_SECRET = process.env.JWT_SECRET || 'test-secret';
+process.env.DATABASE_URL =
+  process.env.DATABASE_URL || 'postgres://postgres:postgres@localhost:5433/codegraph';
+process.env.REDIS_URL = process.env.REDIS_URL || 'redis://localhost:6379';
+
+let app;
+let pgPool;
+let redisClient;
+let server;
+let baseUrl;
+
+async function settleWithTimeout(promise, timeoutMs = 3000) {
+  let timer;
+
+  try {
+    await Promise.race([
+      promise.catch(() => undefined),
+      new Promise((resolve) => {
+        timer = setTimeout(resolve, timeoutMs);
+        timer.unref?.();
+      }),
+    ]);
+  } finally {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }
+}
+
+before(async () => {
+  ({ default: app } = await import('../app.js'));
+  ({ pgPool, redisClient } = await import('../src/infrastructure/connections.js'));
+
+  await new Promise((resolve) => {
+    server = app.listen(0, resolve);
+  });
+
+  const address = server.address();
+  baseUrl = `http://127.0.0.1:${address.port}`;
+});
+
+after(async () => {
+  await settleWithTimeout(
+    new Promise((resolve, reject) => {
+      server.close((error) => {
+        if (error) return reject(error);
+        return resolve();
+      });
+    }),
+  );
+
+  await settleWithTimeout(redisClient.quit());
+  await settleWithTimeout(pgPool.end());
+});
+
+test('GET /api/graph/:jobId/heatmap returns nodes ordered by risk score', async () => {
+  const userId = '9e4f6d7a-31e1-4d9f-8575-b9e5428eb111';
+  const repositoryId = '2c4ef2f5-019e-41fd-b6f1-9652d4a7c222';
+  const jobId = '14882a4f-f885-4488-8afb-7b15a2c3d333';
+
+  await pgPool.query(
+    `
+      INSERT INTO users (id, username, email)
+      VALUES ($1, $2, $3)
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [userId, 'heatmap-user', 'heatmap@example.com'],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO repositories (id, owner_id, source, full_name)
+      VALUES ($1, $2, 'local', 'heatmap/repo')
+      ON CONFLICT (owner_id, full_name) DO UPDATE
+      SET full_name = EXCLUDED.full_name
+    `,
+    [repositoryId, userId],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO analysis_jobs (id, repository_id, user_id, status)
+      VALUES ($1, $2, $3, 'completed')
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [jobId, repositoryId, userId],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO graph_nodes (job_id, file_path, file_type, declarations, metrics)
+      VALUES
+        ($1, 'src/high-risk.js', 'service', '[]'::jsonb, '{"inDegree": 4, "complexity": 7, "loc": 240}'::jsonb),
+        ($1, 'src/medium-risk.js', 'module', '[]'::jsonb, '{"inDegree": 3, "complexity": 3, "loc": 150}'::jsonb),
+        ($1, 'src/low-risk.js', 'util', '[]'::jsonb, '{"inDegree": 1, "complexity": 1, "loc": 40}'::jsonb)
+      ON CONFLICT (job_id, file_path) DO NOTHING
+    `,
+    [jobId],
+  );
+
+  try {
+    const response = await fetch(`${baseUrl}/api/graph/${jobId}/heatmap`);
+    assert.equal(response.status, 200);
+
+    const payload = await response.json();
+    assert.equal(Array.isArray(payload.hotspots), true);
+    assert.equal(payload.hotspots.length, 3);
+
+    assert.equal(payload.hotspots[0].filePath, 'src/high-risk.js');
+    assert.equal(payload.hotspots[0].riskScore, 28);
+    assert.equal(payload.hotspots[1].filePath, 'src/medium-risk.js');
+    assert.equal(payload.hotspots[1].riskScore, 9);
+    assert.equal(payload.hotspots[2].filePath, 'src/low-risk.js');
+    assert.equal(payload.hotspots[2].riskScore, 1);
+  } finally {
+    await pgPool.query('DELETE FROM graph_nodes WHERE job_id = $1', [jobId]);
+    await pgPool.query('DELETE FROM analysis_jobs WHERE id = $1', [jobId]);
+    await pgPool.query('DELETE FROM repositories WHERE id = $1', [repositoryId]);
+    await pgPool.query('DELETE FROM users WHERE id = $1', [userId]);
+  }
+});

From 89190558bec81a5466a9417b665c2d98742f9076 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 14:42:12 +0530
Subject: [PATCH 02/19] style: apply theme throughout

---
 client/src/components/ui/button.jsx           |  3 +-
 client/src/components/ui/input.jsx            |  2 +-
 client/src/components/ui/select.jsx           |  2 +-
 .../src/features/ai/components/QueryBar.jsx   | 18 ++---
 .../features/ai/components/QueryHistory.jsx   | 24 +++----
 .../dashboard/pages/DashboardPage.jsx         | 10 +--
 .../features/graph/components/AnalyzeForm.jsx | 65 ++++++++++---------
 .../graph/components/GraphToolbar.jsx         | 46 +++++++------
 .../jobs/components/JobProgressBar.jsx        | 40 +++++++-----
 client/src/index.css                          | 61 ++++++++++++++++-
 10 files changed, 172 insertions(+), 99 deletions(-)

diff --git a/client/src/components/ui/button.jsx b/client/src/components/ui/button.jsx
index 0f180cf..f4fc2d9 100644
--- a/client/src/components/ui/button.jsx
+++ b/client/src/components/ui/button.jsx
@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[transform,background-color,border-color,text-color,box-shadow] duration-200 ease-[var(--ease-out)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.97]",
   {
     variants: {
       variant: {
@@ -17,6 +17,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        neumo: "bg-background shadow-neu-flat hover:shadow-neu-inset text-foreground transition-all duration-300",
       },
       size: {
         default: "h-10 px-4 py-2",
diff --git a/client/src/components/ui/input.jsx b/client/src/components/ui/input.jsx
index 9db2b49..6b8c2b8 100644
--- a/client/src/components/ui/input.jsx
+++ b/client/src/components/ui/input.jsx
@@ -6,7 +6,7 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     <input
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md border border-input bg-background/50 px-3 py-2 text-sm shadow-neu-inset transition-all duration-300 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/client/src/components/ui/select.jsx b/client/src/components/ui/select.jsx
index 9dfd58e..7de9a91 100644
--- a/client/src/components/ui/select.jsx
+++ b/client/src/components/ui/select.jsx
@@ -21,7 +21,7 @@ function SelectTrigger({ className, children, ...props }) {
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       className={cn(
-        'border-input data-placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*=text-])]:text-muted-foreground [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0',
+        'border-input data-placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-10 w-full items-center justify-between rounded-md border bg-background/50 px-3 py-2 text-sm whitespace-nowrap shadow-neu-inset transition-all duration-300 outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*=text-])]:text-muted-foreground [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0',
         className,
       )}
       {...props}
diff --git a/client/src/features/ai/components/QueryBar.jsx b/client/src/features/ai/components/QueryBar.jsx
index a4ce3b0..699b404 100644
--- a/client/src/features/ai/components/QueryBar.jsx
+++ b/client/src/features/ai/components/QueryBar.jsx
@@ -53,10 +53,10 @@ export default function QueryBar({ jobId }) {
     <div className="relative w-full">
       {/* Minimalist Query Input */}
       <div
-        className={`transition-all duration-300 ease-out ${
+        className={`transition-all duration-500 ease-[var(--ease-out)] ${
           expanded || hasResult
-            ? 'ring-1 ring-primary/20 rounded-lg bg-background'
-            : 'bg-muted/40 hover:bg-muted/60 rounded-full'
+            ? 'shadow-neu-flat rounded-xl bg-background/60'
+            : 'shadow-neu-inset rounded-full bg-background/40 hover:bg-background/60'
         }`}
       >
         <form onSubmit={handleAsk} className="flex items-center gap-2 px-4 py-3">
@@ -87,17 +87,17 @@ export default function QueryBar({ jobId }) {
           <Button
             type="submit"
             size="sm"
-            variant="default"
+            variant="neumo"
             disabled={!question.trim() || !jobId || isLoading}
             className="ml-auto"
           >
             {isLoading ? (
               <span className="flex items-center gap-2">
-                <span className="size-3 border-1.5 border-current border-t-transparent rounded-full animate-spin" />
+                <Loader2 className="size-3.5 animate-spin" />
                 Searching
               </span>
             ) : (
-              'Ask'
+              'Ask AI'
             )}
           </Button>
         </form>
@@ -105,10 +105,10 @@ export default function QueryBar({ jobId }) {
         {/* Results Display */}
         {(hasResult || hasError) && (
           <div
-            className={`border-t transition-all duration-300 ${
+            className={`transition-all duration-500 animate-in fade-in slide-in-from-top-2 ${
               hasResult
-                ? 'border-muted bg-gradient-to-b from-background via-background to-muted/20'
-                : 'border-destructive/20 bg-destructive/5'
+                ? 'border-t border-border/10 bg-gradient-to-b from-transparent to-background/20'
+                : 'border-t border-destructive/10 bg-destructive/5'
             }`}
           >
             <div className="px-4 py-3 space-y-3">
diff --git a/client/src/features/ai/components/QueryHistory.jsx b/client/src/features/ai/components/QueryHistory.jsx
index 2abc625..712195b 100644
--- a/client/src/features/ai/components/QueryHistory.jsx
+++ b/client/src/features/ai/components/QueryHistory.jsx
@@ -94,25 +94,25 @@ export default function QueryHistory({ jobId }) {
   if (!jobId) return null;
 
   return (
-    <div className="mt-2 rounded-lg border border-border/70 bg-background/40">
+    <div className="mt-2 rounded-xl shadow-neu-inset border-none bg-background/20 transition-all duration-500 overflow-hidden">
       <button
         type="button"
         onClick={() => setIsOpen((open) => !open)}
-        className="flex w-full items-center justify-between px-3 py-2 text-left"
+        className="flex w-full items-center justify-between px-4 py-3 text-left transition-all duration-300 hover:bg-background/40 active:scale-[0.99]"
       >
-        <span className="flex items-center gap-2 text-xs uppercase tracking-wide text-muted-foreground">
+        <span className="flex items-center gap-2.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60">
           <History className="size-3.5" />
-          Recent queries
+          Recent Queries
         </span>
-        <span className="flex items-center gap-2">
-          {isLoading && <Loader2 className="size-3.5 animate-spin text-muted-foreground" />}
+        <span className="flex items-center gap-3">
+          {isLoading && <Loader2 className="size-3.5 animate-spin text-gold/60" />}
           {hasQueries && (
-            <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] text-muted-foreground">
+            <span className="rounded-full shadow-neu-inset border-none bg-background/50 px-2.5 py-0.5 text-[9px] font-bold text-gold/80">
               {queries.length}
             </span>
           )}
           <ChevronDown
-            className={`size-3.5 text-muted-foreground transition-transform ${isOpen ? 'rotate-180' : ''}`}
+            className={`size-3.5 text-muted-foreground/40 transition-transform duration-500 ease-[var(--ease-out)] ${isOpen ? 'rotate-180' : ''}`}
           />
         </span>
       </button>
@@ -128,7 +128,7 @@ export default function QueryHistory({ jobId }) {
           )}
 
           {!error && visibleQueries.length > 0 && (
-            <ul className="flex flex-col gap-1">
+            <ul className="flex flex-col gap-1.5 animate-in fade-in slide-in-from-top-2 duration-500">
               {visibleQueries.map((queryItem) => (
                 <li key={queryItem.id}>
                   <button
@@ -137,10 +137,10 @@ export default function QueryHistory({ jobId }) {
                       if (!queryItem.question) return;
                       dispatch(queryGraph({ question: queryItem.question, jobId }));
                     }}
-                    className="group flex w-full items-start justify-between gap-3 rounded-md px-2 py-1.5 text-left hover:bg-muted/60"
+                    className="group flex w-full items-start justify-between gap-4 rounded-xl px-3 py-2.5 text-left transition-all duration-300 hover:bg-background shadow-neu-flat active:scale-[0.98]"
                   >
-                    <span className="line-clamp-2 text-xs text-foreground/90">{queryItem.question}</span>
-                    <span className="shrink-0 text-[10px] text-muted-foreground">
+                    <span className="line-clamp-2 text-xs font-medium text-foreground/80 group-hover:text-gold transition-colors">{queryItem.question}</span>
+                    <span className="shrink-0 text-[9px] font-bold uppercase tracking-tighter text-muted-foreground/30 mt-0.5">
                       {formatRelativeDate(queryItem.createdAt)}
                     </span>
                   </button>
diff --git a/client/src/features/dashboard/pages/DashboardPage.jsx b/client/src/features/dashboard/pages/DashboardPage.jsx
index bfdacf6..24c89d4 100644
--- a/client/src/features/dashboard/pages/DashboardPage.jsx
+++ b/client/src/features/dashboard/pages/DashboardPage.jsx
@@ -132,7 +132,7 @@ function MetricCard({ icon, title, value, helper, index = 0 }) {
     >
       <CardHeader className="pb-3">
         <div className="flex items-center gap-3 text-xs uppercase tracking-widest font-bold text-muted-foreground/70">
-          <div className="flex size-9 items-center justify-center rounded-xl bg-background shadow-sm border border-border/20">
+          <div className="flex size-9 items-center justify-center rounded-xl bg-background/50 shadow-neu-inset border-none">
             {icon}
           </div>
           <span>{title}</span>
@@ -416,7 +416,7 @@ export default function DashboardPage() {
             >
               <CardHeader className="pb-4">
                 <div className="flex items-center gap-4">
-                  <div className="flex size-10 items-center justify-center rounded-xl bg-gold/10 shadow-sm border border-gold/20 group-hover:scale-110 transition-transform duration-300">
+                  <div className="flex size-10 items-center justify-center rounded-xl bg-gold/10 shadow-neu-inset border-none group-hover:scale-110 transition-transform duration-300">
                     {action.icon}
                   </div>
                   <CardTitle className="text-base font-display font-bold tracking-tight">{action.title}</CardTitle>
@@ -469,7 +469,7 @@ export default function DashboardPage() {
         </div>
 
         <div className="mt-4">
-          <Card className="mb-4">
+          <Card className="mb-4 shadow-neu-inset border-none bg-background/40 rounded-2xl animate-in fade-in slide-in-from-bottom-2 duration-500 delay-300">
             <CardContent className="flex flex-col gap-3 py-4">
               <div className="grid gap-3 lg:grid-cols-3">
                 <div className="relative lg:col-span-1">
@@ -624,7 +624,7 @@ export default function DashboardPage() {
                             {repo.source} <span className="mx-1 opacity-30">|</span> {repo.branch || 'unknown'}
                           </p>
                         </div>
-                        <span className="rounded-xl border border-border/20 bg-background/50 px-3 py-1 text-[9px] font-black uppercase tracking-[0.15em] text-muted-foreground shadow-sm">
+                        <span className="rounded-xl border-none bg-background/50 px-3 py-1 text-[9px] font-black uppercase tracking-[0.15em] text-muted-foreground shadow-neu-inset">
                           {repo.status}
                         </span>
                       </div>
@@ -742,7 +742,7 @@ export default function DashboardPage() {
                                 return (
                                   <div
                                     key={job.id}
-                                    className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border/20 bg-background/60 px-3 py-2"
+                                    className="flex flex-wrap items-center justify-between gap-2 rounded-xl shadow-neu-inset border-none bg-background/60 px-4 py-3 transition-all duration-300 hover:bg-background/80"
                                   >
                                     <div className="flex min-w-0 flex-col gap-0.5 text-[11px] text-muted-foreground">
                                       <span className="font-semibold text-foreground/80">
diff --git a/client/src/features/graph/components/AnalyzeForm.jsx b/client/src/features/graph/components/AnalyzeForm.jsx
index 4d08f57..13e2763 100644
--- a/client/src/features/graph/components/AnalyzeForm.jsx
+++ b/client/src/features/graph/components/AnalyzeForm.jsx
@@ -45,13 +45,13 @@ function toErrorMessage(err, fallback) {
 
 function SourceToggle({ value, onChange, disabled }) {
   return (
-    <div className="grid grid-cols-2 gap-2 rounded-lg border border-border bg-muted/30 p-1">
+    <div className="grid grid-cols-2 gap-2 rounded-xl shadow-neu-inset border-none bg-background/40 p-1.5 transition-all duration-300">
       <button
         type="button"
-        className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${
           value === 'local'
-            ? 'bg-background shadow-sm text-foreground'
-            : 'text-muted-foreground hover:text-foreground'
+            ? 'bg-background shadow-neu-flat text-foreground'
+            : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/20'
         }`}
         disabled={disabled}
         onClick={() => onChange('local')}
@@ -60,10 +60,10 @@ function SourceToggle({ value, onChange, disabled }) {
       </button>
       <button
         type="button"
-        className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${
           value === 'github'
-            ? 'bg-background shadow-sm text-foreground'
-            : 'text-muted-foreground hover:text-foreground'
+            ? 'bg-background shadow-neu-flat text-foreground'
+            : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/20'
         }`}
         disabled={disabled}
         onClick={() => onChange('github')}
@@ -76,13 +76,13 @@ function SourceToggle({ value, onChange, disabled }) {
 
 function GitHubModeToggle({ value, onChange, disabled }) {
   return (
-    <div className="grid grid-cols-2 gap-2 rounded-lg border border-border bg-muted/30 p-1">
+    <div className="grid grid-cols-2 gap-2 rounded-xl shadow-neu-inset border-none bg-background/40 p-1.5 transition-all duration-300">
       <button
         type="button"
-        className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${
           value === 'public'
-            ? 'bg-background shadow-sm text-foreground'
-            : 'text-muted-foreground hover:text-foreground'
+            ? 'bg-background shadow-neu-flat text-foreground'
+            : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/20'
         }`}
         disabled={disabled}
         onClick={() => onChange('public')}
@@ -91,10 +91,10 @@ function GitHubModeToggle({ value, onChange, disabled }) {
       </button>
       <button
         type="button"
-        className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${
           value === 'owned'
-            ? 'bg-background shadow-sm text-foreground'
-            : 'text-muted-foreground hover:text-foreground'
+            ? 'bg-background shadow-neu-flat text-foreground'
+            : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/20'
         }`}
         disabled={disabled}
         onClick={() => onChange('owned')}
@@ -525,8 +525,8 @@ export default function AnalyzeForm() {
 
   return (
     <div className="flex flex-col items-center justify-center min-h-[calc(100vh-3.5rem)] px-4 py-16">
-      <div className="mb-2 flex size-14 items-center justify-center rounded-2xl border border-border bg-muted">
-        <Sparkles className="size-6 text-primary" />
+      <div className="mb-2 flex size-14 items-center justify-center rounded-2xl shadow-neu-inset border-none bg-background/50 animate-in zoom-in duration-700">
+        <Sparkles className="size-6 text-gold" />
       </div>
       <h1 className="mt-4 text-4xl font-bold tracking-tight text-center">
         Analyze a Codebase
@@ -547,8 +547,8 @@ export default function AnalyzeForm() {
         />
 
         {source === 'local' && (
-          <div className="flex flex-col gap-2 rounded-xl border border-border bg-card p-4">
-            <Label htmlFor="project-path">Local repository path</Label>
+          <div className="flex flex-col gap-4 rounded-2xl shadow-neu-inset border-none bg-background/40 p-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
+            <Label htmlFor="project-path" className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground/70">Local repository path</Label>
             <div className="flex gap-2">
               <div className="relative flex-1">
                 <FolderOpen className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
@@ -642,7 +642,7 @@ export default function AnalyzeForm() {
         )}
 
         {source === 'github' && (
-          <div className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4">
+          <div className="flex flex-col gap-4 rounded-2xl shadow-neu-inset border-none bg-background/40 p-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
             <GitHubModeToggle
               value={githubMode}
               onChange={handleGitHubModeChange}
@@ -718,7 +718,7 @@ export default function AnalyzeForm() {
                     id="public-branch"
                     value={publicBranch}
                     onChange={(e) => setPublicBranch(e.target.value)}
-                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
+                    className="flex h-11 w-full rounded-xl shadow-neu-inset border-none bg-background/50 px-4 py-2 text-sm font-medium text-foreground transition-all duration-300 focus:ring-1 focus:ring-gold/50 disabled:cursor-not-allowed disabled:opacity-50 appearance-none"
                     disabled={
                       isLoading ||
                       publicLoading ||
@@ -791,20 +791,20 @@ export default function AnalyzeForm() {
                     )}
 
                     {!ownedReposLoading && filteredOwnedRepos.length > 0 && (
-                      <div className="grid gap-2 max-h-60 overflow-auto pr-1 rounded-md border border-border p-2">
+                      <div className="grid gap-2 max-h-60 overflow-auto pr-1 rounded-xl shadow-neu-inset border-none bg-background/20 p-3">
                         {filteredOwnedRepos.map((repo) => (
                           <button
                             key={repo.id}
                             type="button"
-                            className={`text-left rounded-md border px-3 py-2 transition-colors ${
+                            className={`text-left rounded-lg border-none px-4 py-3 transition-all duration-300 active:scale-[0.98] ${
                               selectedOwnedRepo?.id === repo.id
-                                ? 'border-primary bg-primary/10'
-                                : 'border-border hover:bg-muted/50'
+                                ? 'bg-background shadow-neu-flat text-foreground ring-1 ring-gold/40'
+                                : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/40'
                             }`}
                             onClick={() => handleOwnedRepoSelect(repo)}
                           >
-                            <div className="font-medium text-sm">{repo.fullName}</div>
-                            <div className="text-xs text-muted-foreground mt-1">
+                            <div className="font-bold text-sm tracking-tight">{repo.fullName}</div>
+                            <div className="text-[10px] uppercase font-bold tracking-widest opacity-40 mt-1">
                               Default branch: {repo.defaultBranch}
                             </div>
                           </button>
@@ -821,9 +821,10 @@ export default function AnalyzeForm() {
                 )}
 
                 {selectedOwnedRepo && (
-                  <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-xs">
-                    <p className="font-medium text-foreground">
-                      Selected repository: {selectedOwnedRepo.fullName}
+                  <div className="rounded-xl shadow-neu-inset border-none bg-background/60 px-4 py-3 text-xs">
+                    <p className="font-bold uppercase tracking-widest text-[9px] opacity-40">Selected repository</p>
+                    <p className="font-bold text-foreground mt-0.5">
+                      {selectedOwnedRepo.fullName}
                     </p>
                   </div>
                 )}
@@ -836,13 +837,13 @@ export default function AnalyzeForm() {
                 )}
 
                 {selectedOwnedRepo && (
-                  <div className="flex flex-col gap-1.5 rounded-md border border-border bg-muted/20 p-3">
-                    <Label htmlFor="owned-branch-inline">Branch</Label>
+                  <div className="flex flex-col gap-2 rounded-xl shadow-neu-inset border-none bg-background/40 p-4">
+                    <Label htmlFor="owned-branch-inline" className="text-[9px] uppercase font-bold tracking-[0.2em] opacity-40">Select Branch</Label>
                     <select
                       id="owned-branch-inline"
                       value={ownedBranch}
                       onChange={(e) => setOwnedBranch(e.target.value)}
-                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
+                      className="flex h-11 w-full rounded-xl shadow-neu-inset border-none bg-background/50 px-4 py-2 text-sm font-bold text-foreground transition-all duration-300 focus:ring-1 focus:ring-gold/50 disabled:cursor-not-allowed disabled:opacity-50 appearance-none"
                       disabled={ownedBranchesLoading || ownedBranches.length === 0}
                     >
                       <option value="">
diff --git a/client/src/features/graph/components/GraphToolbar.jsx b/client/src/features/graph/components/GraphToolbar.jsx
index 17ce167..d25c8ae 100644
--- a/client/src/features/graph/components/GraphToolbar.jsx
+++ b/client/src/features/graph/components/GraphToolbar.jsx
@@ -142,26 +142,32 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
   };
 
   return (
-    <header className="flex items-center justify-between gap-4 px-4 py-2.5 border-b border-border bg-background/80 backdrop-blur-sm shrink-0">
+    <header className="flex items-center justify-between gap-4 px-6 py-3 shadow-neu-inset border-none bg-background/60 backdrop-blur-md shrink-0 transition-all duration-500">
       <div className="flex items-center gap-3 min-w-0">
-        <div className="flex items-center gap-1.5 shrink-0">
-          <Code2 className="size-4 text-primary" />
-          <span className="font-bold text-sm">
-            CodeGraph<span className="text-primary">AI</span>
+        <div className="flex items-center gap-2 shrink-0">
+          <div className="flex size-8 items-center justify-center rounded-xl shadow-neu-inset border-none bg-background/50 text-gold scale-110">
+            <Code2 className="size-4" />
+          </div>
+          <span className="font-display font-black text-sm tracking-tight">
+            CodeGraph<span className="text-gold">AI</span>
           </span>
         </div>
 
-        <span className="text-muted-foreground hidden sm:inline">·</span>
-
-        <div className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground min-w-0">
-          <FolderOpen className="size-3.5 shrink-0" />
-          <span className="font-mono truncate max-w-xs">{rootDir}</span>
+        <span className="text-muted-foreground/20 hidden sm:inline">|</span>
+        
+        <div className="hidden sm:flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 min-w-0">
+          <div className="flex size-6 items-center justify-center rounded-lg shadow-neu-inset bg-background/40">
+            <FolderOpen className="size-3" />
+          </div>
+          <span className="truncate max-w-[200px] hover:text-foreground transition-colors cursor-default">{rootDir}</span>
         </div>
 
-        <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
-          <FileCode2 className="size-3.5" />
+        <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground/50 shrink-0">
+          <div className="flex size-6 items-center justify-center rounded-lg shadow-neu-inset bg-background/40">
+            <FileCode2 className="size-3" />
+          </div>
           <span>
-            {fileCount} file{fileCount !== 1 ? 's' : ''}
+            {fileCount} <span className="opacity-40">Files</span>
           </span>
         </div>
       </div>
@@ -177,12 +183,12 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
           </span>
         )}
         <Button
-          variant={heatmapMode ? 'default' : 'outline'}
+          variant={heatmapMode ? 'neumo' : 'outline'}
           size="sm"
           onClick={handleHeatmapToggle}
           disabled={!jobId || isHeatmapLoading}
           title={heatmapMode ? 'Disable complexity heatmap' : 'Enable complexity heatmap'}
-          className="gap-1.5"
+          className={`gap-2 h-9 px-4 rounded-xl transition-all duration-500 ${heatmapMode ? 'bg-gold/10 text-gold shadow-neu-flat' : ''}`}
         >
           {isHeatmapLoading ? (
             <Loader2 className="size-3.5 animate-spin" />
@@ -197,7 +203,7 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
           onClick={handleShare}
           disabled={!jobId || isSharing}
           title="Create share link"
-          className="gap-1.5"
+          className="gap-2 h-9 px-4 rounded-xl"
         >
           {isSharing ? <Loader2 className="size-3.5 animate-spin" /> : <Share2 className="size-3.5" />}
           Share
@@ -207,7 +213,7 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
           size="sm"
           onClick={handleFullscreen}
           title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-          className="gap-1.5"
+          className="gap-2 h-9 px-4 rounded-xl"
         >
           {isFullscreen ? (
             <Minimize2 className="size-3.5" />
@@ -217,16 +223,16 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
           {isFullscreen ? 'Exit' : 'Fullscreen'}
         </Button>
         <Button
-          variant="outline"
+          variant="neumo"
           size="sm"
           onClick={() => {
             dispatch(clearGraph());
             navigate('/analyze');
           }}
-          className="gap-1.5"
+          className="gap-2 h-9 px-4 rounded-xl"
         >
           <RotateCcw className="size-3.5" />
-          New analysis
+          Restart
         </Button>
       </div>
     </header>
diff --git a/client/src/features/jobs/components/JobProgressBar.jsx b/client/src/features/jobs/components/JobProgressBar.jsx
index 467a329..a75d44c 100644
--- a/client/src/features/jobs/components/JobProgressBar.jsx
+++ b/client/src/features/jobs/components/JobProgressBar.jsx
@@ -31,29 +31,37 @@ export default function JobProgressBar({ job }) {
   const agentTrace = Array.isArray(job?.agentTrace) ? job.agentTrace : [];
 
   return (
-    <section className="rounded-xl border border-primary/30 bg-primary/5 p-4 shadow-sm">
-      <div className="flex items-center gap-2 text-sm">
-        <span className="text-base leading-none">{info.icon}</span>
-        <p className="font-medium text-foreground">{info.label}</p>
-        {overallConfidence !== null && (
-          <p className="ml-auto text-xs text-muted-foreground">
-            Confidence: {(overallConfidence * 100).toFixed(0)}%
+    <section className="rounded-2xl shadow-neu-inset border-none bg-background/50 p-6 animate-in fade-in zoom-in duration-500">
+      <div className="flex items-center gap-3 text-sm">
+        <div className="flex size-8 items-center justify-center rounded-xl shadow-neu-inset border-none bg-background/60 font-black text-gold/80">
+          {info.icon}
+        </div>
+        <div>
+          <p className="font-bold tracking-tight text-foreground/90">{info.label}</p>
+          <p className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground/40 mt-0.5">
+            Stage: {stage}
           </p>
+        </div>
+        {overallConfidence !== null && (
+          <div className="ml-auto text-right">
+            <p className="text-xl font-display font-black tracking-tighter text-gold/80 leading-none">
+              {(overallConfidence * 100).toFixed(0)}%
+            </p>
+            <p className="text-[9px] uppercase font-bold tracking-tighter text-muted-foreground/30 mt-1">
+              Confidence
+            </p>
+          </div>
         )}
       </div>
 
-      <div className="mt-1 text-xs text-muted-foreground">
-        Stage: {stage}
-      </div>
-
       {Number.isFinite(job?.fileCount) && (
-        <div className="mt-1 text-xs text-muted-foreground">
-          Files scanned: {job.fileCount}
+        <div className="mt-4 flex items-center justify-between text-[10px] uppercase font-bold tracking-[0.2em] text-muted-foreground/40">
+          <span>Files scanned: {job.fileCount}</span>
         </div>
       )}
 
       {agentTrace.length > 0 && (
-        <div className="mt-3 flex flex-wrap gap-1.5">
+        <div className="mt-4 flex flex-wrap gap-2">
           {agentTrace.map((result, index) => {
             const confidence = Number(result?.confidence);
             const score = Number.isFinite(confidence) ? confidence : 0;
@@ -68,9 +76,9 @@ export default function JobProgressBar({ job }) {
             return (
               <span
                 key={result?.agentId || `${label}-${index}`}
-                className={`rounded-full border px-2 py-0.5 text-[10px] ${confidenceClass(score)}`}
+                className={`rounded-xl px-3 py-1.5 text-[9px] font-bold uppercase tracking-widest shadow-neu-inset border-none bg-background/40 ${confidenceClass(score)}`}
               >
-                {label} {pct}%
+                {label} <span className="opacity-40 mx-1">|</span> {pct}%
               </span>
             );
           })}
diff --git a/client/src/index.css b/client/src/index.css
index 1d2b0a2..ce1d3de 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -93,14 +93,59 @@
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
   }
+
+  /* Global Scrollbar Styling */
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(var(--foreground) / 0.1) transparent;
+  }
+
+  /* Webkit Browsers (Chrome, Safari, Edge) */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--foreground) / 0.1);
+    border-radius: 10px;
+    transition: background 0.3s var(--ease-out);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--foreground) / 0.2);
+  }
+
+  .dark {
+    scrollbar-color: rgba(var(--foreground) / 0.15) transparent;
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    background: rgba(var(--foreground) / 0.15);
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--foreground) / 0.25);
+  }
 }
 
 @layer utilities {
   .shadow-neu-inset {
-    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.05), inset -4px -4px 8px rgba(255, 255, 255, 0.8);
+    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
   }
   .dark .shadow-neu-inset {
-    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.05);
+    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -1px -1px 3px rgba(255, 255, 255, 0.03);
+  }
+
+  .shadow-neu-flat {
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05), -4px -4px 8px rgba(255, 255, 255, 0.8);
+  }
+  .dark .shadow-neu-flat {
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.02);
   }
   
   .glass-premium {
@@ -116,6 +161,18 @@
     background-clip: text;
     -webkit-text-fill-color: transparent;
   }
+
+  /* Design Engineering: Custom Easings */
+  :root {
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Active Scale Utility */
+  .active-scale:active {
+    transform: scale(0.97);
+  }
 }
 
 @layer utilities {

From 6d1d9e63a3d7f227eb165cdb78c162b7525362bd Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 14:42:44 +0530
Subject: [PATCH 03/19] feat: github checks api for PR status updates

---
 server/src/agents/core/SupervisorAgent.js | 12 ++++++++
 server/src/api/webhooks/github.webhook.js |  2 ++
 server/src/services/GitHubPRService.js    | 35 +++++++++++++++++++++++
 3 files changed, 49 insertions(+)

diff --git a/server/src/agents/core/SupervisorAgent.js b/server/src/agents/core/SupervisorAgent.js
index bd06417..2d39703 100644
--- a/server/src/agents/core/SupervisorAgent.js
+++ b/server/src/agents/core/SupervisorAgent.js
@@ -325,6 +325,7 @@ export class SupervisorAgent {
       const prNumber = input?.github?.prNumber;
       const owner = input?.github?.owner;
       const repo = input?.github?.repo;
+      const sha = input?.github?.headSha;
 
       if (!prNumber || !owner || !repo) return;
       if (!GitHubPRService.isConfigured()) {
@@ -359,6 +360,17 @@ export class SupervisorAgent {
       }
 
       console.log(`[SupervisorAgent] PR comment posted to ${owner}/${repo}#${prNumber}`);
+
+      // Create a check run for PR status
+      if (sha) {
+        const conclusion = impactedFiles.size > 10 ? 'failure' : 'neutral';
+        await GitHubPRService.createCheckRun(owner, repo, sha, {
+          conclusion,
+          title: `${impactedFiles.size} files potentially impacted`,
+          summary: `${changedFiles.length} changed files affect ${impactedFiles.size} dependent files.`,
+          detailsUrl: graphUrl,
+        });
+      }
     } catch (err) {
       // PR comment failure must never abort the main pipeline.
       console.error('[SupervisorAgent] Failed to post PR comment:', err.message);
diff --git a/server/src/api/webhooks/github.webhook.js b/server/src/api/webhooks/github.webhook.js
index 21bb6d4..996fc9b 100644
--- a/server/src/api/webhooks/github.webhook.js
+++ b/server/src/api/webhooks/github.webhook.js
@@ -115,6 +115,7 @@ router.post('/github', webhookLimiter, express.raw({ type: 'application/json' })
     const branch = payload?.pull_request?.head?.ref;
     const prNumber = payload?.pull_request?.number;
     const prTitle = payload?.pull_request?.title;
+    const headSha = payload?.pull_request?.head?.sha;
 
     logWebhookEvent('info', `Processing PR ${action}`, {
       event,
@@ -183,6 +184,7 @@ router.post('/github', webhookLimiter, express.raw({ type: 'application/json' })
           branch,
           prNumber,
           prTitle,
+          headSha,
         },
         repositoryId,
         userId,
diff --git a/server/src/services/GitHubPRService.js b/server/src/services/GitHubPRService.js
index 62a2b45..163f02d 100644
--- a/server/src/services/GitHubPRService.js
+++ b/server/src/services/GitHubPRService.js
@@ -228,6 +228,41 @@ ${impactedList}
       throw new Error(`Failed to fetch PR metadata: ${err.message}`);
     }
   }
+
+  /**
+   * Create a check run for PR status
+   * @param {string} owner - Repository owner
+   * @param {string} repo - Repository name
+   * @param {string} sha - Commit SHA
+   * @param {Object} options - Check run options
+   * @param {string} options.conclusion - 'success' | 'failure' | 'neutral'
+   * @param {string} options.title - Check title
+   * @param {string} options.summary - Check summary
+   * @param {string} options.detailsUrl - URL to details
+   * @returns {Promise<{id: number, conclusion: string}>}
+   */
+  async createCheckRun(owner, repo, sha, { conclusion, title, summary, detailsUrl }) {
+    if (!this.isConfigured()) return;
+
+    try {
+      const response = await this.client.post(`/repos/${owner}/${repo}/check-runs`, {
+        name: 'CodeGraph Impact Analysis',
+        head_sha: sha,
+        status: 'completed',
+        conclusion,
+        details_url: detailsUrl,
+        output: { title, summary },
+      });
+
+      return {
+        id: response.data.id,
+        conclusion: response.data.conclusion,
+      };
+    } catch (err) {
+      console.error('Failed to create check run:', err.message);
+      return null;
+    }
+  }
 }
 
 export { GitHubPRService };

From 32bee4bf6027f909da5e85ea50311afc3b5c818c Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 14:56:25 +0530
Subject: [PATCH 04/19] new: added Extension support

---
 vscode-extension/.gitignore           |   6 +
 vscode-extension/.vscodeignore        |  10 +
 vscode-extension/README.md            | 160 +++++++++
 vscode-extension/media/main.css       | 176 +++++++++
 vscode-extension/media/main.js        | 117 ++++++
 vscode-extension/media/reset.css      | 117 ++++++
 vscode-extension/package-lock.json    | 489 ++++++++++++++++++++++++++
 vscode-extension/package.json         |  54 +++
 vscode-extension/src/ApiClient.ts     | 164 +++++++++
 vscode-extension/src/GraphPanel.ts    | 185 ++++++++++
 vscode-extension/src/HoverProvider.ts |  32 ++
 vscode-extension/src/extension.ts     |  33 ++
 vscode-extension/tsconfig.json        |  19 +
 13 files changed, 1562 insertions(+)
 create mode 100644 vscode-extension/.gitignore
 create mode 100644 vscode-extension/.vscodeignore
 create mode 100644 vscode-extension/README.md
 create mode 100644 vscode-extension/media/main.css
 create mode 100644 vscode-extension/media/main.js
 create mode 100644 vscode-extension/media/reset.css
 create mode 100644 vscode-extension/package-lock.json
 create mode 100644 vscode-extension/package.json
 create mode 100644 vscode-extension/src/ApiClient.ts
 create mode 100644 vscode-extension/src/GraphPanel.ts
 create mode 100644 vscode-extension/src/HoverProvider.ts
 create mode 100644 vscode-extension/src/extension.ts
 create mode 100644 vscode-extension/tsconfig.json

diff --git a/vscode-extension/.gitignore b/vscode-extension/.gitignore
new file mode 100644
index 0000000..f5959f6
--- /dev/null
+++ b/vscode-extension/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+dist
+*.vsix
+.DS_Store
+.env
+.env.local
diff --git a/vscode-extension/.vscodeignore b/vscode-extension/.vscodeignore
new file mode 100644
index 0000000..74303fe
--- /dev/null
+++ b/vscode-extension/.vscodeignore
@@ -0,0 +1,10 @@
+.git
+node_modules
+dist/**/*.map
+src/**
+**/*.ts
+**/*.md
+tsconfig.json
+.prettierrc
+.eslintignore
+.eslintrc.json
diff --git a/vscode-extension/README.md b/vscode-extension/README.md
new file mode 100644
index 0000000..8ec0d11
--- /dev/null
+++ b/vscode-extension/README.md
@@ -0,0 +1,160 @@
+# CodeGraph AI — VS Code Extension
+
+Visualize your codebase dependencies and impact analysis directly in VS Code. See file relationships, dependencies, and AI-powered insights without leaving your editor.
+
+## Features
+
+- 📊 **Dependency Graph Visualization** — Explore your codebase structure in an interactive graph
+- 💡 **Hover Intelligence** — See file summaries, dependencies, and usage information on hover
+- 🔍 **Impact Analysis** — Understand which files are affected by your changes
+- 🤖 **AI Refactor Suggestions** — Get actionable refactoring recommendations
+- 🎨 **Dark Mode Support** — Matches your VS Code theme
+
+## Installation
+
+1. **From VS Code Marketplace:**
+   - Open VS Code
+   - Go to Extensions (Ctrl/Cmd + Shift + X)
+   - Search for "CodeGraph AI"
+   - Click Install
+
+2. **From Source (Development):**
+   ```bash
+   git clone https://github.com/codegraph-ai/codegraph-ai.git
+   cd vscode-extension
+   npm install
+   npm run esbuild
+   # Open vscode-extension folder in VS Code
+   # Press F5 to launch the extension in development mode
+   ```
+
+## Configuration
+
+Add to your VS Code settings (`.vscode/settings.json` or globally):
+
+```json
+{
+  "codegraphAi.serverUrl": "http://localhost:5000",
+  "codegraphAi.apiToken": "your-jwt-token-here"
+}
+```
+
+### Settings
+
+- **`codegraphAi.serverUrl`** — URL of your CodeGraph AI server (default: `http://localhost:5000`)
+- **`codegraphAi.apiToken`** — JWT token for authentication with the server (optional)
+
+## Usage
+
+### Opening the Graph
+
+1. Open a supported file (`.js`, `.ts`, `.jsx`, `.tsx`, `.py`, `.go`)
+2. Run the command **"CodeGraph AI: Open Graph"** from the Command Palette (Ctrl/Cmd + Shift + P)
+3. A new panel opens showing your dependency graph
+
+### Hover Information
+
+Hover over any file in your editor to see:
+- File summary and description
+- Number of direct dependencies
+- Number of files that depend on it
+- Quick link to open the full graph
+
+### Keyboard Shortcuts
+
+- `Ctrl/Cmd + Shift + P` → Open Command Palette
+- Type "CodeGraph AI" to find available commands
+
+## Supported Languages
+
+- JavaScript / TypeScript
+- JSX / TSX
+- Python
+- Go
+
+## Requirements
+
+- VS Code 1.85 or later
+- CodeGraph AI server running (local or remote)
+- Valid JWT authentication token (if server requires authentication)
+
+## Development
+
+### Build
+
+```bash
+npm run esbuild         # Build once
+npm run esbuild-watch   # Watch mode for development
+npm run vscode:prepublish  # Production build with minification
+```
+
+### Type Checking
+
+```bash
+npm run typecheck
+```
+
+### Package for Distribution
+
+```bash
+npm install -g @vscode/vsce
+vsce package   # Generates .vsix file
+vsce publish   # Publish to VS Code Marketplace (requires credentials)
+```
+
+## Architecture
+
+### Files
+
+- **`src/extension.ts`** — Extension activation and command registration
+- **`src/HoverProvider.ts`** — VS Code hover provider implementation
+- **`src/GraphPanel.ts`** — WebviewPanel managing the graph visualization
+- **`src/ApiClient.ts`** — HTTP client for CodeGraph backend communication
+- **`media/main.js`** — Webview script for graph rendering
+- **`media/main.css`** — Webview styles
+
+### Communication Flow
+
+```
+VS Code Extension
+    ↓
+ApiClient (HTTP)
+    ↓
+CodeGraph Backend API
+    ↓
+Graph Visualization (Webview)
+```
+
+## Troubleshooting
+
+### "No workspace folder open"
+- Open a folder in VS Code (File → Open Folder)
+
+### "Connection refused" / "Failed to fetch graph"
+- Verify the CodeGraph server is running
+- Check `codegraphAi.serverUrl` setting
+- Ensure firewall allows the connection
+
+### Hover information not showing
+- The file must be from an analyzed repository
+- Set a valid Job ID from a completed analysis
+- Verify network connectivity to the server
+
+## Contributing
+
+Found a bug or have a feature request? Open an issue on GitHub:  
+https://github.com/codegraph-ai/codegraph-ai/issues
+
+## License
+
+MIT — See LICENSE file in the repository
+
+## Support
+
+- 📖 [Documentation](https://github.com/codegraph-ai/codegraph-ai#readme)
+- 💬 [Discussions](https://github.com/codegraph-ai/codegraph-ai/discussions)
+- 🐛 [Issues](https://github.com/codegraph-ai/codegraph-ai/issues)
+
+---
+
+**Developed by the CodeGraph AI team**
diff --git a/vscode-extension/media/main.css b/vscode-extension/media/main.css
new file mode 100644
index 0000000..50abac4
--- /dev/null
+++ b/vscode-extension/media/main.css
@@ -0,0 +1,176 @@
+:root {
+  --color-bg: var(--vscode-editor-background);
+  --color-fg: var(--vscode-editor-foreground);
+  --color-border: var(--vscode-panel-border);
+  --color-primary: var(--vscode-focusBorder);
+}
+
+body {
+  color: var(--color-fg);
+  background-color: var(--color-bg);
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+  line-height: 1.6;
+  padding: 16px;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.header h1 {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+}
+
+button {
+  padding: 6px 12px;
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  transition: background-color 0.2s;
+}
+
+button:hover {
+  background-color: var(--vscode-button-hoverBackground);
+}
+
+button:active {
+  background-color: var(--vscode-button-hoverBackground);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.select {
+  padding: 6px 8px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
+  border: 1px solid var(--vscode-input-border);
+  border-radius: 2px;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+.graph-container {
+  flex: 1;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: var(--vscode-editor-background);
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  color: var(--vscode-foreground);
+}
+
+.error {
+  padding: 12px 16px;
+  background-color: var(--vscode-inputValidation-errorBackground);
+  color: var(--vscode-inputValidation-errorForeground);
+  border: 1px solid var(--vscode-inputValidation-errorBorder);
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.info {
+  padding: 12px 16px;
+  background-color: var(--vscode-inputValidation-infoBackground);
+  color: var(--vscode-inputValidation-infoForeground);
+  border: 1px solid var(--vscode-inputValidation-infoBorder);
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+  padding: 12px;
+  background-color: var(--vscode-editor-background);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}
+
+.stat-item {
+  padding: 8px;
+  border-left: 3px solid var(--color-primary);
+  padding-left: 12px;
+}
+
+.stat-label {
+  font-size: 12px;
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: 600;
+  margin-top: 4px;
+}
+
+.list {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}
+
+.list-item {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.list-item:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+.file-path {
+  font-family: var(--vscode-editor-font-family);
+  font-size: 12px;
+}
+
+.metadata {
+  font-size: 11px;
+  opacity: 0.6;
+  margin-top: 2px;
+}
diff --git a/vscode-extension/media/main.js b/vscode-extension/media/main.js
new file mode 100644
index 0000000..36a7bc9
--- /dev/null
+++ b/vscode-extension/media/main.js
@@ -0,0 +1,117 @@
+// This will be loaded in the webview
+// It handles communication between the extension and the webview content
+
+(function () {
+  const vscode = window.vscode;
+
+  // Initialize the webview
+  const root = document.getElementById('root');
+
+  // Create a simple UI for now until React graph is built
+  const html = `
+    <div class="container">
+      <div class="header">
+        <h1>CodeGraph AI</h1>
+        <div class="controls">
+          <button id="refreshBtn">Refresh</button>
+          <button id="settingsBtn">Settings</button>
+        </div>
+      </div>
+
+      <div class="info" id="infoMsg" style="display: none;">
+        No graph loaded. Run an analysis on your repository to get started.
+      </div>
+
+      <div class="error" id="errorMsg" style="display: none;"></div>
+
+      <div id="content" style="display: none;">
+        <div class="stats" id="stats"></div>
+        <div class="graph-container" id="graphContainer">
+          <div class="loading">Loading graph visualization...</div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  root.innerHTML = html;
+
+  // Setup event listeners
+  document.getElementById('refreshBtn').addEventListener('click', () => {
+    vscode.postMessage({ command: 'refresh' });
+  });
+
+  document.getElementById('settingsBtn').addEventListener('click', () => {
+    vscode.postMessage({ command: 'openSettings' });
+  });
+
+  // Listen for messages from the extension
+  window.addEventListener('message', (event) => {
+    const message = event.data;
+    console.log('Webview received message:', message);
+
+    switch (message.command) {
+      case 'graphLoaded':
+        handleGraphLoaded(message.data);
+        break;
+      case 'error':
+        showError(message.message);
+        break;
+      case 'refactorSuggestions':
+        showRefactorSuggestions(message.data);
+        break;
+    }
+  });
+
+  function handleGraphLoaded(data) {
+    const infoMsg = document.getElementById('infoMsg');
+    const content = document.getElementById('content');
+    const stats = document.getElementById('stats');
+
+    infoMsg.style.display = 'none';
+    content.style.display = 'flex';
+    content.style.flexDirection = 'column';
+
+    // Display basic stats
+    const nodeCount = Object.keys(data.graph || {}).length;
+    const edgeCount = data.edges ? data.edges.length : 0;
+
+    stats.innerHTML = `
+      <div class="stat-item">
+        <div class="stat-label">Files</div>
+        <div class="stat-value">${nodeCount}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">Dependencies</div>
+        <div class="stat-value">${edgeCount}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">Job ID</div>
+        <div class="stat-value" style="font-size: 12px; word-break: break-all;">${data.jobId.slice(0, 12)}...</div>
+      </div>
+    `;
+
+    // TODO: Render actual graph visualization here
+    document.getElementById('graphContainer').innerHTML = `
+      <div class="info" style="margin: 16px;">
+        Graph visualization coming soon. Your codebase has ${nodeCount} files with ${edgeCount} dependencies.
+      </div>
+    `;
+  }
+
+  function showError(message) {
+    const errorMsg = document.getElementById('errorMsg');
+    const content = document.getElementById('content');
+
+    errorMsg.textContent = message;
+    errorMsg.style.display = 'block';
+    content.style.display = 'none';
+  }
+
+  function showRefactorSuggestions(data) {
+    console.log('Refactor suggestions:', data);
+    // TODO: Display suggestions in a panel
+  }
+
+  // Signal that webview is ready
+  vscode.postMessage({ command: 'webviewReady' });
+})();
diff --git a/vscode-extension/media/reset.css b/vscode-extension/media/reset.css
new file mode 100644
index 0000000..0d322f1
--- /dev/null
+++ b/vscode-extension/media/reset.css
@@ -0,0 +1,117 @@
+html {
+  box-sizing: border-box;
+  font-size: 13px;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+li {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+q:before,
+q:after {
+  content: '';
+}
+
+abbr,
+acronym {
+  border: 0;
+  font-variant: normal;
+}
+
+sup {
+  vertical-align: text-top;
+}
+
+sub {
+  vertical-align: text-bottom;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+input,
+textarea,
+select {
+  font-size: 100%;
+}
+
+legend {
+  color: #000;
+}
diff --git a/vscode-extension/package-lock.json b/vscode-extension/package-lock.json
new file mode 100644
index 0000000..714838f
--- /dev/null
+++ b/vscode-extension/package-lock.json
@@ -0,0 +1,489 @@
+{
+  "name": "codegraph-ai",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "codegraph-ai",
+      "version": "0.0.1",
+      "devDependencies": {
+        "@types/node": "^20.0.0",
+        "@types/vscode": "^1.85.0",
+        "esbuild": "^0.19.0",
+        "typescript": "^5.3.0"
+      },
+      "engines": {
+        "vscode": "^1.85.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
+      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
+      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
+      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
+      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
+      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
+      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
+      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
+      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
+      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
+      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
+      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
+      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
+      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
+      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
+      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
+      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
+      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
+      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
+      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
+      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
+      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
+      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.37",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.37.tgz",
+      "integrity": "sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/vscode": {
+      "version": "1.110.0",
+      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.110.0.tgz",
+      "integrity": "sha512-AGuxUEpU4F4mfuQjxPPaQVyuOMhs+VT/xRok1jiHVBubHK7lBRvCuOMZG0LKUwxncrPorJ5qq/uil3IdZBd5lA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.19.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
+      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.19.12",
+        "@esbuild/android-arm": "0.19.12",
+        "@esbuild/android-arm64": "0.19.12",
+        "@esbuild/android-x64": "0.19.12",
+        "@esbuild/darwin-arm64": "0.19.12",
+        "@esbuild/darwin-x64": "0.19.12",
+        "@esbuild/freebsd-arm64": "0.19.12",
+        "@esbuild/freebsd-x64": "0.19.12",
+        "@esbuild/linux-arm": "0.19.12",
+        "@esbuild/linux-arm64": "0.19.12",
+        "@esbuild/linux-ia32": "0.19.12",
+        "@esbuild/linux-loong64": "0.19.12",
+        "@esbuild/linux-mips64el": "0.19.12",
+        "@esbuild/linux-ppc64": "0.19.12",
+        "@esbuild/linux-riscv64": "0.19.12",
+        "@esbuild/linux-s390x": "0.19.12",
+        "@esbuild/linux-x64": "0.19.12",
+        "@esbuild/netbsd-x64": "0.19.12",
+        "@esbuild/openbsd-x64": "0.19.12",
+        "@esbuild/sunos-x64": "0.19.12",
+        "@esbuild/win32-arm64": "0.19.12",
+        "@esbuild/win32-ia32": "0.19.12",
+        "@esbuild/win32-x64": "0.19.12"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/vscode-extension/package.json b/vscode-extension/package.json
new file mode 100644
index 0000000..f81527f
--- /dev/null
+++ b/vscode-extension/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "codegraph-ai",
+  "displayName": "CodeGraph AI",
+  "description": "Visualize your codebase dependencies and impact analysis directly in VS Code",
+  "version": "0.0.1",
+  "publisher": "codegraph",
+  "engines": {
+    "vscode": "^1.85.0"
+  },
+  "categories": [
+    "Visualization",
+    "Developer Tools"
+  ],
+  "activationEvents": [
+    "workspaceContains:**/*.{js,ts,jsx,tsx,py,go}"
+  ],
+  "main": "./dist/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "codegraphAi.openGraph",
+        "title": "CodeGraph AI: Open Graph"
+      }
+    ],
+    "configuration": {
+      "title": "CodeGraph AI",
+      "properties": {
+        "codegraphAi.serverUrl": {
+          "type": "string",
+          "default": "http://localhost:5000",
+          "description": "CodeGraph AI server URL"
+        },
+        "codegraphAi.apiToken": {
+          "type": "string",
+          "default": "",
+          "description": "JWT token for authentication with CodeGraph AI server"
+        }
+      }
+    }
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run esbuild-base -- --minify",
+    "esbuild-base": "esbuild ./src/extension.ts --bundle --outfile=dist/extension.js --external:vscode --format=cjs --platform=node",
+    "esbuild": "npm run esbuild-base -- --sourcemap",
+    "esbuild-watch": "npm run esbuild-base -- --sourcemap --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/vscode": "^1.85.0",
+    "esbuild": "^0.19.0",
+    "typescript": "^5.3.0"
+  }
+}
diff --git a/vscode-extension/src/ApiClient.ts b/vscode-extension/src/ApiClient.ts
new file mode 100644
index 0000000..854b56a
--- /dev/null
+++ b/vscode-extension/src/ApiClient.ts
@@ -0,0 +1,164 @@
+/**
+ * API Client for CodeGraph backend
+ * Handles authentication and graph data retrieval
+ */
+export class ApiClient {
+  currentJobId: string | null = null;
+  private cache: Map<string, any> = new Map();
+
+  constructor(private serverUrl: string, private apiToken: string) {
+    // Normalize URL
+    this.serverUrl = serverUrl.replace(/\/$/, '');
+  }
+
+  /**
+   * Set the current job ID for graph queries
+   */
+  setCurrentJobId(jobId: string) {
+    this.currentJobId = jobId;
+    // Clear cache when switching jobs
+    this.cache.clear();
+  }
+
+  /**
+   * Fetch full graph data for a job
+   */
+  async getGraph(jobId: string) {
+    const cacheKey = `graph:${jobId}`;
+    if (this.cache.has(cacheKey)) {
+      return this.cache.get(cacheKey);
+    }
+
+    try {
+      const response = await fetch(`${this.serverUrl}/api/graph/${jobId}`, {
+        method: 'GET',
+        headers: this.buildHeaders(),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch graph: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      this.cache.set(cacheKey, data);
+      return data;
+    } catch (err) {
+      console.error('[ApiClient] Failed to fetch graph:', err);
+      throw err;
+    }
+  }
+
+  /**
+   * Fetch heatmap data (complexity/risk scoring)
+   */
+  async getHeatmap(jobId: string) {
+    const cacheKey = `heatmap:${jobId}`;
+    if (this.cache.has(cacheKey)) {
+      return this.cache.get(cacheKey);
+    }
+
+    try {
+      const response = await fetch(`${this.serverUrl}/api/graph/${jobId}/heatmap`, {
+        method: 'GET',
+        headers: this.buildHeaders(),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch heatmap: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      this.cache.set(cacheKey, data);
+      return data;
+    } catch (err) {
+      console.error('[ApiClient] Failed to fetch heatmap:', err);
+      throw err;
+    }
+  }
+
+  /**
+   * Get AI refactor suggestions for a file
+   */
+  async getRefactorSuggestions(jobId: string, filePath: string) {
+    try {
+      const response = await fetch(`${this.serverUrl}/api/ai/suggest-refactor`, {
+        method: 'POST',
+        headers: this.buildHeaders(),
+        body: JSON.stringify({ jobId, filePath }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to get refactor suggestions: ${response.statusText}`);
+      }
+
+      return await response.json();
+    } catch (err) {
+      console.error('[ApiClient] Failed to get refactor suggestions:', err);
+      throw err;
+    }
+  }
+
+  /**
+   * List user's repositories
+   */
+  async getRepositories() {
+    try {
+      const response = await fetch(`${this.serverUrl}/api/repositories`, {
+        method: 'GET',
+        headers: this.buildHeaders(),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch repositories: ${response.statusText}`);
+      }
+
+      return await response.json();
+    } catch (err) {
+      console.error('[ApiClient] Failed to fetch repositories:', err);
+      throw err;
+    }
+  }
+
+  /**
+   * List analysis jobs for a repository
+   */
+  async getRepositoryJobs(repositoryId: string) {
+    try {
+      const response = await fetch(`${this.serverUrl}/api/repositories/${repositoryId}/jobs`, {
+        method: 'GET',
+        headers: this.buildHeaders(),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch jobs: ${response.statusText}`);
+      }
+
+      return await response.json();
+    } catch (err) {
+      console.error('[ApiClient] Failed to fetch jobs:', err);
+      throw err;
+    }
+  }
+
+  /**
+   * Build HTTP headers with authorization
+   */
+  private buildHeaders(): Record<string, string> {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+
+    if (this.apiToken) {
+      headers['Authorization'] = `Bearer ${this.apiToken}`;
+    }
+
+    return headers;
+  }
+
+  /**
+   * Clear cache (useful when data might have changed)
+   */
+  clearCache() {
+    this.cache.clear();
+  }
+}
diff --git a/vscode-extension/src/GraphPanel.ts b/vscode-extension/src/GraphPanel.ts
new file mode 100644
index 0000000..2ebd625
--- /dev/null
+++ b/vscode-extension/src/GraphPanel.ts
@@ -0,0 +1,185 @@
+import * as vscode from 'vscode';
+import * as path from 'path';
+import { ApiClient } from './ApiClient';
+
+/**
+ * Manages the WebviewPanel that displays the CodeGraph visualization
+ */
+export class GraphPanel {
+  public static currentPanel: GraphPanel | undefined;
+
+  private readonly _panel: vscode.WebviewPanel;
+  private readonly _extensionUri: vscode.Uri;
+  private _disposables: vscode.Disposable[] = [];
+  private _apiClient: ApiClient;
+  private _repoPath: string;
+
+  public static createOrShow(extensionUri: vscode.Uri, apiClient: ApiClient, repoPath: string) {
+    const column = vscode.window.activeTextEditor?.viewColumn || vscode.ViewColumn.One;
+
+    // If we already have a panel, show it
+    if (GraphPanel.currentPanel) {
+      GraphPanel.currentPanel._panel.reveal(column);
+      GraphPanel.currentPanel._update(repoPath);
+      return;
+    }
+
+    // Otherwise, create a new panel
+    const panel = vscode.window.createWebviewPanel(
+      'codegraphAiGraph',
+      'CodeGraph AI',
+      column,
+      {
+        enableScripts: true,
+        enableForms: true,
+        retainContextWhenHidden: true,
+        localResourceRoots: [vscode.Uri.joinPath(extensionUri, 'media')],
+      }
+    );
+
+    GraphPanel.currentPanel = new GraphPanel(panel, extensionUri, apiClient, repoPath);
+  }
+
+  private constructor(
+    panel: vscode.WebviewPanel,
+    extensionUri: vscode.Uri,
+    apiClient: ApiClient,
+    repoPath: string
+  ) {
+    this._panel = panel;
+    this._extensionUri = extensionUri;
+    this._apiClient = apiClient;
+    this._repoPath = repoPath;
+
+    // Update the html for the webview
+    this._update(repoPath);
+
+    // Listen for when the panel is disposed
+    // This happens when the user closes the panel or when the panel is closed programmatically
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+
+    // Handle messages from the webview
+    this._panel.webview.onDidReceiveMessage(
+      (message) => {
+        switch (message.command) {
+          case 'selectJobId':
+            this._apiClient.setCurrentJobId(message.jobId);
+            vscode.window.showInformationMessage(`Loaded graph for job ${message.jobId.slice(0, 8)}...`);
+            break;
+          case 'openFile':
+            this._openFile(message.filePath);
+            break;
+          case 'getRefactorSuggestions':
+            this._getRefactorSuggestions(message.filePath);
+            break;
+        }
+      },
+      null,
+      this._disposables
+    );
+  }
+
+  public dispose() {
+    GraphPanel.currentPanel = undefined;
+
+    // Clean up resources
+    this._panel.dispose();
+
+    while (this._disposables.length) {
+      const x = this._disposables.pop();
+      if (x) {
+        x.dispose();
+      }
+    }
+  }
+
+  private _update(repoPath: string) {
+    this._panel.webview.html = this._getHtmlForWebview(this._panel.webview, repoPath);
+  }
+
+  private _getHtmlForWebview(webview: vscode.Webview, repoPath: string): string {
+    const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css'));
+    const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css'));
+    const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js'));
+
+    // Use a nonce to only allow specific scripts to be run
+    const nonce = getNonce();
+
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <!--
+    Use a content security policy to only allow loading images and scripts from https.
+    On development, http is used too.
+    * img-src data: https: 'unsafe-inline' http:;
+    * connect-src https: wss: http: ws:;
+  -->
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}'; img-src ${webview.cspSource} data:; connect-src https: http: wss: ws:;">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="${styleResetUri}">
+  <link rel="stylesheet" href="${styleMainUri}">
+  <title>CodeGraph AI</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script nonce="${nonce}">
+    const vscode = acquireVsCodeApi();
+    const repoPath = "${escapeHtml(repoPath)}";
+  </script>
+  <script nonce="${nonce}" src="${scriptUri}"></script>
+</body>
+</html>`;
+  }
+
+  private _openFile(filePath: string) {
+    const fullPath = path.join(this._repoPath, filePath);
+    vscode.workspace.openTextDocument(fullPath).then(
+      (doc) => {
+        vscode.window.showTextDocument(doc, { preview: false });
+      },
+      (err) => {
+        vscode.window.showErrorMessage(`Failed to open file: ${err.message}`);
+      }
+    );
+  }
+
+  private async _getRefactorSuggestions(filePath: string) {
+    try {
+      if (!this._apiClient.currentJobId) {
+        vscode.window.showErrorMessage('No job loaded. Please load a graph first.');
+        return;
+      }
+
+      const suggestions = await this._apiClient.getRefactorSuggestions(
+        this._apiClient.currentJobId,
+        filePath
+      );
+
+      this._panel.webview.postMessage({
+        command: 'refactorSuggestions',
+        data: suggestions,
+      });
+    } catch (err) {
+      vscode.window.showErrorMessage(`Failed to get refactor suggestions: ${(err as Error).message}`);
+    }
+  }
+}
+
+function getNonce() {
+  let text = '';
+  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  for (let i = 0; i < 32; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return text;
+}
+
+function escapeHtml(unsafe: string): string {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
diff --git a/vscode-extension/src/HoverProvider.ts b/vscode-extension/src/HoverProvider.ts
new file mode 100644
index 0000000..5d4707c
--- /dev/null
+++ b/vscode-extension/src/HoverProvider.ts
@@ -0,0 +1,32 @@
+import * as vscode from 'vscode';
+import { ApiClient } from './ApiClient';
+
+export class HoverProvider implements vscode.HoverProvider {
+  constructor(private api: ApiClient) {}
+
+  async provideHover(document: vscode.TextDocument): Promise<vscode.Hover | null> {
+    const jobId = this.api.currentJobId;
+    if (!jobId) return null;
+
+    const workspaceRoot = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || '';
+    const relativePath = document.uri.fsPath.replace(workspaceRoot + '/', '');
+
+    try {
+      const graph = await this.api.getGraph(jobId);
+      const node = graph?.graph?.[relativePath];
+      if (!node) return null;
+
+      const markdown = new vscode.MarkdownString();
+      markdown.isTrusted = true;
+      markdown.appendMarkdown(`**CodeGraph AI** — \`${relativePath}\`\n\n`);
+      if (node.summary) markdown.appendMarkdown(`${node.summary}\n\n`);
+      markdown.appendMarkdown(`- **Deps:** ${node.deps?.length || 0}  `);
+      markdown.appendMarkdown(`**Used by:** ${Object.values(graph.graph).filter((n: any) => n.deps?.includes(relativePath)).length}\n\n`);
+      markdown.appendMarkdown(`[Open in Graph](command:codegraphAi.openGraph)`);
+
+      return new vscode.Hover(markdown);
+    } catch {
+      return null;
+    }
+  }
+}
diff --git a/vscode-extension/src/extension.ts b/vscode-extension/src/extension.ts
new file mode 100644
index 0000000..e0c72a0
--- /dev/null
+++ b/vscode-extension/src/extension.ts
@@ -0,0 +1,33 @@
+import * as vscode from 'vscode';
+import { GraphPanel } from './GraphPanel';
+import { HoverProvider } from './HoverProvider';
+import { ApiClient } from './ApiClient';
+
+export function activate(context: vscode.ExtensionContext) {
+  const apiClient = new ApiClient(
+    vscode.workspace.getConfiguration('codegraphAi').get('serverUrl') || 'http://localhost:5000',
+    vscode.workspace.getConfiguration('codegraphAi').get('apiToken') || ''
+  );
+
+  // Command: Open graph for current workspace
+  context.subscriptions.push(
+    vscode.commands.registerCommand('codegraphAi.openGraph', async () => {
+      const repoPath = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath;
+      if (!repoPath) {
+        vscode.window.showErrorMessage('No workspace folder open.');
+        return;
+      }
+      GraphPanel.createOrShow(context.extensionUri, apiClient, repoPath);
+    })
+  );
+
+  // Hover: show file summary + dep count
+  context.subscriptions.push(
+    vscode.languages.registerHoverProvider(
+      ['javascript', 'typescript', 'javascriptreact', 'typescriptreact', 'python', 'go'],
+      new HoverProvider(apiClient)
+    )
+  );
+}
+
+export function deactivate() {}
diff --git a/vscode-extension/tsconfig.json b/vscode-extension/tsconfig.json
new file mode 100644
index 0000000..3254b8f
--- /dev/null
+++ b/vscode-extension/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

From 19a7e94c0054ad5f312bd31335770e73ee1834ee Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 16:09:11 +0530
Subject: [PATCH 05/19] refactor: made analyze to uplaod

---
 client/src/App.jsx                                       | 4 +++-
 client/src/components/layout/Sidebar.jsx                 | 6 ++++++
 client/src/features/analyze/index.js                     | 1 +
 client/src/features/analyze/pages/AnalyzePage.jsx        | 9 +++++++++
 .../components/{AnalyzeForm.jsx => UploadRepoForm.jsx}   | 6 +++---
 client/src/features/graph/index.js                       | 6 +++---
 .../graph/pages/{AnalyzePage.jsx => UploadRepoPage.jsx}  | 6 +++---
 7 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 client/src/features/analyze/index.js
 create mode 100644 client/src/features/analyze/pages/AnalyzePage.jsx
 rename client/src/features/graph/components/{AnalyzeForm.jsx => UploadRepoForm.jsx} (99%)
 rename client/src/features/graph/pages/{AnalyzePage.jsx => UploadRepoPage.jsx} (93%)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index b4c6d51..d290df9 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -10,7 +10,8 @@ import Layout from '@/components/layout/Layout';
 
 import { LandingPage, LoginPage, SignupPage } from '@/features/auth';
 import { DashboardPage }                      from '@/features/dashboard';
-import { AnalyzePage, GraphPage }             from '@/features/graph';
+import { UploadRepoPage, GraphPage }             from '@/features/graph';
+import { AnalyzePage }             from '@/features/analyze';
 
 function RootRedirect() {
   const { isAuthenticated, loading } = useAuth();
@@ -39,6 +40,7 @@ function AppRoutes() {
       <Route element={<PrivateGuard />}>
         <Route element={<Layout />}>
           <Route path="/dashboard" element={<DashboardPage />} />
+          <Route path="/upload-repo" element={<UploadRepoPage />} />
           <Route path="/analyze" element={<AnalyzePage />} />
           <Route path="/graph" element={<GraphPage />} />
         </Route>
diff --git a/client/src/components/layout/Sidebar.jsx b/client/src/components/layout/Sidebar.jsx
index 6787576..084890d 100644
--- a/client/src/components/layout/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar.jsx
@@ -7,6 +7,7 @@ import {
   Share2,
   ChevronLeft,
   ChevronRight,
+  UploadIcon,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -16,6 +17,11 @@ const NAV_ITEMS = [
     icon: <LayoutDashboard className="size-4 shrink-0" />,
     label: 'Dashboard',
   },
+  {
+    to: '/upload-repo',
+    icon: <UploadIcon className="size-4 shrink-0" />,
+    label: 'Upload Repo',
+  },
   {
     to: '/analyze',
     icon: <Network className="size-4 shrink-0" />,
diff --git a/client/src/features/analyze/index.js b/client/src/features/analyze/index.js
new file mode 100644
index 0000000..8e67047
--- /dev/null
+++ b/client/src/features/analyze/index.js
@@ -0,0 +1 @@
+export { default as AnalyzePage } from './pages/AnalyzePage';
\ No newline at end of file
diff --git a/client/src/features/analyze/pages/AnalyzePage.jsx b/client/src/features/analyze/pages/AnalyzePage.jsx
new file mode 100644
index 0000000..d8644de
--- /dev/null
+++ b/client/src/features/analyze/pages/AnalyzePage.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AnalyzePage = () => {
+  return (
+    <div>AnalyzePage</div>
+  )
+}
+
+export default AnalyzePage
\ No newline at end of file
diff --git a/client/src/features/graph/components/AnalyzeForm.jsx b/client/src/features/graph/components/UploadRepoForm.jsx
similarity index 99%
rename from client/src/features/graph/components/AnalyzeForm.jsx
rename to client/src/features/graph/components/UploadRepoForm.jsx
index 13e2763..711f469 100644
--- a/client/src/features/graph/components/AnalyzeForm.jsx
+++ b/client/src/features/graph/components/UploadRepoForm.jsx
@@ -105,7 +105,7 @@ function GitHubModeToggle({ value, onChange, disabled }) {
   );
 }
 
-export default function AnalyzeForm() {
+export default function UploadRepoForm() {
   const dispatch = useDispatch();
   const location = useLocation();
   const status = useSelector(selectGraphStatus);
@@ -529,7 +529,7 @@ export default function AnalyzeForm() {
         <Sparkles className="size-6 text-gold" />
       </div>
       <h1 className="mt-4 text-4xl font-bold tracking-tight text-center">
-        Analyze a Codebase
+        Upload Repo
       </h1>
       <p className="mt-3 max-w-md text-center text-muted-foreground">
         Choose a local or GitHub repository, select a branch when required, and
@@ -885,7 +885,7 @@ export default function AnalyzeForm() {
               Analyzing…
             </>
           ) : (
-            'Analyze Codebase'
+            'Analyze'
           )}
         </Button>
       </form>
diff --git a/client/src/features/graph/index.js b/client/src/features/graph/index.js
index cc6fe63..c7054d6 100644
--- a/client/src/features/graph/index.js
+++ b/client/src/features/graph/index.js
@@ -1,8 +1,8 @@
-export { default as AnalyzePage } from './pages/AnalyzePage';
-export { default as GraphPage } from './pages/GraphPage';
+export { default as UploadRepoPage } from './pages/UploadRepoPage';
+at
 
 export { default as GraphView } from './components/GraphView';
-export { default as AnalyzeForm } from './components/AnalyzeForm';
+export { default as UploadRepoForm } from './components/UploadRepoForm';
 export { default as GraphToolbar } from './components/GraphToolbar';
 
 export {
diff --git a/client/src/features/graph/pages/AnalyzePage.jsx b/client/src/features/graph/pages/UploadRepoPage.jsx
similarity index 93%
rename from client/src/features/graph/pages/AnalyzePage.jsx
rename to client/src/features/graph/pages/UploadRepoPage.jsx
index 662f573..312cea3 100644
--- a/client/src/features/graph/pages/AnalyzePage.jsx
+++ b/client/src/features/graph/pages/UploadRepoPage.jsx
@@ -9,10 +9,10 @@ import {
   selectGraphError,
   selectGraphData,
 } from '../slices/graphSlice';
-import AnalyzeForm from '../components/AnalyzeForm';
+import UploadRepoForm from '../components/UploadRepoForm';
 import JobProgressBar from '../../jobs/components/JobProgressBar';
 
-export default function AnalyzePage() {
+export default function UploadRepoPage() {
   const status = useSelector(selectGraphStatus);
   const error = useSelector(selectGraphError);
   const data = useSelector(selectGraphData);
@@ -20,7 +20,7 @@ export default function AnalyzePage() {
 
   return (
     <div className="min-h-screen bg-background">
-      <AnalyzeForm />
+      <UploadRepoForm />
       {data && status !== 'loading' && (
         <div className="mx-auto max-w-2xl px-4 py-6">
           <div className="flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-card/70 px-4 py-3">

From a481df3add662bf00379355d3fec85196fbef516 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 16:57:45 +0530
Subject: [PATCH 06/19] feat: added analyzePage

---
 client/package-lock.json                      |  10 +
 client/package.json                           |   1 +
 client/src/App.jsx                            |   1 +
 client/src/app/store.js                       |   2 +
 client/src/features/analyze/index.js          |  17 +-
 .../features/analyze/pages/AnalyzePage.jsx    | 537 +++++++++++++++++-
 .../analyze/services/analyzeService.js        |  85 +++
 .../features/analyze/slices/analyzeSlice.js   | 301 ++++++++++
 .../graph/components/UploadRepoForm.jsx       |  37 ++
 client/src/features/graph/index.js            |   3 +-
 .../src/features/graph/slices/graphSlice.js   |   6 +-
 client/src/index.css                          |  68 +++
 .../analyze/controllers/analyze.controller.js | 221 +++++++
 .../analyze/middleware/validate.middleware.js |  88 +++
 server/src/analyze/routes/analyze.routes.js   |  11 +
 .../src/analyze/services/githubApi.service.js | 175 +++++-
 16 files changed, 1553 insertions(+), 10 deletions(-)
 create mode 100644 client/src/features/analyze/services/analyzeService.js
 create mode 100644 client/src/features/analyze/slices/analyzeSlice.js

diff --git a/client/package-lock.json b/client/package-lock.json
index 2af86b9..358859d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -20,6 +20,7 @@
         "clsx": "^2.1.1",
         "dagre": "^0.8.5",
         "lucide-react": "^0.562.0",
+        "prismjs": "^1.30.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-redux": "^9.2.0",
@@ -4973,6 +4974,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index 070296d..b723fe5 100644
--- a/client/package.json
+++ b/client/package.json
@@ -22,6 +22,7 @@
     "clsx": "^2.1.1",
     "dagre": "^0.8.5",
     "lucide-react": "^0.562.0",
+    "prismjs": "^1.30.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-redux": "^9.2.0",
diff --git a/client/src/App.jsx b/client/src/App.jsx
index d290df9..0bc3c93 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -42,6 +42,7 @@ function AppRoutes() {
           <Route path="/dashboard" element={<DashboardPage />} />
           <Route path="/upload-repo" element={<UploadRepoPage />} />
           <Route path="/analyze" element={<AnalyzePage />} />
+          <Route path="/analyze/:dir_name" element={<AnalyzePage />} />
           <Route path="/graph" element={<GraphPage />} />
         </Route>
       </Route>
diff --git a/client/src/app/store.js b/client/src/app/store.js
index 040ef79..b022037 100644
--- a/client/src/app/store.js
+++ b/client/src/app/store.js
@@ -3,6 +3,7 @@ import themeReducer from '@/features/theme/slices/themeSlice';
 import graphReducer from '@/features/graph/slices/graphSlice';
 import dashboardReducer from '@/features/dashboard/slices/dashboardSlice';
 import aiReducer from '@/features/ai/slices/aiSlice';
+import analyzeReducer from '@/features/analyze/slices/analyzeSlice';
 
 export const store = configureStore({
   reducer: {
@@ -10,6 +11,7 @@ export const store = configureStore({
     graph: graphReducer,
     dashboard: dashboardReducer,
     ai: aiReducer,
+    analyze: analyzeReducer,
   },
   devTools: import.meta.env.DEV,
 });
diff --git a/client/src/features/analyze/index.js b/client/src/features/analyze/index.js
index 8e67047..2fb2b93 100644
--- a/client/src/features/analyze/index.js
+++ b/client/src/features/analyze/index.js
@@ -1 +1,16 @@
-export { default as AnalyzePage } from './pages/AnalyzePage';
\ No newline at end of file
+export { default as AnalyzePage } from './pages/AnalyzePage';
+
+export {
+	fetchRepositoryFile,
+	fetchDirectoryContents,
+	fetchRepositoryStructure,
+	saveRepositoryFile,
+	setSelectedAnalyzeRepository,
+	selectAnalyzeContents,
+	selectAnalyzeFile,
+	selectAnalyzeSelectedRepository,
+	selectAnalyzeStructure,
+	default as analyzeReducer,
+} from './slices/analyzeSlice';
+
+export { analyzeService } from './services/analyzeService';
\ No newline at end of file
diff --git a/client/src/features/analyze/pages/AnalyzePage.jsx b/client/src/features/analyze/pages/AnalyzePage.jsx
index d8644de..f774422 100644
--- a/client/src/features/analyze/pages/AnalyzePage.jsx
+++ b/client/src/features/analyze/pages/AnalyzePage.jsx
@@ -1,9 +1,534 @@
-import React from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-yaml';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import {
+  ArrowLeft,
+  Check,
+  Edit3,
+  ExternalLink,
+  FileCode2,
+  FolderTree,
+  Folder,
+  GitBranch,
+  Save,
+  X,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  fetchDirectoryContents,
+  fetchRepositoryFile,
+  fetchRepositoryStructure,
+  saveRepositoryFile,
+  selectAnalyzeContents,
+  selectAnalyzeFile,
+  selectAnalyzeSelectedRepository,
+  selectAnalyzeStructure,
+} from '../slices/analyzeSlice';
 
-const AnalyzePage = () => {
-  return (
-    <div>AnalyzePage</div>
-  )
+function formatCount(count) {
+  const safe = Number.isFinite(count) ? count : 0;
+  return `${safe} file${safe === 1 ? '' : 's'}`;
+}
+
+function formatSize(bytes) {
+  const size = Number(bytes);
+  if (!Number.isFinite(size) || size <= 0) return '-';
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`;
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function detectPrismLanguage(filePath = '') {
+  const normalized = String(filePath).toLowerCase();
+
+  if (normalized.endsWith('.ts')) return 'typescript';
+  if (normalized.endsWith('.tsx')) return 'tsx';
+  if (normalized.endsWith('.js')) return 'javascript';
+  if (normalized.endsWith('.jsx')) return 'jsx';
+  if (normalized.endsWith('.json')) return 'json';
+  if (normalized.endsWith('.css')) return 'css';
+  if (normalized.endsWith('.html')) return 'markup';
+  if (normalized.endsWith('.md')) return 'markdown';
+  if (normalized.endsWith('.yml') || normalized.endsWith('.yaml')) return 'yaml';
+  if (normalized.endsWith('.py')) return 'python';
+  if (normalized.endsWith('.sh')) return 'bash';
+
+  return 'clike';
 }
 
-export default AnalyzePage
\ No newline at end of file
+export default function AnalyzePage() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const params = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const selectedRepository = useSelector(selectAnalyzeSelectedRepository);
+  const structure = useSelector(selectAnalyzeStructure);
+  const contents = useSelector(selectAnalyzeContents);
+  const fileState = useSelector(selectAnalyzeFile);
+
+  const [editorValue, setEditorValue] = useState('');
+  const [isEditing, setIsEditing] = useState(false);
+
+  const editorGutterRef = useRef(null);
+  const editorTextareaRef = useRef(null);
+  const viewerGutterRef = useRef(null);
+  const viewerCodeRef = useRef(null);
+
+  const routeDirectory = useMemo(() => {
+    const raw = params.dir_name ? decodeURIComponent(params.dir_name) : '';
+    return raw.trim();
+  }, [params.dir_name]);
+
+  const currentPath = useMemo(() => {
+    const queryPath = String(searchParams.get('path') || '').trim();
+    if (queryPath) return queryPath;
+    return routeDirectory;
+  }, [routeDirectory, searchParams]);
+
+  const selectedFilePath = useMemo(() => {
+    return String(searchParams.get('file') || '').trim();
+  }, [searchParams]);
+
+  useEffect(() => {
+    dispatch(fetchRepositoryStructure());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!routeDirectory) return;
+    dispatch(fetchDirectoryContents({ path: currentPath }));
+  }, [currentPath, dispatch, routeDirectory]);
+
+  useEffect(() => {
+    if (!routeDirectory || !selectedFilePath) return;
+    dispatch(fetchRepositoryFile({ path: selectedFilePath }));
+  }, [dispatch, routeDirectory, selectedFilePath]);
+
+  useEffect(() => {
+    const fileContent = fileState.data?.content;
+    if (typeof fileContent !== 'string') return;
+    setEditorValue(fileContent);
+    setIsEditing(false);
+  }, [fileState.data?.content, fileState.data?.path]);
+
+  const showLocalSourceMessage = selectedRepository?.source === 'local';
+
+  const handleCardOpen = (directoryPath) => {
+    const encoded = encodeURIComponent(directoryPath);
+    navigate(`/analyze/${encoded}`);
+  };
+
+  const openDirectory = (entryPath) => {
+    setSearchParams({ path: entryPath });
+  };
+
+  const openFile = (entryPath) => {
+    setSearchParams({ path: currentPath, file: entryPath });
+  };
+
+  const pathSegments = currentPath ? currentPath.split('/').filter(Boolean) : [];
+
+  const hasUnsavedChanges =
+    typeof fileState.data?.content === 'string' &&
+    editorValue !== fileState.data.content;
+
+  const codeLanguage = useMemo(
+    () => detectPrismLanguage(fileState.data?.path || selectedFilePath),
+    [fileState.data?.path, selectedFilePath],
+  );
+
+  const highlightedContent = useMemo(() => {
+    const value = String(fileState.data?.content || '');
+    const grammar = Prism.languages[codeLanguage] || Prism.languages.clike;
+    return Prism.highlight(value, grammar, codeLanguage);
+  }, [codeLanguage, fileState.data?.content]);
+
+  const viewerLineCount = useMemo(() => {
+    const value = String(fileState.data?.content || '');
+    return Math.max(1, value.split('\n').length);
+  }, [fileState.data?.content]);
+
+  const editorLineCount = useMemo(() => {
+    return Math.max(1, String(editorValue || '').split('\n').length);
+  }, [editorValue]);
+
+  const handleSaveFile = async () => {
+    if (!fileState.data?.path || !fileState.data?.sha) return;
+
+    await dispatch(
+      saveRepositoryFile({
+        path: fileState.data.path,
+        content: editorValue,
+        sha: fileState.data.sha,
+        message: `Update ${fileState.data.path} via CodeGraph AI editor`,
+      }),
+    );
+
+    setIsEditing(false);
+  };
+
+  const syncEditorScroll = () => {
+    if (!editorGutterRef.current || !editorTextareaRef.current) return;
+    editorGutterRef.current.scrollTop = editorTextareaRef.current.scrollTop;
+  };
+
+  const syncViewerScroll = () => {
+    if (!viewerGutterRef.current || !viewerCodeRef.current) return;
+    viewerGutterRef.current.scrollTop = viewerCodeRef.current.scrollTop;
+  };
+
+  return (
+    <section className="mx-auto w-full max-w-375 px-4 pb-10 pt-7">
+      <div className="mb-5">
+        <Link
+          to="/upload-repo"
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="size-4" />
+          Back to Upload
+        </Link>
+      </div>
+
+      <header className="rounded-2xl border border-border/60 bg-card/70 px-5 py-6">
+        <h1 className="text-3xl font-bold tracking-tight">Analyze Repository Structure</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Top-level directories from the selected GitHub repository.
+        </p>
+
+        {structure.repository?.fullName && (
+          <div className="mt-4 flex flex-wrap items-center gap-3 text-xs">
+            <span className="rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
+              {structure.repository.fullName}
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
+              <GitBranch className="size-3.5" />
+              {structure.repository.branch || structure.repository.defaultBranch || 'default'}
+            </span>
+            {structure.repository.htmlUrl && (
+              <a
+                href={structure.repository.htmlUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground"
+              >
+                View on GitHub
+                <ExternalLink className="size-3.5" />
+              </a>
+            )}
+          </div>
+        )}
+      </header>
+
+      {showLocalSourceMessage && (
+        <div className="mt-5 rounded-xl border border-border/60 bg-card/60 px-4 py-3 text-sm text-muted-foreground">
+          This view currently supports GitHub repositories. Select a GitHub repository from Upload Repo, then return to Analyze.
+        </div>
+      )}
+
+      {!routeDirectory && structure.status === 'loading' && (
+        <div className="mt-6 rounded-xl border border-border/60 bg-card/60 px-4 py-8 text-center text-sm text-muted-foreground">
+          Loading repository directories...
+        </div>
+      )}
+
+      {!routeDirectory && structure.status === 'failed' && structure.error && (
+        <div className="mt-6 rounded-xl border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+          {structure.error}
+        </div>
+      )}
+
+      {!routeDirectory && structure.status === 'succeeded' && (
+        <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {structure.directories.map((directory) => (
+            <button
+              key={directory.path}
+              type="button"
+              onClick={() => handleCardOpen(directory.path)}
+              className="group rounded-2xl border border-border/60 bg-card/70 p-4 text-left transition-all hover:border-primary/40 hover:bg-card"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="flex items-center gap-2 text-lg font-bold tracking-tight">
+                    <FolderTree className="size-4 text-primary" />
+                    {directory.name}
+                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground">{formatCount(directory.fileCount)} | click to explore</p>
+                </div>
+              </div>
+
+              <div className="mt-3 min-h-16 rounded-xl border border-border/40 bg-background/50 p-3">
+                {directory.subdirectories.length === 0 ? (
+                  <p className="text-xs text-muted-foreground">No nested directories</p>
+                ) : (
+                  <div className="flex flex-wrap gap-1.5">
+                    {directory.subdirectories.slice(0, 8).map((subDir) => (
+                      <span
+                        key={`${directory.path}-${subDir}`}
+                        className="rounded-md border border-border/60 bg-card px-2 py-1 text-[11px] font-medium"
+                      >
+                        {subDir}
+                      </span>
+                    ))}
+                    {directory.subdirectories.length > 8 && (
+                      <span className="rounded-md border border-border/60 bg-card px-2 py-1 text-[11px] font-medium text-muted-foreground">
+                        +{directory.subdirectories.length - 8} more
+                      </span>
+                    )}
+                  </div>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {routeDirectory && (
+        <div className="mt-6 rounded-2xl border border-border/60 bg-card/80">
+          <div className="border-b border-border/60 px-4 py-3">
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Repository explorer</p>
+            <div className="mt-1 flex flex-wrap items-center gap-1 text-sm">
+              <button
+                type="button"
+                className="rounded px-1.5 py-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+                onClick={() => navigate('/analyze')}
+              >
+                root
+              </button>
+              {pathSegments.map((segment, index) => {
+                const nextPath = pathSegments.slice(0, index + 1).join('/');
+                return (
+                  <React.Fragment key={nextPath}>
+                    <span className="text-muted-foreground">/</span>
+                    <button
+                      type="button"
+                      className="rounded px-1.5 py-0.5 hover:bg-muted"
+                      onClick={() => setSearchParams({ path: nextPath })}
+                    >
+                      {segment}
+                    </button>
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="px-2 py-2">
+            {contents.status === 'loading' && (
+              <div className="px-3 py-6 text-sm text-muted-foreground">Loading directory contents...</div>
+            )}
+
+            {contents.status === 'failed' && contents.error && (
+              <div className="mx-2 my-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                {contents.error}
+              </div>
+            )}
+
+            {contents.status === 'succeeded' && (
+              <div className="overflow-hidden rounded-xl border border-border/60 bg-background/70">
+                {contents.entries.map((entry) => {
+                  const isDirectory = entry.type === 'dir';
+
+                  return (
+                    <div
+                      key={entry.path}
+                      className="flex items-center justify-between gap-3 border-b border-border/40 px-3 py-2 text-sm last:border-b-0"
+                    >
+                      <div className="min-w-0 flex-1">
+                        {isDirectory ? (
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-2 text-left font-medium hover:text-primary"
+                            onClick={() => openDirectory(entry.path)}
+                          >
+                            <Folder className="size-4 text-primary" />
+                            <span className="truncate">{entry.name}</span>
+                          </button>
+                        ) : (
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-2 text-left hover:text-primary"
+                            onClick={() => openFile(entry.path)}
+                          >
+                            <FileCode2 className="size-4 text-muted-foreground" />
+                            <span className="truncate">{entry.name}</span>
+                          </button>
+                        )}
+                      </div>
+
+                      <span className="shrink-0 text-xs text-muted-foreground">
+                        {isDirectory ? 'dir' : formatSize(entry.size)}
+                      </span>
+                    </div>
+                  );
+                })}
+
+                {contents.entries.length === 0 && (
+                  <div className="px-3 py-6 text-sm text-muted-foreground">No files found in this directory.</div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {routeDirectory && selectedFilePath && (
+        <div className="mt-6 rounded-2xl border border-border/60 bg-card/80">
+          <div className="flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
+            <div className="min-w-0">
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">File editor</p>
+              <p className="truncate text-sm font-medium">{selectedFilePath}</p>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {fileState.data?.htmlUrl && (
+                <a
+                  href={fileState.data.htmlUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                >
+                  View on GitHub
+                  <ExternalLink className="size-3.5" />
+                </a>
+              )}
+
+              {!isEditing ? (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setIsEditing(true)}
+                  disabled={!fileState.canEdit || fileState.status === 'loading'}
+                >
+                  <Edit3 className="size-3.5" />
+                  Edit
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      setEditorValue(fileState.data?.content || '');
+                      setIsEditing(false);
+                    }}
+                  >
+                    <X className="size-3.5" />
+                    Cancel
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={handleSaveFile}
+                    disabled={!hasUnsavedChanges || fileState.saveStatus === 'loading'}
+                  >
+                    <Save className="size-3.5" />
+                    {fileState.saveStatus === 'loading' ? 'Saving...' : 'Save'}
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+
+          {fileState.status === 'loading' && (
+            <div className="px-4 py-6 text-sm text-muted-foreground">Loading file content...</div>
+          )}
+
+          {fileState.status === 'failed' && fileState.error && (
+            <div className="m-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {fileState.error}
+            </div>
+          )}
+
+          {fileState.status === 'succeeded' && fileState.data && (
+            <div className="p-3">
+              {isEditing ? (
+                <div className="flex h-96 overflow-hidden rounded-xl border border-border/60 bg-background/90">
+                  <pre
+                    ref={editorGutterRef}
+                    aria-hidden="true"
+                    className="w-14 shrink-0 overflow-hidden border-r border-border/60 bg-muted/50 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground"
+                  >
+                    {Array.from({ length: editorLineCount }, (_, i) => i + 1).join('\n')}
+                  </pre>
+                  <textarea
+                    ref={editorTextareaRef}
+                    value={editorValue}
+                    onChange={(e) => setEditorValue(e.target.value)}
+                    onScroll={syncEditorScroll}
+                    spellCheck={false}
+                    className="h-full w-full resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 outline-none"
+                  />
+                </div>
+              ) : (
+                <div className="flex h-96 overflow-hidden rounded-xl border border-border/60 bg-background/90">
+                  <pre
+                    ref={viewerGutterRef}
+                    aria-hidden="true"
+                    className="w-14 shrink-0 overflow-hidden border-r border-border/60 bg-muted/50 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground"
+                  >
+                    {Array.from({ length: viewerLineCount }, (_, i) => i + 1).join('\n')}
+                  </pre>
+                  <pre
+                    ref={viewerCodeRef}
+                    onScroll={syncViewerScroll}
+                    className="h-full w-full overflow-auto px-3 py-3 font-mono text-xs leading-5"
+                  >
+                    <code
+                      className={`language-${codeLanguage}`}
+                      dangerouslySetInnerHTML={{ __html: highlightedContent }}
+                    />
+                  </pre>
+                </div>
+              )}
+
+              {!fileState.canEdit && (
+                <p className="mt-2 text-xs text-muted-foreground">
+                  Read-only mode: sign in with GitHub and select an owned repository to edit files.
+                </p>
+              )}
+
+              {fileState.saveStatus === 'succeeded' && (
+                <p className="mt-2 inline-flex items-center gap-1.5 text-xs text-emerald-600">
+                  <Check className="size-3.5" />
+                  Changes saved successfully.
+                </p>
+              )}
+
+              {fileState.saveStatus === 'failed' && fileState.saveError && (
+                <p className="mt-2 text-xs text-destructive">{fileState.saveError}</p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {structure.truncated && (
+        <div className="mt-4 rounded-lg border border-border/60 bg-card/50 px-3 py-2 text-xs text-muted-foreground">
+          This repository tree is large and GitHub returned a truncated tree. Directory counts may be partial.
+        </div>
+      )}
+
+      {!selectedRepository && structure.status !== 'loading' && (
+        <div className="mt-6 rounded-xl border border-border/60 bg-card/60 px-4 py-4 text-sm text-muted-foreground">
+          <p>No selected repository detected yet.</p>
+          <div className="mt-3">
+            <Link to="/upload-repo">
+              <Button size="sm">Go to Upload Repo</Button>
+            </Link>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/client/src/features/analyze/services/analyzeService.js b/client/src/features/analyze/services/analyzeService.js
new file mode 100644
index 0000000..4eeb76b
--- /dev/null
+++ b/client/src/features/analyze/services/analyzeService.js
@@ -0,0 +1,85 @@
+import axios from 'axios';
+
+const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || '';
+
+const analyzeClient = axios.create({
+  baseURL: apiBaseUrl,
+  withCredentials: true,
+  headers: { 'Content-Type': 'application/json' },
+});
+
+function buildRepoParams(repository, extra = {}) {
+  const params = {
+    source: repository?.mode === 'owned' ? 'owned' : 'public',
+    ...extra,
+  };
+
+  if (repository?.owner && repository?.repo) {
+    params.owner = repository.owner;
+    params.repo = repository.repo;
+  } else if (repository?.url) {
+    params.url = repository.url;
+  }
+
+  if (repository?.branch) {
+    params.branch = repository.branch;
+  }
+
+  return params;
+}
+
+export const analyzeService = {
+  async getRepositoryStructure(repository) {
+    const { data } = await analyzeClient.get('/api/analyze/github/structure', {
+      params: buildRepoParams(repository),
+    });
+
+    return {
+      repository: data?.repository || null,
+      truncated: Boolean(data?.truncated),
+      directories: Array.isArray(data?.directories) ? data.directories : [],
+    };
+  },
+
+  async getDirectoryContents(repository, path = '') {
+    const { data } = await analyzeClient.get('/api/analyze/github/contents', {
+      params: buildRepoParams(repository, {
+        path: String(path || '').trim(),
+      }),
+    });
+
+    return {
+      repository: data?.repository || null,
+      path: data?.path || '',
+      entries: Array.isArray(data?.entries) ? data.entries : [],
+    };
+  },
+
+  async getFileContent(repository, path = '') {
+    const { data } = await analyzeClient.get('/api/analyze/github/file', {
+      params: buildRepoParams(repository, {
+        path: String(path || '').trim(),
+      }),
+    });
+
+    return {
+      repository: data?.repository || null,
+      file: data?.file || null,
+      canEdit: Boolean(data?.canEdit),
+    };
+  },
+
+  async saveFileContent(repository, { path, content, sha, message }) {
+    const { data } = await analyzeClient.put('/api/analyze/github/file', {
+      ...buildRepoParams(repository),
+      path: String(path || '').trim(),
+      content: String(content ?? ''),
+      sha: String(sha || '').trim(),
+      message: String(message || '').trim() || undefined,
+    });
+
+    return {
+      file: data?.file || null,
+    };
+  },
+};
diff --git a/client/src/features/analyze/slices/analyzeSlice.js b/client/src/features/analyze/slices/analyzeSlice.js
new file mode 100644
index 0000000..d9c0cb5
--- /dev/null
+++ b/client/src/features/analyze/slices/analyzeSlice.js
@@ -0,0 +1,301 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { analyzeService } from '../services/analyzeService';
+
+function normalizeRepository(input) {
+  if (!input) return null;
+
+  if (input.source === 'local') {
+    return {
+      source: 'local',
+      localPath: input.localPath || '',
+    };
+  }
+
+  const github = input.github || input;
+  if (!github.owner || !github.repo) {
+    return null;
+  }
+
+  return {
+    source: 'github',
+    mode: github.mode === 'owned' ? 'owned' : 'public',
+    owner: github.owner,
+    repo: github.repo,
+    branch: github.branch || null,
+    url: github.url || null,
+    fullName: github.fullName || `${github.owner}/${github.repo}`,
+  };
+}
+
+function buildRepositoryFromGraphConfig(graphConfig) {
+  if (!graphConfig) return null;
+  if (graphConfig.source === 'local') {
+    return normalizeRepository({
+      source: 'local',
+      localPath: graphConfig.localPath,
+    });
+  }
+
+  if (graphConfig.source === 'github' && graphConfig.github) {
+    return normalizeRepository({
+      source: 'github',
+      ...graphConfig.github,
+    });
+  }
+
+  return null;
+}
+
+function resolveRepository(getState, inputRepository = null) {
+  const explicit = normalizeRepository(inputRepository);
+  if (explicit) return explicit;
+
+  const selected = normalizeRepository(getState().analyze?.selectedRepository);
+  if (selected) return selected;
+
+  return buildRepositoryFromGraphConfig(getState().graph?.lastAnalyzeConfig);
+}
+
+export const fetchRepositoryStructure = createAsyncThunk(
+  'analyze/fetchRepositoryStructure',
+  async ({ repository } = {}, { rejectWithValue, getState }) => {
+    const targetRepository = resolveRepository(getState, repository);
+
+    if (!targetRepository) {
+      return rejectWithValue('Select a repository from Upload Repo first.');
+    }
+
+    if (targetRepository.source !== 'github') {
+      return rejectWithValue('Only GitHub repositories are supported in Analyze Repository view.');
+    }
+
+    try {
+      const payload = await analyzeService.getRepositoryStructure(targetRepository);
+
+      return {
+        repository: {
+          ...targetRepository,
+          ...(payload.repository || {}),
+        },
+        truncated: payload.truncated,
+        directories: payload.directories,
+      };
+    } catch (err) {
+      return rejectWithValue(
+        err?.response?.data?.error || err?.message || 'Failed to load repository structure.',
+      );
+    }
+  },
+);
+
+export const fetchDirectoryContents = createAsyncThunk(
+  'analyze/fetchDirectoryContents',
+  async ({ repository, path = '' } = {}, { rejectWithValue, getState }) => {
+    const targetRepository = resolveRepository(getState, repository);
+
+    if (!targetRepository) {
+      return rejectWithValue('Select a repository from Upload Repo first.');
+    }
+
+    if (targetRepository.source !== 'github') {
+      return rejectWithValue('Only GitHub repositories are supported in Analyze Repository view.');
+    }
+
+    try {
+      const payload = await analyzeService.getDirectoryContents(targetRepository, path);
+      return {
+        repository: {
+          ...targetRepository,
+          ...(payload.repository || {}),
+        },
+        path: payload.path || path,
+        entries: payload.entries,
+      };
+    } catch (err) {
+      return rejectWithValue(
+        err?.response?.data?.error || err?.message || 'Failed to load directory contents.',
+      );
+    }
+  },
+);
+
+export const fetchRepositoryFile = createAsyncThunk(
+  'analyze/fetchRepositoryFile',
+  async ({ repository, path = '' } = {}, { rejectWithValue, getState }) => {
+    const targetRepository = resolveRepository(getState, repository);
+
+    if (!targetRepository) {
+      return rejectWithValue('Select a repository from Upload Repo first.');
+    }
+
+    if (targetRepository.source !== 'github') {
+      return rejectWithValue('Only GitHub repositories are supported in Analyze Repository view.');
+    }
+
+    try {
+      const payload = await analyzeService.getFileContent(targetRepository, path);
+
+      return {
+        repository: {
+          ...targetRepository,
+          ...(payload.repository || {}),
+        },
+        file: payload.file,
+        canEdit: payload.canEdit,
+      };
+    } catch (err) {
+      return rejectWithValue(
+        err?.response?.data?.error || err?.message || 'Failed to load file content.',
+      );
+    }
+  },
+);
+
+export const saveRepositoryFile = createAsyncThunk(
+  'analyze/saveRepositoryFile',
+  async ({ repository, path, content, sha, message } = {}, { rejectWithValue, getState }) => {
+    const targetRepository = resolveRepository(getState, repository);
+
+    if (!targetRepository) {
+      return rejectWithValue('Select a repository from Upload Repo first.');
+    }
+
+    if (targetRepository.source !== 'github') {
+      return rejectWithValue('Only GitHub repositories are supported in Analyze Repository view.');
+    }
+
+    try {
+      const payload = await analyzeService.saveFileContent(targetRepository, {
+        path,
+        content,
+        sha,
+        message,
+      });
+
+      return {
+        repository: targetRepository,
+        file: payload.file,
+        path,
+        content,
+      };
+    } catch (err) {
+      return rejectWithValue(
+        err?.response?.data?.error || err?.message || 'Failed to save file changes.',
+      );
+    }
+  },
+);
+
+const analyzeSlice = createSlice({
+  name: 'analyze',
+  initialState: {
+    selectedRepository: null,
+    structure: {
+      status: 'idle',
+      error: null,
+      truncated: false,
+      directories: [],
+      repository: null,
+    },
+    contents: {
+      status: 'idle',
+      error: null,
+      path: '',
+      entries: [],
+      repository: null,
+    },
+    file: {
+      status: 'idle',
+      saveStatus: 'idle',
+      error: null,
+      saveError: null,
+      canEdit: false,
+      data: null,
+    },
+  },
+  reducers: {
+    setSelectedAnalyzeRepository(state, action) {
+      state.selectedRepository = normalizeRepository(action.payload);
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchRepositoryStructure.pending, (state) => {
+        state.structure.status = 'loading';
+        state.structure.error = null;
+      })
+      .addCase(fetchRepositoryStructure.fulfilled, (state, action) => {
+        state.selectedRepository = action.payload.repository;
+        state.structure.status = 'succeeded';
+        state.structure.error = null;
+        state.structure.truncated = action.payload.truncated;
+        state.structure.directories = action.payload.directories;
+        state.structure.repository = action.payload.repository;
+      })
+      .addCase(fetchRepositoryStructure.rejected, (state, action) => {
+        state.structure.status = 'failed';
+        state.structure.error = action.payload || 'Could not load repository directories.';
+      })
+      .addCase(fetchDirectoryContents.pending, (state) => {
+        state.contents.status = 'loading';
+        state.contents.error = null;
+      })
+      .addCase(fetchDirectoryContents.fulfilled, (state, action) => {
+        state.selectedRepository = action.payload.repository;
+        state.contents.status = 'succeeded';
+        state.contents.error = null;
+        state.contents.path = action.payload.path;
+        state.contents.entries = action.payload.entries;
+        state.contents.repository = action.payload.repository;
+      })
+      .addCase(fetchDirectoryContents.rejected, (state, action) => {
+        state.contents.status = 'failed';
+        state.contents.error = action.payload || 'Could not load directory contents.';
+      })
+      .addCase(fetchRepositoryFile.pending, (state) => {
+        state.file.status = 'loading';
+        state.file.error = null;
+      })
+      .addCase(fetchRepositoryFile.fulfilled, (state, action) => {
+        state.selectedRepository = action.payload.repository;
+        state.file.status = 'succeeded';
+        state.file.error = null;
+        state.file.canEdit = action.payload.canEdit;
+        state.file.data = action.payload.file;
+      })
+      .addCase(fetchRepositoryFile.rejected, (state, action) => {
+        state.file.status = 'failed';
+        state.file.error = action.payload || 'Could not load file content.';
+      })
+      .addCase(saveRepositoryFile.pending, (state) => {
+        state.file.saveStatus = 'loading';
+        state.file.saveError = null;
+      })
+      .addCase(saveRepositoryFile.fulfilled, (state, action) => {
+        state.file.saveStatus = 'succeeded';
+        state.file.saveError = null;
+
+        if (state.file.data && state.file.data.path === action.payload.path) {
+          state.file.data = {
+            ...state.file.data,
+            content: action.payload.content,
+            sha: action.payload.file?.sha || state.file.data.sha,
+            htmlUrl: action.payload.file?.htmlUrl || state.file.data.htmlUrl,
+          };
+        }
+      })
+      .addCase(saveRepositoryFile.rejected, (state, action) => {
+        state.file.saveStatus = 'failed';
+        state.file.saveError = action.payload || 'Could not save file changes.';
+      });
+  },
+});
+
+export const { setSelectedAnalyzeRepository } = analyzeSlice.actions;
+
+export const selectAnalyzeSelectedRepository = (state) => state.analyze.selectedRepository;
+export const selectAnalyzeStructure = (state) => state.analyze.structure;
+export const selectAnalyzeContents = (state) => state.analyze.contents;
+export const selectAnalyzeFile = (state) => state.analyze.file;
+
+export default analyzeSlice.reducer;
diff --git a/client/src/features/graph/components/UploadRepoForm.jsx b/client/src/features/graph/components/UploadRepoForm.jsx
index 711f469..c8f896a 100644
--- a/client/src/features/graph/components/UploadRepoForm.jsx
+++ b/client/src/features/graph/components/UploadRepoForm.jsx
@@ -13,6 +13,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useAuth } from '@/features/auth';
+import { setSelectedAnalyzeRepository } from '@/features/analyze';
 import { graphService } from '../services/graphService';
 import { analyzeCodebase, selectGraphStatus } from '../slices/graphSlice';
 
@@ -469,6 +470,42 @@ export default function UploadRepoForm() {
       return;
     }
 
+    if (source === 'local') {
+      dispatch(
+        setSelectedAnalyzeRepository({
+          source: 'local',
+          localPath: localPath.trim(),
+        }),
+      );
+    }
+
+    if (source === 'github' && githubMode === 'public' && publicRepoInfo) {
+      dispatch(
+        setSelectedAnalyzeRepository({
+          source: 'github',
+          mode: 'public',
+          owner: publicRepoInfo.owner,
+          repo: publicRepoInfo.repo,
+          branch: publicBranch,
+          url: publicRepoUrl.trim(),
+          fullName: publicRepoInfo.fullName,
+        }),
+      );
+    }
+
+    if (source === 'github' && githubMode === 'owned' && selectedOwnedRepo) {
+      dispatch(
+        setSelectedAnalyzeRepository({
+          source: 'github',
+          mode: 'owned',
+          owner: selectedOwnedRepo.owner,
+          repo: selectedOwnedRepo.name,
+          branch: ownedBranch,
+          fullName: selectedOwnedRepo.fullName,
+        }),
+      );
+    }
+
     dispatch(analyzeCodebase(buildAnalyzePayload()));
   };
 
diff --git a/client/src/features/graph/index.js b/client/src/features/graph/index.js
index c7054d6..e24be55 100644
--- a/client/src/features/graph/index.js
+++ b/client/src/features/graph/index.js
@@ -1,5 +1,5 @@
 export { default as UploadRepoPage } from './pages/UploadRepoPage';
-at
+export { default as GraphPage } from './pages/GraphPage';
 
 export { default as GraphView } from './components/GraphView';
 export { default as UploadRepoForm } from './components/UploadRepoForm';
@@ -13,6 +13,7 @@ export {
   selectGraphData,
   selectGraphStatus,
   selectGraphError,
+  selectLastAnalyzeConfig,
   selectSelectedNodeId,
   default as graphReducer,
 } from './slices/graphSlice';
diff --git a/client/src/features/graph/slices/graphSlice.js b/client/src/features/graph/slices/graphSlice.js
index d5157c3..e7a069b 100644
--- a/client/src/features/graph/slices/graphSlice.js
+++ b/client/src/features/graph/slices/graphSlice.js
@@ -157,6 +157,7 @@ const graphSlice = createSlice({
   initialState: {
     data: null,
     job: null,
+    lastAnalyzeConfig: null,
     heatmapMode: false,
     heatmapHotspots: {},
     selectedNodeId: null,
@@ -192,6 +193,7 @@ const graphSlice = createSlice({
     clearGraph(state) {
       state.data = null;
       state.job = null;
+      state.lastAnalyzeConfig = null;
       state.heatmapMode = false;
       state.heatmapHotspots = {};
       state.selectedNodeId = null;
@@ -201,11 +203,12 @@ const graphSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
-      .addCase(analyzeCodebase.pending, (state) => {
+      .addCase(analyzeCodebase.pending, (state, action) => {
         state.status = 'loading';
         state.error = null;
         state.data = null;
         state.job = null;
+        state.lastAnalyzeConfig = action.meta?.arg || null;
         state.heatmapMode = false;
         state.heatmapHotspots = {};
         state.selectedNodeId = null;
@@ -268,6 +271,7 @@ export const selectGraphData = (state) => state.graph.data;
 export const selectAnalysisJob = (state) => state.graph.job;
 export const selectGraphStatus = (state) => state.graph.status;
 export const selectGraphError = (state) => state.graph.error;
+export const selectLastAnalyzeConfig = (state) => state.graph.lastAnalyzeConfig;
 export const selectSelectedNodeId = (state) => state.graph.selectedNodeId;
 export const selectHeatmapMode = (state) => state.graph.heatmapMode;
 export const selectHeatmapHotspots = (state) => state.graph.heatmapHotspots;
diff --git a/client/src/index.css b/client/src/index.css
index ce1d3de..b725130 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -179,4 +179,72 @@
   .text-balance {
     text-wrap: balance;
   }
+}
+
+.language-javascript .token.comment,
+.language-typescript .token.comment,
+.language-tsx .token.comment,
+.language-jsx .token.comment,
+.language-json .token.comment,
+.language-markup .token.comment,
+.language-python .token.comment,
+.language-bash .token.comment,
+.language-markdown .token.comment,
+.language-yaml .token.comment,
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6b7280;
+}
+
+.token.punctuation {
+  color: #94a3b8;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #f43f5e;
+}
+
+.token.boolean,
+.token.number {
+  color: #fb7185;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #22c55e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #38bdf8;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #f59e0b;
+}
+
+.token.function,
+.token.class-name {
+  color: #60a5fa;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #f97316;
 }
\ No newline at end of file
diff --git a/server/src/analyze/controllers/analyze.controller.js b/server/src/analyze/controllers/analyze.controller.js
index abe403e..1ab35bb 100644
--- a/server/src/analyze/controllers/analyze.controller.js
+++ b/server/src/analyze/controllers/analyze.controller.js
@@ -6,11 +6,15 @@ import {
   pickLocalDirectory,
 } from '../services/localPicker.service.js';
 import {
+  fetchRepoFileContent,
+  fetchRepoContents,
   fetchOwnedRepositories,
   fetchRepoBranches,
   fetchRepoDetails,
+  fetchRepoTree,
   parseGitHubRepoUrl,
   resolvePublicRepository,
+  updateRepoFileContent,
 } from '../services/githubApi.service.js';
 import { pgPool, redisClient } from '../../infrastructure/connections.js';
 import {
@@ -518,3 +522,220 @@ export async function listBranchesController(req, res, next) {
     return next(err);
   }
 }
+
+function resolveRepoFromQuery(req) {
+  const source = req.query.source === 'owned' ? 'owned' : 'public';
+  const token = source === 'owned' ? req.cookies?.github_token : undefined;
+
+  const owner = typeof req.query.owner === 'string' ? req.query.owner.trim() : '';
+  const repo = typeof req.query.repo === 'string' ? req.query.repo.trim() : '';
+  const branch = typeof req.query.branch === 'string' ? req.query.branch.trim() : '';
+
+  let targetOwner = owner;
+  let targetRepo = repo;
+
+  if ((!targetOwner || !targetRepo) && typeof req.query.url === 'string') {
+    const parsed = parseGitHubRepoUrl(req.query.url);
+    targetOwner = parsed.owner;
+    targetRepo = parsed.repo;
+  }
+
+  if (!targetOwner || !targetRepo) {
+    const err = new Error('Repository lookup requires owner/repo or a valid GitHub URL.');
+    err.statusCode = 400;
+    throw err;
+  }
+
+  return {
+    source,
+    token,
+    owner: targetOwner,
+    repo: targetRepo,
+    branch,
+  };
+}
+
+export async function listRepositoryStructureController(req, res, next) {
+  try {
+    const { token, owner, repo, branch } = resolveRepoFromQuery(req);
+
+    const [repoDetails, repoTree] = await Promise.all([
+      fetchRepoDetails({ owner, repo, token }),
+      fetchRepoTree({ owner, repo, ref: branch, token }),
+    ]);
+
+    const topLevel = new Map();
+
+    for (const entry of repoTree.tree) {
+      const pathValue = String(entry?.path || '').trim();
+      if (!pathValue) continue;
+
+      const segments = pathValue.split('/').filter(Boolean);
+      if (!segments.length) continue;
+
+      const topDir = segments[0];
+      const isDirectoryPath = entry.type === 'tree';
+
+      if (!topLevel.has(topDir)) {
+        topLevel.set(topDir, {
+          name: topDir,
+          path: topDir,
+          fileCount: 0,
+          subdirectories: new Set(),
+        });
+      }
+
+      const current = topLevel.get(topDir);
+
+      if (entry.type === 'blob') {
+        current.fileCount += 1;
+      }
+
+      if (segments.length > 1) {
+        current.subdirectories.add(segments[1]);
+      } else if (segments.length === 1 && isDirectoryPath) {
+        current.subdirectories = current.subdirectories || new Set();
+      }
+    }
+
+    const directories = Array.from(topLevel.values())
+      .map((item) => ({
+        name: item.name,
+        path: item.path,
+        fileCount: item.fileCount,
+        subdirectories: Array.from(item.subdirectories)
+          .filter(Boolean)
+          .sort((a, b) => a.localeCompare(b)),
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    return res.status(200).json({
+      repository: {
+        owner: repoDetails.owner,
+        repo: repoDetails.repo,
+        fullName: repoDetails.fullName,
+        branch: branch || repoDetails.defaultBranch || null,
+        defaultBranch: repoDetails.defaultBranch,
+        htmlUrl: `https://github.com/${repoDetails.owner}/${repoDetails.repo}`,
+      },
+      truncated: repoTree.truncated,
+      directories,
+    });
+  } catch (err) {
+    return next(err);
+  }
+}
+
+export async function listRepositoryDirectoryController(req, res, next) {
+  try {
+    const { token, owner, repo, branch } = resolveRepoFromQuery(req);
+    const requestedPath = typeof req.query.path === 'string'
+      ? req.query.path.trim().replace(/^\/+/, '').replace(/\/+$/, '')
+      : '';
+
+    const [repoDetails, entries] = await Promise.all([
+      fetchRepoDetails({ owner, repo, token }),
+      fetchRepoContents({ owner, repo, path: requestedPath, ref: branch, token }),
+    ]);
+
+    return res.status(200).json({
+      repository: {
+        owner: repoDetails.owner,
+        repo: repoDetails.repo,
+        fullName: repoDetails.fullName,
+        branch: branch || repoDetails.defaultBranch || null,
+        defaultBranch: repoDetails.defaultBranch,
+        htmlUrl: `https://github.com/${repoDetails.owner}/${repoDetails.repo}`,
+      },
+      path: requestedPath,
+      entries,
+    });
+  } catch (err) {
+    return next(err);
+  }
+}
+
+export async function getRepositoryFileController(req, res, next) {
+  try {
+    const { token, owner, repo, branch } = resolveRepoFromQuery(req);
+    const requestedPath = typeof req.query.path === 'string'
+      ? req.query.path.trim().replace(/^\/+/, '').replace(/\/+$/, '')
+      : '';
+
+    if (!requestedPath) {
+      const err = new Error('File path is required to load repository file content.');
+      err.statusCode = 400;
+      throw err;
+    }
+
+    const [repoDetails, file] = await Promise.all([
+      fetchRepoDetails({ owner, repo, token }),
+      fetchRepoFileContent({ owner, repo, path: requestedPath, ref: branch, token }),
+    ]);
+
+    return res.status(200).json({
+      repository: {
+        owner: repoDetails.owner,
+        repo: repoDetails.repo,
+        fullName: repoDetails.fullName,
+        branch: branch || repoDetails.defaultBranch || null,
+        defaultBranch: repoDetails.defaultBranch,
+        htmlUrl: `https://github.com/${repoDetails.owner}/${repoDetails.repo}`,
+      },
+      file,
+      canEdit: req.query.source === 'owned',
+    });
+  } catch (err) {
+    return next(err);
+  }
+}
+
+export async function updateRepositoryFileController(req, res, next) {
+  try {
+    const source = req.body.source === 'owned' ? 'owned' : 'public';
+    const token = source === 'owned' ? req.cookies?.github_token : undefined;
+
+    let targetOwner = req.body.owner || '';
+    let targetRepo = req.body.repo || '';
+
+    if ((!targetOwner || !targetRepo) && typeof req.body.url === 'string') {
+      const parsed = parseGitHubRepoUrl(req.body.url);
+      targetOwner = parsed.owner;
+      targetRepo = parsed.repo;
+    }
+
+    if (!targetOwner || !targetRepo) {
+      const err = new Error('Repository update requires owner/repo or a valid GitHub URL.');
+      err.statusCode = 400;
+      throw err;
+    }
+
+    if (source !== 'owned') {
+      const err = new Error('Editing files is only supported for authenticated owned repositories.');
+      err.statusCode = 403;
+      throw err;
+    }
+
+    const updated = await updateRepoFileContent({
+      owner: targetOwner,
+      repo: targetRepo,
+      path: req.body.path,
+      ref: req.body.branch,
+      token,
+      content: req.body.content,
+      sha: req.body.sha,
+      message: req.body.message,
+    });
+
+    return res.status(200).json({
+      file: {
+        path: updated.path,
+        sha: updated.sha,
+        htmlUrl: updated.htmlUrl,
+        commitSha: updated.commitSha,
+      },
+    });
+  } catch (err) {
+    return next(err);
+  }
+}
diff --git a/server/src/analyze/middleware/validate.middleware.js b/server/src/analyze/middleware/validate.middleware.js
index e12c03e..4ba461e 100644
--- a/server/src/analyze/middleware/validate.middleware.js
+++ b/server/src/analyze/middleware/validate.middleware.js
@@ -95,3 +95,91 @@ export function validateBranchQuery(req, _res, next) {
 
   return next();
 }
+
+export function validateRepoBrowserQuery(req, _res, next) {
+  const hasOwner = isNonEmptyString(req.query?.owner);
+  const hasRepo = isNonEmptyString(req.query?.repo);
+  const hasUrl = isNonEmptyString(req.query?.url);
+
+  if (!hasUrl && !(hasOwner && hasRepo)) {
+    return fail(next, 'Repository query requires owner/repo or a valid GitHub URL.');
+  }
+
+  if (hasOwner) req.query.owner = req.query.owner.trim();
+  if (hasRepo) req.query.repo = req.query.repo.trim();
+  if (hasUrl) req.query.url = req.query.url.trim();
+
+  if (isNonEmptyString(req.query?.branch)) {
+    req.query.branch = req.query.branch.trim();
+  }
+
+  if (isNonEmptyString(req.query?.path)) {
+    req.query.path = req.query.path.trim().replace(/^\/+/, '').replace(/\/+$/, '');
+  }
+
+  return next();
+}
+
+export function validateRepoFileQuery(req, _res, next) {
+  const hasOwner = isNonEmptyString(req.query?.owner);
+  const hasRepo = isNonEmptyString(req.query?.repo);
+  const hasUrl = isNonEmptyString(req.query?.url);
+  const hasPath = isNonEmptyString(req.query?.path);
+
+  if (!hasPath) {
+    return fail(next, 'Repository file query requires a non-empty "path" value.');
+  }
+
+  if (!hasUrl && !(hasOwner && hasRepo)) {
+    return fail(next, 'Repository file query requires owner/repo or a valid GitHub URL.');
+  }
+
+  if (hasOwner) req.query.owner = req.query.owner.trim();
+  if (hasRepo) req.query.repo = req.query.repo.trim();
+  if (hasUrl) req.query.url = req.query.url.trim();
+  req.query.path = req.query.path.trim().replace(/^\/+/, '').replace(/\/+$/, '');
+
+  if (isNonEmptyString(req.query?.branch)) {
+    req.query.branch = req.query.branch.trim();
+  }
+
+  return next();
+}
+
+export function validateRepoFileUpdateBody(req, _res, next) {
+  const body = req.body ?? {};
+
+  const hasOwner = isNonEmptyString(body.owner);
+  const hasRepo = isNonEmptyString(body.repo);
+  const hasUrl = isNonEmptyString(body.url);
+
+  if (!hasUrl && !(hasOwner && hasRepo)) {
+    return fail(next, 'Repository file update requires owner/repo or a valid GitHub URL.');
+  }
+
+  if (!isNonEmptyString(body.path)) {
+    return fail(next, 'Repository file update requires a non-empty "path" string.');
+  }
+
+  if (typeof body.content !== 'string') {
+    return fail(next, 'Repository file update requires "content" as a string.');
+  }
+
+  if (!isNonEmptyString(body.sha)) {
+    return fail(next, 'Repository file update requires a non-empty "sha" string.');
+  }
+
+  req.body = {
+    source: body.source === 'owned' ? 'owned' : 'public',
+    ...(hasOwner ? { owner: body.owner.trim() } : {}),
+    ...(hasRepo ? { repo: body.repo.trim() } : {}),
+    ...(hasUrl ? { url: body.url.trim() } : {}),
+    path: body.path.trim().replace(/^\/+/, '').replace(/\/+$/, ''),
+    content: body.content,
+    sha: body.sha.trim(),
+    ...(isNonEmptyString(body.branch) ? { branch: body.branch.trim() } : {}),
+    ...(isNonEmptyString(body.message) ? { message: body.message.trim() } : {}),
+  };
+
+  return next();
+}
diff --git a/server/src/analyze/routes/analyze.routes.js b/server/src/analyze/routes/analyze.routes.js
index 94a64ad..8f117bf 100644
--- a/server/src/analyze/routes/analyze.routes.js
+++ b/server/src/analyze/routes/analyze.routes.js
@@ -5,15 +5,22 @@ import {
   validateBranchQuery,
   validateLocalPathBody,
   validatePublicRepoBody,
+  validateRepoBrowserQuery,
+  validateRepoFileQuery,
+  validateRepoFileUpdateBody,
 } from '../middleware/validate.middleware.js';
 import {
   analyzeController,
   browseLocalPathController,
+  getRepositoryFileController,
   listAnalysisHistoryController,
   listBranchesController,
+  listRepositoryDirectoryController,
+  listRepositoryStructureController,
   listOwnedReposController,
   localPickerCapabilitiesController,
   resolvePublicRepoController,
+  updateRepositoryFileController,
   validateLocalPathController,
 } from '../controllers/analyze.controller.js';
 
@@ -35,5 +42,9 @@ router.post('/local/validate', analyzeLimiter, validateLocalPathBody, validateLo
 router.post('/github/public/resolve', analyzeLimiter, validatePublicRepoBody, resolvePublicRepoController);
 router.get('/github/repos', analyzeLimiter, listOwnedReposController);
 router.get('/github/branches', analyzeLimiter, validateBranchQuery, listBranchesController);
+router.get('/github/structure', analyzeLimiter, validateRepoBrowserQuery, listRepositoryStructureController);
+router.get('/github/contents', analyzeLimiter, validateRepoBrowserQuery, listRepositoryDirectoryController);
+router.get('/github/file', analyzeLimiter, validateRepoFileQuery, getRepositoryFileController);
+router.put('/github/file', analyzeLimiter, validateRepoFileUpdateBody, updateRepositoryFileController);
 
 export default router;
diff --git a/server/src/analyze/services/githubApi.service.js b/server/src/analyze/services/githubApi.service.js
index 370d26a..6086231 100644
--- a/server/src/analyze/services/githubApi.service.js
+++ b/server/src/analyze/services/githubApi.service.js
@@ -68,15 +68,18 @@ function parseGitHubRateLimitError(response, context = 'GitHub API request') {
   throw err;
 }
 
-async function githubFetchRaw(urlOrPath, { token, headers = {} } = {}) {
+async function githubFetchRaw(urlOrPath, { token, headers = {}, method = 'GET', body } = {}) {
   const targetUrl = urlOrPath.startsWith('http') ? urlOrPath : `${GITHUB_API_BASE}${urlOrPath}`;
   return fetch(targetUrl, {
+    method,
     headers: {
       Accept: 'application/vnd.github+json',
       'User-Agent': 'codegraph-ai',
+      ...(body ? { 'Content-Type': 'application/json' } : {}),
       ...(token ? { Authorization: `Bearer ${token}` } : {}),
       ...headers,
     },
+    ...(body ? { body: JSON.stringify(body) } : {}),
   });
 }
 
@@ -177,6 +180,176 @@ export async function fetchRepoBranches({ owner, repo, token }) {
   }));
 }
 
+function buildRepoContentsPath({ owner, repo, path: repoPath = '', ref = '' }) {
+  const encodedOwner = encodeURIComponent(owner);
+  const encodedRepo = encodeURIComponent(repo);
+  const normalizedPath = String(repoPath || '')
+    .split('/')
+    .map((segment) => segment.trim())
+    .filter(Boolean)
+    .map((segment) => encodeURIComponent(segment))
+    .join('/');
+
+  const basePath = normalizedPath
+    ? `/repos/${encodedOwner}/${encodedRepo}/contents/${normalizedPath}`
+    : `/repos/${encodedOwner}/${encodedRepo}/contents`;
+
+  if (!ref) return basePath;
+  return `${basePath}?ref=${encodeURIComponent(ref)}`;
+}
+
+function normalizeContentEntry(entry) {
+  return {
+    name: entry?.name || '',
+    path: entry?.path || '',
+    type: entry?.type || 'file',
+    size: Number.isFinite(entry?.size) ? entry.size : 0,
+    sha: entry?.sha || null,
+    htmlUrl: entry?.html_url || null,
+    downloadUrl: entry?.download_url || null,
+  };
+}
+
+export async function fetchRepoContents({ owner, repo, path = '', ref = '', token }) {
+  const apiPath = buildRepoContentsPath({ owner, repo, path, ref });
+  const data = await githubFetch(apiPath, { token });
+
+  if (!Array.isArray(data)) {
+    return [];
+  }
+
+  const entries = data.map(normalizeContentEntry);
+
+  entries.sort((a, b) => {
+    const aIsDir = a.type === 'dir';
+    const bIsDir = b.type === 'dir';
+
+    if (aIsDir && !bIsDir) return -1;
+    if (!aIsDir && bIsDir) return 1;
+
+    return a.name.localeCompare(b.name);
+  });
+
+  return entries;
+}
+
+export async function fetchRepoTree({ owner, repo, ref = '', token }) {
+  const encodedOwner = encodeURIComponent(owner);
+  const encodedRepo = encodeURIComponent(repo);
+  const encodedRef = encodeURIComponent(ref || 'HEAD');
+  const data = await githubFetch(
+    `/repos/${encodedOwner}/${encodedRepo}/git/trees/${encodedRef}?recursive=1`,
+    { token },
+  );
+
+  const tree = Array.isArray(data?.tree) ? data.tree : [];
+
+  return {
+    truncated: Boolean(data?.truncated),
+    tree: tree.map((entry) => ({
+      path: entry?.path || '',
+      type: entry?.type || 'blob',
+      size: Number.isFinite(entry?.size) ? entry.size : 0,
+      sha: entry?.sha || null,
+    })),
+  };
+}
+
+function decodeGitHubBase64Content(content) {
+  try {
+    return Buffer.from(String(content || ''), 'base64').toString('utf8');
+  } catch {
+    const err = new Error('Failed to decode GitHub file content.');
+    err.statusCode = 422;
+    throw err;
+  }
+}
+
+function encodeGitHubBase64Content(content) {
+  return Buffer.from(String(content || ''), 'utf8').toString('base64');
+}
+
+export async function fetchRepoFileContent({ owner, repo, path, ref = '', token }) {
+  const apiPath = buildRepoContentsPath({ owner, repo, path, ref });
+  const data = await githubFetch(apiPath, { token });
+
+  if (Array.isArray(data) || data?.type !== 'file') {
+    const err = new Error('Requested path is not a file.');
+    err.statusCode = 400;
+    throw err;
+  }
+
+  const encoding = data?.encoding || 'base64';
+  const rawContent = String(data?.content || '').replace(/\n/g, '');
+
+  if (encoding !== 'base64') {
+    const err = new Error(`Unsupported GitHub file encoding: ${encoding}.`);
+    err.statusCode = 422;
+    throw err;
+  }
+
+  const content = decodeGitHubBase64Content(rawContent);
+
+  return {
+    name: data?.name || path.split('/').pop() || 'unknown-file',
+    path: data?.path || path,
+    sha: data?.sha || null,
+    size: Number.isFinite(data?.size) ? data.size : 0,
+    htmlUrl: data?.html_url || null,
+    downloadUrl: data?.download_url || null,
+    content,
+    encoding: 'utf8',
+  };
+}
+
+export async function updateRepoFileContent({
+  owner,
+  repo,
+  path,
+  ref = '',
+  token,
+  content,
+  sha,
+  message,
+}) {
+  if (!token) {
+    const err = new Error('GitHub authentication required to update files.');
+    err.statusCode = 401;
+    throw err;
+  }
+
+  if (!sha) {
+    const err = new Error('A file SHA is required to update file content.');
+    err.statusCode = 400;
+    throw err;
+  }
+
+  const apiPath = buildRepoContentsPath({ owner, repo, path });
+  const response = await githubFetchRaw(apiPath, {
+    token,
+    method: 'PUT',
+    body: {
+      message: message || `Update ${path} via CodeGraph AI`,
+      content: encodeGitHubBase64Content(content),
+      sha,
+      ...(ref ? { branch: ref } : {}),
+    },
+  });
+
+  if (!response.ok) {
+    parseGitHubRateLimitError(response, `GitHub file update (${path})`);
+  }
+
+  const data = await response.json();
+
+  return {
+    path: data?.content?.path || path,
+    sha: data?.content?.sha || null,
+    htmlUrl: data?.content?.html_url || `https://github.com/${owner}/${repo}/blob/${ref || 'main'}/${path}`,
+    commitSha: data?.commit?.sha || null,
+  };
+}
+
 export async function fetchOwnedRepositories({ token }) {
   if (!token) {
     const err = new Error('GitHub authentication required. Please log in with GitHub.');

From 33191646c660b86463fd72238a55f9375d5d0783 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 17:22:16 +0530
Subject: [PATCH 07/19] refactor: proper code editor view

---
 client/src/App.jsx                            |   3 +-
 client/src/components/layout/Sidebar.jsx      |   5 +-
 client/src/features/analyze/index.js          |   1 +
 .../analyze/pages/AnalyzeFilePage.jsx         | 315 ++++++++++++++++++
 .../features/analyze/pages/AnalyzePage.jsx    | 265 +--------------
 .../dashboard/pages/DashboardPage.jsx         |  48 ++-
 docker-compose.yml                            |   1 -
 7 files changed, 384 insertions(+), 254 deletions(-)
 create mode 100644 client/src/features/analyze/pages/AnalyzeFilePage.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 0bc3c93..08c7ea1 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -11,7 +11,7 @@ import Layout from '@/components/layout/Layout';
 import { LandingPage, LoginPage, SignupPage } from '@/features/auth';
 import { DashboardPage }                      from '@/features/dashboard';
 import { UploadRepoPage, GraphPage }             from '@/features/graph';
-import { AnalyzePage }             from '@/features/analyze';
+import { AnalyzeFilePage, AnalyzePage }             from '@/features/analyze';
 
 function RootRedirect() {
   const { isAuthenticated, loading } = useAuth();
@@ -43,6 +43,7 @@ function AppRoutes() {
           <Route path="/upload-repo" element={<UploadRepoPage />} />
           <Route path="/analyze" element={<AnalyzePage />} />
           <Route path="/analyze/:dir_name" element={<AnalyzePage />} />
+          <Route path="/analyze/:dir_name/file" element={<AnalyzeFilePage />} />
           <Route path="/graph" element={<GraphPage />} />
         </Route>
       </Route>
diff --git a/client/src/components/layout/Sidebar.jsx b/client/src/components/layout/Sidebar.jsx
index 084890d..75e3645 100644
--- a/client/src/components/layout/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar.jsx
@@ -8,6 +8,7 @@ import {
   ChevronLeft,
   ChevronRight,
   UploadIcon,
+  GitGraphIcon,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -24,12 +25,12 @@ const NAV_ITEMS = [
   },
   {
     to: '/analyze',
-    icon: <Network className="size-4 shrink-0" />,
+    icon: <GitGraphIcon className="size-4 shrink-0" />,
     label: 'Analyze',
   },
   {
     to: '/graph',
-    icon: <Share2 className="size-4 shrink-0" />,
+    icon: <Network className="size-4 shrink-0" />,
     label: 'Graph',
   },
 ];
diff --git a/client/src/features/analyze/index.js b/client/src/features/analyze/index.js
index 2fb2b93..369a0dd 100644
--- a/client/src/features/analyze/index.js
+++ b/client/src/features/analyze/index.js
@@ -1,4 +1,5 @@
 export { default as AnalyzePage } from './pages/AnalyzePage';
+export { default as AnalyzeFilePage } from './pages/AnalyzeFilePage';
 
 export {
 	fetchRepositoryFile,
diff --git a/client/src/features/analyze/pages/AnalyzeFilePage.jsx b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
new file mode 100644
index 0000000..54d5959
--- /dev/null
+++ b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
@@ -0,0 +1,315 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-yaml';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import {
+  ArrowLeft,
+  Check,
+  Edit3,
+  ExternalLink,
+  GitBranch,
+  Save,
+  X,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  fetchRepositoryFile,
+  fetchRepositoryStructure,
+  saveRepositoryFile,
+  selectAnalyzeFile,
+  selectAnalyzeSelectedRepository,
+  selectAnalyzeStructure,
+} from '../slices/analyzeSlice';
+
+function detectPrismLanguage(filePath = '') {
+  const normalized = String(filePath).toLowerCase();
+
+  if (normalized.endsWith('.ts')) return 'typescript';
+  if (normalized.endsWith('.tsx')) return 'tsx';
+  if (normalized.endsWith('.js')) return 'javascript';
+  if (normalized.endsWith('.jsx')) return 'jsx';
+  if (normalized.endsWith('.json')) return 'json';
+  if (normalized.endsWith('.css')) return 'css';
+  if (normalized.endsWith('.html')) return 'markup';
+  if (normalized.endsWith('.md')) return 'markdown';
+  if (normalized.endsWith('.yml') || normalized.endsWith('.yaml')) return 'yaml';
+  if (normalized.endsWith('.py')) return 'python';
+  if (normalized.endsWith('.sh')) return 'bash';
+
+  return 'clike';
+}
+
+export default function AnalyzeFilePage() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const params = useParams();
+  const [searchParams] = useSearchParams();
+
+  const selectedRepository = useSelector(selectAnalyzeSelectedRepository);
+  const structure = useSelector(selectAnalyzeStructure);
+  const fileState = useSelector(selectAnalyzeFile);
+
+  const [editorValue, setEditorValue] = useState('');
+  const [isEditing, setIsEditing] = useState(false);
+
+  const editorGutterRef = useRef(null);
+  const editorTextareaRef = useRef(null);
+  const viewerGutterRef = useRef(null);
+  const viewerCodeRef = useRef(null);
+
+  const routeDirectory = useMemo(() => {
+    const raw = params.dir_name ? decodeURIComponent(params.dir_name) : '';
+    return raw.trim();
+  }, [params.dir_name]);
+
+  const currentPath = useMemo(() => {
+    const queryPath = String(searchParams.get('path') || '').trim();
+    if (queryPath) return queryPath;
+    return routeDirectory;
+  }, [routeDirectory, searchParams]);
+
+  const selectedFilePath = useMemo(() => {
+    return String(searchParams.get('file') || '').trim();
+  }, [searchParams]);
+
+  useEffect(() => {
+    dispatch(fetchRepositoryStructure());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!selectedFilePath) return;
+    dispatch(fetchRepositoryFile({ path: selectedFilePath }));
+  }, [dispatch, selectedFilePath]);
+
+  useEffect(() => {
+    const fileContent = fileState.data?.content;
+    if (typeof fileContent !== 'string') return;
+    setEditorValue(fileContent);
+    setIsEditing(false);
+  }, [fileState.data?.content, fileState.data?.path]);
+
+  const codeLanguage = useMemo(
+    () => detectPrismLanguage(fileState.data?.path || selectedFilePath),
+    [fileState.data?.path, selectedFilePath],
+  );
+
+  const highlightedContent = useMemo(() => {
+    const value = String(fileState.data?.content || '');
+    const grammar = Prism.languages[codeLanguage] || Prism.languages.clike;
+    return Prism.highlight(value, grammar, codeLanguage);
+  }, [codeLanguage, fileState.data?.content]);
+
+  const viewerLineCount = useMemo(() => {
+    const value = String(fileState.data?.content || '');
+    return Math.max(1, value.split('\n').length);
+  }, [fileState.data?.content]);
+
+  const editorLineCount = useMemo(() => {
+    return Math.max(1, String(editorValue || '').split('\n').length);
+  }, [editorValue]);
+
+  const hasUnsavedChanges =
+    typeof fileState.data?.content === 'string' &&
+    editorValue !== fileState.data.content;
+
+  const handleSaveFile = async () => {
+    if (!fileState.data?.path || !fileState.data?.sha) return;
+
+    await dispatch(
+      saveRepositoryFile({
+        path: fileState.data.path,
+        content: editorValue,
+        sha: fileState.data.sha,
+        message: `Update ${fileState.data.path} via CodeGraph AI editor`,
+      }),
+    );
+
+    setIsEditing(false);
+  };
+
+  const syncEditorScroll = () => {
+    if (!editorGutterRef.current || !editorTextareaRef.current) return;
+    editorGutterRef.current.scrollTop = editorTextareaRef.current.scrollTop;
+  };
+
+  const syncViewerScroll = () => {
+    if (!viewerGutterRef.current || !viewerCodeRef.current) return;
+    viewerGutterRef.current.scrollTop = viewerCodeRef.current.scrollTop;
+  };
+
+  const backToExplorer = `/analyze/${encodeURIComponent(routeDirectory)}?path=${encodeURIComponent(currentPath)}`;
+
+  return (
+    <section className="mx-auto w-full max-w-375 px-4 pb-10 pt-7">
+      <div className="mb-5">
+        <Link
+          to={backToExplorer}
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="size-4" />
+          Back to Explorer
+        </Link>
+      </div>
+
+      <header className="rounded-2xl border border-border/60 bg-card/70 px-5 py-6">
+        {structure.repository?.fullName && (
+          <div className="mt-4 flex flex-wrap items-center gap-3 text-xs">
+            <span className="rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
+              {structure.repository.fullName}
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
+              <GitBranch className="size-3.5" />
+              {structure.repository.branch || structure.repository.defaultBranch || 'default'}
+            </span>
+            {fileState.data?.htmlUrl && (
+              <a
+                href={fileState.data.htmlUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground"
+              >
+                View on GitHub
+                <ExternalLink className="size-3.5" />
+              </a>
+            )}
+          </div>
+        )}
+      </header>
+
+      {!selectedFilePath && (
+        <div className="mt-6 rounded-xl border border-border/60 bg-card/60 px-4 py-4 text-sm text-muted-foreground">
+          No file selected. Open a file from repository explorer first.
+        </div>
+      )}
+
+      {selectedFilePath && (
+        <div className="mt-6 rounded-2xl border border-border/60 bg-card/80">
+          <div className="flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
+            <div className="min-w-0">
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">File</p>
+              <p className="truncate text-sm font-medium">{selectedFilePath}</p>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {!isEditing ? (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setIsEditing(true)}
+                  disabled={!fileState.canEdit || fileState.status === 'loading'}
+                >
+                  <Edit3 className="size-3.5" />
+                  Edit
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => {
+                      setEditorValue(fileState.data?.content || '');
+                      setIsEditing(false);
+                    }}
+                  >
+                    <X className="size-3.5" />
+                    Cancel
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={handleSaveFile}
+                    disabled={!hasUnsavedChanges || fileState.saveStatus === 'loading'}
+                  >
+                    <Save className="size-3.5" />
+                    {fileState.saveStatus === 'loading' ? 'Saving...' : 'Save'}
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+
+          {fileState.status === 'loading' && (
+            <div className="px-4 py-6 text-sm text-muted-foreground">Loading file content...</div>
+          )}
+
+          {fileState.status === 'failed' && fileState.error && (
+            <div className="m-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {fileState.error}
+            </div>
+          )}
+
+          {fileState.status === 'succeeded' && fileState.data && (
+            <div className="p-3">
+              {isEditing ? (
+                <div className="flex h-96 overflow-hidden rounded-xl border border-border/60 bg-background/90">
+                  <pre
+                    ref={editorGutterRef}
+                    aria-hidden="true"
+                    className="w-14 shrink-0 overflow-hidden border-r border-border/60 bg-muted/50 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground"
+                  >
+                    {Array.from({ length: editorLineCount }, (_, i) => i + 1).join('\n')}
+                  </pre>
+                  <textarea
+                    ref={editorTextareaRef}
+                    value={editorValue}
+                    onChange={(e) => setEditorValue(e.target.value)}
+                    onScroll={syncEditorScroll}
+                    spellCheck={false}
+                    className="h-full w-full resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 outline-none"
+                  />
+                </div>
+              ) : (
+                <div className="flex h-96 overflow-hidden rounded-xl border border-border/60 bg-background/90">
+                  <pre
+                    ref={viewerGutterRef}
+                    aria-hidden="true"
+                    className="w-14 shrink-0 overflow-hidden border-r border-border/60 bg-muted/50 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground"
+                  >
+                    {Array.from({ length: viewerLineCount }, (_, i) => i + 1).join('\n')}
+                  </pre>
+                  <pre
+                    ref={viewerCodeRef}
+                    onScroll={syncViewerScroll}
+                    className="h-full w-full overflow-auto px-3 py-3 font-mono text-xs leading-5"
+                  >
+                    <code
+                      className={`language-${codeLanguage}`}
+                      dangerouslySetInnerHTML={{ __html: highlightedContent }}
+                    />
+                  </pre>
+                </div>
+              )}
+
+              {!fileState.canEdit && (
+                <p className="mt-2 text-xs text-muted-foreground">
+                  Read-only mode: sign in with GitHub and select an owned repository to edit files.
+                </p>
+              )}
+
+              {fileState.saveStatus === 'succeeded' && (
+                <p className="mt-2 inline-flex items-center gap-1.5 text-xs text-emerald-600">
+                  <Check className="size-3.5" />
+                  Changes saved successfully.
+                </p>
+              )}
+
+              {fileState.saveStatus === 'failed' && fileState.saveError && (
+                <p className="mt-2 text-xs text-destructive">{fileState.saveError}</p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/client/src/features/analyze/pages/AnalyzePage.jsx b/client/src/features/analyze/pages/AnalyzePage.jsx
index f774422..798ef17 100644
--- a/client/src/features/analyze/pages/AnalyzePage.jsx
+++ b/client/src/features/analyze/pages/AnalyzePage.jsx
@@ -1,38 +1,19 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import Prism from 'prismjs';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-jsx';
-import 'prismjs/components/prism-typescript';
-import 'prismjs/components/prism-tsx';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-json';
-import 'prismjs/components/prism-bash';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-yaml';
+import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import {
   ArrowLeft,
-  Check,
-  Edit3,
   ExternalLink,
   FileCode2,
-  FolderTree,
   Folder,
+  FolderTree,
   GitBranch,
-  Save,
-  X,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   fetchDirectoryContents,
-  fetchRepositoryFile,
   fetchRepositoryStructure,
-  saveRepositoryFile,
   selectAnalyzeContents,
-  selectAnalyzeFile,
   selectAnalyzeSelectedRepository,
   selectAnalyzeStructure,
 } from '../slices/analyzeSlice';
@@ -50,24 +31,6 @@ function formatSize(bytes) {
   return `${(size / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-function detectPrismLanguage(filePath = '') {
-  const normalized = String(filePath).toLowerCase();
-
-  if (normalized.endsWith('.ts')) return 'typescript';
-  if (normalized.endsWith('.tsx')) return 'tsx';
-  if (normalized.endsWith('.js')) return 'javascript';
-  if (normalized.endsWith('.jsx')) return 'jsx';
-  if (normalized.endsWith('.json')) return 'json';
-  if (normalized.endsWith('.css')) return 'css';
-  if (normalized.endsWith('.html')) return 'markup';
-  if (normalized.endsWith('.md')) return 'markdown';
-  if (normalized.endsWith('.yml') || normalized.endsWith('.yaml')) return 'yaml';
-  if (normalized.endsWith('.py')) return 'python';
-  if (normalized.endsWith('.sh')) return 'bash';
-
-  return 'clike';
-}
-
 export default function AnalyzePage() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -77,15 +40,6 @@ export default function AnalyzePage() {
   const selectedRepository = useSelector(selectAnalyzeSelectedRepository);
   const structure = useSelector(selectAnalyzeStructure);
   const contents = useSelector(selectAnalyzeContents);
-  const fileState = useSelector(selectAnalyzeFile);
-
-  const [editorValue, setEditorValue] = useState('');
-  const [isEditing, setIsEditing] = useState(false);
-
-  const editorGutterRef = useRef(null);
-  const editorTextareaRef = useRef(null);
-  const viewerGutterRef = useRef(null);
-  const viewerCodeRef = useRef(null);
 
   const routeDirectory = useMemo(() => {
     const raw = params.dir_name ? decodeURIComponent(params.dir_name) : '';
@@ -98,9 +52,7 @@ export default function AnalyzePage() {
     return routeDirectory;
   }, [routeDirectory, searchParams]);
 
-  const selectedFilePath = useMemo(() => {
-    return String(searchParams.get('file') || '').trim();
-  }, [searchParams]);
+  const isFirstAnalyzePage = !routeDirectory;
 
   useEffect(() => {
     dispatch(fetchRepositoryStructure());
@@ -111,18 +63,6 @@ export default function AnalyzePage() {
     dispatch(fetchDirectoryContents({ path: currentPath }));
   }, [currentPath, dispatch, routeDirectory]);
 
-  useEffect(() => {
-    if (!routeDirectory || !selectedFilePath) return;
-    dispatch(fetchRepositoryFile({ path: selectedFilePath }));
-  }, [dispatch, routeDirectory, selectedFilePath]);
-
-  useEffect(() => {
-    const fileContent = fileState.data?.content;
-    if (typeof fileContent !== 'string') return;
-    setEditorValue(fileContent);
-    setIsEditing(false);
-  }, [fileState.data?.content, fileState.data?.path]);
-
   const showLocalSourceMessage = selectedRepository?.source === 'local';
 
   const handleCardOpen = (directoryPath) => {
@@ -135,60 +75,15 @@ export default function AnalyzePage() {
   };
 
   const openFile = (entryPath) => {
-    setSearchParams({ path: currentPath, file: entryPath });
+    const encodedDir = encodeURIComponent(routeDirectory);
+    const nextSearch = new URLSearchParams();
+    nextSearch.set('path', currentPath);
+    nextSearch.set('file', entryPath);
+    navigate(`/analyze/${encodedDir}/file?${nextSearch.toString()}`);
   };
 
   const pathSegments = currentPath ? currentPath.split('/').filter(Boolean) : [];
 
-  const hasUnsavedChanges =
-    typeof fileState.data?.content === 'string' &&
-    editorValue !== fileState.data.content;
-
-  const codeLanguage = useMemo(
-    () => detectPrismLanguage(fileState.data?.path || selectedFilePath),
-    [fileState.data?.path, selectedFilePath],
-  );
-
-  const highlightedContent = useMemo(() => {
-    const value = String(fileState.data?.content || '');
-    const grammar = Prism.languages[codeLanguage] || Prism.languages.clike;
-    return Prism.highlight(value, grammar, codeLanguage);
-  }, [codeLanguage, fileState.data?.content]);
-
-  const viewerLineCount = useMemo(() => {
-    const value = String(fileState.data?.content || '');
-    return Math.max(1, value.split('\n').length);
-  }, [fileState.data?.content]);
-
-  const editorLineCount = useMemo(() => {
-    return Math.max(1, String(editorValue || '').split('\n').length);
-  }, [editorValue]);
-
-  const handleSaveFile = async () => {
-    if (!fileState.data?.path || !fileState.data?.sha) return;
-
-    await dispatch(
-      saveRepositoryFile({
-        path: fileState.data.path,
-        content: editorValue,
-        sha: fileState.data.sha,
-        message: `Update ${fileState.data.path} via CodeGraph AI editor`,
-      }),
-    );
-
-    setIsEditing(false);
-  };
-
-  const syncEditorScroll = () => {
-    if (!editorGutterRef.current || !editorTextareaRef.current) return;
-    editorGutterRef.current.scrollTop = editorTextareaRef.current.scrollTop;
-  };
-
-  const syncViewerScroll = () => {
-    if (!viewerGutterRef.current || !viewerCodeRef.current) return;
-    viewerGutterRef.current.scrollTop = viewerCodeRef.current.scrollTop;
-  };
-
   return (
     <section className="mx-auto w-full max-w-375 px-4 pb-10 pt-7">
       <div className="mb-5">
@@ -202,12 +97,16 @@ export default function AnalyzePage() {
       </div>
 
       <header className="rounded-2xl border border-border/60 bg-card/70 px-5 py-6">
-        <h1 className="text-3xl font-bold tracking-tight">Analyze Repository Structure</h1>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Top-level directories from the selected GitHub repository.
-        </p>
+        <h1 className="text-3xl font-bold tracking-tight">
+          {isFirstAnalyzePage && 'Analyze Repository Structure'}
+        </h1>
+        {isFirstAnalyzePage && (
+          <p className="mt-2 text-sm text-muted-foreground">
+            Top-level directories from the selected GitHub repository.
+          </p>
+        )}
 
-        {structure.repository?.fullName && (
+        {!isFirstAnalyzePage && structure.repository?.fullName && (
           <div className="mt-4 flex flex-wrap items-center gap-3 text-xs">
             <span className="rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
               {structure.repository.fullName}
@@ -383,136 +282,6 @@ export default function AnalyzePage() {
         </div>
       )}
 
-      {routeDirectory && selectedFilePath && (
-        <div className="mt-6 rounded-2xl border border-border/60 bg-card/80">
-          <div className="flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
-            <div className="min-w-0">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">File editor</p>
-              <p className="truncate text-sm font-medium">{selectedFilePath}</p>
-            </div>
-
-            <div className="flex items-center gap-2">
-              {fileState.data?.htmlUrl && (
-                <a
-                  href={fileState.data.htmlUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
-                >
-                  View on GitHub
-                  <ExternalLink className="size-3.5" />
-                </a>
-              )}
-
-              {!isEditing ? (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => setIsEditing(true)}
-                  disabled={!fileState.canEdit || fileState.status === 'loading'}
-                >
-                  <Edit3 className="size-3.5" />
-                  Edit
-                </Button>
-              ) : (
-                <>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => {
-                      setEditorValue(fileState.data?.content || '');
-                      setIsEditing(false);
-                    }}
-                  >
-                    <X className="size-3.5" />
-                    Cancel
-                  </Button>
-                  <Button
-                    size="sm"
-                    onClick={handleSaveFile}
-                    disabled={!hasUnsavedChanges || fileState.saveStatus === 'loading'}
-                  >
-                    <Save className="size-3.5" />
-                    {fileState.saveStatus === 'loading' ? 'Saving...' : 'Save'}
-                  </Button>
-                </>
-              )}
-            </div>
-          </div>
-
-          {fileState.status === 'loading' && (
-            <div className="px-4 py-6 text-sm text-muted-foreground">Loading file content...</div>
-          )}
-
-          {fileState.status === 'failed' && fileState.error && (
-            <div className="m-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-              {fileState.error}
-            </div>
-          )}
-
-          {fileState.status === 'succeeded' && fileState.data && (
-            <div className="p-3">
-              {isEditing ? (
-                <div className="flex h-96 overflow-hidden rounded-xl border border-border/60 bg-background/90">
-                  <pre
-                    ref={editorGutterRef}
-                    aria-hidden="true"
-                    className="w-14 shrink-0 overflow-hidden border-r border-border/60 bg-muted/50 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground"
-                  >
-                    {Array.from({ length: editorLineCount }, (_, i) => i + 1).join('\n')}
-                  </pre>
-                  <textarea
-                    ref={editorTextareaRef}
-                    value={editorValue}
-                    onChange={(e) => setEditorValue(e.target.value)}
-                    onScroll={syncEditorScroll}
-                    spellCheck={false}
-                    className="h-full w-full resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 outline-none"
-                  />
-                </div>
-              ) : (
-                <div className="flex h-96 overflow-hidden rounded-xl border border-border/60 bg-background/90">
-                  <pre
-                    ref={viewerGutterRef}
-                    aria-hidden="true"
-                    className="w-14 shrink-0 overflow-hidden border-r border-border/60 bg-muted/50 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground"
-                  >
-                    {Array.from({ length: viewerLineCount }, (_, i) => i + 1).join('\n')}
-                  </pre>
-                  <pre
-                    ref={viewerCodeRef}
-                    onScroll={syncViewerScroll}
-                    className="h-full w-full overflow-auto px-3 py-3 font-mono text-xs leading-5"
-                  >
-                    <code
-                      className={`language-${codeLanguage}`}
-                      dangerouslySetInnerHTML={{ __html: highlightedContent }}
-                    />
-                  </pre>
-                </div>
-              )}
-
-              {!fileState.canEdit && (
-                <p className="mt-2 text-xs text-muted-foreground">
-                  Read-only mode: sign in with GitHub and select an owned repository to edit files.
-                </p>
-              )}
-
-              {fileState.saveStatus === 'succeeded' && (
-                <p className="mt-2 inline-flex items-center gap-1.5 text-xs text-emerald-600">
-                  <Check className="size-3.5" />
-                  Changes saved successfully.
-                </p>
-              )}
-
-              {fileState.saveStatus === 'failed' && fileState.saveError && (
-                <p className="mt-2 text-xs text-destructive">{fileState.saveError}</p>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
       {structure.truncated && (
         <div className="mt-4 rounded-lg border border-border/60 bg-card/50 px-3 py-2 text-xs text-muted-foreground">
           This repository tree is large and GitHub returned a truncated tree. Directory counts may be partial.
diff --git a/client/src/features/dashboard/pages/DashboardPage.jsx b/client/src/features/dashboard/pages/DashboardPage.jsx
index 24c89d4..fa72a01 100644
--- a/client/src/features/dashboard/pages/DashboardPage.jsx
+++ b/client/src/features/dashboard/pages/DashboardPage.jsx
@@ -47,6 +47,7 @@ import {
   selectDashboardSummary,
 } from '../index';
 import { analyzeCodebase } from '@/features/graph/slices/graphSlice';
+import { setSelectedAnalyzeRepository } from '@/features/analyze';
 
 const QUICK_ACTIONS = [
   {
@@ -326,6 +327,34 @@ export default function DashboardPage() {
     };
   };
 
+  const buildAnalyzeRepositoryFromRepo = (repo) => {
+    if (!repo) return null;
+
+    if (repo.source === 'local') {
+      return {
+        source: 'local',
+        localPath: repo.fullName,
+      };
+    }
+
+    return {
+      source: 'github',
+      mode:
+        repo.githubMode ||
+        (repo.sourceCategory === 'github-public' ? 'public' : 'owned'),
+      owner: repo.owner,
+      repo: repo.name,
+      branch: repo.branch || 'main',
+      fullName: repo.fullName || `${repo.owner}/${repo.name}`,
+    };
+  };
+
+  const handleSelectAnalyzeRepository = (repo) => {
+    const selectedRepo = buildAnalyzeRepositoryFromRepo(repo);
+    if (!selectedRepo) return;
+    dispatch(setSelectedAnalyzeRepository(selectedRepo));
+  };
+
   const toggleJobs = (repoId) => {
     setExpandedRepos((prev) => {
       const next = { ...prev, [repoId]: !prev[repoId] };
@@ -387,6 +416,8 @@ export default function DashboardPage() {
             },
           };
 
+      handleSelectAnalyzeRepository(repo);
+
     dispatch(analyzeCodebase(config));
     navigate('/graph');
     setReanalyzingRepoId(null);
@@ -611,6 +642,7 @@ export default function DashboardPage() {
                             <Link
                               to={graphLink.to}
                               state={graphLink.state}
+                              onClick={() => handleSelectAnalyzeRepository(repo)}
                               className="text-left text-base font-display font-bold text-foreground hover:text-gold transition-colors cursor-pointer tracking-tight"
                             >
                               {repo.fullName || `${repo.owner}/${repo.name}`}
@@ -710,7 +742,13 @@ export default function DashboardPage() {
 
                         {graphLink ? (
                           <Button size="sm" variant="outline" asChild>
-                            <Link to={graphLink.to} state={graphLink.state}>Open graph</Link>
+                            <Link
+                              to={graphLink.to}
+                              state={graphLink.state}
+                              onClick={() => handleSelectAnalyzeRepository(repo)}
+                            >
+                              Open graph
+                            </Link>
                           </Button>
                         ) : null}
                       </div>
@@ -755,7 +793,13 @@ export default function DashboardPage() {
 
                                     {jobGraphLink ? (
                                       <Button size="sm" variant="outline" asChild>
-                                        <Link to={jobGraphLink.to} state={jobGraphLink.state}>Open graph</Link>
+                                        <Link
+                                          to={jobGraphLink.to}
+                                          state={jobGraphLink.state}
+                                          onClick={() => handleSelectAnalyzeRepository(repo)}
+                                        >
+                                          Open graph
+                                        </Link>
                                       </Button>
                                     ) : (
                                       <Button type="button" size="sm" variant="outline" disabled>
diff --git a/docker-compose.yml b/docker-compose.yml
index 1a14cdc..781ecb9 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -37,7 +37,6 @@ services:
       - /app/node_modules
     command: sh -c "
       until pg_isready -h postgres -p 5432; do sleep 1; done;
-      if [ ! -d node_modules ]; then npm install; fi;
       npm run migrate;
       npm run dev
       "

From f4011cd148ef7fa40a805b0d5f488c9a16620a26 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 19:25:36 +0530
Subject: [PATCH 08/19] fix: CI infinite loops

---
 server/index.js                              |   3 +
 server/src/api/webhooks/github.webhook.js    | 317 ++++++++++---------
 server/src/api/webhooks/pr-comment.routes.js |  57 +++-
 server/src/infrastructure/connections.js     |  15 +-
 server/src/queue/analysisQueue.js            |  91 ++++--
 server/test/github.webhook.test.js           |  32 +-
 6 files changed, 310 insertions(+), 205 deletions(-)

diff --git a/server/index.js b/server/index.js
index e2f1997..f7585f9 100644
--- a/server/index.js
+++ b/server/index.js
@@ -2,6 +2,7 @@ import dotenv from 'dotenv';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import * as Sentry from '@sentry/node';
+import { startAnalysisWorker } from './src/queue/analysisQueue.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -20,6 +21,8 @@ const { default: app } = await import('./app.js');
 
 const PORT = process.env.PORT || 5000;
 
+startAnalysisWorker();
+
 app.listen(PORT, () => {
   console.log(`[server] Running on http://localhost:${PORT} (${process.env.NODE_ENV || 'development'})`);
 });
diff --git a/server/src/api/webhooks/github.webhook.js b/server/src/api/webhooks/github.webhook.js
index 996fc9b..bd866f5 100644
--- a/server/src/api/webhooks/github.webhook.js
+++ b/server/src/api/webhooks/github.webhook.js
@@ -2,10 +2,6 @@ import crypto from 'node:crypto';
 import express from 'express';
 import { Router } from 'express';
 import rateLimit from 'express-rate-limit';
-import { pgPool } from '../../infrastructure/connections.js';
-import { enqueueAnalysisJob } from '../../queue/analysisQueue.js';
-
-const router = Router();
 
 const webhookLimiter = rateLimit({
   windowMs: 60 * 1000,
@@ -51,172 +47,197 @@ function logWebhookEvent(level, message, context = {}) {
   }
 }
 
-router.post('/github', webhookLimiter, express.raw({ type: 'application/json' }), async (req, res, next) => {
-  const startTime = Date.now();
-  const signature = req.headers['x-github-signature-256'];
-  const event = String(req.headers['x-github-event'] || '').trim();
-  const deliveryId = req.headers['x-github-delivery'];
-  const secret = process.env.GITHUB_WEBHOOK_SECRET;
-
-  if (!secret) {
-    logWebhookEvent('warn', 'Webhook secret not configured', {
-      event,
-      deliveryId,
-    });
-    return res.status(503).json({ error: 'Webhook secret is not configured.' });
-  }
+export function createGitHubWebhookRouter({ db, enqueueJob } = {}) {
+  const router = Router();
 
-  const rawBody = Buffer.isBuffer(req.body)
-    ? req.body
-    : Buffer.from(typeof req.body === 'string' ? req.body : JSON.stringify(req.body || {}));
-
-  if (!verifySignature(rawBody, signature, secret)) {
-    logWebhookEvent('warn', 'Invalid signature', {
-      event,
-      deliveryId,
-      signatureLength: String(signature || '').length,
-    });
-    return res.status(401).send('Invalid signature');
-  }
+  let resolvedDb = db;
+  let resolvedEnqueueJob = enqueueJob;
 
-  let payload;
-  try {
-    payload = JSON.parse(rawBody.toString('utf8'));
-  } catch (parseErr) {
-    logWebhookEvent('error', 'Failed to parse JSON payload', {
-      event,
-      deliveryId,
-      error: parseErr.message,
-    });
-    return res.status(400).send('Invalid JSON payload');
-  }
+  async function resolveDependencies() {
+    if (!resolvedDb) {
+      const { pgPool } = await import('../../infrastructure/connections.js');
+      resolvedDb = pgPool;
+    }
 
-  if (event !== 'pull_request') {
-    logWebhookEvent('info', `Ignoring non-PR event`, {
-      event,
-      deliveryId,
-    });
-    return res.status(200).send('Ignored');
+    if (!resolvedEnqueueJob) {
+      const { enqueueAnalysisJob } = await import('../../queue/analysisQueue.js');
+      resolvedEnqueueJob = enqueueAnalysisJob;
+    }
   }
 
-  const action = payload?.action;
-  if (!['opened', 'synchronize'].includes(action)) {
-    logWebhookEvent('info', `Ignoring PR action: ${action}`, {
-      event,
-      deliveryId,
-      action,
-    });
-    return res.status(200).send('Ignored');
-  }
+  router.post('/github', webhookLimiter, express.raw({ type: 'application/json' }), async (req, res, next) => {
+    const startTime = Date.now();
+    const signature = req.headers['x-github-signature-256'];
+    const event = String(req.headers['x-github-event'] || '').trim();
+    const deliveryId = req.headers['x-github-delivery'];
+    const secret = process.env.GITHUB_WEBHOOK_SECRET;
+
+    if (!secret) {
+      logWebhookEvent('warn', 'Webhook secret not configured', {
+        event,
+        deliveryId,
+      });
+      return res.status(503).json({ error: 'Webhook secret is not configured.' });
+    }
+
+    const rawBody = Buffer.isBuffer(req.body)
+      ? req.body
+      : Buffer.from(typeof req.body === 'string' ? req.body : JSON.stringify(req.body || {}));
+
+    if (!verifySignature(rawBody, signature, secret)) {
+      logWebhookEvent('warn', 'Invalid signature', {
+        event,
+        deliveryId,
+        signatureLength: String(signature || '').length,
+      });
+      return res.status(401).send('Invalid signature');
+    }
+
+    let payload;
+    try {
+      payload = JSON.parse(rawBody.toString('utf8'));
+    } catch (parseErr) {
+      logWebhookEvent('error', 'Failed to parse JSON payload', {
+        event,
+        deliveryId,
+        error: parseErr.message,
+      });
+      return res.status(400).send('Invalid JSON payload');
+    }
+
+    if (event !== 'pull_request') {
+      logWebhookEvent('info', `Ignoring non-PR event`, {
+        event,
+        deliveryId,
+      });
+      return res.status(200).send('Ignored');
+    }
 
-  try {
-    const owner = payload?.repository?.owner?.login;
-    const repo = payload?.repository?.name;
-    const branch = payload?.pull_request?.head?.ref;
-    const prNumber = payload?.pull_request?.number;
-    const prTitle = payload?.pull_request?.title;
-    const headSha = payload?.pull_request?.head?.sha;
-
-    logWebhookEvent('info', `Processing PR ${action}`, {
-      event,
-      deliveryId,
-      action,
-      owner,
-      repo,
-      branch,
-      prNumber,
-      prTitle,
-    });
-
-    if (!owner || !repo || !branch) {
-      logWebhookEvent('warn', 'Invalid PR payload structure', {
+    const action = payload?.action;
+    if (!['opened', 'synchronize'].includes(action)) {
+      logWebhookEvent('info', `Ignoring PR action: ${action}`, {
         event,
         deliveryId,
         action,
-        owner: owner ? '✓' : '✗',
-        repo: repo ? '✓' : '✗',
-        branch: branch ? '✓' : '✗',
       });
-      return res.status(400).json({ error: 'Invalid pull request payload.' });
+      return res.status(200).send('Ignored');
     }
 
-    const repoResult = await pgPool.query(
-      `
-        SELECT id, owner_id
-        FROM repositories
-        WHERE github_owner = $1 AND github_repo = $2
-        LIMIT 1
-      `,
-      [owner, repo],
-    );
-
-    if (repoResult.rowCount === 0) {
-      logWebhookEvent('info', 'Repository not tracked in CodeGraph', {
+    try {
+      await resolveDependencies();
+
+      const owner = payload?.repository?.owner?.login;
+      const repo = payload?.repository?.name;
+      const branch = payload?.pull_request?.head?.ref;
+      const prNumber = payload?.pull_request?.number;
+      const prTitle = payload?.pull_request?.title;
+      const headSha = payload?.pull_request?.head?.sha;
+
+      logWebhookEvent('info', `Processing PR ${action}`, {
         event,
         deliveryId,
+        action,
         owner,
         repo,
         branch,
+        prNumber,
+        prTitle,
       });
-      return res.status(200).send('Repository not tracked');
-    }
 
-    const { id: repositoryId, owner_id: userId } = repoResult.rows[0];
-
-    const jobResult = await pgPool.query(
-      `
-        INSERT INTO analysis_jobs (repository_id, user_id, branch, status, metadata)
-        VALUES ($1, $2, $3, 'queued', $4)
-        RETURNING id
-      `,
-      [repositoryId, userId, branch, JSON.stringify({ prNumber, prTitle })],
-    );
-
-    const jobId = jobResult.rows[0].id;
-    
-    await enqueueAnalysisJob({
-      jobId,
-      input: {
-        source: 'github',
-        github: {
+      if (!owner || !repo || !branch) {
+        logWebhookEvent('warn', 'Invalid PR payload structure', {
+          event,
+          deliveryId,
+          action,
+          owner: owner ? 'yes' : 'no',
+          repo: repo ? 'yes' : 'no',
+          branch: branch ? 'yes' : 'no',
+        });
+        return res.status(400).json({ error: 'Invalid pull request payload.' });
+      }
+
+      const repoResult = await resolvedDb.query(
+        `
+          SELECT id, owner_id
+          FROM repositories
+          WHERE github_owner = $1 AND github_repo = $2
+          LIMIT 1
+        `,
+        [owner, repo],
+      );
+
+      if (repoResult.rowCount === 0) {
+        logWebhookEvent('info', 'Repository not tracked in CodeGraph', {
+          event,
+          deliveryId,
           owner,
           repo,
           branch,
-          prNumber,
-          prTitle,
-          headSha,
+        });
+        return res.status(200).send('Repository not tracked');
+      }
+
+      const { id: repositoryId, owner_id: userId } = repoResult.rows[0];
+
+      const jobResult = await resolvedDb.query(
+        `
+          INSERT INTO analysis_jobs (repository_id, user_id, branch, status, metadata)
+          VALUES ($1, $2, $3, 'queued', $4)
+          RETURNING id
+        `,
+        [repositoryId, userId, branch, JSON.stringify({ prNumber, prTitle })],
+      );
+
+      const jobId = jobResult.rows[0].id;
+
+      await resolvedEnqueueJob({
+        jobId,
+        input: {
+          source: 'github',
+          github: {
+            owner,
+            repo,
+            branch,
+            prNumber,
+            prTitle,
+            headSha,
+          },
+          repositoryId,
+          userId,
         },
-        repositoryId,
-        userId,
-      },
-    });
-
-    const processingTime = Date.now() - startTime;
-    logWebhookEvent('info', `Analysis job queued successfully`, {
-      event,
-      deliveryId,
-      action,
-      jobId,
-      owner,
-      repo,
-      branch,
-      prNumber,
-      processingTimeMs: processingTime,
-    });
-
-    return res.status(200).send('Queued');
-  } catch (error) {
-    const processingTime = Date.now() - startTime;
-    logWebhookEvent('error', `Failed to process webhook: ${error.message}`, {
-      event,
-      deliveryId,
-      action,
-      error: error.message,
-      processingTimeMs: processingTime,
-      stack: error.stack,
-    });
-    return next(error);
-  }
-});
+      });
+
+      const processingTime = Date.now() - startTime;
+      logWebhookEvent('info', `Analysis job queued successfully`, {
+        event,
+        deliveryId,
+        action,
+        jobId,
+        owner,
+        repo,
+        branch,
+        prNumber,
+        processingTimeMs: processingTime,
+      });
+
+      return res.status(200).send('Queued');
+    } catch (error) {
+      const processingTime = Date.now() - startTime;
+      logWebhookEvent('error', `Failed to process webhook: ${error.message}`, {
+        event,
+        deliveryId,
+        action,
+        error: error.message,
+        processingTimeMs: processingTime,
+        stack: error.stack,
+      });
+      return next(error);
+    }
+  });
+
+  return router;
+}
+
+const router = createGitHubWebhookRouter();
 
 export default router;
diff --git a/server/src/api/webhooks/pr-comment.routes.js b/server/src/api/webhooks/pr-comment.routes.js
index 79e25aa..0b79f93 100644
--- a/server/src/api/webhooks/pr-comment.routes.js
+++ b/server/src/api/webhooks/pr-comment.routes.js
@@ -1,6 +1,5 @@
 import { Router } from 'express';
 import rateLimit from 'express-rate-limit';
-import { pgPool } from '../../infrastructure/connections.js';
 import GitHubPRService from '../../services/GitHubPRService.js';
 import ImpactAnalysisService from '../../services/ImpactAnalysisService.js';
 
@@ -17,10 +16,20 @@ const prCommentLimiter = rateLimit({
  * When called without arguments it falls back to the production singletons.
  */
 export function createPrCommentRouter({
-  db = pgPool,
-  gitHubPRService = GitHubPRService,
+  db,
+  gitHubPRService,
 } = {}) {
   const router = Router();
+  let resolvedDb = db;
+  const resolvedGitHubPRService =
+    gitHubPRService || (typeof GitHubPRService === 'function' ? new GitHubPRService() : GitHubPRService);
+
+  async function resolveDb() {
+    if (!resolvedDb) {
+      const { pgPool } = await import('../../infrastructure/connections.js');
+      resolvedDb = pgPool;
+    }
+  }
 
   /**
    * POST /api/webhooks/github/pr-comment
@@ -38,8 +47,10 @@ export function createPrCommentRouter({
     }
 
     try {
+      await resolveDb();
+
       // Fetch job metadata and PR info
-      const jobResult = await db.query(
+      const jobResult = await resolvedDb.query(
         `
           SELECT aj.id, aj.status, aj.branch,
                  r.id as repositoryId, r.github_owner, r.github_repo,
@@ -65,7 +76,7 @@ export function createPrCommentRouter({
       }
 
       // Check if GitHub token is configured
-      if (!gitHubPRService.isConfigured()) {
+      if (!resolvedGitHubPRService.isConfigured()) {
         console.warn('GitHub token not configured, skipping PR comment');
         return res.status(200).json({ message: 'GitHub token not configured' });
       }
@@ -73,14 +84,14 @@ export function createPrCommentRouter({
       // Get PR diff
       let diff;
       try {
-        diff = await gitHubPRService.getPRDiff(owner, repo, parseInt(prNumber, 10));
+        diff = await resolvedGitHubPRService.getPRDiff(owner, repo, parseInt(prNumber, 10));
       } catch (err) {
         console.error('Failed to fetch PR diff:', err.message);
         return res.status(200).json({ message: 'Failed to fetch PR diff', error: err.message });
       }
 
       // Parse changed files from diff
-      const changedFiles = gitHubPRService.parseDiff(diff).map((f) => f.file);
+      const changedFiles = resolvedGitHubPRService.parseDiff(diff).map((f) => f.file);
 
       if (changedFiles.length === 0) {
         console.log('No changed files found in diff');
@@ -98,12 +109,16 @@ export function createPrCommentRouter({
 
       // Format impact comment
       const graphUrl = `${process.env.CLIENT_URL || 'http://localhost:5173'}/?jobId=${jobId}`;
-      const comment = gitHubPRService.formatImpactComment(changedFiles, impactedFiles, graphUrl);
+      const comment = resolvedGitHubPRService.formatImpactComment(changedFiles, impactedFiles, graphUrl);
 
       // Check if comment already exists
       let existingComment;
       try {
-        existingComment = await gitHubPRService.findExistingComment(owner, repo, parseInt(prNumber, 10));
+        existingComment = await resolvedGitHubPRService.findExistingComment(
+          owner,
+          repo,
+          parseInt(prNumber, 10),
+        );
       } catch (err) {
         console.error('Failed to find existing comment:', err.message);
       }
@@ -112,10 +127,20 @@ export function createPrCommentRouter({
       let result;
       try {
         if (existingComment) {
-          result = await gitHubPRService.updatePRComment(owner, repo, existingComment.id, comment);
+          result = await resolvedGitHubPRService.updatePRComment(
+            owner,
+            repo,
+            existingComment.id,
+            comment,
+          );
           console.log(`Updated PR comment #${existingComment.id} on ${owner}/${repo}#${prNumber}`);
         } else {
-          result = await gitHubPRService.postPRComment(owner, repo, parseInt(prNumber, 10), comment);
+          result = await resolvedGitHubPRService.postPRComment(
+            owner,
+            repo,
+            parseInt(prNumber, 10),
+            comment,
+          );
           console.log(`Posted PR comment on ${owner}/${repo}#${prNumber}`);
         }
       } catch (err) {
@@ -127,7 +152,7 @@ export function createPrCommentRouter({
       }
 
       // Log the event
-      await db.query(
+      await resolvedDb.query(
         `
           INSERT INTO audit_logs (job_id, event_type, message, metadata)
           VALUES ($1, $2, $3, $4)
@@ -170,11 +195,15 @@ export function createPrCommentRouter({
     }
 
     try {
-      if (!gitHubPRService.isConfigured()) {
+      if (!resolvedGitHubPRService.isConfigured()) {
         return res.status(503).json({ error: 'GitHub token not configured' });
       }
 
-      const existing = await gitHubPRService.findExistingComment(owner, repo, parseInt(prNumber, 10));
+      const existing = await resolvedGitHubPRService.findExistingComment(
+        owner,
+        repo,
+        parseInt(prNumber, 10),
+      );
 
       return res.json({
         hasComment: !!existing,
diff --git a/server/src/infrastructure/connections.js b/server/src/infrastructure/connections.js
index 28d1119..dd2ef29 100644
--- a/server/src/infrastructure/connections.js
+++ b/server/src/infrastructure/connections.js
@@ -19,13 +19,24 @@ pgPool.on('error', (err) => {
 
 const redisHost = process.env.REDIS_HOST || '127.0.0.1';
 const redisPort = Number(process.env.REDIS_PORT || 6379);
+const isTestRuntime = process.argv.includes('--test') || Boolean(process.env.VITEST);
+
+const redisOptions = {
+	maxRetriesPerRequest: null,
+	lazyConnect: true,
+	...(isTestRuntime
+		? {
+			retryStrategy: () => null,
+		}
+		: {}),
+};
 
 export const redisClient = process.env.REDIS_URL
-	? new Redis(process.env.REDIS_URL, { maxRetriesPerRequest: null })
+	? new Redis(process.env.REDIS_URL, redisOptions)
 	: new Redis({
 			host: redisHost,
 			port: redisPort,
-			maxRetriesPerRequest: null,
+			...redisOptions,
 		});
 
 redisClient.on('connect', () => {
diff --git a/server/src/queue/analysisQueue.js b/server/src/queue/analysisQueue.js
index fbbc7ec..cf30e4b 100644
--- a/server/src/queue/analysisQueue.js
+++ b/server/src/queue/analysisQueue.js
@@ -4,34 +4,71 @@ import { pgPool, redisClient } from '../infrastructure/connections.js';
 
 const queueConcurrency = Number(process.env.QUEUE_CONCURRENCY || 3);
 
-export const analysisQueue = new Queue('code-analysis', {
-  connection: redisClient,
-  defaultJobOptions: {
-    attempts: 1,
-    removeOnComplete: 100,
-    removeOnFail: 200,
-  },
-});
-
-export const analysisWorker = new Worker(
-  'code-analysis',
-  async (job) => {
-    const supervisor = new SupervisorAgent({
-      db: pgPool,
-      redis: redisClient,
-    });
-
-    return supervisor.runPipeline(job.data.jobId, job.data.input);
-  },
-  {
+let analysisQueue;
+let analysisWorker;
+
+function buildQueue() {
+  return new Queue('code-analysis', {
     connection: redisClient,
-    concurrency: Number.isInteger(queueConcurrency) && queueConcurrency > 0 ? queueConcurrency : 3,
-  },
-);
+    defaultJobOptions: {
+      attempts: 1,
+      removeOnComplete: 100,
+      removeOnFail: 200,
+    },
+  });
+}
+
+function buildWorker() {
+  const worker = new Worker(
+    'code-analysis',
+    async (job) => {
+      const supervisor = new SupervisorAgent({
+        db: pgPool,
+        redis: redisClient,
+      });
+
+      return supervisor.runPipeline(job.data.jobId, job.data.input);
+    },
+    {
+      connection: redisClient,
+      concurrency: Number.isInteger(queueConcurrency) && queueConcurrency > 0 ? queueConcurrency : 3,
+    },
+  );
+
+  worker.on('failed', (job, err) => {
+    console.error(`[Queue] Job ${job?.id} failed:`, err.message);
+  });
+
+  return worker;
+}
 
-analysisWorker.on('failed', (job, err) => {
-  console.error(`[Queue] Job ${job?.id} failed:`, err.message);
-});
+export function getAnalysisQueue() {
+  if (!analysisQueue) {
+    analysisQueue = buildQueue();
+  }
+
+  return analysisQueue;
+}
+
+export function startAnalysisWorker() {
+  if (!analysisWorker) {
+    analysisWorker = buildWorker();
+  }
+
+  return analysisWorker;
+}
+
+export async function closeAnalysisQueueResources() {
+  if (analysisWorker) {
+    await analysisWorker.close();
+    analysisWorker = undefined;
+  }
+
+  if (analysisQueue) {
+    await analysisQueue.close();
+    analysisQueue = undefined;
+  }
+}
 
 export async function enqueueAnalysisJob({ jobId, input }) {
   if (!jobId) {
@@ -40,7 +77,7 @@ export async function enqueueAnalysisJob({ jobId, input }) {
     throw err;
   }
 
-  return analysisQueue.add(
+  return getAnalysisQueue().add(
     'analyze',
     { jobId, input },
     {
diff --git a/server/test/github.webhook.test.js b/server/test/github.webhook.test.js
index b9e7cc7..202692b 100644
--- a/server/test/github.webhook.test.js
+++ b/server/test/github.webhook.test.js
@@ -3,8 +3,7 @@ import assert from 'node:assert/strict';
 import crypto from 'node:crypto';
 import express from 'express';
 import request from 'supertest';
-import githubWebhookRouter from '../src/api/webhooks/github.webhook.js';
-import * as Queue from 'bullmq';
+import { createGitHubWebhookRouter } from '../src/api/webhooks/github.webhook.js';
 
 // Mock dependencies
 const mockEnqueueAnalysisJob = async ({ jobId, input }) => {
@@ -57,8 +56,13 @@ describe('GitHub Webhook Integration', () => {
     app.use('/api/webhooks/github', express.raw({ type: 'application/json' }));
     app.use(express.json());
 
-    // Mock the module dependencies by patching the router's dependencies
-    app.use('/api/webhooks', githubWebhookRouter);
+    app.use(
+      '/api/webhooks',
+      createGitHubWebhookRouter({
+        db: mockPgPool,
+        enqueueJob: mockEnqueueAnalysisJob,
+      }),
+    );
   });
 
   it('accepts valid pull_request webhook with correct signature', async () => {
@@ -78,7 +82,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', signature)
+      .set('x-github-signature-256', signature)
       .set('Content-Type', 'application/json')
       .send(body);
 
@@ -103,7 +107,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', invalidSignature)
+      .set('x-github-signature-256', invalidSignature)
       .set('Content-Type', 'application/json')
       .send(body);
 
@@ -130,7 +134,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', signature)
+      .set('x-github-signature-256', signature)
       .set('Content-Type', 'application/json')
       .send(body);
 
@@ -150,7 +154,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'push')
-      .set('x-hub-signature-256', signature)
+      .set('x-github-signature-256', signature)
       .set('Content-Type', 'application/json')
       .send(body);
 
@@ -175,7 +179,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', signature)
+      .set('x-github-signature-256', signature)
       .set('Content-Type', 'application/json')
       .send(body);
 
@@ -193,7 +197,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', signature)
+      .set('x-github-signature-256', signature)
       .set('Content-Type', 'application/json')
       .send(invalidBody);
 
@@ -217,7 +221,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', signature)
+      .set('x-github-signature-256', signature)
       .set('Content-Type', 'application/json')
       .send(body);
 
@@ -242,7 +246,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', signature)
+      .set('x-github-signature-256', signature)
       .set('Content-Type', 'application/json')
       .send(body);
 
@@ -267,7 +271,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', signature)
+      .set('x-github-signature-256', signature)
       .set('Content-Type', 'application/json')
       .send(body);
 
@@ -294,7 +298,7 @@ describe('GitHub Webhook Integration', () => {
     const response = await request(app)
       .post('/api/webhooks/github')
       .set('x-github-event', 'pull_request')
-      .set('x-hub-signature-256', shortSignature)
+      .set('x-github-signature-256', shortSignature)
       .set('Content-Type', 'application/json')
       .send(body);
 

From 94608e0a673f7bccc6da6b1443096ecf8809184e Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 20:17:43 +0530
Subject: [PATCH 09/19] feat: code editor page implementation done

---
 client/src/features/ai/components/AiPanel.jsx |   8 +-
 .../analyze/pages/AnalyzeFilePage.jsx         | 163 ++++++++++++------
 .../features/analyze/pages/AnalyzePage.jsx    |  68 ++++----
 .../features/analyze/slices/analyzeSlice.js   |   2 +
 .../src/features/auth/pages/LandingPage.jsx   |  68 ++++----
 client/src/features/auth/pages/LoginPage.jsx  |  14 +-
 client/src/features/auth/pages/SignupPage.jsx |  16 +-
 .../dashboard/pages/DashboardPage.jsx         |  73 +++++++-
 .../graph/components/UploadRepoForm.jsx       | 115 ++++++------
 .../features/graph/pages/UploadRepoPage.jsx   |  16 +-
 10 files changed, 340 insertions(+), 203 deletions(-)

diff --git a/client/src/features/ai/components/AiPanel.jsx b/client/src/features/ai/components/AiPanel.jsx
index 01146aa..4f89de5 100644
--- a/client/src/features/ai/components/AiPanel.jsx
+++ b/client/src/features/ai/components/AiPanel.jsx
@@ -105,7 +105,7 @@ export default function AiPanel({ nodeId, graph, onClose }) {
   };
 
   return (
-    <div className="absolute top-2 right-2 z-10 w-80 max-h-[85vh] overflow-y-auto rounded-xl border border-border bg-card/95 backdrop-blur-sm p-4 text-xs shadow-xl transition-all">
+    <div className="w-full rounded-xl border border-border bg-card/95 backdrop-blur-sm p-4 text-xs shadow-xl transition-all">
       <div className="flex items-start justify-between gap-2 mb-3">
         <div className="flex items-center gap-1.5 min-w-0">
           <span className="font-mono font-semibold text-foreground truncate">{nodeId}</span>
@@ -240,7 +240,7 @@ export default function AiPanel({ nodeId, graph, onClose }) {
 
         {impactedFiles.length > 0 && (
           <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-2">
-            <ul className="flex flex-col gap-0.5 max-h-24 overflow-y-auto custom-scrollbar">
+            <ul className="flex flex-col gap-0.5 custom-scrollbar">
               {impactedFiles.map((file) => (
                 <li key={file} className="font-mono text-amber-200/80 truncate">{file}</li>
               ))}
@@ -252,7 +252,7 @@ export default function AiPanel({ nodeId, graph, onClose }) {
       {deps.length > 0 && (
         <div className="mb-3">
           <p className="mb-1 text-muted-foreground/60 uppercase tracking-wider text-[10px]">Imports ({deps.length})</p>
-          <ul className="flex flex-col gap-0.5 max-h-28 overflow-y-auto custom-scrollbar">
+          <ul className="flex flex-col gap-0.5 custom-scrollbar">
             {deps.map((dep) => (
               <li key={dep} className="font-mono text-gold/80 truncate">{dep}</li>
             ))}
@@ -263,7 +263,7 @@ export default function AiPanel({ nodeId, graph, onClose }) {
       {usedBy.length > 0 && (
         <div className="mb-3">
           <p className="mb-1 text-muted-foreground/60 uppercase tracking-wider text-[10px]">Used By ({usedBy.length})</p>
-          <ul className="flex flex-col gap-0.5 max-h-28 overflow-y-auto custom-scrollbar">
+          <ul className="flex flex-col gap-0.5 custom-scrollbar">
             {usedBy.map((file) => (
               <li key={file} className="font-mono text-foreground/70 truncate">{file}</li>
             ))}
diff --git a/client/src/features/analyze/pages/AnalyzeFilePage.jsx b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
index 54d5959..142d725 100644
--- a/client/src/features/analyze/pages/AnalyzeFilePage.jsx
+++ b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
@@ -31,6 +31,8 @@ import {
   selectAnalyzeSelectedRepository,
   selectAnalyzeStructure,
 } from '../slices/analyzeSlice';
+import { AiPanel } from '@/features/ai';
+import { loadSavedGraph, selectGraphData } from '@/features/graph';
 
 function detectPrismLanguage(filePath = '') {
   const normalized = String(filePath).toLowerCase();
@@ -59,6 +61,7 @@ export default function AnalyzeFilePage() {
   const selectedRepository = useSelector(selectAnalyzeSelectedRepository);
   const structure = useSelector(selectAnalyzeStructure);
   const fileState = useSelector(selectAnalyzeFile);
+  const graphData = useSelector(selectGraphData);
 
   const [editorValue, setEditorValue] = useState('');
   const [isEditing, setIsEditing] = useState(false);
@@ -92,6 +95,20 @@ export default function AnalyzeFilePage() {
     dispatch(fetchRepositoryFile({ path: selectedFilePath }));
   }, [dispatch, selectedFilePath]);
 
+  const analysisJobId = selectedRepository?.jobId || selectedRepository?.latestJobId || graphData?.jobId || null;
+
+  useEffect(() => {
+    if (!analysisJobId) return;
+    if (graphData?.jobId === analysisJobId) return;
+
+    dispatch(
+      loadSavedGraph({
+        jobId: analysisJobId,
+        rootDir: selectedRepository?.fullName || null,
+      }),
+    );
+  }, [analysisJobId, dispatch, graphData?.jobId, selectedRepository?.fullName]);
+
   useEffect(() => {
     const fileContent = fileState.data?.content;
     if (typeof fileContent !== 'string') return;
@@ -138,38 +155,52 @@ export default function AnalyzeFilePage() {
     setIsEditing(false);
   };
 
-  const syncEditorScroll = () => {
-    if (!editorGutterRef.current || !editorTextareaRef.current) return;
-    editorGutterRef.current.scrollTop = editorTextareaRef.current.scrollTop;
-  };
 
-  const syncViewerScroll = () => {
-    if (!viewerGutterRef.current || !viewerCodeRef.current) return;
-    viewerGutterRef.current.scrollTop = viewerCodeRef.current.scrollTop;
-  };
 
   const backToExplorer = `/analyze/${encodeURIComponent(routeDirectory)}?path=${encodeURIComponent(currentPath)}`;
 
+  const aiGraph = useMemo(() => {
+    const graphObject = graphData?.graph;
+
+    if (graphObject && typeof graphObject === 'object' && !Array.isArray(graphObject)) {
+      return graphObject;
+    }
+
+    const fallbackNodes = Array.isArray(graphData?.nodes) ? graphData.nodes : [];
+    return fallbackNodes.reduce((acc, node) => {
+      if (!node?.id) return acc;
+      acc[node.id] = {
+        deps: Array.isArray(node.deps) ? node.deps : [],
+        type: node.type || 'file',
+        summary: node.summary || null,
+        declarations: Array.isArray(node.declarations) ? node.declarations : [],
+      };
+      return acc;
+    }, {});
+  }, [graphData?.graph, graphData?.nodes]);
+
+  const hasNodeInsights = Boolean(selectedFilePath && aiGraph?.[selectedFilePath]);
+
   return (
-    <section className="mx-auto w-full max-w-375 px-4 pb-10 pt-7">
+    <section className="mx-auto w-full max-w-475 px-4 pb-10 pt-7 2xl:px-6">
       <div className="mb-5">
         <Link
           to={backToExplorer}
-          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground/80 hover:text-foreground active-scale transition-all"
         >
           <ArrowLeft className="size-4" />
           Back to Explorer
         </Link>
       </div>
 
-      <header className="rounded-2xl border border-border/60 bg-card/70 px-5 py-6">
+      <header className="rounded-2xl shadow-neu-inset border-none bg-background/40 px-5 py-6">
         {structure.repository?.fullName && (
-          <div className="mt-4 flex flex-wrap items-center gap-3 text-xs">
-            <span className="rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
+          <div className="mt-4 flex flex-wrap items-center gap-4 text-xs font-bold tracking-tight">
+            <span className="rounded-xl shadow-neu-inset border-none bg-background/60 px-3 py-1.5 ">
               {structure.repository.fullName}
             </span>
-            <span className="inline-flex items-center gap-1 rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
-              <GitBranch className="size-3.5" />
+            <span className="inline-flex items-center gap-1.5 rounded-xl shadow-neu-inset border-none bg-background/60 px-3 py-1.5 ">
+              <GitBranch className="size-3.5 text-primary" />
               {structure.repository.branch || structure.repository.defaultBranch || 'default'}
             </span>
             {fileState.data?.htmlUrl && (
@@ -177,7 +208,7 @@ export default function AnalyzeFilePage() {
                 href={fileState.data.htmlUrl}
                 target="_blank"
                 rel="noreferrer"
-                className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground"
+                className="inline-flex items-center gap-1.5 text-muted-foreground/80 hover:text-foreground active-scale transition-all"
               >
                 View on GitHub
                 <ExternalLink className="size-3.5" />
@@ -194,11 +225,12 @@ export default function AnalyzeFilePage() {
       )}
 
       {selectedFilePath && (
-        <div className="mt-6 rounded-2xl border border-border/60 bg-card/80">
-          <div className="flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
+        <div className="mt-6 grid gap-4 xl:grid-cols-[minmax(0,1fr)_17.5rem] 2xl:grid-cols-[minmax(0,1fr)_18.5rem]">
+          <div className="rounded-2xl shadow-neu-inset border-none bg-background/40">
+          <div className="flex items-center justify-between gap-3 border-b border-border/10 px-5 py-4">
             <div className="min-w-0">
-              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">File</p>
-              <p className="truncate text-sm font-medium">{selectedFilePath}</p>
+              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">File</p>
+              <p className="truncate text-sm font-display font-bold tracking-tight">{selectedFilePath}</p>
             </div>
 
             <div className="flex items-center gap-2">
@@ -208,6 +240,7 @@ export default function AnalyzeFilePage() {
                   variant="outline"
                   onClick={() => setIsEditing(true)}
                   disabled={!fileState.canEdit || fileState.status === 'loading'}
+                  className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
                 >
                   <Edit3 className="size-3.5" />
                   Edit
@@ -221,6 +254,7 @@ export default function AnalyzeFilePage() {
                       setEditorValue(fileState.data?.content || '');
                       setIsEditing(false);
                     }}
+                    className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
                   >
                     <X className="size-3.5" />
                     Cancel
@@ -229,6 +263,7 @@ export default function AnalyzeFilePage() {
                     size="sm"
                     onClick={handleSaveFile}
                     disabled={!hasUnsavedChanges || fileState.saveStatus === 'loading'}
+                    className="rounded-xl bg-gold text-white shadow-md active-scale"
                   >
                     <Save className="size-3.5" />
                     {fileState.saveStatus === 'loading' ? 'Saving...' : 'Save'}
@@ -249,44 +284,47 @@ export default function AnalyzeFilePage() {
           )}
 
           {fileState.status === 'succeeded' && fileState.data && (
-            <div className="p-3">
+            <div className="p-4">
               {isEditing ? (
-                <div className="flex h-96 overflow-hidden rounded-xl border border-border/60 bg-background/90">
-                  <pre
-                    ref={editorGutterRef}
-                    aria-hidden="true"
-                    className="w-14 shrink-0 overflow-hidden border-r border-border/60 bg-muted/50 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground"
-                  >
-                    {Array.from({ length: editorLineCount }, (_, i) => i + 1).join('\n')}
-                  </pre>
-                  <textarea
-                    ref={editorTextareaRef}
-                    value={editorValue}
-                    onChange={(e) => setEditorValue(e.target.value)}
-                    onScroll={syncEditorScroll}
-                    spellCheck={false}
-                    className="h-full w-full resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 outline-none"
-                  />
+                <div className="flex rounded-2xl shadow-neu-inset border-none bg-background/60 overflow-x-auto custom-scrollbar">
+                  <div className="flex min-w-full">
+                    <pre
+                      ref={editorGutterRef}
+                      aria-hidden="true"
+                      className="sticky left-0 z-10 w-14 shrink-0 border-r border-border/10 bg-background/20 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground/60"
+                    >
+                      {Array.from({ length: editorLineCount }, (_, i) => i + 1).join('\n')}
+                    </pre>
+                    <textarea
+                      ref={editorTextareaRef}
+                      value={editorValue}
+                      onChange={(e) => setEditorValue(e.target.value)}
+                      spellCheck={false}
+                      rows={editorLineCount}
+                      className="min-w-max flex-1 resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 outline-none whitespace-pre overflow-hidden text-foreground/90"
+                    />
+                  </div>
                 </div>
               ) : (
-                <div className="flex h-96 overflow-hidden rounded-xl border border-border/60 bg-background/90">
-                  <pre
-                    ref={viewerGutterRef}
-                    aria-hidden="true"
-                    className="w-14 shrink-0 overflow-hidden border-r border-border/60 bg-muted/50 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground"
-                  >
-                    {Array.from({ length: viewerLineCount }, (_, i) => i + 1).join('\n')}
-                  </pre>
-                  <pre
-                    ref={viewerCodeRef}
-                    onScroll={syncViewerScroll}
-                    className="h-full w-full overflow-auto px-3 py-3 font-mono text-xs leading-5"
-                  >
-                    <code
-                      className={`language-${codeLanguage}`}
-                      dangerouslySetInnerHTML={{ __html: highlightedContent }}
-                    />
-                  </pre>
+                <div className="flex rounded-2xl shadow-neu-inset border-none bg-background/60 overflow-x-auto custom-scrollbar">
+                  <div className="flex min-w-full">
+                    <pre
+                      ref={viewerGutterRef}
+                      aria-hidden="true"
+                      className="sticky left-0 z-10 w-14 shrink-0 border-r border-border/10 bg-background/20 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground/60"
+                    >
+                      {Array.from({ length: viewerLineCount }, (_, i) => i + 1).join('\n')}
+                    </pre>
+                    <pre
+                      ref={viewerCodeRef}
+                      className="min-w-max flex-1 px-4 py-3 font-mono text-xs leading-5 overflow-visible whitespace-pre"
+                    >
+                      <code
+                        className={`language-${codeLanguage}`}
+                        dangerouslySetInnerHTML={{ __html: highlightedContent }}
+                      />
+                    </pre>
+                  </div>
                 </div>
               )}
 
@@ -308,6 +346,21 @@ export default function AnalyzeFilePage() {
               )}
             </div>
           )}
+          </div>
+
+          <div className="relative min-h-104 xl:justify-self-end xl:w-full">
+            {hasNodeInsights ? (
+              <AiPanel
+                nodeId={selectedFilePath}
+                graph={aiGraph}
+                onClose={() => navigate(backToExplorer)}
+              />
+            ) : (
+              <div className="rounded-xl border border-border/50 bg-background/40 p-3 text-xs text-muted-foreground">
+                Insight panel is available after graph data is loaded for this repository/job.
+              </div>
+            )}
+          </div>
         </div>
       )}
     </section>
diff --git a/client/src/features/analyze/pages/AnalyzePage.jsx b/client/src/features/analyze/pages/AnalyzePage.jsx
index 798ef17..6e8d35f 100644
--- a/client/src/features/analyze/pages/AnalyzePage.jsx
+++ b/client/src/features/analyze/pages/AnalyzePage.jsx
@@ -96,23 +96,23 @@ export default function AnalyzePage() {
         </Link>
       </div>
 
-      <header className="rounded-2xl border border-border/60 bg-card/70 px-5 py-6">
-        <h1 className="text-3xl font-bold tracking-tight">
+      <header className="rounded-2xl shadow-neu-inset border-none bg-background/40 px-5 py-6">
+        <h1 className="text-3xl font-display font-bold tracking-tight text-foreground">
           {isFirstAnalyzePage && 'Analyze Repository Structure'}
         </h1>
         {isFirstAnalyzePage && (
-          <p className="mt-2 text-sm text-muted-foreground">
+          <p className="mt-2 text-sm text-muted-foreground/80 font-medium">
             Top-level directories from the selected GitHub repository.
           </p>
         )}
 
         {!isFirstAnalyzePage && structure.repository?.fullName && (
           <div className="mt-4 flex flex-wrap items-center gap-3 text-xs">
-            <span className="rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
+            <span className="rounded-xl shadow-neu-inset border-none bg-background/60 px-3 py-1.5 font-bold tracking-tight">
               {structure.repository.fullName}
             </span>
-            <span className="inline-flex items-center gap-1 rounded-md border border-border/60 bg-background/60 px-2.5 py-1 font-semibold">
-              <GitBranch className="size-3.5" />
+            <span className="inline-flex items-center gap-1.5 rounded-xl shadow-neu-inset border-none bg-background/60 px-3 py-1.5 font-bold tracking-tight">
+              <GitBranch className="size-3.5 text-primary" />
               {structure.repository.branch || structure.repository.defaultBranch || 'default'}
             </span>
             {structure.repository.htmlUrl && (
@@ -120,7 +120,7 @@ export default function AnalyzePage() {
                 href={structure.repository.htmlUrl}
                 target="_blank"
                 rel="noreferrer"
-                className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground"
+                className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground active-scale transition-all"
               >
                 View on GitHub
                 <ExternalLink className="size-3.5" />
@@ -151,23 +151,23 @@ export default function AnalyzePage() {
       {!routeDirectory && structure.status === 'succeeded' && (
         <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
           {structure.directories.map((directory) => (
-            <button
-              key={directory.path}
-              type="button"
-              onClick={() => handleCardOpen(directory.path)}
-              className="group rounded-2xl border border-border/60 bg-card/70 p-4 text-left transition-all hover:border-primary/40 hover:bg-card"
-            >
-              <div className="flex items-start justify-between gap-3">
-                <div>
-                  <p className="flex items-center gap-2 text-lg font-bold tracking-tight">
-                    <FolderTree className="size-4 text-primary" />
-                    {directory.name}
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">{formatCount(directory.fileCount)} | click to explore</p>
+              <button
+                key={directory.path}
+                type="button"
+                onClick={() => handleCardOpen(directory.path)}
+                className="group rounded-2xl shadow-neu-inset border-none bg-background/40 p-5 text-left transition-all hover:bg-background/60 active-scale duration-300"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <p className="flex items-center gap-2 text-lg font-display font-bold tracking-tight text-foreground">
+                      <FolderTree className="size-4 text-primary group-hover:scale-110 transition-transform" />
+                      {directory.name}
+                    </p>
+                    <p className="mt-1 text-[10px] uppercase font-bold tracking-widest text-muted-foreground/60">{formatCount(directory.fileCount)} | EXPLORE</p>
+                  </div>
                 </div>
-              </div>
 
-              <div className="mt-3 min-h-16 rounded-xl border border-border/40 bg-background/50 p-3">
+                <div className="mt-4 min-h-16 rounded-xl shadow-neu-inset border-none bg-background/30 p-3">
                 {directory.subdirectories.length === 0 ? (
                   <p className="text-xs text-muted-foreground">No nested directories</p>
                 ) : (
@@ -175,14 +175,14 @@ export default function AnalyzePage() {
                     {directory.subdirectories.slice(0, 8).map((subDir) => (
                       <span
                         key={`${directory.path}-${subDir}`}
-                        className="rounded-md border border-border/60 bg-card px-2 py-1 text-[11px] font-medium"
+                        className="rounded-lg shadow-neu-inset border-none bg-background/50 px-2 py-1 text-[10px] font-bold tracking-tight text-muted-foreground/80"
                       >
                         {subDir}
                       </span>
                     ))}
                     {directory.subdirectories.length > 8 && (
-                      <span className="rounded-md border border-border/60 bg-card px-2 py-1 text-[11px] font-medium text-muted-foreground">
-                        +{directory.subdirectories.length - 8} more
+                      <span className="rounded-lg shadow-neu-inset border-none bg-background/50 px-2 py-1 text-[10px] font-bold tracking-tight text-muted-foreground/50">
+                        +{directory.subdirectories.length - 8}
                       </span>
                     )}
                   </div>
@@ -194,13 +194,13 @@ export default function AnalyzePage() {
       )}
 
       {routeDirectory && (
-        <div className="mt-6 rounded-2xl border border-border/60 bg-card/80">
-          <div className="border-b border-border/60 px-4 py-3">
-            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Repository explorer</p>
-            <div className="mt-1 flex flex-wrap items-center gap-1 text-sm">
+        <div className="mt-6 rounded-2xl shadow-neu-inset border-none bg-background/40">
+          <div className="border-b border-border/10 px-5 py-4">
+            <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">Repository explorer</p>
+            <div className="mt-2 flex flex-wrap items-center gap-1 text-sm">
               <button
                 type="button"
-                className="rounded px-1.5 py-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+                className="rounded-lg px-2 py-1 text-muted-foreground/80 hover:bg-muted/40 hover:text-foreground active-scale transition-all"
                 onClick={() => navigate('/analyze')}
               >
                 root
@@ -209,10 +209,10 @@ export default function AnalyzePage() {
                 const nextPath = pathSegments.slice(0, index + 1).join('/');
                 return (
                   <React.Fragment key={nextPath}>
-                    <span className="text-muted-foreground">/</span>
+                    <span className="text-muted-foreground/40">/</span>
                     <button
                       type="button"
-                      className="rounded px-1.5 py-0.5 hover:bg-muted"
+                      className="rounded-lg px-2 py-1 hover:bg-muted/40 active-scale transition-all"
                       onClick={() => setSearchParams({ path: nextPath })}
                     >
                       {segment}
@@ -235,14 +235,14 @@ export default function AnalyzePage() {
             )}
 
             {contents.status === 'succeeded' && (
-              <div className="overflow-hidden rounded-xl border border-border/60 bg-background/70">
+              <div className="overflow-hidden rounded-xl shadow-neu-inset border-none bg-background/30">
                 {contents.entries.map((entry) => {
                   const isDirectory = entry.type === 'dir';
 
                   return (
                     <div
                       key={entry.path}
-                      className="flex items-center justify-between gap-3 border-b border-border/40 px-3 py-2 text-sm last:border-b-0"
+                      className="flex items-center justify-between gap-3 border-b border-border/10 px-4 py-2.5 text-sm last:border-b-0 hover:bg-background/20 transition-colors"
                     >
                       <div className="min-w-0 flex-1">
                         {isDirectory ? (
diff --git a/client/src/features/analyze/slices/analyzeSlice.js b/client/src/features/analyze/slices/analyzeSlice.js
index d9c0cb5..405203e 100644
--- a/client/src/features/analyze/slices/analyzeSlice.js
+++ b/client/src/features/analyze/slices/analyzeSlice.js
@@ -24,6 +24,8 @@ function normalizeRepository(input) {
     branch: github.branch || null,
     url: github.url || null,
     fullName: github.fullName || `${github.owner}/${github.repo}`,
+    jobId: github.jobId || null,
+    latestJobId: github.latestJobId || null,
   };
 }
 
diff --git a/client/src/features/auth/pages/LandingPage.jsx b/client/src/features/auth/pages/LandingPage.jsx
index 22f73cd..b6f2854 100644
--- a/client/src/features/auth/pages/LandingPage.jsx
+++ b/client/src/features/auth/pages/LandingPage.jsx
@@ -25,74 +25,80 @@ const FEATURES = [
 export default function LandingPage() {
   return (
     <div className="min-h-screen bg-background text-foreground flex flex-col">
-      <header className="sticky top-0 z-10 border-b border-border bg-background/80 backdrop-blur-sm">
-        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
-          <div className="flex items-center gap-2">
-            <Code2 className="size-5 text-primary" />
-            <span className="font-bold text-sm tracking-tight">
-              CodeGraph<span className="text-primary">AI</span>
+      <header className="sticky top-0 z-50 border-b border-border/10 bg-background/60 backdrop-blur-xl transition-colors duration-500">
+        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+          <div className="flex items-center gap-3 group cursor-pointer active-scale transition-all">
+            <div className="flex size-9 items-center justify-center rounded-xl bg-gold/10 shadow-neu-inset border border-gold/20 group-hover:scale-110 transition-transform duration-300">
+              <Code2 className="size-5 text-gold" />
+            </div>
+            <span className="font-display font-bold text-lg tracking-tight text-foreground">
+              CodeGraph<span className="text-gold">AI</span>
             </span>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-4">
             <Link to="/login">
-              <Button variant="ghost" size="sm">Log in</Button>
+              <Button variant="ghost" size="sm" className="font-bold tracking-tight text-muted-foreground hover:text-foreground active-scale transition-all">Log in</Button>
             </Link>
             <Link to="/signup">
-              <Button size="sm">Get started</Button>
+              <Button size="sm" className="bg-gold text-white hover:bg-gold/90 shadow-md font-bold tracking-tight active-scale transition-all">Get started</Button>
             </Link>
           </div>
         </div>
       </header>
 
-      <main className="flex-1 mx-auto flex w-full max-w-5xl flex-col items-center justify-center px-4 py-24 text-center">
-        <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1 text-xs text-muted-foreground">
-          <span className="size-1.5 rounded-full bg-green-500 animate-pulse" />
-          Phase 1 — Parsing &amp; Graph Visualization
+      <main className="flex-1 mx-auto flex w-full max-w-6xl flex-col items-center justify-center px-6 py-24 text-center">
+        <div className="mb-6 inline-flex items-center gap-2 rounded-full shadow-neu-inset border-none bg-background/60 px-4 py-1.5 text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/70 animate-in fade-in slide-in-from-top-4 duration-700">
+          <span className="size-1.5 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_rgba(16,185,129,0.6)]" />
+          Phase 1 — Parsing &amp; Visualization active
         </div>
 
-        <h1 className="text-5xl font-bold tracking-tight sm:text-6xl">
-          Understand any{' '}
-          <span className="text-primary">codebase</span>
-          <br />
-          in seconds
+        <h1 className="text-5xl font-display font-black tracking-tight sm:text-7xl leading-[1.05] animate-in fade-in slide-in-from-bottom-8 duration-1000 fill-mode-both">
+          Understand any <br />
+          <span className="text-gradient-gold">codebase</span> in seconds
         </h1>
 
-        <p className="mt-6 max-w-2xl text-lg text-muted-foreground leading-relaxed">
+        <p className="mt-8 max-w-2xl text-lg text-muted-foreground leading-relaxed font-medium transition-all duration-700 animate-in fade-in slide-in-from-bottom-4 delay-300 fill-mode-both">
           Point CodeGraph AI at any local repository. It parses every import,
           builds a live dependency graph, and gives you a visual map you can
           actually navigate.
         </p>
 
-        <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row">
+        <div className="mt-12 flex flex-col items-center gap-4 sm:flex-row animate-in fade-in slide-in-from-bottom-4 delay-500 fill-mode-both">
           <Link to="/signup">
-            <Button size="lg" className="gap-2">
+            <Button size="lg" className="h-14 px-8 gap-3 bg-gold text-white hover:bg-gold/90 shadow-xl rounded-2xl font-black uppercase tracking-widest text-xs active-scale transition-all">
               Start for free <ArrowRight className="size-4" />
             </Button>
           </Link>
           <Link to="/login">
-            <Button size="lg" variant="outline">
+            <Button size="lg" variant="outline" className="h-14 px-8 rounded-2xl shadow-neu-inset border-none bg-background/50 text-foreground font-black uppercase tracking-widest text-xs active-scale transition-all">
               Sign in
             </Button>
           </Link>
         </div>
 
-        <div className="mt-20 grid w-full gap-4 sm:grid-cols-3">
-          {FEATURES.map((f) => (
-            <Card key={f.title} className="text-left">
-              <CardContent className="pt-6">
-                <div className="mb-3 flex size-9 items-center justify-center rounded-lg border border-border bg-muted">
+        <div className="mt-24 grid w-full gap-6 sm:grid-cols-3">
+          {FEATURES.map((f, idx) => (
+            <Card 
+              key={f.title} 
+              className="text-left rounded-3xl shadow-neu-inset border-none bg-background/40 hover:bg-background/60 transition-all duration-500 active-scale group animate-in fade-in slide-in-from-bottom-4 fill-mode-both"
+              style={{ animationDelay: `${700 + idx * 100}ms` }}
+            >
+              <CardContent className="pt-8 pb-10">
+                <div className="mb-6 flex size-12 items-center justify-center rounded-2xl bg-gold/10 shadow-neu-inset border border-gold/20 group-hover:scale-110 transition-transform duration-500">
                   {f.icon}
                 </div>
-                <h3 className="font-semibold text-foreground">{f.title}</h3>
-                <p className="mt-1 text-sm text-muted-foreground">{f.description}</p>
+                <h3 className="text-xl font-display font-bold text-foreground tracking-tight">{f.title}</h3>
+                <p className="mt-2 text-sm text-muted-foreground/80 leading-relaxed font-medium">{f.description}</p>
               </CardContent>
             </Card>
           ))}
         </div>
       </main>
 
-      <footer className="border-t border-border py-6 text-center text-xs text-muted-foreground">
-        © {new Date().getFullYear()} CodeGraph AI · Phase 1 Build
+      <footer className="border-t border-border/10 py-10 text-center">
+        <p className="text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground/40">
+          © {new Date().getFullYear()} CodeGraph AI · Advanced Parsing Engine
+        </p>
       </footer>
     </div>
   );
diff --git a/client/src/features/auth/pages/LoginPage.jsx b/client/src/features/auth/pages/LoginPage.jsx
index 894b7ea..911815e 100644
--- a/client/src/features/auth/pages/LoginPage.jsx
+++ b/client/src/features/auth/pages/LoginPage.jsx
@@ -32,7 +32,7 @@ export default function LoginPage() {
 
   return (
     <div className="flex min-h-screen bg-background font-sans selection:bg-gold/30 selection:text-gold items-center justify-center p-4 sm:p-8">
-      <div className="flex w-full max-w-5xl h-[700px] overflow-hidden rounded-[2.5rem] shadow-2xl border border-border/10 bg-card group/container">
+      <div className="flex w-full max-w-5xl h-[700px] overflow-hidden rounded-[2.5rem] shadow-neu-inset border-none bg-background/40 group/container">
         {/* Left Side: Form */}
         <div className="flex flex-col justify-center w-full lg:w-1/2 p-8 sm:p-12 relative animate-in fade-in slide-in-from-left-8 duration-1000">
           <div className="mb-10 flex items-center gap-2 group cursor-pointer">
@@ -70,9 +70,9 @@ export default function LoginPage() {
                   {demoLoading ? 'Authenticating...' : 'Sign in as Demo User'}
                 </Button>
                 
-                <div className="rounded-2xl bg-gold/5 border border-gold/10 p-4 text-[10px] text-center">
+                <div className="rounded-2xl bg-background/60 shadow-neu-inset border-none p-4 text-[10px] text-center">
                   <span className="uppercase font-black tracking-widest text-muted-foreground/60 block mb-1">Development Mode</span>
-                  <span className="text-foreground/70 font-mono">
+                  <span className="text-foreground/70 font-mono tracking-tight font-bold">
                     {demoCredentials.username} <span className="mx-2 opacity-30">|</span> {demoCredentials.password}
                   </span>
                 </div>
@@ -94,14 +94,14 @@ export default function LoginPage() {
         </div>
 
         {/* Right Side: Visual Accent */}
-        <div className="hidden lg:flex flex-col justify-end w-1/2 bg-[#0B0B0B] p-16 relative overflow-hidden animate-in fade-in slide-in-from-right-8 duration-1000">
+        <div className="hidden lg:flex flex-col justify-end w-1/2 bg-black/40 backdrop-blur-md p-16 relative overflow-hidden animate-in fade-in slide-in-from-right-8 duration-1000">
           {/* Abstract Gold Art */}
           <div className="absolute inset-0 opacity-40">
-            <div className="absolute top-[-10%] right-[-10%] size-[500px] rounded-full bg-gold/20 blur-[120px] animate-pulse" />
-            <div className="absolute bottom-[-20%] left-[-10%] size-[400px] rounded-full bg-gold/10 blur-[100px]" />
+            <div className="absolute top-[-10%] right-[-10%] size-[500px] rounded-full bg-gold/5 blur-[120px] animate-pulse" />
+            <div className="absolute bottom-[-20%] left-[-10%] size-[400px] rounded-full bg-gold/5 blur-[100px]" />
           </div>
           
-          <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10" />
+          <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-5" />
 
           <div className="relative z-10 space-y-6">
             <div className="size-16 rounded-3xl bg-gold/10 border border-gold/30 flex items-center justify-center shadow-lg backdrop-blur-sm">
diff --git a/client/src/features/auth/pages/SignupPage.jsx b/client/src/features/auth/pages/SignupPage.jsx
index 399c056..a9a1e7e 100644
--- a/client/src/features/auth/pages/SignupPage.jsx
+++ b/client/src/features/auth/pages/SignupPage.jsx
@@ -14,17 +14,17 @@ import { useAuth } from '../context/AuthContext';
 
 const FEATURE_LIST = [
   {
-    icon: <div className="flex size-8 items-center justify-center rounded-lg bg-gold/10 border border-gold/20 shadow-sm"><GitBranch className="size-4 text-gold" /></div>,
+    icon: <div className="flex size-10 items-center justify-center rounded-xl bg-gold/10 shadow-neu-inset border-none group-hover:scale-110 transition-transform duration-300"><GitBranch className="size-5 text-gold" /></div>,
     title: 'Code Analysis',
     description: 'Deep insights into your codebase structure',
   },
   {
-    icon: <div className="flex size-8 items-center justify-center rounded-lg bg-gold/10 border border-gold/20 shadow-sm"><Network className="size-4 text-gold" /></div>,
+    icon: <div className="flex size-10 items-center justify-center rounded-xl bg-gold/10 shadow-neu-inset border-none group-hover:scale-110 transition-transform duration-300"><Network className="size-5 text-gold" /></div>,
     title: 'Dependency Graphs',
     description: 'Visualize every import relationship interactively',
   },
   {
-    icon: <div className="flex size-8 items-center justify-center rounded-lg bg-gold/10 border border-gold/20 shadow-sm"><Zap className="size-4 text-gold" /></div>,
+    icon: <div className="flex size-10 items-center justify-center rounded-xl bg-gold/10 shadow-neu-inset border-none group-hover:scale-110 transition-transform duration-300"><Zap className="size-5 text-gold" /></div>,
     title: 'AI-Ready',
     description: 'Smart impact analysis coming in Phase 2',
   },
@@ -49,7 +49,7 @@ export default function SignupPage() {
 
   return (
     <div className="flex min-h-screen bg-background font-sans selection:bg-gold/30 selection:text-gold items-center justify-center p-4 sm:p-8">
-      <div className="flex w-full max-w-5xl h-[700px] overflow-hidden rounded-[2.5rem] shadow-2xl border border-border/10 bg-card group/container">
+      <div className="flex w-full max-w-5xl h-[700px] overflow-hidden rounded-[2.5rem] shadow-neu-inset border-none bg-background/40 group/container">
         {/* Left Side: Form */}
         <div className="flex flex-col justify-center w-full lg:w-1/2 p-8 sm:p-12 relative animate-in fade-in slide-in-from-left-8 duration-1000">
           <div className="mb-10 flex items-center gap-2 group cursor-pointer">
@@ -114,14 +114,14 @@ export default function SignupPage() {
         </div>
 
         {/* Right Side: Visual Accent */}
-        <div className="hidden lg:flex flex-col justify-end w-1/2 bg-[#0B0B0B] p-16 relative overflow-hidden animate-in fade-in slide-in-from-right-8 duration-1000">
+        <div className="hidden lg:flex flex-col justify-end w-1/2 bg-black/40 backdrop-blur-md p-16 relative overflow-hidden animate-in fade-in slide-in-from-right-8 duration-1000">
           {/* Abstract Gold Art */}
           <div className="absolute inset-0 opacity-40">
-            <div className="absolute top-[-10%] right-[-10%] size-[500px] rounded-full bg-gold/20 blur-[120px] animate-pulse" />
-            <div className="absolute bottom-[-20%] left-[-10%] size-[500px] rounded-full bg-gold/10 blur-[130px]" />
+            <div className="absolute top-[-10%] right-[-10%] size-[500px] rounded-full bg-gold/5 blur-[120px] animate-pulse" />
+            <div className="absolute bottom-[-20%] left-[-10%] size-[500px] rounded-full bg-gold/5 blur-[130px]" />
           </div>
           
-          <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10" />
+          <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-5" />
 
           <div className="relative z-10 space-y-10">
             <div>
diff --git a/client/src/features/dashboard/pages/DashboardPage.jsx b/client/src/features/dashboard/pages/DashboardPage.jsx
index fa72a01..aa89844 100644
--- a/client/src/features/dashboard/pages/DashboardPage.jsx
+++ b/client/src/features/dashboard/pages/DashboardPage.jsx
@@ -346,6 +346,8 @@ export default function DashboardPage() {
       repo: repo.name,
       branch: repo.branch || 'main',
       fullName: repo.fullName || `${repo.owner}/${repo.name}`,
+      jobId: repo.jobId || null,
+      latestJobId: repo.latestJobId || null,
     };
   };
 
@@ -355,6 +357,40 @@ export default function DashboardPage() {
     dispatch(setSelectedAnalyzeRepository(selectedRepo));
   };
 
+  const buildAnalyzeRepositoryFromJob = (repo, job) => {
+    const selectedRepo = buildAnalyzeRepositoryFromRepo(repo);
+    if (!selectedRepo) return null;
+
+    if (selectedRepo.source !== 'github') {
+      return selectedRepo;
+    }
+
+    return {
+      ...selectedRepo,
+      branch: job?.branch || selectedRepo.branch,
+      jobId: job?.id || selectedRepo.jobId || null,
+      latestJobId: job?.id || selectedRepo.latestJobId || null,
+    };
+  };
+
+  const handleOpenAnalyzePage = (repo, e) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    handleSelectAnalyzeRepository(repo);
+    navigate('/analyze');
+  };
+
+  const handleOpenAnalyzePageForJob = (repo, job, e) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+
+    const selectedRepo = buildAnalyzeRepositoryFromJob(repo, job);
+    if (!selectedRepo) return;
+
+    dispatch(setSelectedAnalyzeRepository(selectedRepo));
+    navigate('/analyze');
+  };
+
   const toggleJobs = (repoId) => {
     setExpandedRepos((prev) => {
       const next = { ...prev, [repoId]: !prev[repoId] };
@@ -740,6 +776,17 @@ export default function DashboardPage() {
                           {expandedRepos[repo.id] ? <ChevronUp className="size-3.5" /> : <ChevronDown className="size-3.5" />}
                         </Button>
 
+                        {graphLink ? (
+                          <Button
+                            type="button"
+                            size="sm"
+                            variant="outline"
+                            onClick={(e) => handleOpenAnalyzePage(repo, e)}
+                          >
+                            Analyze Codebase
+                          </Button>
+                        ) : null}
+
                         {graphLink ? (
                           <Button size="sm" variant="outline" asChild>
                             <Link
@@ -792,15 +839,25 @@ export default function DashboardPage() {
                                     </div>
 
                                     {jobGraphLink ? (
-                                      <Button size="sm" variant="outline" asChild>
-                                        <Link
-                                          to={jobGraphLink.to}
-                                          state={jobGraphLink.state}
-                                          onClick={() => handleSelectAnalyzeRepository(repo)}
+                                      <div className="flex items-center gap-2">
+                                        <Button
+                                          type="button"
+                                          size="sm"
+                                          variant="outline"
+                                          onClick={(e) => handleOpenAnalyzePageForJob(repo, job, e)}
                                         >
-                                          Open graph
-                                        </Link>
-                                      </Button>
+                                          Analyze Codebase
+                                        </Button>
+                                        <Button size="sm" variant="outline" asChild>
+                                          <Link
+                                            to={jobGraphLink.to}
+                                            state={jobGraphLink.state}
+                                            onClick={() => handleSelectAnalyzeRepository(repo)}
+                                          >
+                                            Open graph
+                                          </Link>
+                                        </Button>
+                                      </div>
                                     ) : (
                                       <Button type="button" size="sm" variant="outline" disabled>
                                         Not restorable
diff --git a/client/src/features/graph/components/UploadRepoForm.jsx b/client/src/features/graph/components/UploadRepoForm.jsx
index c8f896a..8c5a9a1 100644
--- a/client/src/features/graph/components/UploadRepoForm.jsx
+++ b/client/src/features/graph/components/UploadRepoForm.jsx
@@ -6,6 +6,8 @@ import {
   CheckCircle2,
   FolderOpen,
   Github,
+  ArrowRight,
+  Search,
   Loader2,
   Sparkles,
 } from 'lucide-react';
@@ -611,6 +613,7 @@ export default function UploadRepoForm() {
                 type="button"
                 variant="outline"
                 onClick={browseLocalPath}
+                className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
                 disabled={
                   isLoading ||
                   localBrowseLoading ||
@@ -637,6 +640,7 @@ export default function UploadRepoForm() {
                 type="button"
                 variant="outline"
                 onClick={validateLocalRepository}
+                className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
                 disabled={isLoading || localValidationState === 'loading' || !localPath.trim()}
               >
                 {localValidationState === 'loading' ? (
@@ -705,7 +709,7 @@ export default function UploadRepoForm() {
                           setPublicBranch('');
                         }}
                         placeholder="https://github.com/owner/repository"
-                        className="pl-9"
+                        className="pl-9 rounded-xl shadow-neu-inset border-none bg-background/50"
                         disabled={isLoading}
                         autoComplete="off"
                         spellCheck={false}
@@ -715,6 +719,7 @@ export default function UploadRepoForm() {
                     <Button
                       type="button"
                       variant="outline"
+                      className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
                       disabled={isLoading || publicLoading || !publicRepoUrl.trim()}
                       onClick={resolvePublicRepository}
                     >
@@ -749,8 +754,8 @@ export default function UploadRepoForm() {
                   </p>
                 )}
 
-                <div className="flex flex-col gap-1.5">
-                  <Label htmlFor="public-branch">Branch</Label>
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="public-branch" className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground/70">Branch</Label>
                   <select
                     id="public-branch"
                     value={publicBranch}
@@ -798,6 +803,7 @@ export default function UploadRepoForm() {
                         type="button"
                         variant="outline"
                         onClick={handleRefreshOwnedRepos}
+                        className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
                         disabled={isLoading || ownedReposLoading}
                       >
                         {ownedReposLoading ? (
@@ -811,49 +817,54 @@ export default function UploadRepoForm() {
                       </Button>
                     </div>
 
-                    <Input
-                      id="owned-repo-search"
-                      type="text"
-                      value={repoQuery}
-                      onChange={(e) => setRepoQuery(e.target.value)}
-                      placeholder="Search repositories..."
-                      disabled={isLoading || ownedReposLoading}
-                    />
-
-                    {ownedReposLoading && (
-                      <div className="text-sm text-muted-foreground flex items-center gap-2 py-4 justify-center rounded-md border border-border bg-muted/20">
-                        <Loader2 className="size-4 animate-spin" />
-                        Fetching repositories...
-                      </div>
-                    )}
+                    <div className="relative">
+                      <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground pointer-events-none" />
+                      <Input
+                        id="owned-repo-search"
+                        type="text"
+                        value={repoQuery}
+                        onChange={(e) => setRepoQuery(e.target.value)}
+                        placeholder="Search your repositories..."
+                        className="pl-9 rounded-xl shadow-neu-inset border-none bg-background/50"
+                        disabled={isLoading || ownedReposLoading}
+                        autoComplete="off"
+                      />
+                    </div>
 
-                    {!ownedReposLoading && filteredOwnedRepos.length > 0 && (
-                      <div className="grid gap-2 max-h-60 overflow-auto pr-1 rounded-xl shadow-neu-inset border-none bg-background/20 p-3">
-                        {filteredOwnedRepos.map((repo) => (
-                          <button
-                            key={repo.id}
-                            type="button"
-                            className={`text-left rounded-lg border-none px-4 py-3 transition-all duration-300 active:scale-[0.98] ${
-                              selectedOwnedRepo?.id === repo.id
-                                ? 'bg-background shadow-neu-flat text-foreground ring-1 ring-gold/40'
-                                : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/40'
-                            }`}
-                            onClick={() => handleOwnedRepoSelect(repo)}
-                          >
-                            <div className="font-bold text-sm tracking-tight">{repo.fullName}</div>
-                            <div className="text-[10px] uppercase font-bold tracking-widest opacity-40 mt-1">
-                              Default branch: {repo.defaultBranch}
-                            </div>
-                          </button>
-                        ))}
-                      </div>
-                    )}
+                    <div className="max-h-60 overflow-y-auto rounded-2xl shadow-neu-inset border-none bg-background/30 p-2 custom-scrollbar">
+                      {ownedReposLoading && (
+                        <div className="flex items-center justify-center py-10">
+                          <Loader2 className="size-6 animate-spin text-gold" />
+                        </div>
+                      )}
 
-                    {!ownedReposLoading && hasLoadedOwnedRepos && filteredOwnedRepos.length === 0 && (
-                      <div className="text-sm text-muted-foreground border border-dashed border-border rounded-lg p-3 text-center">
-                        {ownedReposError || 'No repositories found for this account.'}
-                      </div>
-                    )}
+                      {!ownedReposLoading && filteredOwnedRepos.length === 0 && (
+                        <p className="py-10 text-center text-xs text-muted-foreground">
+                          {repoQuery ? 'No matching repositories found.' : 'Search for a repository above.'}
+                        </p>
+                      )}
+
+                      {!ownedReposLoading && filteredOwnedRepos.length > 0 && (
+                        <div className="grid gap-1">
+                          {filteredOwnedRepos.map((repo) => (
+                            <button
+                              key={repo.id}
+                              type="button"
+                              onClick={() => handleOwnedRepoSelect(repo)}
+                              disabled={isLoading}
+                              className={`flex flex-col items-start gap-0.5 rounded-xl px-4 py-3 text-left transition-all active-scale ${
+                                selectedOwnedRepo?.id === repo.id
+                                  ? 'bg-background shadow-neu-flat text-foreground'
+                                  : 'text-muted-foreground hover:bg-background/20 hover:text-foreground'
+                              }`}
+                            >
+                              <span className="text-sm font-bold tracking-tight">{repo.name}</span>
+                              <span className="text-[10px] opacity-60">{repo.fullName}</span>
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
                   </>
                 )}
 
@@ -915,14 +926,22 @@ export default function UploadRepoForm() {
           </div>
         )}
 
-        <Button type="submit" size="lg" disabled={isLoading || !canAnalyze}>
+        <Button
+          type="submit"
+          size="lg"
+          className="mt-6 h-14 w-full rounded-2xl bg-gold text-white shadow-xl hover:bg-gold/90 transition-all font-black uppercase tracking-widest text-xs active-scale"
+          disabled={isLoading || !canAnalyze}
+        >
           {isLoading ? (
             <>
-              <Loader2 className="mr-2 size-4 animate-spin" />
-              Analyzing…
+              <Loader2 className="mr-2 size-5 animate-spin" />
+              Analyzing Codebase...
             </>
           ) : (
-            'Analyze'
+            <>
+              Analyze Codebase Structure
+              <ArrowRight className="ml-2 size-4" />
+            </>
           )}
         </Button>
       </form>
diff --git a/client/src/features/graph/pages/UploadRepoPage.jsx b/client/src/features/graph/pages/UploadRepoPage.jsx
index 312cea3..6bdad05 100644
--- a/client/src/features/graph/pages/UploadRepoPage.jsx
+++ b/client/src/features/graph/pages/UploadRepoPage.jsx
@@ -22,13 +22,13 @@ export default function UploadRepoPage() {
     <div className="min-h-screen bg-background">
       <UploadRepoForm />
       {data && status !== 'loading' && (
-        <div className="mx-auto max-w-2xl px-4 py-6">
-          <div className="flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-card/70 px-4 py-3">
-            <p className="text-sm text-muted-foreground">
-              Active graph ready for {data?.rootDir || 'the selected analysis'}.
+        <div className="mx-auto max-w-2xl px-4 py-8">
+          <div className="flex items-center justify-between gap-4 rounded-2xl shadow-neu-inset border-none bg-background/60 px-6 py-4 animate-in fade-in zoom-in-95 duration-500">
+            <p className="text-sm text-muted-foreground/80 font-medium">
+              Active graph ready for <span className="text-foreground font-bold">{data?.rootDir || 'the selected analysis'}</span>.
             </p>
             <Link to="/graph">
-              <Button size="sm" variant="outline">Open graph</Button>
+              <Button size="sm" variant="outline" className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale">Open graph</Button>
             </Link>
           </div>
         </div>
@@ -41,10 +41,10 @@ export default function UploadRepoPage() {
       )}
 
       {status === 'failed' && error && (
-        <div className="mx-auto max-w-lg px-4 py-6">
-          <div className="flex items-start gap-3 rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+        <div className="mx-auto max-w-lg px-4 py-8">
+          <div className="flex items-start gap-3 rounded-2xl shadow-neu-inset border-none bg-destructive/5 px-6 py-4 text-sm text-destructive animate-in shake duration-500">
             <AlertCircle className="mt-0.5 size-4 shrink-0" />
-            <span>{error}</span>
+            <span className="font-medium">{error}</span>
           </div>
         </div>
       )}

From d38fc0fdb623a83a1f8c9f61eb66b2c5e9274915 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 20:23:59 +0530
Subject: [PATCH 10/19] feat: implemented multiple AI provider

---
 server/.env.example                           |  31 +-
 server/src/agents/embedding/EmbeddingAgent.js |  19 +-
 .../src/agents/enrichment/EnrichmentAgent.js  |  30 +-
 server/src/agents/query/QueryAgent.js         |  45 ++-
 server/src/api/ai/routes/ai.routes.js         |  60 ++-
 server/src/services/ai/llmProvider.js         | 341 ++++++++++++++++++
 server/test/ai.suggest-refactor.test.js       |   4 +-
 7 files changed, 445 insertions(+), 85 deletions(-)
 create mode 100644 server/src/services/ai/llmProvider.js

diff --git a/server/.env.example b/server/.env.example
index fc6d393..14e208a 100644
--- a/server/.env.example
+++ b/server/.env.example
@@ -44,8 +44,37 @@ CLIENT_URL=http://localhost:5173
 # COOKIE_SECRET=your_cookie_secret
 # REFRESH_TOKEN_SECRET=your_refresh_secret
 
+# ===============================
+# AI Provider (chat + summarization)
+# ===============================
+# Supported providers: openai-compatible, anthropic, gemini
+AI_PROVIDER=openai-compatible
+AI_API_KEY=sk-...
+AI_MODEL=gpt-4o-mini
+# Optional base URL for OpenAI-compatible providers (OpenRouter, Groq, Together, etc.)
+# AI_BASE_URL=https://api.openai.com/v1
+
+# Optional provider-specific fallbacks if AI_API_KEY is not set
+# ANTHROPIC_API_KEY=sk-ant-...
+# GEMINI_API_KEY=AIza...
+
+# Backward-compatible OpenAI envs (still supported)
 OPENAI_API_KEY=sk-...
-OPENAI_MODEL=gpt-4o-mini          # cheapest model with good quality
+OPENAI_MODEL=gpt-4o-mini
+
+# ===============================
+# AI Embeddings (semantic search)
+# ===============================
+# Keep this openai-compatible so vector dimensions match DB expectations.
+AI_EMBEDDING_PROVIDER=openai-compatible
+AI_EMBEDDING_API_KEY=sk-...
+AI_EMBEDDING_MODEL=text-embedding-3-small
+# Optional base URL for embedding endpoint
+# AI_EMBEDDING_BASE_URL=https://api.openai.com/v1
+
+# Backward-compatible embedding env
+OPENAI_EMBEDDING_MODEL=text-embedding-3-small
+
 AI_CACHE_TTL_SECONDS=3600         # cache explanations for 1 hour
 REDIS_URL=redis://localhost:6379  # omit to use in-memory cache
 REDIS_HOST=localhost              # use redis when app runs inside Docker
diff --git a/server/src/agents/embedding/EmbeddingAgent.js b/server/src/agents/embedding/EmbeddingAgent.js
index 279b618..8c45388 100644
--- a/server/src/agents/embedding/EmbeddingAgent.js
+++ b/server/src/agents/embedding/EmbeddingAgent.js
@@ -1,8 +1,9 @@
-import OpenAI from 'openai';
 import { BaseAgent } from '../core/BaseAgent.js';
 import { scoreEmbedding } from '../core/confidence.js';
+import { createEmbeddingClient } from '../../services/ai/llmProvider.js';
 
-const DEFAULT_EMBEDDING_MODEL = process.env.OPENAI_EMBEDDING_MODEL || 'text-embedding-3-small';
+const DEFAULT_EMBEDDING_MODEL =
+  process.env.AI_EMBEDDING_MODEL || process.env.OPENAI_EMBEDDING_MODEL || 'text-embedding-3-small';
 const EMBEDDING_BATCH_SIZE = 100;
 
 function formatDeclarationNames(declarations) {
@@ -34,13 +35,9 @@ export class EmbeddingAgent extends BaseAgent {
   maxRetries = 2;
   timeoutMs = 180_000;
 
-  constructor({ openaiClient } = {}) {
+  constructor({ embeddingClient } = {}) {
     super();
-    this.openai =
-      openaiClient ||
-      (process.env.OPENAI_API_KEY
-        ? new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
-        : null);
+    this.embeddingClient = embeddingClient || createEmbeddingClient();
     this.model = DEFAULT_EMBEDDING_MODEL;
   }
 
@@ -66,13 +63,13 @@ export class EmbeddingAgent extends BaseAgent {
       });
     }
 
-    if (!this.openai) {
+    if (!this.embeddingClient.isConfigured()) {
       return this.buildResult({
         jobId: context?.jobId,
         status: 'failed',
         confidence: 0,
         data: {},
-        errors: [{ code: 500, message: 'OPENAI_API_KEY is missing for EmbeddingAgent.' }],
+        errors: [{ code: 500, message: 'Embedding provider is not configured for EmbeddingAgent.' }],
         warnings,
         metrics: {
           attempted: entries.length,
@@ -98,7 +95,7 @@ export class EmbeddingAgent extends BaseAgent {
       const batch = payload.slice(idx, idx + EMBEDDING_BATCH_SIZE);
 
       try {
-        const response = await this.openai.embeddings.create({
+        const response = await this.embeddingClient.createEmbedding({
           model: this.model,
           input: batch.map((item) => item.text),
         });
diff --git a/server/src/agents/enrichment/EnrichmentAgent.js b/server/src/agents/enrichment/EnrichmentAgent.js
index 901f25e..fa76711 100644
--- a/server/src/agents/enrichment/EnrichmentAgent.js
+++ b/server/src/agents/enrichment/EnrichmentAgent.js
@@ -1,13 +1,13 @@
 import crypto from 'crypto';
 import path from 'path';
 import { readFile } from 'fs/promises';
-import OpenAI from 'openai';
 import pLimit from 'p-limit';
 import { BaseAgent } from '../core/BaseAgent.js';
 import { scoreEnrichment } from '../core/confidence.js';
 import { redisClient } from '../../infrastructure/connections.js';
+import { createChatClient } from '../../services/ai/llmProvider.js';
 
-const DEFAULT_MODEL = process.env.OPENAI_MODEL || 'gpt-4o-mini';
+const DEFAULT_MODEL = process.env.AI_MODEL || process.env.OPENAI_MODEL || 'gpt-4o-mini';
 const FILE_LINE_THRESHOLD = Number(process.env.ENRICHMENT_FILE_LINE_THRESHOLD || 50);
 const CACHE_TTL_SECONDS = Number(process.env.AI_CACHE_TTL_SECONDS || 3600);
 const ENRICHMENT_CONCURRENCY = Number(process.env.ENRICHMENT_CONCURRENCY || 4);
@@ -80,14 +80,10 @@ export class EnrichmentAgent extends BaseAgent {
   maxRetries = 2;
   timeoutMs = 240_000;
 
-  constructor({ redis, openaiClient } = {}) {
+  constructor({ redis, llmClient } = {}) {
     super();
     this.redis = redis || redisClient;
-    this.openai =
-      openaiClient ||
-      (process.env.OPENAI_API_KEY
-        ? new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
-        : null);
+    this.llmClient = llmClient || createChatClient();
     this.model = DEFAULT_MODEL;
     this.lineThreshold = Number.isFinite(FILE_LINE_THRESHOLD) ? FILE_LINE_THRESHOLD : 50;
     this.cacheTtlSeconds = Number.isFinite(CACHE_TTL_SECONDS) ? CACHE_TTL_SECONDS : 3600;
@@ -115,8 +111,8 @@ export class EnrichmentAgent extends BaseAgent {
       });
     }
 
-    if (!this.openai) {
-      warnings.push('OPENAI_API_KEY is missing. Falling back to heuristic summaries only.');
+    if (!this.llmClient.isConfigured()) {
+      warnings.push('AI provider is not configured. Falling back to heuristic summaries only.');
     }
 
     const enriched = {};
@@ -147,7 +143,7 @@ export class EnrichmentAgent extends BaseAgent {
             return;
           }
 
-          if (!this.openai) {
+          if (!this.llmClient.isConfigured()) {
             enriched[filePath] = {
               summary: cheapSummary(filePath, node),
               architecturalRole: node?.type || 'module',
@@ -188,18 +184,18 @@ export class EnrichmentAgent extends BaseAgent {
 
           try {
             const prompt = buildPrompt({ filePath, node, content });
-            const completion = await this.openai.chat.completions.create({
+            const completion = await this.llmClient.createChatCompletion({
               model: this.model,
               temperature: 0.1,
-              max_tokens: 220,
-              response_format: { type: 'json_object' },
+              maxTokens: 220,
+              responseFormat: { type: 'json_object' },
               messages: [{ role: 'user', content: prompt }],
             });
 
-            const message = completion?.choices?.[0]?.message?.content || '{}';
+            const message = completion?.content || '{}';
             const usage = completion?.usage || {};
-            totalPromptTokens += Number(usage.prompt_tokens || 0);
-            totalCompletionTokens += Number(usage.completion_tokens || 0);
+            totalPromptTokens += Number(usage.prompt_tokens || usage.input_tokens || 0);
+            totalCompletionTokens += Number(usage.completion_tokens || usage.output_tokens || 0);
 
             let parsed;
             try {
diff --git a/server/src/agents/query/QueryAgent.js b/server/src/agents/query/QueryAgent.js
index 09d4a12..cf2870f 100644
--- a/server/src/agents/query/QueryAgent.js
+++ b/server/src/agents/query/QueryAgent.js
@@ -1,10 +1,11 @@
 import crypto from 'crypto';
-import OpenAI from 'openai';
 import { BaseAgent } from '../core/BaseAgent.js';
 import { pgPool, redisClient } from '../../infrastructure/connections.js';
+import { createChatClient, createEmbeddingClient } from '../../services/ai/llmProvider.js';
 
-const DEFAULT_MODEL = process.env.OPENAI_MODEL || 'gpt-4o-mini';
-const DEFAULT_EMBEDDING_MODEL = process.env.OPENAI_EMBEDDING_MODEL || 'text-embedding-3-small';
+const DEFAULT_MODEL = process.env.AI_MODEL || process.env.OPENAI_MODEL || 'gpt-4o-mini';
+const DEFAULT_EMBEDDING_MODEL =
+  process.env.AI_EMBEDDING_MODEL || process.env.OPENAI_EMBEDDING_MODEL || 'text-embedding-3-small';
 const CACHE_TTL_SECONDS = Number(process.env.AI_CACHE_TTL_SECONDS || 3600);
 const SEMANTIC_CANDIDATE_LIMIT = 20;
 const CONTEXT_LIMIT = 8;
@@ -120,15 +121,12 @@ export class QueryAgent extends BaseAgent {
   maxRetries = 1;
   timeoutMs = 90_000;
 
-  constructor({ db, redis, openaiClient } = {}) {
+  constructor({ db, redis, llmClient, embeddingClient } = {}) {
     super();
     this.db = db || pgPool;
     this.redis = redis || redisClient;
-    this.openai =
-      openaiClient ||
-      (process.env.OPENAI_API_KEY
-        ? new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
-        : null);
+    this.llmClient = llmClient || createChatClient();
+    this.embeddingClient = embeddingClient || createEmbeddingClient();
     this.model = DEFAULT_MODEL;
     this.embeddingModel = DEFAULT_EMBEDDING_MODEL;
     this.cacheTtlSeconds = Number.isFinite(CACHE_TTL_SECONDS) ? CACHE_TTL_SECONDS : 3600;
@@ -156,13 +154,26 @@ export class QueryAgent extends BaseAgent {
       });
     }
 
-    if (!this.openai) {
+    if (!this.llmClient.isConfigured()) {
       return this.buildResult({
         jobId,
         status: 'failed',
         confidence: 0,
         data: {},
-        errors: [{ code: 500, message: 'OPENAI_API_KEY is missing for QueryAgent.' }],
+        errors: [{ code: 500, message: 'AI provider is not configured for QueryAgent.' }],
+        warnings,
+        metrics: {},
+        processingTimeMs: Date.now() - start,
+      });
+    }
+
+    if (!this.embeddingClient.isConfigured()) {
+      return this.buildResult({
+        jobId,
+        status: 'failed',
+        confidence: 0,
+        data: {},
+        errors: [{ code: 500, message: 'Embedding provider is not configured for QueryAgent.' }],
         warnings,
         metrics: {},
         processingTimeMs: Date.now() - start,
@@ -208,7 +219,7 @@ export class QueryAgent extends BaseAgent {
         });
       }
 
-      const embeddingResponse = await this.openai.embeddings.create({
+      const embeddingResponse = await this.embeddingClient.createEmbedding({
         model: this.embeddingModel,
         input: question,
       });
@@ -246,15 +257,15 @@ export class QueryAgent extends BaseAgent {
       const reranked = keywordRerank(question, candidates);
       const topFiles = reranked.slice(0, CONTEXT_LIMIT);
 
-      const completion = await this.openai.chat.completions.create({
+      const completion = await this.llmClient.createChatCompletion({
         model: this.model,
         temperature: 0.1,
-        max_tokens: 320,
-        response_format: { type: 'json_object' },
+        maxTokens: 320,
+        responseFormat: { type: 'json_object' },
         messages: [{ role: 'user', content: buildAnswerPrompt(question, topFiles) }],
       });
 
-      const rawMessage = completion?.choices?.[0]?.message?.content || '{}';
+      const rawMessage = completion?.content || '{}';
       let parsed;
       try {
         parsed = JSON.parse(rawMessage);
@@ -275,7 +286,7 @@ export class QueryAgent extends BaseAgent {
         confidence: llmConfidence,
         retrievedFiles: topFiles.length,
         queryEmbeddingTokens: Number(embeddingResponse?.usage?.total_tokens || 0),
-        completionTokens: Number(completion?.usage?.completion_tokens || 0),
+        completionTokens: Number(completion?.usage?.completion_tokens || completion?.usage?.output_tokens || 0),
       };
 
       await this._saveQuery({
diff --git a/server/src/api/ai/routes/ai.routes.js b/server/src/api/ai/routes/ai.routes.js
index 9547f17..4d2e08f 100644
--- a/server/src/api/ai/routes/ai.routes.js
+++ b/server/src/api/ai/routes/ai.routes.js
@@ -1,16 +1,15 @@
 import { Router } from 'express';
 import jwt from 'jsonwebtoken';
 import rateLimit from 'express-rate-limit';
-import OpenAI from 'openai';
 import { QueryAgent } from '../../../agents/query/QueryAgent.js';
 import { AnalysisAgent } from '../../../agents/analysis/AnalysisAgent.js';
 import { pgPool, redisClient } from '../../../infrastructure/connections.js';
 import { requirePlan } from '../../../middleware/planGuard.middleware.js';
+import { createChatClient } from '../../../services/ai/llmProvider.js';
 
 const router = Router();
-const openaiClient = process.env.OPENAI_API_KEY
-  ? new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
-  : null;
+const chatClient = createChatClient();
+const defaultChatModel = process.env.AI_MODEL || process.env.OPENAI_MODEL || 'gpt-4o-mini';
 
 const aiLimiter = rateLimit({
   windowMs: 60 * 1000,
@@ -160,8 +159,8 @@ router.post('/suggest-refactor', requirePlan('pro', 'team'), async (req, res, ne
       return res.status(404).json({ error: 'File not found.' });
     }
 
-    if (!openaiClient) {
-      return res.status(503).json({ error: 'OpenAI is not configured.' });
+    if (!chatClient.isConfigured()) {
+      return res.status(503).json({ error: 'AI provider is not configured.' });
     }
 
     const node = nodeResult.rows[0];
@@ -186,14 +185,14 @@ Respond with a JSON object:
 }
 Only respond with the JSON object.`;
 
-    const response = await openaiClient.chat.completions.create({
-      model: process.env.OPENAI_MODEL || 'gpt-4o-mini',
-      max_tokens: 400,
+    const completion = await chatClient.createChatCompletion({
+      model: defaultChatModel,
+      maxTokens: 400,
       temperature: 0.2,
       messages: [{ role: 'user', content: prompt }],
     });
 
-    const content = response?.choices?.[0]?.message?.content?.trim() || '';
+    const content = completion?.content?.trim() || '';
 
     let parsed;
     try {
@@ -339,21 +338,15 @@ router.post('/explain/stream', async (req, res, next) => {
     return res.status(400).json({ error: 'question and jobId are required.' });
   }
 
-  if (!openaiClient) {
-    return res.status(503).json({ error: 'OpenAI is not configured for streaming.' });
+  if (!chatClient.isConfigured()) {
+    return res.status(503).json({ error: 'AI provider is not configured for streaming.' });
   }
 
   let clientClosed = false;
-  let stream = null;
+  let streamSession = null;
 
   const closeStream = () => {
-    if (typeof stream?.abort === 'function') {
-      stream.abort();
-    }
-
-    if (typeof stream?.controller?.abort === 'function') {
-      stream.controller.abort();
-    }
+    streamSession?.cancel?.();
   };
 
   const writeEvent = (payload) => {
@@ -395,25 +388,18 @@ router.post('/explain/stream', async (req, res, next) => {
       res.flushHeaders();
     }
 
-    stream = await openaiClient.chat.completions.stream({
-      model: process.env.OPENAI_MODEL || 'gpt-4o-mini',
-      max_tokens: 500,
-      messages: [
-        {
-          role: 'user',
-          content: question,
-        },
-      ],
+    streamSession = await chatClient.createStream({
+      model: defaultChatModel,
+      maxTokens: 500,
+      messages: [{ role: 'user', content: question }],
+      onText: (text) => {
+        if (!clientClosed) {
+          writeEvent({ text });
+        }
+      },
     });
 
-    for await (const chunk of stream) {
-      if (clientClosed) break;
-
-      const text = chunk?.choices?.[0]?.delta?.content || '';
-      if (text) {
-        writeEvent({ text });
-      }
-    }
+    await streamSession.consume();
 
     if (!clientClosed) {
       res.write('data: [DONE]\n\n');
diff --git a/server/src/services/ai/llmProvider.js b/server/src/services/ai/llmProvider.js
new file mode 100644
index 0000000..3f72831
--- /dev/null
+++ b/server/src/services/ai/llmProvider.js
@@ -0,0 +1,341 @@
+import axios from 'axios';
+import OpenAI from 'openai';
+
+const DEFAULT_CHAT_MODEL = process.env.AI_MODEL || process.env.OPENAI_MODEL || 'gpt-4o-mini';
+const DEFAULT_EMBEDDING_MODEL =
+  process.env.AI_EMBEDDING_MODEL || process.env.OPENAI_EMBEDDING_MODEL || 'text-embedding-3-small';
+
+function normalizeProvider(value) {
+  const provider = String(value || 'openai-compatible').trim().toLowerCase();
+
+  if (['openai', 'compatible', 'openai-compatible'].includes(provider)) {
+    return 'openai-compatible';
+  }
+
+  if (['google', 'gemini'].includes(provider)) {
+    return 'gemini';
+  }
+
+  if (['anthropic', 'claude'].includes(provider)) {
+    return 'anthropic';
+  }
+
+  return provider;
+}
+
+function resolveChatApiKey(provider) {
+  return (
+    process.env.AI_API_KEY
+    || (provider === 'anthropic' ? process.env.ANTHROPIC_API_KEY : null)
+    || (provider === 'gemini' ? process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY : null)
+    || process.env.OPENAI_API_KEY
+    || null
+  );
+}
+
+function resolveChatBaseUrl(provider) {
+  if (process.env.AI_BASE_URL) return process.env.AI_BASE_URL;
+  if (process.env.OPENAI_BASE_URL) return process.env.OPENAI_BASE_URL;
+
+  if (provider === 'anthropic') return 'https://api.anthropic.com/v1/messages';
+  if (provider === 'gemini') return 'https://generativelanguage.googleapis.com/v1beta';
+  return null;
+}
+
+function resolveEmbeddingProvider() {
+  return normalizeProvider(process.env.AI_EMBEDDING_PROVIDER || process.env.AI_PROVIDER || 'openai-compatible');
+}
+
+function resolveEmbeddingApiKey(provider) {
+  return (
+    process.env.AI_EMBEDDING_API_KEY
+    || process.env.AI_API_KEY
+    || process.env.OPENAI_API_KEY
+    || (provider === 'gemini' ? process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY : null)
+    || null
+  );
+}
+
+function resolveEmbeddingBaseUrl() {
+  return process.env.AI_EMBEDDING_BASE_URL || process.env.AI_BASE_URL || process.env.OPENAI_BASE_URL || null;
+}
+
+function normalizeMessageText(content) {
+  if (Array.isArray(content)) {
+    return content
+      .map((part) => {
+        if (typeof part === 'string') return part;
+        if (typeof part?.text === 'string') return part.text;
+        return '';
+      })
+      .join('\n')
+      .trim();
+  }
+
+  return String(content || '').trim();
+}
+
+function toAnthropicPayload(messages = []) {
+  const systemPrompts = [];
+  const mappedMessages = [];
+
+  for (const message of messages) {
+    const role = String(message?.role || 'user').trim().toLowerCase();
+    const text = normalizeMessageText(message?.content);
+    if (!text) continue;
+
+    if (role === 'system') {
+      systemPrompts.push(text);
+      continue;
+    }
+
+    mappedMessages.push({
+      role: role === 'assistant' ? 'assistant' : 'user',
+      content: text,
+    });
+  }
+
+  return {
+    system: systemPrompts.join('\n\n').trim() || undefined,
+    messages: mappedMessages,
+  };
+}
+
+function toGeminiPayload(messages = []) {
+  const contents = [];
+
+  for (const message of messages) {
+    const role = String(message?.role || 'user').trim().toLowerCase();
+    if (role === 'system') continue;
+
+    const text = normalizeMessageText(message?.content);
+    if (!text) continue;
+
+    contents.push({
+      role: role === 'assistant' ? 'model' : 'user',
+      parts: [{ text }],
+    });
+  }
+
+  return contents;
+}
+
+export class ChatClient {
+  constructor() {
+    this.provider = normalizeProvider(process.env.AI_PROVIDER || 'openai-compatible');
+    this.apiKey = resolveChatApiKey(this.provider);
+    this.baseUrl = resolveChatBaseUrl(this.provider);
+    this.model = DEFAULT_CHAT_MODEL;
+
+    this.openai =
+      this.provider === 'openai-compatible' && this.apiKey
+        ? new OpenAI({
+            apiKey: this.apiKey,
+            baseURL: this.baseUrl || undefined,
+          })
+        : null;
+  }
+
+  isConfigured() {
+    if (!this.apiKey) return false;
+    if (!this.model) return false;
+    return true;
+  }
+
+  async createChatCompletion({ messages, model, temperature, maxTokens, responseFormat } = {}) {
+    if (!this.isConfigured()) {
+      throw new Error('AI provider is not configured. Set AI_API_KEY and AI_MODEL (or OPENAI_* fallbacks).');
+    }
+
+    const selectedModel = model || this.model;
+
+    if (this.provider === 'openai-compatible') {
+      const response = await this.openai.chat.completions.create({
+        model: selectedModel,
+        temperature,
+        max_tokens: maxTokens,
+        response_format: responseFormat,
+        messages,
+      });
+
+      const content = response?.choices?.[0]?.message?.content;
+      return {
+        content: normalizeMessageText(content),
+        usage: response?.usage || {},
+        raw: response,
+      };
+    }
+
+    if (this.provider === 'anthropic') {
+      const payload = toAnthropicPayload(messages);
+
+      const response = await axios.post(
+        this.baseUrl,
+        {
+          model: selectedModel,
+          max_tokens: maxTokens || 512,
+          temperature,
+          system: payload.system,
+          messages: payload.messages,
+        },
+        {
+          headers: {
+            'x-api-key': this.apiKey,
+            'anthropic-version': process.env.ANTHROPIC_VERSION || '2023-06-01',
+            'content-type': 'application/json',
+          },
+          timeout: 60_000,
+        },
+      );
+
+      const blocks = Array.isArray(response?.data?.content) ? response.data.content : [];
+      const content = blocks
+        .map((block) => (block?.type === 'text' ? block.text : ''))
+        .filter(Boolean)
+        .join('\n')
+        .trim();
+
+      return {
+        content,
+        usage: response?.data?.usage || {},
+        raw: response?.data,
+      };
+    }
+
+    if (this.provider === 'gemini') {
+      const base = this.baseUrl.replace(/\/$/, '');
+      const endpoint = `${base}/models/${encodeURIComponent(selectedModel)}:generateContent`;
+      const contents = toGeminiPayload(messages);
+
+      const generationConfig = {
+        temperature,
+        maxOutputTokens: maxTokens,
+      };
+
+      if (responseFormat?.type === 'json_object') {
+        generationConfig.responseMimeType = 'application/json';
+      }
+
+      const response = await axios.post(
+        endpoint,
+        {
+          contents,
+          generationConfig,
+        },
+        {
+          params: { key: this.apiKey },
+          headers: { 'content-type': 'application/json' },
+          timeout: 60_000,
+        },
+      );
+
+      const parts = response?.data?.candidates?.[0]?.content?.parts || [];
+      const content = parts.map((part) => part?.text || '').filter(Boolean).join('\n').trim();
+
+      return {
+        content,
+        usage: response?.data?.usageMetadata || {},
+        raw: response?.data,
+      };
+    }
+
+    throw new Error(
+      `Unsupported AI_PROVIDER '${this.provider}'. Supported providers: openai-compatible, anthropic, gemini.`,
+    );
+  }
+
+  async createStream({ messages, model, maxTokens, temperature, onText } = {}) {
+    if (!this.isConfigured()) {
+      throw new Error('AI provider is not configured. Set AI_API_KEY and AI_MODEL (or OPENAI_* fallbacks).');
+    }
+
+    if (this.provider === 'openai-compatible') {
+      const stream = await this.openai.chat.completions.stream({
+        model: model || this.model,
+        max_tokens: maxTokens,
+        temperature,
+        messages,
+      });
+
+      return {
+        cancel: () => {
+          if (typeof stream?.abort === 'function') {
+            stream.abort();
+          }
+
+          if (typeof stream?.controller?.abort === 'function') {
+            stream.controller.abort();
+          }
+        },
+        consume: async () => {
+          for await (const chunk of stream) {
+            const text = chunk?.choices?.[0]?.delta?.content || '';
+            if (text) onText?.(text);
+          }
+        },
+      };
+    }
+
+    // Fallback for providers without native stream handling in this adapter.
+    return {
+      cancel: () => undefined,
+      consume: async () => {
+        const completion = await this.createChatCompletion({
+          messages,
+          model,
+          maxTokens,
+          temperature,
+        });
+        if (completion?.content) {
+          onText?.(completion.content);
+        }
+      },
+    };
+  }
+}
+
+export class EmbeddingClient {
+  constructor() {
+    this.provider = resolveEmbeddingProvider();
+    this.apiKey = resolveEmbeddingApiKey(this.provider);
+    this.baseUrl = resolveEmbeddingBaseUrl();
+    this.model = DEFAULT_EMBEDDING_MODEL;
+
+    this.openai =
+      this.provider === 'openai-compatible' && this.apiKey
+        ? new OpenAI({
+            apiKey: this.apiKey,
+            baseURL: this.baseUrl || undefined,
+          })
+        : null;
+  }
+
+  isConfigured() {
+    return Boolean(this.apiKey && this.model);
+  }
+
+  async createEmbedding({ input, model } = {}) {
+    if (!this.isConfigured()) {
+      throw new Error('Embedding provider is not configured. Set AI_EMBEDDING_API_KEY and AI_EMBEDDING_MODEL.');
+    }
+
+    if (this.provider !== 'openai-compatible') {
+      throw new Error(
+        `AI_EMBEDDING_PROVIDER '${this.provider}' is not supported. Use openai-compatible for embeddings.`,
+      );
+    }
+
+    return this.openai.embeddings.create({
+      model: model || this.model,
+      input,
+    });
+  }
+}
+
+export function createChatClient() {
+  return new ChatClient();
+}
+
+export function createEmbeddingClient() {
+  return new EmbeddingClient();
+}
diff --git a/server/test/ai.suggest-refactor.test.js b/server/test/ai.suggest-refactor.test.js
index 3a3ac6d..1d1a2e4 100644
--- a/server/test/ai.suggest-refactor.test.js
+++ b/server/test/ai.suggest-refactor.test.js
@@ -159,7 +159,7 @@ test('POST /api/ai/suggest-refactor returns 404 when file is not part of the gra
   }
 });
 
-test('POST /api/ai/suggest-refactor returns 503 when OpenAI is not configured', async () => {
+test('POST /api/ai/suggest-refactor returns 503 when AI provider is not configured', async () => {
   const userId = '97bcd6cf-eb90-40dc-a429-11eb45422555';
   const repositoryId = '5cd42d0d-e6d3-40dd-966e-5a2d4b0d3666';
   const jobId = '8085b4cb-1718-428e-9694-9e22cfb76777';
@@ -216,7 +216,7 @@ test('POST /api/ai/suggest-refactor returns 503 when OpenAI is not configured',
 
     assert.equal(response.status, 503);
     const payload = await response.json();
-    assert.equal(payload.error, 'OpenAI is not configured.');
+    assert.equal(payload.error, 'AI provider is not configured.');
   } finally {
     await pgPool.query('DELETE FROM graph_nodes WHERE job_id = $1', [jobId]);
     await pgPool.query('DELETE FROM analysis_jobs WHERE id = $1', [jobId]);

From 3ce5554faa9159e6400b86057c9298fb1ec6e339 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 22:02:30 +0530
Subject: [PATCH 11/19] feat: added snippet analysis feature

---
 client/src/App.jsx                            |   1 +
 client/src/features/ai/services/aiService.js  |  24 +
 .../analyze/pages/AnalyzeFilePage.jsx         | 371 +++++++++++++
 .../features/analyze/pages/AnalyzePage.jsx    |  38 +-
 .../analyze/services/analyzeService.js        |   1 +
 .../features/analyze/slices/analyzeSlice.js   |   3 +
 server/.env.example                           |   9 +
 server/package.json                           |   2 +-
 .../agents/analysis/SnippetAnalyzerAgent.js   | 489 ++++++++++++++++++
 .../analyze/controllers/analyze.controller.js |  35 +-
 server/src/api/ai/routes/ai.routes.js         |  63 +++
 server/test/ai.snippet-impact.test.js         | 196 +++++++
 .../test/snippet.analyzer.confidence.test.js  | 147 ++++++
 13 files changed, 1365 insertions(+), 14 deletions(-)
 create mode 100644 server/src/agents/analysis/SnippetAnalyzerAgent.js
 create mode 100644 server/test/ai.snippet-impact.test.js
 create mode 100644 server/test/snippet.analyzer.confidence.test.js

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 08c7ea1..2475f8e 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -42,6 +42,7 @@ function AppRoutes() {
           <Route path="/dashboard" element={<DashboardPage />} />
           <Route path="/upload-repo" element={<UploadRepoPage />} />
           <Route path="/analyze" element={<AnalyzePage />} />
+          <Route path="/analyze/file" element={<AnalyzeFilePage />} />
           <Route path="/analyze/:dir_name" element={<AnalyzePage />} />
           <Route path="/analyze/:dir_name/file" element={<AnalyzeFilePage />} />
           <Route path="/graph" element={<GraphPage />} />
diff --git a/client/src/features/ai/services/aiService.js b/client/src/features/ai/services/aiService.js
index dc52628..243fd5c 100644
--- a/client/src/features/ai/services/aiService.js
+++ b/client/src/features/ai/services/aiService.js
@@ -107,6 +107,30 @@ export const aiService = {
     return data;
   },
 
+  async analyzeSnippetImpact({ jobId, filePath, snippet, lineStart, lineEnd, signal }) {
+    const normalizedJobId = normalizeText(jobId);
+    const normalizedFilePath = normalizeText(filePath);
+    const normalizedSnippet = String(snippet || '').trim();
+
+    if (!normalizedJobId || !normalizedFilePath || !normalizedSnippet) {
+      throw new Error('analyzeSnippetImpact requires jobId, filePath, and snippet.');
+    }
+
+    const payload = {
+      jobId: normalizedJobId,
+      filePath: normalizedFilePath,
+      snippet: normalizedSnippet,
+    };
+
+    if (Number.isInteger(lineStart) && lineStart > 0) payload.lineStart = lineStart;
+    if (Number.isInteger(lineEnd) && lineEnd > 0) payload.lineEnd = lineEnd;
+
+    const { data } = await aiClient.post('/api/ai/snippet-impact', payload, {
+      signal,
+    });
+    return data;
+  },
+
   async suggestRefactor({ jobId, filePath }) {
     const normalizedJobId = normalizeText(jobId);
     const normalizedFilePath = normalizeText(filePath);
diff --git a/client/src/features/analyze/pages/AnalyzeFilePage.jsx b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
index 142d725..a53bda3 100644
--- a/client/src/features/analyze/pages/AnalyzeFilePage.jsx
+++ b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
@@ -15,10 +15,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import {
   ArrowLeft,
+  AlertTriangle,
   Check,
   Edit3,
   ExternalLink,
   GitBranch,
+  Loader2,
   Save,
   X,
 } from 'lucide-react';
@@ -33,6 +35,7 @@ import {
 } from '../slices/analyzeSlice';
 import { AiPanel } from '@/features/ai';
 import { loadSavedGraph, selectGraphData } from '@/features/graph';
+import { aiService } from '@/features/ai/services/aiService';
 
 function detectPrismLanguage(filePath = '') {
   const normalized = String(filePath).toLowerCase();
@@ -65,11 +68,22 @@ export default function AnalyzeFilePage() {
 
   const [editorValue, setEditorValue] = useState('');
   const [isEditing, setIsEditing] = useState(false);
+  const [isAutoSnippetAnalyze, setIsAutoSnippetAnalyze] = useState(true);
+  const [snippetState, setSnippetState] = useState({
+    status: 'idle',
+    error: '',
+    selectedSnippet: '',
+    lineStart: null,
+    lineEnd: null,
+    data: null,
+  });
 
   const editorGutterRef = useRef(null);
   const editorTextareaRef = useRef(null);
   const viewerGutterRef = useRef(null);
   const viewerCodeRef = useRef(null);
+  const snippetAbortRef = useRef(null);
+  const snippetDebounceRef = useRef(null);
 
   const routeDirectory = useMemo(() => {
     const raw = params.dir_name ? decodeURIComponent(params.dir_name) : '';
@@ -114,8 +128,27 @@ export default function AnalyzeFilePage() {
     if (typeof fileContent !== 'string') return;
     setEditorValue(fileContent);
     setIsEditing(false);
+    setSnippetState({
+      status: 'idle',
+      error: '',
+      selectedSnippet: '',
+      lineStart: null,
+      lineEnd: null,
+      data: null,
+    });
   }, [fileState.data?.content, fileState.data?.path]);
 
+  useEffect(() => {
+    return () => {
+      if (snippetDebounceRef.current) {
+        clearTimeout(snippetDebounceRef.current);
+      }
+      if (snippetAbortRef.current) {
+        snippetAbortRef.current.abort();
+      }
+    };
+  }, []);
+
   const codeLanguage = useMemo(
     () => detectPrismLanguage(fileState.data?.path || selectedFilePath),
     [fileState.data?.path, selectedFilePath],
@@ -181,6 +214,195 @@ export default function AnalyzeFilePage() {
 
   const hasNodeInsights = Boolean(selectedFilePath && aiGraph?.[selectedFilePath]);
 
+  const getLineNumberFromOffset = (value, offset) => {
+    const safeOffset = Math.max(0, Math.min(String(value || '').length, offset));
+    const upToOffset = String(value || '').slice(0, safeOffset);
+    return upToOffset.split('\n').length;
+  };
+
+  const triggerSnippetAnalysis = ({ snippet, lineStart, lineEnd, shouldAnalyze = true }) => {
+    const normalizedSnippet = String(snippet || '').trim();
+
+    if (!shouldAnalyze) {
+      if (snippetDebounceRef.current) {
+        clearTimeout(snippetDebounceRef.current);
+      }
+      if (snippetAbortRef.current) {
+        snippetAbortRef.current.abort();
+      }
+
+      setSnippetState((prev) => ({
+        ...prev,
+        status: 'idle',
+        error: '',
+        selectedSnippet: normalizedSnippet,
+        lineStart: Number.isInteger(lineStart) ? lineStart : null,
+        lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
+        data: null,
+      }));
+      return;
+    }
+
+    if (!normalizedSnippet || !analysisJobId || !selectedFilePath) {
+      if (snippetAbortRef.current) {
+        snippetAbortRef.current.abort();
+      }
+
+      setSnippetState((prev) => ({
+        ...prev,
+        status: 'idle',
+        error: '',
+        selectedSnippet: normalizedSnippet,
+        lineStart: Number.isInteger(lineStart) ? lineStart : null,
+        lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
+        data: null,
+      }));
+      return;
+    }
+
+    if (snippetDebounceRef.current) {
+      clearTimeout(snippetDebounceRef.current);
+    }
+
+    snippetDebounceRef.current = setTimeout(async () => {
+      if (snippetAbortRef.current) {
+        snippetAbortRef.current.abort();
+      }
+
+      const controller = new AbortController();
+      snippetAbortRef.current = controller;
+
+      setSnippetState((prev) => ({
+        ...prev,
+        status: 'loading',
+        error: '',
+        selectedSnippet: normalizedSnippet,
+        lineStart: Number.isInteger(lineStart) ? lineStart : null,
+        lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
+      }));
+
+      try {
+        const result = await aiService.analyzeSnippetImpact({
+          jobId: analysisJobId,
+          filePath: selectedFilePath,
+          snippet: normalizedSnippet,
+          lineStart,
+          lineEnd,
+          signal: controller.signal,
+        });
+
+        if (controller.signal.aborted) return;
+
+        setSnippetState({
+          status: 'succeeded',
+          error: '',
+          selectedSnippet: normalizedSnippet,
+          lineStart: Number.isInteger(lineStart) ? lineStart : null,
+          lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
+          data: result,
+        });
+      } catch (error) {
+        if (controller.signal.aborted || error?.name === 'CanceledError' || error?.name === 'AbortError') {
+          return;
+        }
+
+        setSnippetState((prev) => ({
+          ...prev,
+          status: 'failed',
+          error:
+            error?.response?.data?.error ||
+            error?.message ||
+            'Failed to analyze selected snippet.',
+          data: null,
+        }));
+      }
+    }, 450);
+  };
+
+  const handleTextareaSelection = (event) => {
+    const target = event?.target;
+    const value = String(target?.value || '');
+    const start = Number.isInteger(target?.selectionStart) ? target.selectionStart : 0;
+    const end = Number.isInteger(target?.selectionEnd) ? target.selectionEnd : 0;
+
+    if (!value || end <= start) {
+      triggerSnippetAnalysis({ snippet: '', lineStart: null, lineEnd: null, shouldAnalyze: false });
+      return;
+    }
+
+    const selectedSnippet = value.slice(start, end).trim();
+    const lineStart = getLineNumberFromOffset(value, start);
+    const lineEnd = getLineNumberFromOffset(value, end);
+
+    triggerSnippetAnalysis({
+      snippet: selectedSnippet,
+      lineStart,
+      lineEnd,
+      shouldAnalyze: isAutoSnippetAnalyze,
+    });
+  };
+
+  const getRangeOffsetsFromCodeElement = (codeElement, selectionRange) => {
+    if (!codeElement || !selectionRange) return null;
+
+    const preRange = selectionRange.cloneRange();
+    preRange.selectNodeContents(codeElement);
+    preRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
+
+    const selectionText = selectionRange.toString();
+    const start = preRange.toString().length;
+    const end = start + selectionText.length;
+
+    return {
+      start,
+      end,
+      text: selectionText,
+    };
+  };
+
+  const handleViewerSelection = () => {
+    const selection = window.getSelection();
+    const codeContainer = viewerCodeRef.current;
+    if (!selection || !codeContainer || selection.rangeCount === 0) return;
+
+    const range = selection.getRangeAt(0);
+
+    if (!codeContainer.contains(range.commonAncestorContainer)) {
+      return;
+    }
+
+    const codeElement = codeContainer.querySelector('code');
+    const rawContent = String(fileState.data?.content || '');
+    const rangeOffsets = getRangeOffsetsFromCodeElement(codeElement, range);
+
+    if (!rangeOffsets || rangeOffsets.end <= rangeOffsets.start) {
+      triggerSnippetAnalysis({ snippet: '', lineStart: null, lineEnd: null, shouldAnalyze: false });
+      return;
+    }
+
+    const selectedSnippet = rawContent.slice(rangeOffsets.start, rangeOffsets.end).trim();
+    const lineStart = getLineNumberFromOffset(rawContent, rangeOffsets.start);
+    const lineEnd = getLineNumberFromOffset(rawContent, rangeOffsets.end);
+
+    triggerSnippetAnalysis({
+      snippet: selectedSnippet,
+      lineStart,
+      lineEnd,
+      shouldAnalyze: isAutoSnippetAnalyze,
+    });
+  };
+
+  const handleManualSnippetAnalyze = () => {
+    if (!snippetState.selectedSnippet) return;
+
+    triggerSnippetAnalysis({
+      snippet: snippetState.selectedSnippet,
+      lineStart: snippetState.lineStart,
+      lineEnd: snippetState.lineEnd,
+      shouldAnalyze: true,
+    });
+  };
+
   return (
     <section className="mx-auto w-full max-w-475 px-4 pb-10 pt-7 2xl:px-6">
       <div className="mb-5">
@@ -299,6 +521,9 @@ export default function AnalyzeFilePage() {
                       ref={editorTextareaRef}
                       value={editorValue}
                       onChange={(e) => setEditorValue(e.target.value)}
+                      onSelect={handleTextareaSelection}
+                      onKeyUp={handleTextareaSelection}
+                      onMouseUp={handleTextareaSelection}
                       spellCheck={false}
                       rows={editorLineCount}
                       className="min-w-max flex-1 resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 outline-none whitespace-pre overflow-hidden text-foreground/90"
@@ -317,6 +542,8 @@ export default function AnalyzeFilePage() {
                     </pre>
                     <pre
                       ref={viewerCodeRef}
+                      onMouseUp={handleViewerSelection}
+                      onKeyUp={handleViewerSelection}
                       className="min-w-max flex-1 px-4 py-3 font-mono text-xs leading-5 overflow-visible whitespace-pre"
                     >
                       <code
@@ -344,6 +571,150 @@ export default function AnalyzeFilePage() {
               {fileState.saveStatus === 'failed' && fileState.saveError && (
                 <p className="mt-2 text-xs text-destructive">{fileState.saveError}</p>
               )}
+
+              <div className="mt-4 rounded-xl border border-border/50 bg-background/50 p-3">
+                <div className="mb-2 flex items-center justify-between gap-2">
+                  <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+                    Snippet Analysis
+                  </p>
+                  <div className="flex items-center gap-2">
+                    {snippetState.lineStart && snippetState.lineEnd && (
+                      <p className="text-[10px] text-muted-foreground">
+                        Lines {snippetState.lineStart}-{snippetState.lineEnd}
+                      </p>
+                    )}
+                    <Button
+                      size="sm"
+                      type="button"
+                      variant="outline"
+                      onClick={() => setIsAutoSnippetAnalyze((prev) => !prev)}
+                      className="h-7 rounded-lg px-2 text-[10px] shadow-neu-inset border-none bg-background/60"
+                    >
+                      {isAutoSnippetAnalyze ? 'Auto Analyze: ON' : 'Auto Analyze: OFF'}
+                    </Button>
+                    {!isAutoSnippetAnalyze && (
+                      <Button
+                        size="sm"
+                        type="button"
+                        onClick={handleManualSnippetAnalyze}
+                        disabled={!snippetState.selectedSnippet || snippetState.status === 'loading'}
+                        className="h-7 rounded-lg px-2 text-[10px]"
+                      >
+                        {snippetState.status === 'loading' ? 'Analyzing...' : 'Analyze Snippet'}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+
+                {!snippetState.selectedSnippet && (
+                  <p className="text-xs text-muted-foreground">
+                    Select a code snippet to analyze its purpose and impact across related files.
+                    {!isAutoSnippetAnalyze && ' Then click Analyze Snippet.'}
+                  </p>
+                )}
+
+                {snippetState.selectedSnippet && (
+                  <pre className="mb-3 max-h-44 overflow-auto rounded-lg border border-border/60 bg-background/80 px-2 py-2 font-mono text-[11px] leading-5 text-foreground/90 custom-scrollbar">
+                    {snippetState.selectedSnippet}
+                  </pre>
+                )}
+
+                {snippetState.status === 'loading' && (
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <Loader2 className="size-3.5 animate-spin" />
+                    Analyzing snippet impact...
+                  </div>
+                )}
+
+                {snippetState.status === 'failed' && snippetState.error && (
+                  <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-2 py-2 text-xs text-destructive">
+                    <AlertTriangle className="mt-0.5 size-3.5" />
+                    <span>{snippetState.error}</span>
+                  </div>
+                )}
+
+                {snippetState.status === 'succeeded' && snippetState.data && (
+                  <div className="space-y-3 text-xs">
+                    {snippetState.data.whatItDoes && (
+                      <div>
+                        <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+                          What It Does
+                        </p>
+                        <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
+                          {snippetState.data.whatItDoes}
+                        </p>
+                      </div>
+                    )}
+
+                    {snippetState.data.fileImpact && (
+                      <div>
+                        <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+                          File Impact
+                        </p>
+                        <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
+                          {snippetState.data.fileImpact}
+                        </p>
+                      </div>
+                    )}
+
+                    {snippetState.data.codebaseImpact && (
+                      <div>
+                        <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+                          Codebase Impact
+                        </p>
+                        <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
+                          {snippetState.data.codebaseImpact}
+                        </p>
+                      </div>
+                    )}
+
+                    <div className="rounded-lg border border-border/60 bg-background/70 px-2 py-2 text-[11px] text-muted-foreground">
+                      Confidence: {snippetState.data.confidence || 'unknown'}
+                      {typeof snippetState.data.confidenceScore === 'number' && (
+                        <span>
+                          {' '}
+                          ({snippetState.data.confidenceScore.toFixed(2)})
+                        </span>
+                      )}
+                      {snippetState.data.rerunTriggered && (
+                        <span> · Re-run triggered due to low confidence</span>
+                      )}
+                    </div>
+
+                    {Array.isArray(snippetState.data.directlyImpactedFiles) &&
+                      snippetState.data.directlyImpactedFiles.length > 0 && (
+                        <div>
+                          <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+                            Directly Impacted Files ({snippetState.data.directlyImpactedFiles.length})
+                          </p>
+                          <ul className="space-y-1">
+                            {snippetState.data.directlyImpactedFiles.map((file) => (
+                              <li key={`direct-${file}`} className="font-mono text-foreground/90 break-all">
+                                {file}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+
+                    {Array.isArray(snippetState.data.transitivelyImpactedFiles) &&
+                      snippetState.data.transitivelyImpactedFiles.length > 0 && (
+                        <div>
+                          <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+                            Transitively Impacted Files ({snippetState.data.transitivelyImpactedFiles.length})
+                          </p>
+                          <ul className="space-y-1">
+                            {snippetState.data.transitivelyImpactedFiles.map((file) => (
+                              <li key={`transitive-${file}`} className="font-mono text-foreground/90 break-all">
+                                {file}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                  </div>
+                )}
+              </div>
             </div>
           )}
           </div>
diff --git a/client/src/features/analyze/pages/AnalyzePage.jsx b/client/src/features/analyze/pages/AnalyzePage.jsx
index 6e8d35f..5490378 100644
--- a/client/src/features/analyze/pages/AnalyzePage.jsx
+++ b/client/src/features/analyze/pages/AnalyzePage.jsx
@@ -75,11 +75,17 @@ export default function AnalyzePage() {
   };
 
   const openFile = (entryPath) => {
-    const encodedDir = encodeURIComponent(routeDirectory);
     const nextSearch = new URLSearchParams();
     nextSearch.set('path', currentPath);
     nextSearch.set('file', entryPath);
-    navigate(`/analyze/${encodedDir}/file?${nextSearch.toString()}`);
+
+    if (routeDirectory) {
+      const encodedDir = encodeURIComponent(routeDirectory);
+      navigate(`/analyze/${encodedDir}/file?${nextSearch.toString()}`);
+      return;
+    }
+
+    navigate(`/analyze/file?${nextSearch.toString()}`);
   };
 
   const pathSegments = currentPath ? currentPath.split('/').filter(Boolean) : [];
@@ -149,6 +155,7 @@ export default function AnalyzePage() {
       )}
 
       {!routeDirectory && structure.status === 'succeeded' && (
+        <>
         <div className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
           {structure.directories.map((directory) => (
               <button
@@ -191,6 +198,33 @@ export default function AnalyzePage() {
             </button>
           ))}
         </div>
+
+        {structure.files.length > 0 && (
+          <div className="mt-7">
+            <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+              Root Files
+            </p>
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+              {structure.files.map((file) => (
+                <button
+                  key={file.path}
+                  type="button"
+                  onClick={() => openFile(file.path)}
+                  className="rounded-2xl shadow-neu-inset border-none bg-background/40 p-4"
+                >
+                  <div className="flex items-center gap-2 text-foreground">
+                    <FileCode2 className="size-4 text-primary" />
+                    <span className="truncate text-sm font-bold tracking-tight">{file.name}</span>
+                  </div>
+                  <p className="mt-1 text-[10px] uppercase font-bold tracking-widest text-muted-foreground/60">
+                    File | {formatSize(file.size)}
+                  </p>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+        </>
       )}
 
       {routeDirectory && (
diff --git a/client/src/features/analyze/services/analyzeService.js b/client/src/features/analyze/services/analyzeService.js
index 4eeb76b..80d98e3 100644
--- a/client/src/features/analyze/services/analyzeService.js
+++ b/client/src/features/analyze/services/analyzeService.js
@@ -38,6 +38,7 @@ export const analyzeService = {
       repository: data?.repository || null,
       truncated: Boolean(data?.truncated),
       directories: Array.isArray(data?.directories) ? data.directories : [],
+      files: Array.isArray(data?.files) ? data.files : [],
     };
   },
 
diff --git a/client/src/features/analyze/slices/analyzeSlice.js b/client/src/features/analyze/slices/analyzeSlice.js
index 405203e..661d01e 100644
--- a/client/src/features/analyze/slices/analyzeSlice.js
+++ b/client/src/features/analyze/slices/analyzeSlice.js
@@ -81,6 +81,7 @@ export const fetchRepositoryStructure = createAsyncThunk(
         },
         truncated: payload.truncated,
         directories: payload.directories,
+        files: payload.files,
       };
     } catch (err) {
       return rejectWithValue(
@@ -197,6 +198,7 @@ const analyzeSlice = createSlice({
       error: null,
       truncated: false,
       directories: [],
+      files: [],
       repository: null,
     },
     contents: {
@@ -232,6 +234,7 @@ const analyzeSlice = createSlice({
         state.structure.error = null;
         state.structure.truncated = action.payload.truncated;
         state.structure.directories = action.payload.directories;
+        state.structure.files = action.payload.files;
         state.structure.repository = action.payload.repository;
       })
       .addCase(fetchRepositoryStructure.rejected, (state, action) => {
diff --git a/server/.env.example b/server/.env.example
index 14e208a..2b9a57b 100644
--- a/server/.env.example
+++ b/server/.env.example
@@ -54,6 +54,15 @@ AI_MODEL=gpt-4o-mini
 # Optional base URL for OpenAI-compatible providers (OpenRouter, Groq, Together, etc.)
 # AI_BASE_URL=https://api.openai.com/v1
 
+# Confidence controls (agentic responses)
+# If model confidence is below threshold, the agent re-runs the LLM call.
+AI_CONFIDENCE_RETRY_THRESHOLD=0.6
+AI_CONFIDENCE_MAX_RERUNS=1
+
+# Optional snippet-agent-specific overrides
+# AI_SNIPPET_CONFIDENCE_RETRY_THRESHOLD=0.6
+# AI_SNIPPET_CONFIDENCE_MAX_RERUNS=1
+
 # Optional provider-specific fallbacks if AI_API_KEY is not set
 # ANTHROPIC_API_KEY=sk-ant-...
 # GEMINI_API_KEY=AIza...
diff --git a/server/package.json b/server/package.json
index 60825b9..c590edf 100644
--- a/server/package.json
+++ b/server/package.json
@@ -11,7 +11,7 @@
     "dev": "nodemon index.js",
     "migrate": "psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/001_initial.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/002_function_nodes.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/003_share_tokens.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/004_analysis_jobs_metadata.sql",
     "db:migrate": "npm run migrate",
-    "test": "node --test test/ai.queries.test.js test/ai.suggest-refactor.test.js test/graph.heatmap.test.js test/github.webhook.test.js test/parser.multilang.test.js test/pr-comment.test.js",
+    "test": "node --test test/ai.queries.test.js test/ai.snippet-impact.test.js test/ai.suggest-refactor.test.js test/graph.heatmap.test.js test/github.webhook.test.js test/parser.multilang.test.js test/pr-comment.test.js test/snippet.analyzer.confidence.test.js",
     "test:ai-queries": "node --test test/ai.queries.test.js",
     "test:unit": "vitest run --configLoader native --pool threads",
     "test:coverage": "vitest run --coverage --configLoader native --pool threads"
diff --git a/server/src/agents/analysis/SnippetAnalyzerAgent.js b/server/src/agents/analysis/SnippetAnalyzerAgent.js
new file mode 100644
index 0000000..392f481
--- /dev/null
+++ b/server/src/agents/analysis/SnippetAnalyzerAgent.js
@@ -0,0 +1,489 @@
+import { BaseAgent } from '../core/BaseAgent.js';
+import { createChatClient } from '../../services/ai/llmProvider.js';
+import { AnalysisAgent } from './AnalysisAgent.js';
+
+const DEFAULT_MODEL = process.env.AI_MODEL || process.env.OPENAI_MODEL || 'gpt-4o-mini';
+const MAX_SNIPPET_CHARS = 4_000;
+const MAX_CONTEXT_FILES = 14;
+const DEFAULT_CONFIDENCE_RETRY_THRESHOLD = Number(
+  process.env.AI_SNIPPET_CONFIDENCE_RETRY_THRESHOLD || process.env.AI_CONFIDENCE_RETRY_THRESHOLD || 0.6,
+);
+const DEFAULT_CONFIDENCE_MAX_RERUNS = Number.parseInt(
+  process.env.AI_SNIPPET_CONFIDENCE_MAX_RERUNS || process.env.AI_CONFIDENCE_MAX_RERUNS || 1,
+  10,
+);
+
+function normalizePath(value) {
+  return String(value || '').trim();
+}
+
+function normalizeSnippet(value) {
+  return String(value || '')
+    .replace(/\r\n/g, '\n')
+    .trim()
+    .slice(0, MAX_SNIPPET_CHARS);
+}
+
+function asPositiveInteger(value) {
+  const numeric = Number.parseInt(value, 10);
+  return Number.isInteger(numeric) && numeric > 0 ? numeric : null;
+}
+
+function clamp01(value) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return 0;
+  return Math.max(0, Math.min(1, numeric));
+}
+
+function confidenceLabel(score) {
+  if (score >= 0.85) return 'high';
+  if (score >= 0.65) return 'medium';
+  return 'low';
+}
+
+function confidenceScoreFromLabel(label) {
+  const normalized = String(label || '').trim().toLowerCase();
+  if (normalized === 'high') return 0.9;
+  if (normalized === 'medium') return 0.7;
+  return 0.5;
+}
+
+function parseConfidenceScore(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value > 1 ? value / 100 : value;
+  }
+
+  const normalized = String(value || '').trim().toLowerCase();
+  if (!normalized) return null;
+
+  if (['high', 'medium', 'low'].includes(normalized)) {
+    return confidenceScoreFromLabel(normalized);
+  }
+
+  if (normalized.endsWith('%')) {
+    const pct = Number.parseFloat(normalized.slice(0, -1));
+    if (Number.isFinite(pct)) {
+      return pct / 100;
+    }
+  }
+
+  const numeric = Number.parseFloat(normalized);
+  if (Number.isFinite(numeric)) {
+    return numeric > 1 ? numeric / 100 : numeric;
+  }
+
+  return null;
+}
+
+function toUniquePaths(paths) {
+  if (!Array.isArray(paths)) return [];
+
+  const seen = new Set();
+  const output = [];
+
+  for (const path of paths) {
+    const normalized = normalizePath(path);
+    if (!normalized || seen.has(normalized)) continue;
+    seen.add(normalized);
+    output.push(normalized);
+  }
+
+  return output;
+}
+
+function buildReverseAdjacency(graph) {
+  const analysisAgent = new AnalysisAgent();
+  return analysisAgent.buildReverseAdjacency(graph);
+}
+
+function getImpactPaths(filePath, reverseAdjacency) {
+  const analysisAgent = new AnalysisAgent();
+  return analysisAgent.getImpactedFiles(filePath, reverseAdjacency);
+}
+
+function buildNodeContext(node) {
+  const declarations = Array.isArray(node?.declarations)
+    ? node.declarations
+        .map((entry) => entry?.name)
+        .filter(Boolean)
+        .slice(0, 10)
+        .join(', ')
+    : 'none';
+
+  return {
+    filePath: node?.file_path || null,
+    type: node?.file_type || 'module',
+    summary: node?.summary || 'No summary available',
+    inDegree: Number(node?.metrics?.inDegree || 0),
+    outDegree: Number(node?.metrics?.outDegree || 0),
+    loc: Number(node?.metrics?.loc || 0),
+    declarations,
+  };
+}
+
+function buildPrompt({ filePath, snippet, lineStart, lineEnd, contextFiles, directImpactedFiles, indirectImpactedFiles }) {
+  const lineRange = lineStart && lineEnd ? `${lineStart}-${lineEnd}` : 'unknown';
+
+  return [
+    'You are SnippetAnalyzerAgent in an agentic code-analysis system.',
+    'Your task: explain what this snippet does and its architectural impact based only on supplied repository graph context.',
+    'Do not hallucinate hidden files or behavior. If uncertain, state assumptions briefly.',
+    '',
+    `File: ${filePath}`,
+    `Selected lines: ${lineRange}`,
+    '',
+    'Snippet:',
+    '```',
+    snippet,
+    '```',
+    '',
+    `Direct impacted files (dependents): ${directImpactedFiles.join(', ') || 'none'}`,
+    `Indirect impacted files (transitive): ${indirectImpactedFiles.join(', ') || 'none'}`,
+    '',
+    'Related file context:',
+    ...contextFiles.map(
+      (entry, index) =>
+        `${index + 1}. ${entry.filePath} | type=${entry.type} | inDegree=${entry.inDegree} | outDegree=${entry.outDegree} | loc=${entry.loc} | declarations=${entry.declarations} | summary=${entry.summary}`,
+    ),
+    '',
+    'Return strictly valid JSON with this shape:',
+    '{',
+    '  "snippetPurpose": "concise explanation of what the snippet does",',
+    '  "fileImpact": "impact inside this file",',
+    '  "codebaseImpact": "impact on related files and overall architecture",',
+    '  "directImpactedFiles": ["paths that directly depend on this file/snippet"],',
+    '  "indirectImpactedFiles": ["paths with transitive impact"],',
+    '  "relatedFileFindings": [',
+    '    { "filePath": "path", "impact": "how it is affected", "risk": "low|medium|high" }',
+    '  ],',
+    '  "confidence": "high|medium|low",',
+    '  "confidenceScore": 0.0',
+    '}',
+    'confidenceScore must be a number between 0 and 1 and confidence should align with the score.',
+  ].join('\n');
+}
+
+function buildRetryPrompt({ previousResponse, threshold }) {
+  return [
+    'Your previous output had confidence below the required threshold.',
+    `Re-evaluate and respond again with stronger precision. Required confidenceScore >= ${threshold.toFixed(2)}.`,
+    'Do not invent facts. Keep all claims grounded in the provided graph context.',
+    '',
+    'Previous response JSON:',
+    String(previousResponse || '{}'),
+  ].join('\n');
+}
+
+function parseModelResponse(rawText, fallback) {
+  try {
+    const parsed = JSON.parse(String(rawText || '{}'));
+
+    const explicitScore = parseConfidenceScore(parsed?.confidenceScore);
+    const labelCandidate = String(parsed?.confidence || '').toLowerCase();
+    const label = ['high', 'medium', 'low'].includes(labelCandidate)
+      ? labelCandidate
+      : confidenceLabel(explicitScore ?? fallback.confidenceScore);
+    const score = clamp01(explicitScore ?? parseConfidenceScore(parsed?.confidence) ?? confidenceScoreFromLabel(label));
+
+    return {
+      snippetPurpose: String(parsed?.snippetPurpose || fallback.snippetPurpose).trim(),
+      fileImpact: String(parsed?.fileImpact || fallback.fileImpact).trim(),
+      codebaseImpact: String(parsed?.codebaseImpact || fallback.codebaseImpact).trim(),
+      directImpactedFiles: toUniquePaths(
+        Array.isArray(parsed?.directImpactedFiles) ? parsed.directImpactedFiles : fallback.directImpactedFiles,
+      ),
+      indirectImpactedFiles: toUniquePaths(
+        Array.isArray(parsed?.indirectImpactedFiles)
+          ? parsed.indirectImpactedFiles
+          : fallback.indirectImpactedFiles,
+      ),
+      relatedFileFindings: Array.isArray(parsed?.relatedFileFindings)
+        ? parsed.relatedFileFindings
+            .map((item) => ({
+              filePath: normalizePath(item?.filePath),
+              impact: String(item?.impact || '').trim(),
+              risk: ['low', 'medium', 'high'].includes(String(item?.risk || '').toLowerCase())
+                ? String(item.risk).toLowerCase()
+                : 'medium',
+            }))
+            .filter((item) => item.filePath && item.impact)
+            .slice(0, MAX_CONTEXT_FILES)
+        : [],
+      confidence: label,
+      confidenceScore: score,
+    };
+  } catch {
+    return fallback;
+  }
+}
+
+export class SnippetAnalyzerAgent extends BaseAgent {
+  agentId = 'snippet-analyzer-agent';
+  maxRetries = 1;
+  timeoutMs = 90_000;
+
+  constructor({ db, llmClient } = {}) {
+    super();
+    this.db = db;
+    this.llmClient = llmClient || createChatClient();
+    this.model = DEFAULT_MODEL;
+    this.confidenceRetryThreshold = clamp01(DEFAULT_CONFIDENCE_RETRY_THRESHOLD);
+    this.confidenceMaxReruns = Math.max(0, Number.isInteger(DEFAULT_CONFIDENCE_MAX_RERUNS) ? DEFAULT_CONFIDENCE_MAX_RERUNS : 1);
+  }
+
+  async process(input = {}, context = {}) {
+    const start = Date.now();
+    const errors = [];
+    const warnings = [];
+
+    const jobId = normalizePath(input.jobId || context.jobId);
+    const filePath = normalizePath(input.filePath);
+    const snippet = normalizeSnippet(input.snippet);
+    const lineStart = asPositiveInteger(input.lineStart);
+    const lineEnd = asPositiveInteger(input.lineEnd);
+
+    if (!jobId || !filePath || !snippet) {
+      return this.buildResult({
+        jobId: context?.jobId || jobId,
+        status: 'failed',
+        confidence: 0,
+        data: {},
+        errors: [{ code: 400, message: 'SnippetAnalyzerAgent requires jobId, filePath, and snippet.' }],
+        warnings,
+        metrics: {},
+        processingTimeMs: Date.now() - start,
+      });
+    }
+
+    if (!this.llmClient.isConfigured()) {
+      return this.buildResult({
+        jobId,
+        status: 'failed',
+        confidence: 0,
+        data: {},
+        errors: [{ code: 503, message: 'AI provider is not configured.' }],
+        warnings,
+        metrics: {},
+        processingTimeMs: Date.now() - start,
+      });
+    }
+
+    try {
+      const [nodesResult, edgesResult] = await Promise.all([
+        this.db.query(
+          `
+            SELECT file_path, file_type, declarations, metrics, summary
+            FROM graph_nodes
+            WHERE job_id = $1
+          `,
+          [jobId],
+        ),
+        this.db.query(
+          `
+            SELECT source_path, target_path
+            FROM graph_edges
+            WHERE job_id = $1
+          `,
+          [jobId],
+        ),
+      ]);
+
+      if (nodesResult.rowCount === 0) {
+        return this.buildResult({
+          jobId,
+          status: 'failed',
+          confidence: 0,
+          data: {},
+          errors: [{ code: 404, message: 'No graph data found for this job.' }],
+          warnings,
+          metrics: {},
+          processingTimeMs: Date.now() - start,
+        });
+      }
+
+      const nodesByPath = new Map();
+      for (const row of nodesResult.rows) {
+        nodesByPath.set(row.file_path, row);
+      }
+
+      if (!nodesByPath.has(filePath)) {
+        return this.buildResult({
+          jobId,
+          status: 'failed',
+          confidence: 0,
+          data: {},
+          errors: [{ code: 404, message: 'filePath not found in this job graph.' }],
+          warnings,
+          metrics: {},
+          processingTimeMs: Date.now() - start,
+        });
+      }
+
+      const depsBySource = new Map();
+      const graph = {};
+
+      for (const row of edgesResult.rows) {
+        if (!depsBySource.has(row.source_path)) depsBySource.set(row.source_path, []);
+        depsBySource.get(row.source_path).push(row.target_path);
+      }
+
+      for (const row of nodesResult.rows) {
+        graph[row.file_path] = {
+          deps: depsBySource.get(row.file_path) || [],
+          type: row.file_type,
+          declarations: row.declarations || [],
+          metrics: row.metrics || {},
+          summary: row.summary || null,
+        };
+      }
+
+      const reverseAdjacency = buildReverseAdjacency(graph);
+      const allImpacted = getImpactPaths(filePath, reverseAdjacency);
+      const directImpactedFiles = Array.isArray(reverseAdjacency[filePath])
+        ? toUniquePaths(reverseAdjacency[filePath])
+        : [];
+      const indirectImpactedFiles = toUniquePaths(
+        allImpacted.filter((impactedPath) => !directImpactedFiles.includes(impactedPath)),
+      );
+
+      const sourceDependencies = Array.isArray(graph[filePath]?.deps) ? graph[filePath].deps : [];
+      const neighborhood = toUniquePaths([
+        filePath,
+        ...sourceDependencies,
+        ...directImpactedFiles,
+        ...indirectImpactedFiles,
+      ]).slice(0, MAX_CONTEXT_FILES);
+
+      const contextFiles = neighborhood
+        .map((path) => nodesByPath.get(path))
+        .filter(Boolean)
+        .map(buildNodeContext);
+
+      const prompt = buildPrompt({
+        filePath,
+        snippet,
+        lineStart,
+        lineEnd,
+        contextFiles,
+        directImpactedFiles,
+        indirectImpactedFiles,
+      });
+
+      const fallback = {
+        snippetPurpose: 'Unable to confidently summarize this snippet from available graph context.',
+        fileImpact: 'Impact inside this file could not be fully determined from metadata.',
+        codebaseImpact: 'Potential impact exists on dependent files listed in direct/indirect sets.',
+        directImpactedFiles,
+        indirectImpactedFiles,
+        relatedFileFindings: contextFiles
+          .filter((entry) => entry.filePath !== filePath)
+          .slice(0, 6)
+          .map((entry) => ({
+            filePath: entry.filePath,
+            impact: `Related to ${filePath} through dependency graph adjacency.`,
+            risk: 'medium',
+          })),
+        confidence: 'medium',
+        confidenceScore: 0.7,
+      };
+
+      let attemptIndex = 0;
+      let totalCompletionTokens = 0;
+      let rerunTriggered = false;
+      let parsed = fallback;
+      let lastRawContent = '{}';
+
+      while (attemptIndex <= this.confidenceMaxReruns) {
+        const messages = [{ role: 'user', content: prompt }];
+
+        if (attemptIndex > 0) {
+          messages.push({
+            role: 'user',
+            content: buildRetryPrompt({
+              previousResponse: lastRawContent,
+              threshold: this.confidenceRetryThreshold,
+            }),
+          });
+        }
+
+        const completion = await this.llmClient.createChatCompletion({
+          model: this.model,
+          temperature: attemptIndex > 0 ? 0 : 0.1,
+          maxTokens: 700,
+          responseFormat: { type: 'json_object' },
+          messages,
+        });
+
+        const completionTokens = Number(completion?.usage?.completion_tokens || completion?.usage?.output_tokens || 0);
+        totalCompletionTokens += completionTokens;
+        lastRawContent = completion?.content || '{}';
+
+        parsed = parseModelResponse(lastRawContent, fallback);
+        if (parsed.confidenceScore >= this.confidenceRetryThreshold) {
+          break;
+        }
+
+        if (attemptIndex < this.confidenceMaxReruns) {
+          rerunTriggered = true;
+          warnings.push({
+            code: 299,
+            message: `Low-confidence snippet analysis (${parsed.confidenceScore.toFixed(2)}) triggered re-run.`,
+          });
+        }
+
+        attemptIndex += 1;
+      }
+
+      const numericConfidence = clamp01(parsed.confidenceScore);
+      const confidenceBucket = confidenceLabel(numericConfidence);
+
+      return this.buildResult({
+        jobId,
+        status: 'success',
+        confidence: numericConfidence,
+        data: {
+          filePath,
+          snippet,
+          lineStart,
+          lineEnd,
+          snippetPurpose: parsed.snippetPurpose,
+          fileImpact: parsed.fileImpact,
+          codebaseImpact: parsed.codebaseImpact,
+          directImpactedFiles: parsed.directImpactedFiles,
+          indirectImpactedFiles: parsed.indirectImpactedFiles,
+          relatedFileFindings: parsed.relatedFileFindings,
+          relatedFilesScanned: contextFiles.map((entry) => entry.filePath),
+          confidence: confidenceBucket,
+          confidenceScore: numericConfidence,
+          rerunTriggered,
+          attemptsUsed: attemptIndex + 1,
+          confidenceThreshold: this.confidenceRetryThreshold,
+        },
+        errors,
+        warnings,
+        metrics: {
+          snippetChars: snippet.length,
+          contextFileCount: contextFiles.length,
+          directImpactedCount: parsed.directImpactedFiles.length,
+          indirectImpactedCount: parsed.indirectImpactedFiles.length,
+          completionTokens: totalCompletionTokens,
+          attemptsUsed: attemptIndex + 1,
+        },
+        processingTimeMs: Date.now() - start,
+      });
+    } catch (error) {
+      errors.push({ code: error?.statusCode || error?.status || 500, message: error.message });
+
+      return this.buildResult({
+        jobId,
+        status: 'failed',
+        confidence: 0,
+        data: {},
+        errors,
+        warnings,
+        metrics: {},
+        processingTimeMs: Date.now() - start,
+      });
+    }
+  }
+}
\ No newline at end of file
diff --git a/server/src/analyze/controllers/analyze.controller.js b/server/src/analyze/controllers/analyze.controller.js
index 1ab35bb..e470dd8 100644
--- a/server/src/analyze/controllers/analyze.controller.js
+++ b/server/src/analyze/controllers/analyze.controller.js
@@ -564,7 +564,8 @@ export async function listRepositoryStructureController(req, res, next) {
       fetchRepoTree({ owner, repo, ref: branch, token }),
     ]);
 
-    const topLevel = new Map();
+    const topLevelDirectories = new Map();
+    const topLevelFiles = new Map();
 
     for (const entry of repoTree.tree) {
       const pathValue = String(entry?.path || '').trim();
@@ -573,19 +574,29 @@ export async function listRepositoryStructureController(req, res, next) {
       const segments = pathValue.split('/').filter(Boolean);
       if (!segments.length) continue;
 
-      const topDir = segments[0];
-      const isDirectoryPath = entry.type === 'tree';
+      const topLevelName = segments[0];
 
-      if (!topLevel.has(topDir)) {
-        topLevel.set(topDir, {
-          name: topDir,
-          path: topDir,
+      // Top-level blobs are root files and should not be grouped as directories.
+      if (segments.length === 1 && entry.type === 'blob') {
+        topLevelFiles.set(topLevelName, {
+          name: topLevelName,
+          path: topLevelName,
+          size: Number.isFinite(entry?.size) ? entry.size : 0,
+          type: 'file',
+        });
+        continue;
+      }
+
+      if (!topLevelDirectories.has(topLevelName)) {
+        topLevelDirectories.set(topLevelName, {
+          name: topLevelName,
+          path: topLevelName,
           fileCount: 0,
           subdirectories: new Set(),
         });
       }
 
-      const current = topLevel.get(topDir);
+      const current = topLevelDirectories.get(topLevelName);
 
       if (entry.type === 'blob') {
         current.fileCount += 1;
@@ -593,12 +604,10 @@ export async function listRepositoryStructureController(req, res, next) {
 
       if (segments.length > 1) {
         current.subdirectories.add(segments[1]);
-      } else if (segments.length === 1 && isDirectoryPath) {
-        current.subdirectories = current.subdirectories || new Set();
       }
     }
 
-    const directories = Array.from(topLevel.values())
+    const directories = Array.from(topLevelDirectories.values())
       .map((item) => ({
         name: item.name,
         path: item.path,
@@ -609,6 +618,9 @@ export async function listRepositoryStructureController(req, res, next) {
       }))
       .sort((a, b) => a.name.localeCompare(b.name));
 
+    const files = Array.from(topLevelFiles.values())
+      .sort((a, b) => a.name.localeCompare(b.name));
+
     return res.status(200).json({
       repository: {
         owner: repoDetails.owner,
@@ -620,6 +632,7 @@ export async function listRepositoryStructureController(req, res, next) {
       },
       truncated: repoTree.truncated,
       directories,
+      files,
     });
   } catch (err) {
     return next(err);
diff --git a/server/src/api/ai/routes/ai.routes.js b/server/src/api/ai/routes/ai.routes.js
index 4d2e08f..f30e47a 100644
--- a/server/src/api/ai/routes/ai.routes.js
+++ b/server/src/api/ai/routes/ai.routes.js
@@ -3,6 +3,7 @@ import jwt from 'jsonwebtoken';
 import rateLimit from 'express-rate-limit';
 import { QueryAgent } from '../../../agents/query/QueryAgent.js';
 import { AnalysisAgent } from '../../../agents/analysis/AnalysisAgent.js';
+import { SnippetAnalyzerAgent } from '../../../agents/analysis/SnippetAnalyzerAgent.js';
 import { pgPool, redisClient } from '../../../infrastructure/connections.js';
 import { requirePlan } from '../../../middleware/planGuard.middleware.js';
 import { createChatClient } from '../../../services/ai/llmProvider.js';
@@ -489,4 +490,66 @@ router.post('/impact', async (req, res, next) => {
   }
 });
 
+router.post('/snippet-impact', async (req, res, next) => {
+  const authUser = getAuthUser(req);
+  if (!authUser?.id) {
+    return res.status(401).json({ error: 'Authentication required.' });
+  }
+
+  const jobId = String(req.body?.jobId || '').trim();
+  const filePath = String(req.body?.filePath || '').trim();
+  const snippet = String(req.body?.snippet || '').trim();
+  const lineStart = Number.parseInt(req.body?.lineStart, 10);
+  const lineEnd = Number.parseInt(req.body?.lineEnd, 10);
+
+  if (!jobId || !filePath || !snippet) {
+    return res.status(400).json({ error: 'jobId, filePath, and snippet are required.' });
+  }
+
+  try {
+    const userId = await resolveDatabaseUserId(authUser);
+    if (!userId) {
+      return res.status(500).json({ error: 'Failed to resolve authenticated user.' });
+    }
+
+    const ownership = await pgPool.query(
+      `
+        SELECT 1
+        FROM analysis_jobs
+        WHERE id = $1 AND user_id = $2
+        LIMIT 1
+      `,
+      [jobId, userId],
+    );
+
+    if (ownership.rowCount === 0) {
+      return res.status(404).json({ error: 'Analysis job not found for this user.' });
+    }
+
+    const agent = new SnippetAnalyzerAgent({ db: pgPool });
+    const result = await agent.process(
+      {
+        jobId,
+        filePath,
+        snippet,
+        lineStart,
+        lineEnd,
+      },
+      { jobId },
+    );
+
+    if (result.status === 'failed') {
+      const statusCode = Number(result.errors?.[0]?.code) || 400;
+      return res.status(statusCode).json({
+        error: result.errors?.[0]?.message || 'Unable to analyze snippet impact.',
+        details: result.errors || [],
+      });
+    }
+
+    return res.status(200).json(result.data);
+  } catch (error) {
+    return next(error);
+  }
+});
+
 export default router;
diff --git a/server/test/ai.snippet-impact.test.js b/server/test/ai.snippet-impact.test.js
new file mode 100644
index 0000000..091587d
--- /dev/null
+++ b/server/test/ai.snippet-impact.test.js
@@ -0,0 +1,196 @@
+import { after, before, test } from 'node:test';
+import assert from 'node:assert/strict';
+import jwt from 'jsonwebtoken';
+
+process.env.JWT_SECRET = process.env.JWT_SECRET || 'test-secret';
+process.env.DATABASE_URL =
+  process.env.DATABASE_URL || 'postgres://postgres:postgres@localhost:5433/codegraph';
+process.env.REDIS_URL = process.env.REDIS_URL || 'redis://localhost:6379';
+delete process.env.OPENAI_API_KEY;
+delete process.env.AI_API_KEY;
+
+let app;
+let pgPool;
+let redisClient;
+let server;
+let baseUrl;
+
+async function settleWithTimeout(promise, timeoutMs = 3000) {
+  let timer;
+
+  try {
+    await Promise.race([
+      promise.catch(() => undefined),
+      new Promise((resolve) => {
+        timer = setTimeout(resolve, timeoutMs);
+        timer.unref?.();
+      }),
+    ]);
+  } finally {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }
+}
+
+before(async () => {
+  ({ default: app } = await import('../app.js'));
+  ({ pgPool, redisClient } = await import('../src/infrastructure/connections.js'));
+
+  await new Promise((resolve) => {
+    server = app.listen(0, resolve);
+  });
+
+  const address = server.address();
+  baseUrl = `http://127.0.0.1:${address.port}`;
+});
+
+after(async () => {
+  await settleWithTimeout(
+    new Promise((resolve, reject) => {
+      server.close((error) => {
+        if (error) return reject(error);
+        return resolve();
+      });
+    }),
+  );
+
+  await settleWithTimeout(redisClient.quit());
+  await settleWithTimeout(pgPool.end());
+});
+
+test('POST /api/ai/snippet-impact requires authentication', async () => {
+  const response = await fetch(`${baseUrl}/api/ai/snippet-impact`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      jobId: 'job-1',
+      filePath: 'src/file.js',
+      snippet: 'const x = 1;',
+    }),
+  });
+
+  assert.equal(response.status, 401);
+  const payload = await response.json();
+  assert.equal(payload.error, 'Authentication required.');
+});
+
+test('POST /api/ai/snippet-impact validates required fields', async () => {
+  const userId = '63a501be-d0e4-4570-a32d-7d8c61b65f31';
+  const token = jwt.sign({ id: userId, username: 'snippet-user' }, process.env.JWT_SECRET, {
+    expiresIn: '1h',
+  });
+
+  await pgPool.query(
+    `
+      INSERT INTO users (id, username, email)
+      VALUES ($1, $2, $3)
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [userId, 'snippet-user', 'snippet@example.com'],
+  );
+
+  try {
+    const response = await fetch(`${baseUrl}/api/ai/snippet-impact`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        jobId: 'job-1',
+        filePath: 'src/file.js',
+      }),
+    });
+
+    assert.equal(response.status, 400);
+    const payload = await response.json();
+    assert.equal(payload.error, 'jobId, filePath, and snippet are required.');
+  } finally {
+    await pgPool.query('DELETE FROM users WHERE id = $1', [userId]);
+  }
+});
+
+test('POST /api/ai/snippet-impact returns 503 when AI provider is not configured', async () => {
+  const userId = '9db9aabd-6818-445a-a361-6203c2f39c85';
+  const repositoryId = 'dc9e2364-7a26-4f3f-9496-9f9070ec748f';
+  const jobId = '38759f8c-e63e-49c4-ab95-c9fce4f31550';
+  const token = jwt.sign({ id: userId, username: 'snippet-user-2' }, process.env.JWT_SECRET, {
+    expiresIn: '1h',
+  });
+
+  await pgPool.query(
+    `
+      INSERT INTO users (id, username, email)
+      VALUES ($1, $2, $3)
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [userId, 'snippet-user-2', 'snippet2@example.com'],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO repositories (id, owner_id, source, full_name)
+      VALUES ($1, $2, 'local', 'snippet/repo')
+      ON CONFLICT (owner_id, full_name) DO UPDATE
+      SET full_name = EXCLUDED.full_name
+    `,
+    [repositoryId, userId],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO analysis_jobs (id, repository_id, user_id, status)
+      VALUES ($1, $2, $3, 'completed')
+      ON CONFLICT (id) DO NOTHING
+    `,
+    [jobId, repositoryId, userId],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO graph_nodes (job_id, file_path, file_type, declarations, metrics, summary)
+      VALUES
+        ($1, 'src/file-a.js', 'module', '[{"name":"runA"}]'::jsonb, '{"loc": 20, "inDegree": 1, "outDegree": 1}'::jsonb, 'Main unit'),
+        ($1, 'src/file-b.js', 'module', '[{"name":"runB"}]'::jsonb, '{"loc": 42, "inDegree": 0, "outDegree": 0}'::jsonb, 'Dependent unit')
+      ON CONFLICT (job_id, file_path) DO NOTHING
+    `,
+    [jobId],
+  );
+
+  await pgPool.query(
+    `
+      INSERT INTO graph_edges (job_id, source_path, target_path, edge_type)
+      VALUES ($1, 'src/file-b.js', 'src/file-a.js', 'import')
+      ON CONFLICT (job_id, source_path, target_path) DO NOTHING
+    `,
+    [jobId],
+  );
+
+  try {
+    const response = await fetch(`${baseUrl}/api/ai/snippet-impact`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        jobId,
+        filePath: 'src/file-a.js',
+        snippet: 'export function runA() { return 1; }',
+        lineStart: 1,
+        lineEnd: 1,
+      }),
+    });
+
+    assert.equal(response.status, 503);
+    const payload = await response.json();
+    assert.equal(payload.error, 'AI provider is not configured.');
+  } finally {
+    await pgPool.query('DELETE FROM graph_edges WHERE job_id = $1', [jobId]);
+    await pgPool.query('DELETE FROM graph_nodes WHERE job_id = $1', [jobId]);
+    await pgPool.query('DELETE FROM analysis_jobs WHERE id = $1', [jobId]);
+    await pgPool.query('DELETE FROM repositories WHERE id = $1', [repositoryId]);
+    await pgPool.query('DELETE FROM users WHERE id = $1', [userId]);
+  }
+});
\ No newline at end of file
diff --git a/server/test/snippet.analyzer.confidence.test.js b/server/test/snippet.analyzer.confidence.test.js
new file mode 100644
index 0000000..85c9380
--- /dev/null
+++ b/server/test/snippet.analyzer.confidence.test.js
@@ -0,0 +1,147 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { SnippetAnalyzerAgent } from '../src/agents/analysis/SnippetAnalyzerAgent.js';
+
+function createMockDb() {
+  return {
+    async query(sql) {
+      if (String(sql).includes('FROM graph_nodes')) {
+        return {
+          rowCount: 3,
+          rows: [
+            {
+              file_path: 'src/a.js',
+              file_type: 'module',
+              declarations: [{ name: 'runA' }],
+              metrics: { inDegree: 1, outDegree: 1, loc: 10 },
+              summary: 'Core entry file',
+            },
+            {
+              file_path: 'src/b.js',
+              file_type: 'module',
+              declarations: [{ name: 'runB' }],
+              metrics: { inDegree: 0, outDegree: 1, loc: 14 },
+              summary: 'Depends on a',
+            },
+            {
+              file_path: 'src/c.js',
+              file_type: 'module',
+              declarations: [{ name: 'runC' }],
+              metrics: { inDegree: 1, outDegree: 0, loc: 20 },
+              summary: 'Transitively impacted',
+            },
+          ],
+        };
+      }
+
+      if (String(sql).includes('FROM graph_edges')) {
+        return {
+          rowCount: 2,
+          rows: [
+            { source_path: 'src/b.js', target_path: 'src/a.js' },
+            { source_path: 'src/c.js', target_path: 'src/b.js' },
+          ],
+        };
+      }
+
+      return { rowCount: 0, rows: [] };
+    },
+  };
+}
+
+test('SnippetAnalyzerAgent re-runs when confidence is below threshold', async () => {
+  let callCount = 0;
+
+  const llmClient = {
+    isConfigured: () => true,
+    createChatCompletion: async () => {
+      callCount += 1;
+
+      if (callCount === 1) {
+        return {
+          content: JSON.stringify({
+            snippetPurpose: 'Low confidence first pass.',
+            fileImpact: 'Uncertain file impact.',
+            codebaseImpact: 'Potentially broad impact.',
+            directImpactedFiles: ['src/b.js'],
+            indirectImpactedFiles: ['src/c.js'],
+            relatedFileFindings: [{ filePath: 'src/b.js', impact: 'Depends on a', risk: 'medium' }],
+            confidence: 'low',
+            confidenceScore: 0.45,
+          }),
+          usage: { completion_tokens: 120 },
+        };
+      }
+
+      return {
+        content: JSON.stringify({
+          snippetPurpose: 'Exports a function used by downstream modules.',
+          fileImpact: 'Affects exported behavior in src/a.js.',
+          codebaseImpact: 'Changes propagate to direct and transitive dependents.',
+          directImpactedFiles: ['src/b.js'],
+          indirectImpactedFiles: ['src/c.js'],
+          relatedFileFindings: [{ filePath: 'src/c.js', impact: 'Reads output from src/b.js', risk: 'medium' }],
+          confidence: 'high',
+          confidenceScore: 0.92,
+        }),
+        usage: { completion_tokens: 160 },
+      };
+    },
+  };
+
+  const agent = new SnippetAnalyzerAgent({ db: createMockDb(), llmClient });
+
+  const result = await agent.process({
+    jobId: 'job-1',
+    filePath: 'src/a.js',
+    snippet: 'export function runA() { return 1; }',
+    lineStart: 1,
+    lineEnd: 1,
+  });
+
+  assert.equal(result.status, 'success');
+  assert.equal(callCount, 2);
+  assert.equal(result.data.rerunTriggered, true);
+  assert.equal(result.data.attemptsUsed, 2);
+  assert.equal(result.data.confidence, 'high');
+  assert.equal(result.data.confidenceScore, 0.92);
+  assert.equal(result.metrics.attemptsUsed, 2);
+  assert.equal(result.metrics.completionTokens, 280);
+});
+
+test('SnippetAnalyzerAgent accepts numeric-string confidence and skips rerun when >= threshold', async () => {
+  let callCount = 0;
+
+  const llmClient = {
+    isConfigured: () => true,
+    createChatCompletion: async () => {
+      callCount += 1;
+      return {
+        content: JSON.stringify({
+          snippetPurpose: 'Initializes and returns stable value.',
+          fileImpact: 'Local helper behavior only.',
+          codebaseImpact: 'Limited to direct consumers.',
+          directImpactedFiles: ['src/b.js'],
+          indirectImpactedFiles: [],
+          relatedFileFindings: [{ filePath: 'src/b.js', impact: 'Imports helper output', risk: 'low' }],
+          confidenceScore: '0.82',
+        }),
+        usage: { output_tokens: 90 },
+      };
+    },
+  };
+
+  const agent = new SnippetAnalyzerAgent({ db: createMockDb(), llmClient });
+  const result = await agent.process({
+    jobId: 'job-1',
+    filePath: 'src/a.js',
+    snippet: 'export function runA() { return 1; }',
+  });
+
+  assert.equal(result.status, 'success');
+  assert.equal(callCount, 1);
+  assert.equal(result.data.rerunTriggered, false);
+  assert.equal(result.data.attemptsUsed, 1);
+  assert.equal(result.data.confidence, 'medium');
+  assert.equal(result.data.confidenceScore, 0.82);
+});

From 77cea1e34edc92877db4386879d6e6e00519c321 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 22:22:48 +0530
Subject: [PATCH 12/19] refactor: improved analysis UX

---
 .../analyze/pages/AnalyzeFilePage.jsx         | 727 ++++++++++++++----
 1 file changed, 566 insertions(+), 161 deletions(-)

diff --git a/client/src/features/analyze/pages/AnalyzeFilePage.jsx b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
index a53bda3..f917e28 100644
--- a/client/src/features/analyze/pages/AnalyzeFilePage.jsx
+++ b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
@@ -21,6 +21,7 @@ import {
   ExternalLink,
   GitBranch,
   Loader2,
+  Pin,
   Save,
   X,
 } from 'lucide-react';
@@ -55,6 +56,43 @@ function detectPrismLanguage(filePath = '') {
   return 'clike';
 }
 
+const SNIPPET_MIN_CHARS = 10;
+const SNIPPET_MAX_AUTO_CHARS = 1200;
+
+function isMeaningfulSnippet(snippet = '') {
+  const normalized = String(snippet || '').trim();
+  if (!normalized) return false;
+  if (normalized.length < SNIPPET_MIN_CHARS) return false;
+
+  const withoutComments = normalized
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/(^|\n)\s*\/\/.*$/gm, '')
+    .trim();
+
+  if (!withoutComments) return false;
+  if (/^[{}()[\];,\s]+$/.test(withoutComments)) return false;
+
+  return true;
+}
+
+function normalizeConfidenceScore(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return Math.max(0, Math.min(1, value));
+  }
+
+  const parsed = Number.parseFloat(String(value || '').replace('%', '').trim());
+  if (Number.isNaN(parsed)) return null;
+  const score = parsed > 1 ? parsed / 100 : parsed;
+  return Math.max(0, Math.min(1, score));
+}
+
+function confidenceTone(score) {
+  if (typeof score !== 'number') return 'text-muted-foreground';
+  if (score >= 0.85) return 'text-emerald-600';
+  if (score >= 0.65) return 'text-amber-600';
+  return 'text-rose-600';
+}
+
 export default function AnalyzeFilePage() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -72,11 +110,20 @@ export default function AnalyzeFilePage() {
   const [snippetState, setSnippetState] = useState({
     status: 'idle',
     error: '',
+    notice: '',
     selectedSnippet: '',
     lineStart: null,
     lineEnd: null,
     data: null,
   });
+  const [isSnippetDrawerOpen, setIsSnippetDrawerOpen] = useState(false);
+  const [isMobileSnippetSheetOpen, setIsMobileSnippetSheetOpen] = useState(false);
+  const [isSnippetPopoverPinned, setIsSnippetPopoverPinned] = useState(false);
+  const [snippetPopoverAnchor, setSnippetPopoverAnchor] = useState({
+    x: 0,
+    y: 0,
+    visible: false,
+  });
 
   const editorGutterRef = useRef(null);
   const editorTextareaRef = useRef(null);
@@ -84,6 +131,7 @@ export default function AnalyzeFilePage() {
   const viewerCodeRef = useRef(null);
   const snippetAbortRef = useRef(null);
   const snippetDebounceRef = useRef(null);
+  const snippetPanelRef = useRef(null);
 
   const routeDirectory = useMemo(() => {
     const raw = params.dir_name ? decodeURIComponent(params.dir_name) : '';
@@ -131,11 +179,13 @@ export default function AnalyzeFilePage() {
     setSnippetState({
       status: 'idle',
       error: '',
+      notice: '',
       selectedSnippet: '',
       lineStart: null,
       lineEnd: null,
       data: null,
     });
+    setSnippetPopoverAnchor((prev) => ({ ...prev, visible: false }));
   }, [fileState.data?.content, fileState.data?.path]);
 
   useEffect(() => {
@@ -214,15 +264,84 @@ export default function AnalyzeFilePage() {
 
   const hasNodeInsights = Boolean(selectedFilePath && aiGraph?.[selectedFilePath]);
 
+  const snippetConfidenceScore = useMemo(() => {
+    return normalizeConfidenceScore(snippetState.data?.confidenceScore);
+  }, [snippetState.data?.confidenceScore]);
+
+  const quickSnippetSummary = useMemo(() => {
+    if (!snippetState.data?.whatItDoes) return '';
+    const raw = String(snippetState.data.whatItDoes).replace(/\s+/g, ' ').trim();
+    if (raw.length <= 140) return raw;
+    return `${raw.slice(0, 137)}...`;
+  }, [snippetState.data?.whatItDoes]);
+
+  const snippetStatusMeta = useMemo(() => {
+    if (snippetState.status === 'loading') {
+      return {
+        label: 'Analyzing',
+        dotClass: 'bg-amber-500 animate-pulse',
+      };
+    }
+
+    if (snippetState.status === 'succeeded') {
+      return {
+        label: 'Ready',
+        dotClass: 'bg-emerald-500',
+      };
+    }
+
+    if (snippetState.status === 'failed') {
+      return {
+        label: 'Error',
+        dotClass: 'bg-rose-500',
+      };
+    }
+
+    return {
+      label: 'Idle',
+      dotClass: 'bg-slate-400',
+    };
+  }, [snippetState.status]);
+
   const getLineNumberFromOffset = (value, offset) => {
     const safeOffset = Math.max(0, Math.min(String(value || '').length, offset));
     const upToOffset = String(value || '').slice(0, safeOffset);
     return upToOffset.split('\n').length;
   };
 
-  const triggerSnippetAnalysis = ({ snippet, lineStart, lineEnd, shouldAnalyze = true }) => {
+  const openSnippetDrawer = () => {
+    setIsSnippetDrawerOpen(true);
+    if (window.matchMedia('(max-width: 1279px)').matches) {
+      setIsMobileSnippetSheetOpen(true);
+    }
+    window.setTimeout(() => {
+      snippetPanelRef.current?.focus();
+    }, 20);
+  };
+
+  const updateSnippetPopoverAnchor = ({ x, y, visible = true }) => {
+    setSnippetPopoverAnchor({
+      x: Number.isFinite(x) ? Math.max(16, x) : 16,
+      y: Number.isFinite(y) ? Math.max(16, y) : 16,
+      visible,
+    });
+  };
+
+  const triggerSnippetAnalysis = ({
+    snippet,
+    lineStart,
+    lineEnd,
+    shouldAnalyze = true,
+    triggerSource = 'auto',
+  }) => {
     const normalizedSnippet = String(snippet || '').trim();
 
+    const basePayload = {
+      selectedSnippet: normalizedSnippet,
+      lineStart: Number.isInteger(lineStart) ? lineStart : null,
+      lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
+    };
+
     if (!shouldAnalyze) {
       if (snippetDebounceRef.current) {
         clearTimeout(snippetDebounceRef.current);
@@ -235,15 +354,13 @@ export default function AnalyzeFilePage() {
         ...prev,
         status: 'idle',
         error: '',
-        selectedSnippet: normalizedSnippet,
-        lineStart: Number.isInteger(lineStart) ? lineStart : null,
-        lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
-        data: null,
+        notice: normalizedSnippet ? 'Selection captured. Click Analyze Snippet to run.' : '',
+        ...basePayload,
       }));
       return;
     }
 
-    if (!normalizedSnippet || !analysisJobId || !selectedFilePath) {
+    if (!normalizedSnippet) {
       if (snippetAbortRef.current) {
         snippetAbortRef.current.abort();
       }
@@ -252,14 +369,46 @@ export default function AnalyzeFilePage() {
         ...prev,
         status: 'idle',
         error: '',
-        selectedSnippet: normalizedSnippet,
-        lineStart: Number.isInteger(lineStart) ? lineStart : null,
-        lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
+        notice: '',
+        ...basePayload,
         data: null,
       }));
       return;
     }
 
+    if (!isMeaningfulSnippet(normalizedSnippet)) {
+      setSnippetState((prev) => ({
+        ...prev,
+        status: 'idle',
+        error: '',
+        notice: `Select at least ${SNIPPET_MIN_CHARS} meaningful characters for snippet analysis.`,
+        ...basePayload,
+      }));
+      return;
+    }
+
+    if (triggerSource === 'auto' && normalizedSnippet.length > SNIPPET_MAX_AUTO_CHARS) {
+      setSnippetState((prev) => ({
+        ...prev,
+        status: 'idle',
+        error: '',
+        notice: 'Large selection detected. Use Analyze Snippet for a manual run.',
+        ...basePayload,
+      }));
+      return;
+    }
+
+    if (!analysisJobId || !selectedFilePath) {
+      setSnippetState((prev) => ({
+        ...prev,
+        status: 'failed',
+        error: 'Analysis context is not ready yet. Load repository graph data and try again.',
+        notice: '',
+        ...basePayload,
+      }));
+      return;
+    }
+
     if (snippetDebounceRef.current) {
       clearTimeout(snippetDebounceRef.current);
     }
@@ -276,9 +425,8 @@ export default function AnalyzeFilePage() {
         ...prev,
         status: 'loading',
         error: '',
-        selectedSnippet: normalizedSnippet,
-        lineStart: Number.isInteger(lineStart) ? lineStart : null,
-        lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
+        notice: '',
+        ...basePayload,
       }));
 
       try {
@@ -296,11 +444,13 @@ export default function AnalyzeFilePage() {
         setSnippetState({
           status: 'succeeded',
           error: '',
-          selectedSnippet: normalizedSnippet,
-          lineStart: Number.isInteger(lineStart) ? lineStart : null,
-          lineEnd: Number.isInteger(lineEnd) ? lineEnd : null,
+          notice: '',
+          ...basePayload,
           data: result,
         });
+        if (!isSnippetPopoverPinned) {
+          setSnippetPopoverAnchor((prev) => ({ ...prev, visible: true }));
+        }
       } catch (error) {
         if (controller.signal.aborted || error?.name === 'CanceledError' || error?.name === 'AbortError') {
           return;
@@ -313,7 +463,7 @@ export default function AnalyzeFilePage() {
             error?.response?.data?.error ||
             error?.message ||
             'Failed to analyze selected snippet.',
-          data: null,
+          notice: '',
         }));
       }
     }, 450);
@@ -327,6 +477,9 @@ export default function AnalyzeFilePage() {
 
     if (!value || end <= start) {
       triggerSnippetAnalysis({ snippet: '', lineStart: null, lineEnd: null, shouldAnalyze: false });
+      if (!isSnippetPopoverPinned) {
+        setSnippetPopoverAnchor((prev) => ({ ...prev, visible: false }));
+      }
       return;
     }
 
@@ -334,11 +487,21 @@ export default function AnalyzeFilePage() {
     const lineStart = getLineNumberFromOffset(value, start);
     const lineEnd = getLineNumberFromOffset(value, end);
 
+    const targetRect = target?.getBoundingClientRect?.();
+    const clientX = event?.nativeEvent?.clientX;
+    const clientY = event?.nativeEvent?.clientY;
+    updateSnippetPopoverAnchor({
+      x: Number.isFinite(clientX) ? clientX + 12 : (targetRect?.right || 300) - 24,
+      y: Number.isFinite(clientY) ? clientY - 12 : (targetRect?.top || 80) + 18,
+      visible: true,
+    });
+
     triggerSnippetAnalysis({
       snippet: selectedSnippet,
       lineStart,
       lineEnd,
       shouldAnalyze: isAutoSnippetAnalyze,
+      triggerSource: isAutoSnippetAnalyze ? 'auto' : 'manual-ready',
     });
   };
 
@@ -377,18 +540,28 @@ export default function AnalyzeFilePage() {
 
     if (!rangeOffsets || rangeOffsets.end <= rangeOffsets.start) {
       triggerSnippetAnalysis({ snippet: '', lineStart: null, lineEnd: null, shouldAnalyze: false });
+      if (!isSnippetPopoverPinned) {
+        setSnippetPopoverAnchor((prev) => ({ ...prev, visible: false }));
+      }
       return;
     }
 
     const selectedSnippet = rawContent.slice(rangeOffsets.start, rangeOffsets.end).trim();
     const lineStart = getLineNumberFromOffset(rawContent, rangeOffsets.start);
     const lineEnd = getLineNumberFromOffset(rawContent, rangeOffsets.end);
+    const rangeRect = range.getBoundingClientRect();
+    updateSnippetPopoverAnchor({
+      x: (rangeRect?.right || 300) + 10,
+      y: rangeRect?.top || 80,
+      visible: true,
+    });
 
     triggerSnippetAnalysis({
       snippet: selectedSnippet,
       lineStart,
       lineEnd,
       shouldAnalyze: isAutoSnippetAnalyze,
+      triggerSource: isAutoSnippetAnalyze ? 'auto' : 'manual-ready',
     });
   };
 
@@ -400,9 +573,126 @@ export default function AnalyzeFilePage() {
       lineStart: snippetState.lineStart,
       lineEnd: snippetState.lineEnd,
       shouldAnalyze: true,
+      triggerSource: 'manual',
     });
+    openSnippetDrawer();
   };
 
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+        if (!snippetState.selectedSnippet) return;
+        event.preventDefault();
+        handleManualSnippetAnalyze();
+        return;
+      }
+
+      if ((event.ctrlKey || event.metaKey) && event.shiftKey && String(event.key || '').toLowerCase() === 'i') {
+        event.preventDefault();
+        openSnippetDrawer();
+        return;
+      }
+
+      if (event.key === 'Escape' && !isSnippetPopoverPinned) {
+        setSnippetPopoverAnchor((prev) => ({ ...prev, visible: false }));
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isSnippetPopoverPinned, snippetState.selectedSnippet]);
+
+  const showSnippetPopover =
+    snippetPopoverAnchor.visible &&
+    Boolean(snippetState.selectedSnippet) &&
+    !isMobileSnippetSheetOpen;
+
+  const renderSnippetImpactDetails = ({ compact = false } = {}) => (
+    <div className={compact ? 'space-y-2 text-[11px]' : 'space-y-3 text-xs'}>
+      {snippetState.data?.whatItDoes && (
+        <div>
+          <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+            What It Does
+          </p>
+          <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
+            {snippetState.data.whatItDoes}
+          </p>
+        </div>
+      )}
+
+      {snippetState.data?.fileImpact && !compact && (
+        <div>
+          <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+            File Impact
+          </p>
+          <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
+            {snippetState.data.fileImpact}
+          </p>
+        </div>
+      )}
+
+      {snippetState.data?.codebaseImpact && !compact && (
+        <div>
+          <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+            Codebase Impact
+          </p>
+          <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
+            {snippetState.data.codebaseImpact}
+          </p>
+        </div>
+      )}
+
+      {(typeof snippetConfidenceScore === 'number' || snippetState.data?.confidence) && (
+        <div className="rounded-lg border border-border/60 bg-background/70 px-2 py-2 text-[11px]">
+          <span className="text-muted-foreground">Confidence: </span>
+          <span className={confidenceTone(snippetConfidenceScore)}>
+            {snippetState.data?.confidence || 'unknown'}
+          </span>
+          {typeof snippetConfidenceScore === 'number' && (
+            <span className="text-muted-foreground"> ({snippetConfidenceScore.toFixed(2)})</span>
+          )}
+          {snippetState.data?.rerunTriggered && (
+            <span className="text-amber-600"> - Re-analyzed for low confidence</span>
+          )}
+        </div>
+      )}
+
+      {!compact &&
+        Array.isArray(snippetState.data?.directlyImpactedFiles) &&
+        snippetState.data.directlyImpactedFiles.length > 0 && (
+          <div>
+            <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+              Directly Impacted Files ({snippetState.data.directlyImpactedFiles.length})
+            </p>
+            <ul className="space-y-1">
+              {snippetState.data.directlyImpactedFiles.slice(0, 8).map((file) => (
+                <li key={`direct-${file}`} className="font-mono text-foreground/90 break-all">
+                  {file}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+      {!compact &&
+        Array.isArray(snippetState.data?.transitivelyImpactedFiles) &&
+        snippetState.data.transitivelyImpactedFiles.length > 0 && (
+          <div>
+            <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+              Transitively Impacted Files ({snippetState.data.transitivelyImpactedFiles.length})
+            </p>
+            <ul className="space-y-1">
+              {snippetState.data.transitivelyImpactedFiles.slice(0, 8).map((file) => (
+                <li key={`transitive-${file}`} className="font-mono text-foreground/90 break-all">
+                  {file}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+    </div>
+  );
+
   return (
     <section className="mx-auto w-full max-w-475 px-4 pb-10 pt-7 2xl:px-6">
       <div className="mb-5">
@@ -447,15 +737,62 @@ export default function AnalyzeFilePage() {
       )}
 
       {selectedFilePath && (
-        <div className="mt-6 grid gap-4 xl:grid-cols-[minmax(0,1fr)_17.5rem] 2xl:grid-cols-[minmax(0,1fr)_18.5rem]">
+        <div className="mt-6 grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(21rem,1fr)]">
           <div className="rounded-2xl shadow-neu-inset border-none bg-background/40">
           <div className="flex items-center justify-between gap-3 border-b border-border/10 px-5 py-4">
             <div className="min-w-0">
               <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">File</p>
               <p className="truncate text-sm font-display font-bold tracking-tight">{selectedFilePath}</p>
+              <p className="mt-1 text-[11px] text-muted-foreground/80">
+                Select code to analyze. Ctrl/Cmd+Enter runs snippet analysis.
+              </p>
             </div>
 
             <div className="flex items-center gap-2">
+              <div className="hidden xl:flex items-center gap-2 rounded-xl border border-border/50 bg-background/55 p-1 shadow-neu-inset">
+                <div className="inline-flex items-center rounded-lg border border-border/60 bg-background/70 p-0.5">
+                  <button
+                    type="button"
+                    onClick={() => setIsAutoSnippetAnalyze(true)}
+                    className={`rounded-md px-2.5 py-1 text-[10px] font-semibold tracking-wide transition-colors ${
+                      isAutoSnippetAnalyze
+                        ? 'bg-primary/12 text-primary'
+                        : 'text-muted-foreground hover:text-foreground'
+                    }`}
+                  >
+                    Auto
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setIsAutoSnippetAnalyze(false)}
+                    className={`rounded-md px-2.5 py-1 text-[10px] font-semibold tracking-wide transition-colors ${
+                      !isAutoSnippetAnalyze
+                        ? 'bg-primary/12 text-primary'
+                        : 'text-muted-foreground hover:text-foreground'
+                    }`}
+                  >
+                    Manual
+                  </button>
+                </div>
+
+                <span className="inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-background/70 px-2 py-1 text-[10px] text-muted-foreground">
+                  <span className={`size-1.5 rounded-full ${snippetStatusMeta.dotClass}`} />
+                  {snippetStatusMeta.label}
+                </span>
+
+                {!isAutoSnippetAnalyze && (
+                  <Button
+                    size="sm"
+                    type="button"
+                    onClick={handleManualSnippetAnalyze}
+                    disabled={!snippetState.selectedSnippet || snippetState.status === 'loading'}
+                    className="h-7 rounded-lg bg-gold px-2.5 text-[10px] text-white"
+                  >
+                    {snippetState.status === 'loading' ? 'Analyzing...' : 'Analyze'}
+                  </Button>
+                )}
+              </div>
+
               {!isEditing ? (
                 <Button
                   size="sm"
@@ -572,154 +909,11 @@ export default function AnalyzeFilePage() {
                 <p className="mt-2 text-xs text-destructive">{fileState.saveError}</p>
               )}
 
-              <div className="mt-4 rounded-xl border border-border/50 bg-background/50 p-3">
-                <div className="mb-2 flex items-center justify-between gap-2">
-                  <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
-                    Snippet Analysis
-                  </p>
-                  <div className="flex items-center gap-2">
-                    {snippetState.lineStart && snippetState.lineEnd && (
-                      <p className="text-[10px] text-muted-foreground">
-                        Lines {snippetState.lineStart}-{snippetState.lineEnd}
-                      </p>
-                    )}
-                    <Button
-                      size="sm"
-                      type="button"
-                      variant="outline"
-                      onClick={() => setIsAutoSnippetAnalyze((prev) => !prev)}
-                      className="h-7 rounded-lg px-2 text-[10px] shadow-neu-inset border-none bg-background/60"
-                    >
-                      {isAutoSnippetAnalyze ? 'Auto Analyze: ON' : 'Auto Analyze: OFF'}
-                    </Button>
-                    {!isAutoSnippetAnalyze && (
-                      <Button
-                        size="sm"
-                        type="button"
-                        onClick={handleManualSnippetAnalyze}
-                        disabled={!snippetState.selectedSnippet || snippetState.status === 'loading'}
-                        className="h-7 rounded-lg px-2 text-[10px]"
-                      >
-                        {snippetState.status === 'loading' ? 'Analyzing...' : 'Analyze Snippet'}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-
-                {!snippetState.selectedSnippet && (
-                  <p className="text-xs text-muted-foreground">
-                    Select a code snippet to analyze its purpose and impact across related files.
-                    {!isAutoSnippetAnalyze && ' Then click Analyze Snippet.'}
-                  </p>
-                )}
-
-                {snippetState.selectedSnippet && (
-                  <pre className="mb-3 max-h-44 overflow-auto rounded-lg border border-border/60 bg-background/80 px-2 py-2 font-mono text-[11px] leading-5 text-foreground/90 custom-scrollbar">
-                    {snippetState.selectedSnippet}
-                  </pre>
-                )}
-
-                {snippetState.status === 'loading' && (
-                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                    <Loader2 className="size-3.5 animate-spin" />
-                    Analyzing snippet impact...
-                  </div>
-                )}
-
-                {snippetState.status === 'failed' && snippetState.error && (
-                  <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-2 py-2 text-xs text-destructive">
-                    <AlertTriangle className="mt-0.5 size-3.5" />
-                    <span>{snippetState.error}</span>
-                  </div>
-                )}
-
-                {snippetState.status === 'succeeded' && snippetState.data && (
-                  <div className="space-y-3 text-xs">
-                    {snippetState.data.whatItDoes && (
-                      <div>
-                        <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
-                          What It Does
-                        </p>
-                        <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
-                          {snippetState.data.whatItDoes}
-                        </p>
-                      </div>
-                    )}
-
-                    {snippetState.data.fileImpact && (
-                      <div>
-                        <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
-                          File Impact
-                        </p>
-                        <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
-                          {snippetState.data.fileImpact}
-                        </p>
-                      </div>
-                    )}
-
-                    {snippetState.data.codebaseImpact && (
-                      <div>
-                        <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
-                          Codebase Impact
-                        </p>
-                        <p className="text-foreground/90 whitespace-pre-wrap leading-relaxed">
-                          {snippetState.data.codebaseImpact}
-                        </p>
-                      </div>
-                    )}
-
-                    <div className="rounded-lg border border-border/60 bg-background/70 px-2 py-2 text-[11px] text-muted-foreground">
-                      Confidence: {snippetState.data.confidence || 'unknown'}
-                      {typeof snippetState.data.confidenceScore === 'number' && (
-                        <span>
-                          {' '}
-                          ({snippetState.data.confidenceScore.toFixed(2)})
-                        </span>
-                      )}
-                      {snippetState.data.rerunTriggered && (
-                        <span> · Re-run triggered due to low confidence</span>
-                      )}
-                    </div>
-
-                    {Array.isArray(snippetState.data.directlyImpactedFiles) &&
-                      snippetState.data.directlyImpactedFiles.length > 0 && (
-                        <div>
-                          <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
-                            Directly Impacted Files ({snippetState.data.directlyImpactedFiles.length})
-                          </p>
-                          <ul className="space-y-1">
-                            {snippetState.data.directlyImpactedFiles.map((file) => (
-                              <li key={`direct-${file}`} className="font-mono text-foreground/90 break-all">
-                                {file}
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-                      )}
-
-                    {Array.isArray(snippetState.data.transitivelyImpactedFiles) &&
-                      snippetState.data.transitivelyImpactedFiles.length > 0 && (
-                        <div>
-                          <p className="mb-1 text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
-                            Transitively Impacted Files ({snippetState.data.transitivelyImpactedFiles.length})
-                          </p>
-                          <ul className="space-y-1">
-                            {snippetState.data.transitivelyImpactedFiles.map((file) => (
-                              <li key={`transitive-${file}`} className="font-mono text-foreground/90 break-all">
-                                {file}
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-                      )}
-                  </div>
-                )}
-              </div>
             </div>
           )}
           </div>
 
-          <div className="relative min-h-104 xl:justify-self-end xl:w-full">
+          <div className="relative min-h-104 xl:justify-self-end xl:w-full xl:max-w-120">
             {hasNodeInsights ? (
               <AiPanel
                 nodeId={selectedFilePath}
@@ -734,6 +928,217 @@ export default function AnalyzeFilePage() {
           </div>
         </div>
       )}
+
+      {isSnippetDrawerOpen && (
+        <div className="fixed right-4 top-24 z-40 hidden w-104 max-w-[calc(100vw-2rem)] xl:block animate-in fade-in slide-in-from-right-2 duration-200">
+          <div
+            ref={snippetPanelRef}
+            tabIndex={-1}
+            className="rounded-2xl border border-border/70 bg-background/95 p-4 shadow-2xl backdrop-blur-sm outline-none animate-in zoom-in-95 duration-200"
+          >
+            <div className="mb-3 flex items-center justify-between gap-2">
+              <div>
+                <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+                  Snippet Impact
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {snippetState.lineStart && snippetState.lineEnd
+                    ? `Lines ${snippetState.lineStart}-${snippetState.lineEnd}`
+                    : 'Select a snippet to inspect impact'}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => setIsSnippetPopoverPinned((prev) => !prev)}
+                  className={`inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[10px] transition-colors ${
+                    isSnippetPopoverPinned
+                      ? 'border-primary/40 bg-primary/10 text-primary'
+                      : 'border-border/60 bg-background/70 text-muted-foreground hover:text-foreground'
+                  }`}
+                >
+                  <Pin className="size-3" />
+                  {isSnippetPopoverPinned ? 'Pinned' : 'Pin'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setIsSnippetDrawerOpen(false)}
+                  className="inline-flex items-center rounded-lg border border-border/60 bg-background/70 px-2 py-1 text-[10px] text-muted-foreground hover:text-foreground"
+                >
+                  <X className="size-3" />
+                </button>
+              </div>
+            </div>
+
+            <div className="space-y-3 max-h-[70vh] overflow-auto pr-1 custom-scrollbar">
+              {snippetState.selectedSnippet ? (
+                <pre className="max-h-32 overflow-auto rounded-lg border border-border/60 bg-background/80 px-2 py-2 font-mono text-[11px] leading-5 text-foreground/90 custom-scrollbar">
+                  {snippetState.selectedSnippet}
+                </pre>
+              ) : (
+                <p className="text-xs text-muted-foreground">
+                  Select a meaningful snippet to view purpose and impact insights.
+                </p>
+              )}
+
+              {snippetState.notice && (
+                <p className="rounded-lg border border-border/60 bg-background/70 px-2 py-2 text-xs text-muted-foreground">
+                  {snippetState.notice}
+                </p>
+              )}
+
+              {snippetState.status === 'loading' && (
+                <div className="rounded-lg border border-border/60 bg-background/70 px-2 py-2 text-xs text-muted-foreground">
+                  <div className="flex items-center gap-2">
+                    <Loader2 className="size-3.5 animate-spin" />
+                    {snippetState.data ? 'Updating analysis...' : 'Analyzing snippet impact...'}
+                  </div>
+                </div>
+              )}
+
+              {snippetState.status === 'failed' && snippetState.error && (
+                <div className="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-2 py-2 text-xs text-destructive">
+                  <AlertTriangle className="mt-0.5 size-3.5" />
+                  <span>{snippetState.error}</span>
+                </div>
+              )}
+
+              {snippetState.data && renderSnippetImpactDetails()}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showSnippetPopover && (
+        <div
+          className="pointer-events-none fixed z-50 hidden w-88 max-w-[calc(100vw-2rem)] origin-top-left xl:block animate-in fade-in zoom-in-95 slide-in-from-top-1 duration-200"
+          style={{
+            left: `${snippetPopoverAnchor.x}px`,
+            top: `${snippetPopoverAnchor.y}px`,
+          }}
+        >
+          <div className="pointer-events-auto rounded-2xl border border-border/70 bg-background/95 p-3 shadow-2xl backdrop-blur-sm">
+            <div className="mb-2 flex items-center justify-between gap-2">
+              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+                Snippet Insight
+              </p>
+              <div className="flex items-center gap-1.5">
+                <span className="rounded-md border border-border/60 bg-background/70 px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                  {isAutoSnippetAnalyze ? 'Auto Analysis' : 'Manual Analysis'}
+                </span>
+                <span className="rounded-md border border-primary/25 bg-primary/10 px-1.5 py-0.5 text-[10px] text-primary">
+                  Analysis
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={() => setSnippetPopoverAnchor((prev) => ({ ...prev, visible: false }))}
+                className="rounded-md border border-border/60 px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground"
+              >
+                Close
+              </button>
+            </div>
+
+            {snippetState.status === 'loading' && (
+              <div className="mb-2 inline-flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="size-3.5 animate-spin" />
+                {snippetState.data ? 'Updating analysis...' : 'Analyzing...'}
+              </div>
+            )}
+
+            {quickSnippetSummary ? (
+              <p className="text-xs leading-relaxed text-foreground/90">{quickSnippetSummary}</p>
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                {snippetState.notice || 'Selection captured. Run analysis for impact details.'}
+              </p>
+            )}
+
+            {snippetState.data && (
+              <div className="mt-2">{renderSnippetImpactDetails({ compact: true })}</div>
+            )}
+
+            <div className="mt-3 flex items-center justify-between gap-2">
+              <button
+                type="button"
+                onClick={openSnippetDrawer}
+                className="rounded-lg border border-border/60 bg-background/70 px-2.5 py-1 text-[10px] text-muted-foreground hover:text-foreground"
+              >
+                Open Full Impact
+              </button>
+              <button
+                type="button"
+                onClick={() => setIsSnippetPopoverPinned((prev) => !prev)}
+                className={`rounded-lg border px-2.5 py-1 text-[10px] ${
+                  isSnippetPopoverPinned
+                    ? 'border-primary/40 bg-primary/10 text-primary'
+                    : 'border-border/60 bg-background/70 text-muted-foreground hover:text-foreground'
+                }`}
+              >
+                {isSnippetPopoverPinned ? 'Unpin' : 'Pin'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="fixed bottom-4 right-4 z-40 xl:hidden">
+        <Button
+          type="button"
+          onClick={() => setIsMobileSnippetSheetOpen((prev) => !prev)}
+          className="rounded-xl bg-background/95 px-3 text-xs text-foreground shadow-xl"
+          variant="outline"
+        >
+          {isMobileSnippetSheetOpen ? 'Hide Snippet Impact' : 'Snippet Impact'}
+        </Button>
+      </div>
+
+      {isMobileSnippetSheetOpen && (
+        <div className="fixed inset-x-3 bottom-16 z-40 rounded-2xl border border-border/70 bg-background/95 p-3 shadow-2xl xl:hidden">
+          <div className="mb-2 flex items-center justify-between gap-2">
+            <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">
+              Snippet Impact
+            </p>
+            <button
+              type="button"
+              onClick={() => setIsMobileSnippetSheetOpen(false)}
+              className="rounded-md border border-border/60 px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground"
+            >
+              Close
+            </button>
+          </div>
+
+          {snippetState.selectedSnippet ? (
+            <pre className="mb-2 max-h-24 overflow-auto rounded-lg border border-border/60 bg-background/80 px-2 py-2 font-mono text-[10px] leading-4 text-foreground/90 custom-scrollbar">
+              {snippetState.selectedSnippet}
+            </pre>
+          ) : (
+            <p className="text-xs text-muted-foreground">Select a snippet to open impact details.</p>
+          )}
+
+          {snippetState.notice && (
+            <p className="mb-2 rounded-lg border border-border/60 bg-background/70 px-2 py-2 text-xs text-muted-foreground">
+              {snippetState.notice}
+            </p>
+          )}
+
+          {snippetState.status === 'loading' && (
+            <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+              <Loader2 className="size-3.5 animate-spin" />
+              {snippetState.data ? 'Updating analysis...' : 'Analyzing snippet impact...'}
+            </div>
+          )}
+
+          {snippetState.status === 'failed' && snippetState.error && (
+            <div className="mb-2 flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-2 py-2 text-xs text-destructive">
+              <AlertTriangle className="mt-0.5 size-3.5" />
+              <span>{snippetState.error}</span>
+            </div>
+          )}
+
+          {snippetState.data && renderSnippetImpactDetails({ compact: true })}
+        </div>
+      )}
     </section>
   );
 }

From ceeb73f617806f62f71439ccf757ecdef1f69ea8 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 22:42:27 +0530
Subject: [PATCH 13/19] refactor(new): ask page seperate

---
 client/src/App.jsx                            |   2 +
 client/src/components/layout/Sidebar.jsx      |   6 ++
 client/src/features/ai/index.js               |   1 +
 client/src/features/ai/pages/AskPage.jsx      | 100 ++++++++++++++++++
 .../features/graph/components/GraphView.jsx   |  16 ++-
 client/src/features/graph/pages/GraphPage.jsx |   7 +-
 6 files changed, 121 insertions(+), 11 deletions(-)
 create mode 100644 client/src/features/ai/pages/AskPage.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 2475f8e..4615553 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -12,6 +12,7 @@ import { LandingPage, LoginPage, SignupPage } from '@/features/auth';
 import { DashboardPage }                      from '@/features/dashboard';
 import { UploadRepoPage, GraphPage }             from '@/features/graph';
 import { AnalyzeFilePage, AnalyzePage }             from '@/features/analyze';
+import { AskPage } from '@/features/ai';
 
 function RootRedirect() {
   const { isAuthenticated, loading } = useAuth();
@@ -46,6 +47,7 @@ function AppRoutes() {
           <Route path="/analyze/:dir_name" element={<AnalyzePage />} />
           <Route path="/analyze/:dir_name/file" element={<AnalyzeFilePage />} />
           <Route path="/graph" element={<GraphPage />} />
+          <Route path="/ask" element={<AskPage />} />
         </Route>
       </Route>
 
diff --git a/client/src/components/layout/Sidebar.jsx b/client/src/components/layout/Sidebar.jsx
index 75e3645..c560113 100644
--- a/client/src/components/layout/Sidebar.jsx
+++ b/client/src/components/layout/Sidebar.jsx
@@ -9,6 +9,7 @@ import {
   ChevronRight,
   UploadIcon,
   GitGraphIcon,
+  MessageSquare,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -33,6 +34,11 @@ const NAV_ITEMS = [
     icon: <Network className="size-4 shrink-0" />,
     label: 'Graph',
   },
+  {
+    to: '/ask',
+    icon: <MessageSquare className="size-4 shrink-0" />,
+    label: 'Ask',
+  },
 ];
 
 export default function Sidebar({
diff --git a/client/src/features/ai/index.js b/client/src/features/ai/index.js
index 65ebe2e..c26a49b 100644
--- a/client/src/features/ai/index.js
+++ b/client/src/features/ai/index.js
@@ -15,3 +15,4 @@ export { aiService } from './services/aiService';
 export { default as QueryBar } from './components/QueryBar';
 export { default as QueryHistory } from './components/QueryHistory';
 export { default as AiPanel } from './components/AiPanel';
+export { default as AskPage } from './pages/AskPage';
diff --git a/client/src/features/ai/pages/AskPage.jsx b/client/src/features/ai/pages/AskPage.jsx
new file mode 100644
index 0000000..db526ae
--- /dev/null
+++ b/client/src/features/ai/pages/AskPage.jsx
@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { Link, useSearchParams } from 'react-router-dom';
+import { AlertCircle, MessageSquareText, Network, Sparkles } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { QueryBar, QueryHistory } from '@/features/ai';
+import { selectGraphData } from '@/features/graph';
+
+export default function AskPage() {
+  const [searchParams] = useSearchParams();
+  const graphData = useSelector(selectGraphData);
+
+  const activeJobId = useMemo(() => {
+    const urlJobId = String(searchParams.get('jobId') || '').trim();
+    if (urlJobId) return urlJobId;
+    return graphData?.jobId || null;
+  }, [graphData?.jobId, searchParams]);
+
+  return (
+    <div className="mx-auto flex h-[calc(100vh-6.75rem)] w-full max-w-375 flex-col px-4 pb-4 pt-6">
+      <section className="rounded-2xl border border-border/60 bg-card/60 p-5 shadow-sm backdrop-blur-sm">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="space-y-2">
+            <p className="inline-flex items-center gap-2 rounded-full border border-gold/30 bg-gold/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-gold/90">
+              <Sparkles className="size-3.5" />
+              Ask Workspace AI
+            </p>
+            <h1 className="text-2xl font-semibold tracking-tight">Ask questions about your codebase</h1>
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              Use natural language to inspect architecture, dependencies, and design trade-offs.
+              Responses are scoped to your active analysis and saved in query history.
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Link to={activeJobId ? `/graph?jobId=${encodeURIComponent(activeJobId)}` : '/graph'}>
+              <Button variant="outline" className="gap-2">
+                <Network className="size-4" />
+                Open Graph
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {!activeJobId ? (
+        <section className="mt-4 rounded-2xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+          <div className="flex items-start gap-3">
+            <AlertCircle className="mt-0.5 size-4 shrink-0" />
+            <div className="space-y-3">
+              <p>
+                No active analysis found. Load a saved graph or run a new analysis first to ask
+                context-aware questions.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <Link to="/dashboard">
+                  <Button variant="outline" size="sm">Open dashboard</Button>
+                </Link>
+                <Link to="/analyze">
+                  <Button size="sm">Run analysis</Button>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </section>
+      ) : (
+        <section className="mt-4 grid h-full min-h-0 grid-cols-1 gap-4 lg:grid-cols-[2fr_1fr]">
+          <article className="min-h-0 rounded-2xl border border-border/60 bg-card/40 p-4 shadow-sm">
+            <div className="mb-3 flex items-center justify-between gap-3">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                  Query
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  Active analysis: <span className="font-mono text-foreground/80">{activeJobId}</span>
+                </p>
+              </div>
+              <span className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-600">
+                <span className="size-2 rounded-full bg-emerald-500" />
+                Ready
+              </span>
+            </div>
+
+            <QueryBar jobId={activeJobId} />
+          </article>
+
+          <aside className="min-h-0 rounded-2xl border border-border/60 bg-card/30 p-4 shadow-sm">
+            <div className="mb-2 flex items-center gap-2">
+              <MessageSquareText className="size-4 text-muted-foreground" />
+              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                Query History
+              </p>
+            </div>
+            <QueryHistory jobId={activeJobId} />
+          </aside>
+        </section>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/features/graph/components/GraphView.jsx b/client/src/features/graph/components/GraphView.jsx
index bc24c29..bd937dc 100644
--- a/client/src/features/graph/components/GraphView.jsx
+++ b/client/src/features/graph/components/GraphView.jsx
@@ -397,11 +397,17 @@ export default function GraphView() {
         </div>
       </ReactFlow>
 
-      <AiPanel
-        nodeId={selectedNodeId}
-        graph={graph}
-        onClose={() => dispatch(selectNode(null))}
-      />
+      {selectedNodeId && (
+        <div className="pointer-events-none absolute right-3 top-3 z-20 w-88 max-w-[calc(100%-1.5rem)] animate-in fade-in slide-in-from-right-2 duration-200">
+          <div className="pointer-events-auto max-h-[calc(100vh-12rem)] overflow-auto custom-scrollbar">
+            <AiPanel
+              nodeId={selectedNodeId}
+              graph={graph}
+              onClose={() => dispatch(selectNode(null))}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/client/src/features/graph/pages/GraphPage.jsx b/client/src/features/graph/pages/GraphPage.jsx
index 584b346..5cd7c72 100644
--- a/client/src/features/graph/pages/GraphPage.jsx
+++ b/client/src/features/graph/pages/GraphPage.jsx
@@ -12,7 +12,6 @@ import {
   selectGraphError,
   selectGraphStatus,
 } from '../slices/graphSlice';
-import { QueryBar, QueryHistory } from '../../ai';
 
 function toFiniteNumber(value) {
   const numberValue = Number(value);
@@ -110,11 +109,7 @@ export default function GraphPage() {
     <div className="flex h-[calc(100vh-6.75rem)] flex-col gap-0.5">
       {status === 'succeeded' && data && (
         <section className="mx-auto mt-6 h-[calc(100vh-10rem)] w-full max-w-375 px-4 pb-4">
-          <div className="mb-3 rounded-xl border border-border bg-card/80 p-2 shadow-sm">
-            <QueryBar jobId={data?.jobId} />
-            <QueryHistory jobId={data?.jobId} />
-          </div>
-          <div className="flex h-[calc(100%-4.5rem)] flex-col overflow-hidden rounded-xl border border-border/60 bg-card/40">
+          <div className="flex h-full flex-col overflow-hidden rounded-xl border border-border/60 bg-card/40">
             <GraphToolbar />
             <GraphView />
           </div>

From 827345d6b39d274fe20357906de280ba9ed31d0e Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 23:04:20 +0530
Subject: [PATCH 14/19] style: improved UI

---
 .../analyze/pages/AnalyzeFilePage.jsx         | 314 +++++++++---------
 client/src/features/auth/pages/LoginPage.jsx  |  10 +-
 client/src/features/auth/pages/SignupPage.jsx |  12 +-
 .../graph/components/UploadRepoForm.jsx       |  51 ++-
 client/src/index.css                          |  32 +-
 5 files changed, 211 insertions(+), 208 deletions(-)

diff --git a/client/src/features/analyze/pages/AnalyzeFilePage.jsx b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
index f917e28..ab54c59 100644
--- a/client/src/features/analyze/pages/AnalyzeFilePage.jsx
+++ b/client/src/features/analyze/pages/AnalyzeFilePage.jsx
@@ -739,178 +739,176 @@ export default function AnalyzeFilePage() {
       {selectedFilePath && (
         <div className="mt-6 grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(21rem,1fr)]">
           <div className="rounded-2xl shadow-neu-inset border-none bg-background/40">
-          <div className="flex items-center justify-between gap-3 border-b border-border/10 px-5 py-4">
-            <div className="min-w-0">
-              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">File</p>
-              <p className="truncate text-sm font-display font-bold tracking-tight">{selectedFilePath}</p>
-              <p className="mt-1 text-[11px] text-muted-foreground/80">
-                Select code to analyze. Ctrl/Cmd+Enter runs snippet analysis.
-              </p>
-            </div>
-
-            <div className="flex items-center gap-2">
-              <div className="hidden xl:flex items-center gap-2 rounded-xl border border-border/50 bg-background/55 p-1 shadow-neu-inset">
-                <div className="inline-flex items-center rounded-lg border border-border/60 bg-background/70 p-0.5">
-                  <button
-                    type="button"
-                    onClick={() => setIsAutoSnippetAnalyze(true)}
-                    className={`rounded-md px-2.5 py-1 text-[10px] font-semibold tracking-wide transition-colors ${
-                      isAutoSnippetAnalyze
-                        ? 'bg-primary/12 text-primary'
-                        : 'text-muted-foreground hover:text-foreground'
-                    }`}
-                  >
-                    Auto
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setIsAutoSnippetAnalyze(false)}
-                    className={`rounded-md px-2.5 py-1 text-[10px] font-semibold tracking-wide transition-colors ${
-                      !isAutoSnippetAnalyze
-                        ? 'bg-primary/12 text-primary'
-                        : 'text-muted-foreground hover:text-foreground'
-                    }`}
-                  >
-                    Manual
-                  </button>
-                </div>
+            <div className="flex items-center justify-between gap-3 border-b border-border/10 px-5 py-4">
+              <div className="min-w-0">
+                <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-foreground/60">File</p>
+                <p className="truncate text-sm font-display font-bold tracking-tight">{selectedFilePath}</p>
+                <p className="mt-1 text-[11px] text-muted-foreground/80">
+                  Select code to analyze. Ctrl/Cmd+Enter runs snippet analysis.
+                </p>
+              </div>
 
-                <span className="inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-background/70 px-2 py-1 text-[10px] text-muted-foreground">
-                  <span className={`size-1.5 rounded-full ${snippetStatusMeta.dotClass}`} />
-                  {snippetStatusMeta.label}
-                </span>
+              <div className="flex items-center gap-2">
+                <div className="hidden xl:flex items-center gap-2 rounded-xl border border-border/50 bg-background/55 p-1 shadow-neu-inset">
+                  <div className="inline-flex items-center rounded-lg border border-border/60 bg-background/70 p-0.5">
+                    <button
+                      type="button"
+                      onClick={() => setIsAutoSnippetAnalyze(true)}
+                      className={`rounded-md px-2.5 py-1 text-[10px] font-semibold tracking-wide transition-colors ${isAutoSnippetAnalyze
+                          ? 'bg-primary/12 text-primary'
+                          : 'text-muted-foreground hover:text-foreground'
+                        }`}
+                    >
+                      Auto
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setIsAutoSnippetAnalyze(false)}
+                      className={`rounded-md px-2.5 py-1 text-[10px] font-semibold tracking-wide transition-colors ${!isAutoSnippetAnalyze
+                          ? 'bg-primary/12 text-primary'
+                          : 'text-muted-foreground hover:text-foreground'
+                        }`}
+                    >
+                      Manual
+                    </button>
+                  </div>
 
-                {!isAutoSnippetAnalyze && (
-                  <Button
-                    size="sm"
-                    type="button"
-                    onClick={handleManualSnippetAnalyze}
-                    disabled={!snippetState.selectedSnippet || snippetState.status === 'loading'}
-                    className="h-7 rounded-lg bg-gold px-2.5 text-[10px] text-white"
-                  >
-                    {snippetState.status === 'loading' ? 'Analyzing...' : 'Analyze'}
-                  </Button>
-                )}
-              </div>
+                  <span className="inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-background/70 px-2 py-1 text-[10px] text-muted-foreground">
+                    <span className={`size-1.5 rounded-full ${snippetStatusMeta.dotClass}`} />
+                    {snippetStatusMeta.label}
+                  </span>
+
+                  {!isAutoSnippetAnalyze && (
+                    <Button
+                      size="sm"
+                      type="button"
+                      onClick={handleManualSnippetAnalyze}
+                      disabled={!snippetState.selectedSnippet || snippetState.status === 'loading'}
+                      className="h-7 rounded-lg bg-gold px-2.5 text-[10px] text-white"
+                    >
+                      {snippetState.status === 'loading' ? 'Analyzing...' : 'Analyze'}
+                    </Button>
+                  )}
+                </div>
 
-              {!isEditing ? (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={() => setIsEditing(true)}
-                  disabled={!fileState.canEdit || fileState.status === 'loading'}
-                  className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
-                >
-                  <Edit3 className="size-3.5" />
-                  Edit
-                </Button>
-              ) : (
-                <>
+                {!isEditing ? (
                   <Button
                     size="sm"
                     variant="outline"
-                    onClick={() => {
-                      setEditorValue(fileState.data?.content || '');
-                      setIsEditing(false);
-                    }}
+                    onClick={() => setIsEditing(true)}
+                    disabled={!fileState.canEdit || fileState.status === 'loading'}
                     className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
                   >
-                    <X className="size-3.5" />
-                    Cancel
+                    <Edit3 className="size-3.5" />
+                    Edit
                   </Button>
-                  <Button
-                    size="sm"
-                    onClick={handleSaveFile}
-                    disabled={!hasUnsavedChanges || fileState.saveStatus === 'loading'}
-                    className="rounded-xl bg-gold text-white shadow-md active-scale"
-                  >
-                    <Save className="size-3.5" />
-                    {fileState.saveStatus === 'loading' ? 'Saving...' : 'Save'}
-                  </Button>
-                </>
-              )}
+                ) : (
+                  <>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        setEditorValue(fileState.data?.content || '');
+                        setIsEditing(false);
+                      }}
+                      className="rounded-xl shadow-neu-inset border-none bg-background/50 active-scale"
+                    >
+                      <X className="size-3.5" />
+                      Cancel
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={handleSaveFile}
+                      disabled={!hasUnsavedChanges || fileState.saveStatus === 'loading'}
+                      className="rounded-xl bg-gold text-white shadow-md active-scale"
+                    >
+                      <Save className="size-3.5" />
+                      {fileState.saveStatus === 'loading' ? 'Saving...' : 'Save'}
+                    </Button>
+                  </>
+                )}
+              </div>
             </div>
-          </div>
 
-          {fileState.status === 'loading' && (
-            <div className="px-4 py-6 text-sm text-muted-foreground">Loading file content...</div>
-          )}
+            {fileState.status === 'loading' && (
+              <div className="px-4 py-6 text-sm text-muted-foreground">Loading file content...</div>
+            )}
 
-          {fileState.status === 'failed' && fileState.error && (
-            <div className="m-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
-              {fileState.error}
-            </div>
-          )}
+            {fileState.status === 'failed' && fileState.error && (
+              <div className="m-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+                {fileState.error}
+              </div>
+            )}
 
-          {fileState.status === 'succeeded' && fileState.data && (
-            <div className="p-4">
-              {isEditing ? (
-                <div className="flex rounded-2xl shadow-neu-inset border-none bg-background/60 overflow-x-auto custom-scrollbar">
-                  <div className="flex min-w-full">
-                    <pre
-                      ref={editorGutterRef}
-                      aria-hidden="true"
-                      className="sticky left-0 z-10 w-14 shrink-0 border-r border-border/10 bg-background/20 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground/60"
-                    >
-                      {Array.from({ length: editorLineCount }, (_, i) => i + 1).join('\n')}
-                    </pre>
-                    <textarea
-                      ref={editorTextareaRef}
-                      value={editorValue}
-                      onChange={(e) => setEditorValue(e.target.value)}
-                      onSelect={handleTextareaSelection}
-                      onKeyUp={handleTextareaSelection}
-                      onMouseUp={handleTextareaSelection}
-                      spellCheck={false}
-                      rows={editorLineCount}
-                      className="min-w-max flex-1 resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 outline-none whitespace-pre overflow-hidden text-foreground/90"
-                    />
-                  </div>
-                </div>
-              ) : (
-                <div className="flex rounded-2xl shadow-neu-inset border-none bg-background/60 overflow-x-auto custom-scrollbar">
-                  <div className="flex min-w-full">
-                    <pre
-                      ref={viewerGutterRef}
-                      aria-hidden="true"
-                      className="sticky left-0 z-10 w-14 shrink-0 border-r border-border/10 bg-background/20 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground/60"
-                    >
-                      {Array.from({ length: viewerLineCount }, (_, i) => i + 1).join('\n')}
-                    </pre>
-                    <pre
-                      ref={viewerCodeRef}
-                      onMouseUp={handleViewerSelection}
-                      onKeyUp={handleViewerSelection}
-                      className="min-w-max flex-1 px-4 py-3 font-mono text-xs leading-5 overflow-visible whitespace-pre"
-                    >
-                      <code
-                        className={`language-${codeLanguage}`}
-                        dangerouslySetInnerHTML={{ __html: highlightedContent }}
+            {fileState.status === 'succeeded' && fileState.data && (
+              <div className="p-4">
+                {isEditing ? (
+                  <div className="flex rounded-2xl shadow-neu-inset border-none bg-background/60 overflow-x-auto custom-scrollbar">
+                    <div className="flex min-w-full">
+                      <pre
+                        ref={editorGutterRef}
+                        aria-hidden="true"
+                        className="sticky left-0 z-10 w-14 shrink-0 border-r border-border/10 bg-background/20 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground/60"
+                      >
+                        {Array.from({ length: editorLineCount }, (_, i) => i + 1).join('\n')}
+                      </pre>
+                      <textarea
+                        ref={editorTextareaRef}
+                        value={editorValue}
+                        onChange={(e) => setEditorValue(e.target.value)}
+                        onSelect={handleTextareaSelection}
+                        onKeyUp={handleTextareaSelection}
+                        onMouseUp={handleTextareaSelection}
+                        spellCheck={false}
+                        rows={editorLineCount}
+                        className="min-w-max flex-1 resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 outline-none whitespace-pre overflow-hidden text-foreground/90"
                       />
-                    </pre>
+                    </div>
                   </div>
-                </div>
-              )}
+                ) : (
+                  <div className="flex rounded-2xl shadow-neu-inset border-none bg-background/60 overflow-x-auto custom-scrollbar">
+                    <div className="flex min-w-full">
+                      <pre
+                        ref={viewerGutterRef}
+                        aria-hidden="true"
+                        className="sticky left-0 z-10 w-14 shrink-0 border-r border-border/10 bg-background/20 px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground/60"
+                      >
+                        {Array.from({ length: viewerLineCount }, (_, i) => i + 1).join('\n')}
+                      </pre>
+                      <pre
+                        ref={viewerCodeRef}
+                        onMouseUp={handleViewerSelection}
+                        onKeyUp={handleViewerSelection}
+                        className="min-w-max flex-1 px-4 py-3 font-mono text-xs leading-5 overflow-visible whitespace-pre"
+                      >
+                        <code
+                          className={`language-${codeLanguage}`}
+                          dangerouslySetInnerHTML={{ __html: highlightedContent }}
+                        />
+                      </pre>
+                    </div>
+                  </div>
+                )}
 
-              {!fileState.canEdit && (
-                <p className="mt-2 text-xs text-muted-foreground">
-                  Read-only mode: sign in with GitHub and select an owned repository to edit files.
-                </p>
-              )}
+                {!fileState.canEdit && (
+                  <p className="mt-2 text-xs text-muted-foreground">
+                    Read-only mode: sign in with GitHub and select an owned repository to edit files.
+                  </p>
+                )}
 
-              {fileState.saveStatus === 'succeeded' && (
-                <p className="mt-2 inline-flex items-center gap-1.5 text-xs text-emerald-600">
-                  <Check className="size-3.5" />
-                  Changes saved successfully.
-                </p>
-              )}
+                {fileState.saveStatus === 'succeeded' && (
+                  <p className="mt-2 inline-flex items-center gap-1.5 text-xs text-emerald-600">
+                    <Check className="size-3.5" />
+                    Changes saved successfully.
+                  </p>
+                )}
 
-              {fileState.saveStatus === 'failed' && fileState.saveError && (
-                <p className="mt-2 text-xs text-destructive">{fileState.saveError}</p>
-              )}
+                {fileState.saveStatus === 'failed' && fileState.saveError && (
+                  <p className="mt-2 text-xs text-destructive">{fileState.saveError}</p>
+                )}
 
-            </div>
-          )}
+              </div>
+            )}
           </div>
 
           <div className="relative min-h-104 xl:justify-self-end xl:w-full xl:max-w-120">
@@ -951,11 +949,10 @@ export default function AnalyzeFilePage() {
                 <button
                   type="button"
                   onClick={() => setIsSnippetPopoverPinned((prev) => !prev)}
-                  className={`inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[10px] transition-colors ${
-                    isSnippetPopoverPinned
+                  className={`inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-[10px] transition-colors ${isSnippetPopoverPinned
                       ? 'border-primary/40 bg-primary/10 text-primary'
                       : 'border-border/60 bg-background/70 text-muted-foreground hover:text-foreground'
-                  }`}
+                    }`}
                 >
                   <Pin className="size-3" />
                   {isSnippetPopoverPinned ? 'Pinned' : 'Pin'}
@@ -1069,11 +1066,10 @@ export default function AnalyzeFilePage() {
               <button
                 type="button"
                 onClick={() => setIsSnippetPopoverPinned((prev) => !prev)}
-                className={`rounded-lg border px-2.5 py-1 text-[10px] ${
-                  isSnippetPopoverPinned
+                className={`rounded-lg border px-2.5 py-1 text-[10px] ${isSnippetPopoverPinned
                     ? 'border-primary/40 bg-primary/10 text-primary'
                     : 'border-border/60 bg-background/70 text-muted-foreground hover:text-foreground'
-                }`}
+                  }`}
               >
                 {isSnippetPopoverPinned ? 'Unpin' : 'Pin'}
               </button>
diff --git a/client/src/features/auth/pages/LoginPage.jsx b/client/src/features/auth/pages/LoginPage.jsx
index 911815e..36374aa 100644
--- a/client/src/features/auth/pages/LoginPage.jsx
+++ b/client/src/features/auth/pages/LoginPage.jsx
@@ -69,7 +69,7 @@ export default function LoginPage() {
                 >
                   {demoLoading ? 'Authenticating...' : 'Sign in as Demo User'}
                 </Button>
-                
+
                 <div className="rounded-2xl bg-background/60 shadow-neu-inset border-none p-4 text-[10px] text-center">
                   <span className="uppercase font-black tracking-widest text-muted-foreground/60 block mb-1">Development Mode</span>
                   <span className="text-foreground/70 font-mono tracking-tight font-bold">
@@ -86,7 +86,7 @@ export default function LoginPage() {
             {' '}and{' '}
             <Link to="/privacy" className="text-gold font-bold hover:underline underline-offset-4">Privacy Policy</Link>
           </p>
-          
+
           <p className="mt-4 text-center text-sm">
             <span className="text-muted-foreground font-medium">Don't have an account? </span>
             <Link to="/signup" className="text-gold font-black hover:underline underline-offset-4">Sign Up</Link>
@@ -94,13 +94,13 @@ export default function LoginPage() {
         </div>
 
         {/* Right Side: Visual Accent */}
-        <div className="hidden lg:flex flex-col justify-end w-1/2 bg-black/40 backdrop-blur-md p-16 relative overflow-hidden animate-in fade-in slide-in-from-right-8 duration-1000">
+        <div className="hidden lg:flex flex-col justify-end w-1/2 bg-[rgb(var(--auth-panel))] p-16 relative overflow-hidden animate-in fade-in slide-in-from-right-8 duration-1000">
           {/* Abstract Gold Art */}
           <div className="absolute inset-0 opacity-40">
             <div className="absolute top-[-10%] right-[-10%] size-[500px] rounded-full bg-gold/5 blur-[120px] animate-pulse" />
             <div className="absolute bottom-[-20%] left-[-10%] size-[400px] rounded-full bg-gold/5 blur-[100px]" />
           </div>
-          
+
           <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-5" />
 
           <div className="relative z-10 space-y-6">
@@ -115,7 +115,7 @@ export default function LoginPage() {
                 Join the elite engineers using visual intelligence to master complex architectures.
               </p>
             </div>
-            
+
             <div className="pt-10 flex items-center gap-6">
               <div className="flex -space-x-3">
                 {[1, 2, 3, 4].map(i => (
diff --git a/client/src/features/auth/pages/SignupPage.jsx b/client/src/features/auth/pages/SignupPage.jsx
index a9a1e7e..e24a613 100644
--- a/client/src/features/auth/pages/SignupPage.jsx
+++ b/client/src/features/auth/pages/SignupPage.jsx
@@ -94,7 +94,7 @@ export default function SignupPage() {
             {' '}and{' '}
             <Link to="/privacy" className="text-gold font-bold hover:underline underline-offset-4">Privacy Policy</Link>
           </p>
-          
+
           <p className="mt-4 text-center text-sm">
             <span className="text-muted-foreground font-medium">Already have an account? </span>
             <Link to="/login" className="text-gold font-black hover:underline underline-offset-4">Sign In</Link>
@@ -114,13 +114,13 @@ export default function SignupPage() {
         </div>
 
         {/* Right Side: Visual Accent */}
-        <div className="hidden lg:flex flex-col justify-end w-1/2 bg-black/40 backdrop-blur-md p-16 relative overflow-hidden animate-in fade-in slide-in-from-right-8 duration-1000">
+        <div className="hidden lg:flex flex-col justify-end w-1/2 bg-[rgb(var(--auth-panel))] p-16 relative overflow-hidden animate-in fade-in slide-in-from-right-8 duration-1000">
           {/* Abstract Gold Art */}
           <div className="absolute inset-0 opacity-40">
             <div className="absolute top-[-10%] right-[-10%] size-[500px] rounded-full bg-gold/5 blur-[120px] animate-pulse" />
             <div className="absolute bottom-[-20%] left-[-10%] size-[500px] rounded-full bg-gold/5 blur-[130px]" />
           </div>
-          
+
           <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-5" />
 
           <div className="relative z-10 space-y-10">
@@ -135,8 +135,8 @@ export default function SignupPage() {
 
             <ul className="space-y-6">
               {FEATURE_LIST.map((f, i) => (
-                <li 
-                  key={f.title} 
+                <li
+                  key={f.title}
                   className="flex items-start gap-4 group/item animate-in fade-in slide-in-from-right-4 fill-mode-both"
                   style={{ animationDelay: `${1200 + i * 150}ms` }}
                 >
@@ -148,7 +148,7 @@ export default function SignupPage() {
                 </li>
               ))}
             </ul>
-            
+
             <div className="pt-6 border-t border-white/10 flex items-center justify-between">
               <div className="flex items-center gap-3">
                 <CheckCircle2 className="size-4 text-gold" />
diff --git a/client/src/features/graph/components/UploadRepoForm.jsx b/client/src/features/graph/components/UploadRepoForm.jsx
index 8c5a9a1..33830b3 100644
--- a/client/src/features/graph/components/UploadRepoForm.jsx
+++ b/client/src/features/graph/components/UploadRepoForm.jsx
@@ -51,11 +51,10 @@ function SourceToggle({ value, onChange, disabled }) {
     <div className="grid grid-cols-2 gap-2 rounded-xl shadow-neu-inset border-none bg-background/40 p-1.5 transition-all duration-300">
       <button
         type="button"
-        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${
-          value === 'local'
+        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${value === 'local'
             ? 'bg-background shadow-neu-flat text-foreground'
             : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/20'
-        }`}
+          }`}
         disabled={disabled}
         onClick={() => onChange('local')}
       >
@@ -63,11 +62,10 @@ function SourceToggle({ value, onChange, disabled }) {
       </button>
       <button
         type="button"
-        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${
-          value === 'github'
+        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${value === 'github'
             ? 'bg-background shadow-neu-flat text-foreground'
             : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/20'
-        }`}
+          }`}
         disabled={disabled}
         onClick={() => onChange('github')}
       >
@@ -82,11 +80,10 @@ function GitHubModeToggle({ value, onChange, disabled }) {
     <div className="grid grid-cols-2 gap-2 rounded-xl shadow-neu-inset border-none bg-background/40 p-1.5 transition-all duration-300">
       <button
         type="button"
-        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${
-          value === 'public'
+        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${value === 'public'
             ? 'bg-background shadow-neu-flat text-foreground'
             : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/20'
-        }`}
+          }`}
         disabled={disabled}
         onClick={() => onChange('public')}
       >
@@ -94,11 +91,10 @@ function GitHubModeToggle({ value, onChange, disabled }) {
       </button>
       <button
         type="button"
-        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${
-          value === 'owned'
+        className={`rounded-lg px-4 py-2.5 text-sm font-bold tracking-tight transition-all duration-300 active:scale-[0.98] ${value === 'owned'
             ? 'bg-background shadow-neu-flat text-foreground'
             : 'text-muted-foreground/60 hover:text-foreground hover:bg-background/20'
-        }`}
+          }`}
         disabled={disabled}
         onClick={() => onChange('owned')}
       >
@@ -155,7 +151,7 @@ export default function UploadRepoForm() {
     if (!reanalyzeConfig) return;
 
     const { source: configSource, owner, repo, branch, fullName } = reanalyzeConfig;
-    
+
     if (configSource === 'local') {
       // Re-analyzing local repository
       setSource('local');
@@ -168,7 +164,7 @@ export default function UploadRepoForm() {
       // Default to 'owned' mode since we have owner and repo available
       setSource('github');
       setGitHubMode('owned');
-      
+
       if (owner && repo) {
         // Pre-populate with the repo data
         // This allows the form to show selected repo while still allowing branch selection
@@ -179,7 +175,7 @@ export default function UploadRepoForm() {
           fullName: fullName || `${owner}/${repo}`,
           defaultBranch: branch || 'main',
         });
-        
+
         if (branch) {
           setOwnedBranch(branch);
           // Also populate ownedBranches with at least the current branch
@@ -209,18 +205,18 @@ export default function UploadRepoForm() {
     if (githubMode === 'public') {
       return Boolean(
         publicRepoUrl.trim() &&
-          publicRepoInfo &&
-          publicBranch &&
-          !publicLoading,
+        publicRepoInfo &&
+        publicBranch &&
+        !publicLoading,
       );
     }
 
     return Boolean(
       isAuthenticated &&
-        !ownedAuthRequired &&
-        selectedOwnedRepo &&
-        ownedBranch &&
-        !ownedBranchesLoading,
+      !ownedAuthRequired &&
+      selectedOwnedRepo &&
+      ownedBranch &&
+      !ownedBranchesLoading,
     );
   }, [
     source,
@@ -553,9 +549,9 @@ export default function UploadRepoForm() {
         timedOut
           ? 'Folder picker did not open in time. Please try Browse again. If it still fails, paste an absolute path manually.'
           : toErrorMessage(
-              err,
-              'Could not open native folder picker. Please paste the absolute path manually.',
-            ),
+            err,
+            'Could not open native folder picker. Please paste the absolute path manually.',
+          ),
       );
     } finally {
       setLocalBrowseLoading(false);
@@ -852,11 +848,10 @@ export default function UploadRepoForm() {
                               type="button"
                               onClick={() => handleOwnedRepoSelect(repo)}
                               disabled={isLoading}
-                              className={`flex flex-col items-start gap-0.5 rounded-xl px-4 py-3 text-left transition-all active-scale ${
-                                selectedOwnedRepo?.id === repo.id
+                              className={`flex flex-col items-start gap-0.5 rounded-xl px-4 py-3 text-left transition-all active-scale ${selectedOwnedRepo?.id === repo.id
                                   ? 'bg-background shadow-neu-flat text-foreground'
                                   : 'text-muted-foreground hover:bg-background/20 hover:text-foreground'
-                              }`}
+                                }`}
                             >
                               <span className="text-sm font-bold tracking-tight">{repo.name}</span>
                               <span className="text-[10px] opacity-60">{repo.fullName}</span>
diff --git a/client/src/index.css b/client/src/index.css
index b725130..449bfe4 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -6,9 +6,12 @@
 @layer base {
   :root {
     /* Refined for Neumorphism - subtle mid-tones */
-    --background: 240 242 245;     /* #F0F2F5 */
-    --foreground: 30 41 59;        /* #1E293B */
-    --card: 240 242 245;           /* Same as background for neumorphism */
+    --background: 240 242 245;
+    /* #F0F2F5 */
+    --foreground: 30 41 59;
+    /* #1E293B */
+    --card: 240 242 245;
+    /* Same as background for neumorphism */
     --card-foreground: 30 41 59;
     --popover: 255 255 255;
     --popover-foreground: 30 41 59;
@@ -16,18 +19,22 @@
     --primary-foreground: 255 255 255;
     --secondary: 100 116 139;
     --secondary-foreground: 248 250 252;
-    --muted: 226 232 240;          /* #E2E8F0 */
+    --muted: 226 232 240;
+    /* #E2E8F0 */
     --muted-foreground: 100 116 139;
     --accent: 212 175 55;
     --accent-foreground: 30 41 59;
     --border: 210 214 220;
     --input: 240 242 245;
     --ring: 212 175 55;
-    --radius: 1rem;                /* Rounder for neumorphism */
+    --auth-panel: 11 11 11;
+    --radius: 1rem;
+    /* Rounder for neumorphism */
   }
 
   .dark {
-    --background: 15 15 15;        /* Deep Black */
+    --background: 15 15 15;
+    /* Deep Black */
     --foreground: 241 245 249;
     --card: 15 15 15;
     --card-foreground: 241 245 249;
@@ -44,6 +51,7 @@
     --border: 38 38 38;
     --input: 15 15 15;
     --ring: 212 175 55;
+    --auth-panel: 11 11 11;
   }
 }
 
@@ -58,11 +66,11 @@
   --color-muted-foreground: rgb(var(--muted-foreground));
   --color-border: rgb(var(--border));
   --color-gold: #D4AF37;
-  
+
   --font-sans: 'Outfit', sans-serif;
   --font-display: 'Sora', sans-serif;
   --font-mono: 'JetBrains Mono', monospace;
-  
+
   --radius-xl: 1rem;
   --radius-2xl: 1.5rem;
 }
@@ -71,6 +79,7 @@
   * {
     border-color: rgb(var(--border));
   }
+
   body {
     background-color: rgb(var(--background));
     color: rgb(var(--foreground));
@@ -137,6 +146,7 @@
   .shadow-neu-inset {
     box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
   }
+
   .dark .shadow-neu-inset {
     box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -1px -1px 3px rgba(255, 255, 255, 0.03);
   }
@@ -144,17 +154,18 @@
   .shadow-neu-flat {
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05), -4px -4px 8px rgba(255, 255, 255, 0.8);
   }
+
   .dark .shadow-neu-flat {
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.02);
   }
-  
+
   .glass-premium {
     background: rgba(var(--background) / 0.6);
     backdrop-filter: blur(12px) saturate(180%);
     -webkit-backdrop-filter: blur(12px) saturate(180%);
     border: 1px solid rgba(255, 255, 255, 0.12);
   }
-  
+
   .text-gradient-gold {
     background: linear-gradient(135deg, #D4AF37 0%, #F1D382 50%, #D4AF37 100%);
     -webkit-background-clip: text;
@@ -170,6 +181,7 @@
   }
 
   /* Active Scale Utility */
+
   .active-scale:active {
     transform: scale(0.97);
   }

From 6b928204a31b6c37f4f70ceedf99921386a540bb Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 23:13:01 +0530
Subject: [PATCH 15/19] feat: Implement new Polyglot AST parser with
 tree-sitter

---
 server/package-lock.json                      |  55 ++---
 server/package.json                           |   3 +-
 server/src/agents/core/SupervisorAgent.js     |   4 +-
 server/src/agents/core/confidence.js          |  15 +-
 .../src/agents/parser/PolyglotParserAgent.js  | 196 ++++++++++++++++++
 server/src/agents/parser/sqlParser.js         |  49 +++++
 server/src/agents/parser/treesitterWorker.js  | 167 +++++++++++++++
 server/src/agents/scanner/ScannerAgent.js     |  12 +-
 8 files changed, 466 insertions(+), 35 deletions(-)
 create mode 100644 server/src/agents/parser/PolyglotParserAgent.js
 create mode 100644 server/src/agents/parser/sqlParser.js
 create mode 100644 server/src/agents/parser/treesitterWorker.js

diff --git a/server/package-lock.json b/server/package-lock.json
index 57cf535..19e107a 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -29,7 +29,8 @@
         "passport-github2": "^0.1.12",
         "passport-jwt": "^4.0.1",
         "pg": "^8.20.0",
-        "pgvector": "^0.2.1"
+        "pgvector": "^0.2.1",
+        "web-tree-sitter": "^0.25.10"
       },
       "devDependencies": {
         "@vitest/coverage-v8": "^4.0.8",
@@ -96,31 +97,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
-      "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.0",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz",
-      "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz",
@@ -128,7 +104,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -580,6 +555,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.1.tgz",
       "integrity": "sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -601,6 +577,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/context-async-hooks/-/context-async-hooks-2.6.1.tgz",
       "integrity": "sha512-XHzhwRNkBpeP8Fs/qjGrAf9r9PRv67wkJQ/7ZPaBQQ68DYlTBBx5MF9LvPx7mhuXcDessKK2b+DcxqwpgkcivQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
       },
@@ -613,6 +590,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.6.1.tgz",
       "integrity": "sha512-8xHSGWpJP9wBxgBpnqGL0R3PbdWQndL1Qp50qrg71+B28zK5OQmUgcDKLJgzyAAV38t4tOyLMGDD60LneR5W8g==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/semantic-conventions": "^1.29.0"
       },
@@ -1036,6 +1014,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.6.1.tgz",
       "integrity": "sha512-lID/vxSuKWXM55XhAKNoYXu9Cutoq5hFdkbTdI/zDKQktXzcWBVhNsOkiZFTMU9UtEWuGRNe0HUgmsFldIdxVA==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.6.1",
         "@opentelemetry/semantic-conventions": "^1.29.0"
@@ -1052,6 +1031,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.6.1.tgz",
       "integrity": "sha512-r86ut4T1e8vNwB35CqCcKd45yzqH6/6Wzvpk2/cZB8PsPLlZFTvrh8yfOS3CYZYcUmAx4hHTZJ8AO8Dj8nrdhw==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.6.1",
         "@opentelemetry/resources": "2.6.1",
@@ -1069,6 +1049,7 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.40.0.tgz",
       "integrity": "sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=14"
       }
@@ -1871,6 +1852,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2602,6 +2584,7 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4543,6 +4526,7 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
       "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.12.0",
         "pg-pool": "^3.13.0",
@@ -5317,6 +5301,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5474,6 +5459,7 @@
       "integrity": "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",
@@ -5565,6 +5551,7 @@
       "integrity": "sha512-xjR1dMTVHlFLh98JE3i/f/WePqJsah4A0FK9cc8Ehp9Udk0AZk6ccpIZhh1qJ/yxVWRZ+Q54ocnD8TXmkhspGg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.1.2",
         "@vitest/mocker": "4.1.2",
@@ -5654,6 +5641,20 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/web-tree-sitter": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/web-tree-sitter/-/web-tree-sitter-0.25.10.tgz",
+      "integrity": "sha512-Y09sF44/13XvgVKgO2cNDw5rGk6s26MgoZPXLESvMXeefBf7i6/73eFurre0IsTW6E14Y0ArIzhUMmjoc7xyzA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/emscripten": "^1.40.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/emscripten": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/server/package.json b/server/package.json
index c590edf..469b3e9 100644
--- a/server/package.json
+++ b/server/package.json
@@ -37,7 +37,8 @@
     "passport-github2": "^0.1.12",
     "passport-jwt": "^4.0.1",
     "pg": "^8.20.0",
-    "pgvector": "^0.2.1"
+    "pgvector": "^0.2.1",
+    "web-tree-sitter": "^0.25.10"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.0.8",
diff --git a/server/src/agents/core/SupervisorAgent.js b/server/src/agents/core/SupervisorAgent.js
index 2d39703..1fab5c7 100644
--- a/server/src/agents/core/SupervisorAgent.js
+++ b/server/src/agents/core/SupervisorAgent.js
@@ -1,6 +1,6 @@
 import { IngestionAgent } from '../ingestion/IngestionAgent.js';
 import { ScannerAgent } from '../scanner/ScannerAgent.js';
-import { ParserAgent } from '../parser/ParserAgent.js';
+import { PolyglotParserAgent } from '../parser/PolyglotParserAgent.js';
 import { GraphBuilderAgent } from '../graph/GraphBuilderAgent.js';
 import { EnrichmentAgent } from '../enrichment/EnrichmentAgent.js';
 import { EmbeddingAgent } from '../embedding/EmbeddingAgent.js';
@@ -28,7 +28,7 @@ export class SupervisorAgent {
     this.agents = {
       ingestion: new IngestionAgent(),
       scanner: new ScannerAgent(),
-      parser: new ParserAgent(),
+      parser: new PolyglotParserAgent(),
       graphBuilder: new GraphBuilderAgent(),
       enrichment: new EnrichmentAgent(),
       embedding: new EmbeddingAgent(),
diff --git a/server/src/agents/core/confidence.js b/server/src/agents/core/confidence.js
index 6020395..84795ce 100644
--- a/server/src/agents/core/confidence.js
+++ b/server/src/agents/core/confidence.js
@@ -23,7 +23,7 @@ export const CONFIDENCE_THRESHOLDS = {
 export const DEFAULT_AGENT_WEIGHTS = {
 	'ingestion-agent': 0.1,
 	'scanner-agent': 0.1,
-	'parser-agent': 0.25,
+	'polyglot-parser-agent': 0.25,
 	'graph-builder-agent': 0.25,
 	'enrichment-agent': 0.1,
 	'embedding-agent': 0.1,
@@ -77,6 +77,19 @@ export function scoreParser({ totalAttempted = 0, successCount = 0, failedCount
 	return round3(parseRate * (1 - errorPenalty));
 }
 
+export function scorePolyglotParser({
+	totalAttempted = 0,
+	successCount = 0,
+	failedCount = 0,
+	languageBreakdown = {},
+} = {}) {
+	const parseRate = safeDiv(successCount, Math.max(totalAttempted, 1), 0);
+	const errorPenalty = Math.min(0.3, safeDiv(failedCount, Math.max(totalAttempted, 1), 0));
+	const langCount = Object.keys(languageBreakdown || {}).length;
+	const langBonus = Math.min(0.05, langCount * 0.005);
+	return round3(parseRate * (1 - errorPenalty) + langBonus);
+}
+
 export function scoreGraphBuilder({
 	resolvedEdges = 0,
 	resolvedLocalEdges = resolvedEdges,
diff --git a/server/src/agents/parser/PolyglotParserAgent.js b/server/src/agents/parser/PolyglotParserAgent.js
new file mode 100644
index 0000000..162ef68
--- /dev/null
+++ b/server/src/agents/parser/PolyglotParserAgent.js
@@ -0,0 +1,196 @@
+import path from 'path';
+import os from 'os';
+import { readFile } from 'fs/promises';
+import { Worker } from 'worker_threads';
+import pLimit from 'p-limit';
+import { BaseAgent } from '../core/BaseAgent.js';
+import { scorePolyglotParser } from '../core/confidence.js';
+import { parseSql } from './sqlParser.js';
+
+const BABEL_EXTS = new Set(['.js', '.ts', '.jsx', '.tsx']);
+const TREESITTER_EXTS = new Set(['.py', '.java', '.go', '.rs', '.rb', '.cs', '.kt', '.kts', '.php']);
+const SQL_EXTS = new Set(['.sql']);
+
+function langFromExt(ext) {
+  const map = {
+    '.py': 'python',
+    '.java': 'java',
+    '.go': 'go',
+    '.rs': 'rust',
+    '.rb': 'ruby',
+    '.cs': 'c_sharp',
+    '.kt': 'kotlin',
+    '.kts': 'kotlin',
+    '.php': 'php',
+  };
+
+  return map[ext] || null;
+}
+
+function normalizeRelative(filePath, rootDir) {
+  return path.relative(rootDir, filePath).replace(/\\/g, '/');
+}
+
+function parseConcurrency() {
+  const configured = Number(process.env.PARSER_WORKER_CONCURRENCY);
+  if (Number.isInteger(configured) && configured > 0) return configured;
+  return Math.max(1, os.cpus().length - 1);
+}
+
+function extensionGroup(ext) {
+  if (BABEL_EXTS.has(ext)) return 'babel';
+  if (TREESITTER_EXTS.has(ext)) return langFromExt(ext) || 'treesitter';
+  if (SQL_EXTS.has(ext)) return 'sql';
+  return 'unsupported';
+}
+
+function emptyParseResult(relativePath, parseError) {
+  return {
+    relativePath,
+    imports: [],
+    declarations: [],
+    functionNodes: [],
+    metrics: {},
+    parseError,
+  };
+}
+
+export class PolyglotParserAgent extends BaseAgent {
+  agentId = 'polyglot-parser-agent';
+  maxRetries = 2;
+  timeoutMs = 300_000;
+
+  async process(input, context) {
+    const start = Date.now();
+    const errors = [];
+    const warnings = [];
+
+    const rootDir = input?.extractedPath || input?.rootDir;
+    const manifest = Array.isArray(input?.manifest)
+      ? input.manifest
+      : (input?.files || []).map((absolutePath) => ({
+          absolutePath,
+          relativePath: rootDir ? normalizeRelative(absolutePath, rootDir) : absolutePath,
+        }));
+
+    if (!rootDir || manifest.length === 0) {
+      return this.buildResult({
+        jobId: context?.jobId,
+        status: 'failed',
+        confidence: 0,
+        data: {},
+        errors: [{ code: 400, message: 'PolyglotParserAgent requires extractedPath and manifest.' }],
+        warnings,
+        metrics: {},
+        processingTimeMs: Date.now() - start,
+      });
+    }
+
+    const languageBreakdown = {};
+    for (const file of manifest) {
+      const ext = path.extname(file.absolutePath).toLowerCase();
+      const key = extensionGroup(ext);
+      languageBreakdown[key] = (languageBreakdown[key] || 0) + 1;
+    }
+
+    const limit = pLimit(parseConcurrency());
+    const parsedFiles = await Promise.all(
+      manifest.map((file) => limit(() => this._parseFile(file))),
+    );
+
+    let successCount = 0;
+    let failedCount = 0;
+
+    for (const parsed of parsedFiles) {
+      if (parsed.parseError) {
+        failedCount += 1;
+        warnings.push(`Parse error in ${parsed.relativePath}: ${parsed.parseError}`);
+      } else {
+        successCount += 1;
+      }
+    }
+
+    const summary = {
+      totalAttempted: manifest.length,
+      successCount,
+      failedCount,
+      languageBreakdown,
+    };
+
+    const confidence = scorePolyglotParser(summary);
+    const status = failedCount === manifest.length ? 'failed' : failedCount > 0 ? 'partial' : 'success';
+
+    return this.buildResult({
+      jobId: context?.jobId,
+      status,
+      confidence,
+      data: {
+        parsedFiles,
+        summary,
+      },
+      errors,
+      warnings,
+      metrics: {
+        totalAttempted: manifest.length,
+        successCount,
+        failedCount,
+      },
+      processingTimeMs: Date.now() - start,
+    });
+  }
+
+  async _parseFile(file) {
+    const ext = path.extname(file.absolutePath).toLowerCase();
+
+    if (SQL_EXTS.has(ext)) {
+      return this._parseSqlFile(file);
+    }
+
+    if (BABEL_EXTS.has(ext)) {
+      return this._runWorker('parseWorker.js', {
+        filePath: file.absolutePath,
+        relativePath: file.relativePath,
+      });
+    }
+
+    if (TREESITTER_EXTS.has(ext)) {
+      return this._runWorker('treesitterWorker.js', {
+        filePath: file.absolutePath,
+        relativePath: file.relativePath,
+        language: langFromExt(ext),
+      });
+    }
+
+    return emptyParseResult(file.relativePath, `Unsupported extension: ${ext}`);
+  }
+
+  async _parseSqlFile(file) {
+    try {
+      const content = await readFile(file.absolutePath, 'utf8');
+      return parseSql(content, file.relativePath);
+    } catch (error) {
+      return emptyParseResult(file.relativePath, error.message);
+    }
+  }
+
+  _runWorker(workerFile, workerData) {
+    return new Promise((resolve) => {
+      const worker = new Worker(new URL(workerFile, import.meta.url), { workerData });
+
+      const timeout = setTimeout(() => {
+        worker.terminate();
+        resolve(emptyParseResult(workerData.relativePath, `Worker timeout (${workerFile})`));
+      }, 30_000);
+
+      worker.once('message', (message) => {
+        clearTimeout(timeout);
+        resolve(message);
+      });
+
+      worker.once('error', (error) => {
+        clearTimeout(timeout);
+        resolve(emptyParseResult(workerData.relativePath, error.message));
+      });
+    });
+  }
+}
diff --git a/server/src/agents/parser/sqlParser.js b/server/src/agents/parser/sqlParser.js
new file mode 100644
index 0000000..a7ed913
--- /dev/null
+++ b/server/src/agents/parser/sqlParser.js
@@ -0,0 +1,49 @@
+const CREATE_TABLE_RE = /CREATE\s+(?:OR\s+REPLACE\s+)?TABLE\s+(?:IF\s+NOT\s+EXISTS\s+)?(?:\w+\.)?(\w+)/gi;
+const FROM_RE = /\bFROM\s+(?:\w+\.)?(\w+)/gi;
+const JOIN_RE = /\bJOIN\s+(?:\w+\.)?(\w+)/gi;
+const INSERT_RE = /\bINSERT\s+INTO\s+(?:\w+\.)?(\w+)/gi;
+const UPDATE_RE = /\bUPDATE\s+(?:\w+\.)?(\w+)/gi;
+const COLUMN_RE = /\b(\w+)\s+(?:INT|TEXT|VARCHAR|BOOLEAN|NUMERIC|TIMESTAMPTZ|UUID|JSONB|SERIAL|BIGINT|FLOAT|REAL|DATE|CHAR)\b/gi;
+
+function matchAll(re, str) {
+  const matches = [];
+  const local = new RegExp(re.source, re.flags);
+  let current;
+  while ((current = local.exec(str)) !== null) {
+    matches.push(current[1]);
+  }
+  return matches;
+}
+
+export function parseSql(content, relativePath) {
+  const tables = new Set([
+    ...matchAll(CREATE_TABLE_RE, content),
+    ...matchAll(FROM_RE, content),
+    ...matchAll(JOIN_RE, content),
+    ...matchAll(INSERT_RE, content),
+    ...matchAll(UPDATE_RE, content),
+  ]);
+
+  const columns = new Set(matchAll(COLUMN_RE, content));
+
+  const imports = [...tables].map((table) => `table:${table}`);
+
+  const declarations = [
+    ...[...tables].map((name) => ({ name, kind: 'table' })),
+    ...[...columns].map((name) => ({ name, kind: 'column' })),
+  ];
+
+  return {
+    relativePath,
+    imports,
+    declarations,
+    functionNodes: [],
+    metrics: {
+      loc: content.split(/\r?\n/).length,
+      tableCount: tables.size,
+      columnCount: columns.size,
+      importCount: tables.size,
+    },
+    parseError: null,
+  };
+}
diff --git a/server/src/agents/parser/treesitterWorker.js b/server/src/agents/parser/treesitterWorker.js
new file mode 100644
index 0000000..09f5884
--- /dev/null
+++ b/server/src/agents/parser/treesitterWorker.js
@@ -0,0 +1,167 @@
+import { readFile } from 'fs/promises';
+import path from 'path';
+import { parentPort, workerData } from 'worker_threads';
+import Parser from 'web-tree-sitter';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const QUERIES = {
+  python: {
+    imports: `
+      (import_statement (dotted_name) @import)
+      (import_from_statement module_name: (dotted_name) @import)
+    `,
+    declarations: `
+      (function_definition name: (identifier) @name) @fn
+      (class_definition name: (identifier) @name) @cls
+    `,
+  },
+  java: {
+    imports: `(import_declaration (scoped_identifier) @import)`,
+    declarations: `
+      (method_declaration name: (identifier) @name) @fn
+      (class_declaration name: (identifier) @name) @cls
+      (interface_declaration name: (identifier) @name) @iface
+    `,
+  },
+  go: {
+    imports: `(import_spec path: (interpreted_string_literal) @import)`,
+    declarations: `
+      (function_declaration name: (identifier) @name) @fn
+      (type_declaration (type_spec name: (type_identifier) @name)) @type
+    `,
+  },
+  rust: {
+    imports: `(use_declaration argument: (_) @import)`,
+    declarations: `
+      (function_item name: (identifier) @name) @fn
+      (struct_item name: (type_identifier) @name) @struct
+      (enum_item name: (type_identifier) @name) @enum
+    `,
+  },
+  ruby: {
+    imports: `(call method: (identifier) @method (#match? @method "^require")) @import`,
+    declarations: `
+      (method name: (identifier) @name) @fn
+      (singleton_method name: (identifier) @name) @fn
+      (class name: (constant) @name) @cls
+    `,
+  },
+  c_sharp: {
+    imports: `(using_directive (identifier) @import)`,
+    declarations: `
+      (method_declaration name: (identifier) @name) @fn
+      (class_declaration name: (identifier) @name) @cls
+      (interface_declaration name: (identifier) @name) @iface
+    `,
+  },
+  kotlin: {
+    imports: `(import_header (identifier) @import)`,
+    declarations: `
+      (function_declaration (simple_identifier) @name) @fn
+      (class_declaration (type_identifier) @name) @cls
+    `,
+  },
+  php: {
+    imports: `(include_expression (string) @import)`,
+    declarations: `
+      (function_definition name: (name) @name) @fn
+      (class_declaration name: (name) @name) @cls
+    `,
+  },
+};
+
+function emptyResult(relativePath, parseError) {
+  return {
+    relativePath,
+    imports: [],
+    declarations: [],
+    functionNodes: [],
+    metrics: {},
+    parseError,
+  };
+}
+
+function declarationKindFromCaptures(captures) {
+  const marker = captures.find((capture) => capture.name !== 'name' && capture.name !== 'import');
+  return marker?.name || 'fn';
+}
+
+async function run() {
+  const { filePath, relativePath, language } = workerData;
+
+  if (!filePath || !relativePath || !language) {
+    parentPort.postMessage(emptyResult(relativePath || 'unknown', 'Worker missing required filePath, relativePath, or language.'));
+    return;
+  }
+
+  const queries = QUERIES[language] || { imports: '', declarations: '' };
+
+  await Parser.init();
+
+  const wasmPath = path.resolve(__dirname, '../../../wasm', `tree-sitter-${language}.wasm`);
+  const lang = await Parser.Language.load(wasmPath);
+
+  const parser = new Parser();
+  parser.setLanguage(lang);
+
+  const source = await readFile(filePath, 'utf8');
+  const tree = parser.parse(source);
+  const root = tree.rootNode;
+
+  const imports = [];
+  const declarations = [];
+  const functionNodes = [];
+  const seenImports = new Set();
+  const seenDecls = new Set();
+
+  if (queries.imports) {
+    const query = lang.query(queries.imports);
+    for (const match of query.matches(root)) {
+      for (const capture of match.captures) {
+        if (capture.name !== 'import') continue;
+        const value = capture.node.text.replace(/['"]/g, '');
+        if (!value || seenImports.has(value)) continue;
+        seenImports.add(value);
+        imports.push(value);
+      }
+    }
+  }
+
+  if (queries.declarations) {
+    const query = lang.query(queries.declarations);
+    for (const match of query.matches(root)) {
+      const kind = declarationKindFromCaptures(match.captures);
+      for (const capture of match.captures) {
+        if (capture.name !== 'name') continue;
+
+        const name = capture.node.text;
+        const key = `${kind}:${name}`;
+        if (!name || seenDecls.has(key)) continue;
+
+        seenDecls.add(key);
+        declarations.push({ name, kind });
+        functionNodes.push({ name, kind, calls: [], loc: null });
+      }
+    }
+  }
+
+  parentPort.postMessage({
+    relativePath,
+    imports,
+    declarations,
+    functionNodes,
+    metrics: {
+      loc: source.split(/\r?\n/).length,
+      importCount: imports.length,
+      declarationCount: declarations.length,
+    },
+    parseError: null,
+  });
+}
+
+run().catch((error) => {
+  parentPort.postMessage(emptyResult(workerData?.relativePath || 'unknown', error.message));
+});
diff --git a/server/src/agents/scanner/ScannerAgent.js b/server/src/agents/scanner/ScannerAgent.js
index 0912b84..12816eb 100644
--- a/server/src/agents/scanner/ScannerAgent.js
+++ b/server/src/agents/scanner/ScannerAgent.js
@@ -17,12 +17,16 @@ const DEFAULT_SKIP_DIRS = new Set([
 ]);
 
 const ALLOWED_EXTENSIONS = new Set([
-  '.js',
-  '.ts',
-  '.jsx',
-  '.tsx',
+  '.js', '.ts', '.jsx', '.tsx',
   '.py',
+  '.java',
   '.go',
+  '.rs',
+  '.rb',
+  '.cs',
+  '.kt', '.kts',
+  '.php',
+  '.sql',
 ]);
 
 function normalizeRelative(filePath, rootDir) {

From 3b79310643af493093f889c15957542d8fa744fc Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Tue, 31 Mar 2026 23:44:17 +0530
Subject: [PATCH 16/19] feat: implement contracts inference agents

---
 server/package-lock.json                      |  10 +
 server/package.json                           |   3 +-
 server/src/agents/core/SupervisorAgent.js     |  13 ++
 .../agents/core/__tests__/confidence.test.js  |   2 +-
 .../enrichment/ContractInferenceAgent.js      | 217 ++++++++++++++++++
 server/src/agents/parser/treesitterWorker.js  |  31 ++-
 .../agents/persistence/PersistenceAgent.js    |  58 ++++-
 .../migrations/006_contracts.sql              |  25 ++
 server/test/parser.multilang.test.js          |  18 +-
 9 files changed, 360 insertions(+), 17 deletions(-)
 create mode 100644 server/src/agents/enrichment/ContractInferenceAgent.js
 create mode 100644 server/src/infrastructure/migrations/006_contracts.sql

diff --git a/server/package-lock.json b/server/package-lock.json
index 19e107a..554a055 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -30,6 +30,7 @@
         "passport-jwt": "^4.0.1",
         "pg": "^8.20.0",
         "pgvector": "^0.2.1",
+        "tree-sitter-wasms": "^0.1.13",
         "web-tree-sitter": "^0.25.10"
       },
       "devDependencies": {
@@ -5351,6 +5352,15 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/tree-sitter-wasms": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/tree-sitter-wasms/-/tree-sitter-wasms-0.1.13.tgz",
+      "integrity": "sha512-wT+cR6DwaIz80/vho3AvSF0N4txuNx/5bcRKoXouOfClpxh/qqrF4URNLQXbbt8MaAxeksZcZd1j8gcGjc+QxQ==",
+      "license": "Unlicense",
+      "dependencies": {
+        "tree-sitter-wasms": "^0.1.11"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
diff --git a/server/package.json b/server/package.json
index 469b3e9..3924a3d 100644
--- a/server/package.json
+++ b/server/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "start": "node index.js",
     "dev": "nodemon index.js",
-    "migrate": "psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/001_initial.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/002_function_nodes.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/003_share_tokens.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/004_analysis_jobs_metadata.sql",
+    "migrate": "psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/001_initial.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/002_function_nodes.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/003_share_tokens.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/004_analysis_jobs_metadata.sql && psql \"$DATABASE_URL\" -v ON_ERROR_STOP=1 -f ./src/infrastructure/migrations/006_contracts.sql",
     "db:migrate": "npm run migrate",
     "test": "node --test test/ai.queries.test.js test/ai.snippet-impact.test.js test/ai.suggest-refactor.test.js test/graph.heatmap.test.js test/github.webhook.test.js test/parser.multilang.test.js test/pr-comment.test.js test/snippet.analyzer.confidence.test.js",
     "test:ai-queries": "node --test test/ai.queries.test.js",
@@ -38,6 +38,7 @@
     "passport-jwt": "^4.0.1",
     "pg": "^8.20.0",
     "pgvector": "^0.2.1",
+    "tree-sitter-wasms": "^0.1.13",
     "web-tree-sitter": "^0.25.10"
   },
   "devDependencies": {
diff --git a/server/src/agents/core/SupervisorAgent.js b/server/src/agents/core/SupervisorAgent.js
index 1fab5c7..be5c498 100644
--- a/server/src/agents/core/SupervisorAgent.js
+++ b/server/src/agents/core/SupervisorAgent.js
@@ -3,6 +3,7 @@ import { ScannerAgent } from '../scanner/ScannerAgent.js';
 import { PolyglotParserAgent } from '../parser/PolyglotParserAgent.js';
 import { GraphBuilderAgent } from '../graph/GraphBuilderAgent.js';
 import { EnrichmentAgent } from '../enrichment/EnrichmentAgent.js';
+import { ContractInferenceAgent } from '../enrichment/ContractInferenceAgent.js';
 import { EmbeddingAgent } from '../embedding/EmbeddingAgent.js';
 import { PersistenceAgent } from '../persistence/PersistenceAgent.js';
 import { AuditLogger } from './AuditLogger.js';
@@ -31,6 +32,7 @@ export class SupervisorAgent {
       parser: new PolyglotParserAgent(),
       graphBuilder: new GraphBuilderAgent(),
       enrichment: new EnrichmentAgent(),
+      contractInference: new ContractInferenceAgent(),
       embedding: new EmbeddingAgent(),
       persistence: new PersistenceAgent({ db }),
     };
@@ -92,6 +94,16 @@ export class SupervisorAgent {
       agentTrace.push(enrichmentResult);
       Object.assign(pipelineData, enrichmentResult.data);
 
+      await this._updateJobStatus(jobId, 'inferring-contracts');
+      const contractResult = await this._runWithSupervision(
+        this.agents.contractInference,
+        { graph: pipelineData.graph, extractedPath: pipelineData.extractedPath },
+        context,
+        { abortOnCritical: false },
+      );
+      agentTrace.push(contractResult);
+      Object.assign(pipelineData, contractResult.data);
+
       await this._updateJobStatus(jobId, 'embedding');
       const embeddingResult = await this._runWithSupervision(
         this.agents.embedding,
@@ -116,6 +128,7 @@ export class SupervisorAgent {
           edges: pipelineData.edges,
           functionNodes: pipelineData.functionNodes,
           enriched: pipelineData.enriched,
+          contracts: pipelineData.contracts,
           embeddings: pipelineData.embeddings,
           topology: pipelineData.topology,
         },
diff --git a/server/src/agents/core/__tests__/confidence.test.js b/server/src/agents/core/__tests__/confidence.test.js
index c727508..e9f2c75 100644
--- a/server/src/agents/core/__tests__/confidence.test.js
+++ b/server/src/agents/core/__tests__/confidence.test.js
@@ -30,7 +30,7 @@ describe('scoreParser', () => {
 describe('computeOverallConfidence', () => {
   it('applies parser weight and drags overall confidence down for low parser score', () => {
     const trace = [
-      { agentId: 'parser-agent', confidence: 0.3 },
+      { agentId: 'polyglot-parser-agent', confidence: 0.3 },
       { agentId: 'graph-builder-agent', confidence: 0.95 },
       { agentId: 'persistence-agent', confidence: 1.0 },
     ];
diff --git a/server/src/agents/enrichment/ContractInferenceAgent.js b/server/src/agents/enrichment/ContractInferenceAgent.js
new file mode 100644
index 0000000..502fbfb
--- /dev/null
+++ b/server/src/agents/enrichment/ContractInferenceAgent.js
@@ -0,0 +1,217 @@
+import { readFile } from 'fs/promises';
+import path from 'path';
+import OpenAI from 'openai';
+import crypto from 'crypto';
+import pLimit from 'p-limit';
+import { BaseAgent } from '../core/BaseAgent.js';
+import { redisClient } from '../../infrastructure/connections.js';
+
+const MODEL = process.env.OPENAI_MODEL || 'gpt-4.1-mini';
+const CACHE_TTL = Number(process.env.AI_CACHE_TTL_SECONDS || 3600);
+const CONCURRENCY = Number(process.env.CONTRACT_CONCURRENCY || 3);
+
+const ROUTE_INDICATORS = [
+  /\.(?:router|routes|controller|handler|api)\./i,
+  /(?:router|app|bp)\.(get|post|put|delete|patch)\s*\(/,
+  /@(?:Get|Post|Put|Delete|Patch|Request)Mapping/,
+  /@app\.route/,
+  /def\s+\w+_view\s*\(/,
+  /fastapi|flask\.Blueprint/i,
+];
+
+function normalizeConcurrency(value, fallback) {
+  return Number.isInteger(value) && value > 0 ? value : fallback;
+}
+
+function isRouteFile(filePath, content) {
+  return ROUTE_INDICATORS.some((re) => re.test(filePath) || re.test(content.slice(0, 2000)));
+}
+
+function buildContractPrompt(filePath, content) {
+  const snippet = content.slice(0, 10_000);
+  return [
+    'You are an API contract analyser. Inspect the route handler file below.',
+    'Return ONLY valid JSON. No markdown. No preamble.',
+    '',
+    `File: ${filePath}`,
+    '---',
+    snippet,
+    '---',
+    '',
+    'Return this exact schema:',
+    '{',
+    '  "routes": [',
+    '    {',
+    '      "method": "GET|POST|PUT|DELETE|PATCH",',
+    '      "path": "/api/example",',
+    '      "requestBody": { "type": "object", "properties": {} },',
+    '      "responseBody": { "type": "object", "properties": {} },',
+    '      "queryParams": ["param1"],',
+    '      "pathParams": [":id"],',
+    '      "confidenceScore": 0.0',
+    '    }',
+    '  ],',
+    '  "envDependencies": ["OPENAI_API_KEY"],',
+    '  "externalServices": ["stripe.com", "redis"],',
+    '  "cachingPatterns": ["redis.set", "lru-cache"]',
+    '}',
+  ].join('\n');
+}
+
+function normalizeContract(payload) {
+  return {
+    routes: Array.isArray(payload?.routes) ? payload.routes : [],
+    envDependencies: Array.isArray(payload?.envDependencies) ? payload.envDependencies : [],
+    externalServices: Array.isArray(payload?.externalServices) ? payload.externalServices : [],
+    cachingPatterns: Array.isArray(payload?.cachingPatterns) ? payload.cachingPatterns : [],
+  };
+}
+
+function cacheKeyFor(filePath, content) {
+  const hash = crypto.createHash('sha256');
+  hash.update(filePath);
+  hash.update('\u0000');
+  hash.update(content);
+  return `contract:${hash.digest('hex')}`;
+}
+
+export class ContractInferenceAgent extends BaseAgent {
+  agentId = 'contract-inference-agent';
+  maxRetries = 1;
+  timeoutMs = 180_000;
+
+  constructor({ openaiClient, redis } = {}) {
+    super();
+    this.openai =
+      openaiClient ||
+      (process.env.OPENAI_API_KEY ? new OpenAI({ apiKey: process.env.OPENAI_API_KEY }) : null);
+    this.redis = redis || redisClient;
+    this.model = MODEL;
+    this.concurrency = normalizeConcurrency(CONCURRENCY, 3);
+    this.cacheTtlSeconds = Number.isFinite(CACHE_TTL) && CACHE_TTL > 0 ? CACHE_TTL : 3600;
+  }
+
+  async process(input, context) {
+    const start = Date.now();
+    const graph = input?.graph || {};
+    const extractedPath = input?.extractedPath || '';
+    const warnings = [];
+    const errors = [];
+    const contracts = {};
+
+    if (!this.openai) {
+      return this.buildResult({
+        jobId: context?.jobId,
+        status: 'failed',
+        confidence: 0,
+        data: {},
+        errors: [{ code: 500, message: 'OPENAI_API_KEY required for ContractInferenceAgent.' }],
+        warnings,
+        metrics: {},
+        processingTimeMs: Date.now() - start,
+      });
+    }
+
+    const entries = Object.entries(graph);
+    if (!extractedPath || entries.length === 0) {
+      return this.buildResult({
+        jobId: context?.jobId,
+        status: 'partial',
+        confidence: 0.5,
+        data: { contracts, stats: { attempted: 0, succeeded: 0, skipped: 0 } },
+        errors,
+        warnings: [...warnings, 'Contract inference skipped due to missing graph or extractedPath.'],
+        metrics: { routeFilesFound: 0, succeeded: 0, skipped: 0 },
+        processingTimeMs: Date.now() - start,
+      });
+    }
+
+    const limit = pLimit(this.concurrency);
+    let attempted = 0;
+    let succeeded = 0;
+    let skipped = 0;
+
+    await Promise.all(
+      entries.map(([filePath]) =>
+        limit(async () => {
+          const absolute = path.join(extractedPath, filePath);
+          let content = '';
+
+          try {
+            content = await readFile(absolute, 'utf8');
+          } catch {
+            skipped += 1;
+            return;
+          }
+
+          if (!isRouteFile(filePath, content)) {
+            skipped += 1;
+            return;
+          }
+
+          const key = cacheKeyFor(filePath, content);
+          const cached = await this._readCache(key);
+          if (cached) {
+            contracts[filePath] = cached;
+            succeeded += 1;
+            return;
+          }
+
+          attempted += 1;
+
+          try {
+            const completion = await this.openai.chat.completions.create({
+              model: this.model,
+              temperature: 0.0,
+              max_tokens: 600,
+              response_format: { type: 'json_object' },
+              messages: [{ role: 'user', content: buildContractPrompt(filePath, content) }],
+            });
+
+            const raw = completion?.choices?.[0]?.message?.content || '{}';
+            const parsed = JSON.parse(String(raw).replace(/```json|```/g, '').trim());
+            const normalized = normalizeContract(parsed);
+
+            contracts[filePath] = normalized;
+            succeeded += 1;
+            await this._writeCache(key, normalized);
+          } catch (error) {
+            warnings.push(`Contract inference failed for ${filePath}: ${error.message}`);
+          }
+        }),
+      ),
+    );
+
+    const confidence = attempted === 0 ? 0.5 : succeeded / Math.max(attempted, 1);
+
+    return this.buildResult({
+      jobId: context?.jobId,
+      status: 'success',
+      confidence: Math.max(0.4, confidence),
+      data: { contracts, stats: { attempted, succeeded, skipped } },
+      errors,
+      warnings,
+      metrics: { routeFilesFound: attempted, succeeded, skipped },
+      processingTimeMs: Date.now() - start,
+    });
+  }
+
+  async _readCache(key) {
+    if (!this.redis?.get) return null;
+    try {
+      const value = await this.redis.get(key);
+      return value ? JSON.parse(value) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  async _writeCache(key, value) {
+    if (!this.redis?.set) return;
+    try {
+      await this.redis.set(key, JSON.stringify(value), 'EX', this.cacheTtlSeconds);
+    } catch {
+      // Best-effort cache write.
+    }
+  }
+}
diff --git a/server/src/agents/parser/treesitterWorker.js b/server/src/agents/parser/treesitterWorker.js
index 09f5884..d1bc5ba 100644
--- a/server/src/agents/parser/treesitterWorker.js
+++ b/server/src/agents/parser/treesitterWorker.js
@@ -1,7 +1,8 @@
+import { existsSync } from 'fs';
 import { readFile } from 'fs/promises';
 import path from 'path';
 import { parentPort, workerData } from 'worker_threads';
-import Parser from 'web-tree-sitter';
+import { Language, Parser, Query } from 'web-tree-sitter';
 import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -89,6 +90,26 @@ function declarationKindFromCaptures(captures) {
   return marker?.name || 'fn';
 }
 
+function resolveWasmPath(language) {
+  const wasmFile = `tree-sitter-${language}.wasm`;
+  const configuredWasmDir = process.env.PARSER_WASM_DIR;
+
+  const candidates = [
+    configuredWasmDir ? path.resolve(configuredWasmDir, wasmFile) : null,
+    path.resolve(__dirname, '../../../wasm', wasmFile),
+    path.resolve(__dirname, '../../../node_modules/tree-sitter-wasms/out', wasmFile),
+    path.resolve(process.cwd(), 'wasm', wasmFile),
+    path.resolve(process.cwd(), 'node_modules/tree-sitter-wasms/out', wasmFile),
+  ].filter(Boolean);
+
+  const located = candidates.find((candidate) => existsSync(candidate));
+  if (located) return located;
+
+  throw new Error(
+    `Missing Tree-sitter WASM for ${language}. Looked in: ${candidates.join(', ')}`,
+  );
+}
+
 async function run() {
   const { filePath, relativePath, language } = workerData;
 
@@ -101,8 +122,8 @@ async function run() {
 
   await Parser.init();
 
-  const wasmPath = path.resolve(__dirname, '../../../wasm', `tree-sitter-${language}.wasm`);
-  const lang = await Parser.Language.load(wasmPath);
+  const wasmPath = resolveWasmPath(language);
+  const lang = await Language.load(wasmPath);
 
   const parser = new Parser();
   parser.setLanguage(lang);
@@ -118,7 +139,7 @@ async function run() {
   const seenDecls = new Set();
 
   if (queries.imports) {
-    const query = lang.query(queries.imports);
+    const query = new Query(lang, queries.imports);
     for (const match of query.matches(root)) {
       for (const capture of match.captures) {
         if (capture.name !== 'import') continue;
@@ -131,7 +152,7 @@ async function run() {
   }
 
   if (queries.declarations) {
-    const query = lang.query(queries.declarations);
+    const query = new Query(lang, queries.declarations);
     for (const match of query.matches(root)) {
       const kind = declarationKindFromCaptures(match.captures);
       for (const capture of match.captures) {
diff --git a/server/src/agents/persistence/PersistenceAgent.js b/server/src/agents/persistence/PersistenceAgent.js
index 031d55f..62832ff 100644
--- a/server/src/agents/persistence/PersistenceAgent.js
+++ b/server/src/agents/persistence/PersistenceAgent.js
@@ -39,6 +39,7 @@ export class PersistenceAgent extends BaseAgent {
     const functionNodes = input?.functionNodes || {};
     const embeddings = input?.embeddings || {};
     const enriched = input?.enriched || {};
+    const contracts = input?.contracts || {};
     const topology = input?.topology || {};
 
     if (!jobId) {
@@ -116,11 +117,26 @@ export class PersistenceAgent extends BaseAgent {
       }
     }
 
+    const contractPaths = [];
+    const contractRoutes = [];
+    const contractEnvDeps = [];
+    const contractExtServices = [];
+    const contractCaching = [];
+
+    for (const [filePath, contract] of Object.entries(contracts)) {
+      contractPaths.push(filePath);
+      contractRoutes.push(toJson(contract?.routes, []));
+      contractEnvDeps.push(toJson(contract?.envDependencies, []));
+      contractExtServices.push(toJson(contract?.externalServices, []));
+      contractCaching.push(toJson(contract?.cachingPatterns, []));
+    }
+
     const recordsAttempted =
       nodePaths.length +
       edgeSourcePaths.length +
       embeddingPaths.length +
-      functionNodePaths.length;
+      functionNodePaths.length +
+      contractPaths.length;
     let recordsWritten = 0;
 
     let client;
@@ -256,6 +272,45 @@ export class PersistenceAgent extends BaseAgent {
         recordsWritten += functionNodeResult.rowCount || 0;
       }
 
+      await client.query('SAVEPOINT after_function_nodes');
+
+      if (contractPaths.length > 0) {
+        const contractResult = await client.query(
+          `
+            INSERT INTO api_contracts (
+              job_id,
+              file_path,
+              routes,
+              env_deps,
+              ext_services,
+              caching
+            )
+            SELECT
+              $1,
+              unnest($2::text[]),
+              unnest($3::jsonb[]),
+              unnest($4::jsonb[]),
+              unnest($5::jsonb[]),
+              unnest($6::jsonb[])
+            ON CONFLICT (job_id, file_path) DO UPDATE
+            SET routes = EXCLUDED.routes,
+                env_deps = EXCLUDED.env_deps,
+                ext_services = EXCLUDED.ext_services,
+                caching = EXCLUDED.caching
+          `,
+          [
+            jobId,
+            contractPaths,
+            contractRoutes,
+            contractEnvDeps,
+            contractExtServices,
+            contractCaching,
+          ],
+        );
+
+        recordsWritten += contractResult.rowCount || 0;
+      }
+
       await client.query('COMMIT');
 
       const confidence = scorePersistence({
@@ -273,6 +328,7 @@ export class PersistenceAgent extends BaseAgent {
             edges: edgeSourcePaths.length,
             embeddings: embeddingPaths.length,
             functionNodes: functionNodePaths.length,
+            contracts: contractPaths.length,
           },
           durationMs: Date.now() - start,
         },
diff --git a/server/src/infrastructure/migrations/006_contracts.sql b/server/src/infrastructure/migrations/006_contracts.sql
new file mode 100644
index 0000000..ab53717
--- /dev/null
+++ b/server/src/infrastructure/migrations/006_contracts.sql
@@ -0,0 +1,25 @@
+DO $$
+BEGIN
+  IF NOT EXISTS (
+    SELECT 1
+    FROM pg_enum e
+    JOIN pg_type t ON e.enumtypid = t.oid
+    WHERE t.typname = 'job_status' AND e.enumlabel = 'inferring-contracts'
+  ) THEN
+    ALTER TYPE job_status ADD VALUE 'inferring-contracts';
+  END IF;
+END $$;
+
+CREATE TABLE IF NOT EXISTS api_contracts (
+  id            UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  job_id         UUID NOT NULL REFERENCES analysis_jobs(id) ON DELETE CASCADE,
+  file_path      TEXT NOT NULL,
+  routes         JSONB NOT NULL DEFAULT '[]',
+  env_deps       JSONB NOT NULL DEFAULT '[]',
+  ext_services   JSONB NOT NULL DEFAULT '[]',
+  caching        JSONB NOT NULL DEFAULT '[]',
+  created_at     TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+  UNIQUE (job_id, file_path)
+);
+
+CREATE INDEX IF NOT EXISTS idx_contracts_job ON api_contracts(job_id);
diff --git a/server/test/parser.multilang.test.js b/server/test/parser.multilang.test.js
index 682fad6..485eff7 100644
--- a/server/test/parser.multilang.test.js
+++ b/server/test/parser.multilang.test.js
@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
 import { mkdtemp, rm, writeFile, mkdir } from 'fs/promises';
 import os from 'os';
 import path from 'path';
-import { ParserAgent } from '../src/agents/parser/ParserAgent.js';
+import { PolyglotParserAgent } from '../src/agents/parser/PolyglotParserAgent.js';
 
 const tempDirs = [];
 
@@ -13,7 +13,7 @@ after(async () => {
   }
 });
 
-test('ParserAgent parses Python and Go files via language workers', async () => {
+test('PolyglotParserAgent parses Python and Go files via tree-sitter worker', async () => {
   const rootDir = await mkdtemp(path.join(os.tmpdir(), 'codegraph-parser-'));
   tempDirs.push(rootDir);
 
@@ -49,14 +49,14 @@ test('ParserAgent parses Python and Go files via language workers', async () =>
       '',
       'type Service struct {}',
       '',
-      'func (s Service) Handle() {',
+      'func Handle() {',
       '  fmt.Println("ok")',
       '}',
     ].join('\n'),
     'utf8',
   );
 
-  const parser = new ParserAgent();
+  const parser = new PolyglotParserAgent();
 
   const result = await parser.process(
     {
@@ -75,14 +75,14 @@ test('ParserAgent parses Python and Go files via language workers', async () =>
   const pyResult = result.data.parsedFiles.find((file) => file.relativePath === 'service.py');
   assert.ok(pyResult);
   assert.equal(pyResult.parseError, null);
-  assert.deepEqual(pyResult.imports, ['./pkg', 'requests']);
-  assert.equal(pyResult.declarations.some((entry) => entry.name === 'login' && entry.kind === 'function'), true);
-  assert.equal(pyResult.declarations.some((entry) => entry.name === 'AuthService' && entry.kind === 'class'), true);
+  assert.equal(pyResult.imports.includes('requests'), true);
+  assert.equal(pyResult.declarations.some((entry) => entry.name === 'login' && entry.kind === 'fn'), true);
+  assert.equal(pyResult.declarations.some((entry) => entry.name === 'AuthService' && entry.kind === 'cls'), true);
 
   const goResult = result.data.parsedFiles.find((file) => file.relativePath === 'service.go');
   assert.ok(goResult);
   assert.equal(goResult.parseError, null);
   assert.deepEqual(goResult.imports, ['fmt', 'net/http']);
-  assert.equal(goResult.declarations.some((entry) => entry.name === 'Handle' && entry.kind === 'function'), true);
-  assert.equal(goResult.declarations.some((entry) => entry.name === 'Service' && entry.kind === 'struct'), true);
+  assert.equal(goResult.declarations.some((entry) => entry.name === 'Handle' && entry.kind === 'fn'), true);
+  assert.equal(goResult.declarations.some((entry) => entry.name === 'Service' && entry.kind === 'type'), true);
 });

From 98a3d314674bf1fd424c087cfe4452b3ae6c88b8 Mon Sep 17 00:00:00 2001
From: SamanPandey-in <singularity.1@hotmail.com>
Date: Wed, 1 Apr 2026 00:21:04 +0530
Subject: [PATCH 17/19] new dependencies

---
 client/package-lock.json | 314 +++++++++++-----------
 server/package-lock.json | 565 +++++++++++++++++++++------------------
 2 files changed, 457 insertions(+), 422 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 358859d..3b240a8 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2015,9 +2015,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.0.tgz",
-      "integrity": "sha512-WOhNW9K8bR3kf4zLxbfg6Pxu2ybOUbB2AjMDHSQx86LIF4rH4Ft7vmMwNt0loO0eonglSNy4cpD3MKXXKQu0/A==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.1.tgz",
+      "integrity": "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==",
       "cpu": [
         "arm"
       ],
@@ -2028,9 +2028,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.0.tgz",
-      "integrity": "sha512-u6JHLll5QKRvjciE78bQXDmqRqNs5M/3GVqZeMwvmjaNODJih/WIrJlFVEihvV0MiYFmd+ZyPr9wxOVbPAG2Iw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.1.tgz",
+      "integrity": "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==",
       "cpu": [
         "arm64"
       ],
@@ -2041,9 +2041,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.0.tgz",
-      "integrity": "sha512-qEF7CsKKzSRc20Ciu2Zw1wRrBz4g56F7r/vRwY430UPp/nt1x21Q/fpJ9N5l47WWvJlkNCPJz3QRVw008fi7yA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.1.tgz",
+      "integrity": "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==",
       "cpu": [
         "arm64"
       ],
@@ -2054,9 +2054,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.0.tgz",
-      "integrity": "sha512-WADYozJ4QCnXCH4wPB+3FuGmDPoFseVCUrANmA5LWwGmC6FL14BWC7pcq+FstOZv3baGX65tZ378uT6WG8ynTw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.1.tgz",
+      "integrity": "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==",
       "cpu": [
         "x64"
       ],
@@ -2067,9 +2067,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.0.tgz",
-      "integrity": "sha512-6b8wGHJlDrGeSE3aH5mGNHBjA0TTkxdoNHik5EkvPHCt351XnigA4pS7Wsj/Eo9Y8RBU6f35cjN9SYmCFBtzxw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.1.tgz",
+      "integrity": "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==",
       "cpu": [
         "arm64"
       ],
@@ -2080,9 +2080,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.0.tgz",
-      "integrity": "sha512-h25Ga0t4jaylMB8M/JKAyrvvfxGRjnPQIR8lnCayyzEjEOx2EJIlIiMbhpWxDRKGKF8jbNH01NnN663dH638mA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.1.tgz",
+      "integrity": "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==",
       "cpu": [
         "x64"
       ],
@@ -2093,9 +2093,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.0.tgz",
-      "integrity": "sha512-RzeBwv0B3qtVBWtcuABtSuCzToo2IEAIQrcyB/b2zMvBWVbjo8bZDjACUpnaafaxhTw2W+imQbP2BD1usasK4g==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.1.tgz",
+      "integrity": "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==",
       "cpu": [
         "arm"
       ],
@@ -2106,9 +2106,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.0.tgz",
-      "integrity": "sha512-Sf7zusNI2CIU1HLzuu9Tc5YGAHEZs5Lu7N1ssJG4Tkw6e0MEsN7NdjUDDfGNHy2IU+ENyWT+L2obgWiguWibWQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.1.tgz",
+      "integrity": "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==",
       "cpu": [
         "arm"
       ],
@@ -2119,9 +2119,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.0.tgz",
-      "integrity": "sha512-DX2x7CMcrJzsE91q7/O02IJQ5/aLkVtYFryqCjduJhUfGKG6yJV8hxaw8pZa93lLEpPTP/ohdN4wFz7yp/ry9A==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.1.tgz",
+      "integrity": "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==",
       "cpu": [
         "arm64"
       ],
@@ -2132,9 +2132,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.0.tgz",
-      "integrity": "sha512-09EL+yFVbJZlhcQfShpswwRZ0Rg+z/CsSELFCnPt3iK+iqwGsI4zht3secj5vLEs957QvFFXnzAT0FFPIxSrkQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.1.tgz",
+      "integrity": "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==",
       "cpu": [
         "arm64"
       ],
@@ -2145,9 +2145,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.0.tgz",
-      "integrity": "sha512-i9IcCMPr3EXm8EQg5jnja0Zyc1iFxJjZWlb4wr7U2Wx/GrddOuEafxRdMPRYVaXjgbhvqalp6np07hN1w9kAKw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.1.tgz",
+      "integrity": "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==",
       "cpu": [
         "loong64"
       ],
@@ -2158,9 +2158,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.0.tgz",
-      "integrity": "sha512-DGzdJK9kyJ+B78MCkWeGnpXJ91tK/iKA6HwHxF4TAlPIY7GXEvMe8hBFRgdrR9Ly4qebR/7gfUs9y2IoaVEyog==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.1.tgz",
+      "integrity": "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==",
       "cpu": [
         "loong64"
       ],
@@ -2171,9 +2171,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.0.tgz",
-      "integrity": "sha512-RwpnLsqC8qbS8z1H1AxBA1H6qknR4YpPR9w2XX0vo2Sz10miu57PkNcnHVaZkbqyw/kUWfKMI73jhmfi9BRMUQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.1.tgz",
+      "integrity": "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==",
       "cpu": [
         "ppc64"
       ],
@@ -2184,9 +2184,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.0.tgz",
-      "integrity": "sha512-Z8pPf54Ly3aqtdWC3G4rFigZgNvd+qJlOE52fmko3KST9SoGfAdSRCwyoyG05q1HrrAblLbk1/PSIV+80/pxLg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.1.tgz",
+      "integrity": "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==",
       "cpu": [
         "ppc64"
       ],
@@ -2197,9 +2197,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.0.tgz",
-      "integrity": "sha512-3a3qQustp3COCGvnP4SvrMHnPQ9d1vzCakQVRTliaz8cIp/wULGjiGpbcqrkv0WrHTEp8bQD/B3HBjzujVWLOA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.1.tgz",
+      "integrity": "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==",
       "cpu": [
         "riscv64"
       ],
@@ -2210,9 +2210,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.0.tgz",
-      "integrity": "sha512-pjZDsVH/1VsghMJ2/kAaxt6dL0psT6ZexQVrijczOf+PeP2BUqTHYejk3l6TlPRydggINOeNRhvpLa0AYpCWSQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.1.tgz",
+      "integrity": "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==",
       "cpu": [
         "riscv64"
       ],
@@ -2223,9 +2223,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.0.tgz",
-      "integrity": "sha512-3ObQs0BhvPgiUVZrN7gqCSvmFuMWvWvsjG5ayJ3Lraqv+2KhOsp+pUbigqbeWqueGIsnn+09HBw27rJ+gYK4VQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.1.tgz",
+      "integrity": "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==",
       "cpu": [
         "s390x"
       ],
@@ -2236,9 +2236,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.0.tgz",
-      "integrity": "sha512-EtylprDtQPdS5rXvAayrNDYoJhIz1/vzN2fEubo3yLE7tfAw+948dO0g4M0vkTVFhKojnF+n6C8bDNe+gDRdTg==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==",
       "cpu": [
         "x64"
       ],
@@ -2249,9 +2249,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.0.tgz",
-      "integrity": "sha512-k09oiRCi/bHU9UVFqD17r3eJR9bn03TyKraCrlz5ULFJGdJGi7VOmm9jl44vOJvRJ6P7WuBi/s2A97LxxHGIdw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.1.tgz",
+      "integrity": "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==",
       "cpu": [
         "x64"
       ],
@@ -2262,9 +2262,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.0.tgz",
-      "integrity": "sha512-1o/0/pIhozoSaDJoDcec+IVLbnRtQmHwPV730+AOD29lHEEo4F5BEUB24H0OBdhbBBDwIOSuf7vgg0Ywxdfiiw==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.1.tgz",
+      "integrity": "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==",
       "cpu": [
         "x64"
       ],
@@ -2275,9 +2275,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.0.tgz",
-      "integrity": "sha512-pESDkos/PDzYwtyzB5p/UoNU/8fJo68vcXM9ZW2V0kjYayj1KaaUfi1NmTUTUpMn4UhU4gTuK8gIaFO4UGuMbA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.1.tgz",
+      "integrity": "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==",
       "cpu": [
         "arm64"
       ],
@@ -2288,9 +2288,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.0.tgz",
-      "integrity": "sha512-hj1wFStD7B1YBeYmvY+lWXZ7ey73YGPcViMShYikqKT1GtstIKQAtfUI6yrzPjAy/O7pO0VLXGmUVWXQMaYgTQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.1.tgz",
+      "integrity": "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==",
       "cpu": [
         "arm64"
       ],
@@ -2301,9 +2301,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.0.tgz",
-      "integrity": "sha512-SyaIPFoxmUPlNDq5EHkTbiKzmSEmq/gOYFI/3HHJ8iS/v1mbugVa7dXUzcJGQfoytp9DJFLhHH4U3/eTy2Bq4w==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.1.tgz",
+      "integrity": "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==",
       "cpu": [
         "ia32"
       ],
@@ -2314,9 +2314,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.0.tgz",
-      "integrity": "sha512-RdcryEfzZr+lAr5kRm2ucN9aVlCCa2QNq4hXelZxb8GG0NJSazq44Z3PCCc8wISRuCVnGs0lQJVX5Vp6fKA+IA==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==",
       "cpu": [
         "x64"
       ],
@@ -2327,9 +2327,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.0.tgz",
-      "integrity": "sha512-PrsWNQ8BuE00O3Xsx3ALh2Df8fAj9+cvvX9AIA6o4KpATR98c9mud4XtDWVvsEuyia5U4tVSTKygawyJkjm60w==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.1.tgz",
+      "integrity": "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==",
       "cpu": [
         "x64"
       ],
@@ -2340,50 +2340,50 @@
       ]
     },
     "node_modules/@sentry-internal/browser-utils": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.46.0.tgz",
-      "integrity": "sha512-WB1gBT9G13V02ekZ6NpUhoI1aGHV2eNfjEPthkU2bGBvFpQKnstwzjg7waIRGR7cu+YSW2Q6UI6aQLgBeOPD1g==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.47.0.tgz",
+      "integrity": "sha512-bVFRAeJWMBcBCvJKIFCMJ1/yQToL4vPGqfmlnDZeypcxkqUDKQ/Y3ziLHXoDL2sx0lagcgU2vH1QhCQ67Aujjw==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "10.46.0"
+        "@sentry/core": "10.47.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry-internal/feedback": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.46.0.tgz",
-      "integrity": "sha512-c4pI/z9nZCQXe9GYEw/hE/YTY9AxGBp8/wgKI+T8zylrN35SGHaXv63szzE1WbI8lacBY8lBF7rstq9bQVCaHw==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.47.0.tgz",
+      "integrity": "sha512-pdvMmi4dQpX5S/vAAzrhHPIw3T3HjUgDNgUiCBrlp7N9/6zGO2gNPhUnNekP+CjgI/z0rvf49RLqlDenpNrMOg==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "10.46.0"
+        "@sentry/core": "10.47.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry-internal/replay": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.46.0.tgz",
-      "integrity": "sha512-JBsWeXG6bRbxBFK8GzWymWGOB9QE7Kl57BeF3jzgdHTuHSWZ2mRnAmb1K05T4LU+gVygk6yW0KmdC8Py9Qzg9A==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.47.0.tgz",
+      "integrity": "sha512-ScdovxP7hJxgMt70+7hFvwT02GIaIUAxdEM/YPsayZBeCoAukPW8WiwztJfoKtsfPyKJ5A6f0H3PIxTPcA9Row==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/browser-utils": "10.46.0",
-        "@sentry/core": "10.46.0"
+        "@sentry-internal/browser-utils": "10.47.0",
+        "@sentry/core": "10.47.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry-internal/replay-canvas": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.46.0.tgz",
-      "integrity": "sha512-ub314MWUsekVCuoH0/HJbbimlI24SkV745UW2pj9xRbxOAEf1wjkmIzxKrMDbTgJGuEunug02XZVdJFJUzOcDw==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.47.0.tgz",
+      "integrity": "sha512-A5OY8friSe6g8WAK4L8IeOPiEd9D3Ps40DzRH5j2f6SUja0t90mKMvHRcRf8zq0d4BkdB+JM7tjOkwxpuv8heA==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/replay": "10.46.0",
-        "@sentry/core": "10.46.0"
+        "@sentry-internal/replay": "10.47.0",
+        "@sentry/core": "10.47.0"
       },
       "engines": {
         "node": ">=18"
@@ -2417,38 +2417,38 @@
       }
     },
     "node_modules/@sentry/browser": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.46.0.tgz",
-      "integrity": "sha512-80DmGlTk5Z2/OxVOzLNxwolMyouuAYKqG8KUcoyintZqHbF6kO1RulI610HmyUt3OagKeBCqt9S7w0VIfCRL+Q==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.47.0.tgz",
+      "integrity": "sha512-rC0agZdxKA5XWfL4VwPOr/rJMogXDqZgnVzr93YWpFn9DMZT/7LzxSJVPIJwRUjx3bFEby3PcTa3YaX7pxm1AA==",
       "license": "MIT",
       "dependencies": {
-        "@sentry-internal/browser-utils": "10.46.0",
-        "@sentry-internal/feedback": "10.46.0",
-        "@sentry-internal/replay": "10.46.0",
-        "@sentry-internal/replay-canvas": "10.46.0",
-        "@sentry/core": "10.46.0"
+        "@sentry-internal/browser-utils": "10.47.0",
+        "@sentry-internal/feedback": "10.47.0",
+        "@sentry-internal/replay": "10.47.0",
+        "@sentry-internal/replay-canvas": "10.47.0",
+        "@sentry/core": "10.47.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry/core": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.46.0.tgz",
-      "integrity": "sha512-N3fj4zqBQOhXliS1Ne9euqIKuciHCGOJfPGQLwBoW9DNz03jF+NB8+dUKtrJ79YLoftjVgf8nbgwtADK7NR+2Q==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.47.0.tgz",
+      "integrity": "sha512-nsYRAx3EWezDut+Zl+UwwP07thh9uY7CfSAi2whTdcJl5hu1nSp2z8bba7Vq/MGbNLnazkd3A+GITBEML924JA==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry/react": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-10.46.0.tgz",
-      "integrity": "sha512-Rb1S+9OuUPVwsz7GWnQ6Kgf3azbsseUymIegg3JZHNcW/fM1nPpaljzTBnuineia113DH0pgMBcdrrZDLaosFQ==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-10.47.0.tgz",
+      "integrity": "sha512-ZtJV6xxF8jUVE9e3YQUG3Do0XapG1GjniyLyqMPgN6cNvs/HaRJODf7m60By+VGqcl5XArEjEPTvx8CdPUXDfA==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/browser": "10.46.0",
-        "@sentry/core": "10.46.0"
+        "@sentry/browser": "10.47.0",
+        "@sentry/core": "10.47.0"
       },
       "engines": {
         "node": ">=18"
@@ -3226,9 +3226,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.11",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.11.tgz",
-      "integrity": "sha512-DAKrHphkJyiGuau/cFieRYhcTFeK/lBuD++C7cZ6KZHbMhBrisoi+EvhQ5RZrIfV5qwsW8kgQ07JIC+MDJRAhg==",
+      "version": "2.10.13",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.13.tgz",
+      "integrity": "sha512-BL2sTuHOdy0YT1lYieUxTw/QMtPBC3pmlJC6xk8BBYVv6vcw3SGdKemQ+Xsx9ik2F/lYDO9tqsFQH1r9PFuHKw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -3250,9 +3250,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
-      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
       "dev": true,
       "funding": [
         {
@@ -3271,11 +3271,11 @@
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "baseline-browser-mapping": "^2.9.0",
-        "caniuse-lite": "^1.0.30001759",
-        "electron-to-chromium": "^1.5.263",
-        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.2.0"
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -3308,9 +3308,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001781",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001781.tgz",
-      "integrity": "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==",
+      "version": "1.0.30001782",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001782.tgz",
+      "integrity": "sha512-dZcaJLJeDMh4rELYFw1tvSn1bhZWYFOt468FcbHHxx/Z/dFidd1I6ciyFdi3iwfQCyOjqo9upF6lGQYtMiJWxw==",
       "dev": true,
       "funding": [
         {
@@ -3633,9 +3633,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.328",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.328.tgz",
-      "integrity": "sha512-QNQ5l45DzYytThO21403XN3FvK0hOkWDG8viNf6jqS42msJ8I4tGDSpBCgvDRRPnkffafiwAym2X2eHeGD2V0w==",
+      "version": "1.5.329",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.329.tgz",
+      "integrity": "sha512-/4t+AS1l4S3ZC0Ja7PHFIWeBIxGA3QGqV8/yKsP36v7NcyUCl+bIcmw6s5zVuMIECWwBrAK/6QLzTmbJChBboQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -4712,9 +4712,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
-      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.0.tgz",
+      "integrity": "sha512-l1mfj2atMqndAHI3ls7XqPxEjV2J9ZkcNyHpoZA3r2T1LLwDB69jgkMWh71YKwhBbK0G2f4WSn05ahmQXVxupA==",
       "license": "MIT"
     },
     "node_modules/lodash.merge": {
@@ -5217,9 +5217,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.60.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.0.tgz",
-      "integrity": "sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ==",
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
+      "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -5232,31 +5232,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.60.0",
-        "@rollup/rollup-android-arm64": "4.60.0",
-        "@rollup/rollup-darwin-arm64": "4.60.0",
-        "@rollup/rollup-darwin-x64": "4.60.0",
-        "@rollup/rollup-freebsd-arm64": "4.60.0",
-        "@rollup/rollup-freebsd-x64": "4.60.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.60.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.60.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.60.0",
-        "@rollup/rollup-linux-arm64-musl": "4.60.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.60.0",
-        "@rollup/rollup-linux-loong64-musl": "4.60.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.60.0",
-        "@rollup/rollup-linux-ppc64-musl": "4.60.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.60.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.60.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.60.0",
-        "@rollup/rollup-linux-x64-gnu": "4.60.0",
-        "@rollup/rollup-linux-x64-musl": "4.60.0",
-        "@rollup/rollup-openbsd-x64": "4.60.0",
-        "@rollup/rollup-openharmony-arm64": "4.60.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.60.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.60.0",
-        "@rollup/rollup-win32-x64-gnu": "4.60.0",
-        "@rollup/rollup-win32-x64-msvc": "4.60.0",
+        "@rollup/rollup-android-arm-eabi": "4.60.1",
+        "@rollup/rollup-android-arm64": "4.60.1",
+        "@rollup/rollup-darwin-arm64": "4.60.1",
+        "@rollup/rollup-darwin-x64": "4.60.1",
+        "@rollup/rollup-freebsd-arm64": "4.60.1",
+        "@rollup/rollup-freebsd-x64": "4.60.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.1",
+        "@rollup/rollup-linux-arm64-musl": "4.60.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.1",
+        "@rollup/rollup-linux-loong64-musl": "4.60.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-musl": "4.60.1",
+        "@rollup/rollup-openbsd-x64": "4.60.1",
+        "@rollup/rollup-openharmony-arm64": "4.60.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.1",
+        "@rollup/rollup-win32-x64-gnu": "4.60.1",
+        "@rollup/rollup-win32-x64-msvc": "4.60.1",
         "fsevents": "~2.3.2"
       }
     },
diff --git a/server/package-lock.json b/server/package-lock.json
index 554a055..b0f784c 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -98,6 +98,31 @@
         "node": ">=18"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
+      "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz",
+      "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz",
@@ -166,6 +191,37 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/config-array/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@eslint/config-helpers": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
@@ -216,6 +272,37 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@eslint/js": {
       "version": "9.39.4",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
@@ -254,9 +341,9 @@
       }
     },
     "node_modules/@fastify/otel": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/@fastify/otel/-/otel-0.17.1.tgz",
-      "integrity": "sha512-K4wyxfUZx2ux5o+b6BtTqouYFVILohLZmSbA2tKUueJstNcBnoGPVhllCaOvbQ3ZrXdUxUC/fyrSWSCqHhdOPg==",
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@fastify/otel/-/otel-0.18.0.tgz",
+      "integrity": "sha512-3TASCATfw+ctICSb4ymrv7iCm0qJ0N9CarB+CZ7zIJ7KqNbwI5JjyDL1/sxoC0ccTO1Zyd1iQ+oqncPg5FJXaA==",
       "funding": [
         {
           "type": "github",
@@ -307,27 +394,6 @@
         "@opentelemetry/api": "^1.3.0"
       }
     },
-    "node_modules/@fastify/otel/node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/@fastify/otel/node_modules/brace-expansion": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
     "node_modules/@fastify/otel/node_modules/import-in-the-middle": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-2.0.6.tgz",
@@ -340,21 +406,6 @@
         "module-details-from-path": "^1.0.4"
       }
     },
-    "node_modules/@fastify/otel/node_modules/minimatch": {
-      "version": "10.2.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
-      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "brace-expansion": "^5.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -562,9 +613,9 @@
       }
     },
     "node_modules/@opentelemetry/api-logs": {
-      "version": "0.213.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.213.0.tgz",
-      "integrity": "sha512-zRM5/Qj6G84Ej3F1yt33xBVY/3tnMxtL1fiDIxYbDWYaZ/eudVw3/PBiZ8G7JwUxXxjW8gU4g6LnOyfGKYHYgw==",
+      "version": "0.214.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.214.0.tgz",
+      "integrity": "sha512-40lSJeqYO8Uz2Yj7u94/SJWE/wONa7rmMKjI1ZcIjgf3MHNHv1OZUCrCETGuaRF62d5pQD1wKIW+L4lmSMTzZA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/api": "^1.3.0"
@@ -603,12 +654,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation": {
-      "version": "0.213.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.213.0.tgz",
-      "integrity": "sha512-3i9NdkET/KvQomeh7UaR/F4r9P25Rx6ooALlWXPIjypcEOUxksCmVu0zA70NBJWlrMW1rPr/LRidFAflLI+s/w==",
+      "version": "0.214.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.214.0.tgz",
+      "integrity": "sha512-MHqEX5Dk59cqVah5LiARMACku7jXSVk9iVDWOea4x3cr7VfdByeDCURK6o1lntT1JS/Tsovw01UJrBhN3/uC5w==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/api-logs": "0.213.0",
+        "@opentelemetry/api-logs": "0.214.0",
         "import-in-the-middle": "^3.0.0",
         "require-in-the-middle": "^8.0.0"
       },
@@ -620,13 +671,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-amqplib": {
-      "version": "0.60.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-amqplib/-/instrumentation-amqplib-0.60.0.tgz",
-      "integrity": "sha512-q/B2IvoVXRm1M00MvhnzpMN6rKYOszPXVsALi6u0ss4AYHe+TidZEtLW9N1ZhrobI1dSriHnBqqtAOZVAv07sg==",
+      "version": "0.61.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-amqplib/-/instrumentation-amqplib-0.61.0.tgz",
+      "integrity": "sha512-mCKoyTGfRNisge4br0NpOFSy2Z1NnEW8hbCJdUDdJFHrPqVzc4IIBPA/vX0U+LUcQqrQvJX+HMIU0dbDRe0i0Q==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.33.0"
       },
       "engines": {
@@ -637,13 +688,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-connect": {
-      "version": "0.56.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-connect/-/instrumentation-connect-0.56.0.tgz",
-      "integrity": "sha512-PKp+sSZ7AfzMvGgO3VCyo1inwNu+q7A1k9X88WK4PQ+S6Hp7eFk8pie+sWHDTaARovmqq5V2osav3lQej2B0nw==",
+      "version": "0.57.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-connect/-/instrumentation-connect-0.57.0.tgz",
+      "integrity": "sha512-FMEBChnI4FLN5TE9DHwfH7QpNir1JzXno1uz/TAucVdLCyrG0jTrKIcNHt/i30A0M2AunNBCkcd8Ei26dIPKdg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.27.0",
         "@types/connect": "3.4.38"
       },
@@ -655,12 +706,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-dataloader": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-dataloader/-/instrumentation-dataloader-0.30.0.tgz",
-      "integrity": "sha512-MXHP2Q38cd2OhzEBKAIXUi9uBlPEYzF6BNJbyjUXBQ6kLaf93kRC41vNMIz0Nl5mnuwK7fDvKT+/lpx7BXRwdg==",
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-dataloader/-/instrumentation-dataloader-0.31.0.tgz",
+      "integrity": "sha512-f654tZFQXS5YeLDNb9KySrwtg7SnqZN119FauD7acBoTzuLduaiGTNz88ixcVSOOMGZ+EjJu/RFtx5klObC95g==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0"
+        "@opentelemetry/instrumentation": "^0.214.0"
       },
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
@@ -670,13 +721,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-express": {
-      "version": "0.61.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-express/-/instrumentation-express-0.61.0.tgz",
-      "integrity": "sha512-Xdmqo9RZuZlL29Flg8QdwrrX7eW1CZ7wFQPKHyXljNymgKhN1MCsYuqQ/7uxavhSKwAl7WxkTzKhnqpUApLMvQ==",
+      "version": "0.62.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-express/-/instrumentation-express-0.62.0.tgz",
+      "integrity": "sha512-Tvx+vgAZKEQxU3Rx+xWLiR0mLxHwmk69/8ya04+VsV9WYh8w6Lhx5hm5yAMvo1wy0KqWgFKBLwSeo3sHCwdOww==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.27.0"
       },
       "engines": {
@@ -687,13 +738,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-fs": {
-      "version": "0.32.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-fs/-/instrumentation-fs-0.32.0.tgz",
-      "integrity": "sha512-koR6apx0g0wX6RRiPpjA4AFQUQUbXrK16kq4/SZjVp7u5cffJhNkY4TnITxcGA4acGSPYAfx3NHRIv4Khn1axQ==",
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-fs/-/instrumentation-fs-0.33.0.tgz",
+      "integrity": "sha512-sCZWXGalQ01wr3tAhSR9ucqFJ0phidpAle6/17HVjD6gN8FLmZMK/8sKxdXYHy3PbnlV1P4zeiSVFNKpbFMNLA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0"
+        "@opentelemetry/instrumentation": "^0.214.0"
       },
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
@@ -703,12 +754,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-generic-pool": {
-      "version": "0.56.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-generic-pool/-/instrumentation-generic-pool-0.56.0.tgz",
-      "integrity": "sha512-fg+Jffs6fqrf0uQS0hom7qBFKsbtpBiBl8+Vkc63Gx8xh6pVh+FhagmiO6oM0m3vyb683t1lP7yGYq22SiDnqg==",
+      "version": "0.57.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-generic-pool/-/instrumentation-generic-pool-0.57.0.tgz",
+      "integrity": "sha512-orhmlaK+ZIW9hKU+nHTbXrCSXZcH83AescTqmpamHRobRmYSQwRbD0a1odc0yAzuzOtxYiHiXAnpnIpaSSY7Ow==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0"
+        "@opentelemetry/instrumentation": "^0.214.0"
       },
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
@@ -718,12 +769,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-graphql": {
-      "version": "0.61.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-graphql/-/instrumentation-graphql-0.61.0.tgz",
-      "integrity": "sha512-pUiVASv6nh2XrerTvlbVHh7vKFzscpgwiQ/xvnZuAIzQ5lRjWVdRPUuXbvZJ/Yq79QsE81TZdJ7z9YsXiss1ew==",
+      "version": "0.62.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-graphql/-/instrumentation-graphql-0.62.0.tgz",
+      "integrity": "sha512-3YNuLVPUxafXkH1jBAbGsKNsP3XVzcFDhCDCE3OqBwCwShlqQbLMRMFh1T/d5jaVZiGVmSsfof+ICKD2iOV8xg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0"
+        "@opentelemetry/instrumentation": "^0.214.0"
       },
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
@@ -733,13 +784,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-hapi": {
-      "version": "0.59.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-hapi/-/instrumentation-hapi-0.59.0.tgz",
-      "integrity": "sha512-33wa4mEr+9+ztwdgLor1SeBu4Opz4IsmpcLETXAd3VmBrOjez8uQtrsOhPCa5Vhbm5gzDlMYTgFRLQzf8/YHFA==",
+      "version": "0.60.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-hapi/-/instrumentation-hapi-0.60.0.tgz",
+      "integrity": "sha512-aNljZKYrEa7obLAxd1bCEDxF7kzCLGXTuTJZ8lMR9rIVEjmuKBXN1gfqpm/OB//Zc2zP4iIve1jBp7sr3mQV6w==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.27.0"
       },
       "engines": {
@@ -750,13 +801,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-http": {
-      "version": "0.213.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-http/-/instrumentation-http-0.213.0.tgz",
-      "integrity": "sha512-B978Xsm5XEPGhm1P07grDoaOFLHapJPkOG9h016cJsyWWxmiLnPu2M/4Nrm7UCkHSiLnkXgC+zVGUAIahy8EEA==",
+      "version": "0.214.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-http/-/instrumentation-http-0.214.0.tgz",
+      "integrity": "sha512-FlkDhZDRjDJDcO2LcSCtjRpkal1NJ8y0fBqBhTvfAR3JSYY2jAIj1kSS5IjmEBt4c3aWv+u/lqLuoCDrrKCSKg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/core": "2.6.0",
-        "@opentelemetry/instrumentation": "0.213.0",
+        "@opentelemetry/core": "2.6.1",
+        "@opentelemetry/instrumentation": "0.214.0",
         "@opentelemetry/semantic-conventions": "^1.29.0",
         "forwarded-parse": "2.1.2"
       },
@@ -767,28 +818,13 @@
         "@opentelemetry/api": "^1.3.0"
       }
     },
-    "node_modules/@opentelemetry/instrumentation-http/node_modules/@opentelemetry/core": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.6.0.tgz",
-      "integrity": "sha512-HLM1v2cbZ4TgYN6KEOj+Bbj8rAKriOdkF9Ed3tG25FoprSiQl7kYc+RRT6fUZGOvx0oMi5U67GoFdT+XUn8zEg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@opentelemetry/semantic-conventions": "^1.29.0"
-      },
-      "engines": {
-        "node": "^18.19.0 || >=20.6.0"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": ">=1.0.0 <1.10.0"
-      }
-    },
     "node_modules/@opentelemetry/instrumentation-ioredis": {
-      "version": "0.61.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-ioredis/-/instrumentation-ioredis-0.61.0.tgz",
-      "integrity": "sha512-hsHDadUtAFbws1YSDc1XW0svGFKiUbqv2td1Cby+UAiwvojm1NyBo/taifH0t8CuFZ0x/2SDm0iuTwrM5pnVOg==",
+      "version": "0.62.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-ioredis/-/instrumentation-ioredis-0.62.0.tgz",
+      "integrity": "sha512-ZYt//zcPve8qklaZX+5Z4MkU7UpEkFRrxsf2cnaKYBitqDnsCN69CPAuuMOX6NYdW2rG9sFy7V/QWtBlP5XiNQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/redis-common": "^0.38.2",
         "@opentelemetry/semantic-conventions": "^1.33.0"
       },
@@ -800,12 +836,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-kafkajs": {
-      "version": "0.22.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-kafkajs/-/instrumentation-kafkajs-0.22.0.tgz",
-      "integrity": "sha512-wJU4IBQMUikdJAcTChLFqK5lo+flo7pahqd8DSLv7uMxsdOdAHj6RzKYAm8pPfUS6ItKYutYyuicwKaFwQKsoA==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-kafkajs/-/instrumentation-kafkajs-0.23.0.tgz",
+      "integrity": "sha512-4K+nVo+zI+aDz0Z85SObwbdixIbzS9moIuKJaYsdlzcHYnKOPtB7ya8r8Ezivy/GVIBHiKJVq4tv+BEkgOMLaQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.30.0"
       },
       "engines": {
@@ -816,12 +852,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-knex": {
-      "version": "0.57.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-knex/-/instrumentation-knex-0.57.0.tgz",
-      "integrity": "sha512-vMCSh8kolEm5rRsc+FZeTZymWmIJwc40hjIKnXH4O0Dv/gAkJJIRXCsPX5cPbe0c0j/34+PsENd0HqKruwhVYw==",
+      "version": "0.58.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-knex/-/instrumentation-knex-0.58.0.tgz",
+      "integrity": "sha512-Hc/o8fSsaWxZ8r1Yw4rNDLwTpUopTf4X32y4W6UhlHmW8Wizz8wfhgOKIelSeqFVTKBBPIDUOsQWuIMxBmu8Bw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.33.1"
       },
       "engines": {
@@ -832,13 +868,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-koa": {
-      "version": "0.61.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-koa/-/instrumentation-koa-0.61.0.tgz",
-      "integrity": "sha512-lvrfWe9ShK/D2X4brmx8ZqqeWPfRl8xekU0FCn7C1dHm5k6+rTOOi36+4fnaHAP8lig9Ux6XQ1D4RNIpPCt1WQ==",
+      "version": "0.62.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-koa/-/instrumentation-koa-0.62.0.tgz",
+      "integrity": "sha512-uVip0VuGUQXZ+vFxkKxAUNq8qNl+VFlyHDh/U6IQ8COOEDfbEchdaHnpFrMYF3psZRUuoSIgb7xOeXj00RdwDA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.36.0"
       },
       "engines": {
@@ -849,12 +885,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-lru-memoizer": {
-      "version": "0.57.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-lru-memoizer/-/instrumentation-lru-memoizer-0.57.0.tgz",
-      "integrity": "sha512-cEqpUocSKJfwDtLYTTJehRLWzkZ2eoePCxfVIgGkGkb83fMB71O+y4MvRHJPbeV2bdoWdOVrl8uO0+EynWhTEA==",
+      "version": "0.58.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-lru-memoizer/-/instrumentation-lru-memoizer-0.58.0.tgz",
+      "integrity": "sha512-6grM3TdMyHzlGY1cUA+mwoPueB1F3dYKgKtZIH6jOFXqfHAByyLTc+6PFjGM9tKh52CFBJaDwodNlL/Td39z7Q==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0"
+        "@opentelemetry/instrumentation": "^0.214.0"
       },
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
@@ -864,12 +900,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-mongodb": {
-      "version": "0.66.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-mongodb/-/instrumentation-mongodb-0.66.0.tgz",
-      "integrity": "sha512-d7m9QnAY+4TCWI4q1QRkfrc6fo/92VwssaB1DzQfXNRvu51b78P+HJlWP7Qg6N6nkwdb9faMZNBCZJfftmszkw==",
+      "version": "0.67.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-mongodb/-/instrumentation-mongodb-0.67.0.tgz",
+      "integrity": "sha512-1WJp5N1lYfHq2IhECOTewFs5Tf2NfUOwQRqs/rZdXKTezArMlucxgzAaqcgp3A3YREXopXTpXHsxZTGHjNhMdQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.33.0"
       },
       "engines": {
@@ -880,13 +916,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-mongoose": {
-      "version": "0.59.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-mongoose/-/instrumentation-mongoose-0.59.0.tgz",
-      "integrity": "sha512-6/jWU+c1NgznkVLDU/2y0bXV2nJo3o9FWZ9mZ9nN6T/JBNRoMnVXZl2FdBmgH+a5MwaWLs5kmRJTP5oUVGIkPw==",
+      "version": "0.60.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-mongoose/-/instrumentation-mongoose-0.60.0.tgz",
+      "integrity": "sha512-8BahAZpKsOoc+lrZGb7Ofn4g3z8qtp5IxDfvAVpKXsEheQN7ONMH5djT5ihy6yf8yyeQJGS0gXFfpEAEeEHqQg==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.33.0"
       },
       "engines": {
@@ -897,12 +933,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-mysql": {
-      "version": "0.59.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-mysql/-/instrumentation-mysql-0.59.0.tgz",
-      "integrity": "sha512-r+V/Fh0sm7Ga8/zk/TI5H5FQRAjwr0RrpfPf8kNIehlsKf12XnvIaZi8ViZkpX0gyPEpLXqzqWD6QHlgObgzZw==",
+      "version": "0.60.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-mysql/-/instrumentation-mysql-0.60.0.tgz",
+      "integrity": "sha512-08pO8GFPEIz2zquKDGteBZDNmwketdgH8hTe9rVYgW9kCJXq1Psj3wPQGx+VaX4ZJKCfPeoLMYup9+cxHvZyVQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.33.0",
         "@types/mysql": "2.15.27"
       },
@@ -914,12 +950,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-mysql2": {
-      "version": "0.59.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-mysql2/-/instrumentation-mysql2-0.59.0.tgz",
-      "integrity": "sha512-n9/xrVCRBfG9egVbffnlU1uhr+HX0vF4GgtAB/Bvm48wpFgRidqD8msBMiym1kRYzmpWvJqTxNT47u1MkgBEdw==",
+      "version": "0.60.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-mysql2/-/instrumentation-mysql2-0.60.0.tgz",
+      "integrity": "sha512-m/5d3bxQALllCzezYDk/6vajh0tj5OijMMvOZGr+qN1NMXm1dzMNwyJ0gNZW7Fo3YFRyj/jJMxIw+W7d525dlw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.33.0",
         "@opentelemetry/sql-common": "^0.41.2"
       },
@@ -931,13 +967,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-pg": {
-      "version": "0.65.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-pg/-/instrumentation-pg-0.65.0.tgz",
-      "integrity": "sha512-W0zpHEIEuyZ8zvb3njaX9AAbHgPYOsSWVOoWmv1sjVRSF6ZpBqtlxBWbU+6hhq1TFWBeWJOXZ8nZS/PUFpLJYQ==",
+      "version": "0.66.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-pg/-/instrumentation-pg-0.66.0.tgz",
+      "integrity": "sha512-KxfLGXBb7k2ueaPJfq2GXBDXBly8P+SpR/4Mj410hhNgmQF3sCqwXvUBQxZQkDAmsdBAoenM+yV1LhtsMRamcA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.34.0",
         "@opentelemetry/sql-common": "^0.41.2",
         "@types/pg": "8.15.6",
@@ -951,12 +987,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-redis": {
-      "version": "0.61.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-redis/-/instrumentation-redis-0.61.0.tgz",
-      "integrity": "sha512-JnPexA034/0UJRsvH96B0erQoNOqKJZjE2ZRSw9hiTSC23LzE0nJE/u6D+xqOhgUhRnhhcPHq4MdYtmUdYTF+Q==",
+      "version": "0.62.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-redis/-/instrumentation-redis-0.62.0.tgz",
+      "integrity": "sha512-y3pPpot7WzR/8JtHcYlTYsyY8g+pbFhAqbwAuG5bLPnR6v6pt1rQc0DpH0OlGP/9CZbWBP+Zhwp9yFoygf/ZXQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/redis-common": "^0.38.2",
         "@opentelemetry/semantic-conventions": "^1.27.0"
       },
@@ -968,12 +1004,12 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-tedious": {
-      "version": "0.32.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-tedious/-/instrumentation-tedious-0.32.0.tgz",
-      "integrity": "sha512-BQS6gG8RJ1foEqfEZ+wxoqlwfCAzb1ZVG0ad8Gfe4x8T658HJCLGLd4E4NaoQd8EvPfLqOXgzGaE/2U4ytDSWA==",
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-tedious/-/instrumentation-tedious-0.33.0.tgz",
+      "integrity": "sha512-Q6WQwAD01MMTub31GlejoiFACYNw26J426wyjvU7by7fDIr2nZXNW4vhTGs7i7F0TnXBO3xN688g1tdUgYwJ5w==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.33.0",
         "@types/tedious": "^4.0.14"
       },
@@ -985,13 +1021,13 @@
       }
     },
     "node_modules/@opentelemetry/instrumentation-undici": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-undici/-/instrumentation-undici-0.23.0.tgz",
-      "integrity": "sha512-LL0VySzKVR2cJSFVZaTYpZl1XTpBGnfzoQPe2W7McS2267ldsaEIqtQY6VXs2KCXN0poFjze5110PIpxHDaDGg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation-undici/-/instrumentation-undici-0.24.0.tgz",
+      "integrity": "sha512-oKzZ3uvqP17sV0EsoQcJgjEfIp0kiZRbYu/eD8p13Cbahumf8lb/xpYeNr/hfAJ4owzEtIDcGIjprfLcYbIKBQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/core": "^2.0.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
+        "@opentelemetry/instrumentation": "^0.214.0",
         "@opentelemetry/semantic-conventions": "^1.24.0"
       },
       "engines": {
@@ -1091,9 +1127,9 @@
       }
     },
     "node_modules/@prisma/instrumentation": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-7.4.2.tgz",
-      "integrity": "sha512-r9JfchJF1Ae6yAxcaLu/V1TGqBhAuSDe3mRNOssBfx1rMzfZ4fdNvrgUBwyb/TNTGXFxlH9AZix5P257x07nrg==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-7.6.0.tgz",
+      "integrity": "sha512-ZPW2gRiwpPzEfgeZgaekhqXrbW+Y2RJKHVqUmlhZhKzRNCcvR6DykzylDrynpArKKRQtLxoZy36fK7U0p3pdgQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@opentelemetry/instrumentation": "^0.207.0"
@@ -1433,54 +1469,54 @@
       }
     },
     "node_modules/@sentry/core": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.46.0.tgz",
-      "integrity": "sha512-N3fj4zqBQOhXliS1Ne9euqIKuciHCGOJfPGQLwBoW9DNz03jF+NB8+dUKtrJ79YLoftjVgf8nbgwtADK7NR+2Q==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.47.0.tgz",
+      "integrity": "sha512-nsYRAx3EWezDut+Zl+UwwP07thh9uY7CfSAi2whTdcJl5hu1nSp2z8bba7Vq/MGbNLnazkd3A+GITBEML924JA==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/@sentry/node": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-10.46.0.tgz",
-      "integrity": "sha512-vF+7FrUXEtmYWuVcnvBjlWKeyLw/kwHpwnGj9oUmO/a2uKjDmUr53ZVcapggNxCjivavGYr9uHOY64AGdeUyzA==",
-      "license": "MIT",
-      "dependencies": {
-        "@fastify/otel": "0.17.1",
-        "@opentelemetry/api": "^1.9.0",
-        "@opentelemetry/context-async-hooks": "^2.6.0",
-        "@opentelemetry/core": "^2.6.0",
-        "@opentelemetry/instrumentation": "^0.213.0",
-        "@opentelemetry/instrumentation-amqplib": "0.60.0",
-        "@opentelemetry/instrumentation-connect": "0.56.0",
-        "@opentelemetry/instrumentation-dataloader": "0.30.0",
-        "@opentelemetry/instrumentation-express": "0.61.0",
-        "@opentelemetry/instrumentation-fs": "0.32.0",
-        "@opentelemetry/instrumentation-generic-pool": "0.56.0",
-        "@opentelemetry/instrumentation-graphql": "0.61.0",
-        "@opentelemetry/instrumentation-hapi": "0.59.0",
-        "@opentelemetry/instrumentation-http": "0.213.0",
-        "@opentelemetry/instrumentation-ioredis": "0.61.0",
-        "@opentelemetry/instrumentation-kafkajs": "0.22.0",
-        "@opentelemetry/instrumentation-knex": "0.57.0",
-        "@opentelemetry/instrumentation-koa": "0.61.0",
-        "@opentelemetry/instrumentation-lru-memoizer": "0.57.0",
-        "@opentelemetry/instrumentation-mongodb": "0.66.0",
-        "@opentelemetry/instrumentation-mongoose": "0.59.0",
-        "@opentelemetry/instrumentation-mysql": "0.59.0",
-        "@opentelemetry/instrumentation-mysql2": "0.59.0",
-        "@opentelemetry/instrumentation-pg": "0.65.0",
-        "@opentelemetry/instrumentation-redis": "0.61.0",
-        "@opentelemetry/instrumentation-tedious": "0.32.0",
-        "@opentelemetry/instrumentation-undici": "0.23.0",
-        "@opentelemetry/resources": "^2.6.0",
-        "@opentelemetry/sdk-trace-base": "^2.6.0",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-10.47.0.tgz",
+      "integrity": "sha512-R+btqPepv88o635G6HtVewLjqCLUedBg5HBs7Nq1qbbKvyti01uArUF2f+3DsLenk5B9LUNiRlE+frZA44Ahmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/otel": "0.18.0",
+        "@opentelemetry/api": "^1.9.1",
+        "@opentelemetry/context-async-hooks": "^2.6.1",
+        "@opentelemetry/core": "^2.6.1",
+        "@opentelemetry/instrumentation": "^0.214.0",
+        "@opentelemetry/instrumentation-amqplib": "0.61.0",
+        "@opentelemetry/instrumentation-connect": "0.57.0",
+        "@opentelemetry/instrumentation-dataloader": "0.31.0",
+        "@opentelemetry/instrumentation-express": "0.62.0",
+        "@opentelemetry/instrumentation-fs": "0.33.0",
+        "@opentelemetry/instrumentation-generic-pool": "0.57.0",
+        "@opentelemetry/instrumentation-graphql": "0.62.0",
+        "@opentelemetry/instrumentation-hapi": "0.60.0",
+        "@opentelemetry/instrumentation-http": "0.214.0",
+        "@opentelemetry/instrumentation-ioredis": "0.62.0",
+        "@opentelemetry/instrumentation-kafkajs": "0.23.0",
+        "@opentelemetry/instrumentation-knex": "0.58.0",
+        "@opentelemetry/instrumentation-koa": "0.62.0",
+        "@opentelemetry/instrumentation-lru-memoizer": "0.58.0",
+        "@opentelemetry/instrumentation-mongodb": "0.67.0",
+        "@opentelemetry/instrumentation-mongoose": "0.60.0",
+        "@opentelemetry/instrumentation-mysql": "0.60.0",
+        "@opentelemetry/instrumentation-mysql2": "0.60.0",
+        "@opentelemetry/instrumentation-pg": "0.66.0",
+        "@opentelemetry/instrumentation-redis": "0.62.0",
+        "@opentelemetry/instrumentation-tedious": "0.33.0",
+        "@opentelemetry/instrumentation-undici": "0.24.0",
+        "@opentelemetry/resources": "^2.6.1",
+        "@opentelemetry/sdk-trace-base": "^2.6.1",
         "@opentelemetry/semantic-conventions": "^1.40.0",
-        "@prisma/instrumentation": "7.4.2",
-        "@sentry/core": "10.46.0",
-        "@sentry/node-core": "10.46.0",
-        "@sentry/opentelemetry": "10.46.0",
+        "@prisma/instrumentation": "7.6.0",
+        "@sentry/core": "10.47.0",
+        "@sentry/node-core": "10.47.0",
+        "@sentry/opentelemetry": "10.47.0",
         "import-in-the-middle": "^3.0.0"
       },
       "engines": {
@@ -1488,13 +1524,13 @@
       }
     },
     "node_modules/@sentry/node-core": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/node-core/-/node-core-10.46.0.tgz",
-      "integrity": "sha512-gwLGXfkzmiCmUI1VWttyoZBaVp1ItpDKc8AV2mQblWPQGdLSD0c6uKV/FkU291yZA3rXsrLXVwcWoibwnjE2vw==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry/node-core/-/node-core-10.47.0.tgz",
+      "integrity": "sha512-qv6LsqHbkQmd0aQEUox/svRSz26J+l4gGjFOUNEay2armZu9XLD+Ct89jpFgZD5oIPNAj2jraodTRqydXiwS5w==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "10.46.0",
-        "@sentry/opentelemetry": "10.46.0",
+        "@sentry/core": "10.47.0",
+        "@sentry/opentelemetry": "10.47.0",
         "import-in-the-middle": "^3.0.0"
       },
       "engines": {
@@ -1504,6 +1540,7 @@
         "@opentelemetry/api": "^1.9.0",
         "@opentelemetry/context-async-hooks": "^1.30.1 || ^2.1.0",
         "@opentelemetry/core": "^1.30.1 || ^2.1.0",
+        "@opentelemetry/exporter-trace-otlp-http": ">=0.57.0 <1",
         "@opentelemetry/instrumentation": ">=0.57.1 <1",
         "@opentelemetry/resources": "^1.30.1 || ^2.1.0",
         "@opentelemetry/sdk-trace-base": "^1.30.1 || ^2.1.0",
@@ -1519,6 +1556,9 @@
         "@opentelemetry/core": {
           "optional": true
         },
+        "@opentelemetry/exporter-trace-otlp-http": {
+          "optional": true
+        },
         "@opentelemetry/instrumentation": {
           "optional": true
         },
@@ -1534,12 +1574,12 @@
       }
     },
     "node_modules/@sentry/opentelemetry": {
-      "version": "10.46.0",
-      "resolved": "https://registry.npmjs.org/@sentry/opentelemetry/-/opentelemetry-10.46.0.tgz",
-      "integrity": "sha512-dzzV2ovruGsx9jzusGGr6cNPvMgYRu2BIrF8aMZ3rkQ1OpPJjPStqtA1l1fw0aoxHOxIjFU7ml4emF+xdmMl3g==",
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@sentry/opentelemetry/-/opentelemetry-10.47.0.tgz",
+      "integrity": "sha512-f6Hw2lrpCjlOksiosP0Z2jK/+l+21SIdoNglVeG/sttMyx8C8ywONKh0Ha50sFsvB1VaB8n94RKzzf3hkh9V3g==",
       "license": "MIT",
       "dependencies": {
-        "@sentry/core": "10.46.0"
+        "@sentry/core": "10.47.0"
       },
       "engines": {
         "node": ">=18"
@@ -1990,11 +2030,13 @@
       }
     },
     "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
-      "license": "MIT"
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
     },
     "node_modules/base64url": {
       "version": "3.0.1",
@@ -2057,14 +2099,15 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
-      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
-      "dev": true,
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
+      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
       }
     },
     "node_modules/braces": {
@@ -2585,7 +2628,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2670,6 +2712,37 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/espree": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
@@ -4001,16 +4074,18 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
-      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
-      "dev": true,
-      "license": "ISC",
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
-        "node": "*"
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/module-details-from-path": {
@@ -4161,29 +4236,6 @@
         "url": "https://opencollective.com/nodemon"
       }
     },
-    "node_modules/nodemon/node_modules/balanced-match": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
-      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
-    "node_modules/nodemon/node_modules/brace-expansion": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^4.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      }
-    },
     "node_modules/nodemon/node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -4194,22 +4246,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/nodemon/node_modules/minimatch": {
-      "version": "10.2.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
-      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "brace-expansion": "^5.0.2"
-      },
-      "engines": {
-        "node": "18 || 20 || >=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/nodemon/node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -4501,9 +4537,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.0.tgz",
-      "integrity": "sha512-PuseHIvAnz3bjrM2rGJtSgo1zjgxapTLZ7x2pjhzWwlp4SJQgK3f3iZIQwkpEnBaKz6seKBADpM4B4ySkuYypg==",
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.1.tgz",
+      "integrity": "sha512-fvU78fIjZ+SBM9YwCknCvKOUKkLVqtWDVctl0s7xIqfmfb38t2TT4ZU2gHm+Z8xGwgW+QWEU3oQSAzIbo89Ggw==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -5469,7 +5505,6 @@
       "integrity": "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",

From 54b92827bf79449f55b008075a376e07546ebc6a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 31 Mar 2026 18:55:30 +0000
Subject: [PATCH 18/19] chore: keep requirePlan free-for-all with TODO for
 future plan enforcement

Agent-Logs-Url: https://github.com/SamanPandey-in/codegraph-ai/sessions/c9e9bc41-64eb-458e-9655-02a01f6df14f

Co-authored-by: SamanPandey-in <171229634+SamanPandey-in@users.noreply.github.com>
---
 server/src/api/ai/routes/ai.routes.js         | 2 +-
 server/src/middleware/planGuard.middleware.js | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/server/src/api/ai/routes/ai.routes.js b/server/src/api/ai/routes/ai.routes.js
index f30e47a..b879ccc 100644
--- a/server/src/api/ai/routes/ai.routes.js
+++ b/server/src/api/ai/routes/ai.routes.js
@@ -137,7 +137,7 @@ function toGraphFromRows(nodeRows = [], edgeRows = []) {
 
 router.use(aiLimiter);
 
-router.post('/suggest-refactor', requirePlan('pro', 'team'), async (req, res, next) => {
+router.post('/suggest-refactor', requirePlan(), async (req, res, next) => {
   const jobId = String(req.body?.jobId || '').trim();
   const filePath = String(req.body?.filePath || '').trim();
 
diff --git a/server/src/middleware/planGuard.middleware.js b/server/src/middleware/planGuard.middleware.js
index 13512a6..d3be67b 100644
--- a/server/src/middleware/planGuard.middleware.js
+++ b/server/src/middleware/planGuard.middleware.js
@@ -81,6 +81,9 @@ async function resolveDatabaseUserId(authUser) {
   return upserted.rows[0]?.id || null;
 }
 
+// TODO: Enforce allowedPlans when paid tiers are introduced.
+// Currently every authenticated user is treated as 'free' regardless
+// of the plan list passed to this middleware.
 export function requirePlan(..._allowedPlans) {
   return async (req, res, next) => {
     try {

From 335880a40086bdf6d0af5ce240016a1046a5d266 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 31 Mar 2026 19:04:11 +0000
Subject: [PATCH 19/19] fix: apply all reviewer suggestions from PR review

Agent-Logs-Url: https://github.com/SamanPandey-in/codegraph-ai/sessions/4afbe458-4c1b-4d04-9219-07e6fd6b49fe

Co-authored-by: SamanPandey-in <171229634+SamanPandey-in@users.noreply.github.com>
---
 .../src/features/ai/components/QueryBar.jsx   |  2 +-
 .../graph/components/GraphToolbar.jsx         |  2 +-
 .../enrichment/ContractInferenceAgent.js      | 23 +++++++---------
 vscode-extension/src/GraphPanel.ts            | 27 ++++++++++++++++---
 vscode-extension/src/HoverProvider.ts         | 10 ++++---
 5 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/client/src/features/ai/components/QueryBar.jsx b/client/src/features/ai/components/QueryBar.jsx
index 699b404..71783be 100644
--- a/client/src/features/ai/components/QueryBar.jsx
+++ b/client/src/features/ai/components/QueryBar.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Search, X, CheckCircle, AlertCircle } from 'lucide-react';
+import { Search, X, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
 import { queryGraph, resetAiState, selectAiQueryState } from '../slices/aiSlice';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
diff --git a/client/src/features/graph/components/GraphToolbar.jsx b/client/src/features/graph/components/GraphToolbar.jsx
index d25c8ae..b56a25b 100644
--- a/client/src/features/graph/components/GraphToolbar.jsx
+++ b/client/src/features/graph/components/GraphToolbar.jsx
@@ -227,7 +227,7 @@ export default function GraphToolbar({ graphContainerId = 'graph-container' }) {
           size="sm"
           onClick={() => {
             dispatch(clearGraph());
-            navigate('/analyze');
+            navigate('/upload-repo');
           }}
           className="gap-2 h-9 px-4 rounded-xl"
         >
diff --git a/server/src/agents/enrichment/ContractInferenceAgent.js b/server/src/agents/enrichment/ContractInferenceAgent.js
index 502fbfb..f0c3c6d 100644
--- a/server/src/agents/enrichment/ContractInferenceAgent.js
+++ b/server/src/agents/enrichment/ContractInferenceAgent.js
@@ -1,12 +1,11 @@
 import { readFile } from 'fs/promises';
 import path from 'path';
-import OpenAI from 'openai';
 import crypto from 'crypto';
 import pLimit from 'p-limit';
 import { BaseAgent } from '../core/BaseAgent.js';
+import { createChatClient } from '../../services/ai/llmProvider.js';
 import { redisClient } from '../../infrastructure/connections.js';
 
-const MODEL = process.env.OPENAI_MODEL || 'gpt-4.1-mini';
 const CACHE_TTL = Number(process.env.AI_CACHE_TTL_SECONDS || 3600);
 const CONCURRENCY = Number(process.env.CONTRACT_CONCURRENCY || 3);
 
@@ -80,13 +79,10 @@ export class ContractInferenceAgent extends BaseAgent {
   maxRetries = 1;
   timeoutMs = 180_000;
 
-  constructor({ openaiClient, redis } = {}) {
+  constructor({ redis } = {}) {
     super();
-    this.openai =
-      openaiClient ||
-      (process.env.OPENAI_API_KEY ? new OpenAI({ apiKey: process.env.OPENAI_API_KEY }) : null);
+    this.chatClient = createChatClient();
     this.redis = redis || redisClient;
-    this.model = MODEL;
     this.concurrency = normalizeConcurrency(CONCURRENCY, 3);
     this.cacheTtlSeconds = Number.isFinite(CACHE_TTL) && CACHE_TTL > 0 ? CACHE_TTL : 3600;
   }
@@ -99,13 +95,13 @@ export class ContractInferenceAgent extends BaseAgent {
     const errors = [];
     const contracts = {};
 
-    if (!this.openai) {
+    if (!this.chatClient.isConfigured()) {
       return this.buildResult({
         jobId: context?.jobId,
         status: 'failed',
         confidence: 0,
         data: {},
-        errors: [{ code: 500, message: 'OPENAI_API_KEY required for ContractInferenceAgent.' }],
+        errors: [{ code: 500, message: 'AI provider is not configured. Set AI_API_KEY (or OPENAI_API_KEY) in your environment.' }],
         warnings,
         metrics: {},
         processingTimeMs: Date.now() - start,
@@ -160,15 +156,14 @@ export class ContractInferenceAgent extends BaseAgent {
           attempted += 1;
 
           try {
-            const completion = await this.openai.chat.completions.create({
-              model: this.model,
+            const result = await this.chatClient.createChatCompletion({
               temperature: 0.0,
-              max_tokens: 600,
-              response_format: { type: 'json_object' },
+              maxTokens: 600,
+              responseFormat: { type: 'json_object' },
               messages: [{ role: 'user', content: buildContractPrompt(filePath, content) }],
             });
 
-            const raw = completion?.choices?.[0]?.message?.content || '{}';
+            const raw = result?.content || '{}';
             const parsed = JSON.parse(String(raw).replace(/```json|```/g, '').trim());
             const normalized = normalizeContract(parsed);
 
diff --git a/vscode-extension/src/GraphPanel.ts b/vscode-extension/src/GraphPanel.ts
index 2ebd625..184a143 100644
--- a/vscode-extension/src/GraphPanel.ts
+++ b/vscode-extension/src/GraphPanel.ts
@@ -60,8 +60,15 @@ export class GraphPanel {
 
     // Handle messages from the webview
     this._panel.webview.onDidReceiveMessage(
-      (message) => {
+      async (message) => {
         switch (message.command) {
+          case 'webviewReady':
+          case 'refresh':
+            await this._sendGraphData();
+            break;
+          case 'openSettings':
+            vscode.commands.executeCommand('workbench.action.openSettings', 'codegraphAi');
+            break;
           case 'selectJobId':
             this._apiClient.setCurrentJobId(message.jobId);
             vscode.window.showInformationMessage(`Loaded graph for job ${message.jobId.slice(0, 8)}...`);
@@ -97,6 +104,20 @@ export class GraphPanel {
     this._panel.webview.html = this._getHtmlForWebview(this._panel.webview, repoPath);
   }
 
+  private async _sendGraphData() {
+    const jobId = this._apiClient.currentJobId;
+    if (!jobId) {
+      this._panel.webview.postMessage({ command: 'error', message: 'No graph loaded. Run an analysis first.' });
+      return;
+    }
+    try {
+      const data = await this._apiClient.getGraph(jobId);
+      this._panel.webview.postMessage({ command: 'graphLoaded', data: { ...data, jobId } });
+    } catch (err) {
+      this._panel.webview.postMessage({ command: 'error', message: (err as Error).message });
+    }
+  }
+
   private _getHtmlForWebview(webview: vscode.Webview, repoPath: string): string {
     const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css'));
     const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css'));
@@ -124,8 +145,8 @@ export class GraphPanel {
 <body>
   <div id="root"></div>
   <script nonce="${nonce}">
-    const vscode = acquireVsCodeApi();
-    const repoPath = "${escapeHtml(repoPath)}";
+    window.vscode = acquireVsCodeApi();
+    window.repoPath = "${escapeHtml(repoPath)}";
   </script>
   <script nonce="${nonce}" src="${scriptUri}"></script>
 </body>
diff --git a/vscode-extension/src/HoverProvider.ts b/vscode-extension/src/HoverProvider.ts
index 5d4707c..4b29882 100644
--- a/vscode-extension/src/HoverProvider.ts
+++ b/vscode-extension/src/HoverProvider.ts
@@ -1,4 +1,5 @@
 import * as vscode from 'vscode';
+import * as path from 'path';
 import { ApiClient } from './ApiClient';
 
 export class HoverProvider implements vscode.HoverProvider {
@@ -9,7 +10,7 @@ export class HoverProvider implements vscode.HoverProvider {
     if (!jobId) return null;
 
     const workspaceRoot = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || '';
-    const relativePath = document.uri.fsPath.replace(workspaceRoot + '/', '');
+    const relativePath = path.relative(workspaceRoot, document.uri.fsPath).replace(/\\/g, '/');
 
     try {
       const graph = await this.api.getGraph(jobId);
@@ -17,9 +18,12 @@ export class HoverProvider implements vscode.HoverProvider {
       if (!node) return null;
 
       const markdown = new vscode.MarkdownString();
-      markdown.isTrusted = true;
+      markdown.isTrusted = { enabledCommands: ['codegraphAi.openGraph'] };
       markdown.appendMarkdown(`**CodeGraph AI** — \`${relativePath}\`\n\n`);
-      if (node.summary) markdown.appendMarkdown(`${node.summary}\n\n`);
+      if (node.summary) {
+        markdown.appendText(node.summary);
+        markdown.appendMarkdown('\n\n');
+      }
       markdown.appendMarkdown(`- **Deps:** ${node.deps?.length || 0}  `);
       markdown.appendMarkdown(`**Used by:** ${Object.values(graph.graph).filter((n: any) => n.deps?.includes(relativePath)).length}\n\n`);
       markdown.appendMarkdown(`[Open in Graph](command:codegraphAi.openGraph)`);