@drewswiredin/backstage-plugin-assistants 0.6.1 → 0.7.0

package/dist/AssistantsNavIcon.esm.js

@@ -1,34 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
-import { Badge } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
 import { RiRobot2Line } from '@remixicon/react';
 import { useApi } from '@backstage/core-plugin-api';
 import { assistantsApiRef } from './api/AssistantsApi.esm.js';
 import { useThreadStatus } from './collapsible/useThreadStatus.esm.js';
+import { StatusDot } from './collapsible/StatusDot.esm.js';
 
-const useStyles = makeStyles({
-  "@keyframes auiNavPulse": {
-    "0%": { transform: "scale(1)", opacity: 1 },
-    "50%": { transform: "scale(1.5)", opacity: 0.45 },
-    "100%": { transform: "scale(1)", opacity: 1 }
-  },
-  pulseDot: { animation: "$auiNavPulse 1.2s ease-in-out infinite" }
-});
 function AssistantsNavIcon() {
-  const classes = useStyles();
   const api = useApi(assistantsApiRef);
   const { overallStatus } = useThreadStatus(api, void 0);
-  return /* @__PURE__ */ jsx(
-    Badge,
-    {
-      color: overallStatus === "working" ? "primary" : "error",
-      variant: "dot",
-      overlap: "circular",
-      invisible: overallStatus === "read",
-      classes: overallStatus === "working" ? { dot: classes.pulseDot } : void 0,
-      children: /* @__PURE__ */ jsx(RiRobot2Line, {})
-    }
-  );
+  return /* @__PURE__ */ jsx(StatusDot, { status: overallStatus, children: /* @__PURE__ */ jsx(RiRobot2Line, {}) });
 }
 
 export { AssistantsNavIcon };

