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

package/dist/theme/kitSxRegistry.js

@@ -33,6 +33,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,
     ACCESS_CODE_ALERT_SX,
@@ -103,6 +105,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,
@@ -202,4 +208,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/dist/theme/themeCompleteness.js

@@ -22,10 +22,7 @@ const TYPOGRAPHY_SURFACES = TYPOGRAPHY_VARIANTS.flatMap((variant) => ['fontSize'
 const componentPath = (component, path) => pathSurface(`components.${component}.${path}`);
 const componentKeyLeaf = (component, path, key, leaf) => keyedSurface(`components.${component}.${path}.${key}.${leaf}`, (theme) => { var _a, _b; return (_b = (_a = getPath(theme, `components.${component}.${path}`)) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b[leaf]; });
 const COMPONENT_SURFACES = [
-    keyedSurface('components.MuiCssBaseline.reduced-motion.transitionDuration', (theme) => {
-        var _a, _b, _c, _d, _e;
-        return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c['@media (prefers-reduced-motion: reduce)']) === null || _d === void 0 ? void 0 : _d['*, *::before, *::after']) === null || _e === void 0 ? void 0 : _e.transitionDuration;
-    }),
+    keyedSurface('components.MuiCssBaseline.reduced-motion.transitionDuration', (theme) => { var _a, _b, _c, _d, _e; return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiCssBaseline) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c['@media (prefers-reduced-motion: reduce)']) === null || _d === void 0 ? void 0 : _d['*, *::before, *::after']) === null || _e === void 0 ? void 0 : _e.transitionDuration; }),
     componentPath('MuiButton', 'defaultProps.disableElevation'),
     componentPath('MuiButton', 'styleOverrides.root.minHeight'),
     componentPath('MuiButton', 'styleOverrides.root.borderRadius'),
@@ -69,10 +66,7 @@ const COMPONENT_SURFACES = [
     componentPath('MuiChip', 'styleOverrides.root.height'),
     componentPath('MuiChip', 'styleOverrides.root.borderRadius'),
     componentPath('MuiChip', 'styleOverrides.root.fontSize'),
-    keyedSurface('components.MuiChip.styleOverrides.root.coarse-hit-area.inset', (theme) => {
-        var _a, _b, _c, _d, _e, _f;
-        return (_f = (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiChip) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d['@media (any-pointer: coarse)']) === null || _e === void 0 ? void 0 : _e['&::after']) === null || _f === void 0 ? void 0 : _f.inset;
-    }),
+    keyedSurface('components.MuiChip.styleOverrides.root.coarse-hit-area.inset', (theme) => { var _a, _b, _c, _d, _e, _f; return (_f = (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiChip) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d['@media (any-pointer: coarse)']) === null || _e === void 0 ? void 0 : _e['&::after']) === null || _f === void 0 ? void 0 : _f.inset; }),
     componentPath('MuiBottomNavigation', 'styleOverrides.root.boxShadow'),
     componentPath('MuiBottomNavigation', 'styleOverrides.root.backgroundColor'),
     componentPath('MuiBottomNavigationAction', 'styleOverrides.root.padding'),
@@ -95,10 +89,7 @@ const COMPONENT_SURFACES = [
     componentKeyLeaf('MuiTextField', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
     componentPath('MuiOutlinedInput', 'styleOverrides.root.minHeight'),
     componentPath('MuiOutlinedInput', 'styleOverrides.root.borderRadius'),
-    keyedSurface('components.MuiOutlinedInput.variants.non-multiline-height', (theme) => {
-        var _a, _b, _c, _d, _e;
-        return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiOutlinedInput) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.find(({ props }) => (props === null || props === void 0 ? void 0 : props.multiline) === false)) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.height;
-    }),
+    keyedSurface('components.MuiOutlinedInput.variants.non-multiline-height', (theme) => { var _a, _b, _c, _d, _e; return (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiOutlinedInput) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.find(({ props }) => (props === null || props === void 0 ? void 0 : props.multiline) === false)) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.height; }),
     componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minHeight'),
     componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '@media (any-pointer: coarse)', 'minWidth'),
     componentKeyLeaf('MuiOutlinedInput', 'styleOverrides.root', '& .MuiOutlinedInput-notchedOutline', 'borderColor'),

package/dist/utils/auth-errors.js

