Increase web coverage to 85%

web/src/components/layout/dashboard-title-sync.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { APP_TITLE, getDashboardDocumentTitle } from '@/lib/page-titles';
 
 /**
@@ -14,18 +14,26 @@ import { APP_TITLE, getDashboardDocumentTitle } from '@/lib/page-titles';
  */
 export function DashboardTitleSync() {
   const pathname = usePathname();
+  const lastSyncedTitleRef = useRef<string | null>(null);
 
   useEffect(() => {
     const computed = getDashboardDocumentTitle(pathname);
     const current = document.title;
+    const lastSyncedTitle = lastSyncedTitleRef.current;
 
     // If the current title already ends with our app suffix and is more specific
     // than what we'd set (i.e. different prefix), respect the page-level metadata.
-    if (current.endsWith(APP_TITLE) && current !== computed && current !== APP_TITLE) {
+    if (
+      current.endsWith(APP_TITLE) &&
+      current !== computed &&
+      current !== APP_TITLE &&
+      current !== lastSyncedTitle
+    ) {
       return;
     }
 
     document.title = computed;
+    lastSyncedTitleRef.current = computed;
   }, [pathname]);
 
   return null;

web/tests/api/log-stream-ws-ticket.test.ts

@@ -60,6 +60,8 @@ describe('GET /api/log-stream/ws-ticket', () => {
 
     const body = (await response.json()) as { wsUrl: string; ticket: string };
     expect(body.wsUrl).toBe('wss://bot.internal:3001/ws/logs');
-    expect(body.ticket.split('.')).toHaveLength(3);
+    const ticketParts = body.ticket.split('.');
+    expect(ticketParts).toHaveLength(4);
+    expect(ticketParts[2]).toBe('guild-1');
   });
 });

web/tests/components/landing/feature-grid.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { mockUseInView, mockUseReducedMotion } = vi.hoisted(() => ({
+  mockUseInView: vi.fn(),
+  mockUseReducedMotion: vi.fn(),
+}));
+
+vi.mock('framer-motion', async () => {
+  const React = await import('react');
+  const createComponent = (tag: string) =>
+    React.forwardRef(({ animate: _animate, initial: _initial, transition: _transition, whileHover: _whileHover, ...props }: any, ref: any) =>
+      React.createElement(tag, { ...props, ref }, props.children)
+    );
+
+  return {
+    motion: {
+      div: createComponent('div'),
+      h2: createComponent('h2'),
+      p: createComponent('p'),
+    },
+    useInView: (...args: unknown[]) => mockUseInView(...args),
+    useReducedMotion: () => mockUseReducedMotion(),
+  };
+});
+
+import { FeatureGrid } from '@/components/landing/FeatureGrid';
+
+describe('FeatureGrid', () => {
+  beforeEach(() => {
+    mockUseInView.mockReturnValue(true);
+    mockUseReducedMotion.mockReturnValue(false);
+  });
+
+  it('renders every feature card with its terminal command', () => {
+    render(<FeatureGrid />);
+
+    expect(screen.getByText('AI Chat')).toBeInTheDocument();
+    expect(screen.getByText('Moderation')).toBeInTheDocument();
+    expect(screen.getByText('Starboard')).toBeInTheDocument();
+    expect(screen.getByText('Analytics')).toBeInTheDocument();
+    expect(screen.getByText('$ ai --model claude')).toBeInTheDocument();
+    expect(screen.getByText('$ analytics --export')).toBeInTheDocument();
+  });
+
+  it('still renders correctly when reduced motion is enabled', () => {
+    mockUseReducedMotion.mockReturnValue(true);
+
+    render(<FeatureGrid />);
+
+    expect(screen.getByText(/Everything you need, nothing you don't/i)).toBeInTheDocument();
+    expect(screen.getAllByText(/^\$/)).not.toHaveLength(0);
+  });
+});

web/tests/components/landing/hero.test.tsx

@@ -0,0 +1,64 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { mockUseInView } = vi.hoisted(() => ({
+  mockUseInView: vi.fn(),
+}));
+
+vi.mock('framer-motion', async () => {
+  const React = await import('react');
+  const createComponent = (tag: string) =>
+    React.forwardRef(({ animate: _animate, initial: _initial, transition: _transition, whileHover: _whileHover, ...props }: any, ref: any) =>
+      React.createElement(tag, { ...props, ref }, props.children)
+    );
+
+  return {
+    motion: {
+      div: createComponent('div'),
+      h1: createComponent('h1'),
+      p: createComponent('p'),
+      span: createComponent('span'),
+    },
+    useInView: (...args: unknown[]) => mockUseInView(...args),
+  };
+});
+
+import { Hero } from '@/components/landing/Hero';
+
+describe('Hero', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockUseInView.mockReturnValue(true);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it('shows the blinking cursor before the typewriter finishes', () => {
+    render(<Hero />);
+
+    expect(screen.getByText('>')).toBeInTheDocument();
+    expect(document.querySelector('.terminal-cursor')).not.toBeNull();
+  });
+
+  it('reveals the typed headline and CTAs after the timer completes', async () => {
+    render(<Hero />);
+
+    act(() => {
+      vi.advanceTimersByTime(1_500);
+    });
+
+    expect(screen.getByText(/The AI-powered Discord bot for modern communities/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /Open Dashboard/i })).toHaveAttribute(
+      'href',
+      '/login',
+    );
+    expect(screen.getByRole('link', { name: /View on GitHub/i })).toHaveAttribute(
+      'href',
+      'https://github.com/VolvoxLLC/volvox-bot',
+    );
+    expect(document.querySelector('.terminal-cursor')).toBeNull();
+  });
+});

