fix: misc test fixes, mobile button sizing, TTS a11y, and markdown image sanitization

Author: chriswritescode-dev

backend/test/services/opencode-single-server.test.ts

@@ -254,6 +254,8 @@ describe('OpenCodeServerManager - reloadConfig', () => {
     const mockPatchResult = { success: true }
     vi.mocked(patchOpenCodeConfig).mockResolvedValue(mockPatchResult)
 
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response(null, { status: 200 }))
+
     const { opencodeServerManager } = await import('../../src/services/opencode-single-server')
 
     await opencodeServerManager.reloadConfig()
@@ -263,5 +265,7 @@ describe('OpenCodeServerManager - reloadConfig', () => {
       'utf-8'
     )
     expect(patchOpenCodeConfig).toHaveBeenCalled()
+
+    fetchSpy.mockRestore()
   })
 })

frontend/src/components/message/FloatingTTSButton.tsx

@@ -56,6 +56,8 @@ export function FloatingTTSButton({ messageId, content }: FloatingTTSButtonProps
       return
     }
 
+    setIsLongPressVisual(false)
+
     if (isAnyPlaybackActive) {
       stop()
       return
@@ -74,15 +76,11 @@ export function FloatingTTSButton({ messageId, content }: FloatingTTSButtonProps
 
   const showStop = isAnyPlaybackActive
   const pillTitle = showStop
-    ? 'Stop playback (hold to toggle auto-play)'
+    ? 'Stop playback'
     : hasContent
-      ? autoPlay
-        ? 'Play latest reply (auto-play enabled; hold to toggle auto-play)'
-        : 'Play latest reply (hold to toggle auto-play)'
-      : autoPlay
-        ? 'Auto-play enabled (hold to toggle auto-play)'
-        : 'Hold to toggle auto-play'
-  const pillAriaLabel = pillTitle
+      ? 'Play latest reply'
+      : 'TTS controls'
+  const pillAriaLabel = `${pillTitle}. ${autoPlay ? 'Auto-play enabled.' : 'Auto-play disabled.'} hold to toggle auto-play`
   const buttonToneClasses = showStop
     ? 'justify-center px-3 py-1.5 rounded-lg bg-gradient-to-br from-red-600 to-red-700 border border-red-500/60 shadow-red-500/30 ring-red-500/20 hover:ring-red-500/40 text-white'
     : autoPlay

frontend/src/components/repo/RepoCard.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RepoCard } from './RepoCard'
 
 const mockNavigate = vi.fn()
@@ -15,7 +16,7 @@ vi.mock('react-router-dom', async () => {
 const defaultProps = {
   repo: {
     id: 1,
-    repoUrl: 'https://github.com/test/repo',
+    repoUrl: 'https://github.com/test/test-repo',
     localPath: 'repos/test-repo',
     fullPath: '/Users/test/repos/test-repo',
     branch: 'main',
@@ -31,7 +32,14 @@ const defaultProps = {
 }
 
 const renderWithRouter = (ui: React.ReactElement) => {
-  return render(<BrowserRouter>{ui}</BrowserRouter>)
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>{ui}</BrowserRouter>
+    </QueryClientProvider>
+  )
 }
 
 describe('RepoCard', () => {
@@ -50,8 +58,10 @@ describe('RepoCard', () => {
     expect(mockNavigate).not.toHaveBeenCalled()
   })
 
-  it('should not show checkbox when manageMode is false', () => {
-    renderWithRouter(<RepoCard {...defaultProps} manageMode={false} />)
+  it('should not show checkbox when onSelect is not provided', () => {
+    const { onSelect, ...propsWithoutSelect } = defaultProps
+    void onSelect
+    renderWithRouter(<RepoCard {...propsWithoutSelect} />)
     expect(screen.queryByRole('checkbox')).not.toBeInTheDocument()
   })
 
@@ -88,9 +98,9 @@ describe('RepoCard', () => {
         hasChanges: true,
       },
     }
-    renderWithRouter(<RepoCard {...props} />)
+    const { container } = renderWithRouter(<RepoCard {...props} />)
 
-    const indicator = screen.getByTestId('dirty-indicator') || screen.container.querySelector('.bg-orange-500')
+    const indicator = container.querySelector('.bg-orange-500')
     expect(indicator).toBeTruthy()
   })
 
@@ -107,8 +117,8 @@ describe('RepoCard', () => {
     }
     renderWithRouter(<RepoCard {...props} />)
 
-    expect(screen.getByText('↑2')).toBeInTheDocument()
-    expect(screen.getByText('↓1')).toBeInTheDocument()
+    expect(screen.getByText(/↑2/)).toBeInTheDocument()
+    expect(screen.getByText(/↓1/)).toBeInTheDocument()
   })
 
   it('should display activity label when provided', () => {

frontend/src/components/repo/repo-list-state.test.ts

@@ -149,22 +149,22 @@ describe('repo-list-state', () => {
 
     it('should filter by display name', () => {
       const repos = [
-        createMockRepo({ id: 1, localPath: 'repos/test-repo' }),
-        createMockRepo({ id: 2, localPath: 'repos/other-repo' }),
+        createMockRepo({ id: 1, repoUrl: 'https://github.com/org/test-repo', localPath: 'repos/test-repo' }),
+        createMockRepo({ id: 2, repoUrl: 'https://github.com/org/other-repo', localPath: 'repos/other-repo' }),
       ]
       const viewModels = repos.map(r => ({ ...r, attentionState: getAttentionState(r), activityTimestamp: getActivityTimestamp(r) }))
-      const result = filterReposBySearch(viewModels, 'test')
+      const result = filterReposBySearch(viewModels, 'test-repo')
       expect(result).toHaveLength(1)
       expect(result[0].id).toBe(1)
     })
 
     it('should filter case-insensitively', () => {
       const repos = [
-        createMockRepo({ id: 1, localPath: 'repos/test-repo' }),
-        createMockRepo({ id: 2, localPath: 'repos/other-repo' }),
+        createMockRepo({ id: 1, repoUrl: 'https://github.com/org/test-repo', localPath: 'repos/test-repo' }),
+        createMockRepo({ id: 2, repoUrl: 'https://github.com/org/other-repo', localPath: 'repos/other-repo' }),
       ]
       const viewModels = repos.map(r => ({ ...r, attentionState: getAttentionState(r), activityTimestamp: getActivityTimestamp(r) }))
-      const result = filterReposBySearch(viewModels, 'TEST')
+      const result = filterReposBySearch(viewModels, 'TEST-REPO')
       expect(result).toHaveLength(1)
     })
   })
@@ -253,9 +253,9 @@ describe('repo-list-state', () => {
 
     it('should sort alphabetically by name', () => {
       const repos = [
-        createViewModel(1, { localPath: 'repos/zebra' }),
-        createViewModel(2, { localPath: 'repos/alpha' }),
-        createViewModel(3, { localPath: 'repos/middle' }),
+        createViewModel(1, { repoUrl: 'https://github.com/org/zebra', localPath: 'repos/zebra' }),
+        createViewModel(2, { repoUrl: 'https://github.com/org/alpha', localPath: 'repos/alpha' }),
+        createViewModel(3, { repoUrl: 'https://github.com/org/middle', localPath: 'repos/middle' }),
       ]
       const result = sortRepos(repos, 'name')
       expect(result[0].id).toBe(2)
@@ -315,15 +315,17 @@ describe('repo-list-state', () => {
 
     it('should return attention section for attention filter', () => {
       const now = Date.now()
-      const repos = [
-        createViewModel(1, {
+      const repos: RepoViewModel[] = [
+        {
+          ...createMockRepo({ id: 1 }),
           activityTimestamp: now,
           attentionState: { hasChanges: true, ahead: 0, behind: 0, isCloneStatusReady: true }
-        }),
-        createViewModel(2, {
+        },
+        {
+          ...createMockRepo({ id: 2 }),
           activityTimestamp: now,
           attentionState: { hasChanges: false, ahead: 0, behind: 0, isCloneStatusReady: true }
-        }),
+        },
       ]
       const result = groupReposIntoSections(repos, 'attention', 'recent')
       expect(result).toHaveLength(1)

frontend/src/components/settings/OpenCodeModelsEditor.test.tsx

@@ -24,6 +24,17 @@ const mockProviders: Record<string, ConfigProvider> = {
   },
 }
 
+const findTrashButton = (): HTMLButtonElement | null => {
+  const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>('button'))
+  for (const btn of buttons) {
+    const svg = btn.querySelector('svg')
+    if (svg && svg.getAttribute('class')?.includes('trash')) {
+      return btn
+    }
+  }
+  return null
+}
+
 describe('OpenCodeModelsEditor', () => {
   describe('rendering', () => {
     it('should render empty state when no providers configured', () => {
@@ -68,15 +79,7 @@ describe('OpenCodeModelsEditor', () => {
       const onChange = vi.fn()
       render(<OpenCodeModelsEditor providers={mockProviders} onChange={onChange} />)
 
-      const deleteButtons = document.querySelectorAll('button')
-      let deleteButton: HTMLButtonElement | null = null
-      deleteButtons.forEach(btn => {
-        const svg = btn.querySelector('svg')
-        if (svg && svg.className.baseVal.includes('Trash2')) {
-          deleteButton = btn as HTMLButtonElement
-        }
-      })
-
+      const deleteButton = findTrashButton()
       expect(deleteButton).not.toBeNull()
       if (deleteButton) {
         fireEvent.click(deleteButton)
@@ -107,15 +110,7 @@ describe('OpenCodeModelsEditor', () => {
 
       render(<OpenCodeModelsEditor providers={providersWithExtras} onChange={onChange} />)
 
-      const deleteButtons = document.querySelectorAll('button')
-      let deleteButton: HTMLButtonElement | null = null
-      deleteButtons.forEach(btn => {
-        const svg = btn.querySelector('svg')
-        if (svg && svg.className.baseVal.includes('Trash2')) {
-          deleteButton = btn as HTMLButtonElement
-        }
-      })
-
+      const deleteButton = findTrashButton()
       if (deleteButton) {
         fireEvent.click(deleteButton)
       }
@@ -155,15 +150,13 @@ describe('OpenCodeModelDialog', () => {
       })
     })
 
-    it('should require display name when submitting empty form', async () => {
+    it('should disable create button when required fields are empty', async () => {
       const { OpenCodeModelDialog } = await import('./OpenCodeModelDialog')
       render(<OpenCodeModelDialog {...defaultProps} />)
 
-      const createButton = screen.getByRole('button', { name: /create/i })
-      fireEvent.click(createButton)
-
       await waitFor(() => {
-        expect(screen.getByText(/display name is required/i)).toBeInTheDocument()
+        const createButton = screen.getByRole('button', { name: /create/i })
+        expect(createButton).toBeDisabled()
       })
     })
 
@@ -172,15 +165,12 @@ describe('OpenCodeModelDialog', () => {
       render(<OpenCodeModelDialog {...defaultProps} />)
 
       const modelIdInput = document.querySelector('input[name="modelId"]') as HTMLInputElement
-      if (modelIdInput) {
-        fireEvent.change(modelIdInput, { target: { value: 'invalid model id!' } })
-        const createButton = screen.getByRole('button', { name: /create/i })
-        fireEvent.click(createButton)
+      expect(modelIdInput).not.toBeNull()
+      fireEvent.change(modelIdInput, { target: { value: 'invalid model id!' } })
 
-        await waitFor(() => {
-          expect(screen.getByText(/alphanumeric/i)).toBeInTheDocument()
-        })
-      }
+      await waitFor(() => {
+        expect(screen.getByText(/must use only letters, numbers/i)).toBeInTheDocument()
+      })
     })
   })
 
@@ -191,15 +181,18 @@ describe('OpenCodeModelDialog', () => {
       render(<OpenCodeModelDialog {...defaultProps} onSubmit={onSubmit} />)
 
       const modelIdInput = document.querySelector('input[name="modelId"]') as HTMLInputElement
-      const nameInput = document.querySelector('input[name="name"]') as HTMLInputElement
+      const displayNameInput = document.querySelector('input[name="displayName"]') as HTMLInputElement
 
-      if (modelIdInput && nameInput) {
-        fireEvent.change(modelIdInput, { target: { value: 'gpt-5' } })
-        fireEvent.change(nameInput, { target: { value: 'GPT-5' } })
-      }
+      expect(modelIdInput).not.toBeNull()
+      expect(displayNameInput).not.toBeNull()
+      fireEvent.change(modelIdInput, { target: { value: 'gpt-5' } })
+      fireEvent.change(displayNameInput, { target: { value: 'GPT-5' } })
 
-      const createButton = screen.getByRole('button', { name: /create/i })
-      fireEvent.click(createButton)
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /create/i })).not.toBeDisabled()
+      })
+
+      fireEvent.click(screen.getByRole('button', { name: /create/i }))
 
       await waitFor(() => {
         expect(onSubmit).toHaveBeenCalledWith(
@@ -218,19 +211,25 @@ describe('OpenCodeModelDialog', () => {
       render(<OpenCodeModelDialog {...defaultProps} onSubmit={onSubmit} />)
 
       const modelIdInput = document.querySelector('input[name="modelId"]') as HTMLInputElement
-      const nameInput = document.querySelector('input[name="name"]') as HTMLInputElement
+      const displayNameInput = document.querySelector('input[name="displayName"]') as HTMLInputElement
       const contextLimitInput = document.querySelector('input[name="contextLimit"]') as HTMLInputElement
       const outputLimitInput = document.querySelector('input[name="outputLimit"]') as HTMLInputElement
 
-      if (modelIdInput && nameInput && contextLimitInput && outputLimitInput) {
-        fireEvent.change(modelIdInput, { target: { value: 'gpt-5' } })
-        fireEvent.change(nameInput, { target: { value: 'GPT-5' } })
-        fireEvent.change(contextLimitInput, { target: { value: '256000' } })
-        fireEvent.change(outputLimitInput, { target: { value: '8192' } })
-      }
+      expect(modelIdInput).not.toBeNull()
+      expect(displayNameInput).not.toBeNull()
+      expect(contextLimitInput).not.toBeNull()
+      expect(outputLimitInput).not.toBeNull()
 
-      const createButton = screen.getByRole('button', { name: /create/i })
-      fireEvent.click(createButton)
+      fireEvent.change(modelIdInput, { target: { value: 'gpt-5' } })
+      fireEvent.change(displayNameInput, { target: { value: 'GPT-5' } })
+      fireEvent.change(contextLimitInput, { target: { value: '256000' } })
+      fireEvent.change(outputLimitInput, { target: { value: '8192' } })
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /create/i })).not.toBeDisabled()
+      })
+
+      fireEvent.click(screen.getByRole('button', { name: /create/i }))
 
       await waitFor(() => {
         expect(onSubmit).toHaveBeenCalledWith(
@@ -300,6 +299,7 @@ describe('OpenCodeModelDialog', () => {
         providerId: 'openai',
         modelId: 'gpt-4o',
         model: {
+          id: 'gpt-4o',
           name: 'GPT-4o',
           limit: { context: 128000, output: 4096 },
           reasoning: true,
@@ -321,6 +321,10 @@ describe('OpenCodeModelDialog', () => {
         target: { value: 'my-friendly-model' },
       })
 
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /update/i })).not.toBeDisabled()
+      })
+
       fireEvent.click(screen.getByRole('button', { name: /update/i }))
 
       await waitFor(() => {

frontend/src/components/ui/page-header.test.tsx

@@ -52,12 +52,11 @@ describe("PageHeader", () => {
     expect(header).toHaveClass("z-10");
   });
 
-  it("applies background and border styling", () => {
+  it("applies background styling", () => {
     render(<PageHeader data-testid="header">Content</PageHeader>);
     const header = screen.getByTestId("header");
-    expect(header).toHaveClass("border-b");
-    expect(header).toHaveClass("border-border");
     expect(header).toHaveClass("bg-gradient-to-b");
+    expect(header).toHaveClass("from-background");
   });
 
   it("applies backdrop-blur-sm for frosted glass effect", () => {