@nextclaw/ui 0.12.10 → 0.12.11

package/src/components/chat/chat-input/ncp-chat-input-availability.utils.ts

@@ -0,0 +1,45 @@
+import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
+
+type NcpChatInputAvailabilitySnapshot = Pick<
+  ChatInputSnapshot,
+  'isProviderStateResolved' | 'modelOptions' | 'sessionTypeUnavailable'
+>;
+
+export function hasNcpChatModelOptions(
+  snapshot: NcpChatInputAvailabilitySnapshot
+): boolean {
+  return snapshot.modelOptions.length > 0;
+}
+
+export function isNcpChatModelOptionsLoading(
+  snapshot: NcpChatInputAvailabilitySnapshot
+): boolean {
+  return !snapshot.isProviderStateResolved && !hasNcpChatModelOptions(snapshot);
+}
+
+export function isNcpChatModelOptionsEmpty(
+  snapshot: NcpChatInputAvailabilitySnapshot
+): boolean {
+  return snapshot.isProviderStateResolved && !hasNcpChatModelOptions(snapshot);
+}
+
+export function isNcpChatComposerDisabled(
+  snapshot: NcpChatInputAvailabilitySnapshot
+): boolean {
+  return snapshot.sessionTypeUnavailable;
+}
+
+export function isNcpChatSendDisabled(params: {
+  hasSendableDraft: boolean;
+  snapshot: NcpChatInputAvailabilitySnapshot;
+  isRuntimeBlocked: boolean;
+}): boolean {
+  const { hasSendableDraft, isRuntimeBlocked, snapshot } = params;
+
+  return (
+    isRuntimeBlocked ||
+    !hasSendableDraft ||
+    !hasNcpChatModelOptions(snapshot) ||
+    snapshot.sessionTypeUnavailable
+  );
+}

package/src/components/chat/chat-page-shell.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
-import { ChatSidebar } from "@/components/chat/ChatSidebar";
+import { ChatSidebar } from "@/components/chat/containers/chat-sidebar";
 import { ChatConversationPanel } from "@/components/chat/chat-conversation-panel";
 import { AgentsPage } from "@/components/agents/agents-page";
 import { CronConfig } from "@/components/config/CronConfig";

package/src/components/chat/containers/chat-input-bar.container.tsx

@@ -16,6 +16,13 @@ import {
   type ChatThinkingLevel
 } from '@/components/chat/adapters/chat-input-bar.adapter';
 import { deriveSelectedSkillsFromComposer } from '@/components/chat/chat-composer-state';
+import {
+  hasNcpChatModelOptions,
+  isNcpChatComposerDisabled,
+  isNcpChatModelOptionsEmpty,
+  isNcpChatModelOptionsLoading,
+  isNcpChatSendDisabled,
+} from '@/components/chat/chat-input/ncp-chat-input-availability.utils';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import {
   CHAT_RECENT_MODELS_MIN_OPTIONS,
@@ -27,6 +34,7 @@ import {
 } from '@/components/chat/chat-recent-skills.manager';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatRuntimeAvailability } from '@/features/system-status';
 import type { SessionSkillEntryView } from '@/api/types';
 import { t } from '@/lib/i18n';
 import { toast } from 'sonner';
