fix: address CodeRabbit review findings -- 6 issues

1. docker-compose: add VOYAGE_API_KEY, COHERE_API_KEY, SENTRY_DSN
   to backend env (were in .env.example but never passed to container)
2. DashboardHome: remove unused useInvalidateRepoCache import
3. ErrorBoundary: remove misleading 'This has been logged' claim
   (we only console.error, no Sentry integration yet)
4. startup_checks.py: fix stale comment -- says 3-tuple, actual is
   2-tuple (env_var_name, description)
5. package.json: add @testing-library/dom peer dep required by RTL v16
6. useCachedQuery: use shared Repository type instead of inline cast
   missing git_url field -- fixes undefined git_url in DashboardHome

Author: DevanshuNEU

backend/config/startup_checks.py

@@ -9,7 +9,7 @@
 from services.observability import logger
 
 
-# (env_var_name, description, required)
+# (env_var_name, description)
 REQUIRED_VARS: List[Tuple[str, str]] = [
     ("SUPABASE_URL", "Supabase project URL"),
     ("SUPABASE_ANON_KEY", "Supabase anon/public key"),

docker-compose.yml

@@ -38,6 +38,9 @@ services:
       - API_KEY=${API_KEY}
       - BACKEND_API_URL=http://backend:8000
       - DISCORD_FEEDBACK_WEBHOOK=${DISCORD_FEEDBACK_WEBHOOK}
+      - COHERE_API_KEY=${COHERE_API_KEY}
+      - VOYAGE_API_KEY=${VOYAGE_API_KEY}
+      - SENTRY_DSN=${SENTRY_DSN}
       - FORWARDED_ALLOW_IPS=*
     volumes:
       - ./backend/repos:/app/repos

frontend/bun.lock

@@ -50,6 +50,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

frontend/package.json

@@ -32,7 +32,7 @@ export class ErrorBoundary extends Component<Props, State> {
             Something went wrong
           </h1>
           <p className="text-muted-foreground">
-            An unexpected error occurred. This has been logged.
+            An unexpected error occurred.
           </p>
           {this.state.error && (
             <pre className="text-xs text-left bg-muted border border-border rounded-lg p-3 overflow-auto max-h-[120px] text-muted-foreground">

frontend/src/components/ErrorBoundary.tsx

@@ -30,7 +30,7 @@ import { UpgradeLimitModal } from '../UpgradeLimitModal'
 import type { Repository } from '../../types'
 import type { GitHubRepo } from '../../hooks/useGitHubRepos'
 import { API_URL } from '../../config/api'
-import { useRepos, useInvalidateRepoCache } from '../../hooks/useCachedQuery'
+import { useRepos } from '../../hooks/useCachedQuery'
 
 const MAX_FREE_REPOS = 3
 

frontend/src/components/dashboard/DashboardHome.tsx

@@ -11,6 +11,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { getFromCache, saveToCache, invalidateRepoCache } from '../lib/cache'
 import { API_URL } from '../config/api'
+import type { Repository } from '../types'
 
 // Stale time: 5 minutes (data considered fresh)
 const STALE_TIME = 5 * 60 * 1000
@@ -177,16 +178,7 @@ export function useRepos(apiKey: string | undefined) {
     queryKey: ['repos'],
     queryFn: async () => {
       const data = await fetchWithAuth(`${API_URL}/repos`, apiKey!)
-      return (data.repositories || []) as Array<{
-        id: string
-        name: string
-        url: string
-        status: string
-        file_count: number
-        language: string
-        branch: string
-        created_at: string
-      }>
+      return (data.repositories || []) as Array<Repository>
     },
     enabled: !!apiKey,
     refetchInterval: 30_000,

frontend/src/hooks/useCachedQuery.ts

@@ -0,0 +1,45 @@
+// smoke test: ErrorBoundary renders fallback on error, recovers on retry
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ErrorBoundary } from '@/components/ErrorBoundary'
+
+function ThrowingChild({ shouldThrow }: { shouldThrow: boolean }) {
+  if (shouldThrow) throw new Error('test explosion')
+  return <div>child rendered</div>
+}
+
+describe('ErrorBoundary', () => {
+  // suppress console.error from React's error boundary logging
+  const originalError = console.error
+  beforeEach(() => { console.error = vi.fn() })
+  afterEach(() => { console.error = originalError })
+
+  it('renders children when no error', () => {
+    render(
+      <ErrorBoundary>
+        <div>hello</div>
+      </ErrorBoundary>
+    )
+    expect(screen.getByText('hello')).toBeInTheDocument()
+  })
+
+  it('renders fallback UI when child throws', () => {
+    render(
+      <ErrorBoundary>
+        <ThrowingChild shouldThrow={true} />
+      </ErrorBoundary>
+    )
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByText('test explosion')).toBeInTheDocument()
+  })
+
+  it('shows Try again and Go home buttons', () => {
+    render(
+      <ErrorBoundary>
+        <ThrowingChild shouldThrow={true} />
+      </ErrorBoundary>
+    )
+    expect(screen.getByText('Try again')).toBeInTheDocument()
+    expect(screen.getByText('Go home')).toBeInTheDocument()
+  })
+})

frontend/src/test/ErrorBoundary.test.tsx

@@ -0,0 +1,72 @@
+// smoke test: useGraphData transforms API response into a valid graphology graph
+import { describe, it, expect } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useGraphData } from '@/components/DependencyGraph/GraphView/useGraphData'
+import type { DependencyApiResponse } from '@/components/DependencyGraph/types'
+
+const mockApiData: DependencyApiResponse = {
+  nodes: [
+    { id: 'src/App.tsx', label: 'App.tsx', language: 'typescript', import_count: 3 },
+    { id: 'src/utils.ts', label: 'utils.ts', language: 'typescript', import_count: 0 },
+    { id: 'src/types.ts', label: 'types.ts', language: 'typescript', import_count: 0 },
+    { id: 'src/orphan.ts', label: 'orphan.ts', language: 'typescript', import_count: 0 },
+  ],
+  edges: [
+    { source: 'src/App.tsx', target: 'src/utils.ts' },
+    { source: 'src/App.tsx', target: 'src/types.ts' },
+  ],
+  total_files: 4,
+  total_dependencies: 2,
+}
+
+describe('useGraphData', () => {
+  it('returns null for empty data', () => {
+    const { result } = renderHook(() => useGraphData(undefined))
+    expect(result.current).toBeNull()
+  })
+
+  it('builds a graph with connected nodes, filters orphans', () => {
+    const { result } = renderHook(() => useGraphData(mockApiData))
+    const graph = result.current!
+
+    // orphan.ts has 0 connections, should be filtered
+    expect(graph.order).toBe(3)
+    expect(graph.hasNode('src/App.tsx')).toBe(true)
+    expect(graph.hasNode('src/utils.ts')).toBe(true)
+    expect(graph.hasNode('src/types.ts')).toBe(true)
+    expect(graph.hasNode('src/orphan.ts')).toBe(false)
+  })
+
+  it('creates correct edges', () => {
+    const { result } = renderHook(() => useGraphData(mockApiData))
+    const graph = result.current!
+
+    expect(graph.size).toBe(2)
+    expect(graph.hasEdge('src/App.tsx', 'src/utils.ts')).toBe(true)
+    expect(graph.hasEdge('src/App.tsx', 'src/types.ts')).toBe(true)
+  })
+
+  it('assigns node attributes: label, size, directory, color', () => {
+    const { result } = renderHook(() => useGraphData(mockApiData))
+    const graph = result.current!
+    const attrs = graph.getNodeAttributes('src/App.tsx')
+
+    expect(attrs.label).toBe('App.tsx')
+    expect(attrs.directory).toBe('src')
+    expect(typeof attrs.size).toBe('number')
+    expect(attrs.size).toBeGreaterThan(0)
+    // Louvain or directory fallback should assign a color
+    expect(attrs.color).toBeDefined()
+  })
+
+  it('sets ForceAtlas2 positions (x, y are numbers)', () => {
+    const { result } = renderHook(() => useGraphData(mockApiData))
+    const graph = result.current!
+    const attrs = graph.getNodeAttributes('src/App.tsx')
+
+    expect(typeof attrs.x).toBe('number')
+    expect(typeof attrs.y).toBe('number')
+    expect(Number.isFinite(attrs.x)).toBe(true)
+    expect(Number.isFinite(attrs.y)).toBe(true)
+  })
+})

frontend/src/test/useGraphData.test.ts

@@ -0,0 +1,68 @@
+// smoke test: useDirectoryMatrix builds correct adjacency matrix from API data
+import { describe, it, expect } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useDirectoryMatrix } from '@/components/DependencyGraph/MatrixView/useMatrixData'
+import type { DependencyApiResponse } from '@/components/DependencyGraph/types'
+
+const mockApiData: DependencyApiResponse = {
+  nodes: [
+    { id: 'backend/main.py' },
+    { id: 'backend/routes/auth.py' },
+    { id: 'backend/services/db.py' },
+    { id: 'frontend/src/App.tsx' },
+    { id: 'frontend/src/utils.ts' },
+  ],
+  edges: [
+    { source: 'backend/routes/auth.py', target: 'backend/services/db.py' },
+    { source: 'backend/main.py', target: 'backend/routes/auth.py' },
+    { source: 'frontend/src/App.tsx', target: 'frontend/src/utils.ts' },
+    // cross-project dep
+    { source: 'backend/routes/auth.py', target: 'backend/main.py' },
+  ],
+  total_files: 5,
+  total_dependencies: 4,
+}
+
+describe('useDirectoryMatrix', () => {
+  it('returns null for empty data', () => {
+    const { result } = renderHook(() => useDirectoryMatrix(undefined))
+    expect(result.current).toBeNull()
+  })
+
+  it('groups files into directories', () => {
+    const { result } = renderHook(() => useDirectoryMatrix(mockApiData))
+    const data = result.current!
+
+    expect(data.directories).toContain('backend')
+    expect(data.directories).toContain('backend/routes')
+    expect(data.directories).toContain('backend/services')
+    expect(data.directories).toContain('frontend/src')
+  })
+
+  it('counts cross-directory deps only in totalDeps', () => {
+    const { result } = renderHook(() => useDirectoryMatrix(mockApiData))
+    const data = result.current!
+
+    // all 4 edges are cross-directory (different dirs), intra-dir = 0
+    // the matrix diagonal is self-deps which we exclude
+    expect(data.totalDeps).toBeGreaterThan(0)
+  })
+
+  it('detects circular dependencies between directories', () => {
+    const { result } = renderHook(() => useDirectoryMatrix(mockApiData))
+    const data = result.current!
+
+    // backend -> backend/routes and backend/routes -> backend = circular
+    expect(data.totalCycles).toBeGreaterThanOrEqual(1)
+  })
+
+  it('provides short labels for display', () => {
+    const { result } = renderHook(() => useDirectoryMatrix(mockApiData))
+    const data = result.current!
+
+    // short labels are the last segment of the dir path
+    expect(data.shortLabels).toContain('routes')
+    expect(data.shortLabels).toContain('services')
+    expect(data.shortLabels).toContain('src')
+  })
+})