mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-29 06:28:23 +02:00
A complete UX upgrade for chat sending → receiving → recovering.
* StatusPill replaces the orphan spinner — stage-aware copy
("Reading files · 12s", "Searching the web · 14s", "Typing · 24s"),
shimmer text, monotonic timer, derived effective status, > 60s
warning tone, > 5min cancel button.
* WS writethrough on task:queued / task:dispatch / task:cancelled so
pendingTask cache stays in sync with the daemon state machine without
invalidate-refetch latency. broadcastTaskDispatch now includes
chat_session_id when the task is for a chat session — the existing
payload only carried it on the generic task: events, leaving the pill
stuck at "Queued" until completion.
* Failure fallback — FailTask writes a chat_message tagged with
failure_reason (mirrors the issue path's system comment, gated on
retried==nil). Front-end renders an inline note ("Connection failed",
with a Show details collapsible) instead of the previous black hole.
* Elapsed timing — chat_message.elapsed_ms persists task.completed_at -
task.created_at on success/failure rows. UI shows "Replied in 38s" /
"Failed after 12s" beneath assistant bubbles. Format helper shared
between StatusPill and the persisted caption so the live timer and
final reading never disagree.
* Optimistic burst rebalanced — pendingTask seed + created_at moved
before the HTTP roundtrip so the pill appears the instant the user
hits send; handleStop is fire-and-forget so cancel feels immediate
(server confirmation arrives via task:cancelled WS).
* Presence integration — chat avatars use ActorAvatar (status dot +
hover card); OfflineBanner above the input on offline/unstable;
SessionDropdown shows per-row in-flight/unread pip plus a
cross-session aggregate pip on the closed trigger.
* Editor blur on send so the caret stops competing with the StatusPill
/ streaming reply for the user's attention.
* Chat panel isOpen now persists globally; defaults to OPEN for new
users (storage key absence) so the feature is discoverable. Existing
users' prior choice is respected.
* DB: migrations 062 (failure_reason) + 063 (elapsed_ms), both
ADD COLUMN NULL — fast, non-blocking, backwards compatible.
* WS: task:failed chat path now invalidates chatKeys.messages — fixes
a pre-existing bug where the failure bubble required a page refresh
to appear.
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
238 lines
8.6 KiB
TypeScript
238 lines
8.6 KiB
TypeScript
import { create } from "zustand";
|
|
import type { StorageAdapter } from "../types";
|
|
import { getCurrentSlug, registerForWorkspaceRehydration } from "../platform/workspace-storage";
|
|
import { createLogger } from "../logger";
|
|
|
|
const logger = createLogger("chat.store");
|
|
|
|
const AGENT_STORAGE_KEY = "multica:chat:selectedAgentId";
|
|
const SESSION_STORAGE_KEY = "multica:chat:activeSessionId";
|
|
/** Drafts are stored as one JSON blob per workspace: { [sessionId]: text }. */
|
|
const DRAFTS_KEY = "multica:chat:drafts";
|
|
/** Placeholder sessionId for a chat that hasn't been created yet. */
|
|
export const DRAFT_NEW_SESSION = "__new__";
|
|
const CHAT_WIDTH_KEY = "multica:chat:width";
|
|
const CHAT_HEIGHT_KEY = "multica:chat:height";
|
|
const CHAT_EXPANDED_KEY = "multica:chat:expanded";
|
|
/** Focus mode is a personal preference — global across workspaces/sessions. */
|
|
const FOCUS_MODE_KEY = "multica:chat:focusMode";
|
|
/**
|
|
* Open/closed preference, persisted globally (not per-workspace) — most users
|
|
* have one habitual chat-panel preference across workspaces. Missing key =
|
|
* new user (or cleared storage); default to OPEN so the chat is discoverable.
|
|
* Once the user toggles even once, their explicit choice is respected on
|
|
* every subsequent reload.
|
|
*/
|
|
const OPEN_KEY = "multica:chat:isOpen";
|
|
|
|
function readDrafts(storage: StorageAdapter, key: string): Record<string, string> {
|
|
const raw = storage.getItem(key);
|
|
if (!raw) return {};
|
|
try {
|
|
const parsed = JSON.parse(raw);
|
|
return typeof parsed === "object" && parsed !== null ? parsed : {};
|
|
} catch {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function writeDrafts(storage: StorageAdapter, key: string, drafts: Record<string, string>) {
|
|
// Prune empty entries so the blob doesn't grow unbounded.
|
|
const pruned: Record<string, string> = {};
|
|
for (const [k, v] of Object.entries(drafts)) {
|
|
if (v) pruned[k] = v;
|
|
}
|
|
if (Object.keys(pruned).length === 0) {
|
|
storage.removeItem(key);
|
|
} else {
|
|
storage.setItem(key, JSON.stringify(pruned));
|
|
}
|
|
}
|
|
|
|
export const CHAT_MIN_W = 360;
|
|
export const CHAT_MIN_H = 480;
|
|
export const CHAT_DEFAULT_W = 420;
|
|
export const CHAT_DEFAULT_H = 600;
|
|
|
|
/**
|
|
* Kept as a public type because existing consumers (chat-message-list,
|
|
* views/chat types) import it. Items themselves no longer live in the
|
|
* store — they flow through the React Query cache keyed by task id.
|
|
*/
|
|
export interface ChatTimelineItem {
|
|
seq: number;
|
|
type: "tool_use" | "tool_result" | "thinking" | "text" | "error";
|
|
tool?: string;
|
|
content?: string;
|
|
input?: Record<string, unknown>;
|
|
output?: string;
|
|
}
|
|
|
|
/**
|
|
* A derived "where I am" pointer — not stored, recomputed each render from
|
|
* the current route + react-query cache. The type is exported because
|
|
* consumers (buildAnchorMarkdown, chip props) share the same shape.
|
|
*/
|
|
export interface ContextAnchor {
|
|
type: "issue" | "project";
|
|
/** UUID for `issue`, UUID for `project`. */
|
|
id: string;
|
|
/** Human-readable label: issue identifier (MUL-1) or project title. */
|
|
label: string;
|
|
/** Optional secondary text — issue title for issue anchors. */
|
|
subtitle?: string;
|
|
}
|
|
|
|
export interface ChatState {
|
|
isOpen: boolean;
|
|
activeSessionId: string | null;
|
|
selectedAgentId: string | null;
|
|
showHistory: boolean;
|
|
/** Drafts per session: sessionId (or DRAFT_NEW_SESSION) → markdown text. */
|
|
inputDrafts: Record<string, string>;
|
|
/**
|
|
* When on, the chat tracks whatever issue/project/inbox-item the user is
|
|
* looking at and prepends it to outgoing messages. Persisted globally so
|
|
* the preference survives workspace switches and reloads.
|
|
*/
|
|
focusMode: boolean;
|
|
/** Raw user-chosen size — no clamp applied. UI layer clamps at render time. */
|
|
chatWidth: number;
|
|
chatHeight: number;
|
|
isExpanded: boolean;
|
|
setOpen: (open: boolean) => void;
|
|
toggle: () => void;
|
|
setActiveSession: (id: string | null) => void;
|
|
setSelectedAgentId: (id: string) => void;
|
|
setShowHistory: (show: boolean) => void;
|
|
/** sessionId accepts a real session UUID or DRAFT_NEW_SESSION. */
|
|
setInputDraft: (sessionId: string, draft: string) => void;
|
|
clearInputDraft: (sessionId: string) => void;
|
|
setFocusMode: (on: boolean) => void;
|
|
/** Persist raw size and auto-exit expanded mode. */
|
|
setChatSize: (width: number, height: number) => void;
|
|
setExpanded: (expanded: boolean) => void;
|
|
}
|
|
|
|
export interface ChatStoreOptions {
|
|
storage: StorageAdapter;
|
|
}
|
|
|
|
export function createChatStore(options: ChatStoreOptions) {
|
|
const { storage } = options;
|
|
|
|
const wsKey = (base: string) => {
|
|
const slug = getCurrentSlug();
|
|
return slug ? `${base}:${slug}` : base;
|
|
};
|
|
|
|
// Resolve initial isOpen from storage. The three-state read (null /
|
|
// "true" / "false") is what enables the "new user → open" default while
|
|
// still honouring an explicit "I closed it" choice on every reload.
|
|
const storedOpen = storage.getItem(OPEN_KEY);
|
|
const initialIsOpen = storedOpen === null ? true : storedOpen === "true";
|
|
|
|
const store = create<ChatState>((set, get) => ({
|
|
isOpen: initialIsOpen,
|
|
activeSessionId: storage.getItem(wsKey(SESSION_STORAGE_KEY)),
|
|
selectedAgentId: storage.getItem(wsKey(AGENT_STORAGE_KEY)),
|
|
showHistory: false,
|
|
inputDrafts: readDrafts(storage, wsKey(DRAFTS_KEY)),
|
|
focusMode: storage.getItem(FOCUS_MODE_KEY) === "true",
|
|
chatWidth: Number(storage.getItem(CHAT_WIDTH_KEY)) || CHAT_DEFAULT_W,
|
|
chatHeight: Number(storage.getItem(CHAT_HEIGHT_KEY)) || CHAT_DEFAULT_H,
|
|
isExpanded: storage.getItem(wsKey(CHAT_EXPANDED_KEY)) === "true",
|
|
setOpen: (open) => {
|
|
logger.debug("setOpen", { from: get().isOpen, to: open });
|
|
storage.setItem(OPEN_KEY, String(open));
|
|
set({ isOpen: open });
|
|
},
|
|
toggle: () => {
|
|
const next = !get().isOpen;
|
|
logger.debug("toggle", { to: next });
|
|
storage.setItem(OPEN_KEY, String(next));
|
|
set({ isOpen: next });
|
|
},
|
|
setActiveSession: (id) => {
|
|
logger.info("setActiveSession", { from: get().activeSessionId, to: id });
|
|
if (id) {
|
|
storage.setItem(wsKey(SESSION_STORAGE_KEY), id);
|
|
} else {
|
|
storage.removeItem(wsKey(SESSION_STORAGE_KEY));
|
|
}
|
|
set({ activeSessionId: id });
|
|
},
|
|
setSelectedAgentId: (id) => {
|
|
logger.info("setSelectedAgentId", { from: get().selectedAgentId, to: id });
|
|
storage.setItem(wsKey(AGENT_STORAGE_KEY), id);
|
|
set({ selectedAgentId: id });
|
|
},
|
|
setShowHistory: (show) => {
|
|
logger.debug("setShowHistory", { to: show });
|
|
set({ showHistory: show });
|
|
},
|
|
setInputDraft: (sessionId, draft) => {
|
|
// Debug level — onUpdate fires on every keystroke.
|
|
logger.debug("setInputDraft", { sessionId, length: draft.length });
|
|
const next = { ...get().inputDrafts, [sessionId]: draft };
|
|
writeDrafts(storage, wsKey(DRAFTS_KEY), next);
|
|
set({ inputDrafts: next });
|
|
},
|
|
setFocusMode: (on) => {
|
|
logger.info("setFocusMode", { to: on });
|
|
if (on) storage.setItem(FOCUS_MODE_KEY, "true");
|
|
else storage.removeItem(FOCUS_MODE_KEY);
|
|
set({ focusMode: on });
|
|
},
|
|
clearInputDraft: (sessionId) => {
|
|
const current = get().inputDrafts;
|
|
if (!(sessionId in current)) {
|
|
logger.debug("clearInputDraft skipped (no draft)", { sessionId });
|
|
return;
|
|
}
|
|
logger.info("clearInputDraft", { sessionId });
|
|
const next = { ...current };
|
|
delete next[sessionId];
|
|
writeDrafts(storage, wsKey(DRAFTS_KEY), next);
|
|
set({ inputDrafts: next });
|
|
},
|
|
setChatSize: (w, h) => {
|
|
logger.debug("setChatSize", { w, h });
|
|
storage.setItem(CHAT_WIDTH_KEY, String(w));
|
|
storage.setItem(CHAT_HEIGHT_KEY, String(h));
|
|
// Dragging = user chose a manual size → exit expanded mode
|
|
storage.removeItem(wsKey(CHAT_EXPANDED_KEY));
|
|
set({ chatWidth: w, chatHeight: h, isExpanded: false });
|
|
},
|
|
setExpanded: (expanded) => {
|
|
logger.info("setExpanded", { to: expanded });
|
|
if (expanded) {
|
|
storage.setItem(wsKey(CHAT_EXPANDED_KEY), "true");
|
|
} else {
|
|
storage.removeItem(wsKey(CHAT_EXPANDED_KEY));
|
|
}
|
|
set({ isExpanded: expanded });
|
|
},
|
|
}));
|
|
|
|
registerForWorkspaceRehydration(() => {
|
|
const nextSession = storage.getItem(wsKey(SESSION_STORAGE_KEY));
|
|
const nextAgent = storage.getItem(wsKey(AGENT_STORAGE_KEY));
|
|
const nextDrafts = readDrafts(storage, wsKey(DRAFTS_KEY));
|
|
logger.info("workspace rehydration", {
|
|
prevSession: store.getState().activeSessionId,
|
|
nextSession,
|
|
prevAgent: store.getState().selectedAgentId,
|
|
nextAgent,
|
|
draftCount: Object.keys(nextDrafts).length,
|
|
});
|
|
store.setState({
|
|
activeSessionId: nextSession,
|
|
selectedAgentId: nextAgent,
|
|
inputDrafts: nextDrafts,
|
|
});
|
|
});
|
|
|
|
return store;
|
|
}
|