@beanx/cathygo-web-core 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,30 @@
+# @beanx/cathygo-web-core
+
+Shared CathyGO Web UI and state package.
+
+Current active upgrade plan:
+
+- [`../../docs/session-runtime-vnext-upgrade-plan.md`](../../docs/session-runtime-vnext-upgrade-plan.md)
+
+## vNext Role
+
+This package owns the selected-session view model for:
+
+- single-session transcript rendering
+- session event reduction
+- optimistic user input reconciliation by `client_input_id`
+- session-scoped stop state
+- replay-safe hydration after refresh or reconnect
+- selectors used by local Web and `beanx-home`
+
+Host applications still own account routing, agent selection, transport setup,
+selected session id, lightweight session lists, and product-specific shell UI.
+They should not own a second session execution runtime.
+
+## First vNext Deliverables
+
+- Keep the current single-session `ChatState` reducer exported.
+- Add `SessionViewState`, session event reducer, and current-session selectors.
+- Add reducer tests for interrupt, replay, stop, and optimistic reconciliation.
+- Prove the implementation in `cathygo-agent/web` before publishing
+  `@beanx/cathygo-web-core@0.2.0`.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { Dispatch, RefObject } from 'react';
-import { AgentActivity, LearningTurnEvent, ConversationSummary, GatewayModelStatus } from '@beanx/cathygo-protocol';
+import { AgentActivity, SessionRuntimeSnapshot, LearningTurnEvent, ConversationSummary, GatewayModelStatus } from '@beanx/cathygo-protocol';
 
 type AgentIdentityStatus = {
     agent_id?: string | null;
@@ -96,6 +96,7 @@ type ChatState = {
     messages: ChatMessage$1[];
     activitiesByTurnId: Record<string, AgentActivity[]>;
     progressByTurnId: Record<string, AgentRunProgress>;
+    runtime?: SessionRuntimeSnapshot;
     status: string;
     contextMessageCount?: number;
     error?: string;
@@ -123,20 +124,32 @@ type AgentRunThinking = {
 type ChatAction = {
     type: 'session.created';
     sessionId: string;
+} | {
+    type: 'session.loading';
+    sessionId: string;
 } | {
     type: 'session.loaded';
     sessionId: string;
     messages: ChatMessage$1[];
     activities?: AgentActivity[];
+    runtime?: SessionRuntimeSnapshot;
+} | {
+    type: 'session.load.failed';
+    sessionId: string;
+    error: string;
+    code?: string;
 } | {
     type: 'user.sent';
     id: string;
     content: string;
     parts?: ChatMessagePart[];
 } | {
-    type: 'turn.accepted';
+    type: 'session.input.accepted';
     sessionId: string;
     turnId: string;
+    clientInputId?: string;
+    clientTurnId?: string;
+    idempotentReplay?: boolean;
 } | {
     type: 'send.failed';
     id: string;
@@ -174,6 +187,9 @@ type CathyGOChatAppProps = {
     gatewayLinked?: boolean;
     model?: GatewayModelStatus;
     agentStatus?: AgentIdentityStatus;
+    activeSessionId?: string;
+    loadingSessionId?: string;
+    debugPanels?: boolean;
     homeAvatarSrc?: string;
     onDraftChange: (value: string) => void;
     onFilesSelected?: (files: File[]) => void;
@@ -184,15 +200,16 @@ type CathyGOChatAppProps = {
     onSuggest?: (text: string) => void;
     onOpenChat: (sessionId: string) => void;
     onNewChat: () => void;
+    onSettingsOpen?: () => void;
 };
-declare function CathyGOChatApp({ screen, chat, chats, draft, attachments, attachmentPolicy, composerError, busy, connectionStatus, gatewayLinked, model, agentStatus, homeAvatarSrc, onDraftChange, onFilesSelected, onRemoveAttachment, onSendMessage, onSendHomeMessage, onAbort, onSuggest, onOpenChat, onNewChat, }: CathyGOChatAppProps): react.JSX.Element;
+declare function CathyGOChatApp({ screen, chat, chats, draft, attachments, attachmentPolicy, composerError, busy, connectionStatus, gatewayLinked, model, agentStatus, activeSessionId, loadingSessionId, debugPanels, homeAvatarSrc, onDraftChange, onFilesSelected, onRemoveAttachment, onSendMessage, onSendHomeMessage, onAbort, onSuggest, onOpenChat, onNewChat, onSettingsOpen, }: CathyGOChatAppProps): react.JSX.Element;
 
 type UseCathyGOChatResult = {
     chat: ChatState;
     dispatchChat: Dispatch<ChatAction>;
     resetChat: () => void;
     createSession: (sessionId: string) => void;
-    loadSession: (sessionId: string, messages: ChatMessage$1[], activities?: ChatState['activitiesByTurnId'][string]) => void;
+    loadSession: (sessionId: string, messages: ChatMessage$1[], activities?: ChatState['activitiesByTurnId'][string], runtime?: SessionRuntimeSnapshot) => void;
     applyTurnEvent: (event: LearningTurnEvent) => void;
 };
 declare function useCathyGOChat(initialState?: ChatState): UseCathyGOChatResult;
@@ -246,8 +263,9 @@ type ChatTopBarProps = {
     debugUI?: boolean;
     canAbort?: boolean;
     onAbort?: () => void;
+    onSettingsOpen?: () => void;
 };
-declare function ChatTopBar({ agentStatus, connectionStatus, gatewayLinked, model, debugUI, canAbort, onAbort, }: ChatTopBarProps): react.JSX.Element;
+declare function ChatTopBar({ agentStatus, connectionStatus, gatewayLinked, model, debugUI, canAbort, onAbort, onSettingsOpen, }: ChatTopBarProps): react.JSX.Element;
 
 type ChatTranscriptProps = {
     messages: ChatMessage$1[];
@@ -325,19 +343,22 @@ interface ChatHomeViewProps {
     model?: GatewayModelStatus;
     agentStatus?: AgentIdentityStatus;
     avatarSrc?: string;
+    onSettingsOpen?: () => void;
     onDraftChange: (value: string) => void;
     onFilesSelected?: (files: File[]) => void;
     onRemoveAttachment?: (id: string) => void;
     onSend: (modeId: ChatHomeModeId) => void;
 }
-declare function ChatHomeView({ draft, attachments, attachmentPolicy, error, busy, connectionStatus, gatewayLinked, model, agentStatus, avatarSrc, onDraftChange, onFilesSelected, onRemoveAttachment, onSend, }: ChatHomeViewProps): react.JSX.Element;
+declare function ChatHomeView({ draft, attachments, attachmentPolicy, error, busy, connectionStatus, gatewayLinked, model, agentStatus, avatarSrc, onSettingsOpen, onDraftChange, onFilesSelected, onRemoveAttachment, onSend, }: ChatHomeViewProps): react.JSX.Element;
 
 interface ChatListViewProps {
     chats: ConversationSummary[];
+    activeSessionId?: string;
+    loadingSessionId?: string;
     onOpen: (sessionId: string) => void;
     onNewChat: () => void;
 }
-declare function ChatListView({ chats, onOpen, onNewChat }: ChatListViewProps): react.JSX.Element;
+declare function ChatListView({ chats, activeSessionId, loadingSessionId, onOpen, onNewChat, }: ChatListViewProps): react.JSX.Element;
 
 interface ChatViewProps {
     chat: ChatState;
@@ -345,18 +366,21 @@ interface ChatViewProps {
     attachments?: PendingComposerAttachment[];
     attachmentPolicy?: ComposerAttachmentPolicy;
     composerError?: string;
+    busy?: boolean;
     connectionStatus: string;
     gatewayLinked?: boolean;
     model?: GatewayModelStatus;
     agentStatus?: AgentIdentityStatus;
+    debugPanels?: boolean;
     onDraftChange: (value: string) => void;
     onFilesSelected?: (files: File[]) => void;
     onRemoveAttachment?: (id: string) => void;
     onSend: () => void;
     onAbort: () => void;
     onSuggest?: (text: string) => void;
+    onSettingsOpen?: () => void;
 }
-declare function ChatView({ chat, draft, attachments, attachmentPolicy, composerError, connectionStatus, gatewayLinked, model, agentStatus, onDraftChange, onFilesSelected, onRemoveAttachment, onSend, onAbort, onSuggest, }: ChatViewProps): react.JSX.Element;
+declare function ChatView({ chat, draft, attachments, attachmentPolicy, composerError, busy: externalBusy, connectionStatus, gatewayLinked, model, agentStatus, debugPanels, onDraftChange, onFilesSelected, onRemoveAttachment, onSend, onAbort, onSuggest, onSettingsOpen, }: ChatViewProps): react.JSX.Element;
 
 declare function modelStatusText(model: GatewayModelStatus): string;
 

package/dist/index.js

@@ -1,15 +1,6 @@
 // src/features/chat/ChatHomeView.tsx
 import { useRef as useRef2, useState as useState2 } from "react";
 
-// src/chat-ui/agentIdentity.ts
-function agentDisplayName(status) {
-  return status?.display_name?.trim() || status?.agent_id?.trim() || "CathyGO Agent";
-}
-function agentShortId(status) {
-  const value = status?.agent_short_id?.trim();
-  return value || void 0;
-}
-
 // src/chat-ui/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function IconNewChat({ className }) {
@@ -773,6 +764,15 @@ function IconSend({ className }) {
   );
 }
 
+// src/chat-ui/agentIdentity.ts
+function agentDisplayName(status) {
+  return status?.display_name?.trim() || status?.agent_id?.trim() || "CathyGO Agent";
+}
+function agentShortId(status) {
+  const value = status?.agent_short_id?.trim();
+  return value || void 0;
+}
+
 // src/chat-ui/components/ChatAgentIdentity.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChatAgentIdentity({ agentStatus }) {
@@ -816,7 +816,8 @@ function ChatTopBar({
   model,
   debugUI,
   canAbort,
-  onAbort
+  onAbort,
+  onSettingsOpen
 }) {
   const tone = connectionTone(connectionStatus, gatewayLinked);
   const statusLabel = gatewayLinked ? "Connected" : connectionStatus;
@@ -833,6 +834,17 @@ function ChatTopBar({
         }
       ),
       debugUI ? /* @__PURE__ */ jsx3("span", { className: "chat-topbar-debug", children: "Debug" }) : null,
+      onSettingsOpen ? /* @__PURE__ */ jsx3(
+        "button",
+        {
+          "aria-label": "\u6253\u5F00\u8BBE\u7F6E",
+          className: "chat-topbar-icon-btn",
+          onClick: onSettingsOpen,
+          title: "\u8BBE\u7F6E",
+          type: "button",
+          children: /* @__PURE__ */ jsx3(IconSettings, {})
+        }
+      ) : null,
       canAbort ? /* @__PURE__ */ jsx3("button", { className: "chat-topbar-abort", onClick: onAbort, type: "button", children: "\u505C\u6B62" }) : null
     ] })
   ] });
@@ -1108,6 +1120,7 @@ function ChatHomeView({
   model,
   agentStatus,
   avatarSrc,
+  onSettingsOpen,
   onDraftChange,
   onFilesSelected,
   onRemoveAttachment,
@@ -1130,7 +1143,8 @@ function ChatHomeView({
         connectionStatus,
         gatewayLinked,
         model,
-        agentStatus
+        agentStatus,
+        onSettingsOpen
       }
     ),
     /* @__PURE__ */ jsxs5("div", { className: "chat-home-center", children: [
@@ -1188,29 +1202,37 @@ function stripMathForPreview(text, maxLen = 80) {
 
 // src/features/chat/ChatListView.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function ChatListView({ chats, onOpen, onNewChat }) {
+function ChatListView({
+  chats,
+  activeSessionId,
+  loadingSessionId,
+  onOpen,
+  onNewChat
+}) {
   return /* @__PURE__ */ jsxs6("section", { className: "cathygo-chat-panel list-workspace", children: [
     /* @__PURE__ */ jsxs6("header", { className: "page-topbar", children: [
       /* @__PURE__ */ jsx6("h1", { className: "page-topbar-title", children: "\u5BF9\u8BDD\u5386\u53F2" }),
       /* @__PURE__ */ jsx6("button", { className: "primary-action", onClick: onNewChat, type: "button", children: "\u65B0\u5BF9\u8BDD" })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "chat-column list-column", children: chats.length ? /* @__PURE__ */ jsx6("div", { className: "history-list", children: chats.map((chat) => /* @__PURE__ */ jsxs6(
-      "button",
-      {
-        className: "history-row",
-        onClick: () => onOpen(chat.session_id),
-        type: "button",
-        children: [
-          /* @__PURE__ */ jsx6("strong", { children: chat.title }),
-          /* @__PURE__ */ jsx6("span", { children: chat.preview ? stripMathForPreview(chat.preview, 120) : "\u6682\u65E0\u9884\u89C8" }),
-          /* @__PURE__ */ jsxs6("small", { children: [
-            chat.message_count,
-            " \u6761\u6D88\u606F"
-          ] })
-        ]
-      },
-      chat.session_id
-    )) }) : /* @__PURE__ */ jsx6("p", { className: "empty", children: "\u6682\u65E0\u5BF9\u8BDD\u3002\u521B\u5EFA\u65B0\u5BF9\u8BDD\u540E\u4F1A\u51FA\u73B0\u5728\u8FD9\u91CC\u3002" }) })
+    /* @__PURE__ */ jsx6("div", { className: "chat-column list-column", children: chats.length ? /* @__PURE__ */ jsx6("div", { className: "history-list", children: chats.map((chat) => {
+      const active = chat.session_id === activeSessionId;
+      const loading = chat.session_id === loadingSessionId;
+      return /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          "aria-current": active ? "true" : void 0,
+          className: `history-row${active ? " active" : ""}${loading ? " loading" : ""}`,
+          onClick: () => onOpen(chat.session_id),
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx6("strong", { children: chat.title }),
+            /* @__PURE__ */ jsx6("span", { children: chat.preview ? stripMathForPreview(chat.preview, 120) : "\u6682\u65E0\u9884\u89C8" }),
+            /* @__PURE__ */ jsx6("small", { children: loading ? "\u6B63\u5728\u6253\u5F00" : `${chat.message_count} \u6761\u6D88\u606F` })
+          ]
+        },
+        chat.session_id
+      );
+    }) }) : /* @__PURE__ */ jsx6("p", { className: "empty", children: "\u6682\u65E0\u5BF9\u8BDD\u3002\u521B\u5EFA\u65B0\u5BF9\u8BDD\u540E\u4F1A\u51FA\u73B0\u5728\u8FD9\u91CC\u3002" }) })
   ] });
 }
 
@@ -1631,22 +1653,26 @@ function ChatView({
   attachments,
   attachmentPolicy,
   composerError,
+  busy: externalBusy,
   connectionStatus,
   gatewayLinked,
   model,
   agentStatus,
+  debugPanels = true,
   onDraftChange,
   onFilesSelected,
   onRemoveAttachment,
   onSend,
   onAbort,
-  onSuggest
+  onSuggest,
+  onSettingsOpen
 }) {
-  const busy = Boolean(chat.activeTurnId);
-  const ready = Boolean(chat.sessionId);
+  const loadingSession = chat.status === "Loading";
+  const busy = Boolean(externalBusy) || loadingSession;
+  const ready = Boolean(chat.sessionId) && !loadingSession;
   const usingMock = model?.provider === "mock";
   const modelLabel = model ? model.model || model.display_name || model.provider : "loading model status";
-  const debugUI = isDebugUIEnabled();
+  const debugUI = debugPanels && isDebugUIEnabled();
   return /* @__PURE__ */ jsxs11("section", { className: "cathygo-chat-panel chat-workspace", children: [
     /* @__PURE__ */ jsx13(
       ChatTopBar,
@@ -1657,7 +1683,8 @@ function ChatView({
         agentStatus,
         debugUI,
         canAbort: Boolean(chat.activeTurnId),
-        onAbort
+        onAbort,
+        onSettingsOpen
       }
     ),
     debugUI ? /* @__PURE__ */ jsxs11("div", { className: "chat-debug-panels", children: [
@@ -1681,16 +1708,17 @@ function ChatView({
       )
     ] }) : null,
     /* @__PURE__ */ jsxs11("div", { className: "chat-main", children: [
-      /* @__PURE__ */ jsx13(
+      loadingSession ? /* @__PURE__ */ jsx13(ChatSessionLoading, {}) : /* @__PURE__ */ jsx13(
         ChatTranscript,
         {
           activeTurnId: chat.activeTurnId,
           activitiesByTurnId: chat.activitiesByTurnId,
           progressByTurnId: chat.progressByTurnId,
           messages: chat.messages,
-          onSuggest: ready && !busy ? onSuggest : void 0
+          onSuggest: ready && !busy && !chat.activeTurnId ? onSuggest : void 0
         }
       ),
+      !loadingSession && chat.status === "Error" && chat.error ? /* @__PURE__ */ jsx13("p", { className: "chat-session-error", children: chat.error }) : null,
       /* @__PURE__ */ jsx13(
         MessageComposer,
         {
@@ -1708,6 +1736,17 @@ function ChatView({
     ] })
   ] });
 }
+function ChatSessionLoading() {
+  return /* @__PURE__ */ jsx13("div", { className: "chat-transcript-wrap", children: /* @__PURE__ */ jsx13("section", { className: "chat-transcript", "aria-busy": "true", "aria-label": "\u6B63\u5728\u52A0\u8F7D\u4F1A\u8BDD", children: /* @__PURE__ */ jsxs11("div", { className: "chat-column session-loading", children: [
+    /* @__PURE__ */ jsx13("div", { className: "session-loading-title" }),
+    /* @__PURE__ */ jsx13("div", { className: "session-loading-line wide" }),
+    /* @__PURE__ */ jsx13("div", { className: "session-loading-line" }),
+    /* @__PURE__ */ jsxs11("div", { className: "session-loading-card", children: [
+      /* @__PURE__ */ jsx13("div", {}),
+      /* @__PURE__ */ jsx13("div", {})
+    ] })
+  ] }) }) });
+}
 
 // src/CathyGOChatApp.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -1724,6 +1763,9 @@ function CathyGOChatApp({
   gatewayLinked,
   model,
   agentStatus,
+  activeSessionId,
+  loadingSessionId,
+  debugPanels = true,
   homeAvatarSrc,
   onDraftChange,
   onFilesSelected,
@@ -1733,10 +1775,20 @@ function CathyGOChatApp({
   onAbort,
   onSuggest,
   onOpenChat,
-  onNewChat
+  onNewChat,
+  onSettingsOpen
 }) {
   if (screen === "history") {
-    return /* @__PURE__ */ jsx14(ChatListView, { chats, onOpen: onOpenChat, onNewChat });
+    return /* @__PURE__ */ jsx14(
+      ChatListView,
+      {
+        activeSessionId,
+        chats,
+        loadingSessionId,
+        onOpen: onOpenChat,
+        onNewChat
+      }
+    );
   }
   if (screen === "home") {
     return /* @__PURE__ */ jsx14(
@@ -1752,6 +1804,7 @@ function CathyGOChatApp({
         gatewayLinked,
         model,
         agentStatus,
+        onSettingsOpen,
         onDraftChange,
         onFilesSelected,
         onRemoveAttachment,
@@ -1766,17 +1819,20 @@ function CathyGOChatApp({
       draft,
       attachments,
       attachmentPolicy,
+      busy,
       composerError,
       connectionStatus,
       gatewayLinked,
       model,
       agentStatus,
+      debugPanels,
       onDraftChange,
       onFilesSelected,
       onRemoveAttachment,
       onSend: onSendMessage,
       onAbort,
-      onSuggest
+      onSuggest,
+      onSettingsOpen
     }
   );
 }
@@ -1805,19 +1861,46 @@ function reduceChat(state, action) {
       errorCode: void 0
     };
   }
-  if (action.type === "session.loaded") {
+  if (action.type === "session.loading") {
     return {
       ...state,
       sessionId: action.sessionId,
       activeTurnId: void 0,
+      messages: [],
+      activitiesByTurnId: {},
+      progressByTurnId: {},
+      status: "Loading",
+      error: void 0,
+      errorCode: void 0
+    };
+  }
+  if (action.type === "session.loaded") {
+    const runtime = action.runtime;
+    const activeTurnId = optionalString(runtime?.active_turn_id);
+    return {
+      ...state,
+      sessionId: action.sessionId,
+      activeTurnId,
       messages: action.messages,
       activitiesByTurnId: groupActivitiesByTurn(action.activities ?? []),
-      progressByTurnId: {},
-      status: "Ready",
+      progressByTurnId: activeTurnId ? setProgress({}, runtimeProgressFromSnapshot(runtime, activeTurnId)) : {},
+      runtime,
+      status: statusFromRuntime(runtime),
       error: void 0,
       errorCode: void 0
     };
   }
+  if (action.type === "session.load.failed") {
+    return {
+      ...state,
+      sessionId: action.sessionId,
+      activeTurnId: void 0,
+      progressByTurnId: {},
+      status: "Error",
+      error: action.error,
+      errorCode: action.code
+    };
+  }
   if (action.type === "user.sent") {
     return {
       ...state,
@@ -1849,11 +1932,19 @@ function reduceChat(state, action) {
       errorCode: action.code
     };
   }
-  if (action.type === "turn.accepted") {
+  if (action.type === "session.input.accepted") {
     return {
       ...state,
       sessionId: action.sessionId,
       activeTurnId: action.turnId,
+      runtime: {
+        ...state.runtime ?? emptyRuntimeSnapshot(),
+        status: "running",
+        active_turn_id: action.turnId,
+        active_turn_ids: [action.turnId],
+        active_client_input_id: action.clientInputId ?? null,
+        active_client_turn_id: action.clientTurnId ?? null
+      },
       progressByTurnId: setProgress(state.progressByTurnId, {
         turnId: action.turnId,
         phase: "queued",
@@ -1873,8 +1964,50 @@ function reduceChat(state, action) {
     ...state,
     eventCount: state.eventCount + 1,
     sessionId: payload.session_id ?? state.sessionId,
-    activeTurnId: payload.turn_id ?? state.activeTurnId
+    activeTurnId: payload.turn_id ?? state.activeTurnId,
+    runtime: runtimeFromEvent(state.runtime, event)
   };
+  if (event.event === "session.created") {
+    return {
+      ...next,
+      status: "Ready",
+      error: void 0,
+      errorCode: void 0
+    };
+  }
+  if (event.event === "session.deleted") {
+    return {
+      ...next,
+      activeTurnId: void 0,
+      progressByTurnId: {},
+      status: "Archived"
+    };
+  }
+  if (event.event === "session.input.accepted") {
+    const turnId = optionalString(payload.turn_id);
+    if (!turnId) return next;
+    return {
+      ...next,
+      activeTurnId: turnId,
+      progressByTurnId: setProgress(next.progressByTurnId, {
+        turnId,
+        phase: "queued",
+        status: "running",
+        summary: "\u6B63\u5728\u63D0\u4EA4\u95EE\u9898",
+        detail: "\u7B49\u5F85 CathyGO \u5F00\u59CB\u5904\u7406",
+        startedAt: nowIso()
+      }),
+      status: "Thinking",
+      error: void 0,
+      errorCode: void 0
+    };
+  }
+  if (event.event === "session.stop.requested") {
+    return {
+      ...next,
+      status: "Stopping"
+    };
+  }
   if (event.event === "agent.progress.delta") {
     return {
       ...next,
@@ -1949,6 +2082,7 @@ function reduceChat(state, action) {
       ...next,
       activeTurnId: void 0,
       progressByTurnId: removeProgress(next.progressByTurnId, payload.turn_id),
+      runtime: markRuntimeIdle(next.runtime),
       status: "Ready"
     };
   }
@@ -1957,6 +2091,7 @@ function reduceChat(state, action) {
       ...next,
       activeTurnId: void 0,
       progressByTurnId: removeProgress(next.progressByTurnId, payload.turn_id),
+      runtime: markRuntimeIdle(next.runtime),
       status: "Ready"
     };
   }
@@ -1966,6 +2101,7 @@ function reduceChat(state, action) {
       ...next,
       activeTurnId: void 0,
       progressByTurnId: removeProgress(next.progressByTurnId, payload.turn_id),
+      runtime: markRuntimeIdle(next.runtime),
       status: "Error",
       error: error?.message ?? "CathyGO turn failed",
       errorCode: error?.code
@@ -1988,6 +2124,10 @@ function appendAssistantDelta(messages, messageId, delta, turnId) {
       }
     ];
   }
+  const existing = messages[index];
+  if (existing?.role === "assistant" && existing.status === "done" && existing.content) {
+    return messages;
+  }
   return messages.map(
     (message, itemIndex) => itemIndex === index ? {
       ...message,
@@ -2137,6 +2277,78 @@ function progressFromActivity(progressByTurnId, activity, turnActivities, messag
   }
   return progressByTurnId;
 }
+function runtimeProgressFromSnapshot(runtime, turnId) {
+  return {
+    turnId,
+    phase: runtime?.status === "stopping" ? "model" : "queued",
+    status: "running",
+    summary: runtime?.status === "stopping" ? "\u6B63\u5728\u505C\u6B62" : "\u6B63\u5728\u6062\u590D\u4F1A\u8BDD\u72B6\u6001",
+    detail: runtime?.active_client_input_id ? `client_input_id=${runtime.active_client_input_id}` : void 0,
+    startedAt: nowIso()
+  };
+}
+function runtimeFromEvent(current, event) {
+  const payload = event.payload;
+  const turnId = optionalString(payload.turn_id);
+  const turnIds = eventTurnIds(payload, turnId);
+  const base = {
+    ...current ?? emptyRuntimeSnapshot(),
+    last_event_seq: Math.max(current?.last_event_seq ?? 0, event.seq)
+  };
+  if (event.event === "session.input.accepted" || event.event === "turn.started") {
+    return {
+      ...base,
+      status: "running",
+      active_turn_id: turnId ?? base.active_turn_id ?? null,
+      active_turn_ids: turnIds.length > 0 ? turnIds : base.active_turn_ids ?? [],
+      active_client_input_id: optionalString(payload.client_input_id) ?? base.active_client_input_id ?? null,
+      active_client_turn_id: optionalString(payload.client_turn_id) ?? base.active_client_turn_id ?? null
+    };
+  }
+  if (event.event === "session.stop.requested") {
+    return {
+      ...base,
+      status: "stopping",
+      active_turn_id: turnId ?? base.active_turn_id ?? null,
+      active_turn_ids: turnIds.length > 0 ? turnIds : base.active_turn_ids ?? []
+    };
+  }
+  if (event.event === "turn.completed" || event.event === "turn.cancelled" || event.event === "turn.failed" || event.event === "session.deleted") {
+    return markRuntimeIdle(base);
+  }
+  return base;
+}
+function eventTurnIds(payload, turnId) {
+  if (Array.isArray(payload.turn_ids)) {
+    return payload.turn_ids.map((value) => optionalString(value)).filter((value) => Boolean(value));
+  }
+  return turnId ? [turnId] : [];
+}
+function emptyRuntimeSnapshot() {
+  return {
+    status: "idle",
+    active_turn_id: null,
+    active_turn_ids: [],
+    active_client_input_id: null,
+    active_client_turn_id: null,
+    last_event_seq: 0
+  };
+}
+function markRuntimeIdle(runtime) {
+  return {
+    ...runtime ?? emptyRuntimeSnapshot(),
+    status: "idle",
+    active_turn_id: null,
+    active_turn_ids: [],
+    active_client_input_id: null,
+    active_client_turn_id: null
+  };
+}
+function statusFromRuntime(runtime) {
+  if (runtime?.status === "running") return "Thinking";
+  if (runtime?.status === "stopping") return "Stopping";
+  return "Ready";
+}
 function setProgress(progressByTurnId, progress) {
   return {
     ...progressByTurnId,
@@ -2234,8 +2446,8 @@ function useCathyGOChat(initialState = initialChatState) {
     dispatchChat({ type: "session.created", sessionId });
   }, []);
   const loadSession = useCallback(
-    (sessionId, messages, activities) => {
-      dispatchChat({ type: "session.loaded", sessionId, messages, activities });
+    (sessionId, messages, activities, runtime) => {
+      dispatchChat({ type: "session.loaded", sessionId, messages, activities, runtime });
     },
     []
   );

package/dist/styles.css

@@ -240,6 +240,25 @@
   padding: 5px 12px;
 }
 
+.chat-topbar-icon-btn {
+  align-items: center;
+  background: transparent;
+  border: 1px solid var(--border-subtle);
+  border-radius: 50%;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+}
+
+.chat-topbar-icon-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
 .chat-topbar-abort:hover {
   background: var(--bg-hover);
 }
@@ -469,6 +488,68 @@
   background: var(--bg-hover);
 }
 
+.session-loading {
+  gap: 14px;
+  margin-top: 72px;
+  max-width: 40rem;
+}
+
+.session-loading-title,
+.session-loading-line,
+.session-loading-card {
+  animation: session-loading-pulse 1.2s ease-in-out infinite;
+  background: linear-gradient(90deg, #ececf1 0%, #f7f7f8 48%, #ececf1 100%);
+  background-size: 200% 100%;
+  border-radius: 8px;
+}
+
+.session-loading-title {
+  height: 28px;
+  width: 180px;
+}
+
+.session-loading-line {
+  height: 16px;
+  width: 68%;
+}
+
+.session-loading-line.wide {
+  width: 92%;
+}
+
+.session-loading-card {
+  border-radius: 12px;
+  display: grid;
+  gap: 12px;
+  margin-left: auto;
+  min-height: 132px;
+  padding: 18px;
+  width: min(360px, 80%);
+}
+
+.session-loading-card div {
+  background: rgba(255, 255, 255, 0.65);
+  border-radius: 7px;
+}
+
+.chat-session-error {
+  color: #b42318;
+  font-size: 14px;
+  margin: 0 auto 8px;
+  max-width: var(--chat-column-width);
+  padding: 0 20px;
+  width: 100%;
+}
+
+@keyframes session-loading-pulse {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
 .empty-chat h2,
 .empty-state h1 {
   color: #1f2937;
@@ -1293,10 +1374,19 @@
   width: 100%;
 }
 
-.history-row:hover {
+.history-row:hover,
+.history-row.active {
   background: var(--bg-hover);
 }
 
+.history-row.active {
+  box-shadow: inset 3px 0 0 #2563eb;
+}
+
+.history-row.loading small {
+  color: #2563eb;
+}
+
 .list-surface {
   align-content: start;
   display: grid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beanx/cathygo-web-core",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "dist"
@@ -16,7 +16,7 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@beanx/cathygo-protocol": "0.1.0",
+    "@beanx/cathygo-protocol": "0.1.1",
     "@streamdown/math": "^1.0.2",
     "katex": "^0.16.47",
     "streamdown": "^2.5.0"