package/dist/AssistantsNavIcon.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantsNavIcon.esm.js","sources":["../src/AssistantsNavIcon.tsx"],"sourcesContent":["import { Badge } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { RiRobot2Line } from '@remixicon/react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { assistantsApiRef } from './api';\nimport { useThreadStatus } from './collapsible/useThreadStatus';\n\nconst useStyles = makeStyles({\n  '@keyframes auiNavPulse': {\n    '0%': { transform: 'scale(1)', opacity: 1 },\n    '50%': { transform: 'scale(1.5)', opacity: 0.45 },\n    '100%': { transform: 'scale(1)', opacity: 1 },\n  },\n  pulseDot: { animation: '$auiNavPulse 1.2s ease-in-out infinite' },\n});\n\n/**\n * The Assistants nav-rail icon with a live status dot: a pulsing dot if any\n * conversation (across all assistants) is generating, else a solid red dot if\n * any is unread, else nothing — generating wins. Derived from the same\n * Signals-backed status store as the in-page indicators, so they never disagree.\n *\n * @public\n */\nexport function AssistantsNavIcon() {\n  const classes = useStyles();\n  const api = useApi(assistantsApiRef);\n  // No focused conversation in the nav context, so pass undefined.\n  const { overallStatus } = useThreadStatus(api, undefined);\n\n  return (\n    <Badge\n      color={overallStatus === 'working' ? 'primary' : 'error'}\n      variant=\"dot\"\n      overlap=\"circular\"\n      invisible={overallStatus === 'read'}\n      classes={\n        overallStatus === 'working' ? { dot: classes.pulseDot } : undefined\n      }\n    >\n      <RiRobot2Line />\n    </Badge>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAOA,MAAM,YAAY,UAAA,CAAW;AAAA,EAC3B,wBAAA,EAA0B;AAAA,IACxB,IAAA,EAAM,EAAE,SAAA,EAAW,UAAA,EAAY,SAAS,CAAA,EAAE;AAAA,IAC1C,KAAA,EAAO,EAAE,SAAA,EAAW,YAAA,EAAc,SAAS,IAAA,EAAK;AAAA,IAChD,MAAA,EAAQ,EAAE,SAAA,EAAW,UAAA,EAAY,SAAS,CAAA;AAAE,GAC9C;AAAA,EACA,QAAA,EAAU,EAAE,SAAA,EAAW,wCAAA;AACzB,CAAC,CAAA;AAUM,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,GAAA,GAAM,OAAO,gBAAgB,CAAA;AAEnC,EAAA,MAAM,EAAE,aAAA,EAAc,GAAI,eAAA,CAAgB,KAAK,MAAS,CAAA;AAExD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,aAAA,KAAkB,SAAA,GAAY,SAAA,GAAY,OAAA;AAAA,MACjD,OAAA,EAAQ,KAAA;AAAA,MACR,OAAA,EAAQ,UAAA;AAAA,MACR,WAAW,aAAA,KAAkB,MAAA;AAAA,MAC7B,SACE,aAAA,KAAkB,SAAA,GAAY,EAAE,GAAA,EAAK,OAAA,CAAQ,UAAS,GAAI,MAAA;AAAA,MAG5D,8BAAC,YAAA,EAAA,EAAa;AAAA;AAAA,GAChB;AAEJ;;;;"}
+{"version":3,"file":"AssistantsNavIcon.esm.js","sources":["../src/AssistantsNavIcon.tsx"],"sourcesContent":["import { RiRobot2Line } from '@remixicon/react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { assistantsApiRef } from './api';\nimport { useThreadStatus } from './collapsible/useThreadStatus';\nimport { StatusDot } from './collapsible/StatusDot';\n\n/**\n * The Assistants nav-rail icon with a live status dot: amber pulsing if any\n * conversation (across all assistants) is working, else solid red if any is\n * unread, else nothing — working wins. Shown on every Backstage page (it's a\n * sidebar item), and derived from the same server status snapshot as the in-page\n * indicators, so they never disagree.\n *\n * @public\n */\nexport function AssistantsNavIcon() {\n  const api = useApi(assistantsApiRef);\n  // No focused conversation in the nav context, so pass undefined.\n  const { overallStatus } = useThreadStatus(api, undefined);\n\n  return (\n    <StatusDot status={overallStatus}>\n      <RiRobot2Line />\n    </StatusDot>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAeO,SAAS,iBAAA,GAAoB;AAClC,EAAA,MAAM,GAAA,GAAM,OAAO,gBAAgB,CAAA;AAEnC,EAAA,MAAM,EAAE,aAAA,EAAc,GAAI,eAAA,CAAgB,KAAK,MAAS,CAAA;AAExD,EAAA,2BACG,SAAA,EAAA,EAAU,MAAA,EAAQ,aAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,gBAAa,CAAA,EAChB,CAAA;AAEJ;;;;"}

package/dist/collapsible/AssistantsList.esm.js

@@ -7,12 +7,12 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import IconButton from '@material-ui/core/IconButton';
-import Badge from '@material-ui/core/Badge';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 import { AssistantAvatar } from './surface/AssistantAvatar.esm.js';
 import { AssistantDetailDialog } from './AssistantDetailDialog.esm.js';
+import { StatusDot } from './StatusDot.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -79,17 +79,7 @@ const AssistantsList = ({ assistants, activeId, onSelect, agentStatus }) => {
         ContainerProps: { className: classes.container },
         onClick: () => onSelect(a.id),
         children: [
-          /* @__PURE__ */ jsx(ListItemIcon, { className: classes.icon, children: /* @__PURE__ */ jsx(
-            Badge,
-            {
-              color: agentStatus?.(a.id) === "working" ? "primary" : "error",
-              variant: "dot",
-              overlap: "circular",
-              invisible: (agentStatus?.(a.id) ?? "read") === "read",
-              classes: agentStatus?.(a.id) === "working" ? { dot: classes.pulseDot } : void 0,
-              children: /* @__PURE__ */ jsx(AssistantAvatar, { color: a.color, size: 22 })
-            }
-          ) }),
+          /* @__PURE__ */ jsx(ListItemIcon, { className: classes.icon, children: /* @__PURE__ */ jsx(StatusDot, { status: agentStatus?.(a.id) ?? "read", children: /* @__PURE__ */ jsx(AssistantAvatar, { color: a.color, size: 22 }) }) }),
           /* @__PURE__ */ jsx(
             ListItemText,
             {

package/dist/collapsible/AssistantsList.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantsList.esm.js","sources":["../../src/collapsible/AssistantsList.tsx"],"sourcesContent":["import { FC, MouseEvent, useState } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport IconButton from '@material-ui/core/IconButton';\nimport Badge from '@material-ui/core/Badge';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport { AssistantSummary } from '@drewswiredin/backstage-plugin-assistants-common';\nimport { AssistantAvatar } from './surface/AssistantAvatar';\nimport { AssistantDetailDialog } from './AssistantDetailDialog';\nimport type { ConvStatus } from './useThreadStatus';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    padding: theme.spacing(1, 1.5, 0),\n  },\n  label: {\n    color: theme.palette.text.secondary,\n    fontWeight: 600,\n    textTransform: 'uppercase',\n    letterSpacing: 0.5,\n    padding: theme.spacing(0, 0.5, 0.5),\n  },\n  item: {\n    borderRadius: theme.shape.borderRadius,\n  },\n  // The hover rule lives on the container <li> (ListItem's ContainerProps), which\n  // wraps BOTH the row and the secondary action. The action is a *sibling* of the\n  // ListItem root, so a :hover rule on the row itself can't reach it.\n  container: {\n    '&:hover $infoAction': {\n      opacity: 1,\n      pointerEvents: 'auto',\n    },\n  },\n  icon: {\n    minWidth: 32,\n    display: 'inline-flex',\n    alignItems: 'center',\n  },\n  // Hidden until row hover (opacity + pointer-events so it's not clickable while\n  // hidden); no reserved gutter so the title uses full width and truncates later.\n  infoAction: {\n    opacity: 0,\n    pointerEvents: 'none',\n    color: theme.palette.text.secondary,\n    transition: theme.transitions.create('opacity'),\n  },\n  '@keyframes auiPulse': {\n    '0%': { transform: 'scale(1)', opacity: 1 },\n    '50%': { transform: 'scale(1.5)', opacity: 0.45 },\n    '100%': { transform: 'scale(1)', opacity: 1 },\n  },\n  pulseDot: {\n    animation: '$auiPulse 1.2s ease-in-out infinite',\n  },\n}));\n\n/**\n * The in-page assistant switcher (top tier of the left sidebar). Lists every\n * accessible assistant; selecting one drives `?assistant=<id>` via `onSelect`,\n * which remounts the chat onto that assistant's (siloed) conversation set. The\n * active assistant is highlighted. A hover-revealed info button opens the\n * {@link AssistantDetailDialog} (description, tools, models).\n *\n * @public\n */\nexport const AssistantsList: FC<{\n  assistants: AssistantSummary[];\n  activeId: string;\n  onSelect: (id: string) => void;\n  /** Per-assistant rollup status (working/unread/read) for the rail dots. */\n  agentStatus?: (assistantId: string) => ConvStatus;\n}> = ({ assistants, activeId, onSelect, agentStatus }) => {\n  const classes = useStyles();\n  const [detailId, setDetailId] = useState<string | null>(null);\n\n  const openDetail = (e: MouseEvent<HTMLElement>, id: string) => {\n    e.stopPropagation();\n    setDetailId(id);\n  };\n\n  return (\n    <div className={classes.root}>\n      <Typography variant=\"caption\" className={classes.label}>\n        Assistants\n      </Typography>\n      <List dense disablePadding>\n        {assistants.map(a => (\n          <ListItem\n            key={a.id}\n            button\n            selected={a.id === activeId}\n            className={classes.item}\n            ContainerProps={{ className: classes.container }}\n            onClick={() => onSelect(a.id)}\n          >\n            <ListItemIcon className={classes.icon}>\n              <Badge\n                color={agentStatus?.(a.id) === 'working' ? 'primary' : 'error'}\n                variant=\"dot\"\n                overlap=\"circular\"\n                invisible={(agentStatus?.(a.id) ?? 'read') === 'read'}\n                classes={\n                  agentStatus?.(a.id) === 'working'\n                    ? { dot: classes.pulseDot }\n                    : undefined\n                }\n              >\n                <AssistantAvatar color={a.color} size={22} />\n              </Badge>\n            </ListItemIcon>\n            <ListItemText\n              primary={a.title}\n              primaryTypographyProps={{ variant: 'body2', noWrap: true }}\n            />\n            <ListItemSecondaryAction className={classes.infoAction}>\n              <Tooltip title=\"Details\">\n                <IconButton\n                  edge=\"end\"\n                  size=\"small\"\n                  aria-label={`${a.title} details`}\n                  onClick={e => openDetail(e, a.id)}\n                >\n                  <InfoOutlinedIcon fontSize=\"small\" />\n                </IconButton>\n              </Tooltip>\n            </ListItemSecondaryAction>\n          </ListItem>\n        ))}\n      </List>\n\n      <AssistantDetailDialog\n        assistant={assistants.find(a => a.id === detailId)}\n        open={detailId !== null}\n        onClose={() => setDetailId(null)}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AssistantsList.esm.js","sources":["../../src/collapsible/AssistantsList.tsx"],"sourcesContent":["import { FC, MouseEvent, useState } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';\nimport { AssistantSummary } from '@drewswiredin/backstage-plugin-assistants-common';\nimport { AssistantAvatar } from './surface/AssistantAvatar';\nimport { AssistantDetailDialog } from './AssistantDetailDialog';\nimport { StatusDot } from './StatusDot';\nimport type { ConvStatus } from './useThreadStatus';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    padding: theme.spacing(1, 1.5, 0),\n  },\n  label: {\n    color: theme.palette.text.secondary,\n    fontWeight: 600,\n    textTransform: 'uppercase',\n    letterSpacing: 0.5,\n    padding: theme.spacing(0, 0.5, 0.5),\n  },\n  item: {\n    borderRadius: theme.shape.borderRadius,\n  },\n  // The hover rule lives on the container <li> (ListItem's ContainerProps), which\n  // wraps BOTH the row and the secondary action. The action is a *sibling* of the\n  // ListItem root, so a :hover rule on the row itself can't reach it.\n  container: {\n    '&:hover $infoAction': {\n      opacity: 1,\n      pointerEvents: 'auto',\n    },\n  },\n  icon: {\n    minWidth: 32,\n    display: 'inline-flex',\n    alignItems: 'center',\n  },\n  // Hidden until row hover (opacity + pointer-events so it's not clickable while\n  // hidden); no reserved gutter so the title uses full width and truncates later.\n  infoAction: {\n    opacity: 0,\n    pointerEvents: 'none',\n    color: theme.palette.text.secondary,\n    transition: theme.transitions.create('opacity'),\n  },\n  '@keyframes auiPulse': {\n    '0%': { transform: 'scale(1)', opacity: 1 },\n    '50%': { transform: 'scale(1.5)', opacity: 0.45 },\n    '100%': { transform: 'scale(1)', opacity: 1 },\n  },\n  pulseDot: {\n    animation: '$auiPulse 1.2s ease-in-out infinite',\n  },\n}));\n\n/**\n * The in-page assistant switcher (top tier of the left sidebar). Lists every\n * accessible assistant; selecting one drives `?assistant=<id>` via `onSelect`,\n * which remounts the chat onto that assistant's (siloed) conversation set. The\n * active assistant is highlighted. A hover-revealed info button opens the\n * {@link AssistantDetailDialog} (description, tools, models).\n *\n * @public\n */\nexport const AssistantsList: FC<{\n  assistants: AssistantSummary[];\n  activeId: string;\n  onSelect: (id: string) => void;\n  /** Per-assistant rollup status (working/unread/read) for the rail dots. */\n  agentStatus?: (assistantId: string) => ConvStatus;\n}> = ({ assistants, activeId, onSelect, agentStatus }) => {\n  const classes = useStyles();\n  const [detailId, setDetailId] = useState<string | null>(null);\n\n  const openDetail = (e: MouseEvent<HTMLElement>, id: string) => {\n    e.stopPropagation();\n    setDetailId(id);\n  };\n\n  return (\n    <div className={classes.root}>\n      <Typography variant=\"caption\" className={classes.label}>\n        Assistants\n      </Typography>\n      <List dense disablePadding>\n        {assistants.map(a => (\n          <ListItem\n            key={a.id}\n            button\n            selected={a.id === activeId}\n            className={classes.item}\n            ContainerProps={{ className: classes.container }}\n            onClick={() => onSelect(a.id)}\n          >\n            <ListItemIcon className={classes.icon}>\n              <StatusDot status={agentStatus?.(a.id) ?? 'read'}>\n                <AssistantAvatar color={a.color} size={22} />\n              </StatusDot>\n            </ListItemIcon>\n            <ListItemText\n              primary={a.title}\n              primaryTypographyProps={{ variant: 'body2', noWrap: true }}\n            />\n            <ListItemSecondaryAction className={classes.infoAction}>\n              <Tooltip title=\"Details\">\n                <IconButton\n                  edge=\"end\"\n                  size=\"small\"\n                  aria-label={`${a.title} details`}\n                  onClick={e => openDetail(e, a.id)}\n                >\n                  <InfoOutlinedIcon fontSize=\"small\" />\n                </IconButton>\n              </Tooltip>\n            </ListItemSecondaryAction>\n          </ListItem>\n        ))}\n      </List>\n\n      <AssistantDetailDialog\n        assistant={assistants.find(a => a.id === detailId)}\n        open={detailId !== null}\n        onClose={() => setDetailId(null)}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/collapsible/CollapsiblePage.esm.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import './surface/styles/assistant-ui.css.esm.js';
 import './surface/styles/assistant-ui-markdown.css.esm.js';
-import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
 import { useApi } from '@backstage/core-plugin-api';
 import { Progress, ResponseErrorPanel, Content } from '@backstage/core-components';
 import { makeStyles } from '@material-ui/core/styles';
-import { FormControl, Select, ListSubheader, MenuItem, ListItemIcon, Tooltip, IconButton, Badge, Typography } from '@material-ui/core';
+import { FormControl, Select, ListSubheader, MenuItem, ListItemIcon, Tooltip, IconButton, Typography, Button } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import ChatBubbleOutlineIcon from '@material-ui/icons/ChatBubbleOutline';
 import CheckIcon from '@material-ui/icons/Check';
@@ -20,8 +20,10 @@ import { AssistantAvatar } from './surface/AssistantAvatar.esm.js';
 import { SidePane } from './SidePane.esm.js';
 import { FullHeightRegion } from './FullHeightRegion.esm.js';
 import { createThreadListAdapter, patchThread } from './threadListAdapter.esm.js';
+import { signalApiRef } from '@backstage/plugin-signals-react';
 import { makeRuntimeHook } from './useAssistantRuntime.esm.js';
-import { useThreadStatus } from './useThreadStatus.esm.js';
+import { StatusDot } from './StatusDot.esm.js';
+import { useThreadStatus, toConvStatus } from './useThreadStatus.esm.js';
 
 const SIDEPANE_COLLAPSED_KEY = "ai-chat-sidepane-collapsed";
 function loadSidePaneCollapsed() {
@@ -214,14 +216,24 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "column"
   },
-  // The "generating" indicator: a pulsing dot, distinct from the solid unread dot.
-  "@keyframes auiPulse": {
-    "0%": { transform: "scale(1)", opacity: 1 },
-    "50%": { transform: "scale(1.5)", opacity: 0.45 },
-    "100%": { transform: "scale(1)", opacity: 1 }
+  // Bare-agent empty state (no conversation selected; new chats are "+"-only).
+  emptyState: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    height: "100%",
+    textAlign: "center",
+    color: theme.palette.text.secondary,
+    padding: theme.spacing(3)
+  },
+  emptyTitle: {
+    fontWeight: 600,
+    color: theme.palette.text.primary
   },
-  pulseDot: {
-    animation: "$auiPulse 1.2s ease-in-out infinite"
+  emptyButton: {
+    marginTop: theme.spacing(1)
   }
 }));
 function splitModel(id, pool) {
@@ -259,12 +271,24 @@ function CollapsiblePage() {
       }
     );
   }
