bingocode 1.0.2 → 1.0.3

package/desktop/src/__tests__/agentsSettings.test.tsx

@@ -0,0 +1,349 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Settings } from '../pages/Settings'
+import { useAgentStore } from '../stores/agentStore'
+import { useSkillStore } from '../stores/skillStore'
+import { useSettingsStore } from '../stores/settingsStore'
+import { useSessionStore } from '../stores/sessionStore'
+import { SETTINGS_TAB_ID, useTabStore } from '../stores/tabStore'
+
+vi.mock('../api/agents', () => ({
+  agentsApi: {
+    list: vi.fn().mockResolvedValue({ activeAgents: [], allAgents: [] }),
+  },
+}))
+
+const noopFetch = vi.fn()
+
+vi.mock('../stores/providerStore', () => ({
+  useProviderStore: () => ({
+    providers: [],
+    activeId: null,
+    isLoading: false,
+    fetchProviders: vi.fn(),
+    deleteProvider: vi.fn(),
+    activateProvider: vi.fn(),
+    activateOfficial: vi.fn(),
+    testProvider: vi.fn(),
+    createProvider: vi.fn(),
+    updateProvider: vi.fn(),
+    testConfig: vi.fn(),
+  }),
+}))
+
+vi.mock('../pages/AdapterSettings', () => ({
+  AdapterSettings: () => <div>Adapter Settings Mock</div>,
+}))
+
+vi.mock('../components/chat/CodeViewer', () => ({
+  CodeViewer: ({ code }: { code: string }) => <pre data-testid="code-viewer">{code}</pre>,
+}))
+
+const MOCK_AGENTS = [
+  {
+    agentType: 'code-reviewer',
+    description: 'Reviews code for quality and security',
+    model: 'claude-sonnet-4-6',
+    modelDisplay: 'claude-sonnet-4-6',
+    tools: ['Read', 'Grep', 'Glob'],
+    systemPrompt: '# Code Reviewer\n\nYou are an expert code reviewer.',
+    color: 'blue',
+    source: 'userSettings' as const,
+    baseDir: '~/.claude/agents',
+    isActive: true,
+  },
+  {
+    agentType: 'doc-writer',
+    description: 'Writes technical documentation',
+    model: 'claude-haiku-4-5',
+    modelDisplay: 'claude-haiku-4-5',
+    tools: ['Read'],
+    systemPrompt: 'You write clear and concise docs.',
+    color: 'green',
+    source: 'built-in' as const,
+    baseDir: 'built-in',
+    isActive: true,
+  },
+  {
+    agentType: 'plain-agent',
+    description: undefined,
+    model: undefined,
+    modelDisplay: 'inherit',
+    tools: undefined,
+    systemPrompt: undefined,
+    color: undefined,
+    source: 'projectSettings' as const,
+    baseDir: '/workspace/project/.claude/agents',
+    isActive: false,
+    overriddenBy: 'userSettings' as const,
+  },
+]
+
+const MOCK_SKILL_DETAIL = {
+  meta: {
+    name: 'skill-docs',
+    displayName: 'Skill Docs',
+    description: 'A rich skill readme',
+    source: 'user' as const,
+    userInvocable: true,
+    contentLength: 200,
+    hasDirectory: true,
+  },
+  tree: [
+    { name: 'SKILL.md', path: 'SKILL.md', type: 'file' as const },
+    { name: 'helper.ts', path: 'helper.ts', type: 'file' as const },
+  ],
+  files: [
+    {
+      path: 'SKILL.md',
+      language: 'markdown',
+      content: '# Heading\n\nParagraph with `inline code`.\n\n## Section\n\n- First item\n- Second item\n\n> Helpful quote',
+      body: '# Heading\n\nParagraph with `inline code`.\n\n## Section\n\n- First item\n- Second item\n\n> Helpful quote',
+      isEntry: true,
+      frontmatter: {
+        description: 'A rich skill readme',
+        model: 'sonnet',
+      },
+    },
+    {
+      path: 'helper.ts',
+      language: 'typescript',
+      content: 'export const helper = true',
+      isEntry: false,
+    },
+  ],
+  skillRoot: '/tmp/skill-docs',
+}
+
+function switchToAgentsTab() {
+  fireEvent.click(screen.getByText('Agents'))
+}
+
+function switchToSkillsTab() {
+  fireEvent.click(screen.getByText('Skills'))
+}
+
+describe('Settings > Agents tab', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({ locale: 'en' })
+    useTabStore.setState({
+      activeTabId: 'session-1',
+      tabs: [{ sessionId: 'session-1', title: 'Test', type: 'session', status: 'idle' }],
+    })
+    useSessionStore.setState({
+      sessions: [
+        {
+          id: 'session-1',
+          title: 'Test Session',
+          createdAt: '',
+          modifiedAt: '',
+          messageCount: 0,
+          projectPath: '/workspace/project',
+          workDir: '/workspace/project',
+          workDirExists: true,
+        },
+      ],
+      activeSessionId: 'session-1',
+      isLoading: false,
+      error: null,
+      selectedProjects: [],
+      availableProjects: [],
+      fetchSessions: noopFetch,
+      createSession: vi.fn(),
+      deleteSession: vi.fn(),
+      renameSession: vi.fn(),
+      updateSessionTitle: vi.fn(),
+      setActiveSession: vi.fn(),
+      setSelectedProjects: vi.fn(),
+    })
+    useAgentStore.setState({
+      activeAgents: [],
+      allAgents: [],
+      isLoading: false,
+      error: null,
+      selectedAgent: null,
+      fetchAgents: noopFetch,
+      selectAgent: (agent) => useAgentStore.setState({ selectedAgent: agent }),
+    })
+    useSkillStore.setState({
+      skills: [],
+      selectedSkill: null,
+      isLoading: false,
+      isDetailLoading: false,
+      error: null,
+      fetchSkills: noopFetch,
+      fetchSkillDetail: noopFetch,
+      clearSelection: () => useSkillStore.setState({ selectedSkill: null }),
+    })
+  })
+
+  it('renders the Agents tab button in sidebar', () => {
+    render(<Settings />)
+    expect(screen.getByText('Agents')).toBeInTheDocument()
+  })
+
+  it('shows loading spinner when fetching agents', () => {
+    useAgentStore.setState({ isLoading: true, allAgents: [], activeAgents: [], fetchAgents: noopFetch })
+    render(<Settings />)
+    switchToAgentsTab()
+
+    const spinner = document.querySelector('.animate-spin')
+    expect(spinner).toBeInTheDocument()
+  })
+
+  it('uses the active session workDir even when settings tab is focused', async () => {
+    const fetchAgents = vi.fn()
+    useAgentStore.setState({
+      allAgents: [],
+      activeAgents: [],
+      isLoading: false,
+      fetchAgents,
+    })
+    useTabStore.setState({
+      activeTabId: SETTINGS_TAB_ID,
+      tabs: [{ sessionId: SETTINGS_TAB_ID, title: 'Settings', type: 'settings', status: 'idle' }],
+    })
+
+    render(<Settings />)
+    switchToAgentsTab()
+
+    expect(fetchAgents).toHaveBeenCalledWith('/workspace/project')
+  })
+
+  it('shows error state with retry button when API fails', () => {
+    useAgentStore.setState({ allAgents: [], activeAgents: [], isLoading: false, error: 'Network error', fetchAgents: noopFetch })
+    render(<Settings />)
+    switchToAgentsTab()
+
+    expect(screen.getByText('Network error')).toBeInTheDocument()
+    expect(screen.getByText('Retry')).toBeInTheDocument()
+  })
+
+  it('renders grouped agent browser with source sections', () => {
+    useAgentStore.setState({
+      allAgents: MOCK_AGENTS,
+      activeAgents: MOCK_AGENTS.filter((agent) => agent.isActive),
+      isLoading: false,
+      fetchAgents: noopFetch,
+    })
+    render(<Settings />)
+    switchToAgentsTab()
+
+    expect(screen.getByText('Browse installed agents')).toBeInTheDocument()
+    expect(screen.getByText('Agent Browser')).toBeInTheDocument()
+    expect(screen.getAllByText('User').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Built-in').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Project').length).toBeGreaterThan(0)
+    expect(screen.getByText('code-reviewer')).toBeInTheDocument()
+    expect(screen.getByText('Writes technical documentation')).toBeInTheDocument()
+    expect(screen.getByText('Overridden by User')).toBeInTheDocument()
+  })
+
+  it('opens agent detail with metadata cards and document prompt', () => {
+    useAgentStore.setState({
+      allAgents: MOCK_AGENTS,
+      activeAgents: MOCK_AGENTS.filter((agent) => agent.isActive),
+      isLoading: false,
+      fetchAgents: noopFetch,
+    })
+    render(<Settings />)
+    switchToAgentsTab()
+
+    fireEvent.click(screen.getByText('code-reviewer'))
+
+    expect(screen.getByText('Back to list')).toBeInTheDocument()
+    expect(screen.getByText('Agent Profile')).toBeInTheDocument()
+    expect(screen.getAllByText('claude-sonnet-4-6')[0]).toBeInTheDocument()
+    expect(screen.getByText('Read')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Code Reviewer' })).toBeInTheDocument()
+
+    const rendererRoot = screen.getByRole('heading', { name: 'Code Reviewer' }).closest('div[class*="prose"]')
+    expect(rendererRoot?.className).toContain('max-w-[72ch]')
+  })
+
+  it('shows no system prompt state when agent has no prompt', () => {
+    useAgentStore.setState({
+      allAgents: MOCK_AGENTS,
+      activeAgents: MOCK_AGENTS.filter((agent) => agent.isActive),
+      isLoading: false,
+      fetchAgents: noopFetch,
+    })
+    render(<Settings />)
+    switchToAgentsTab()
+
+    fireEvent.click(screen.getByText('plain-agent'))
+
+    expect(screen.getByText('No system prompt defined.')).toBeInTheDocument()
+    expect(screen.getByText('shadowed by User')).toBeInTheDocument()
+  })
+
+  it('navigates back to list from detail view', () => {
+    useAgentStore.setState({
+      allAgents: MOCK_AGENTS,
+      activeAgents: MOCK_AGENTS.filter((agent) => agent.isActive),
+      isLoading: false,
+      fetchAgents: noopFetch,
+    })
+    render(<Settings />)
+    switchToAgentsTab()
+
+    fireEvent.click(screen.getByText('code-reviewer'))
+    fireEvent.click(screen.getByText('Back to list'))
+
+    expect(screen.getByText('code-reviewer')).toBeInTheDocument()
+    expect(screen.getByText('doc-writer')).toBeInTheDocument()
+    expect(screen.getByText('plain-agent')).toBeInTheDocument()
+  })
+})
+
+describe('Settings > Skills tab', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({ locale: 'en' })
+    useSkillStore.setState({
+      skills: [],
+      selectedSkill: null,
+      isLoading: false,
+      isDetailLoading: false,
+      error: null,
+      fetchSkills: noopFetch,
+      fetchSkillDetail: noopFetch,
+      clearSelection: () => useSkillStore.setState({ selectedSkill: null }),
+    })
+  })
+
+  it('renders markdown skills with document styling in detail view', () => {
+    useSkillStore.setState({
+      selectedSkill: MOCK_SKILL_DETAIL,
+      clearSelection: () => useSkillStore.setState({ selectedSkill: null }),
+    })
+
+    render(<Settings />)
+    switchToSkillsTab()
+
+    expect(screen.getByText('Skill metadata')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: 'Heading' })).toBeInTheDocument()
+
+    const rendererRoot = screen.getByRole('heading', { name: 'Heading' }).closest('div[class*="prose"]')
+    expect(rendererRoot?.className).toContain('max-w-[72ch]')
+    expect(rendererRoot?.className).toContain('prose-h2:border-b')
+    expect(rendererRoot?.className).toContain('prose-p:text-[15px]')
+    expect(screen.getByText('Helpful quote')).toBeInTheDocument()
+  })
+
+  it('keeps code files rendered in CodeViewer instead of markdown prose', () => {
+    useSkillStore.setState({
+      selectedSkill: MOCK_SKILL_DETAIL,
+      clearSelection: () => useSkillStore.setState({ selectedSkill: null }),
+    })
+
+    render(<Settings />)
+    switchToSkillsTab()
+
+    fireEvent.click(screen.getAllByText('helper.ts')[0]!)
+
+    expect(screen.getByTestId('code-viewer')).toHaveTextContent('export const helper = true')
+    expect(screen.queryByRole('heading', { name: 'Heading' })).not.toBeInTheDocument()
+  })
+})