@@ -1,8 +1,9 @@
 // src/utils/auth-errors.js
 export function extractErrorInfo(error) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const status = (_b = (_a = error.response) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : null;
-    const data = (_d = (_c = error.response) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : null;
+    var _a, _b;
+    var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const status = (_c = (_a = error.response) === null || _a === void 0 ? void 0 : _a.status) !== null && _c !== void 0 ? _c : null;
+    const data = (_d = (_b = error.response) === null || _b === void 0 ? void 0 : _b.data) !== null && _d !== void 0 ? _d : null;
     if (!data) {
         return {
             status,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "3.13.2",
+  "version": "3.14.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "sideEffects": [
@@ -21,7 +21,9 @@
   },
   "private": false,
   "dependencies": {
-    "@fontsource/dm-sans": "^5.2.8"
+    "@fontsource/dm-sans": "^5.3.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
@@ -44,14 +46,14 @@
   },
   "devDependencies": {
     "@mui/icons-material": "^7.3.11",
-    "@mui/x-charts": "^8.0.0",
-    "@testing-library/react": "^16.3.2",
-    "@vitejs/plugin-react": "^6.0.5",
-    "i18next": "^26.2.0",
-    "jsdom": "^29.1.1",
-    "react-i18next": "^17.0.8",
-    "typescript": "^6.0.3",
-    "vite": "^8.2.0",
-    "vitest": "^4.1.10"
+    "@mui/x-charts": "^8.29.3",
+    "@testing-library/react": "^16.3.3",
+    "@vitejs/plugin-react": "^6.1.2",
+    "i18next": "^26.4.2",
+    "jsdom": "^30.1.2",
+    "react-i18next": "^17.0.16",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.3"
   }
 }

package/src/chat/ChatComposer.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button, Stack, TextField } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Message input. Send is disabled while a turn runs, for an archived chat and while the connection is down;
+ * Stop replaces it during a turn. Enter sends, Shift+Enter inserts a line break.
+ */
+export function ChatComposer({ value = '', onChange, onSend, onStop, running = false, archived = false, connected = true, sx }) {
+  const { t } = useTranslation();
+  const blocked = archived || !connected;
+  const canSend = !running && !blocked && value.trim().length > 0;
+  const submit = () => { if (canSend) onSend?.(); };
+  return (
+    <Stack direction="row" alignItems="flex-end" gap={1} sx={{ p: { xs: 1, md: 2 }, borderTop: 1, borderColor: 'divider', ...sx }}>
+      <TextField
+        multiline
+        maxRows={6}
+        fullWidth
+        size="small"
+        value={value}
+        disabled={blocked}
+        placeholder={t('Chat.message')}
+        slotProps={{ htmlInput: { 'aria-label': t('Chat.message') } }}
+        onChange={(event) => onChange?.(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent?.isComposing) { event.preventDefault(); submit(); }
+        }}
+      />
+      {running ? <Button variant="outlined" onClick={onStop}>{t('Chat.stop')}</Button> : null}
+      <Button variant="contained" onClick={submit} disabled={!canSend}>{t('Chat.send')}</Button>
+    </Stack>
+  );
+}
+
+export default ChatComposer;