-  const assistant = assistants.find((a) => a.id === requestedAssistant) ?? assistants[0];
-  return /* @__PURE__ */ jsx(CollapsibleChat, { status: status.value, assistant }, assistant.id);
+  const initialAssistantId = assistants.find((a) => a.id === requestedAssistant)?.id ?? assistants[0].id;
+  return /* @__PURE__ */ jsx(
+    CollapsibleChat,
+    {
+      status: status.value,
+      initialAssistantId
+    }
+  );
+}
+function mostRecentThreadFor(assistantId, threadList) {
+  const updatedAt = (id) => threadList.threadItems[id]?.custom?.updatedAt ?? "";
+  return [...threadList.threadIds].filter(
+    (id) => threadList.threadItems[id]?.custom?.assistantId === assistantId
+  ).sort((a, b) => updatedAt(a) < updatedAt(b) ? 1 : -1)[0];
 }
 function CollapsibleChat({
   status,
-  assistant
+  initialAssistantId
 }) {
   const api = useApi(assistantsApiRef);
   const baseUrl = useAsync(() => api.getBaseUrl(), [api]);
@@ -283,50 +307,71 @@ function CollapsibleChat({
     ChatRuntime,
     {
       status,
-      assistant,
       api,
-      baseUrl: baseUrl.value
+      baseUrl: baseUrl.value,
+      initialAssistantId
     }
   );
 }
 function ChatRuntime({
   status,
-  assistant,
   api,
-  baseUrl
+  baseUrl,
+  initialAssistantId
 }) {
-  const defaultModel = assistant.defaultModel ?? status.defaultModel;
-  const modelIdRef = useRef(defaultModel);
+  const activeAssistantIdRef = useRef(initialAssistantId);
+  const modelIdRef = useRef(status.defaultModel);
   const adapter = useMemo(
-    () => createThreadListAdapter(api, assistant.id),
-    [api, assistant.id]
+    () => createThreadListAdapter(api, () => activeAssistantIdRef.current),
+    [api]
   );
   const runtimeHook = useMemo(
-    () => makeRuntimeHook({ api, baseUrl, assistantId: assistant.id, modelIdRef }),
-    [api, baseUrl, assistant.id]
+    () => makeRuntimeHook({
+      api,
+      baseUrl,
+      getActiveAssistantId: () => activeAssistantIdRef.current,
+      modelIdRef
+    }),
+    [api, baseUrl]
   );
   const runtime = useRemoteThreadListRuntime({ adapter, runtimeHook });
   return /* @__PURE__ */ jsx(AssistantRuntimeProvider, { runtime, children: /* @__PURE__ */ jsx(
     ChatChrome,
     {
       status,
-      assistant,
       api,
       modelIdRef,
-      defaultModel
+      activeAssistantIdRef,
+      initialAssistantId
     }
   ) });
 }
 function ChatChrome({
   status,
-  assistant,
   api,
   modelIdRef,
-  defaultModel
+  activeAssistantIdRef,
+  initialAssistantId
 }) {
   const classes = useStyles();
   const runtime = useAssistantRuntime();
+  const signals = useApi(signalApiRef);
   const [, setSearchParams] = useSearchParams();
+  const [activeAssistantId, setActiveAssistantIdState] = useState(
+    initialAssistantId
+  );
+  const setActiveAssistantId = useCallback(
+    (id) => {
+      activeAssistantIdRef.current = id;
+      setActiveAssistantIdState(id);
+    },
+    [activeAssistantIdRef]
+  );
+  const assistant = useMemo(
+    () => status.assistants.find((a) => a.id === activeAssistantId) ?? status.assistants[0],
+    [status.assistants, activeAssistantId]
+  );
+  const defaultModel = assistant.defaultModel ?? status.defaultModel;
   const [threadList, setThreadList] = useState(
     () => runtime.threads.getState()
   );
@@ -340,44 +385,52 @@ function ChatChrome({
   const activeItem = threadList.threadItems[activeId];
   const activeRemoteId = activeItem?.remoteId;
   const activeTitle = activeItem?.title ?? "";
-  const { statusOf, agentStatus, markRead, finishedTick } = useThreadStatus(
-    api,
-    activeRemoteId
-  );
+  const isBlankDraft = activeId === threadList.newThreadId && !activeRemoteId;
+  const { statusOf, agentStatus } = useThreadStatus(api, activeRemoteId);
   const didSelectInitial = useRef(false);
   useEffect(() => {
     if (didSelectInitial.current || threadList.isLoading) return;
     didSelectInitial.current = true;
     if (activeId !== threadList.newThreadId) return;
-    const mostRecent = [...threadList.threadIds].map((id) => ({
-      id,
-      updatedAt: threadList.threadItems[id]?.custom?.updatedAt ?? ""
-    })).sort((a, b) => a.updatedAt < b.updatedAt ? 1 : -1)[0]?.id;
-    if (mostRecent) {
-      void runtime.threads.switchToThread(mostRecent);
-    }
+    const mostRecent = mostRecentThreadFor(
+      activeAssistantIdRef.current,
+      threadList
+    );
+    if (mostRecent) void runtime.threads.switchToThread(mostRecent);
   }, [threadList.isLoading]);
   const conversations = useMemo(
-    () => threadList.threadIds.map((id) => {
+    () => threadList.threadIds.filter((id) => {
+      if (id === activeId) return true;
+      if (id === threadList.newThreadId) return false;
+      const aid = threadList.threadItems[id]?.custom?.assistantId;
+      return aid === activeAssistantId;
+    }).map((id) => {
       const item = threadList.threadItems[id];
       const custom = item?.custom;
-      const st = id === activeId ? "read" : statusOf(item?.remoteId);
+      const st = statusOf(item?.remoteId);
       return {
         id,
         remoteId: item?.remoteId,
         title: item?.title ?? "New Chat",
         pinned: custom?.pinned ?? false,
         unread: st === "unread",
-        generating: st === "working"
+        working: st === "working"
       };
     }),
-    [threadList, activeId, statusOf]
+    [threadList, statusOf, activeAssistantId, activeId]
   );
   useEffect(() => {
-    if (finishedTick > 0) {
-      void runtime.threads.reload();
-    }
-  }, [finishedTick, runtime]);
+    let timer;
+    const sub = signals.subscribe("assistants:threads", (msg) => {
+      if (msg.type !== "updated") return;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => void runtime.threads.reload(), 150);
+    });
+    return () => {
+      if (timer) clearTimeout(timer);
+      sub.unsubscribe();
+    };
+  }, [signals, runtime]);
   const allowedModels = useMemo(
     () => assistant.models ?? status.models.map((m) => m.id),
     [assistant.models, status.models]
@@ -405,9 +458,6 @@ function ChatChrome({
     setModelId(next);
     modelIdRef.current = next;
   }, [activeId]);
-  useEffect(() => {
-    if (activeRemoteId) markRead(activeRemoteId);
-  }, [activeRemoteId]);
   const [sidePaneCollapsed, setSidePaneCollapsed] = useState(loadSidePaneCollapsed);
   useEffect(() => {
     try {
@@ -417,9 +467,14 @@ function ChatChrome({
   }, [sidePaneCollapsed]);
   const handleSelectAssistant = useCallback(
     (id) => {
-      if (id !== assistant.id) setSearchParams({ assistant: id });
+      if (id === activeAssistantId) return;
+      setActiveAssistantId(id);
+      setSearchParams({ assistant: id });
+      const mostRecent = mostRecentThreadFor(id, threadList);
+      if (mostRecent) void runtime.threads.switchToThread(mostRecent);
+      else void runtime.threads.switchToNewThread();
     },
-    [assistant.id, setSearchParams]
+    [activeAssistantId, setActiveAssistantId, setSearchParams, threadList, runtime]
   );
   const handleNew = useCallback(() => {
     void (async () => {
@@ -448,9 +503,20 @@ function ChatChrome({
   );
   const handleDelete = useCallback(
     (id) => {
-      void runtime.threads.getItemById(id).delete();
+      void (async () => {
+        const wasActive = id === activeId;
+        await runtime.threads.getItemById(id).delete();
+        await runtime.threads.reload();
+        if (!wasActive) return;
+        const remaining = mostRecentThreadFor(
+          activeAssistantIdRef.current,
+          runtime.threads.getState()
+        );
+        if (remaining) await runtime.threads.switchToThread(remaining);
+        else await runtime.threads.switchToNewThread();
+      })();
     },
-    [runtime]
+    [runtime, activeId, activeAssistantIdRef]
   );
   const handlePin = useCallback(
     async (id) => {
@@ -537,17 +603,7 @@ function ChatChrome({
               className: `${classes.sidePaneRailButton} ${a.id === assistant.id ? classes.sidePaneRailButtonActive : ""}`,
               "aria-label": a.title,
               onClick: () => handleSelectAssistant(a.id),
-              children: /* @__PURE__ */ jsx(
-                Badge,
-                {
-                  color: agentStatus(a.id) === "working" ? "primary" : "error",
-                  variant: "dot",
-                  overlap: "circular",
-                  invisible: agentStatus(a.id) === "read",
-                  classes: agentStatus(a.id) === "working" ? { dot: classes.pulseDot } : void 0,
-                  children: /* @__PURE__ */ jsx(AssistantAvatar, { color: a.color, size: 24 })
-                }
-              )
+              children: /* @__PURE__ */ jsx(StatusDot, { status: agentStatus(a.id), children: /* @__PURE__ */ jsx(AssistantAvatar, { color: a.color, size: 24 }) })
             }
           ) }, a.id)) }),
           /* @__PURE__ */ jsx("div", { className: classes.sidePaneRailDivider }),
@@ -579,13 +635,12 @@ function ChatChrome({
                       "aria-label": conversation.title,
                       onClick: () => handleSelect(conversation.id),
                       children: /* @__PURE__ */ jsx(
-                        Badge,
+                        StatusDot,
                         {
-                          color: conversation.generating ? "primary" : "error",
-                          variant: "dot",
-                          overlap: "circular",
-                          invisible: !conversation.generating && !conversation.unread,
-                          classes: conversation.generating ? { dot: classes.pulseDot } : void 0,
+                          status: toConvStatus(
+                            conversation.working,
+                            conversation.unread
+                          ),
                           children: /* @__PURE__ */ jsx(ChatBubbleOutlineIcon, { fontSize: "small" })
                         }
                       )
@@ -635,7 +690,25 @@ function ChatChrome({
         ] }),
         modelPicker
       ] }),
-      /* @__PURE__ */ jsx("div", { className: classes.threadBody, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: classes.threadBody, children: isBlankDraft ? /* @__PURE__ */ jsxs("div", { className: classes.emptyState, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", className: classes.emptyTitle, children: "No conversation yet" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
+          "Start a new chat with ",
+          assistant.title,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+            onClick: handleNew,
+            className: classes.emptyButton,
+            children: "New chat"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
         ConversationSurface,
         {
           composerPlaceholder: assistant.ui?.composer?.placeholder,