@@ -83,11 +91,13 @@ export function ChatInputBarContainer() {
   const presenter = usePresenter();
   const { language } = useI18n();
   const snapshot = useChatInputStore((state) => state.snapshot);
+  const runtimeAvailability = useChatRuntimeAvailability();
   const [slashQuery, setSlashQuery] = useState<string | null>(null);
   const inputBarRef = useRef<ChatInputBarHandle | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const skillScopeLabels = useMemo<Record<'builtin' | 'project' | 'workspace', string>>(() => {
+    void language;
     return {
       builtin: t('chatSkillScopeBuiltin'),
       project: t('chatSkillScopeProject'),
@@ -96,6 +106,7 @@ export function ChatInputBarContainer() {
   }, [language]);
   const slashTexts = useMemo(
     () => {
+      void language;
       return {
         slashSkillSubtitle: t('chatSlashTypeSkill'),
         slashSkillSpecLabel: t('chatSlashSkillSpec'),
@@ -124,17 +135,14 @@ export function ChatInputBarContainer() {
     minAvailableCount: CHAT_RECENT_SKILLS_MIN_OPTIONS
   });
 
-  const hasModelOptions = modelRecords.length > 0;
-  const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
-  const isModelOptionsEmpty = snapshot.isProviderStateResolved && !hasModelOptions;
-  const inputDisabled =
-    ((isModelOptionsLoading || isModelOptionsEmpty) && !snapshot.isSending) || snapshot.sessionTypeUnavailable;
+  const hasModelOptions = hasNcpChatModelOptions(snapshot);
+  const isModelOptionsLoading = isNcpChatModelOptionsLoading(snapshot);
+  const isModelOptionsEmpty = isNcpChatModelOptionsEmpty(snapshot);
+  const inputDisabled = isNcpChatComposerDisabled(snapshot);
   const attachmentSupported = typeof presenter.chatInputManager.addAttachments === 'function';
-  const textareaPlaceholder = isModelOptionsLoading
-    ? ''
-    : hasModelOptions
-      ? t('chatInputPlaceholder')
-      : t('chatModelNoOptions');
+  const textareaPlaceholder = isModelOptionsEmpty
+    ? t('chatModelNoOptions')
+    : t('chatInputPlaceholder');
   const recentModelsLabel = t('chatPickerRecentModels');
   const allModelsLabel = t('chatPickerAllModels');
   const recentSkillsLabel = t('chatPickerRecent');
@@ -298,10 +306,14 @@ export function ChatInputBarContainer() {
           ],
           skillPicker,
           actions: {
-            sendError: snapshot.sendError,
+            sendError: runtimeAvailability.isBlocked ? null : snapshot.sendError,
             isSending: snapshot.isSending,
             canStopGeneration: snapshot.canStopGeneration,
-            sendDisabled: !hasSendableDraft || !hasModelOptions || snapshot.sessionTypeUnavailable,
+            sendDisabled: isNcpChatSendDisabled({
+              snapshot,
+              hasSendableDraft,
+              isRuntimeBlocked: runtimeAvailability.isBlocked,
+            }),
             stopDisabled: !snapshot.canStopGeneration,
             stopHint: resolvedStopHint,
             sendButtonLabel: t('chatSend'),

package/src/components/chat/{ChatSidebar.test.tsx → containers/chat-sidebar.test.tsx}

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ChatSidebar } from '@/components/chat/ChatSidebar';
+import { ChatSidebar } from '@/components/chat/containers/chat-sidebar';
 import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
@@ -107,9 +107,10 @@ vi.mock('@/components/providers/ThemeProvider', () => ({
   })
 }));
 
-vi.mock('@/stores/ui.store', () => ({
-  useUiStore: (selector: (state: { connectionStatus: string }) => unknown) =>
-    selector({ connectionStatus: 'connected' })
+vi.mock('@/features/system-status', () => ({
+  useSystemStatus: () => ({
+    connectionStatus: 'connected'
+  })
 }));
 
 function resetSidebarTestState() {

package/src/components/chat/{ChatSidebar.tsx → containers/chat-sidebar.tsx}

@@ -14,7 +14,7 @@ import {
   type ChatSidebarProjectGroup
 } from '@/components/chat/chat-sidebar-project-groups';
 import { resolveSessionContextView } from '@/lib/session-context.utils';
-import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-label';
+import { useChatSidebarSessionLabelEditor } from '@/components/chat/hooks/use-chat-sidebar-session-label-editor';
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
@@ -31,7 +31,7 @@ import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { useDocBrowser } from '@/components/doc-browser';
 import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/components/layout/sidebar-items';
-import { useUiStore } from '@/stores/ui.store';
+import { useSystemStatus } from '@/features/system-status';
 import {
   AlarmClock,
   Bot,
@@ -169,22 +169,17 @@ function useChatSessionUnreadState(
 
   return optimisticReadAtBySessionKey;
 }
-
 export function ChatSidebar() {
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
-  const [editingSessionKey, setEditingSessionKey] = useState<string | null>(null);
-  const [draftLabel, setDraftLabel] = useState('');
-  const [savingSessionKey, setSavingSessionKey] = useState<string | null>(null);
   const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
-  const connectionStatus = useUiStore((state) => state.connectionStatus);
+  const systemStatus = useSystemStatus();
   const agentsQuery = useAgents();
   const { isLoading, items } = useNcpSessionListView();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
-  const updateSessionLabel = useChatSessionLabel();
   const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
   const agentsById = useMemo(
@@ -221,39 +216,20 @@ export function ChatSidebar() {
     listSnapshot.selectedSessionKey,
     presenter.chatSessionListManager.markSessionRead,
   );
+  const {
+    editingSessionKey,
+    draftLabel,
+    savingSessionKey,
+    setDraftLabel,
+    startEditingSessionLabel,
+    cancelEditingSessionLabel,
+    saveSessionLabel,
+  } = useChatSidebarSessionLabelEditor();
   const handleLanguageSwitch = (nextLang: I18nLanguage) => {
     if (language === nextLang) return;
     setLanguage(nextLang);
     window.location.reload();
   };
-  const startEditingSessionLabel = (session: SessionEntryView) => {
-    setEditingSessionKey(session.key);
-    setDraftLabel(session.label?.trim() ?? '');
-  };
-  const cancelEditingSessionLabel = () => {
-    setEditingSessionKey(null);
-    setDraftLabel('');
-    setSavingSessionKey(null);
-  };
-  const saveSessionLabel = async (session: SessionEntryView) => {
-    const normalizedLabel = draftLabel.trim();
-    const currentLabel = session.label?.trim() ?? '';
-    if (normalizedLabel === currentLabel) {
-      cancelEditingSessionLabel();
-      return;
-    }
-
-    setSavingSessionKey(session.key);
-    try {
-      await updateSessionLabel({
-        sessionKey: session.key,
-        label: normalizedLabel || null
-      });
-      cancelEditingSessionLabel();
-    } catch {
-      setSavingSessionKey(null);
-    }
-  };
   const renderSessionItem = ({ session, runStatus }: NcpSessionListItemView) => {
     const active = listSnapshot.selectedSessionKey === session.key;
     const optimisticReadAt = optimisticReadAtBySessionKey[session.key];
@@ -306,7 +282,7 @@ export function ChatSidebar() {
       <div className="px-5 pt-5 pb-3">
         <BrandHeader
           className="flex items-center gap-2.5 min-w-0"
-          suffix={<StatusBadge status={connectionStatus} />}
+          suffix={<StatusBadge status={systemStatus.connectionStatus} />}
         />
       </div>
 

package/src/components/chat/hooks/use-chat-sidebar-session-label-editor.ts

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import type { SessionEntryView } from '@/api/types';
+import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-label';
+
+export function useChatSidebarSessionLabelEditor() {
+  const updateSessionLabel = useChatSessionLabel();
+  const [editingSessionKey, setEditingSessionKey] = useState<string | null>(null);
+  const [draftLabel, setDraftLabel] = useState('');
+  const [savingSessionKey, setSavingSessionKey] = useState<string | null>(null);
+
+  const startEditingSessionLabel = (session: SessionEntryView) => {
+    setEditingSessionKey(session.key);
+    setDraftLabel(session.label?.trim() ?? '');
+  };
+  const cancelEditingSessionLabel = () => {
+    setEditingSessionKey(null);
+    setDraftLabel('');
+    setSavingSessionKey(null);
+  };
+  const saveSessionLabel = async (session: SessionEntryView) => {
+    const normalizedLabel = draftLabel.trim();
+    const currentLabel = session.label?.trim() ?? '';
+    if (normalizedLabel === currentLabel) {
+      cancelEditingSessionLabel();
+      return;
+    }
+
+    setSavingSessionKey(session.key);
+    try {
+      await updateSessionLabel({
+        sessionKey: session.key,
+        label: normalizedLabel || null,
+      });
+      cancelEditingSessionLabel();
+    } catch {
+      setSavingSessionKey(null);
+    }
+  };
+
+  return {
+    editingSessionKey,
+    draftLabel,
+    savingSessionKey,
+    setDraftLabel,
+    startEditingSessionLabel,
+    cancelEditingSessionLabel,
+    saveSessionLabel,
+  };
+}

package/src/components/chat/ncp/ncp-app-client-fetch.ts

@@ -1,3 +1,5 @@
+import { systemStatusManager } from '@/features/system-status';
+
 type FetchLike = typeof fetch;
 
 function formatFetchTarget(input: RequestInfo | URL): string {
@@ -38,6 +40,7 @@ export function createNcpAppClientFetch(): FetchLike {
         ...init
       });
     } catch (error) {
+      systemStatusManager.reportTransportFailure(formatUnknownFetchError(error));
       const method = (init?.method || 'GET').toUpperCase();
       const target = formatFetchTarget(input);
       throw createErrorWithCause(

package/src/components/chat/ncp/ncp-chat-input.manager.ts

@@ -21,10 +21,12 @@ import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-s
 import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
 import type { ChatSessionListManager } from '@/components/chat/managers/chat-session-list.manager';
 import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
+import { isNcpChatSendDisabled } from '@/components/chat/chat-input/ncp-chat-input-availability.utils';
 import { chatRecentModelsManager } from '@/components/chat/chat-recent-models.manager';
 import { chatRecentSkillsManager } from '@/components/chat/chat-recent-skills.manager';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { normalizeSessionType } from '@/components/chat/useChatSessionTypeState';
+import { systemStatusManager } from '@/features/system-status';
 
 export class NcpChatInputManager {
   private readonly sessionPreferenceSync = new ChatSessionPreferenceSync(updateNcpSession);
@@ -139,7 +141,7 @@ export class NcpChatInputManager {
     if (attachments.length === 0) {
       return [];
     }
-    const snapshot = useChatInputStore.getState().snapshot;
+    const { snapshot } = useChatInputStore.getState();
     const existingSignatures = new Set(snapshot.attachments.map(this.buildAttachmentSignature));
     const nextAttachments = this.dedupeAttachments([...snapshot.attachments, ...attachments]);
     const insertedAttachments = nextAttachments.filter(
@@ -173,12 +175,18 @@ export class NcpChatInputManager {
     const sessionSnapshot = useChatSessionListStore.getState().snapshot;
     const threadSnapshot = useChatThreadStore.getState().snapshot;
     const message = inputSnapshot.draft.trim();
-    const attachments = inputSnapshot.attachments;
+    const { attachments } = inputSnapshot;
     const parts = deriveNcpMessagePartsFromComposer(inputSnapshot.composerNodes, attachments);
     const hasSendableContent = parts.some(
       (part) => part.type !== 'text' || part.text.trim().length > 0
     );
-    if (!hasSendableContent) {
+    if (
+      isNcpChatSendDisabled({
+        snapshot: inputSnapshot,
+        hasSendableDraft: hasSendableContent,
+        isRuntimeBlocked: systemStatusManager.isChatInteractionBlocked(),
+      })
+    ) {
       return;
     }
     const { selectedSkills: requestedSkills, composerNodes } = inputSnapshot;
@@ -237,7 +245,7 @@ export class NcpChatInputManager {
   };
 
   setSelectedSkills = (next: SetStateAction<string[]>) => {
-    const snapshot = useChatInputStore.getState().snapshot;
+    const { snapshot } = useChatInputStore.getState();
     const { selectedSkills: prev } = snapshot;
     const value = this.resolveUpdateValue(prev, next);
     if (this.isSameStringArray(value, prev)) {
@@ -292,7 +300,7 @@ export class NcpChatInputManager {
   };
 
   private reconcileThinkingForModel = (model: string): void => {
-    const snapshot = useChatInputStore.getState().snapshot;
+    const { snapshot } = useChatInputStore.getState();
     const modelOption = snapshot.modelOptions.find((option) => option.value === model);
     const { selectedThinkingLevel } = snapshot;
     const nextThinking = this.resolveThinkingForModel(modelOption, selectedThinkingLevel);

package/src/components/chat/ncp/ncp-chat-page.tsx

@@ -22,7 +22,10 @@ import {
 } from "@/components/chat/chat-session-route";
 import { useNcpChatPageData } from "@/components/chat/ncp/ncp-chat-page-data";
 import { NcpChatPresenter } from "@/components/chat/ncp/ncp-chat.presenter";
-import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
+import {
+  isNcpAgentStartupUnavailableErrorMessage,
+  useNcpSessionConversation,
+} from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
 import { useNcpChatDerivedState, useNcpChatSnapshotSync } from "@/components/chat/ncp/page/ncp-chat-derived-state";
 import { ChatPresenterProvider } from "@/components/chat/presenter/chat-presenter-context";
 import type { ResumeRunParams } from "@/components/chat/chat-stream/types";
@@ -31,6 +34,10 @@ import { useChatSessionListStore } from "@/components/chat/stores/chat-session-l
 import { useConfirmDialog } from "@/hooks/useConfirmDialog";
 import { useAgents } from "@/hooks/agents/useAgents";
 import { normalizeRequestedSkills } from "@/lib/chat-runtime-utils";
+import {
+  systemStatusManager,
+  useChatRuntimeAvailability,
+} from "@/features/system-status";
 import {
   getSessionProjectName,
   normalizeSessionProjectRootValue,
@@ -119,6 +126,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
   const pendingProjectRootSessionKey = useChatInputStore(
     (state) => state.snapshot.pendingProjectRootSessionKey,
   );
+  const runtimeAvailability = useChatRuntimeAvailability();
   const agentsQuery = useAgents();
   const currentSelectedModel = useChatInputStore(
     (state) => state.snapshot.selectedModel,
@@ -182,8 +190,19 @@ export function NcpChatPage({ view }: ChatPageProps) {
   const isAwaitingAssistantOutput = agent.isRunning;
   const canStopCurrentRun = agent.isRunning;
   const stopDisabledReason = agent.isRunning ? null : "__preparing__";
-  const lastSendError =
+  const rawLastSendError =
     agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  const filteredLastSendError =
+    runtimeAvailability.phase === "ready" &&
+    isNcpAgentStartupUnavailableErrorMessage(rawLastSendError)
+      ? null
+      : rawLastSendError;
+  const lastSendError =
+    runtimeAvailability.isBlocked
+      ? null
+      : runtimeAvailability.phase === "ready"
+      ? filteredLastSendError
+      : systemStatusManager.getDisplayMessage(filteredLastSendError);
 
   useEffect(() => {
     presenter.chatStreamActionsManager.bind({

package/src/components/chat/ncp/session-conversation/use-ncp-session-conversation.test.tsx

@@ -1,16 +1,20 @@
-import { renderHook } from "@testing-library/react";
+import { act, renderHook, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { fetchNcpSessionConversationSeed, useNcpSessionConversation } from "./use-ncp-session-conversation";
 
 const mocks = vi.hoisted(() => ({
   fetchNcpSessionMessages: vi.fn(),
-  hydratedCalls: [] as Array<{ client: unknown }>,
+  hydratedCalls: [] as Array<{ client: unknown; loadSeed: unknown }>,
+  runtimeAvailability: {
+    phase: "cold-starting" as "cold-starting" | "ready",
+    lastReadyAt: null as number | null,
+  },
   useHydratedNcpAgent: vi.fn(() => ({
     snapshot: {
       messages: [],
       streamingMessage: null,
       activeRun: null,
-      error: null,
+      error: null as Error | null,
     },
     visibleMessages: [],
     activeRunId: null,
@@ -30,7 +34,7 @@ vi.mock("@/api/ncp-session", () => ({
 }));
 
 vi.mock("@nextclaw/ncp-react", () => ({
-  useHydratedNcpAgent: vi.fn((params: { client: unknown }) => {
+  useHydratedNcpAgent: vi.fn((params: { client: unknown; loadSeed: unknown }) => {
     mocks.hydratedCalls.push(params);
     return mocks.useHydratedNcpAgent();
   }),
@@ -42,12 +46,18 @@ vi.mock("@nextclaw/ncp-http-agent-client", () => ({
   }),
 }));
 
+vi.mock("@/features/system-status", () => ({
+  useChatRuntimeAvailability: vi.fn(() => mocks.runtimeAvailability),
+}));
+
 describe("useNcpSessionConversation", () => {
   beforeEach(() => {
     mocks.fetchNcpSessionMessages.mockReset();
     mocks.useHydratedNcpAgent.mockClear();
     mocks.hydratedCalls.length = 0;
     mocks.clientInstances.length = 0;
+    mocks.runtimeAvailability.phase = "cold-starting";
+    mocks.runtimeAvailability.lastReadyAt = null;
   });
 
   it("hydrates seed from the shared session messages endpoint payload", async () => {
@@ -98,4 +108,38 @@ describe("useNcpSessionConversation", () => {
     expect(mocks.hydratedCalls[0]?.client).toBe(mocks.clientInstances[0]);
     expect(mocks.hydratedCalls[1]?.client).toBe(mocks.clientInstances[1]);
   });
+
+  it("retries hydration once the runtime becomes ready after a startup placeholder error", async () => {
+    mocks.useHydratedNcpAgent.mockImplementation(() => ({
+      snapshot: {
+        messages: [],
+        streamingMessage: null,
+        activeRun: null,
+        error: new Error("ncp agent unavailable during startup") as Error | null,
+      },
+      visibleMessages: [],
+      activeRunId: null,
+      isRunning: false,
+      isSending: false,
+      send: vi.fn(),
+      abort: vi.fn(),
+      streamRun: vi.fn(),
+      isHydrating: false,
+      hydrateError: null,
+    }));
+
+    const { rerender } = renderHook(() => useNcpSessionConversation("session-a"));
+    const initialLoadSeed = mocks.hydratedCalls[0]?.loadSeed;
+
+    act(() => {
+      mocks.runtimeAvailability.phase = "ready";
+      mocks.runtimeAvailability.lastReadyAt = 123;
+    });
+    rerender();
+
+    await waitFor(() => {
+      expect(mocks.hydratedCalls.length).toBeGreaterThan(2);
+    });
+    expect(mocks.hydratedCalls[mocks.hydratedCalls.length - 1]?.loadSeed).not.toBe(initialLoadSeed);
+  });
 });

package/src/components/chat/ncp/session-conversation/use-ncp-session-conversation.ts

@@ -1,11 +1,13 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { NcpHttpAgentClientEndpoint } from "@nextclaw/ncp-http-agent-client";
 import { useHydratedNcpAgent, type NcpConversationSeed } from "@nextclaw/ncp-react";
 import { API_BASE } from "@/api/api-base";
 import { fetchNcpSessionMessages } from "@/api/ncp-session";
 import { createNcpAppClientFetch } from "@/components/chat/ncp/ncp-app-client-fetch";
+import { useChatRuntimeAvailability } from "@/features/system-status";
 
 const DEFAULT_MESSAGE_LIMIT = 300;
+const NCP_AGENT_UNAVAILABLE_DURING_STARTUP = "ncp agent unavailable during startup";
 
 type UseNcpSessionConversationOptions = {
   messageLimit?: number;
@@ -18,6 +20,15 @@ function isMissingNcpSessionError(error: unknown): boolean {
   return error.message.includes("ncp session not found:");
 }
 
+export function isNcpAgentStartupUnavailableErrorMessage(
+  message: string | null | undefined,
+): boolean {
+  return (
+    message?.trim().toLowerCase().includes(NCP_AGENT_UNAVAILABLE_DURING_STARTUP) ??
+    false
+  );
+}
+
 export function createNcpSessionConversationClient(): NcpHttpAgentClientEndpoint {
   return new NcpHttpAgentClientEndpoint({
     baseUrl: API_BASE,
@@ -57,16 +68,43 @@ export function useNcpSessionConversation(
   options: UseNcpSessionConversationOptions = {},
 ) {
   const [client] = useState(() => createNcpSessionConversationClient());
+  const runtimeAvailability = useChatRuntimeAvailability();
+  const [hydrationRetryNonce, setHydrationRetryNonce] = useState(0);
+  const retriedReadySignatureRef = useRef<string | null>(null);
   const messageLimit = options.messageLimit ?? DEFAULT_MESSAGE_LIMIT;
   const loadSeed = useCallback(
-    (targetSessionId: string, signal: AbortSignal) =>
-      fetchNcpSessionConversationSeed(targetSessionId, signal, messageLimit),
-    [messageLimit],
+    (targetSessionId: string, signal: AbortSignal) => {
+      void hydrationRetryNonce;
+      return fetchNcpSessionConversationSeed(targetSessionId, signal, messageLimit);
+    },
+    [hydrationRetryNonce, messageLimit],
   );
 
-  return useHydratedNcpAgent({
+  const agent = useHydratedNcpAgent({
     sessionId,
     client,
     loadSeed,
   });
+
+  const currentAgentError =
+    agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  const readyRetrySignature =
+    runtimeAvailability.phase === "ready" &&
+    isNcpAgentStartupUnavailableErrorMessage(currentAgentError)
+      ? `${sessionId}:${runtimeAvailability.lastReadyAt ?? 0}`
+      : null;
+
+  useEffect(() => {
+    if (!readyRetrySignature) {
+      retriedReadySignatureRef.current = null;
+      return;
+    }
+    if (retriedReadySignatureRef.current === readyRetrySignature) {
+      return;
+    }
+    retriedReadySignatureRef.current = readyRetrySignature;
+    setHydrationRetryNonce((current) => current + 1);
+  }, [readyRetrySignature]);
+
+  return agent;
 }