web/tests/components/landing/pricing.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { mockUseInView, mockGetBotInviteUrl } = vi.hoisted(() => ({
+  mockUseInView: vi.fn(),
+  mockGetBotInviteUrl: vi.fn(),
+}));
+
+vi.mock('framer-motion', async () => {
+  const React = await import('react');
+  const createComponent = (tag: string) =>
+    React.forwardRef(({ animate: _animate, initial: _initial, transition: _transition, whileHover: _whileHover, ...props }: any, ref: any) =>
+      React.createElement(tag, { ...props, ref }, props.children)
+    );
+
+  return {
+    motion: {
+      div: createComponent('div'),
+      p: createComponent('p'),
+    },
+    useInView: (...args: unknown[]) => mockUseInView(...args),
+  };
+});
+
+vi.mock('@/lib/discord', () => ({
+  getBotInviteUrl: () => mockGetBotInviteUrl(),
+}));
+
+import { Pricing } from '@/components/landing/Pricing';
+
+describe('Pricing', () => {
+  beforeEach(() => {
+    mockUseInView.mockReturnValue(true);
+    mockGetBotInviteUrl.mockReturnValue('https://discord.com/invite/bot');
+  });
+
+  it('renders monthly pricing by default and switches to annual billing', async () => {
+    const user = userEvent.setup();
+
+    render(<Pricing />);
+
+    expect(screen.getByRole('switch', { name: /toggle annual billing/i })).toHaveAttribute(
+      'aria-checked',
+      'false',
+    );
+    expect(screen.getByText('$14.99')).toBeInTheDocument();
+    expect(screen.getAllByText('/mo')).toHaveLength(3);
+
+    await user.click(screen.getByRole('switch', { name: /toggle annual billing/i }));
+
+    expect(screen.getByRole('switch', { name: /toggle annual billing/i })).toHaveAttribute(
+      'aria-checked',
+      'true',
+    );
+    expect(screen.getByText('$115')).toBeInTheDocument();
+    expect(screen.getAllByText('/year')).toHaveLength(3);
+    expect(screen.getByText('Save $64.88/year')).toBeInTheDocument();
+    expect(screen.getByText('Save $129.88/year')).toBeInTheDocument();
+  });
+
+  it('uses github for the free tier and disables paid ctas when no invite url exists', () => {
+    mockGetBotInviteUrl.mockReturnValue(null);
+
+    render(<Pricing />);
+
+    expect(screen.getByRole('link', { name: 'git clone' })).toHaveAttribute(
+      'href',
+      'https://github.com/VolvoxLLC/volvox-bot',
+    );
+
+    const installButtons = [screen.getByText('npm install'), screen.getByText('curl | bash')];
+    for (const buttonLabel of installButtons) {
+      const button = buttonLabel.closest('button');
+      expect(button).not.toBeNull();
+      expect(button).toBeDisabled();
+    }
+  });
+});