package/src/chat/ChatList.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Badge, Box, Button, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, List, ListItem, ListItemButton, ListItemText, Menu, MenuItem, Stack, TextField } from '@mui/material';
+import { MoreVert } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+export const CHAT_LIST_ROW_ACTION_SX = { width: 40, height: 40 };
+export const CHAT_LIST_ARCHIVED_ACTION_SX = { justifyContent: 'space-between', px: 2 };
+
+/**
+ * The chat list: active chats, then an "Archived" entry that expands the archived ones (read-only, restorable).
+ * Rename, Archive/Restore and Delete sit in each row's overflow menu; Delete asks for confirmation first.
+ */
+export function ChatList({ chats = [], archivedChats = [], activeId, hasMore = false, onSelect, onNew, onRename, onArchive, onRestore, onDelete, onLoadMore, sx }) {
+  const { t } = useTranslation();
+  const [menu, setMenu] = useState(null); // { anchor, chat, archived }
+  const [dialog, setDialog] = useState(null); // { kind: 'rename' | 'delete', chat }
+  const [title, setTitle] = useState('');
+  const [showArchived, setShowArchived] = useState(false);
+
+  const openMenu = (event, chat, archived) => { event.stopPropagation(); setMenu({ anchor: event.currentTarget, chat, archived }); };
+  const closeMenu = () => setMenu(null);
+  const startRename = () => { setTitle(menu.chat.title || ''); setDialog({ kind: 'rename', chat: menu.chat }); closeMenu(); };
+  const startDelete = () => { setDialog({ kind: 'delete', chat: menu.chat }); closeMenu(); };
+  const toggleArchive = () => { (menu.archived ? onRestore : onArchive)?.(menu.chat); closeMenu(); };
+  const closeDialog = () => setDialog(null);
+  const confirmRename = () => { onRename?.(dialog.chat, title.trim()); closeDialog(); };
+  const confirmDelete = () => { onDelete?.(dialog.chat); closeDialog(); };
+
+  const row = (chat, archived) => (
+    <ListItem
+      key={chat.id}
+      disablePadding
+      secondaryAction={<IconButton edge="end" aria-label={t('Chat.actions')} onClick={(event) => openMenu(event, chat, archived)} sx={CHAT_LIST_ROW_ACTION_SX}><MoreVert fontSize="small" /></IconButton>}
+    >
+      <ListItemButton selected={chat.id === activeId} onClick={() => onSelect?.(chat)} sx={{ minHeight: 48, pr: 6 }}>
+        <ListItemText primary={chat.title || t('Chat.untitled')} slotProps={{ primary: { noWrap: true } }} />
+      </ListItemButton>
+    </ListItem>
+  );
+
+  return (
+    <Stack sx={{ minWidth: 0, height: '100%', overflowY: 'auto', ...sx }} component="nav" aria-label={t('Chat.chats')}>
+      <Box sx={{ p: 1.5 }}>
+        <Button fullWidth variant="contained" onClick={onNew}>{t('Chat.newChat')}</Button>
+      </Box>
+      <List disablePadding>{chats.map((chat) => row(chat, false))}</List>
+      {hasMore ? <Button onClick={onLoadMore}>{t('Chat.loadMore')}</Button> : null}
+      {archivedChats.length > 0 ? (
+        <>
+          <Button color="inherit" onClick={() => setShowArchived((value) => !value)} aria-expanded={showArchived} sx={CHAT_LIST_ARCHIVED_ACTION_SX}>
+            {t('Chat.archived')}
+            <Badge color="default" badgeContent={archivedChats.length} sx={{ mr: 1.5 }} />
+          </Button>
+          <Collapse in={showArchived} unmountOnExit><List disablePadding>{archivedChats.map((chat) => row(chat, true))}</List></Collapse>
+        </>
+      ) : null}
+
+      <Menu anchorEl={menu?.anchor} open={Boolean(menu)} onClose={closeMenu}>
+        <MenuItem onClick={startRename}>{t('Chat.rename')}</MenuItem>
+        <MenuItem onClick={toggleArchive}>{menu?.archived ? t('Chat.restore') : t('Chat.archive')}</MenuItem>
+        <MenuItem onClick={startDelete}>{t('Chat.delete')}</MenuItem>
+      </Menu>
+
+      <Dialog open={dialog?.kind === 'rename'} onClose={closeDialog} fullWidth maxWidth="xs">
+        <DialogTitle>{t('Chat.rename')}</DialogTitle>
+        <DialogContent>
+          <TextField autoFocus fullWidth margin="dense" value={title} onChange={(event) => setTitle(event.target.value)} slotProps={{ htmlInput: { 'aria-label': t('Chat.renameLabel'), maxLength: 120 } }} onKeyDown={(event) => { if (event.key === 'Enter' && title.trim()) confirmRename(); }} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeDialog}>{t('Chat.cancel')}</Button>
+          <Button variant="contained" disabled={!title.trim()} onClick={confirmRename}>{t('Chat.save')}</Button>
+        </DialogActions>
+      </Dialog>
+
+      <Dialog open={dialog?.kind === 'delete'} onClose={closeDialog} fullWidth maxWidth="xs">
+        <DialogTitle>{t('Chat.delete')}</DialogTitle>
+        <DialogContent><DialogContentText>{t('Chat.deleteConfirm')}</DialogContentText></DialogContent>
+        <DialogActions>
+          <Button onClick={closeDialog}>{t('Chat.cancel')}</Button>
+          <Button color="error" variant="contained" onClick={confirmDelete}>{t('Chat.delete')}</Button>
+        </DialogActions>
+      </Dialog>
+    </Stack>
+  );
+}
+
+export default ChatList;

