@micha.bigler/ui-core-micha 3.13.1 → 3.14.3

package/tests/ProfileComponent.refresh.test.jsx

@@ -0,0 +1,194 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, fallback) => ({
+      'Profile.USERNAME_LABEL': 'Username',
+      'Auth.EMAIL_LABEL': 'Email',
+      'Profile.FIRST_NAME_LABEL': 'First name',
+      'Profile.LAST_NAME_LABEL': 'Last name',
+      'Profile.ACCEPT_PRIVACY_LABEL': 'Accept privacy statement',
+      'Profile.ACCEPT_COOKIES_LABEL': 'Accept convenience cookies',
+      'Profile.SAVE_BUTTON': 'Save',
+    }[key] ?? fallback ?? key),
+    i18n: { exists: () => true },
+  }),
+}));
+
+vi.mock('../src/auth/authApi', () => ({
+  fetchCookieStatement: vi.fn(),
+  fetchPrivacyStatement: vi.fn(),
+}));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { ProfileComponent } from '../src/components/ProfileComponent';
+
+const theme = createTheme();
+
+function makeUser(overrides = {}) {
+  return {
+    id: 17,
+    username: 'pat',
+    email: 'pat@example.com',
+    first_name: 'Pat',
+    last_name: 'Example',
+    accepted_privacy_statement: false,
+    accepted_convenience_cookies: true,
+    ...overrides,
+  };
+}
+
+function profileTree(user, onSubmit) {
+  return (
+    <ThemeProvider theme={theme}>
+      <AuthContext.Provider value={{ user, loading: false }}>
+        <ProfileComponent onSubmit={onSubmit} showStatements={false} />
+      </AuthContext.Provider>
+    </ThemeProvider>
+  );
+}
+
+function renderProfile(user, onSubmit = vi.fn()) {
+  const view = render(profileTree(user, onSubmit));
+  return {
+    ...view,
+    onSubmit,
+    setUser: (nextUser) => view.rerender(profileTree(nextUser, onSubmit)),
+  };
+}
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe('ProfileComponent user refresh', () => {
+  it('refreshes untouched editable fields while retaining the independently edited field', () => {
+    const { setUser } = renderProfile(makeUser());
+    fireEvent.change(screen.getByRole('textbox', { name: 'First name' }), {
+      target: { value: 'Local first' },
+    });
+
+    setUser(makeUser({
+      first_name: 'Server first',
+      last_name: 'Server last',
+      accepted_privacy_statement: true,
+      accepted_convenience_cookies: false,
+    }));
+
+    expect(screen.getByRole('textbox', { name: 'First name' }).value).toBe('Local first');
+    expect(screen.getByRole('textbox', { name: 'Last name' }).value).toBe('Server last');
+    expect(screen.getByRole('checkbox', { name: 'Accept privacy statement' }).checked).toBe(true);
+    expect(screen.getByRole('checkbox', { name: 'Accept convenience cookies' }).checked).toBe(false);
+  });
+
+  it('preserves edits for the same identity and refreshes untouched fields', async () => {
+    const { onSubmit, setUser } = renderProfile(makeUser());
+    fireEvent.change(screen.getByRole('textbox', { name: 'First name' }), {
+      target: { value: 'Patricia' },
+    });
+    fireEvent.change(screen.getByRole('textbox', { name: 'Last name' }), {
+      target: { value: 'Newname' },
+    });
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Accept privacy statement' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Accept convenience cookies' }));
+
+    setUser(makeUser({
+      username: 'pat-updated',
+      email: 'new@example.com',
+      first_name: 'Server first',
+      last_name: 'Server last',
+      accepted_privacy_statement: false,
+      accepted_convenience_cookies: true,
+    }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'Username' }).value).toBe('pat-updated');
+      expect(screen.getByRole('textbox', { name: 'Email' }).value).toBe('new@example.com');
+    });
+    expect(screen.getByRole('textbox', { name: 'First name' }).value).toBe('Patricia');
+    expect(screen.getByRole('textbox', { name: 'Last name' }).value).toBe('Newname');
+    expect(screen.getByRole('checkbox', { name: 'Accept privacy statement' }).checked).toBe(true);
+    expect(screen.getByRole('checkbox', { name: 'Accept convenience cookies' }).checked).toBe(false);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith({
+        first_name: 'Patricia',
+        last_name: 'Newname',
+        accepted_privacy_statement: true,
+        accepted_convenience_cookies: false,
+      });
+    });
+  });
+
+  it('resets every field when the identity changes', async () => {
+    const { setUser } = renderProfile(makeUser());
+    fireEvent.change(screen.getByRole('textbox', { name: 'First name' }), {
+      target: { value: 'Unsaved first' },
+    });
+    fireEvent.change(screen.getByRole('textbox', { name: 'Last name' }), {
+      target: { value: 'Unsaved last' },
+    });
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Accept privacy statement' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Accept convenience cookies' }));
+
+    setUser(makeUser({
+      id: 18,
+      username: 'lee',
+      email: 'lee@example.com',
+      first_name: 'Lee',
+      last_name: 'Newperson',
+      accepted_privacy_statement: false,
+      accepted_convenience_cookies: true,
+    }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'First name' }).value).toBe('Lee');
+    });
+    expect(screen.getByRole('textbox', { name: 'Username' }).value).toBe('lee');
+    expect(screen.getByRole('textbox', { name: 'Email' }).value).toBe('lee@example.com');
+    expect(screen.getByRole('textbox', { name: 'Last name' }).value).toBe('Newperson');
+    expect(screen.getByRole('checkbox', { name: 'Accept privacy statement' }).checked).toBe(false);
+    expect(screen.getByRole('checkbox', { name: 'Accept convenience cookies' }).checked).toBe(true);
+  });
+
+  it('clears edits on logout before initializing the next login', async () => {
+    const { setUser } = renderProfile(makeUser());
+    fireEvent.change(screen.getByRole('textbox', { name: 'First name' }), {
+      target: { value: 'Unsaved first' },
+    });
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Accept privacy statement' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Accept convenience cookies' }));
+
+    setUser(null);
+    expect(await screen.findByText('User not logged in.')).toBeTruthy();
+    setUser(makeUser({
+      first_name: 'Pat after login',
+      accepted_privacy_statement: false,
+      accepted_convenience_cookies: true,
+    }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'First name' }).value).toBe('Pat after login');
+    });
+    expect(screen.getByRole('checkbox', { name: 'Accept privacy statement' }).checked).toBe(false);
+    expect(screen.getByRole('checkbox', { name: 'Accept convenience cookies' }).checked).toBe(true);
+  });
+
+  it('hydrates fields when the current user arrives asynchronously', async () => {
+    const { setUser } = renderProfile(null);
+    setUser(makeUser({ first_name: 'Hydrated' }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'First name' }).value).toBe('Hydrated');
+      expect(screen.getByRole('textbox', { name: 'Last name' }).value).toBe('Example');
+    });
+    expect(screen.getByRole('checkbox', { name: 'Accept privacy statement' }).checked).toBe(false);
+    expect(screen.getByRole('checkbox', { name: 'Accept convenience cookies' }).checked).toBe(true);
+  });
+});

