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

package/src/chat/ChatList.jsx

@@ -1,87 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,244 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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);

package/src/chat/ModelPicker.jsx

@@ -1,85 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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) + '/';