diff --git a/plans/Agent1.md b/plans/Agent1.md
new file mode 100644
index 0000000..ded4338
--- /dev/null
+++ b/plans/Agent1.md
@@ -0,0 +1,630 @@
+# Codebase Analysis and Improvement Recommendations
+
+## Project Overview
+
+**btop** is a web-based system monitoring tool inspired by the classic `btop` terminal application. It provides real-time system metrics visualization including CPU usage, memory consumption, process monitoring, and environment variables.
+
+**Tech Stack:**
+- Frontend: React 19.2.0 + TypeScript + Vite
+- Backend: Bun server (TypeScript)
+- Charting: Recharts
+- Runtime: Bun (for server)
+- Total LOC: ~1,921 lines
+
+**Architecture:**
+- Client-server architecture with REST API
+- Real-time polling for metrics (configurable 0.5s - 5s)
+- Platform-specific system calls (macOS/Linux)
+
+---
+
+## Critical Issues
+
+### 1. Security Vulnerabilities
+
+#### Environment Variables Exposure (HIGH PRIORITY)
+**File:** `/Users/johnbingham/Desktop/demo/btop/server/index.ts` (lines 290-302)
+
+The `/api/environment` endpoint exposes ALL environment variables without any filtering or sanitization:
+
+```typescript
+if (url.pathname === "/api/environment") {
+  const envVars = Object.entries(process.env).map(([key, value]) => ({
+    name: key,
+    value: value || "",
+  }));
+  return new Response(JSON.stringify({ variables: envVars }), {
+    headers: {
+      "Content-Type": "application/json",
+      ...corsHeaders,
+    },
+  });
+}
+```
+
+**Risk:** This exposes sensitive data like API keys, database credentials, tokens, AWS secrets, etc.
+
+**Recommendations:**
+- Implement an allowlist of safe environment variables to display
+- Redact sensitive values (show only first/last few characters)
+- Add authentication/authorization before exposing environment data
+- Consider removing this endpoint entirely for production use
+
+#### CORS Configuration Too Permissive
+**File:** `/Users/johnbingham/Desktop/demo/btop/server/index.ts` (lines 261-265)
+
+```typescript
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "GET, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type",
+};
+```
+
+**Issue:** Allows any origin to access the API, making it vulnerable to unauthorized access.
+
+**Recommendations:**
+- Restrict CORS to specific origins (e.g., `http://localhost:5173`)
+- Make CORS configuration environment-dependent
+- Add request rate limiting
+
+#### Command Injection Risk
+**File:** `/Users/johnbingham/Desktop/demo/btop/server/index.ts` (lines 94-136)
+
+Uses `exec` to run shell commands (`ps aux`, `vm_stat`, `cat /proc/meminfo`) without proper sanitization.
+
+**Recommendations:**
+- Use native Node.js APIs where possible instead of shell commands
+- If shell commands are necessary, use safer alternatives or strict input validation
+- Consider using libraries that provide process information without shell execution
+
+---
+
+## Code Quality Issues
+
+### 2. Type Safety and Error Handling
+
+#### Duplicate Type Definitions
+**Files:**
+- `/Users/johnbingham/Desktop/demo/btop/src/types.ts`
+- `/Users/johnbingham/Desktop/demo/btop/server/index.ts`
+
+The same interfaces (`ProcessInfo`, `CpuUsage`, `SystemMetrics`) are defined in both files, violating DRY principle.
+
+**Recommendations:**
+- Create a shared types package/file that both frontend and backend import
+- Use a monorepo structure or proper module sharing
+- Consider using tools like `ts-node` or path aliases for better import management
+
+#### Weak Error Handling
+**File:** `/Users/johnbingham/Desktop/demo/btop/src/hooks/useSystemMetrics.ts`
+
+```typescript
+} catch (err) {
+  setError(err instanceof Error ? err.message : 'Failed to fetch metrics');
+}
+```
+
+**Issues:**
+- Generic error messages don't help with debugging
+- No retry logic for transient failures
+- No error logging or monitoring
+
+**Recommendations:**
+- Implement exponential backoff retry logic
+- Add detailed error context (status codes, timestamps)
+- Integrate error tracking (Sentry, LogRocket, etc.)
+- Provide user-friendly error messages with actionable steps
+
+#### Missing Null/Undefined Checks
+**File:** `/Users/johnbingham/Desktop/demo/btop/server/index.ts` (line 243)
+
+```typescript
+cpuModel: cpuInfo[0]?.model || "Unknown",
+```
+
+Good use of optional chaining, but similar patterns are missing elsewhere in the codebase.
+
+---
+
+### 3. Testing Infrastructure
+
+#### Complete Absence of Tests
+**Critical Gap:** Zero test coverage for the entire application.
+
+**Recommendations:**
+
+**Unit Tests:**
+- Test utility functions (`formatBytes`, `formatUptime`, `getCpuUsage`)
+- Test React hooks (`useSystemMetrics`)
+- Test component rendering and interactions
+
+**Integration Tests:**
+- Test API endpoints (`/api/metrics`, `/api/environment`, `/api/health`)
+- Test client-server communication
+- Test error scenarios and edge cases
+
+**E2E Tests:**
+- Test full user workflows
+- Test responsive design breakpoints
+- Test real-time data updates
+
+**Suggested Testing Stack:**
+- Vitest (unit/integration tests)
+- React Testing Library (component tests)
+- Playwright or Cypress (E2E tests)
+- MSW (API mocking)
+
+**Action Items:**
+1. Add test scripts to `package.json`
+2. Configure test environment in Vite
+3. Aim for 70%+ code coverage
+4. Add CI/CD pipeline with automated testing
+
+---
+
+### 4. Performance Optimization
+
+#### Inefficient State Updates
+**File:** `/Users/johnbingham/Desktop/demo/btop/src/components/CpuGraph.tsx` (lines 40-53)
+
+```typescript
+useEffect(() => {
+  const newPoint: HistoryPoint = { time: Date.now() };
+  cpuUsage.forEach((cpu) => {
+    newPoint[`cpu${cpu.core}`] = cpu.usage;
+  });
+
+  setHistory((prev) => {
+    const updated = [...prev, newPoint];
+    if (updated.length > HISTORY_LENGTH) {
+      return updated.slice(-HISTORY_LENGTH);
+    }
+    return updated;
+  });
+}, [cpuUsage]);
+```
+
+**Issues:**
+- Creates new array on every update
+- Triggers re-render even when data hasn't changed significantly
+
+**Recommendations:**
+- Use `useCallback` for stable function references
+- Implement debouncing/throttling for high-frequency updates
+- Consider using `useMemo` for expensive calculations
+- Use `React.memo` for components that don't need frequent re-renders
+
+#### Memory Leaks Potential
+**File:** `/Users/johnbingham/Desktop/demo/btop/src/hooks/useSystemMetrics.ts`
+
+The cleanup function is present but could be improved:
+
+**Recommendations:**
+- Add AbortController for fetch requests
+- Clear intervals more defensively
+- Add memory leak detection in development
+
+#### Large Dependency Bundle
+**Issue:** Using full Recharts library when only using a few components.
+
+**Recommendations:**
+- Consider tree-shaking optimizations
+- Evaluate lighter alternatives (Victory Native XL, lightweight-charts)
+- Implement code splitting for better initial load time
+- Add bundle size monitoring (bundlephobia, webpack-bundle-analyzer)
+
+---
+
+### 5. Architecture and Design Patterns
+
+#### Tight Coupling Between Components
+**File:** `/Users/johnbingham/Desktop/demo/btop/src/App.tsx`
+
+The App component directly manages all state and passes props to child components.
+
+**Recommendations:**
+- Implement proper state management (Context API, Zustand, or Redux)
+- Separate data fetching logic into a service layer
+- Use composition patterns for better component reusability
+- Consider feature-based folder structure:
+  ```
+  src/
+    features/
+      cpu/
+        components/
+        hooks/
+        types/
+      memory/
+      processes/
+    shared/
+      components/
+      hooks/
+      utils/
+  ```
+
+#### Hardcoded Configuration
+**Files:** Multiple files with magic numbers
+
+**Issues:**
+- API URL hardcoded (`http://localhost:3001`)
+- Port numbers not configurable
+- History length, colors, thresholds hardcoded
+
+**Recommendations:**
+- Create a configuration file with environment-specific settings
+- Use environment variables (`.env`, `.env.local`)
+- Implement feature flags for experimental features
+- Extract constants to dedicated files:
+  ```typescript
+  // config/constants.ts
+  export const API_CONFIG = {
+    BASE_URL: import.meta.env.VITE_API_URL || 'http://localhost:3001',
+    ENDPOINTS: {
+      METRICS: '/api/metrics',
+      ENVIRONMENT: '/api/environment',
+      HEALTH: '/api/health',
+    },
+  };
+
+  export const CHART_CONFIG = {
+    HISTORY_LENGTH: 60,
+    COLORS: [...],
+  };
+  ```
+
+#### Server Modularity
+**File:** `/Users/johnbingham/Desktop/demo/btop/server/index.ts`
+
+Single 309-line file contains all server logic.
+
+**Recommendations:**
+- Split into separate modules:
+  ```
+  server/
+    routes/
+      metrics.ts
+      environment.ts
+      health.ts
+    services/
+      processService.ts
+      cpuService.ts
+      memoryService.ts
+    utils/
+      formatters.ts
+      platform.ts
+    middleware/
+      cors.ts
+      errorHandler.ts
+      rateLimit.ts
+    index.ts
+    config.ts
+  ```
+- Implement proper routing (express, hono, elysia)
+- Add middleware for logging, error handling, validation
+
+---
+
+### 6. Documentation
+
+#### Insufficient Documentation
+**Current State:**
+- README is generic Vite template
+- No API documentation
+- No inline comments for complex logic
+- No architecture diagrams
+
+**Recommendations:**
+
+**README.md should include:**
+- Project overview and screenshots
+- Prerequisites and system requirements
+- Installation instructions
+- Development setup
+- Available scripts and their purposes
+- Environment variables documentation
+- Deployment instructions
+- Contributing guidelines
+- License information
+
+**Add API Documentation:**
+- Document all endpoints with request/response schemas
+- Include example requests using curl/httpie
+- Consider OpenAPI/Swagger specification
+- Document WebSocket connections (if added later)
+
+**Code Documentation:**
+- Add JSDoc comments for complex functions
+- Document algorithmic decisions (CPU usage calculation)
+- Add inline comments for platform-specific code
+- Create ARCHITECTURE.md explaining design decisions
+
+**Example JSDoc:**
+```typescript
+/**
+ * Calculates CPU usage percentage based on difference from previous measurement
+ * @param cpuInfo - Array of CPU core information from os.cpus()
+ * @returns Array of CpuUsage objects with per-core statistics
+ */
+function getCpuUsage(): CpuUsage[] {
+  // ...
+}
+```
+
+---
+
+### 7. Developer Experience
+
+#### Missing Development Tools
+
+**Recommendations:**
+
+**Pre-commit Hooks:**
+```json
+// package.json
+{
+  "devDependencies": {
+    "husky": "^8.0.0",
+    "lint-staged": "^15.0.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}
+```
+
+**Prettier Configuration:**
+```json
+// .prettierrc
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2
+}
+```
+
+**EditorConfig:**
+```ini
+# .editorconfig
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+```
+
+**VS Code Workspace Settings:**
+```json
+// .vscode/settings.json
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
+```
+
+#### No CI/CD Pipeline
+
+**Recommendations:**
+- Set up GitHub Actions for:
+  - Automated testing
+  - Linting and type checking
+  - Build verification
+  - Security scanning (Snyk, npm audit)
+  - Automated deployments
+
+**Example GitHub Actions:**
+```yaml
+# .github/workflows/ci.yml
+name: CI
+on: [push, pull_request]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: oven-sh/setup-bun@v1
+      - run: bun install
+      - run: bun run lint
+      - run: bun run test
+      - run: bun run build
+```
+
+---
+
+### 8. Code Style and Consistency
+
+#### ESLint Configuration Could Be Stricter
+
+**Current:** Basic configuration
+**Recommendations:**
+- Enable type-aware linting as suggested in README
+- Add accessibility rules (`eslint-plugin-jsx-a11y`)
+- Add import ordering (`eslint-plugin-import`)
+- Add security rules (`eslint-plugin-security`)
+
+```javascript
+// eslint.config.js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommendedTypeChecked,
+      tseslint.configs.strictTypeChecked,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+      '@typescript-eslint/explicit-function-return-type': 'warn',
+      '@typescript-eslint/no-explicit-any': 'error',
+    },
+  },
+]);
+```
+
+#### Inconsistent Code Formatting
+
+**Issues:**
+- Inconsistent spacing and indentation in some files
+- Mixed quote styles in some places
+- Inconsistent import ordering
+
+**Recommendations:**
+- Add Prettier and make it mandatory
+- Configure IDE auto-formatting
+- Add formatting checks to CI/CD
+
+---
+
+### 9. Accessibility
+
+#### Missing Accessibility Features
+
+**Issues:**
+- No keyboard navigation for process table
+- Missing ARIA labels
+- No screen reader support
+- Color-only indicators (not accessible for colorblind users)
+
+**Recommendations:**
+- Add proper ARIA labels to all interactive elements
+- Implement keyboard shortcuts (as shown in UI but not functional)
+- Add focus indicators for keyboard navigation
+- Use patterns/icons in addition to colors for status
+- Test with screen readers
+- Add accessibility testing to CI/CD
+
+**Example:**
+```tsx
+<button
+  className="env-toggle"
+  onClick={() => setExpanded(!expanded)}
+  aria-expanded={expanded}
+  aria-label={expanded ? 'Show fewer variables' : `Show all ${filteredVars.length} variables`}
+>
+  {expanded ? 'Show less' : `Show all ${filteredVars.length} variables`}
+</button>
+```
+
+---
+
+### 10. Feature Enhancements
+
+#### Missing Features
+
+**Real-time Communication:**
+- Current polling approach is inefficient
+- Recommendation: Implement WebSockets for true real-time updates
+- Reduces server load and network traffic
+- Provides instant updates
+
+**Data Persistence:**
+- No historical data storage
+- Recommendation: Add optional local storage or backend database
+- Allow users to view historical trends
+- Export data for analysis
+
+**Process Interaction:**
+- Status bar shows F9 (Kill) but no functionality
+- Recommendation: Implement process management (with proper security)
+- Kill, pause, resume processes
+- Change process priority
+
+**Search and Filter:**
+- Basic filtering exists but could be enhanced
+- Recommendation: Advanced filtering with regex support
+- Save filter presets
+- Filter by multiple criteria
+
+**Alerts and Thresholds:**
+- No alerting mechanism
+- Recommendation: Add configurable alerts
+- Notify when CPU/memory exceeds threshold
+- Process monitoring (alert if process dies)
+
+**Dark/Light Mode:**
+- Only dark mode available
+- Recommendation: Add theme switcher
+- Respect system preferences
+- Allow custom themes
+
+---
+
+## Positive Aspects
+
+Despite the areas for improvement, this codebase has several strengths:
+
+1. **Clean Component Structure:** Components are well-organized and follow React best practices
+2. **Modern Tech Stack:** Uses latest React, TypeScript, and Vite
+3. **Type Safety:** Good use of TypeScript interfaces and types
+4. **Visual Design:** Excellent UI/UX with cyberpunk aesthetic
+5. **Cross-Platform Support:** Handles both macOS and Linux
+6. **Responsive Design:** Media queries for mobile support
+7. **Performance Consideration:** Uses memo and useMemo in some places
+8. **Good Variable Naming:** Descriptive and consistent naming conventions
+9. **Modular Components:** Components are small and focused
+10. **Real-time Updates:** Functional polling mechanism with configurable rates
+
+---
+
+## Priority Matrix
+
+### Critical (Fix Immediately)
+1. Security: Environment variable exposure
+2. Security: CORS configuration
+3. Security: Command injection risks
+
+### High Priority (Fix Soon)
+1. Add comprehensive test coverage
+2. Implement proper error handling and retry logic
+3. Fix duplicate type definitions
+4. Add configuration management
+
+### Medium Priority (Next Sprint)
+1. Improve performance optimizations
+2. Refactor server into modules
+3. Add CI/CD pipeline
+4. Improve documentation
+
+### Low Priority (Nice to Have)
+1. Add accessibility features
+2. Implement WebSocket support
+3. Add theme switcher
+4. Implement keyboard shortcuts
+
+---
+
+## Conclusion
+
+This is a well-structured project with a solid foundation, but it needs significant improvements in security, testing, and architecture before being production-ready. The codebase demonstrates good React and TypeScript practices but lacks the robustness needed for a production system monitoring tool.
+
+The most critical issues are security-related and should be addressed immediately. Following that, establishing a comprehensive test suite and improving error handling would significantly increase code quality and reliability.
+
+With these improvements, this could become a production-grade system monitoring tool with excellent user experience.
+
+---
+
+**Analysis Completed:** 2025-12-16
+**Total Files Analyzed:** 20+ source files
+**Lines of Code:** ~1,921
+**Assessment:** Good foundation, needs production hardening
diff --git a/plans/Agent2.md b/plans/Agent2.md
new file mode 100644
index 0000000..94458bc
--- /dev/null
+++ b/plans/Agent2.md
@@ -0,0 +1,521 @@
+# Agent 2 - Codebase Analysis and Improvement Recommendations
+
+## Project Overview
+
+**btop** is a web-based system monitoring application inspired by the terminal utility "btop++". It provides real-time CPU, memory, process monitoring, and environment variable inspection through a modern web interface.
+
+### Tech Stack
+- **Frontend**: React 19 + TypeScript + Vite
+- **Backend**: Bun runtime with TypeScript
+- **Charting**: Recharts library
+- **Styling**: Vanilla CSS with custom variables
+- **Build Tool**: Vite 7.2.4
+- **Package Manager**: Bun
+
+### Architecture
+The application follows a client-server architecture:
+- **Frontend**: React SPA polling a REST API for system metrics
+- **Backend**: Bun HTTP server on port 3001 exposing system information via API endpoints
+- **Data Flow**: Frontend polls `/api/metrics` every 1-5 seconds (configurable)
+
+---
+
+## Code Quality Assessment
+
+### Strengths
+
+1. **Modern TypeScript Setup**: Strong typing with strict mode enabled, good type safety across the codebase
+2. **Clean Component Structure**: Well-organized React components with clear responsibilities
+3. **Custom Hook Pattern**: Good use of `useSystemMetrics` hook for data fetching logic
+4. **Visual Design**: Professional UI with excellent CSS organization and theming
+5. **Real-time Updates**: Effective polling mechanism with configurable refresh rates
+6. **Cross-platform Support**: Handles both macOS and Linux for process/memory information
+
+### Weaknesses
+
+1. **No Testing Infrastructure**: Complete absence of tests (unit, integration, or e2e)
+2. **Limited Error Handling**: Minimal error recovery and edge case handling
+3. **No Documentation**: Lack of API documentation, architecture diagrams, or developer guides
+4. **Security Concerns**: Exposes all environment variables without filtering sensitive data
+5. **No State Management**: All state is local, may cause issues as app grows
+6. **Limited Accessibility**: No ARIA labels, keyboard navigation, or screen reader support
+7. **Performance Concerns**: Potential memory leaks from graph history accumulation
+8. **No Logging**: Missing structured logging for debugging production issues
+
+---
+
+## Detailed Improvement Recommendations
+
+### 1. Testing Infrastructure (HIGH PRIORITY)
+
+**Current State**: Zero test coverage
+
+**Recommendations**:
+- Add Vitest for unit/integration testing
+- Add React Testing Library for component testing
+- Add Playwright or Cypress for e2e testing
+- Aim for minimum 70% code coverage
+
+**Example package.json additions**:
+```json
+{
+  "devDependencies": {
+    "vitest": "^1.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/user-event": "^14.0.0"
+  },
+  "scripts": {
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  }
+}
+```
+
+**Priority Tests**:
+- `useSystemMetrics.test.ts` - Test hook with mocked fetch
+- `ProcessTable.test.tsx` - Test sorting, filtering functionality
+- `server/index.test.ts` - Test API endpoints
+- `App.test.tsx` - Test loading/error states
+
+### 2. Security Improvements (HIGH PRIORITY)
+
+**Issue**: `/api/environment` endpoint exposes ALL environment variables including potentially sensitive ones (API keys, secrets, tokens)
+
+**File**: `/Users/johnbingham/Desktop/demo/btop/server/index.ts` (lines 290-302)
+
+**Recommendations**:
+- Implement environment variable filtering/allowlist
+- Add authentication/authorization for sensitive endpoints
+- Add rate limiting to prevent abuse
+- Sanitize potentially sensitive values
+
+**Suggested Implementation**:
+```typescript
+// server/index.ts - line 290
+if (url.pathname === "/api/environment") {
+  // Sensitive patterns to filter out
+  const sensitivePatterns = [
+    /key/i, /secret/i, /token/i, /password/i,
+    /api_key/i, /auth/i, /credential/i
+  ];
+
+  const filteredVars = Object.entries(process.env)
+    .filter(([key]) => !sensitivePatterns.some(pattern => pattern.test(key)))
+    .map(([key, value]) => ({
+      name: key,
+      value: value || "",
+    }));
+
+  return new Response(JSON.stringify({ variables: filteredVars }), {
+    headers: {
+      "Content-Type": "application/json",
+      ...corsHeaders,
+    },
+  });
+}
+```
+
+### 3. Error Handling and Resilience (MEDIUM PRIORITY)
+
+**Current Issues**:
+- `/Users/johnbingham/Desktop/demo/btop/server/index.ts`: `exec` commands can fail silently (line 107)
+- `/Users/johnbingham/Desktop/demo/btop/src/hooks/useSystemMetrics.ts`: No retry logic for failed requests
+- Process parsing assumes specific format, could break on different systems
+
+**Recommendations**:
+- Add exponential backoff retry logic to API calls
+- Implement circuit breaker pattern for repeated failures
+- Add graceful degradation when certain metrics unavailable
+- Better error messages for users
+
+**Example for useSystemMetrics**:
+```typescript
+// Add retry logic with exponential backoff
+const fetchMetrics = useCallback(async (retryCount = 0) => {
+  try {
+    const response = await fetch(API_URL, {
+      signal: AbortSignal.timeout(5000) // 5s timeout
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error: ${response.status}`);
+    }
+    const data = await response.json();
+    setMetrics(data);
+    setError(null);
+    setRetryCount(0); // Reset on success
+  } catch (err) {
+    const maxRetries = 3;
+    if (retryCount < maxRetries) {
+      const delay = Math.min(1000 * Math.pow(2, retryCount), 10000);
+      setTimeout(() => fetchMetrics(retryCount + 1), delay);
+    } else {
+      setError(err instanceof Error ? err.message : 'Failed to fetch metrics');
+    }
+  } finally {
+    setLoading(false);
+  }
+}, []);
+```
+
+### 4. Performance Optimizations (MEDIUM PRIORITY)
+
+**Issues Identified**:
+- Graph history arrays grow unbounded in memory during long sessions
+- No memoization of expensive calculations
+- Recharts re-renders entire chart on every data point
+- No virtualization for large process lists
+
+**File**: `/Users/johnbingham/Desktop/demo/btop/src/components/CpuGraph.tsx` (lines 46-53)
+
+**Recommendations**:
+- Implement proper cleanup in useEffect hooks
+- Add `React.memo` to pure components
+- Use `useMemo` for expensive calculations
+- Consider virtual scrolling for process table (react-window/react-virtual)
+- Debounce filter input to reduce re-renders
+
+**Example for CpuGraph**:
+```typescript
+// Add memo to prevent unnecessary re-renders
+export const CpuGraph = React.memo(({ cpuUsage }: CpuGraphProps) => {
+  // ... existing code ...
+
+  // Memoize average calculation
+  const avgUsage = useMemo(() =>
+    cpuUsage.length > 0
+      ? Math.round(cpuUsage.reduce((sum, cpu) => sum + cpu.usage, 0) / cpuUsage.length)
+      : 0,
+    [cpuUsage]
+  );
+
+  // ... rest of component ...
+});
+```
+
+### 5. Documentation (MEDIUM PRIORITY)
+
+**Current State**: Only a basic README.md with Vite template information
+
+**Recommendations**:
+- Create comprehensive API documentation
+- Add JSDoc comments to all functions/components
+- Create architecture diagram showing client-server interaction
+- Add CONTRIBUTING.md for contributor guidelines
+- Document environment setup and troubleshooting
+
+**Files to Create**:
+- `docs/API.md` - Document all API endpoints
+- `docs/ARCHITECTURE.md` - System design and data flow
+- `docs/DEVELOPMENT.md` - Setup, building, testing guide
+- `CONTRIBUTING.md` - How to contribute
+- Add JSDoc to all exports
+
+**Example JSDoc**:
+```typescript
+/**
+ * Custom hook for fetching and managing system metrics from the btop server
+ *
+ * @param refreshRate - Polling interval in milliseconds (500-5000ms recommended)
+ * @returns Object containing metrics data, error state, loading state, and manual refresh function
+ *
+ * @example
+ * ```tsx
+ * const { metrics, error, loading } = useSystemMetrics(1000);
+ * if (loading) return <Spinner />;
+ * if (error) return <Error message={error} />;
+ * return <Dashboard metrics={metrics} />;
+ * ```
+ */
+export function useSystemMetrics(refreshRate: number): UseSystemMetricsResult {
+  // ... implementation
+}
+```
+
+### 6. Code Organization and Architecture (LOW-MEDIUM PRIORITY)
+
+**Current Issues**:
+- Type definitions duplicated between frontend and backend
+- No shared validation logic
+- Hard-coded API URLs
+- No environment configuration system
+
+**Recommendations**:
+- Create shared types package or directory
+- Extract constants to configuration file
+- Add environment variable validation (zod/joi)
+- Consider mono-repo structure for better code sharing
+- Add path aliases for cleaner imports
+
+**Suggested Structure**:
+```
+btop/
+├── packages/
+│   ├── shared/          # Shared types, constants, utils
+│   │   ├── types.ts
+│   │   └── constants.ts
+│   ├── client/          # Frontend code
+│   └── server/          # Backend code
+├── docs/
+├── tests/
+└── package.json
+```
+
+**Configuration File** (`src/config.ts`):
+```typescript
+export const config = {
+  api: {
+    baseUrl: import.meta.env.VITE_API_URL || 'http://localhost:3001',
+    timeout: 5000,
+    retries: 3,
+  },
+  polling: {
+    defaultInterval: 1000,
+    minInterval: 500,
+    maxInterval: 10000,
+  },
+  graphs: {
+    historyLength: 60,
+    maxDataPoints: 120, // Prevent memory leaks
+  },
+} as const;
+```
+
+### 7. Accessibility (MEDIUM PRIORITY)
+
+**Current State**: No accessibility features implemented
+
+**Recommendations**:
+- Add ARIA labels to all interactive elements
+- Implement keyboard navigation for process table
+- Add focus indicators
+- Support high contrast mode
+- Test with screen readers
+- Add skip links for navigation
+
+**Example Improvements**:
+```tsx
+// ProcessTable.tsx
+<div
+  className="table-header"
+  role="rowgroup"
+>
+  <span
+    className="col-pid sortable"
+    onClick={() => handleSort('pid')}
+    onKeyPress={(e) => e.key === 'Enter' && handleSort('pid')}
+    tabIndex={0}
+    role="button"
+    aria-label="Sort by Process ID"
+    aria-pressed={sortField === 'pid'}
+  >
+    PID{getSortIndicator('pid')}
+  </span>
+  {/* ... */}
+</div>
+```
+
+### 8. Type Safety Improvements (LOW PRIORITY)
+
+**Issues**:
+- Some type assertions could be avoided
+- Missing validation for API responses
+- No runtime type checking
+
+**Recommendations**:
+- Add Zod for runtime validation of API responses
+- Remove non-null assertions where possible
+- Add discriminated unions for state management
+
+**Example with Zod**:
+```typescript
+import { z } from 'zod';
+
+const SystemMetricsSchema = z.object({
+  hostname: z.string(),
+  platform: z.string(),
+  cpuUsage: z.array(z.object({
+    core: z.number(),
+    usage: z.number().min(0).max(100),
+    // ... other fields
+  })),
+  // ... rest of schema
+});
+
+// In useSystemMetrics hook
+const data = await response.json();
+const validatedMetrics = SystemMetricsSchema.parse(data);
+setMetrics(validatedMetrics);
+```
+
+### 9. Developer Experience (LOW PRIORITY)
+
+**Recommendations**:
+- Add Prettier for consistent formatting
+- Add Husky for pre-commit hooks
+- Add commit message linting (commitlint)
+- Add VS Code workspace settings
+- Add debug configurations
+
+**Files to Add**:
+```json
+// .prettierrc
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2
+}
+
+// .vscode/settings.json
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}
+```
+
+### 10. Monitoring and Observability (LOW PRIORITY)
+
+**Current State**: No logging, metrics, or error tracking
+
+**Recommendations**:
+- Add structured logging (pino/winston)
+- Add error boundary in React
+- Consider adding Sentry or similar for error tracking
+- Add performance monitoring
+- Add health check endpoint with detailed status
+
+**Example Error Boundary**:
+```tsx
+// components/ErrorBoundary.tsx
+class ErrorBoundary extends React.Component {
+  state = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+    // Send to error tracking service
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorFallback error={this.state.error} />;
+    }
+    return this.props.children;
+  }
+}
+```
+
+---
+
+## Additional Specific Findings
+
+### Code Smells and Minor Issues
+
+1. **File**: `/Users/johnbingham/Desktop/demo/btop/src/components/StatusBar.tsx`
+   - **Line 9-18**: Shortcuts array defined but not functional - dead code
+   - **Recommendation**: Either implement functionality or remove display
+
+2. **File**: `/Users/johnbingham/Desktop/demo/btop/server/index.ts`
+   - **Line 48**: `prevCpuTimes` is mutable module-level state - could cause issues in concurrent scenarios
+   - **Recommendation**: Move to class-based design or use proper state management
+
+3. **File**: `/Users/johnbingham/Desktop/demo/btop/src/components/MemoryGraph.tsx`
+   - **Line 25-31**: `formatBytes` function duplicated across multiple files
+   - **Recommendation**: Extract to shared utility file
+
+4. **File**: `/Users/johnbingham/Desktop/demo/btop/src/App.tsx`
+   - **Line 42**: Returns `null` without any indication to user
+   - **Recommendation**: Add appropriate loading/error state
+
+5. **Type Safety**: Types duplicated in frontend (`src/types.ts`) and backend (`server/index.ts`)
+   - **Recommendation**: Create shared types package
+
+### Missing Features That Would Improve UX
+
+1. **Process Actions**: Kill/pause/resume processes (F9 functionality)
+2. **Search History**: Remember previous filter queries
+3. **Favorites**: Pin important processes to top
+4. **Alerts**: Notify when CPU/memory exceeds threshold
+5. **Export**: Download metrics as CSV/JSON
+6. **Dark/Light Theme**: Toggle theme (currently only dark)
+7. **Multi-server Support**: Monitor multiple machines
+8. **Historical Data**: Store and view past metrics
+9. **Network Stats**: Add network I/O monitoring
+10. **Disk Stats**: Add disk usage monitoring
+
+---
+
+## Priority Matrix
+
+### Must Have (Critical)
+1. Security fixes for environment variable exposure
+2. Basic test infrastructure (Vitest + RTL)
+3. Error handling improvements
+4. API documentation
+
+### Should Have (Important)
+5. Performance optimizations (memoization, cleanup)
+6. Code organization improvements
+7. Shared type definitions
+8. Accessibility basics
+
+### Nice to Have (Enhancement)
+9. Advanced testing (e2e, integration)
+10. Monitoring and logging
+11. Developer tooling (Prettier, Husky)
+12. Additional monitoring features
+
+---
+
+## Implementation Roadmap
+
+### Phase 1: Foundation (Week 1-2)
+- Set up testing infrastructure
+- Fix security vulnerabilities
+- Add basic error handling
+- Create API documentation
+
+### Phase 2: Quality (Week 3-4)
+- Write core tests (70% coverage target)
+- Performance optimizations
+- Code organization refactor
+- Add accessibility features
+
+### Phase 3: Enhancement (Week 5-6)
+- Advanced features (alerts, exports)
+- Monitoring and logging
+- Developer experience improvements
+- Additional metrics (network, disk)
+
+---
+
+## Conclusion
+
+The **btop** project demonstrates solid fundamentals with a clean React/TypeScript architecture and excellent visual design. However, it lacks critical production-readiness features like testing, security hardening, and proper error handling.
+
+The most urgent priorities are:
+1. Addressing security concerns with environment variable exposure
+2. Adding comprehensive test coverage
+3. Improving error resilience and user experience
+
+With these improvements, btop could evolve from a demo project into a production-ready system monitoring solution suitable for real-world deployment.
+
+**Overall Assessment**: 6.5/10
+- Code Quality: 7/10
+- Architecture: 7/10
+- Security: 4/10
+- Testing: 0/10
+- Documentation: 3/10
+- Performance: 6/10
+- Maintainability: 7/10
+
+The codebase is well-structured and modern, but needs significant work in testing, security, and documentation before being production-ready.
diff --git a/src/components/CpuGraph.tsx b/src/components/CpuGraph.tsx
index 87c2c14..a5a510a 100644
--- a/src/components/CpuGraph.tsx
+++ b/src/components/CpuGraph.tsx
@@ -93,7 +93,7 @@ export function CpuGraph({ cpuUsage }: CpuGraphProps) {
             {cpuUsage.map((cpu, i) => (
               <Area
                 key={cpu.core}
-                type="monotone"
+                type="linear"
                 dataKey={`cpu${cpu.core}`}
                 stroke={COLORS[i % COLORS.length]}
                 fill={`url(#cpuGradient${cpu.core})`}
diff --git a/src/components/MemoryGraph.tsx b/src/components/MemoryGraph.tsx
index 7ccbee7..995fe06 100644
--- a/src/components/MemoryGraph.tsx
+++ b/src/components/MemoryGraph.tsx
@@ -88,7 +88,7 @@ export function MemoryGraph({ used, total, percent }: MemoryGraphProps) {
               formatter={(value: number) => [`${value.toFixed(1)}%`, 'Usage']}
             />
             <Area
-              type="monotone"
+              type="linear"
               dataKey="percent"
               stroke={color}
               fill="url(#memGradient)"