web/tests/components/landing/stats.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { mockUseInView } = vi.hoisted(() => ({
+  mockUseInView: vi.fn(),
+}));
+
+vi.mock('framer-motion', async () => {
+  const React = await import('react');
+  const createComponent = (tag: string) =>
+    React.forwardRef(({ animate: _animate, initial: _initial, transition: _transition, whileHover: _whileHover, ...props }: any, ref: any) =>
+      React.createElement(tag, { ...props, ref }, props.children)
+    );
+
+  return {
+    motion: {
+      div: createComponent('div'),
+      h2: createComponent('h2'),
+      p: createComponent('p'),
+      span: createComponent('span'),
+    },
+    useInView: (...args: unknown[]) => mockUseInView(...args),
+  };
+});
+
+import { Stats } from '@/components/landing/Stats';
+
+describe('Stats', () => {
+  const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
+  const originalCancelAnimationFrame = globalThis.cancelAnimationFrame;
+  let timestamp = 0;
+
+  beforeEach(() => {
+    mockUseInView.mockReturnValue(true);
+    timestamp = 0;
+    globalThis.requestAnimationFrame = vi.fn((callback: FrameRequestCallback) => {
+      return window.setTimeout(() => {
+        timestamp += 2_000;
+        callback(timestamp);
+      }, 0);
+    });
+    globalThis.cancelAnimationFrame = vi.fn((handle: number) => clearTimeout(handle));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    globalThis.requestAnimationFrame = originalRequestAnimationFrame;
+    globalThis.cancelAnimationFrame = originalCancelAnimationFrame;
+  });
+
+  it('renders formatted live stats after a successful fetch', async () => {
+    vi.spyOn(global, 'fetch').mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        servers: 1_234,
+        members: 1_200_000,
+        commandsServed: 999,
+        activeConversations: 12,
+        uptime: 97_200,
+        messagesProcessed: 5_500,
+        cachedAt: '2026-03-11T12:34:56.000Z',
+      }),
+    } as Response);
+
+    render(<Stats />);
+
+    await waitFor(() => {
+      expect(screen.getByText('1.2K')).toBeInTheDocument();
+      expect(screen.getByText('1.2M')).toBeInTheDocument();
+      expect(screen.getByText('999')).toBeInTheDocument();
+      expect(screen.getByText('12')).toBeInTheDocument();
+      expect(screen.getByText('1d 3h')).toBeInTheDocument();
+      expect(screen.getByText('5.5K')).toBeInTheDocument();
+    });
+    expect(screen.getByText(/as of/i)).toBeInTheDocument();
+    expect(screen.getByText('Loved by developers')).toBeInTheDocument();
+    expect(fetch).toHaveBeenCalledWith('/api/stats');
+  });
+
+  it('renders the error fallback when fetching stats fails', async () => {
+    vi.spyOn(global, 'fetch').mockRejectedValue(new Error('boom'));
+
+    render(<Stats />);
+
+    await waitFor(() => {
+      expect(screen.getAllByText('—')).toHaveLength(6);
+    });
+    expect(screen.getByText('Trusted by teams at leading tech companies and thousands of open-source communities')).toBeInTheDocument();
+  });
+});