package/tests/chatApi.test.js

@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('../src/auth/apiClient', () => ({
+  default: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), delete: vi.fn() },
+}));
+
+import apiClient from '../src/auth/apiClient';
+import { createChatApi } from '../src/chat/api';
+
+beforeEach(() => {
+  for (const method of ['get', 'post', 'patch', 'delete']) apiClient[method].mockReset().mockResolvedValue({ data: { ok: method } });
+});
+
+describe('chat api client', () => {
+  it('calls the contract endpoints and unwraps the response data', async () => {
+    const api = createChatApi();
+    expect(await api.getCatalogue()).toEqual({ ok: 'get' });
+    expect(apiClient.get).toHaveBeenLastCalledWith('/api/assistant/catalogue/');
+    await api.listChats({ archived: true, cursor: 'c1' });
+    expect(apiClient.get).toHaveBeenLastCalledWith('/api/assistant/chats/', { params: { archived: true, cursor: 'c1' } });
+    await api.createChat({ scope: 'x' });
+    expect(apiClient.post).toHaveBeenLastCalledWith('/api/assistant/chats/', { scope: 'x' });
+    await api.updateChat(4, { selection: { entry: 'a', effort: 'low' } });
+    expect(apiClient.patch).toHaveBeenLastCalledWith('/api/assistant/chats/4/', { selection: { entry: 'a', effort: 'low' } });
+    await api.deleteChat(4);
+    expect(apiClient.delete).toHaveBeenLastCalledWith('/api/assistant/chats/4/');
+    await api.listTurns(4, { cursor: 'older' });
+    expect(apiClient.get).toHaveBeenLastCalledWith('/api/assistant/chats/4/turns/', { params: { cursor: 'older' } });
+    await api.getStatus();
+    expect(apiClient.get).toHaveBeenLastCalledWith('/api/assistant/status/');
+  });
+
+  it('keeps the defaults of every other function when one is overridden', async () => {
+    const names = ['getCatalogue', 'listChats', 'createChat', 'updateChat', 'deleteChat', 'listTurns', 'getStatus'];
+    const defaults = createChatApi({}, { apiBase: '/v2/chat' });
+    for (const name of names) {
+      const override = vi.fn();
+      const api = createChatApi({ [name]: override }, { apiBase: '/v2/chat' });
+      expect(api[name]).toBe(override);
+      for (const other of names.filter((n) => n !== name)) expect(String(api[other])).toBe(String(defaults[other]));
+    }
+    const api = createChatApi({ getStatus: vi.fn() }, { apiBase: '/v2/chat' });
+    await api.getCatalogue();
+    expect(apiClient.get).toHaveBeenLastCalledWith('/v2/chat/catalogue/');
+    await api.deleteChat(9);
+    expect(apiClient.delete).toHaveBeenLastCalledWith('/v2/chat/chats/9/');
+  });
+});

