Fix: dependencies

honeycomb/package.json

@@ -31,9 +31,9 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "react-day-picker": "^9.13.0",
     "lucide-react": "^0.562.0",
     "react": "^18.2.0",
+    "react-day-picker": "^9.13.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.71.0",
     "react-markdown": "^10.1.0",
@@ -50,15 +50,20 @@
     "zustand": "^5.0.10"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.6.1",
     "autoprefixer": "^10.4.23",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^24.0.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.3.0",

honeycomb/src/components/agent-control/shared/LiveIndicator.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { LiveIndicator } from './LiveIndicator'
+
+describe('LiveIndicator', () => {
+  it('renders "Live" text when isLive is true (default)', () => {
+    render(<LiveIndicator />)
+
+    expect(screen.getByText('Live')).toBeInTheDocument()
+  })
+
+  it('renders the pulsing indicator dot', () => {
+    const { container } = render(<LiveIndicator />)
+
+    const dot = container.querySelector('.bg-green-500')
+    expect(dot).toBeInTheDocument()
+  })
+
+  it('returns null when isLive is false', () => {
+    const { container } = render(<LiveIndicator isLive={false} />)
+
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<LiveIndicator className="custom-class" />)
+
+    const wrapper = container.firstChild as HTMLElement
+    expect(wrapper).toHaveClass('custom-class')
+  })
+})

honeycomb/src/test/setup.ts

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom'
+
+// Mock window.matchMedia for components that use media queries
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+})
+
+// Mock ResizeObserver for components that use it
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}

honeycomb/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vitest/globals"],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
@@ -23,5 +24,5 @@
     "isolatedModules": true,
     "resolveJsonModule": true
   },
-  "include": ["src"]
+  "include": ["src", "vitest.config.ts"]
 }

honeycomb/vitest.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        'src/**/*.{test,spec}.{ts,tsx}',
+        'src/test/**/*',
+        'src/main.tsx',
+        'src/vite-env.d.ts',
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})