@pmate/chat-sdk 0.12.0-next.70 → 0.12.0-next.72

package/README.md

@@ -289,3 +289,21 @@ The persistent group cache is capped at 64 groups / 1MiB, with 128KiB records,
 identities are stored separately without rosters; repeated registrations share
 one write, concurrent lookups use bulk reads, and a concurrent memory-hit burst
 shares one fresh authority read without retaining authorization across bursts. Scope withdrawal retires both.
+
+
+## Slash command suggestions
+
+### Background
+
+Host applications know which commands are available in a conversation. The shared desktop/mobile inputs now display that catalog while typing a leading `/`, without coupling the SDK to a particular bot or executing commands from the picker.
+
+```tsx
+<ChatInputDesktop commands={{ commands: [
+  { name: "review", description: "Review code", usage: "PR URL or branch" },
+  { name: "qa", description: "Run independent tests", usage: "PR URL" },
+] }} mentions={groupMembers} onSend={sendMessage} />
+```
+
+The same prop is supported by `ChatInputMobile`. Names omit the leading slash. Arrow keys navigate, Enter/Tab inserts a command and a space, Escape closes; touch selection edits the draft only. Command arguments and existing member mentions are preserved. IME composition, URLs and slashes in ordinary body text do not trigger command execution. Omit `commands` for unsupported conversations.
+
+Host-owned textareas can use `useComposerSuggestions({ value, onChange, mentions, commands, disabled })`, spread `inputProps`, render `MentionMenu` with `menuProps` and `CommandMenu` with `commandMenuProps`, and send `getMentions()` with the untrimmed value.

package/lib/commands.d.ts

@@ -0,0 +1,20 @@
+/** Host-owned command catalog. Selecting a suggestion edits the draft only. */
+export type ChatCommand = {
+    name: string;
+    description: string;
+    usage?: string;
+};
+export type ChatCommandConfig = {
+    commands: ChatCommand[];
+    label?: string;
+    emptyText?: string;
+};
+export declare function commandQuery(value: string, caret: number): {
+    query: string;
+    end: number;
+} | null;
+export declare function filterCommands(commands: ChatCommand[], query: string): ChatCommand[];
+export declare function completeCommand(value: string, end: number, command: ChatCommand): {
+    text: string;
+    caret: number;
+};

package/lib/commands.js

@@ -0,0 +1,12 @@
+export function commandQuery(value, caret) {
+    const match = /^\/([^\s/]*)(?=\s|$)/.exec(value);
+    return match && caret >= 1 && caret <= match[0].length ? { query: value.slice(1, caret).toLowerCase(), end: match[0].length } : null;
+}
+export function filterCommands(commands, query) {
+    return commands.filter(c => /^[a-z][a-z0-9-]*$/.test(c.name) && c.name.toLowerCase().startsWith(query));
+}
+export function completeCommand(value, end, command) {
+    const prefix = `/${command.name}`, suffix = value.slice(end);
+    const text = prefix + (suffix || " ");
+    return { text, caret: prefix.length + 1 };
+}

package/lib/components/ChatInputDesktop.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { handleImagePaste } from "../ux/imagePaste";
-import { useMentions } from "../hooks/useMentions";
+import { useComposerSuggestions } from "../hooks/useComposerSuggestions";
+import { CommandMenu } from "./CommandMenu";
 import { MentionMenu } from "./MentionMenu";
 import React from "react";
 import { Provider, createStore } from "jotai";