package/tests/chatDriverNames.test.jsx

@@ -0,0 +1,71 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import i18next from 'i18next';
+import { I18nextProvider } from 'react-i18next';
+
+import ModelPicker from '../src/chat/ModelPicker';
+import { chatTranslations } from '../src/i18n/chatTranslations';
+
+// The real translations through a real i18next instance (the picker tests with a mocked t only see keys).
+function makeI18n(language) {
+  const resources = {};
+  for (const [key, value] of Object.entries(chatTranslations)) {
+    for (const [locale, text] of Object.entries(value)) {
+      resources[locale] = resources[locale] || { translation: {} };
+      resources[locale].translation[key] = text;
+    }
+  }
+  const instance = i18next.createInstance();
+  instance.init({ lng: language, fallbackLng: 'en', resources, keySeparator: false, nsSeparator: false, interpolation: { escapeValue: false } });
+  return instance;
+}
+
+const entries = [
+  { id: 'cli', driver: 'claude_cli', model: 'sonnet', label: 'Sonnet', efforts: ['high'], billing: 'subscription' },
+  { id: 'anth', driver: 'anthropic_api', model: 'claude', label: 'Claude API', efforts: ['high'], billing: 'pay_per_use' },
+  { id: 'oa', driver: 'openai_api', model: 'gpt', label: 'GPT', efforts: ['high'], billing: 'pay_per_use' },
+  { id: 'x', driver: 'mystery_driver', model: 'x', label: 'Mystery', efforts: ['high'], billing: 'subscription' },
+];
+
+function open(language) {
+  render(
+    <I18nextProvider i18n={makeI18n(language)}>
+      <ModelPicker entries={entries} selection={{ entry: 'cli', effort: 'high' }} />
+    </I18nextProvider>,
+  );
+  const bar = screen.getByRole('button', { name: /Sonnet/ });
+  const label = bar.textContent;
+  fireEvent.click(bar);
+  return label;
+}
+
+afterEach(cleanup);
+
+describe('ModelPicker with the real chat translations', () => {
+  it('shows readable English driver names as heading and accessible name, and the raw id for an unknown driver', () => {
+    open('en');
+    for (const name of ['Claude Code subscription', 'Anthropic API', 'OpenAI API', 'mystery_driver']) {
+      expect(screen.getByRole('group', { name })).toBeTruthy();
+      expect(screen.getAllByText(name).length).toBeGreaterThan(0);
+    }
+    expect(screen.queryByRole('group', { name: 'claude_cli' })).toBeNull();
+  });
+
+  it('shows the German names and translates the effort in the bar label', () => {
+    const label = open('de');
+    expect(label).toBe('Sonnet · Hoch');
+    expect(screen.getByRole('group', { name: 'Claude Code (Abo)' })).toBeTruthy();
+  });
+
+  it('shows the French and Swahili names', () => {
+    open('fr');
+    expect(screen.getByRole('group', { name: 'API Anthropic' })).toBeTruthy();
+    expect(screen.getByRole('group', { name: 'Claude Code (abonnement)' })).toBeTruthy();
+    cleanup();
+    open('sw');
+    expect(screen.getByRole('group', { name: 'API ya OpenAI' })).toBeTruthy();
+    expect(screen.getByRole('group', { name: 'Claude Code (usajili)' })).toBeTruthy();
+  });
+});