package/desktop/src/__tests__/pages.test.tsx

@@ -0,0 +1,290 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { skillsApi } from '../api/skills'
+
+vi.mock('../api/skills', () => ({
+  skillsApi: {
+    list: vi.fn(async () => ({ skills: [] })),
+  },
+}))
+
+// Import all pages
+import { EmptySession } from '../pages/EmptySession'
+import { ActiveSession } from '../pages/ActiveSession'
+import { AgentTeams } from '../pages/AgentTeams'
+import { ScheduledTasks } from '../pages/ScheduledTasks'
+import { ToolInspection } from '../pages/ToolInspection'
+
+// Layout components (chrome is now here, not in pages)
+import { Sidebar } from '../components/layout/Sidebar'
+import { UserMessage } from '../components/chat/UserMessage'
+import { useChatStore } from '../stores/chatStore'
+import { useSessionStore } from '../stores/sessionStore'
+import { useTabStore } from '../stores/tabStore'
+
+/**
+ * Core rendering tests: content-only pages must render without crashing
+ * and contain key structural elements from the prototype.
+ */
+describe('Content-only pages render without errors', () => {
+  it('EmptySession slash picker includes dynamic skills before the first session starts', async () => {
+    vi.mocked(skillsApi.list).mockResolvedValueOnce({
+      skills: [
+        {
+          name: 'lark-mail',
+          description: 'Draft, send, and search emails',
+          source: 'user',
+          userInvocable: true,
+          contentLength: 120,
+          hasDirectory: true,
+        },
+        {
+          name: 'internal-only',
+          description: 'Should stay hidden',
+          source: 'user',
+          userInvocable: false,
+          contentLength: 60,
+          hasDirectory: true,
+        },
+      ],
+    })
+
+    render(<EmptySession />)
+
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: '/', selectionStart: 1 },
+    })
+
+    expect(await screen.findByText('/lark-mail')).toBeInTheDocument()
+    expect(screen.queryByText('/internal-only')).not.toBeInTheDocument()
+  })
+
+  it('EmptySession renders mascot and composer', () => {
+    const { container } = render(<EmptySession />)
+    expect(container.querySelector('textarea')).toBeInTheDocument()
+    expect(container.innerHTML).toContain('New session')
+    expect(container.innerHTML).toContain('Ask anything')
+  })
+
+  it('EmptySession plus menu exposes uploads and slash commands before chat starts', () => {
+    render(<EmptySession />)
+    fireEvent.click(screen.getByRole('button', { name: 'Open composer tools' }))
+    expect(screen.getByText('Add files or photos')).toBeInTheDocument()
+    expect(screen.getByText('Slash commands')).toBeInTheDocument()
+  })
+
+  it('ActiveSession renders with chat components', () => {
+    const SESSION_ID = 'test-active-session'
+    useTabStore.setState({ tabs: [{ sessionId: SESSION_ID, title: 'Test', type: 'session' as const, status: 'idle' }], activeTabId: SESSION_ID })
+    useChatStore.setState({
+      sessions: {
+        [SESSION_ID]: {
+          messages: [],
+          chatState: 'idle',
+          connectionState: 'connected',
+          streamingText: '',
+          streamingToolInput: '',
+          activeToolUseId: null,
+          activeToolName: null,
+          activeThinkingId: null,
+          pendingPermission: null,
+          pendingComputerUsePermission: null,
+          tokenUsage: { input_tokens: 0, output_tokens: 0 },
+          elapsedSeconds: 0,
+          statusVerb: '',
+          slashCommands: [],
+          agentTaskNotifications: {},
+          elapsedTimer: null,
+        },
+      },
+    })
+    const { container } = render(<ActiveSession />)
+    // With empty messages, the hero is shown
+    expect(container.innerHTML).toContain('New session')
+    // ChatInput has a textarea
+    const textarea = container.querySelector('textarea')
+    expect(textarea).toBeInTheDocument()
+    expect(textarea).toHaveAttribute('placeholder', 'Ask anything...')
+    expect(textarea).toHaveAttribute('rows', '2')
+    expect(container.innerHTML).not.toContain('Preview')
+    // Cleanup
+    useTabStore.setState({ tabs: [], activeTabId: null })
+    useChatStore.setState({ sessions: {} })
+  })
+
+  it('ActiveSession keeps the compact composer once messages exist', () => {
+    const SESSION_ID = 'test-active-session-with-messages'
+    useTabStore.setState({ tabs: [{ sessionId: SESSION_ID, title: 'Test', type: 'session' as const, status: 'idle' }], activeTabId: SESSION_ID })
+    useChatStore.setState({
+      sessions: {
+        [SESSION_ID]: {
+          messages: [{
+            id: 'msg-1',
+            type: 'user_text',
+            content: 'hello',
+            timestamp: Date.now(),
+          }],
+          chatState: 'idle',
+          connectionState: 'connected',
+          streamingText: '',
+          streamingToolInput: '',
+          activeToolUseId: null,
+          activeToolName: null,
+          activeThinkingId: null,
+          pendingPermission: null,
+          pendingComputerUsePermission: null,
+          tokenUsage: { input_tokens: 0, output_tokens: 0 },
+          elapsedSeconds: 0,
+          statusVerb: '',
+          slashCommands: [],
+          agentTaskNotifications: {},
+          elapsedTimer: null,
+        },
+      },
+    })
+    useSessionStore.setState({
+      sessions: [{
+        id: SESSION_ID,
+        title: 'Test',
+        createdAt: '2026-04-10T00:00:00.000Z',
+        modifiedAt: '2026-04-10T00:00:00.000Z',
+        messageCount: 1,
+        projectPath: '',
+        workDir: null,
+        workDirExists: true,
+      }],
+      activeSessionId: SESSION_ID,
+      isLoading: false,
+      error: null,
+    })
+
+    render(<ActiveSession />)
+
+    const textarea = screen.getByPlaceholderText('Ask Claude to edit, debug or explain...')
+    expect(textarea).toHaveAttribute('rows', '1')
+
+    useTabStore.setState({ tabs: [], activeTabId: null })
+    useSessionStore.setState({ sessions: [], activeSessionId: null, isLoading: false, error: null })
+    useChatStore.setState({ sessions: {} })
+  })
+
+  it('ActiveSession shows a single primary action button while a turn is active', () => {
+    useTabStore.setState({ activeTabId: 'active-tab', tabs: [{ sessionId: 'active-tab', title: 'Test', type: 'session' as const, status: 'idle' }] })
+    useChatStore.setState({
+      sessions: {
+        'active-tab': {
+          messages: [],
+          chatState: 'thinking',
+          connectionState: 'connected',
+          streamingText: '',
+          streamingToolInput: '',
+          activeToolUseId: null,
+          activeToolName: null,
+          activeThinkingId: null,
+          pendingPermission: null,
+          pendingComputerUsePermission: null,
+          tokenUsage: { input_tokens: 0, output_tokens: 0 },
+          elapsedSeconds: 0,
+          statusVerb: '',
+          slashCommands: [],
+          agentTaskNotifications: {},
+          elapsedTimer: null,
+        },
+      },
+    })
+    render(<ActiveSession />)
+
+    expect(screen.getByRole('button', { name: /stop/i })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /^run$/i })).not.toBeInTheDocument()
+    useChatStore.setState({ sessions: {} })
+  })
+
+  it('AgentTeams renders team strip and members', () => {
+    const { container } = render(<AgentTeams />)
+    expect(container.innerHTML).toContain('Architect')
+    expect(container.innerHTML).toContain('session-dev')
+    expect(container.innerHTML).toContain('groups')
+  })
+
+  it('ScheduledTasks renders (store-connected)', async () => {
+    const { container } = render(<ScheduledTasks />)
+    await screen.findByText('Scheduled tasks')
+    expect(container.innerHTML).toContain('Scheduled tasks')
+  })
+
+  it('ToolInspection renders diff viewer', () => {
+    const { container } = render(<ToolInspection />)
+    expect(container.innerHTML).toContain('edit_file')
+    expect(container.innerHTML).toContain('Split')
+    expect(container.innerHTML).toContain('Unified')
+  })
+})
+
+describe('Chat attachments', () => {
+  it('UserMessage opens image gallery when an attachment is clicked', () => {
+    render(
+      <UserMessage
+        content=""
+        attachments={[
+          {
+            type: 'image',
+            name: 'diagram.png',
+            data: 'data:image/png;base64,abc123',
+          },
+        ]}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(screen.getByText('diagram.png')).toBeInTheDocument()
+  })
+})
+
+describe('AppShell layout renders chrome', () => {
+  it('AppShell renders sidebar and session shell', () => {
+    const { container } = render(<Sidebar />)
+    expect(container.querySelector('aside')).toBeInTheDocument()
+    expect(container.innerHTML).toContain('New session')
+    expect(container.innerHTML).toContain('Scheduled')
+    expect(container.innerHTML).toContain('All projects')
+  })
+})
+
+describe('Design system compliance', () => {
+  it('Pages use Material Symbols Outlined icons', () => {
+    const pages = [EmptySession, AgentTeams, ToolInspection]
+    for (const Page of pages) {
+      const { container, unmount } = render(<Page />)
+      const icons = container.querySelectorAll('.material-symbols-outlined')
+      expect(icons.length).toBeGreaterThan(0)
+      unmount()
+    }
+  })
+
+  it('Current brand color is used in content pages', () => {
+    const pages = [EmptySession]
+    for (const Page of pages) {
+      const { container, unmount } = render(<Page />)
+      const html = container.innerHTML
+      expect(
+        html.includes('C47A5A') ||
+        html.includes('8F482F') ||
+        html.includes('var(--color-brand)') ||
+        html.includes('bg-[var(--color-brand)]'),
+      ).toBe(true)
+      unmount()
+    }
+  })
+})
+
+describe('Mock data integration', () => {
+  it('AgentTeams shows team members from mock data', () => {
+    const { container } = render(<AgentTeams />)
+    expect(container.innerHTML).toContain('Architect')
+    expect(container.innerHTML).toContain('Frontend Dev')
+    expect(container.innerHTML).toContain('Backend Dev')
+    expect(container.innerHTML).toContain('Tester')
+  })
+})