@@ -25,8 +26,8 @@ function DesktopInner(props) {
     const tokens = mergeChatInputTokens(props.tokens);
     const state = useChatInputState();
     const attachments = useAttachmentState();
-    const mentions = useMentions({
-        value: state.text, config: props.mentions, disabled: props.disabled || state.status === "sending" || state.mode === "voice",
+    const mentions = useComposerSuggestions({
+        value: state.text, mentions: props.mentions, commands: props.commands, disabled: props.disabled || state.status === "sending" || state.mode === "voice",
         onChange(value) { state.setText(value); state.setStatus(value.trim() ? "typing" : "idle"); props.onChange?.(value); },
     });
     const [isEmojiOpen, setIsEmojiOpen] = useState(false);
@@ -186,7 +187,7 @@ function DesktopInner(props) {
         alignSelf: "center",
         transition: `color ${tokens.motion.stateTransition}, transform ${tokens.motion.pressFeedback}`,
     };
-    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [_jsx(MentionMenu, { ...mentions.menuProps, tokens: tokens }), _jsxs("div", { className: "grid gap-3", style: { position: "relative", width: "100%" }, children: [_jsx("input", { ref: imageInputRef, type: "file", accept: props.image?.accept ?? "image/*", style: { display: "none" }, onChange: (event) => {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [_jsx(MentionMenu, { ...mentions.menuProps, tokens: tokens }), _jsx(CommandMenu, { ...mentions.commandMenuProps, tokens: tokens }), _jsxs("div", { className: "grid gap-3", style: { position: "relative", width: "100%" }, children: [_jsx("input", { ref: imageInputRef, type: "file", accept: props.image?.accept ?? "image/*", style: { display: "none" }, onChange: (event) => {
                             const file = event.target.files?.[0];
                             if (file) {
                                 void handleImageFile(file);

package/lib/components/ChatInputMobile.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { handleImagePaste } from "../ux/imagePaste";
-import { useMentions } from "../hooks/useMentions";
+import { useComposerSuggestions } from "../hooks/useComposerSuggestions";
+import { CommandMenu } from "./CommandMenu";
 import { MentionMenu } from "./MentionMenu";
 import React from "react";
 import { Provider, createStore } from "jotai";
@@ -26,8 +27,8 @@ function MobileInner(props) {
     const tokens = mergeChatInputTokens(props.tokens);
     const state = useChatInputState();
     const attachments = useAttachmentState();
-    const mentions = useMentions({
-        value: state.text, config: props.mentions, disabled: props.disabled || state.status === "sending" || state.mode === "voice",
+    const mentions = useComposerSuggestions({
+        value: state.text, mentions: props.mentions, commands: props.commands, disabled: props.disabled || state.status === "sending" || state.mode === "voice",
         onChange(value) { state.setText(value); state.setStatus(value.trim() ? "typing" : "idle"); props.onChange?.(value); },
     });
     const [recordingChoice, setRecordingChoice] = useState("send");
@@ -267,7 +268,7 @@ function MobileInner(props) {
             userSelect: "none",
             WebkitUserSelect: "none",
             WebkitTouchCallout: "none",
-        }, children: [_jsx(MentionMenu, { ...mentions.menuProps, tokens: tokens }), isRecordingOverlayVisible ? (_jsxs("div", { style: {
+        }, children: [_jsx(MentionMenu, { ...mentions.menuProps, tokens: tokens }), _jsx(CommandMenu, { ...mentions.commandMenuProps, tokens: tokens }), isRecordingOverlayVisible ? (_jsxs("div", { style: {
                     position: "fixed",
                     left: "50%",
                     bottom: "calc(72px + env(safe-area-inset-bottom, 0px))",

package/lib/components/CommandMenu.d.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from "react";
+import type { ChatCommand } from "../commands";
+import type { ChatInputTokens, DeepPartial } from "../types/chatInput";
+export declare function CommandMenu({ id, open, candidates, activeIndex, onSelect, onActiveIndex, menuRef, label, emptyText, tokens: overrides }: {
+    id: string;
+    open: boolean;
+    candidates: ChatCommand[];
+    activeIndex: number;
+    onSelect: (c: ChatCommand) => void;
+    onActiveIndex: (i: number) => void;
+    menuRef: RefObject<HTMLDivElement | null>;
+    label: string;
+    emptyText: string;
+    tokens?: DeepPartial<ChatInputTokens>;
+}): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/CommandMenu.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import { mergeChatInputTokens } from "../tokens/defaultTokens";
+export function CommandMenu({ id, open, candidates, activeIndex, onSelect, onActiveIndex, menuRef, label, emptyText, tokens: overrides }) {
+    const tokens = mergeChatInputTokens(overrides);
+    useEffect(() => { menuRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" }); }, [activeIndex, open]);
+    if (!open)
+        return null;
+    return _jsx("div", { id: id, ref: menuRef, role: "listbox", "aria-label": label, style: { position: "absolute", bottom: "calc(100% + 8px)", left: 0, width: "min(420px, 100%)", maxHeight: "min(320px, 40dvh)", overflowY: "auto", overscrollBehavior: "contain", zIndex: 20, boxSizing: "border-box", padding: 6, borderRadius: tokens.radius.inputSurface, border: `1px solid ${tokens.color.borderDefault}`, background: tokens.color.surfaceInputFocus, color: tokens.color.textPrimary, boxShadow: tokens.shadow.inputElevated, fontFamily: tokens.typography.familyBase }, children: candidates.length ? candidates.map((c, i) => _jsxs("button", { id: `${id}-${i}`, type: "button", role: "option", "aria-selected": i === activeIndex, tabIndex: -1, onMouseDown: e => e.preventDefault(), onMouseMove: () => onActiveIndex(i), onClick: () => onSelect(c), style: { display: "block", width: "100%", minHeight: 48, padding: "9px 12px", border: 0, borderRadius: 8, textAlign: "left", cursor: "pointer", color: "inherit", background: i === activeIndex ? `color-mix(in srgb, ${tokens.color.brandPrimary} 14%, ${tokens.color.surfaceInputFocus})` : "transparent" }, children: [_jsxs("span", { style: { display: "block", overflowWrap: "anywhere", fontSize: tokens.typography.inputText.size }, children: [_jsxs("strong", { style: { color: tokens.color.brandPrimary }, children: ["/", c.name] }), c.usage ? _jsx("span", { style: { marginLeft: 8, fontSize: 12, color: tokens.color.textSecondary }, children: c.usage }) : null] }), _jsx("small", { style: { display: "block", marginTop: 3, color: tokens.color.textSecondary }, children: c.description })] }, c.name)) : _jsx("div", { role: "status", style: { padding: 12, color: tokens.color.textSecondary }, children: emptyText }) });
+}

package/lib/hooks/useComposerSuggestions.d.ts

@@ -0,0 +1,50 @@
+import type { ChangeEvent, KeyboardEvent, SyntheticEvent } from "react";
+import { type ChatCommand, type ChatCommandConfig } from "../commands";
+import type { MentionConfig } from "../mentions/model";
+/** One input contract for host-owned composers, SDK inputs, @ mentions and / commands. */
+export declare function useComposerSuggestions({ value, onChange, mentions: config, commands, disabled }: {
+    value: string;
+    onChange: (value: string) => void;
+    mentions?: MentionConfig;
+    commands?: ChatCommandConfig;
+    disabled?: boolean;
+}): {
+    getMentions: () => import("..").ChatMention[];
+    menuProps: {
+        open: boolean;
+        id: string;
+        candidates: import("..").MentionCandidate[];
+        activeIndex: number;
+        onSelect: (candidate: import("..").MentionCandidate) => void;
+        onActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+        menuRef: import("react").RefObject<HTMLDivElement | null>;
+        label: string;
+        emptyText: string;
+    };
+    commandMenuProps: {
+        id: string;
+        open: boolean;
+        candidates: ChatCommand[];
+        activeIndex: number;
+        onSelect: (command: ChatCommand) => void;
+        onActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+        menuRef: import("react").RefObject<HTMLDivElement | null>;
+        label: string;
+        emptyText: string;
+    };
+    inputProps: {
+        onChange(event: ChangeEvent<HTMLTextAreaElement>): void;
+        onSelect(event: SyntheticEvent<HTMLTextAreaElement>): void;
+        onFocus(event: SyntheticEvent<HTMLTextAreaElement>): void;
+        onBlur(event: React.FocusEvent<HTMLTextAreaElement>): void;
+        onCompositionStart(): void;
+        onCompositionEnd(event: SyntheticEvent<HTMLTextAreaElement>): void;
+        onKeyDown(event: KeyboardEvent<HTMLTextAreaElement>): void;
+        role?: "combobox" | undefined;
+        "aria-autocomplete"?: "list" | undefined;
+        "aria-haspopup"?: "listbox" | undefined;
+        "aria-expanded"?: boolean | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+    };
+};

package/lib/hooks/useComposerSuggestions.js

@@ -0,0 +1,70 @@
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { useMentions } from "./useMentions";
+import { commandQuery, completeCommand, filterCommands } from "../commands";
+/** One input contract for host-owned composers, SDK inputs, @ mentions and / commands. */
+export function useComposerSuggestions({ value, onChange, mentions: config, commands, disabled = false }) {
+    const mentions = useMentions({ value, onChange, config, disabled });
+    const id = useId(), inputRef = useRef(null), menuRef = useRef(null);
+    const pending = useRef(null);
+    const [caret, setCaret] = useState(0), [focused, setFocused] = useState(false), [composing, setComposing] = useState(false);
+    const [dismissed, setDismissed] = useState(false), [selected, setSelected] = useState(0), [collapsed, setCollapsed] = useState(true);
+    const query = commands?.commands.length && focused && collapsed && !composing && !disabled && !dismissed ? commandQuery(value, caret) : null;
+    const candidates = query ? filterCommands(commands.commands, query.query) : [];
+    const index = Math.min(selected, Math.max(0, candidates.length - 1));
+    useLayoutEffect(() => {
+        if (pending.current?.text !== value)
+            return;
+        const position = pending.current.caret;
+        pending.current = null;
+        inputRef.current?.focus({ preventScroll: true });
+        inputRef.current?.setSelectionRange(position, position);
+        setCaret(position);
+    }, [value]);
+    function observe(event) {
+        inputRef.current = event.currentTarget;
+        setCaret(event.currentTarget.selectionStart);
+        setCollapsed(event.currentTarget.selectionStart === event.currentTarget.selectionEnd);
+    }
+    function select(command) {
+        if (!query)
+            return;
+        const next = completeCommand(value, query.end, command);
+        pending.current = next;
+        setDismissed(true);
+        onChange(next.text);
+    }
+    return {
+        getMentions: mentions.getMentions,
+        menuProps: { ...mentions.menuProps, open: mentions.menuProps.open && !query },
+        commandMenuProps: { id, open: Boolean(query), candidates, activeIndex: index, onSelect: select, onActiveIndex: setSelected, menuRef, label: commands?.label ?? "选择命令", emptyText: commands?.emptyText ?? "没有匹配的命令" },
+        inputProps: {
+            ...mentions.inputProps,
+            ...(commands ? { role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": Boolean(query || mentions.menuProps.open), "aria-controls": query ? id : mentions.inputProps["aria-controls"], "aria-activedescendant": query && candidates[index] ? `${id}-${index}` : mentions.inputProps["aria-activedescendant"] } : {}),
+            onChange(event) { observe(event); setDismissed(false); setSelected(0); mentions.inputProps.onChange(event); },
+            onSelect(event) { observe(event); mentions.inputProps.onSelect(event); },
+            onFocus(event) { observe(event); setFocused(true); mentions.inputProps.onFocus(event); },
+            onBlur(event) { if (!menuRef.current?.contains(event.relatedTarget))
+                setFocused(false); mentions.inputProps.onBlur(event); },
+            onCompositionStart() { setComposing(true); mentions.inputProps.onCompositionStart(); },
+            onCompositionEnd(event) { setComposing(false); setDismissed(false); observe(event); mentions.inputProps.onCompositionEnd(event); },
+            onKeyDown(event) {
+                if (query && !event.nativeEvent.isComposing && event.keyCode !== 229) {
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        setDismissed(true);
+                    }
+                    else if (candidates.length && ["ArrowDown", "ArrowUp"].includes(event.key)) {
+                        event.preventDefault();
+                        setSelected((index + (event.key === "ArrowDown" ? 1 : candidates.length - 1)) % candidates.length);
+                    }
+                    else if (candidates[index] && ["Enter", "Tab"].includes(event.key) && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+                        event.preventDefault();
+                        select(candidates[index]);
+                    }
+                }
+                if (!event.defaultPrevented)
+                    mentions.inputProps.onKeyDown(event);
+            },
+        },
+    };
+}

package/lib/index.d.ts

@@ -43,3 +43,6 @@ export * from "./hooks/useImageAttachments";
 export * from "./components/ImageAttachmentTray";
 export { createChat, type Chat, ChatError, type ChatThreadSnapshot, type ChatMessage as MessageView, type ChatErrorCode, type ConversationTarget, type OutgoingContent, type CreateChatOptions, type ChatSnapshot, type SentMessage, type ReadOptions, type ReadersQuery, type GroupChanges } from "./chat.js";
 export { useChatSnapshot } from "./hooks/useChatSnapshot.js";
+export * from "./commands";
+export * from "./components/CommandMenu";
+export * from "./hooks/useComposerSuggestions";

package/lib/index.js

@@ -43,3 +43,6 @@ export * from "./hooks/useImageAttachments";
 export * from "./components/ImageAttachmentTray";
 export { createChat, ChatError } from "./chat.js";
 export { useChatSnapshot } from "./hooks/useChatSnapshot.js";
+export * from "./commands";
+export * from "./components/CommandMenu";
+export * from "./hooks/useComposerSuggestions";

package/lib/runtime/indexedDbRecovery.d.ts

@@ -0,0 +1,4 @@
+import type { Dexie } from "dexie";
+/** WebKit can invalidate an IDB connection while the application is suspended.
+ * Only replay a whole rejected transaction; never replay individual requests or clear data. */
+export declare function recoverableTransactions(db: Dexie, isClosed: () => boolean): Dexie["transaction"];

package/lib/runtime/indexedDbRecovery.js

@@ -0,0 +1,27 @@
+/** WebKit can invalidate an IDB connection while the application is suspended.
+ * Only replay a whole rejected transaction; never replay individual requests or clear data. */
+export function recoverableTransactions(db, isClosed) {
+    const transaction = (...args) => db.transaction.apply(db, args);
+    let recovery;
+    return (async (...args) => {
+        try {
+            return await transaction(...args);
+        }
+        catch (error) {
+            const failure = error;
+            if (isClosed() || !(failure.name === "UnknownError" || failure.inner?.name === "UnknownError") || !/without an in-progress transaction/i.test(failure.message ?? ""))
+                throw error;
+            if (!recovery) {
+                db.close({ disableAutoOpen: false });
+                const opening = db.open();
+                recovery = opening;
+                void opening.finally(() => { if (recovery === opening)
+                    recovery = undefined; }).catch(() => { });
+            }
+            await recovery;
+            if (isClosed())
+                throw error;
+            return transaction(...args);
+        }
+    });
+}

package/lib/runtime/messageStore.d.ts

@@ -35,12 +35,14 @@ export declare const messageScopeKey: (scope: MessageScope) => string;
 export declare class IndexedDbMessageStore<T extends StoredMessage> {
     private scope;
     private merge;
+    private transact;
     private db;
     private rows;
     private legacy;
     private coverage;
     private accessRows;
     private controls;
+    private closed;
     private key;
     constructor(scope: MessageScope, merge: (previous: T | undefined, incoming: T) => T, options?: {
         indexedDB?: IDBFactory;

package/lib/runtime/messageStore.js

@@ -1,3 +1,4 @@
+import { recoverableTransactions } from "./indexedDbRecovery.js";
 import { Dexie } from "dexie";
 import { quotedMessageIds, redactMessageQuotes } from "./messageQuotes.js";
 import { messageControls, controlKey, newerControl, applyMessageControls } from "./messageControls.js";
@@ -7,18 +8,21 @@ export const messageScopeKey = (scope) => JSON.stringify([scope.appId, scope.acc
 export class IndexedDbMessageStore {
     scope;
     merge;
+    transact;
     db;
     rows;
     legacy;
     coverage;
     accessRows;
     controls;
+    closed = false;
     key;
     constructor(scope, merge, options = {}) {
         this.scope = scope;
         this.merge = merge;
         this.key = messageScopeKey(scope);
         this.db = new Dexie(options.name ?? "pmate-chat-messages", { indexedDB: options.indexedDB ?? globalThis.indexedDB, IDBKeyRange: globalThis.IDBKeyRange });
+        this.transact = recoverableTransactions(this.db, () => this.closed);
         this.db.version(1).stores({ messages: "[scope+thread+id],[scope+thread+time+id],[scope+thread],scope", coverage: "[scope+thread],scope" });
         this.db.version(2).stores({ legacyMessages: "[scope+thread+id],[scope+thread+time+id],[scope+thread],scope" });
         this.db.version(3).stores({ scopeAccess: "scope" });
@@ -34,7 +38,7 @@ export class IndexedDbMessageStore {
     async read(thread, limit = 100, before) {
         if (!Number.isSafeInteger(limit) || limit < 1 || limit > 1000)
             throw new Error("INVALID_MESSAGE_LIMIT");
-        const page = await this.db.transaction("r", this.rows, this.coverage, this.accessRows, this.controls, async () => {
+        const page = await this.transact("r", this.rows, this.coverage, this.accessRows, this.controls, async () => {
             const access = await this.scopeAccess();
             if (access.revoked)
                 return { messages: [], hasEarlier: false, coverage: { complete: false, revoked: true, resetVersion: 0, scopeVersion: access.version } };
@@ -48,7 +52,7 @@ export class IndexedDbMessageStore {
     async readSelected(thread, ids) {
         if (ids.length > 100 || ids.some(id => !id || id.length > 256))
             throw new Error("INVALID_MESSAGE_SELECTION");
-        const page = await this.db.transaction("r", this.rows, this.coverage, this.accessRows, this.controls, async () => {
+        const page = await this.transact("r", this.rows, this.coverage, this.accessRows, this.controls, async () => {
             const access = await this.scopeAccess();
             const coverage = this.scopedCoverage(await this.coverage.get([this.key, thread]), access);
             if (access.revoked || coverage?.revoked || (coverage?.scopeVersion ?? 0) !== access.version)
@@ -70,7 +74,7 @@ export class IndexedDbMessageStore {
             if (bytes > 1_048_576)
                 throw new Error("MESSAGE_BATCH_TOO_LARGE");
         }
-        return this.db.transaction("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
+        return this.transact("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
             const access = await this.scopeAccess();
             const coverage = await this.coverage.get([this.key, thread]);
             if (access.revoked || coverage?.revoked)
@@ -109,7 +113,7 @@ export class IndexedDbMessageStore {
     async readFallback(thread, limit = 100, before) {
         if (!Number.isSafeInteger(limit) || limit < 1 || limit > 1000)
             throw new Error("INVALID_MESSAGE_LIMIT");
-        const page = await this.db.transaction("r", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
+        const page = await this.transact("r", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
             const access = await this.scopeAccess();
             const coverage = access.revoked ? { complete: false, revoked: true, resetVersion: 0, scopeVersion: access.version } : this.scopedCoverage(await this.coverage.get([this.key, thread]), access);
             if (coverage?.revoked)
@@ -127,7 +131,7 @@ export class IndexedDbMessageStore {
                 throw new Error("MESSAGE_SCOPE_MISMATCH");
         if (messages.length > 1000)
             throw new Error("MESSAGE_BATCH_TOO_LARGE");
-        return this.db.transaction("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
+        return this.transact("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
             const access = await this.scopeAccess();
             if ((guard?.scopeVersion ?? 0) !== access.version)
                 throw new Error("MESSAGE_SCOPE_CHANGED");
@@ -207,7 +211,7 @@ export class IndexedDbMessageStore {
         // v3 caches migrate only source proofs from already-read pages, with no body
         // rewrite. Steady reads remain a single read-only IndexedDB transaction.
         if (pendingControls?.length)
-            await this.db.transaction("rw", this.controls, this.coverage, this.accessRows, async () => {
+            await this.transact("rw", this.controls, this.coverage, this.accessRows, async () => {
                 const access = await this.scopeAccess(), current = await this.coverage.get([this.key, thread]);
                 if (access.revoked || access.version !== (page.coverage?.scopeVersion ?? 0))
                     throw new Error("MESSAGE_SCOPE_CHANGED");
@@ -218,7 +222,7 @@ export class IndexedDbMessageStore {
         return result;
     }
     async windows() {
-        return this.db.transaction("r", this.coverage, this.accessRows, async () => {
+        return this.transact("r", this.coverage, this.accessRows, async () => {
             if ((await this.scopeAccess()).revoked)
                 return [];
             return this.coverage.where("scope").equals(this.key).toArray();
@@ -232,7 +236,7 @@ export class IndexedDbMessageStore {
     }
     /** Only fresh, server-confirmed authorization may lift this durable tombstone. */
     async authorizeScope(expectedVersion) {
-        await this.db.transaction("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
+        await this.transact("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
             const access = await this.scopeAccess();
             if (access.version !== expectedVersion)
                 throw new Error("MESSAGE_SCOPE_CHANGED");
@@ -253,7 +257,7 @@ export class IndexedDbMessageStore {
     }
     /** Persist the denial first; failed cleanup must never make cached rows readable. */
     async revokeScope(expectedVersion) {
-        const access = await this.db.transaction("rw", this.accessRows, async () => {
+        const access = await this.transact("rw", this.accessRows, async () => {
             const old = await this.scopeAccess();
             if (expectedVersion !== undefined && old.version !== expectedVersion)
                 return old;
@@ -261,7 +265,7 @@ export class IndexedDbMessageStore {
             await this.accessRows.put(next);
             return next;
         });
-        await this.db.transaction("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
+        await this.transact("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
             const current = await this.scopeAccess();
             if (current.version === access.version && current.revoked)
                 await this.clearScopeRows();
@@ -270,7 +274,7 @@ export class IndexedDbMessageStore {
     }
     /** A durable epoch prevents another tab's pre-reset request from restoring rows. */
     async resetThread(thread, revoked = false, scopeVersion = 0) {
-        return this.db.transaction("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
+        return this.transact("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
             const access = await this.scopeAccess();
             if (access.version !== scopeVersion)
                 throw new Error("MESSAGE_SCOPE_CHANGED");
@@ -287,7 +291,7 @@ export class IndexedDbMessageStore {
         });
     }
     async removeThread(thread) {
-        await this.db.transaction("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
+        await this.transact("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
             await this.controls.where("[scope+thread]").equals([this.key, thread]).delete();
             await this.rows.where("[scope+thread]").equals([this.key, thread]).delete();
             await this.legacy.where("[scope+thread]").equals([this.key, thread]).delete();
@@ -295,14 +299,14 @@ export class IndexedDbMessageStore {
         });
     }
     async clear() {
-        await this.db.transaction("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
+        await this.transact("rw", [this.rows, this.legacy, this.coverage, this.accessRows, this.controls], async () => {
             await this.controls.where("scope").equals(this.key).delete();
             await this.legacy.where("scope").equals(this.key).delete();
             await this.rows.where("scope").equals(this.key).delete();
             await this.coverage.where("scope").equals(this.key).delete();
         });
     }
-    close() { this.db.close(); }
+    close() { this.closed = true; this.db.close(); }
 }
 /** Keep tombstones monotonic; applications can supply stricter domain reducers. */
 export function mergeStoredMessage(previous, incoming) {

package/lib/runtime/readCounts.js

@@ -238,7 +238,7 @@ export class ReadCountsClient {
                     this.heartbeat = undefined;
                 }
                 this.options.onError?.(error);
-                if (!isResponseCacheAuthorityError(error) && !/READ_COUNTS_HTTP_4\d\d|INVALID_READ_COUNTS/.test(String(error)) && this.retries < 3) {
+                if (!isResponseCacheAuthorityError(error) && (!/READ_COUNTS_HTTP_4\d\d|INVALID_READ_COUNTS/.test(String(error)) || /READ_COUNTS_HTTP_(409|429)/.test(String(error))) && this.retries < 3) {
                     retryDelay = 1000 * 2 ** this.retries++;
                     this.dirty = true;
                 }

package/lib/runtime/responseCache.d.ts

@@ -20,6 +20,7 @@ export type ResponseCacheOptions<T> = {
 export declare class IndexedDbResponseCache<T> {
     private scope;
     private options;
+    private transact;
     private db;
     private rows;
     private epochs;

package/lib/runtime/responseCache.js

@@ -1,3 +1,4 @@
+import { recoverableTransactions } from "./indexedDbRecovery.js";
 import { Dexie } from "dexie";
 import { WindowedTasks } from "./coalescer.js";
 export function isResponseCacheAuthorityError(error) {
@@ -18,6 +19,7 @@ export async function assertResponseCacheAccess(access, expectedVersion) {
 export class IndexedDbResponseCache {
     scope;
     options;
+    transact;
     db;
     rows;
     epochs;
@@ -34,6 +36,7 @@ export class IndexedDbResponseCache {
             if (!Number.isSafeInteger(value) || value < 1 || value > max)
                 throw new Error("INVALID_RESPONSE_CACHE_LIMIT");
         this.db = new Dexie(options.name ?? "pmate-chat-response-windows", { indexedDB: options.indexedDB ?? globalThis.indexedDB, IDBKeyRange: globalThis.IDBKeyRange });
+        this.transact = recoverableTransactions(this.db, () => this.closed);
         this.db.version(1).stores({ windows: "[scope+key],scope", epochs: "scope" });
         this.rows = this.db.table("windows");
         this.epochs = this.db.table("epochs");
@@ -52,7 +55,7 @@ export class IndexedDbResponseCache {
         // Ordinary cache reads must not take an IndexedDB write lock. Only an
         // authority transition needs the atomic epoch bump and range deletion.
         if (access.version > storedVersion)
-            await this.db.transaction("rw", this.rows, this.epochs, async () => {
+            await this.transact("rw", this.rows, this.epochs, async () => {
                 const current = await this.epochs.get(this.scope);
                 const version = current?.accessVersion ?? 0;
                 if (access.version < version)
@@ -69,7 +72,7 @@ export class IndexedDbResponseCache {
         if (this.closed)
             throw new Error("RESPONSE_CACHE_CLOSED");
         await this.synchronizeAccess();
-        return this.db.transaction("r", this.rows, this.epochs, async () => {
+        return this.transact("r", this.rows, this.epochs, async () => {
             const epoch = (await this.epochs.get(this.scope))?.epoch ?? 0;
             const row = await this.rows.get([this.scope, key]);
             return { epoch, cached: row?.epoch === epoch ? { value: row.value, time: row.time } : undefined };
@@ -82,7 +85,7 @@ export class IndexedDbResponseCache {
         if (keys.length > 128)
             throw new Error("RESPONSE_CACHE_SELECTION_TOO_LARGE");
         await this.synchronizeAccess();
-        return this.db.transaction("r", this.rows, this.epochs, async () => {
+        return this.transact("r", this.rows, this.epochs, async () => {
             const epoch = (await this.epochs.get(this.scope))?.epoch ?? 0, unique = [...new Set(keys)];
             const rows = await this.rows.bulkGet(unique.map(key => [this.scope, key]));
             return new Map(unique.map((key, index) => { const row = rows[index]; return [key, { epoch, cached: row?.epoch === epoch ? { value: row.value, time: row.time } : undefined }]; }));
@@ -109,7 +112,7 @@ export class IndexedDbResponseCache {
             return Promise.reject(new Error("RESPONSE_CACHE_CLOSED"));
         if (!Number.isSafeInteger(version) || version < 1)
             return Promise.reject(new Error("INVALID_RESPONSE_SCOPE_VERSION"));
-        const task = this.db.transaction("rw", this.rows, this.epochs, async () => {
+        const task = this.transact("rw", this.rows, this.epochs, async () => {
             const current = await this.epochs.get(this.scope);
             if ((current?.accessVersion ?? 0) >= version)
                 return;
@@ -123,7 +126,7 @@ export class IndexedDbResponseCache {
         if (this.closed)
             return Promise.reject(new Error("RESPONSE_CACHE_CLOSED"));
         const task = (async () => {
-            await this.db.transaction("rw", this.rows, this.epochs, async () => {
+            await this.transact("rw", this.rows, this.epochs, async () => {
                 const current = await this.epochs.get(this.scope);
                 const epoch = (current?.epoch ?? 0) + 1;
                 await this.epochs.put({ scope: this.scope, epoch, accessVersion: current?.accessVersion });
@@ -150,7 +153,7 @@ export class IndexedDbResponseCache {
                 const batch = this.pending.slice(0, this.options.batchRecords ?? 128);
                 try {
                     await this.synchronizeAccess();
-                    const outcome = await this.db.transaction("rw", this.rows, this.epochs, async () => {
+                    const outcome = await this.transact("rw", this.rows, this.epochs, async () => {
                         const epoch = (await this.epochs.get(this.scope))?.epoch ?? 0;
                         const valid = batch.filter(write => write.row.epoch === epoch);
                         const conditional = valid.filter(write => write.expectedRevision !== undefined);

package/lib/types/chatInput.d.ts

@@ -1,3 +1,4 @@
+import type { ChatCommandConfig } from "../commands";
 import type { MentionConfig, ChatMention } from "../mentions/model";
 import type { ClipboardEventHandler, ComponentType, DragEventHandler, ReactNode } from "react";
 import type { ChatAttachment } from "./attachment";
@@ -121,6 +122,8 @@ export type ChatImageConfig = {
     uploadImage?: (file: File) => Promise<ChatImageUploadResult>;
 };
 export type ChatInputBaseProps = {
+    /** Host-provided slash commands; omit to disable command suggestions. Selection never sends. */
+    commands?: ChatCommandConfig;
     /** Group members supplied by the host; omit for ordinary text input. */
     mentions?: MentionConfig;
     /** Use a taller composer with actions in a bottom toolbar. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmate/chat-sdk",
-  "version": "0.12.0-next.70",
+  "version": "0.12.0-next.72",
   "description": "Local-first chat SDK, message subscriptions, reading state, and shared chat UI primitives",
   "type": "module",
   "main": "./lib/index.js",