package/tests/chatExports.test.js

@@ -0,0 +1,3 @@
+import { describe, expect, it } from 'vitest';
+import { ChatWorkspace, ChatList, ChatThread, ChatComposer, ModelPicker, MarkdownReply, useChatSocket, createChatApi, defaultChatApi, chatTranslations } from '../src/index';
+describe('chat exports', () => { it('exports the public chat surface', () => { for (const value of [ChatWorkspace, ChatList, ChatThread, ChatComposer, ModelPicker, MarkdownReply, useChatSocket, createChatApi, defaultChatApi, chatTranslations]) expect(value).toBeDefined(); }); });

package/tests/chatList.test.jsx

@@ -0,0 +1,84 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key }) }));
+vi.mock('@mui/icons-material', () => ({ MoreVert: () => null }));
+
+import ChatList from '../src/chat/ChatList';
+
+afterEach(cleanup);
+
+const chats = [{ id: 1, title: 'Budget' }, { id: 2, title: 'Ideas' }];
+const archivedChats = [{ id: 3, title: 'Old notes', archived_at: '2026-10-01T00:00:00Z' }];
+
+function setup(props = {}) {
+  const handlers = { onSelect: vi.fn(), onNew: vi.fn(), onRename: vi.fn(), onArchive: vi.fn(), onRestore: vi.fn(), onDelete: vi.fn() };
+  render(<ChatList chats={chats} archivedChats={archivedChats} {...handlers} {...props} />);
+  return handlers;
+}
+const rowMenu = (index) => fireEvent.click(screen.getAllByRole('button', { name: 'Chat.actions' })[index]);
+
+describe('ChatList', () => {
+  it('selects and creates chats', () => {
+    const { onSelect, onNew } = setup();
+    fireEvent.click(screen.getByText('Ideas'));
+    expect(onSelect).toHaveBeenCalledWith(chats[1]);
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.newChat' }));
+    expect(onNew).toHaveBeenCalled();
+  });
+
+  it('renames through a dialog', () => {
+    const { onRename } = setup();
+    rowMenu(0);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Chat.rename' }));
+    fireEvent.change(screen.getByRole('textbox', { name: 'Chat.renameLabel' }), { target: { value: ' Budget 2027 ' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.save' }));
+    expect(onRename).toHaveBeenCalledWith(chats[0], 'Budget 2027');
+  });
+
+  it('archives from the row menu', () => {
+    const { onArchive } = setup();
+    rowMenu(1);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Chat.archive' }));
+    expect(onArchive).toHaveBeenCalledWith(chats[1]);
+  });
+
+  it('asks for confirmation before deleting and does nothing on cancel', () => {
+    const { onDelete } = setup();
+    rowMenu(0);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Chat.delete' }));
+    expect(onDelete).not.toHaveBeenCalled();
+    expect(screen.getByText('Chat.deleteConfirm')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.cancel' }));
+    expect(onDelete).not.toHaveBeenCalled();
+  });
+
+  it('deletes after the confirmation', () => {
+    const { onDelete } = setup();
+    rowMenu(0);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Chat.delete' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.delete' }));
+    expect(onDelete).toHaveBeenCalledWith(chats[0]);
+  });
+
+  it('hides archived chats behind the Archived entry with its count and restores from there', () => {
+    const { onRestore } = setup();
+    expect(screen.queryByText('Old notes')).toBeNull();
+    const toggle = screen.getByRole('button', { name: /Chat.archived/ });
+    expect(toggle.textContent).toContain('1');
+    fireEvent.click(toggle);
+    expect(screen.getByText('Old notes')).toBeTruthy();
+    rowMenu(2);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Chat.restore' }));
+    expect(onRestore).toHaveBeenCalledWith(archivedChats[0]);
+  });
+
+  it('offers more chats by cursor', () => {
+    const onLoadMore = vi.fn();
+    setup({ hasMore: true, onLoadMore });
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.loadMore' }));
+    expect(onLoadMore).toHaveBeenCalled();
+  });
+});

package/tests/chatPicker.test.jsx

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, values) => key.startsWith('Chat.driver.') && values?.defaultValue && !['Chat.driver.claude_cli', 'Chat.driver.anthropic_api', 'Chat.driver.openai_api'].includes(key) ? values.defaultValue : key }) }));
+
+import ModelPicker from '../src/chat/ModelPicker';
+
+afterEach(() => { cleanup(); delete window.matchMedia; });
+
+const entries = [
+  { id: 'cli-sonnet', driver: 'claude_cli', model: 'sonnet', label: 'Sonnet', efforts: ['low', 'medium', 'high'], billing: 'subscription' },
+  { id: 'cli-opus', driver: 'claude_cli', model: 'opus', label: 'Opus', efforts: ['high', 'max'], billing: 'subscription' },
+  { id: 'anthropic', driver: 'anthropic_api', model: 'claude', label: 'Claude API', efforts: ['medium'], billing: 'pay_per_use' },
+  { id: 'oa-5', driver: 'openai_api', model: 'gpt', label: 'GPT', efforts: ['medium'], billing: 'pay_per_use' },
+  { id: 'mystery', driver: 'mystery_driver', model: 'mystery', label: 'Mystery', efforts: ['low'], billing: 'subscription' },
+];
+const selection = { entry: 'cli-sonnet', effort: 'high' };
+const open = () => fireEvent.click(screen.getByRole('button', { name: 'Sonnet · Chat.effort.high' }));
+
+describe('ModelPicker', () => {
+  it('shows the current selection as "model · effort" on the bar', () => {
+    render(<ModelPicker entries={entries} selection={selection} />);
+    expect(screen.getByRole('button', { name: 'Sonnet · Chat.effort.high' })).toBeTruthy();
+  });
+
+  it('groups entries by driver and tags pay-per-use entries', () => {
+    render(<ModelPicker entries={entries} selection={selection} />);
+    open();
+    const cli = screen.getByRole('group', { name: 'Chat.driver.claude_cli' });
+    expect(within(cli).getByText('Chat.driver.claude_cli')).toBeTruthy();
+    expect(within(cli).getByText('Sonnet')).toBeTruthy();
+    expect(within(cli).getByText('Opus')).toBeTruthy();
+    const anthropic = screen.getByRole('group', { name: 'Chat.driver.anthropic_api' });
+    expect(within(anthropic).getByText('Chat.driver.anthropic_api')).toBeTruthy();
+    const openai = screen.getByRole('group', { name: 'Chat.driver.openai_api' });
+    expect(within(openai).getByText('Chat.driver.openai_api')).toBeTruthy();
+    expect(within(openai).getByText('GPT')).toBeTruthy();
+    expect(within(openai).getByText('Chat.payPerUse')).toBeTruthy();
+    expect(within(cli).queryByText('Chat.payPerUse')).toBeNull();
+    const unknown = screen.getByRole('group', { name: 'mystery_driver' });
+    expect(within(unknown).getByText('mystery_driver')).toBeTruthy();
+  });
+
+  it('disables effort levels the selected entry does not allow', () => {
+    render(<ModelPicker entries={entries} selection={selection} />);
+    open();
+    expect(screen.getByRole('button', { name: 'Chat.effort.max' }).disabled).toBe(true);
+    expect(screen.getByRole('button', { name: 'Chat.effort.low' }).disabled).toBe(false);
+  });
+
+  it('reports a new effort for the same entry', () => {
+    const onChange = vi.fn();
+    render(<ModelPicker entries={entries} selection={selection} onChange={onChange} />);
+    open();
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.effort.low' }));
+    expect(onChange).toHaveBeenCalledWith({ entry: 'cli-sonnet', effort: 'low' });
+  });
+
+  it('keeps the effort when the new entry allows it and falls back to its first level otherwise', () => {
+    const onChange = vi.fn();
+    render(<ModelPicker entries={entries} selection={selection} onChange={onChange} />);
+    open();
+    fireEvent.click(screen.getByText('Opus'));
+    expect(onChange).toHaveBeenLastCalledWith({ entry: 'cli-opus', effort: 'high' });
+    fireEvent.click(screen.getByText('GPT'));
+    expect(onChange).toHaveBeenLastCalledWith({ entry: 'oa-5', effort: 'medium' });
+  });
+
+  it('opens as a bottom sheet at narrow widths', () => {
+    window.matchMedia = vi.fn().mockImplementation((query) => ({ matches: true, media: query, addEventListener() {}, removeEventListener() {}, addListener() {}, removeListener() {} }));
+    const { baseElement } = render(<ModelPicker entries={entries} selection={selection} />);
+    open();
+    expect(baseElement.querySelector('.MuiDrawer-paperAnchorBottom')).toBeTruthy();
+  });
+
+  it('shows no trailing separator when the selection has no effort', () => {
+    render(<ModelPicker entries={entries} selection={{ entry: 'cli-sonnet' }} />);
+    expect(screen.getByRole('button', { name: 'Sonnet' })).toBeTruthy();
+  });
+});

