@nextclaw/ui 0.12.19 → 0.12.20-beta.1

package/src/features/chat/components/conversation/chat-message-list.container.test.tsx

@@ -8,12 +8,16 @@ const captures = vi.hoisted(() => ({
   language: "en",
 }));
 
-vi.mock("@nextclaw/agent-chat-ui", () => ({
-  ChatMessageList: (props: { messages: unknown[]; texts?: Record<string, unknown> }) => {
-    captures.renders.push(props);
-    return <div data-testid="chat-message-list" />;
-  },
-}));
+vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...(actual as object),
+    ChatMessageList: (props: { messages: unknown[]; texts?: Record<string, unknown> }) => {
+      captures.renders.push(props);
+      return <div data-testid="chat-message-list" />;
+    },
+  };
+});
 
 vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({ language: captures.language }),
@@ -211,3 +215,57 @@ it("passes localized attachment card texts to the shared chat UI", () => {
     },
   });
 });
+
+it("renders context compaction as an in-flow divider instead of a chat message", () => {
+  const beforeMessage = {
+    id: "message-before",
+    sessionId: "session-1",
+    role: "user",
+    status: "final",
+    timestamp: "2026-05-05T11:59:00.000Z",
+    parts: [{ type: "text", text: "before" }],
+  } satisfies NcpMessage;
+  const afterMessage = {
+    id: "message-after",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-05-05T12:01:00.000Z",
+    parts: [{ type: "text", text: "after" }],
+  } satisfies NcpMessage;
+  const compactionMessage = {
+    id: "ctx-message",
+    sessionId: "session-1",
+    role: "service",
+    status: "final",
+    timestamp: "2026-05-05T12:00:00.000Z",
+    metadata: {
+      nextclaw_timeline_kind: "context_compaction",
+      checkpoint: {
+        id: "ctx-1",
+        status: "compressed",
+        summary: "Compressed Earlier Context",
+        coveredMessageCount: 8,
+        coveredSessionMessageCount: 8,
+        originalEstimatedTokens: 76000,
+        projectedEstimatedTokens: 51000,
+        createdAt: "2026-05-05T11:59:50.000Z",
+        updatedAt: "2026-05-05T12:00:00.000Z",
+      },
+    },
+    parts: [{ type: "text", text: "较早上下文已自动压缩" }],
+  } satisfies NcpMessage;
+
+  const { getByText } = render(
+    <ChatMessageListContainer
+      messages={[beforeMessage, compactionMessage, afterMessage]}
+      isSending={false}
+    />,
+  );
+
+  expect(getByText("chatContextCompactionCompressed")).toBeTruthy();
+  const renderedGroups = captures.renders.map((rendered) => rendered.messages);
+  expect(renderedGroups).toHaveLength(2);
+  expect(renderedGroups[0]).toMatchObject([{ id: "message-before" }]);
+  expect(renderedGroups[1]).toMatchObject([{ id: "message-after" }]);
+});

package/src/features/chat/components/conversation/chat-message-list.container.tsx

@@ -13,6 +13,10 @@ import {
 } from "@/features/chat/utils/chat-message.utils";
 import { readInlineTokensFromMetadata } from "@/features/chat/utils/chat-inline-token.utils";
 import { adaptNcpMessageToUiMessage } from "@/features/chat/utils/ncp-session-adapter.utils";
+import {
+  readContextCompactionTimeline,
+  type ContextCompactionTimelineView,
+} from "@/features/chat/utils/ncp-session-context-metadata.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import { useI18n } from "@/app/components/i18n-provider";
 import { formatDateTime, t } from "@/shared/lib/i18n";
@@ -30,6 +34,24 @@ const messageViewModelCache = new WeakMap<
   { language: string; viewModel: ChatMessageViewModel }
 >();
 
+type ChatTimelineItem =
+  | {
+      kind: "messages";
+      key: string;
+      messages: ChatMessageViewModel[];
+    }
+  | {
+      kind: "compaction";
+      key: string;
+      checkpoint: ContextCompactionTimelineView;
+    };
+
+type TimelineCheckpointPlacement = {
+  key: string;
+  checkpoint: ContextCompactionTimelineView;
+  boundaryIndex: number;
+};
+
 function buildChatMessageAdapterTexts(
   language: string,
 ): ChatMessageAdapterTexts {
@@ -84,6 +106,137 @@ function buildChatMessageTexts(language: string) {
   };
 }
 