package/src/chat/ChatThread.jsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import { Alert, Box, Button, Chip, Stack, Tooltip, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import MarkdownReply from './MarkdownReply';
+
+export const CHAT_THREAD_TOOL_CHIP_SX = { alignSelf: 'flex-start' };
+export const CHAT_THREAD_NOTICE_SX = { mb: 2 };
+
+const selectionLine = (turn, t) => [turn.model, turn.effort && t(`Chat.effort.${turn.effort}`)].filter(Boolean).join(' · ');
+const sameSelection = (a, b) => a.driver === b.driver && a.model === b.model && a.effort === b.effort;
+
+function SourceChips({ sources }) {
+  const { t } = useTranslation();
+  if (!sources?.length) return null;
+  return (
+    <Stack direction="row" flexWrap="wrap" gap={0.75} role="list" aria-label={t('Chat.sources')}>
+      {sources.map((source, index) => (
+        <Tooltip key={`${source.label}-${index}`} title={source.reference || ''} describeChild>
+          <Chip role="listitem" size="small" variant="outlined" label={source.label} />
+        </Tooltip>
+      ))}
+    </Stack>
+  );
+}
+
+function Answer({ turn, tool, onRetry }) {
+  const { t } = useTranslation();
+  const generating = turn.state === 'generating';
+  const failed = ['failed', 'cancelled'].includes(turn.state) && turn.error_code;
+  return (
+    <Stack spacing={1} aria-busy={generating}>
+      {turn.assistant_text ? <MarkdownReply text={turn.assistant_text} /> : null}
+      {generating && !turn.assistant_text && !tool ? <Typography variant="body2" color="text.secondary">{t('Chat.typing')}</Typography> : null}
+      {generating && tool ? <Chip size="small" color="primary" variant="outlined" label={tool.label} sx={CHAT_THREAD_TOOL_CHIP_SX} /> : null}
+      <SourceChips sources={turn.sources} />
+      {!generating && selectionLine(turn, t) ? <Typography variant="caption" color="text.secondary">{selectionLine(turn, t)}</Typography> : null}
+      {turn.state === 'interrupted' ? (
+        <Stack direction="row" alignItems="center" gap={1}>
+          <Chip size="small" color="warning" label={t('Chat.interrupted')} />
+          {onRetry ? <Button size="small" onClick={() => onRetry(turn)}>{t('Chat.retry')}</Button> : null}
+        </Stack>
+      ) : null}
+      {failed ? (
+        <Alert severity="error" action={onRetry ? <Button color="inherit" size="small" onClick={() => onRetry(turn)}>{t('Chat.retry')}</Button> : null}>
+          {t('Chat.answerIncomplete')}
+        </Alert>
+      ) : null}
+    </Stack>
+  );
+}
+
+/**
+ * The turns of one chat. The streaming answer is simply the last turn in state `generating`; the caller keeps its text
+ * up to date. `notice` is a connection or limit message shown under the last turn. `readOnly` (an archived chat) hides Retry.
+ */
+export function ChatThread({ turns = [], tool = null, notice = null, hasOlder = false, olderBusy = false, onLoadOlder, onRetry, readOnly = false, sx }) {
+  const { t } = useTranslation();
+  const end = useRef(null);
+  const scroller = useRef(null);
+  const heightBeforeOlder = useRef(null);
+  const pinned = useRef(true); // follow the stream only while the reader is at the bottom
+  const last = turns[turns.length - 1];
+  // Follow the stream, but only when new content arrives at the end (not when older turns are prepended).
+  useEffect(() => { if (pinned.current) end.current?.scrollIntoView?.({ block: 'end' }); }, [last?.id, last?.assistant_text, last?.state]);
+
+  // Keep the reader's position when older turns are prepended.
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (el && heightBeforeOlder.current !== null) el.scrollTop += el.scrollHeight - heightBeforeOlder.current;
+    heightBeforeOlder.current = null;
+  }, [turns[0]?.id]);
+  const loadingOlder = useRef(false); // one request at a time, also across rapid scroll events
+  const loadOlder = async () => {
+    if (loadingOlder.current) return;
+    loadingOlder.current = true;
+    heightBeforeOlder.current = scroller.current?.scrollHeight ?? null;
+    try { await onLoadOlder?.(); } finally { loadingOlder.current = false; }
+  };
+
+  return (
+    <Box ref={scroller} onScroll={(event) => {
+      const el = event.currentTarget;
+      pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+      if (hasOlder && !olderBusy && el.scrollTop <= 40) loadOlder();
+    }} role="log" aria-live="polite" aria-label={t('Chat.thread')} sx={{ minHeight: 0, flex: 1, overflowY: 'auto', p: { xs: 1.5, md: 2.5 }, ...sx }}>
+      {hasOlder ? (
+        <Box sx={{ textAlign: 'center', mb: 2 }}>
+          <Button size="small" onClick={loadOlder} disabled={olderBusy}>{t('Chat.loadOlder')}</Button>
+        </Box>
+      ) : null}
+      {turns.length === 0 ? (
+        <Typography variant="h6" color="text.secondary" align="center" sx={{ mt: 6 }}>{t('Chat.emptyTitle')}</Typography>
+      ) : null}
+      {turns.map((turn, index) => {
+        const previous = turns[index - 1];
+        return (
+          <Box key={turn.id ?? index} sx={{ mb: 3 }}>
+            {previous && !sameSelection(previous, turn) ? (
+              <Stack direction="row" alignItems="center" gap={1} sx={{ mb: 2, color: 'text.secondary' }} role="separator">
+                <Box sx={{ flex: 1, borderTop: 1, borderColor: 'divider' }} />
+                <Typography variant="caption">{t('Chat.modelChanged', { model: selectionLine(turn, t) })}</Typography>
+                <Box sx={{ flex: 1, borderTop: 1, borderColor: 'divider' }} />
+              </Stack>
+            ) : null}
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1.5 }}>
+              <Typography sx={{ maxWidth: '85%', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', bgcolor: 'action.hover', borderRadius: 2, px: 1.5, py: 1 }}>
+                {turn.user_text}
+              </Typography>
+            </Box>
+            <Answer turn={turn} tool={index === turns.length - 1 ? tool : null} onRetry={readOnly ? undefined : onRetry} />
+          </Box>
+        );
+      })}
+      {notice ? (
+        <Alert
+          severity={notice.severity || 'warning'}
+          sx={CHAT_THREAD_NOTICE_SX}
+          action={notice.action ? <Button color="inherit" size="small" onClick={notice.action.onClick}>{notice.action.label}</Button> : null}
+        >
+          {notice.text}
+        </Alert>
+      ) : null}
+      <div ref={end} />
+    </Box>
+  );
+}
+
+export default ChatThread;