package/tests/chatSocket.test.jsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+import { useChatSocket } from '../src/chat/useChatSocket';
+class FakeSocket {
+  static OPEN = 1; static instances = [];
+  constructor(url) { this.url=url; this.readyState=0; this.sent=[]; FakeSocket.instances.push(this); }
+  open() { this.readyState=1; this.onopen?.(); }
+  message(data) { this.onmessage?.({data:JSON.stringify(data)}); }
+  send(data) { this.sent.push(data); }
+  close(code=1000) { this.readyState=3; this.onclose?.({code}); }
+}
+function Harness({ onFrame }) { const socket = useChatSocket('a', { wsUrl: () => 'ws://test', onFrame }); return <output>{socket.status}</output>; }
+describe('chat socket', () => {
+  afterEach(() => { vi.useRealTimers(); delete globalThis.WebSocket; FakeSocket.instances=[]; });
+  it('delivers delta and final turn frames with chat id and reconnects without resending', () => {
+    vi.useFakeTimers(); globalThis.WebSocket=FakeSocket; const onFrame=vi.fn(); render(<Harness onFrame={onFrame}/>); const first=FakeSocket.instances[0];
+    act(()=>{ first.open(); first.message({type:'delta',text:'hi'}); first.message({type:'turn',turn:{assistant_text:'done',sources:[]}}); first.close(1006); });
+    expect(onFrame).toHaveBeenCalledWith({type:'delta',text:'hi'},'a'); expect(onFrame).toHaveBeenCalledWith({type:'turn',turn:{assistant_text:'done',sources:[]}},'a');
+    act(()=>vi.advanceTimersByTime(1000)); expect(FakeSocket.instances).toHaveLength(2); expect(first.sent).toEqual([]);
+  });
+  it.each([4401,4403,4429])('does not reconnect for close code %s', (code) => {
+    vi.useFakeTimers(); globalThis.WebSocket=FakeSocket; render(<Harness onFrame={vi.fn()}/>); act(()=>FakeSocket.instances[0].close(code)); act(()=>vi.advanceTimersByTime(10000)); expect(FakeSocket.instances).toHaveLength(1);
+  });
+});