+function ChatContextCompactionDivider({
+  checkpoint,
+}: {
+  checkpoint: ContextCompactionTimelineView;
+}) {
+  const title = [
+    `${t("chatContextCompactionCoveredMessages")}: ${checkpoint.coveredSessionMessageCount}`,
+    `${t("chatContextCompactionOriginalTokens")}: ${checkpoint.originalEstimatedTokens}`,
+    `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
+  ].join("\n");
+  return (
+    <div className="my-4 flex items-center gap-3 text-[11px] text-gray-500" title={title}>
+      <div className="h-px flex-1 bg-gray-200" />
+      <div className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50 px-3 py-1">
+        {checkpoint.status === "compressing" ? (
+          <span className="h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" />
+        ) : (
+          <span className="h-1.5 w-1.5 rounded-full bg-gray-300" />
+        )}
+        <span>
+          {checkpoint.status === "compressing"
+            ? t("chatContextCompactionCompressing")
+            : t("chatContextCompactionCompressed")}
+        </span>
+      </div>
+      <div className="h-px flex-1 bg-gray-200" />
+    </div>
+  );
+}
+
+function resolveCompactionBoundaryIndex(params: {
+  rawMessages: readonly NcpMessage[];
+  normalRawMessages: readonly NcpMessage[];
+  rawMessageId: string;
+}): number {
+  const {
+    normalRawMessages,
+    rawMessageId,
+    rawMessages,
+  } = params;
+  const physicalIndex = rawMessages.findIndex(
+    (message) => message.id === rawMessageId,
+  );
+  if (physicalIndex < 0) {
+    return normalRawMessages.length - 1;
+  }
+  const previousNormalCount = rawMessages
+    .slice(0, physicalIndex)
+    .filter((message) => !readContextCompactionTimeline(message)).length;
+  return previousNormalCount - 1;
+}
+
+function buildTimelineItems(params: {
+  rawMessages: readonly NcpMessage[];
+  messages: ChatMessageViewModel[];
+}): ChatTimelineItem[] {
+  const normalRawMessages = params.rawMessages.filter(
+    (message) => !readContextCompactionTimeline(message),
+  );
+  const checkpoints = params.rawMessages
+    .map((message) => ({
+      rawMessageId: message.id,
+      checkpoint: readContextCompactionTimeline(message),
+    }))
+    .filter(
+      (entry): entry is { rawMessageId: string; checkpoint: ContextCompactionTimelineView } =>
+        Boolean(entry.checkpoint),
+    )
+    .map((entry) => ({
+      key: entry.rawMessageId,
+      checkpoint: entry.checkpoint,
+      boundaryIndex: resolveCompactionBoundaryIndex({
+        rawMessages: params.rawMessages,
+        normalRawMessages,
+        rawMessageId: entry.rawMessageId,
+      }),
+    }))
+    .sort((left, right) => left.boundaryIndex - right.boundaryIndex);
+
+  const items: ChatTimelineItem[] = [];
+  let pendingMessages: ChatMessageViewModel[] = [];
+  let checkpointCursor = 0;
+  const flushPendingMessages = (key: string) => {
+    if (pendingMessages.length === 0) {
+      return;
+    }
+    items.push({
+      kind: "messages",
+      key,
+      messages: pendingMessages,
+    });
+    pendingMessages = [];
+  };
+
+  normalRawMessages.forEach((rawMessage, index) => {
+    const message = params.messages[index];
+    if (message) {
+      pendingMessages.push(message);
+    }
+    while (checkpointCursor < checkpoints.length && checkpoints[checkpointCursor]?.boundaryIndex <= index) {
+      const currentCheckpoint = checkpoints[checkpointCursor];
+      flushPendingMessages(`messages-before-${currentCheckpoint.key}`);
+      items.push({
+        kind: "compaction",
+        key: currentCheckpoint.key,
+        checkpoint: currentCheckpoint.checkpoint,
+      });
+      checkpointCursor += 1;
+    }
+  });
+  while (checkpointCursor < checkpoints.length) {
+    const currentCheckpoint = checkpoints[checkpointCursor];
+    flushPendingMessages(`messages-before-${currentCheckpoint.key}`);
+    items.push({
+      kind: "compaction",
+      key: currentCheckpoint.key,
+      checkpoint: currentCheckpoint.checkpoint,
+    });
+    checkpointCursor += 1;
+  }
+  flushPendingMessages("messages-final");
+  if (items.length === 0) {
+    items.push({
+      kind: "messages",
+      key: "messages-empty",
+      messages: [],
+    });
+  }
+  return items;
+}
+
 export function ChatMessageListContainer({
   messages: rawMessages,
   isSending,
@@ -98,10 +251,13 @@ export function ChatMessageListContainer({
   );
 
   const messages = useMemo(() => {
-    return rawMessages.map((message) => {
+    return rawMessages.flatMap((message) => {
+      if (readContextCompactionTimeline(message)) {
+        return [];
+      }
       const cached = messageViewModelCache.get(message);
       if (cached && cached.language === language) {
-        return cached.viewModel;
+        return [cached.viewModel];
       }
 
       const uiMessage = adaptNcpMessageToUiMessage(message);
@@ -121,7 +277,7 @@ export function ChatMessageListContainer({
       });
 
       messageViewModelCache.set(message, { language, viewModel });
-      return viewModel;
+      return [viewModel];
     });
   }, [language, rawMessages, texts]);
 
@@ -138,22 +294,34 @@ export function ChatMessageListContainer({
     () => buildChatMessageTexts(language),
     [language],
   );
+  const timelineItems = useMemo(
+    () => buildTimelineItems({ rawMessages, messages }),
+    [messages, rawMessages],
+  );
 
   return (
-    <ChatMessageList
-      messages={messages}
-      isSending={isSending}
-      hasAssistantDraft={hasAssistantDraft}
-      className={className}
-      texts={messageTexts}
-      onToolAction={onToolAction}
-      onFileOpen={onFileOpen}
-      renderToolAgent={(agentId) => (
-        <AgentIdentityAvatar
-          agentId={agentId}
-          className="h-4 w-4 shrink-0"
-        />
+    <div className={className}>
+      {timelineItems.map((item, index) =>
+        item.kind === "compaction" ? (
+          <ChatContextCompactionDivider key={item.key} checkpoint={item.checkpoint} />
+        ) : (
+          <ChatMessageList
+            key={item.key}
+            messages={item.messages}
+            isSending={index === timelineItems.length - 1 ? isSending : false}
+            hasAssistantDraft={hasAssistantDraft}
+            texts={messageTexts}
+            onToolAction={onToolAction}
+            onFileOpen={onFileOpen}
+            renderToolAgent={(agentId) => (
+              <AgentIdentityAvatar
+                agentId={agentId}
+                className="h-4 w-4 shrink-0"
+              />
+            )}
+          />
+        ),
       )}
-    />
+    </div>
   );
 }

package/src/features/chat/components/session/session-context-icon.tsx

@@ -3,7 +3,7 @@ import { resolveAppResourceUri } from '@/shared/lib/app-resource-uri';
 import { LogoBadge } from '@/shared/components/common/logo-badge';
 import { getChannelLogo } from '@/shared/lib/logos';
 import { cn } from '@/shared/lib/utils';
-import { AlarmClock, Bot, HeartPulse } from 'lucide-react';
+import { AlarmClock, Bot } from 'lucide-react';
 
 export function SessionContextIconNode({ icon, className }: { icon: SessionContextIcon; className?: string }) {
   if (icon.kind === 'channel-logo') {
@@ -21,9 +21,6 @@ export function SessionContextIconNode({ icon, className }: { icon: SessionConte
       />
     );
   }
-  if (icon.icon === 'heartbeat') {
-    return <HeartPulse className={cn('h-3.5 w-3.5', className)} />;
-  }
   return <AlarmClock className={cn('h-3.5 w-3.5', className)} />;
 }
 

package/src/features/chat/hooks/use-ncp-chat-derived-state.ts

@@ -13,6 +13,7 @@ import type { ChatModelOption } from '@/features/chat/types/chat-input.types';
 import type { ChatChildSessionTab } from '@/features/chat/stores/chat-thread.store';
 import type { ChatSessionTypeOption } from '@/features/chat/hooks/use-chat-session-type-state';
 import { resolveSessionTypeLabel } from '@/features/chat/hooks/use-chat-session-type-state';
+import { readNcpContextWindowValue } from '@/features/chat/utils/ncp-session-context-metadata.utils';
 
 function buildChildSessionTabs(params: {
   parentSessionKey: string | null;
@@ -121,7 +122,7 @@ export function useNcpChatSnapshotSync(params: {
   effectiveSessionProjectName: string | null;
   selectedSession: SessionEntryView | null;
   threadRef: MutableRefObject<HTMLDivElement | null>;
-  agent: Pick<UseHydratedNcpAgentResult, 'isHydrating' | 'visibleMessages'>;
+  agent: Pick<UseHydratedNcpAgentResult, 'isHydrating' | 'snapshot' | 'visibleMessages'>;
   isAwaitingAssistantOutput: boolean;
   parentSession: SessionEntryView | null;
   childSessionTabs: ChatChildSessionTab[];
@@ -165,6 +166,7 @@ export function useNcpChatSnapshotSync(params: {
       messages: params.agent.visibleMessages,
       isSending: params.isSending,
       isAwaitingAssistantOutput: params.isAwaitingAssistantOutput,
+      contextWindow: readNcpContextWindowValue(params.agent.snapshot.contextWindow),
       parentSessionKey: params.parentSession?.key ?? null,
       parentSessionLabel: params.parentSession
         ? sessionDisplayName(params.parentSession)

package/src/features/chat/hooks/use-ncp-chat-page-data.ts

@@ -6,8 +6,7 @@ import { sessionMatchesQuery } from '@/features/chat/utils/chat-session-display.
 import { adaptNcpSessionSummaries } from '@/features/chat/utils/ncp-session-adapter.utils';
 import { useChatSessionTypeState } from '@/features/chat/hooks/use-chat-session-type-state';
 import {
-  resolveRecentSessionPreferredThinking,
-  resolveRecentSessionPreferredModel,
+  resolveRecentSessionPreferredValue,
   useSyncSelectedModel,
   useSyncSelectedThinking
 } from '@/features/chat/utils/chat-session-preference-governance.utils';
@@ -83,19 +82,21 @@ function useRecentSessionPreferences(params: {
   const { sessions, sessionKey, sessionType } = params;
   const recentSessionPreferredModel = useMemo(
     () =>
-      resolveRecentSessionPreferredModel({
+      resolveRecentSessionPreferredValue<string>({
         sessions,
         selectedSessionKey: sessionKey,
-        sessionType
+        sessionType,
+        readPreference: (session) => session.preferredModel?.trim() || undefined
       }),
     [sessionKey, sessionType, sessions]
   );
   const recentSessionPreferredThinking = useMemo(
     () =>
-      resolveRecentSessionPreferredThinking({
+      resolveRecentSessionPreferredValue<ThinkingLevel>({
         sessions,
         selectedSessionKey: sessionKey,
-        sessionType
+        sessionType,
+        readPreference: (session) => session.preferredThinking ?? undefined
       }),
     [sessionKey, sessionType, sessions]
   );

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

@@ -1,5 +1,6 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import type * as SharedApi from "@/shared/lib/api";
 import { fetchNcpSessionConversationSeed, useNcpSessionConversation } from "./use-ncp-session-conversation";
 
 const mocks = vi.hoisted(() => ({
@@ -30,7 +31,7 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock("@/shared/lib/api", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@/shared/lib/api")>();
+  const actual = await importOriginal<typeof SharedApi>();
   return {
     ...actual,
     fetchNcpSessionMessages: mocks.fetchNcpSessionMessages,
@@ -51,7 +52,13 @@ vi.mock("@nextclaw/ncp-http-agent-client", () => ({
 }));
 
 vi.mock("@/features/system-status", () => ({
-  useChatRuntimeAvailability: vi.fn(() => mocks.runtimeAvailability),
+  useSystemStatus: vi.fn(() => ({
+    ...mocks.runtimeAvailability,
+    lifecyclePhase: mocks.runtimeAvailability.phase,
+    activeSystemAction: null,
+    bootstrapStatus: null,
+    lastError: null,
+  })),
 }));
 
 describe("useNcpSessionConversation", () => {
@@ -70,6 +77,19 @@ describe("useNcpSessionConversation", () => {
       status: "running",
       total: 1,
       messages: [{ id: "msg-1" }],
+      contextWindow: {
+        usedContextTokens: 42,
+        totalContextTokens: 100,
+        prunedUsedContextTokens: 42,
+        availableContextTokens: 58,
+        droppedHistoryCount: 0,
+        truncatedToolResultCount: 0,
+        truncatedSystemPrompt: false,
+        truncatedUserMessage: false,
+        compacted: false,
+        compactedMessageCount: 0,
+        updatedAt: "2026-05-05T00:00:00.000Z",
+      },
     });
 
     const result = await fetchNcpSessionConversationSeed(
@@ -82,6 +102,19 @@ describe("useNcpSessionConversation", () => {
     expect(result).toEqual({
       messages: [{ id: "msg-1" }],
       status: "running",
+      contextWindow: {
+        usedContextTokens: 42,
+        totalContextTokens: 100,
+        prunedUsedContextTokens: 42,
+        availableContextTokens: 58,
+        droppedHistoryCount: 0,
+        truncatedToolResultCount: 0,
+        truncatedSystemPrompt: false,
+        truncatedUserMessage: false,
+        compacted: false,
+        compactedMessageCount: 0,
+        updatedAt: "2026-05-05T00:00:00.000Z",
+      },
     });
   });
 
@@ -113,6 +146,45 @@ describe("useNcpSessionConversation", () => {
     expect(mocks.hydratedCalls[1]?.client).toBe(mocks.clientInstances[1]);
   });
 
+  it("exposes the hydrated session context window without changing the generic ncp agent seed", async () => {
+    const contextWindow = {
+      usedContextTokens: 42,
+      totalContextTokens: 100,
+      prunedUsedContextTokens: 42,
+      availableContextTokens: 58,
+      droppedHistoryCount: 0,
+      truncatedToolResultCount: 0,
+      truncatedSystemPrompt: false,
+      truncatedUserMessage: false,
+      compacted: false,
+      compactedMessageCount: 0,
+      updatedAt: "2026-05-05T00:00:00.000Z",
+    };
+    mocks.fetchNcpSessionMessages.mockResolvedValue({
+      sessionId: "session-1",
+      status: "idle",
+      total: 0,
+      messages: [],
+      contextWindow,
+    });
+
+    const { result, rerender } = renderHook(() => useNcpSessionConversation("session-1"));
+    const loadSeed = mocks.hydratedCalls[0]?.loadSeed as (
+      sessionId: string,
+      signal: AbortSignal
+    ) => Promise<{ messages: unknown[]; status: string }>;
+
+    await act(async () => {
+      await expect(loadSeed("session-1", new AbortController().signal)).resolves.toEqual({
+        messages: [],
+        status: "idle",
+      });
+    });
+    rerender();
+
+    expect(result.current.snapshot.contextWindow).toEqual(contextWindow);
+  });
+
   it("retries hydration once the runtime becomes ready after a startup placeholder error", async () => {
     mocks.useHydratedNcpAgent.mockImplementation(() => ({
       snapshot: {

package/src/features/chat/hooks/use-ncp-session-conversation.ts

@@ -1,9 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { NcpHttpAgentClientEndpoint } from "@nextclaw/ncp-http-agent-client";
 import { useHydratedNcpAgent, type NcpConversationSeed } from "@nextclaw/ncp-react";
-import { API_BASE, fetchNcpSessionMessages } from "@/shared/lib/api";
+import { API_BASE, fetchNcpSessionMessages, type SessionContextWindowView } from "@/shared/lib/api";
 import { createNcpAppClientFetch } from "@/features/chat/utils/ncp-app-client-fetch.utils";
-import { useChatRuntimeAvailability } from "@/features/system-status";
+import { useSystemStatus } from "@/features/system-status";
 
 const DEFAULT_MESSAGE_LIMIT = 300;
 const NCP_AGENT_UNAVAILABLE_DURING_STARTUP = "ncp agent unavailable during startup";
@@ -12,6 +12,10 @@ type UseNcpSessionConversationOptions = {
   messageLimit?: number;
 };
 
+type NcpConversationSeedWithContextWindow = NcpConversationSeed & {
+  contextWindow?: SessionContextWindowView | null;
+};
+
 function isMissingNcpSessionError(error: unknown): boolean {
   if (!(error instanceof Error)) {
     return false;
@@ -40,7 +44,7 @@ export async function fetchNcpSessionConversationSeed(
   sessionId: string,
   signal: AbortSignal,
   messageLimit = DEFAULT_MESSAGE_LIMIT,
-): Promise<NcpConversationSeed> {
+): Promise<NcpConversationSeedWithContextWindow> {
   signal.throwIfAborted();
 
   try {
@@ -49,6 +53,7 @@ export async function fetchNcpSessionConversationSeed(
     return {
       messages: response.messages,
       status: response.status ?? "idle",
+      contextWindow: response.contextWindow ?? null,
     };
   } catch (error) {
     signal.throwIfAborted();
@@ -92,13 +97,24 @@ export function useNcpSessionConversation(
   options: UseNcpSessionConversationOptions = {},
 ) {
   const [client] = useState(() => createNcpSessionConversationClient());
-  const runtimeAvailability = useChatRuntimeAvailability();
+  const systemStatus = useSystemStatus();
   const [hydrationRetryVersion, setHydrationRetryVersion] = useState(0);
+  const [seedContextWindow, setSeedContextWindow] = useState<SessionContextWindowView | null>(null);
   const messageLimit = options.messageLimit ?? DEFAULT_MESSAGE_LIMIT;
+  useEffect(() => {
+    setSeedContextWindow(null);
+  }, [sessionId]);
   const loadSeed = useCallback(
-    (targetSessionId: string, signal: AbortSignal) => {
+    async (targetSessionId: string, signal: AbortSignal) => {
       void hydrationRetryVersion;
-      return fetchNcpSessionConversationSeed(targetSessionId, signal, messageLimit);
+      const seed = await fetchNcpSessionConversationSeed(targetSessionId, signal, messageLimit);
+      if (!signal.aborted) {
+        setSeedContextWindow(seed.contextWindow ?? null);
+      }
+      return {
+        messages: seed.messages,
+        status: seed.status,
+      };
     },
     [hydrationRetryVersion, messageLimit],
   );
@@ -110,12 +126,18 @@ export function useNcpSessionConversation(
   const currentAgentError =
     agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
   const readyRetrySignature =
-    runtimeAvailability.phase === "ready" &&
+    systemStatus.phase === "ready" &&
     isNcpAgentStartupUnavailableErrorMessage(currentAgentError)
-      ? `${sessionId}:${runtimeAvailability.lastReadyAt ?? 0}`
+      ? `${sessionId}:${systemStatus.lastReadyAt ?? 0}`
       : null;
   useSyncReadyRetryVersion(readyRetrySignature, () => {
     setHydrationRetryVersion((current) => current + 1);
   });
-  return agent;
+  return useMemo(() => ({
+    ...agent,
+    snapshot: {
+      ...agent.snapshot,
+      contextWindow: agent.snapshot.contextWindow ?? seedContextWindow,
+    },
+  }), [agent, seedContextWindow]);
 }

package/src/features/chat/hooks/use-selected-session-context-window-indicator.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import type { ChatContextWindowIndicator } from '@nextclaw/agent-chat-ui';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
+import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+import { buildChatContextWindowIndicator } from '@/features/chat/utils/chat-context-window-indicator.utils';
+
+export function useSelectedSessionContextWindowIndicator(): ChatContextWindowIndicator | null {
+  const selectedSessionKey = useChatSessionListStore((state) => state.snapshot.selectedSessionKey);
+  const draftSessionKey = useChatSessionListStore((state) => state.snapshot.draftSessionKey);
+  const liveSessionKey = useChatThreadStore((state) => state.snapshot.sessionKey);
+  const liveContextWindow = useChatThreadStore((state) => state.snapshot.contextWindow);
+  const currentSessionKey = selectedSessionKey ?? draftSessionKey;
+
+  return useMemo(() => {
+    if (liveSessionKey === currentSessionKey && liveContextWindow) {
+      return buildChatContextWindowIndicator(liveContextWindow);
+    }
+    return null;
+  }, [currentSessionKey, liveContextWindow, liveSessionKey]);
+}

package/src/features/chat/managers/ncp-chat-input.manager.test.ts

@@ -33,6 +33,24 @@ describe('NcpChatInputManager', () => {
       state: {
         ...useSystemStatusStore.getState().state,
         lifecyclePhase: 'ready',
+        bootstrapStatus: {
+          phase: 'ready',
+          ncpAgent: {
+            state: 'ready',
+          },
+          pluginHydration: {
+            state: 'ready',
+            loadedPluginCount: 1,
+            totalPluginCount: 1,
+          },
+          channels: {
+            state: 'ready',
+            enabled: [],
+          },
+          remote: {
+            state: 'pending',
+          },
+        },
       },
     });
     useChatSessionListStore.setState({
@@ -125,6 +143,13 @@ describe('NcpChatInputManager', () => {
       state: {
         ...useSystemStatusStore.getState().state,
         lifecyclePhase: 'cold-starting',
+        bootstrapStatus: {
+          ...useSystemStatusStore.getState().state.bootstrapStatus!,
+          phase: 'kernel-starting',
+          ncpAgent: {
+            state: 'pending',
+          },
+        },
       },
     });
     const streamActionsManager = {