@aphrody/m3-ai 3.3.4 → 3.3.5

package/README.md

@@ -83,6 +83,28 @@ Helpers from `types.ts`: `pairTranscriptSteps`, `tryParseJson`, `isErrorResult`,
 `TASK_STATUS_ORDER`, `TASK_STATUS_LABEL`, `TASK_PRIORITY_LABEL`, and the transcript, task and
 model types.
 
+## Local chat
+
+Everything a chat over an OpenAI-compatible server (llama-server, vLLM, the Aphrody gateway)
+needs, with no visible string hard-coded:
+
+| Export                                                                                                  | Role                                                                                                                                                                                                                                                      |
+| ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ChatLabels`, `chatLabelsFr` / `chatLabelsEn` / `chatLabelsJa`, `resolveChatLabels`, `formatLabel`      | One dictionary for every visible string and aria-label. Every chat component takes `labels?: Partial<ChatLabels>`; missing keys fall back on English.                                                                                                     |
+| `streamChatCompletion`, `createSseParser`, `parseChatCompletionChunk`, `chatReducer`, `ChatStreamError` | Pure streaming client of `POST <baseUrl>/chat/completions` (`stream: true`): SSE framing, content / `reasoning_content` / tool-call deltas, `finish_reason`, top-level `citations` and `refusal`. Network failures and 404/502/503/504 are `unavailable`. |
+| `useOpenAIChat({ baseUrl, model, fetch?, headers?, initialMessages?, preamble?, body? })`               | React hook: `{ messages, send, stop, status, error, reset, setMessages }`, `status` is `idle`, `streaming`, `error` or `unavailable`.                                                                                                                     |
+| `ConversationList`                                                                                      | Navigation-drawer list: new conversation, optional search, rename / delete callbacks, empty state, localized dates.                                                                                                                                       |
+| `ModelUnavailable`                                                                                      | Downloading / loading / unavailable state with a determinate linear indicator and a retry button.                                                                                                                                                         |
+| `CitedMarkdown`, `CitationChip`, `CitationList`, `RefusalNotice`                                        | Grounded answers: `[n]` markers as chips, the numbered sources, the "not established in the sources" notice. `MessageBubble` takes `citations` and `refusal` directly.                                                                                    |
+| `MemoryPanel`                                                                                           | Saved memories with per-item deletion and a confirmed "clear all" (`confirmClear` injects your own dialog).                                                                                                                                               |
+| `ChatIcon`                                                                                              | The chat icons as inline Material Symbols SVG: no icon font is needed by the chat components.                                                                                                                                                             |
+
+`Markdown` (and `MessageBubble`, `CitedMarkdown`) open external links with
+`target="_blank" rel="noopener noreferrer"` and take `onLinkClick(href, event)` (call
+`event.preventDefault()` to open the system browser from a Tauri webview) or `renderLink`.
+`ChatComposer` takes `disabled` (the model is unavailable: input, send, voice and selectors are
+inert), distinct from `isSending`.
+
 ## Tests
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aphrody/m3-ai",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "description": "Material Design 3 agent-interaction components (tool calls, markdown, chat composer, workers, tasks): the SpaceUI (@spacedrive/ai) set rebuilt on @aphrody/m3-primitives.",
   "keywords": [
     "material-3",
@@ -40,8 +40,8 @@
   },
   "dependencies": {
     "@aphrody/ag-ui": "1.0.1",
-    "@aphrody/m3-motion": "3.3.4",
-    "@aphrody/m3-primitives": "3.3.4",
+    "@aphrody/m3-motion": "3.3.5",
+    "@aphrody/m3-primitives": "3.3.5",
     "@aphrody/mcp-ui": "7.1.1-aphrody.1",
     "clsx": "^2.1.1",
     "motion": "^13.4.4",
@@ -50,7 +50,7 @@
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
-    "@aphrody/m3-config": "3.3.4"
+    "@aphrody/m3-config": "3.3.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/A2APeerInspector.tsx

@@ -3,7 +3,7 @@
  * @aphrody/m3-ai - A2APeerInspector
  *
  * Material Design 3 Agent-to-Agent (A2A 1.0) Fleet Inspector:
- * - Visualizes connected peer agents (codex, claude, agycli, shenron, nie, ocr, rag).
+ * - Visualizes connected peer agents (codex, claude, agycli, nie, ocr, rag, ...).
  * - Displays AgentCard interface, capabilities, and active tasks.
  * - Live inspection of .coord mailbox envelopes (ask, fact, ack, ping, error).
  * - File lock & resource claims view (.coord/claims).
@@ -72,14 +72,6 @@ const DEFAULT_PEERS: AgentPeer[] = [
     version: "3.7.0",
     skills: ["design-tokens", "docs-audit", "review"],
   },
-  {
-    id: "shenron",
-    name: "Shenron Daemon",
-    role: "Database & RAG Pipeline Gate",
-    status: "idle",
-    version: "2.1.0",
-    skills: ["rag-index", "manga-publish", "embeddings"],
-  },
 ];
 
 const KIND_COLORS: Record<EnvelopeKind, { bg: string; text: string; border: string }> = {

package/src/A2ATaskTimeline.tsx

@@ -3,7 +3,7 @@
  * @aphrody/m3-ai - A2ATaskTimeline
  *
  * Material Design 3 Agent-to-Agent Delegation Timeline:
- * - Chronological trace of task handoffs between agents (e.g., user -> agycli -> codex -> claude -> shenron).
+ * - Chronological trace of task handoffs between agents (e.g., user -> agycli -> codex -> claude -> rag).
  * - Displays delegation phase, envelope kind, file claims, and execution status.
  */
 

package/src/AgUiEventStream.ts

@@ -163,14 +163,18 @@ export class AgUiEventAccumulator {
 
       case EventType.TOOL_CALL_RESULT: {
         const tcResult = event as ToolCallResultEvent;
-        const resultContent = typeof tcResult.content === "string"
-          ? tcResult.content
-          : JSON.stringify(tcResult.content);
+        const resultContent =
+          typeof tcResult.content === "string"
+            ? tcResult.content
+            : JSON.stringify(tcResult.content);
 
         // Check if tool result contains A2UI operations
         this.inspectA2uiOperations(tcResult.content);
 
-        const toolName = this.toolCallNames.get(tcResult.toolCallId) || (tcResult.metadata?.toolName as string) || "tool";
+        const toolName =
+          this.toolCallNames.get(tcResult.toolCallId) ||
+          (tcResult.metadata?.toolName as string) ||
+          "tool";
         this.steps.push({
           type: "tool_result",
           call_id: tcResult.toolCallId,
@@ -437,7 +441,7 @@ export function agUiEventToCoordEnvelope(
       id: val.id || id,
       from: val.from || from,
       to: val.to || to,
-      kind: (kind as EnvelopeKind),
+      kind: kind as EnvelopeKind,
       topic: val.topic || "a2a-coordination",
       body: val.body || "",
       re: val.re,

package/src/ChatComposer.tsx

@@ -3,12 +3,14 @@
 
 "use client";
 
-import { CircleButton, Icon, Popover, SelectPill, usePopover } from "@aphrody/m3-primitives";
+import { CircleButton, Popover, SelectPill, usePopover } from "@aphrody/m3-primitives";
 import { m3Durations, m3Easings } from "@aphrody/m3-motion";
 import { clsx } from "clsx";
 import { AnimatePresence, motion } from "motion/react";
 import { type ReactNode } from "react";
 
+import { type ChatLabels, resolveChatLabels } from "./chatLabels";
+import { ChatIcon } from "./chatIcons";
 import { focusRing } from "./internal";
 import { ModelSelector } from "./ModelSelector";
 import type { ModelOption } from "./types";
@@ -26,6 +28,11 @@ export interface ChatComposerProps {
   heading?: ReactNode;
   /** Disable the composer — draft can still change, but send/voice are blocked */
   isSending?: boolean;
+  /**
+   * Disable the whole composer (e.g. the model is unavailable): the textarea, send, voice and
+   * the selectors are all inert. Distinct from `isSending`, which keeps the draft editable.
+   */
+  disabled?: boolean;
   /** Project selector config — omit to hide */
   projectSelector?: {
     value: string;
@@ -47,6 +54,8 @@ export interface ChatComposerProps {
   onStop?: () => void;
   /** Additional className on the composer container */
   className?: string;
+  /** Visible strings (placeholder, aria-labels); English defaults. `placeholder` wins over it. */
+  labels?: Partial<ChatLabels>;
 }
 
 const iconButtonEnter = {
@@ -72,24 +81,28 @@ export function ChatComposer({
   draft,
   onDraftChange,
   onSend,
-  placeholder = "Ask something...",
+  placeholder,
   heading,
   isSending = false,
+  disabled = false,
   projectSelector,
   modelSelector,
   onOpenVoice,
   toolbarExtra,
   onStop,
   className,
+  labels,
 }: ChatComposerProps) {
-  const canSend = !isSending && draft.trim().length > 0;
-  const showStop = isSending && !!onStop;
+  const l = resolveChatLabels(labels);
+  const hint = placeholder ?? l.composerPlaceholder;
+  const canSend = !disabled && !isSending && draft.trim().length > 0;
+  const showStop = !disabled && isSending && !!onStop;
 
   return (
     <>
       {heading && (
         <div className="mb-3 flex items-center gap-2 px-1 text-title-small text-on-surface-variant">
-          <Icon name="auto_awesome" size={18} filled className="text-primary" />
+          <ChatIcon name="auto_awesome_filled" size={18} className="text-primary" />
           {heading}
         </div>
       )}
@@ -107,12 +120,13 @@ export function ChatComposer({
           onKeyDown={(event) => {
             if (event.key === "Enter" && !event.shiftKey) {
               event.preventDefault();
-              onSend();
+              if (canSend) onSend();
             }
           }}
-          placeholder={placeholder}
-          aria-label={placeholder}
+          placeholder={hint}
+          aria-label={hint}
           rows={2}
+          disabled={disabled}
           className="block w-full resize-none border-0 bg-transparent px-1 text-body-large text-on-surface caret-primary outline-none placeholder:text-on-surface-variant focus:outline-none focus:ring-0"
         />
 
@@ -124,8 +138,14 @@ export function ChatComposer({
                 onOpenChange={projectSelector.popover.setOpen}
               >
                 <Popover.Trigger asChild>
-                  <SelectPill className="w-full" aria-haspopup="listbox">
-                    {projectSelector.value}
+                  <SelectPill
+                    className="w-full"
+                    aria-haspopup="listbox"
+                    disabled={disabled}
+                    hideCaret
+                  >
+                    <span className="min-w-0 flex-1 truncate">{projectSelector.value}</span>
+                    <ChatIcon name="expand_more" size={18} />
                   </SelectPill>
                 </Popover.Trigger>
                 <Popover.Content
@@ -136,7 +156,7 @@ export function ChatComposer({
                   <div
                     // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- M3 menu in a popover with icon rows; a native <select>/<datalist> cannot render it.
                     role="listbox"
-                    aria-label="Projects"
+                    aria-label={l.projects}
                   >
                     {projectSelector.options.map((option) => {
                       const selected = option === projectSelector.value;
@@ -162,7 +182,7 @@ export function ChatComposer({
                           )}
                         >
                           <span className="min-w-0 flex-1 truncate">{option}</span>
-                          {selected && <Icon name="check" size={20} />}
+                          {selected && <ChatIcon name="check" size={20} />}
                         </button>
                       );
                     })}
@@ -182,6 +202,8 @@ export function ChatComposer({
                   value={modelSelector.value}
                   onChange={modelSelector.onChange}
                   size="md"
+                  disabled={disabled}
+                  labels={labels}
                 />
               </div>
             )}
@@ -190,11 +212,11 @@ export function ChatComposer({
 
             {onOpenVoice && (
               <CircleButton
-                icon="mic"
+                icon={<ChatIcon name="mic" size={20} />}
                 variant="standard"
                 onClick={onOpenVoice}
-                disabled={isSending}
-                aria-label="Open Voice Input"
+                disabled={isSending || disabled}
+                aria-label={l.openVoice}
               />
             )}
 
@@ -205,14 +227,14 @@ export function ChatComposer({
                   type="button"
                   {...iconButtonEnter}
                   onClick={onStop}
-                  aria-label="Stop"
+                  aria-label={l.stop}
                   className={clsx(
                     "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary",
                     "transition-colors duration-200 ease-standard hover:bg-primary/92 active:bg-primary/90",
                     focusRing,
                   )}
                 >
-                  <Icon name="stop" size={24} filled />
+                  <ChatIcon name="stop_filled" size={24} />
                 </motion.button>
               ) : canSend ? (
                 <motion.button
@@ -220,14 +242,14 @@ export function ChatComposer({
                   type="button"
                   {...iconButtonEnter}
                   onClick={onSend}
-                  aria-label="Send"
+                  aria-label={l.send}
                   className={clsx(
                     "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary",
                     "transition-colors duration-200 ease-standard hover:bg-primary/92 active:bg-primary/90",
                     focusRing,
                   )}
                 >
-                  <Icon name="arrow_upward" size={24} />
+                  <ChatIcon name="arrow_upward" size={24} />
                 </motion.button>
               ) : null}
             </AnimatePresence>

package/src/ConversationList.tsx

@@ -0,0 +1,207 @@
+// SPDX-License-Identifier: Apache-2.0
+// Conversation list on the M3 navigation-drawer anatomy: a `surface-container-low` sheet, a
+// "new conversation" FAB-like tonal button, optional search, and 56 dp items whose active one
+// takes the `secondary-container` indicator.
+
+"use client";
+
+import { CircleButton } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import { useMemo, useState } from "react";
+
+import { type ChatLabels, resolveChatLabels } from "./chatLabels";
+import { ChatIcon } from "./chatIcons";
+import { CircularIndicator, focusRing } from "./internal";
+
+export interface ConversationSummary {
+  id: string;
+  title: string;
+  /** ISO string, epoch milliseconds or Date. */
+  updatedAt: string | number | Date;
+  preview?: string;
+}
+
+export interface ConversationListProps {
+  conversations: readonly ConversationSummary[];
+  selectedId?: string | null;
+  onSelect: (id: string) => void;
+  /** Shows the "new conversation" button. */
+  onNew?: () => void;
+  /** Shows a rename icon button on each item. */
+  onRename?: (id: string) => void;
+  /** Shows a delete icon button on each item. */
+  onDelete?: (id: string) => void;
+  /** Shows a search field that filters by title and preview. */
+  searchable?: boolean;
+  loading?: boolean;
+  labels?: Partial<ChatLabels>;
+  /** BCP 47 locale of the dates (`fr`, `en`, `ja`). */
+  locale?: string;
+  /** Overrides the date formatting. */
+  formatDate?: (updatedAt: Date) => string;
+  className?: string;
+}
+
+function toDate(value: string | number | Date): Date {
+  return value instanceof Date ? value : new Date(value);
+}
+
+function isoDate(value: string | number | Date): string | undefined {
+  const date = toDate(value);
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+}
+
+/** Filter conversations by a case-insensitive query on title and preview. */
+export function filterConversations(
+  conversations: readonly ConversationSummary[],
+  query: string,
+): ConversationSummary[] {
+  const needle = query.trim().toLocaleLowerCase();
+  if (!needle) return [...conversations];
+  return conversations.filter((conversation) =>
+    `${conversation.title}\n${conversation.preview ?? ""}`.toLocaleLowerCase().includes(needle),
+  );
+}
+
+export function ConversationList({
+  conversations,
+  selectedId,
+  onSelect,
+  onNew,
+  onRename,
+  onDelete,
+  searchable = false,
+  loading = false,
+  labels,
+  locale,
+  formatDate,
+  className,
+}: ConversationListProps) {
+  const l = resolveChatLabels(labels);
+  const [query, setQuery] = useState("");
+  const visible = useMemo(() => filterConversations(conversations, query), [conversations, query]);
+  const dateFormat = useMemo(
+    () => new Intl.DateTimeFormat(locale, { dateStyle: "short" }),
+    [locale],
+  );
+  const format = (value: string | number | Date) => {
+    const date = toDate(value);
+    if (Number.isNaN(date.getTime())) return "";
+    return formatDate ? formatDate(date) : dateFormat.format(date);
+  };
+
+  return (
+    <nav
+      aria-label={l.conversations}
+      className={clsx(
+        "m3-conversation-list flex h-full min-h-0 flex-col gap-2 bg-surface-container-low px-3 py-3 text-on-surface",
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between gap-2 px-1">
+        <h2 className="m-0 text-title-small text-on-surface-variant">{l.conversations}</h2>
+      </div>
+      {onNew ? (
+        <button
+          type="button"
+          onClick={onNew}
+          className={clsx(
+            "flex h-14 items-center gap-3 rounded-large bg-primary-container px-4 text-label-large text-on-primary-container",
+            "transition-colors duration-200 ease-standard hover:bg-primary-container/92",
+            focusRing,
+          )}
+        >
+          <ChatIcon name="edit_square" size={24} />
+          <span>{l.newConversation}</span>
+        </button>
+      ) : null}
+      {searchable ? (
+        <label className="flex h-12 items-center gap-3 rounded-extra-large bg-surface-container-high px-4 focus-within:bg-surface-container-highest">
+          <ChatIcon name="search" size={20} className="text-on-surface-variant" />
+          <input
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={l.searchConversations}
+            aria-label={l.searchConversations}
+            className="min-w-0 flex-1 border-0 bg-transparent text-body-large text-on-surface caret-primary outline-none placeholder:text-on-surface-variant"
+          />
+        </label>
+      ) : null}
+      {loading ? (
+        <div className="flex justify-center py-6">
+          <CircularIndicator size={24} label={l.loading} />
+        </div>
+      ) : visible.length === 0 ? (
+        <p className="m-0 px-4 py-6 text-center text-body-medium text-on-surface-variant">
+          {query.trim() ? l.noSearchResults : l.noConversations}
+        </p>
+      ) : (
+        <ul className="m-0 flex min-h-0 flex-1 list-none flex-col gap-0.5 overflow-y-auto p-0">
+          {visible.map((conversation) => {
+            const active = conversation.id === selectedId;
+            const title = conversation.title.trim() || l.untitledConversation;
+            return (
+              <li key={conversation.id} className="group relative">
+                <button
+                  type="button"
+                  onClick={() => onSelect(conversation.id)}
+                  aria-current={active ? "page" : undefined}
+                  className={clsx(
+                    "flex min-h-14 w-full flex-col justify-center rounded-extra-large px-4 py-2 text-left",
+                    "transition-colors duration-200 ease-standard",
+                    active
+                      ? "bg-secondary-container text-on-secondary-container"
+                      : "text-on-surface-variant hover:bg-on-surface/8",
+                    (onRename || onDelete) && "pr-24",
+                    focusRing,
+                    "focus-visible:outline-offset-[-3px]",
+                  )}
+                >
+                  <span className="flex w-full items-baseline gap-2">
+                    <span className="min-w-0 flex-1 truncate text-label-large">{title}</span>
+                    <time
+                      className="shrink-0 text-label-small opacity-80"
+                      dateTime={isoDate(conversation.updatedAt)}
+                    >
+                      {format(conversation.updatedAt)}
+                    </time>
+                  </span>
+                  {conversation.preview ? (
+                    <span className="mt-0.5 w-full truncate text-body-small opacity-80">
+                      {conversation.preview}
+                    </span>
+                  ) : null}
+                </button>
+                {onRename || onDelete ? (
+                  <span className="absolute top-1/2 right-2 flex -translate-y-1/2 gap-0.5 opacity-0 transition-opacity duration-200 ease-standard group-focus-within:opacity-100 group-hover:opacity-100">
+                    {onRename ? (
+                      <CircleButton
+                        icon={<ChatIcon name="edit" size={18} />}
+                        variant="standard"
+                        size="sm"
+                        onClick={() => onRename(conversation.id)}
+                        aria-label={`${l.renameConversation}: ${title}`}
+                        title={l.renameConversation}
+                      />
+                    ) : null}
+                    {onDelete ? (
+                      <CircleButton
+                        icon={<ChatIcon name="delete" size={18} />}
+                        variant="standard"
+                        size="sm"
+                        onClick={() => onDelete(conversation.id)}
+                        aria-label={`${l.deleteConversation}: ${title}`}
+                        title={l.deleteConversation}
+                      />
+                    ) : null}
+                  </span>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </nav>
+  );
+}