package/src/chat/ChatWorkspace.jsx

@@ -0,0 +1,244 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Alert, Box, Button, Chip, Drawer, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { createChatApi } from './api';
+import { useChatSocket } from './useChatSocket';
+import ChatList from './ChatList';
+import ChatThread from './ChatThread';
+import ChatComposer from './ChatComposer';
+import ModelPicker from './ModelPicker';
+
+const PENDING_ID = 'pending';
+const bySeq = (a, b) => (a.seq ?? Number.MAX_SAFE_INTEGER) - (b.seq ?? Number.MAX_SAFE_INTEGER);
+const chronological = (turns) => [...(turns || [])].sort(bySeq);
+const isGenerating = (turn) => turn.state === 'generating';
+
+/** Replaces the turn that was generating (or has the same id) with the final one; appends it when neither exists. */
+const settleTurn = (turns, final) => {
+  const index = turns.findIndex((turn) => turn.id === final.id || isGenerating(turn));
+  if (index < 0) return chronological([...turns, final]);
+  return [...turns.slice(0, index), final, ...turns.slice(index + 1)];
+};
+const failGenerating = (turns, code) => turns.map((turn) => (isGenerating(turn)
+  ? { ...turn, state: 'failed', error_code: code === 'quota_exceeded' ? null : code }
+  : turn));
+const appendDelta = (turns, text) => {
+  const index = turns.findLastIndex(isGenerating);
+  if (index < 0) return turns;
+  return turns.map((turn, i) => (i === index ? { ...turn, assistant_text: `${turn.assistant_text || ''}${text}` } : turn));
+};
+
+/**
+ * The complete chat surface: chat list, thread, composer and model picker for one user.
+ *
+ * Props: `apiBase` and `wsUrl` (where the app mounted the chat routes), `api` (partial overrides of the REST
+ * calls; every function not given keeps its default), `scope` (passed when creating a chat), `sx`.
+ */
+export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx }) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const narrow = useMediaQuery(theme.breakpoints.down('md'));
+  const api = useMemo(() => createChatApi(apiOverrides, { apiBase }), [apiOverrides, apiBase]);
+
+  const [status, setStatus] = useState('loading'); // loading | available | not_configured | error
+  const [catalogue, setCatalogue] = useState({ entries: [], default: null });
+  const [chats, setChats] = useState([]);
+  const [archived, setArchived] = useState([]);
+  const [nextChats, setNextChats] = useState(null);
+  const [chat, setChat] = useState(null);
+  const [turns, setTurns] = useState([]);
+  const [olderCursor, setOlderCursor] = useState(null);
+  const [olderBusy, setOlderBusy] = useState(false);
+  const [tool, setTool] = useState(null);
+  const [draft, setDraft] = useState('');
+  const [problem, setProblem] = useState(null); // an error code or close reason, shown as a notice
+  const [listOpen, setListOpen] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [openedOnce, setOpenedOnce] = useState(false); // distinguishes a reconnect from the first connect
+
+  const running = turns.some(isGenerating);
+  const isArchived = Boolean(chat?.archived_at);
+  const selection = chat?.selection || catalogue.default;
+  const activeEntry = catalogue.entries.find((entry) => entry.id === selection?.entry);
+
+  const loadLists = useCallback(async () => {
+    const [active, old] = await Promise.all([api.listChats(), api.listChats({ archived: true })]);
+    setChats(active.results || []);
+    setNextChats(active.next || null);
+    setArchived(old.results || []);
+  }, [api]);
+
+  useEffect(() => {
+    let live = true;
+    api.getStatus()
+      .then(async (state) => {
+        if (state.status !== 'available') { if (live) setStatus(state.status); return; }
+        const [entries] = await Promise.all([api.getCatalogue(), loadLists()]);
+        if (live) { setStatus(state.status); setCatalogue(entries); }
+      })
+      .catch(() => { if (live) setStatus('error'); });
+    return () => { live = false; };
+  }, [api, loadLists]);
+
+  useEffect(() => {
+    setTurns([]); setOlderCursor(null); setTool(null); setProblem(null); setDraft(''); setOpenedOnce(false);
+    if (!chat?.id) return undefined;
+    let live = true;
+    api.listTurns(chat.id)
+      .then((page) => { if (live) { setTurns(chronological(page.results)); setOlderCursor(page.next || null); } })
+      .catch(() => { if (live) setProblem('load_error'); });
+    return () => { live = false; };
+  }, [api, chat?.id]);
+
+  const onFrame = useCallback((frame, chatId) => {
+    if (chatId !== chat?.id) return;
+    if (frame.type === 'history') setTurns(chronological(frame.turns));
+    else if (frame.type === 'delta') setTurns((current) => appendDelta(current, frame.text || ''));
+    else if (frame.type === 'tool') setTool(frame.phase === 'start' ? { label: frame.label, name: frame.name } : null);
+    else if (frame.type === 'turn' && frame.turn) {
+      setTool(null);
+      setTurns((current) => settleTurn(current, frame.turn));
+      if (frame.turn.error_code === 'quota_exceeded') setProblem('quota_exceeded');
+    } else if (frame.type === 'error') {
+      setTool(null);
+      setTurns((current) => failGenerating(current, frame.code));
+      setProblem(frame.code);
+    }
+  }, [chat?.id]);
+  const onOpen = useCallback(() => { setOpenedOnce(true); setProblem((current) => (current === 'connection_lost' ? null : current)); }, []);
+  const onClose = useCallback(({ reason, retrying }) => { if (!retrying) setProblem(reason); }, []);
+  const socket = useChatSocket(chat?.id, { wsUrl, onFrame, onOpen, onClose });
+
+  const guarded = (action) => async (...args) => {
+    try { return await action(...args); } catch { setProblem('action_error'); return null; }
+  };
+
+  const selectChat = (next) => { setChat(next); setListOpen(false); };
+  const createChat = guarded(async () => {
+    const created = await api.createChat(scope ? { scope } : {});
+    setChats((current) => [created, ...current]);
+    selectChat(created);
+  });
+  const updateChat = guarded(async (target, patch) => {
+    const updated = await api.updateChat(target.id, patch);
+    if (chat?.id === target.id) setChat(updated);
+    await loadLists();
+  });
+  const deleteChat = guarded(async (target) => {
+    await api.deleteChat(target.id);
+    setChats((current) => current.filter((item) => item.id !== target.id));
+    setArchived((current) => current.filter((item) => item.id !== target.id));
+    if (chat?.id === target.id) setChat(null);
+  });
+  const loadMoreChats = guarded(async () => {
+    const page = await api.listChats({ cursor: nextChats });
+    setChats((current) => [...current, ...(page.results || [])]);
+    setNextChats(page.next || null);
+  });
+  const loadOlder = guarded(async () => {
+    setOlderBusy(true);
+    try {
+      const page = await api.listTurns(chat.id, { cursor: olderCursor });
+      setTurns((current) => chronological([...(page.results || []), ...current]));
+      setOlderCursor(page.next || null);
+    } finally { setOlderBusy(false); }
+  });
+
+  const startTurn = (message) => {
+    if (!socket.send({ type: 'send', message })) return false;
+    setProblem(null);
+    setTurns((current) => [...current, {
+      id: PENDING_ID, user_text: message, assistant_text: '', state: 'generating', sources: [],
+      driver: activeEntry?.driver, model: activeEntry?.label || activeEntry?.model, effort: selection?.effort,
+    }]);
+    return true;
+  };
+  const send = () => { if (startTurn(draft)) setDraft(''); };
+  const retry = (turn) => {
+    if (!socket.connected) return;
+    setTurns((current) => current.filter((item) => item.id !== turn.id));
+    startTurn(turn.user_text);
+  };
+
+  const noticeFor = () => {
+    const texts = {
+      session_ended: 'Chat.sessionEnded', access_lost: 'Chat.accessLost', rate_limited: 'Chat.rateLimited',
+      load_error: 'Chat.loadError', action_error: 'Chat.actionError',
+    };
+    if (problem === 'quota_exceeded') {
+      return { text: t('Chat.usageLimit', { model: activeEntry?.label || activeEntry?.model || '' }), action: { label: t('Chat.changeModel'), onClick: () => setPickerOpen(true) } };
+    }
+    if (problem === 'connection_lost') return { text: t('Chat.connectionLost'), action: { label: t('Chat.reconnect'), onClick: socket.reconnect } };
+    if (problem === 'not_configured') return null;
+    if (texts[problem]) return { text: t(texts[problem]), severity: 'warning' };
+    return null;
+  };
+
+  const list = (
+    <ChatList
+      chats={chats}
+      archivedChats={archived}
+      activeId={chat?.id}
+      hasMore={Boolean(nextChats)}
+      onSelect={selectChat}
+      onNew={createChat}
+      onRename={(target, title) => updateChat(target, { title })}
+      onArchive={(target) => updateChat(target, { archived: true })}
+      onRestore={(target) => updateChat(target, { archived: false })}
+      onDelete={deleteChat}
+      onLoadMore={loadMoreChats}
+    />
+  );
+
+  const unavailable = status === 'not_configured' || problem === 'not_configured';
+  if (status === 'loading') return <Box sx={sx} aria-busy="true" />;
+  if (status === 'error') return <Box sx={sx}><Alert severity="error">{t('Chat.loadError')}</Alert></Box>;
+  if (unavailable) {
+    return (
+      <Stack alignItems="center" justifyContent="center" spacing={1} sx={{ minHeight: 320, p: 3, textAlign: 'center', ...sx }}>
+        <Typography variant="h6">{t('Chat.unavailable')}</Typography>
+        <Typography color="text.secondary">{t('Chat.noModel')}</Typography>
+      </Stack>
+    );
+  }
+
+  return (
+    <Box sx={{ display: 'grid', gridTemplateColumns: narrow ? 'minmax(0, 1fr)' : 'minmax(240px, 320px) minmax(0, 1fr)', height: '100%', minHeight: 480, border: 1, borderColor: 'divider', borderRadius: 1, overflow: 'hidden', bgcolor: 'background.paper', ...sx }}>
+      {narrow ? null : <Box sx={{ borderRight: 1, borderColor: 'divider', minHeight: 0 }}>{list}</Box>}
+      <Stack sx={{ minWidth: 0, minHeight: 0 }}>
+        <Stack direction="row" alignItems="center" gap={1} sx={{ px: 1.5, py: 0.5, borderBottom: 1, borderColor: 'divider', minHeight: 56 }}>
+          {narrow ? <Button color="inherit" onClick={() => setListOpen(true)}>{t('Chat.chats')}</Button> : null}
+          <Typography noWrap sx={{ flex: 1, fontWeight: 600 }}>{chat ? (chat.title || t('Chat.untitled')) : ''}</Typography>
+          {socket.status === 'connecting' && openedOnce ? <Chip size="small" color="warning" variant="outlined" label={t('Chat.reconnecting')} /> : null}
+          {isArchived ? <Chip size="small" label={t('Chat.archived')} /> : null}
+          {isArchived ? <Button size="small" onClick={() => updateChat(chat, { archived: false })}>{t('Chat.restore')}</Button> : null}
+          {chat ? (
+            <ModelPicker
+              entries={catalogue.entries}
+              selection={selection}
+              disabled={isArchived || running}
+              open={pickerOpen}
+              onOpenChange={setPickerOpen}
+              onChange={(next) => updateChat(chat, { selection: next })}
+            />
+          ) : null}
+        </Stack>
+        {chat ? (
+          <>
+            <ChatThread turns={turns} tool={tool} notice={noticeFor()} hasOlder={Boolean(olderCursor)} olderBusy={olderBusy} onLoadOlder={loadOlder} onRetry={retry} readOnly={isArchived} />
+            {isArchived ? <Typography variant="caption" color="text.secondary" sx={{ px: 2, pb: 1 }}>{t('Chat.archivedReadOnly')}</Typography> : null}
+            <ChatComposer value={draft} onChange={setDraft} onSend={send} onStop={() => socket.send({ type: 'stop' })} running={running} archived={isArchived} connected={socket.connected} />
+          </>
+        ) : (
+          <Stack alignItems="center" justifyContent="center" spacing={2} sx={{ flex: 1, p: 3 }}>
+            <Typography color="text.secondary" align="center">{t('Chat.selectChat')}</Typography>
+            <Button variant="contained" onClick={createChat}>{t('Chat.newChat')}</Button>
+          </Stack>
+        )}
+      </Stack>
+      {narrow ? <Drawer open={listOpen} onClose={() => setListOpen(false)} slotProps={{ paper: { sx: { width: 'min(320px, 86vw)' } } }}>{list}</Drawer> : null}
+    </Box>
+  );
+}
+
+export default ChatWorkspace;