package/tests/chatThread.test.jsx

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, values) => (values?.model ? `${key}:${values.model}` : key) }) }));
+
+import ChatThread from '../src/chat/ChatThread';
+import MarkdownReply from '../src/chat/MarkdownReply';
+
+afterEach(cleanup);
+
+const turn = (extra) => ({ id: 1, seq: 1, user_text: 'Question', assistant_text: 'Answer', state: 'completed', sources: [], driver: 'claude_cli', model: 'Sonnet', effort: 'high', ...extra });
+
+describe('MarkdownReply', () => {
+  it('renders a list and a table', () => {
+    render(<MarkdownReply text={'- first item\n- second item\n\n| A | B |\n|---|---|\n| x | y |'} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByRole('table')).toBeTruthy();
+  });
+
+  it('shows raw HTML as text and never creates the element', () => {
+    const { container } = render(<MarkdownReply text={'before <script>window.__pwned = 1</script> <b>bold</b> after'} />);
+    expect(container.querySelector('script')).toBeNull();
+    expect(container.querySelector('b')).toBeNull();
+    expect(window.__pwned).toBeUndefined();
+    expect(container.textContent).toContain('<script>');
+  });
+
+  it('does not load an image reference and does not link', () => {
+    const { container } = render(<MarkdownReply text={'![the chart](https://img.example.test/a.png) and [docs](https://docs.example.test)'} />);
+    expect(container.querySelector('img')).toBeNull();
+    expect(container.querySelector('a')).toBeNull();
+    expect(container.textContent).toContain('the chart');
+    expect(container.textContent).toContain('docs (https://docs.example.test)');
+  });
+});
+
+describe('ChatThread', () => {
+  it('shows source chips with the label and the reference on hover', async () => {
+    render(<ChatThread turns={[turn({ sources: [{ label: 'KB-12', reference: 'kb://handbook/12#intro' }] })]} />);
+    const chip = screen.getByText('KB-12');
+    expect(screen.queryByText('kb://handbook/12#intro')).toBeNull();
+    fireEvent.mouseOver(chip);
+    expect((await screen.findByRole('tooltip')).textContent).toContain('kb://handbook/12#intro');
+  });
+
+  it('marks where the model changed between two turns', () => {
+    render(<ChatThread turns={[turn(), turn({ id: 2, seq: 2, model: 'Opus', effort: 'max' })]} />);
+    expect(screen.getByRole('separator').textContent).toContain('Chat.modelChanged:Opus · Chat.effort.max');
+  });
+
+  it('shows no divider when the selection is unchanged', () => {
+    render(<ChatThread turns={[turn(), turn({ id: 2, seq: 2 })]} />);
+    expect(screen.queryByRole('separator')).toBeNull();
+  });
+
+  it('shows a typing indicator, then the tool label, for a generating turn', () => {
+    const generating = turn({ id: 2, seq: 2, assistant_text: '', state: 'generating' });
+    const { rerender } = render(<ChatThread turns={[generating]} />);
+    expect(screen.getByText('Chat.typing')).toBeTruthy();
+    rerender(<ChatThread turns={[generating]} tool={{ label: 'Searching the knowledge base' }} />);
+    expect(screen.getByText('Searching the knowledge base')).toBeTruthy();
+    expect(screen.queryByText('Chat.typing')).toBeNull();
+  });
+
+  it('shows Interrupted with Retry and calls onRetry with the turn', () => {
+    const onRetry = vi.fn();
+    const interrupted = turn({ state: 'interrupted' });
+    render(<ChatThread turns={[interrupted]} onRetry={onRetry} />);
+    expect(screen.getByText('Chat.interrupted')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.retry' }));
+    expect(onRetry).toHaveBeenCalledWith(interrupted);
+  });
+
+  it('shows the incomplete-answer alert for a failed turn', () => {
+    render(<ChatThread turns={[turn({ state: 'failed', error_code: 'provider_error', assistant_text: '' })]} />);
+    expect(screen.getByText('Chat.answerIncomplete')).toBeTruthy();
+  });
+
+  it('renders the user message as plain text', () => {
+    const { container } = render(<ChatThread turns={[turn({ user_text: '<img src=x onerror=alert(1)>' })]} />);
+    expect(container.querySelector('img')).toBeNull();
+    expect(container.textContent).toContain('<img src=x');
+  });
+
+  it('offers older turns through the cursor callback', () => {
+    const onLoadOlder = vi.fn();
+    render(<ChatThread turns={[turn()]} hasOlder onLoadOlder={onLoadOlder} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.loadOlder' }));
+    expect(onLoadOlder).toHaveBeenCalled();
+  });
+
+  it('loads older turns when the thread is scrolled to the top', () => {
+    const onLoadOlder = vi.fn();
+    render(<ChatThread turns={[turn()]} hasOlder onLoadOlder={onLoadOlder} />);
+    const log = screen.getByRole('log');
+    fireEvent.scroll(log, { target: { scrollTop: 400 } });
+    expect(onLoadOlder).not.toHaveBeenCalled();
+    fireEvent.scroll(log, { target: { scrollTop: 0 } });
+    expect(onLoadOlder).toHaveBeenCalledTimes(1);
+  });
+
+  it('starts only one older-turns request for rapid scroll events', async () => {
+    let release;
+    const onLoadOlder = vi.fn(() => new Promise((resolve) => { release = resolve; }));
+    render(<ChatThread turns={[turn()]} hasOlder onLoadOlder={onLoadOlder} />);
+    const log = screen.getByRole('log');
+    fireEvent.scroll(log, { target: { scrollTop: 0 } });
+    fireEvent.scroll(log, { target: { scrollTop: 0 } });
+    fireEvent.click(screen.getByRole('button', { name: 'Chat.loadOlder' }));
+    expect(onLoadOlder).toHaveBeenCalledTimes(1);
+    release();
+    await waitFor(() => { fireEvent.scroll(log, { target: { scrollTop: 0 } }); expect(onLoadOlder).toHaveBeenCalledTimes(2); });
+  });
+});