@micha.bigler/ui-core-micha 3.13.2 → 3.14.4

package/src/chat/ModelPicker.jsx

@@ -0,0 +1,85 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { Box, Button, Chip, Drawer, List, ListItemButton, ListItemText, Popover, Stack, ToggleButton, ToggleButtonGroup, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export const EFFORT_LEVELS = ['low', 'medium', 'high', 'max'];
+export const driverName = (t, id) => t(`Chat.driver.${id}`, { defaultValue: id });
+
+const groupByDriver = (entries) => entries.reduce((groups, entry) => {
+  (groups[entry.driver] = groups[entry.driver] || []).push(entry);
+  return groups;
+}, {});
+
+/**
+ * Model and effort of one chat. A popover at wide widths, a bottom sheet at narrow widths. `onChange` receives
+ * `{ entry, effort }`; the caller persists it (the change applies from the next turn). Can be controlled with `open`.
+ */
+export function ModelPicker({ entries = [], selection, onChange, disabled = false, open, onOpenChange }) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const narrow = useMediaQuery(theme.breakpoints.down('md'));
+  const anchor = useRef(null);
+  const [innerOpen, setInnerOpen] = useState(false);
+  const isOpen = open ?? innerOpen;
+  const setOpen = (value) => { setInnerOpen(value); onOpenChange?.(value); };
+  const groups = useMemo(() => groupByDriver(entries), [entries]);
+  const active = entries.find((entry) => entry.id === selection?.entry);
+
+  const pickEntry = (entry) => {
+    const effort = entry.efforts?.includes(selection?.effort) ? selection.effort : entry.efforts?.[0];
+    onChange?.({ entry: entry.id, effort });
+  };
+
+  const content = (
+    <Box sx={{ p: 2, minWidth: narrow ? 0 : 320, maxWidth: '100%' }}>
+      <Stack spacing={1.5}>
+        {Object.entries(groups).map(([driver, items]) => (
+          <Box key={driver} role="group" aria-label={driverName(t, driver)}>
+            <Typography variant="overline" color="text.secondary">{driverName(t, driver)}</Typography>
+            <List dense disablePadding>
+              {items.map((entry) => (
+                <ListItemButton key={entry.id} selected={entry.id === selection?.entry} onClick={() => pickEntry(entry)} sx={{ minHeight: 40, borderRadius: 1 }}>
+                  <ListItemText primary={entry.label || entry.model} />
+                  {entry.billing === 'pay_per_use' ? <Chip size="small" variant="outlined" label={t('Chat.payPerUse')} /> : null}
+                </ListItemButton>
+              ))}
+            </List>
+          </Box>
+        ))}
+        <Box>
+          <Typography variant="overline" color="text.secondary">{t('Chat.effortLabel')}</Typography>
+          <ToggleButtonGroup
+            exclusive
+            fullWidth
+            size="small"
+            aria-label={t('Chat.effortLabel')}
+            value={selection?.effort || null}
+            onChange={(_event, effort) => { if (effort && active) onChange?.({ entry: active.id, effort }); }}
+          >
+            {EFFORT_LEVELS.map((effort) => (
+              <ToggleButton key={effort} value={effort} disabled={!active?.efforts?.includes(effort)} sx={{ minHeight: 40 }}>
+                {t(`Chat.effort.${effort}`)}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        </Box>
+      </Stack>
+    </Box>
+  );
+
+  const label = active ? [active.label || active.model, selection?.effort && t(`Chat.effort.${selection.effort}`)].filter(Boolean).join(' · ') : t('Chat.chooseModel');
+  return (
+    <>
+      <Button ref={anchor} size="small" color="inherit" disabled={disabled || entries.length === 0} onClick={() => setOpen(true)} aria-haspopup="dialog">
+        {label}
+      </Button>
+      {narrow ? (
+        <Drawer anchor="bottom" open={isOpen} onClose={() => setOpen(false)}>{content}</Drawer>
+      ) : (
+        <Popover open={isOpen} anchorEl={anchor.current} onClose={() => setOpen(false)} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>{content}</Popover>
+      )}
+    </>
+  );
+}
+
+export default ModelPicker;

package/src/chat/api.js

@@ -0,0 +1,18 @@
+import apiClient from '../auth/apiClient';
+import { chatApiUrls } from './wire';
+
+export function createChatApi(overrides = {}, { apiBase = '/api/assistant/' } = {}) {
+  const urls = chatApiUrls(apiBase);
+  const data = (request) => request.then((response) => response.data);
+  const defaults = {
+    getCatalogue: () => data(apiClient.get(urls.catalogue)),
+    listChats: ({ archived = false, cursor } = {}) => data(apiClient.get(urls.chats, { params: { archived, ...(cursor ? { cursor } : {}) } })),
+    createChat: (payload = {}) => data(apiClient.post(urls.chats, payload)),
+    updateChat: (id, patch) => data(apiClient.patch(urls.chat(id), patch)),
+    deleteChat: (id) => data(apiClient.delete(urls.chat(id))),
+    listTurns: (id, { cursor } = {}) => data(apiClient.get(urls.turns(id), { params: cursor ? { cursor } : {} })),
+    getStatus: () => data(apiClient.get(urls.status)),
+  };
+  return { ...defaults, ...overrides };
+}
+export const defaultChatApi = createChatApi();

package/src/chat/useChatSocket.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { CHAT_CLOSE_CODES, defaultChatWsUrl } from './wire';
+
+const delays = [1000, 2000, 4000];
+export function useChatSocket(chatId, { wsUrl = defaultChatWsUrl, onFrame, onOpen, onClose } = {}) {
+  const socket = useRef(null); const callbacks = useRef({ onFrame, onOpen, onClose }); callbacks.current = { onFrame, onOpen, onClose };
+  // The URL builder is read at connect time only: an inline arrow from the caller must not reopen the socket on every render.
+  const urlBuilder = useRef(wsUrl); urlBuilder.current = wsUrl;
+  const [status, setStatus] = useState('idle'); const [generation, setGeneration] = useState(0);
+  const reconnect = useCallback(() => setGeneration((n) => n + 1), []);
+  useEffect(() => {
+    if (!chatId || typeof WebSocket === 'undefined') { setStatus('idle'); return undefined; }
+    let alive = true; let tries = 0; let timer; let wasOpened = false;
+    const connect = () => {
+      setStatus('connecting'); const ws = new WebSocket(typeof urlBuilder.current === 'function' ? urlBuilder.current(chatId) : urlBuilder.current); socket.current = ws;
+      ws.onopen = () => { if (!alive) return; tries = 0; setStatus('open'); callbacks.current.onOpen?.(chatId, wasOpened); wasOpened = true; };
+      ws.onmessage = (event) => { if (!alive) return; try { const frame = JSON.parse(event.data); if (frame && typeof frame === 'object') callbacks.current.onFrame?.(frame, chatId); } catch { /* Ignore malformed frames. */ } };
+      ws.onclose = (event) => {
+        if (!alive || socket.current !== ws) return; socket.current = null;
+        const reason = CHAT_CLOSE_CODES[event.code];
+        if (reason) { setStatus('closed'); callbacks.current.onClose?.({ reason, chatId, retrying: false }); return; }
+        if (tries < delays.length) { setStatus('connecting'); callbacks.current.onClose?.({ reason: 'connection_lost', chatId, retrying: true }); timer = setTimeout(connect, delays[tries++]); }
+        else { setStatus('closed'); callbacks.current.onClose?.({ reason: 'connection_lost', chatId, retrying: false }); }
+      };
+    };
+    connect();
+    return () => { alive = false; clearTimeout(timer); const ws = socket.current; socket.current = null; if (ws) { ws.onopen = ws.onmessage = ws.onclose = null; ws.close(); } };
+  }, [chatId, generation]);
+  const send = useCallback((frame) => { const ws = socket.current; if (!ws || ws.readyState !== WebSocket.OPEN) return false; ws.send(JSON.stringify(frame)); return true; }, []);
+  return { status, connected: status === 'open', send, reconnect };
+}
+export default useChatSocket;

package/src/chat/wire.js

@@ -0,0 +1,7 @@
+export const CHAT_CLOSE_CODES = { 4401: 'session_ended', 4403: 'access_lost', 4429: 'rate_limited' };
+export const CHAT_ERROR_CODES = ['quota_exceeded', 'provider_error', 'timeout', 'prompt_too_long', 'invalid_output', 'security_violation', 'not_configured', 'rate_limited', 'invalid_selection', 'archived', 'turn_active', 'invalid_frame'];
+export const chatApiUrls = (base = '/api/assistant/') => {
+  const root = base.replace(/\/$/, '') + '/';
+  return { catalogue: root + 'catalogue/', chats: root + 'chats/', chat: (id) => root + 'chats/' + encodeURIComponent(id) + '/', turns: (id) => root + 'chats/' + encodeURIComponent(id) + '/turns/', status: root + 'status/' };
+};
+export const defaultChatWsUrl = (chatId) => (window.location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + window.location.host + '/ws/assistant/chats/' + encodeURIComponent(chatId) + '/';

package/src/i18n/chatTranslations.ts

@@ -0,0 +1,55 @@
+export const chatTranslations = {
+  'Chat.newChat': { de: 'Neuer Chat', en: 'New chat', fr: 'Nouveau chat', sw: 'Mazungumzo mapya' },
+  'Chat.chats': { de: 'Chats', en: 'Chats', fr: 'Discussions', sw: 'Mazungumzo' },
+  'Chat.archived': { de: 'Archiviert', en: 'Archived', fr: 'Archivé', sw: 'Imewekwa kwenye kumbukumbu' },
+  'Chat.restore': { de: 'Wiederherstellen', en: 'Restore', fr: 'Restaurer', sw: 'Rejesha' },
+  'Chat.rename': { de: 'Umbenennen', en: 'Rename', fr: 'Renommer', sw: 'Badilisha jina' },
+  'Chat.archive': { de: 'Archivieren', en: 'Archive', fr: 'Archiver', sw: 'Weka kwenye kumbukumbu' },
+  'Chat.delete': { de: 'Löschen', en: 'Delete', fr: 'Supprimer', sw: 'Futa' },
+  'Chat.deleteConfirm': { de: 'Möchten Sie diesen Chat wirklich löschen?', en: 'Delete this chat?', fr: 'Supprimer cette discussion ?', sw: 'Futa mazungumzo haya?' },
+  'Chat.cancel': { de: 'Abbrechen', en: 'Cancel', fr: 'Annuler', sw: 'Ghairi' },
+  'Chat.save': { de: 'Speichern', en: 'Save', fr: 'Enregistrer', sw: 'Hifadhi' },
+  'Chat.actions': { de: 'Chat-Aktionen', en: 'Chat actions', fr: 'Actions de discussion', sw: 'Vitendo vya mazungumzo' },
+  'Chat.loadMore': { de: 'Mehr laden', en: 'Load more', fr: 'Charger plus', sw: 'Pakia zaidi' },
+  'Chat.loadOlder': { de: 'Ältere laden', en: 'Load older', fr: 'Charger les plus anciens', sw: 'Pakia za zamani' },
+  'Chat.send': { de: 'Senden', en: 'Send', fr: 'Envoyer', sw: 'Tuma' },
+  'Chat.stop': { de: 'Stoppen', en: 'Stop', fr: 'Arrêter', sw: 'Simamisha' },
+  'Chat.message': { de: 'Nachricht', en: 'Message', fr: 'Message', sw: 'Ujumbe' },
+  'Chat.typing': { de: 'Antwort wird erstellt …', en: 'Thinking…', fr: 'Réflexion…', sw: 'Inafikiria…' },
+  'Chat.retry': { de: 'Erneut versuchen', en: 'Retry', fr: 'Réessayer', sw: 'Jaribu tena' },
+  'Chat.interrupted': { de: 'Unterbrochen', en: 'Interrupted', fr: 'Interrompue', sw: 'Imekatizwa' },
+  'Chat.reconnecting': { de: 'Verbindung wird wiederhergestellt', en: 'Reconnecting', fr: 'Reconnexion', sw: 'Inaunganisha tena' },
+  'Chat.payPerUse': { de: 'Nutzungsabhängig', en: 'pay per use', fr: 'à l’usage', sw: 'lipa kwa matumizi' },
+  'Chat.chooseModel': { de: 'Modell wählen', en: 'Choose model', fr: 'Choisir un modèle', sw: 'Chagua modeli' },
+  'Chat.effort.low': { de: 'Niedrig', en: 'Low', fr: 'Faible', sw: 'Chini' },
+  'Chat.effort.medium': { de: 'Mittel', en: 'Medium', fr: 'Moyen', sw: 'Wastani' },
+  'Chat.effort.high': { de: 'Hoch', en: 'High', fr: 'Élevé', sw: 'Juu' },
+  'Chat.effort.max': { de: 'Maximum', en: 'Max', fr: 'Maximal', sw: 'Juu zaidi' },
+  'Chat.driver.claude_cli': { de: 'Claude Code (Abo)', en: 'Claude Code subscription', fr: 'Claude Code (abonnement)', sw: 'Claude Code (usajili)' },
+  'Chat.driver.anthropic_api': { de: 'Anthropic API', en: 'Anthropic API', fr: 'API Anthropic', sw: 'API ya Anthropic' },
+  'Chat.driver.openai_api': { de: 'OpenAI API', en: 'OpenAI API', fr: 'API OpenAI', sw: 'API ya OpenAI' },
+  'Chat.markdownTable': { de: 'Tabelleninhalt', en: 'Table content', fr: 'Contenu du tableau', sw: 'Yaliyomo kwenye jedwali' },
+  'Chat.markdownCode': { de: 'Codeblock', en: 'Code block', fr: 'Bloc de code', sw: 'Kizuizi cha msimbo' },
+  'Chat.changeModel': { de: 'Modell ändern', en: 'Change model', fr: 'Changer de modèle', sw: 'Badilisha modeli' },
+  'Chat.usageLimit': { de: 'Nutzungslimit für {{model}} erreicht. Wählen Sie ein anderes Modell oder versuchen Sie es später erneut.', en: 'Usage limit reached for {{model}}. Choose another model or try again later.', fr: 'Limite d’utilisation atteinte pour {{model}}. Choisissez un autre modèle ou réessayez plus tard.', sw: 'Kikomo cha matumizi kimefikiwa kwa {{model}}. Chagua modeli nyingine au jaribu tena baadaye.' },
+  'Chat.answerIncomplete': { de: 'Die Antwort konnte nicht abgeschlossen werden.', en: 'The answer could not be completed.', fr: 'La réponse n’a pas pu être terminée.', sw: 'Jibu halikuweza kukamilishwa.' },
+  'Chat.unavailable': { de: 'Chat ist nicht verfügbar', en: 'Chat is not available', fr: 'Le chat n’est pas disponible', sw: 'Mazungumzo hayapatikani' },
+  'Chat.noModel': { de: 'Auf diesem Server ist kein Sprachmodell konfiguriert.', en: 'No language model is configured on this server.', fr: 'Aucun modèle de langage n’est configuré sur ce serveur.', sw: 'Hakuna modeli ya lugha iliyosanidiwa kwenye seva hii.' },
+  'Chat.modelChanged': { de: 'Modell gewechselt: {{model}}', en: 'Model changed: {{model}}', fr: 'Modèle changé : {{model}}', sw: 'Modeli imebadilishwa: {{model}}' },
+  'Chat.connectionLost': { de: 'Verbindung verloren', en: 'Connection lost', fr: 'Connexion perdue', sw: 'Muunganisho umepotea' },
+  'Chat.reconnect': { de: 'Erneut verbinden', en: 'Reconnect', fr: 'Se reconnecter', sw: 'Unganisha tena' },
+  'Chat.sessionEnded': { de: 'Ihre Sitzung ist beendet. Bitte melden Sie sich erneut an.', en: 'Your session has ended. Please sign in again.', fr: 'Votre session a pris fin. Veuillez vous reconnecter.', sw: 'Kipindi chako kimeisha. Tafadhali ingia tena.' },
+  'Chat.accessLost': { de: 'Sie haben keinen Zugriff mehr auf diesen Chat.', en: 'You no longer have access to this chat.', fr: 'Vous n’avez plus accès à cette discussion.', sw: 'Huna tena ufikiaji wa mazungumzo haya.' },
+  'Chat.rateLimited': { de: 'Zu viele Anfragen. Bitte einen Moment warten.', en: 'Too many requests. Please wait a moment.', fr: 'Trop de requêtes. Veuillez patienter un instant.', sw: 'Maombi mengi mno. Tafadhali subiri kidogo.' },
+  'Chat.untitled': { de: 'Neuer Chat', en: 'New chat', fr: 'Nouvelle discussion', sw: 'Mazungumzo mapya' },
+  'Chat.emptyTitle': { de: 'Wie kann ich helfen?', en: 'How can I help?', fr: 'Comment puis-je aider ?', sw: 'Naweza kusaidiaje?' },
+  'Chat.selectChat': { de: 'Wählen Sie einen Chat oder starten Sie einen neuen.', en: 'Select a chat or start a new one.', fr: 'Sélectionnez une discussion ou commencez-en une nouvelle.', sw: 'Chagua mazungumzo au anza mapya.' },
+  'Chat.archivedReadOnly': { de: 'Archivierter Chat. Stellen Sie ihn wieder her, um weiterzuschreiben.', en: 'Archived chat. Restore it to continue.', fr: 'Discussion archivée. Restaurez-la pour continuer.', sw: 'Mazungumzo yaliyowekwa kwenye kumbukumbu. Yarejeshe ili kuendelea.' },
+  'Chat.loadError': { de: 'Chats konnten nicht geladen werden.', en: 'Chats could not be loaded.', fr: 'Impossible de charger les discussions.', sw: 'Mazungumzo hayakuweza kupakiwa.' },
+  'Chat.actionError': { de: 'Aktion fehlgeschlagen.', en: 'Action failed.', fr: 'Action impossible.', sw: 'Kitendo kimeshindwa.' },
+  'Chat.sources': { de: 'Quellen', en: 'Sources', fr: 'Sources', sw: 'Vyanzo' },
+  'Chat.model': { de: 'Modell', en: 'Model', fr: 'Modèle', sw: 'Modeli' },
+  'Chat.effortLabel': { de: 'Aufwand', en: 'Effort', fr: 'Effort', sw: 'Juhudi' },
+  'Chat.renameLabel': { de: 'Chat-Titel', en: 'Chat title', fr: 'Titre de la discussion', sw: 'Kichwa cha mazungumzo' },
+  'Chat.thread': { de: 'Unterhaltung', en: 'Conversation', fr: 'Conversation', sw: 'Mazungumzo' },
+};

package/src/i18n/uiCoreTranslations.js

@@ -1,5 +1,6 @@
 import { authTranslations } from './authTranslations';
 import { chartsTranslations } from './chartsTranslations';
+import { chatTranslations } from './chatTranslations';
 import { messagingTranslations } from './messagingTranslations';
 import { notificationsTranslations } from './notificationsTranslations';
 import { onboardingTranslations } from './onboardingTranslations';
@@ -9,6 +10,7 @@ import { userMenuTranslations } from './userMenuTranslations';
 export const uiCoreTranslations = {
   ...authTranslations,
   ...chartsTranslations,
+  ...chatTranslations,
   ...messagingTranslations,
   ...notificationsTranslations,
   ...onboardingTranslations,

package/src/index.js

@@ -124,6 +124,16 @@ export { ReactionBar } from './messaging/ReactionBar';
 export { PollCard } from './messaging/PollCard';
 export { MessagingScopeConfig } from './messaging/MessagingScopeConfig';
 
+// --- Shared AI chat ---
+export { ChatWorkspace } from './chat/ChatWorkspace';
+export { ChatList } from './chat/ChatList';
+export { ChatThread } from './chat/ChatThread';
+export { ChatComposer } from './chat/ChatComposer';
+export { ModelPicker } from './chat/ModelPicker';
+export { default as MarkdownReply } from './chat/MarkdownReply';
+export { useChatSocket } from './chat/useChatSocket';
+export { createChatApi, defaultChatApi } from './chat/api';
+
 // --- 9. Onboarding ---
 export * from './onboarding/api';
 export { selectActiveSteps } from './onboarding/stepSelection';
@@ -144,4 +154,5 @@ export { notificationsTranslations } from './i18n/notificationsTranslations';
 export { onboardingTranslations } from './i18n/onboardingTranslations';
 export { chartsTranslations } from './i18n/chartsTranslations';
 export { messagingTranslations } from './i18n/messagingTranslations';
+export { chatTranslations } from './i18n/chatTranslations';
 export { createUiCoreTranslations, uiCoreTranslations } from './i18n/uiCoreTranslations';

package/src/theme/kitSxRegistry.js

@@ -97,6 +97,8 @@ import { LOGIN_PAGE_ALERT_SX } from '../pages/LoginPage';
 import { SIGN_UP_PAGE_ALERT_SX } from '../pages/SignUpPage';
 import { SIGNUP_CONFIRM_PAGE_ALERT_SX } from '../pages/SignupConfirmPage';
 import { REAUTH_MODAL_ALERT_SX, REAUTH_MODAL_TEXT_FIELD_SX } from '../auth/ReauthModal';
+import { CHAT_LIST_ARCHIVED_ACTION_SX, CHAT_LIST_ROW_ACTION_SX } from '../chat/ChatList';
+import { CHAT_THREAD_NOTICE_SX, CHAT_THREAD_TOOL_CHIP_SX } from '../chat/ChatThread';
 
 const SX_EXPORTS = {
   ACCESS_CODE_ACTION_SX,
@@ -168,6 +170,10 @@ const SX_EXPORTS = {
   SUPPORT_RECOVERY_AGENT_PAPER_SX,
   SUPPORT_RECOVERY_ALERT_SX,
   THREAD_DAY_SEPARATOR_SX,
+  CHAT_LIST_ARCHIVED_ACTION_SX,
+  CHAT_LIST_ROW_ACTION_SX,
+  CHAT_THREAD_NOTICE_SX,
+  CHAT_THREAD_TOOL_CHIP_SX,
   USER_INVITE_ACTION_SX,
   USER_INVITE_ALERT_SX,
   USER_LIST_ACTION_SX,
@@ -272,4 +278,8 @@ export const KIT_COMPONENT_SX_REGISTRY = [
   entry('SignupConfirmPage.alert', 'MuiAlert', SIGNUP_CONFIRM_PAGE_ALERT_SX),
   entry('ReauthModal.alert', 'MuiAlert', REAUTH_MODAL_ALERT_SX),
   entry('ReauthModal.field', 'MuiTextField', REAUTH_MODAL_TEXT_FIELD_SX),
+  entry('ChatList.rowAction', 'MuiIconButton', CHAT_LIST_ROW_ACTION_SX),
+  entry('ChatList.archivedAction', 'MuiButton', CHAT_LIST_ARCHIVED_ACTION_SX),
+  entry('ChatThread.toolChip', 'MuiChip', CHAT_THREAD_TOOL_CHIP_SX),
+  entry('ChatThread.notice', 'MuiAlert', CHAT_THREAD_NOTICE_SX),
 ];

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);
+  });
+});