package/src/chat/MarkdownReply.jsx

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export const MARKDOWN_LIMIT = 200000;
+const allowed = ['p','br','hr','h1','h2','h3','h4','h5','h6','strong','em','del','ul','ol','li','blockquote','code','pre','table','thead','tbody','tr','th','td','a','img'];
+const plainText = (children) => (Array.isArray(children) ? children : [children]).map((child) => typeof child === 'string' ? child : '').join('');
+function MarkdownReply({ text = '' }) {
+  const { t } = useTranslation();
+  if (text.length > MARKDOWN_LIMIT) return <Box sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>{text}</Box>;
+  return <Box sx={{ minWidth: 0, overflowWrap: 'anywhere', '& p': { my: 1 }, '& table': { borderCollapse: 'collapse' }, '& th,& td': { border: 1, borderColor: 'divider', p: 1 }, '& pre': { overflowX: 'auto', bgcolor: 'action.hover', p: 1, borderRadius: 1 }, '& blockquote': { borderLeft: 2, borderColor: 'divider', pl: 1, color: 'text.secondary' } }}>
+    <ReactMarkdown remarkPlugins={[remarkGfm]} allowedElements={allowed} unwrapDisallowed components={{
+      a: ({ href, children }) => { const label = plainText(children); return <span>{children}{href && href !== label ? ' (' + href + ')' : ''}</span>; },
+      img: ({ alt, src }) => <span>{alt || src || ''}</span>,
+      table: ({ children }) => <Box role="region" tabIndex={0} aria-label={t('Chat.markdownTable')} sx={{ overflowX: 'auto', maxWidth: '100%' }}><table>{children}</table></Box>,
+      pre: ({ children }) => <pre tabIndex={0} aria-label={t('Chat.markdownCode')}>{children}</pre>,
+    }}>{text}</ReactMarkdown>
+  </Box>;
+}
+export default memo(MarkdownReply);