@nextclaw/ui 0.17.0 → 0.17.2

package/src/features/apps/components/app-packages-panel.tsx

@@ -1,5 +1,5 @@
-import { useMemo, useRef, useState, type FormEvent } from 'react';
-import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
+import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
+import type { AppDataEntry, AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
 import { LoaderCircle, PackagePlus, RefreshCw, ShieldCheck, Store } from 'lucide-react';
 import { AppArtwork } from '@/features/apps/components/app-artwork';
 import type { PanelAppEntryView } from '@/shared/lib/api';
@@ -34,8 +34,10 @@ import { Skeleton } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 
 export function AppPackagesPanel({
+  focusedPackageId,
   onOpenPanelApp,
 }: {
+  focusedPackageId?: string;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
   const appPackages = useAppPackages();
@@ -56,11 +58,19 @@ export function AppPackagesPanel({
     [appPackageOperations.data?.entries],
   );
 
+  useEffect(() => {
+    if (!focusedPackageId || appPackages.isLoading) return;
+    const target = document.getElementById(`app-package-${focusedPackageId}`);
+    target?.scrollIntoView({ block: 'nearest' });
+    target?.focus({ preventScroll: true });
+  }, [appPackages.data, appPackages.isLoading, focusedPackageId]);
+
   useAppPackageOperationSettlement({
     isLoaded: Boolean(appPackageOperations.data),
     operations,
     refetchPackages: appPackages.refetch,
     refetchPanels: panelApps.refetch,
+    refetchAppData: appData.refetch,
     settlementManager: presenter.appPackageOperationSettlementManager,
   });
 
@@ -167,7 +177,11 @@ export function AppPackagesPanel({
           ) : null}
 
           <AppPackageLibrary
+            appDataEntries={appData.data?.entries ?? []}
+            appDataLoading={appData.isLoading}
+            appDataUnavailable={appData.isError}
             error={getPackageLoadError(appPackages.error, panelApps.error)}
+            focusedPackageId={focusedPackageId}
             isLoading={appPackages.isLoading || panelApps.isLoading}
             isPending={lifecycle.isPending}
             mutationAppId={'appId' in (lifecycle.variables ?? {})
@@ -249,7 +263,11 @@ export function AppPackagesPanel({
 }
 
 function AppPackageLibrary({
+  appDataEntries,
+  appDataLoading,
+  appDataUnavailable,
   error,
+  focusedPackageId,
   isLoading,
   isPending,
   mutationAppId,
@@ -260,7 +278,11 @@ function AppPackageLibrary({
   panelApps,
   operations,
 }: {
+  appDataEntries: AppDataEntry[];
+  appDataLoading: boolean;
+  appDataUnavailable: boolean;
   error?: string;
+  focusedPackageId?: string;
   isLoading: boolean;
   isPending: boolean;
   mutationAppId?: string;
@@ -327,27 +349,43 @@ function AppPackageLibrary({
           : undefined;
 
         return (
-          <AppPackageCard
+          <section
             key={appPackage.id}
-            appPackage={appPackage}
-            panelApps={panelApps.filter((entry) => entry.packageId === appPackage.id)}
-            isPending={isPending && mutationAppId === appPackage.id}
-            operation={visibleOperation}
-            onEnable={() => onMutate({ action: 'enable', appId: appPackage.id })}
-            onDisable={() => onMutate({ action: 'disable', appId: appPackage.id })}
-            onUpdate={() => onMutate({ action: 'update', appId: appPackage.id })}
-            onRollback={(version) => onMutate({
-              action: 'rollback',
-              appId: appPackage.id,
-              version,
-            })}
-            onUninstall={(purgeData) => onMutate({
-              action: 'uninstall',
-              appId: appPackage.id,
-              purgeData,
-            })}
-            onOpenPanelApp={onOpenPanelApp}
-          />
+            id={`app-package-${appPackage.id}`}
+            aria-label={appPackage.name}
+            tabIndex={-1}
+            className={focusedPackageId === appPackage.id
+              ? 'rounded-xl outline-none ring-2 ring-primary/35 ring-offset-2 ring-offset-background'
+              : 'rounded-xl outline-none'}
+          >
+            <AppPackageCard
+              appPackage={appPackage}
+              storageUsage={appDataEntries.find((entry) =>
+                entry.source === 'package' &&
+                entry.lifecycle === 'active' &&
+                entry.appId === appPackage.id &&
+                entry.instanceId === appPackage.instanceId)?.usage ?? appPackage.storageUsage}
+              storageUsageLoading={appDataLoading}
+              storageUsageUnavailable={appDataUnavailable}
+              panelApps={panelApps.filter((entry) => entry.packageId === appPackage.id)}
+              isPending={isPending && mutationAppId === appPackage.id}
+              operation={visibleOperation}
+              onEnable={() => onMutate({ action: 'enable', appId: appPackage.id })}
+              onDisable={() => onMutate({ action: 'disable', appId: appPackage.id })}
+              onUpdate={() => onMutate({ action: 'update', appId: appPackage.id })}
+              onRollback={(version) => onMutate({
+                action: 'rollback',
+                appId: appPackage.id,
+                version,
+              })}
+              onUninstall={(purgeData) => onMutate({
+                action: 'uninstall',
+                appId: appPackage.id,
+                purgeData,
+              })}
+              onOpenPanelApp={onOpenPanelApp}
+            />
+          </section>
         );
       })}
     </div>

package/src/features/apps/components/apps-panel.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { AppWindow, Boxes, Server } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { AppPackagesPanel } from '@/features/apps/components/app-packages-panel';
@@ -17,10 +18,20 @@ export function AppsPanel({
   onActiveTabChange: (tab: AppsPanelTab) => void;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
+  const [focusedPackageId, setFocusedPackageId] = useState<string>();
+  const changeTab = (tab: AppsPanelTab) => {
+    setFocusedPackageId(undefined);
+    onActiveTabChange(tab);
+  };
+  const managePackage = (packageId: string) => {
+    setFocusedPackageId(packageId);
+    onActiveTabChange('apps');
+  };
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
       <nav className="shrink-0 border-b border-border/70 px-4 py-3" aria-label={t('appsTitle')}>
-        <Tabs value={activeTab} onValueChange={(value) => onActiveTabChange(value as AppsPanelTab)}>
+        <Tabs value={activeTab} onValueChange={(value) => changeTab(value as AppsPanelTab)}>
           <TabsList className="grid h-auto w-full max-w-[390px] grid-cols-3 rounded-lg bg-muted/70 p-0.5">
             <TabsTrigger value="apps" className="min-w-0 gap-1.5 px-2 py-1.5 text-xs">
               <Boxes className="h-3.5 w-3.5 shrink-0" />
@@ -39,11 +50,11 @@ export function AppsPanel({
       </nav>
       <div className="min-h-0 flex-1">
         {activeTab === 'apps' ? (
-          <AppPackagesPanel onOpenPanelApp={onOpenPanelApp} />
+          <AppPackagesPanel focusedPackageId={focusedPackageId} onOpenPanelApp={onOpenPanelApp} />
         ) : activeTab === 'panel-apps' ? (
           <PanelAppsList onOpenPanelApp={onOpenPanelApp} />
         ) : (
-          <ServiceAppsPanel />
+          <ServiceAppsPanel onManagePackage={managePackage} />
         )}
       </div>
     </div>

package/src/features/apps/hooks/use-app-packages.ts

@@ -31,7 +31,7 @@ export type AppPackageMutationInput =
 export function useAppPackages() {
   return useQuery({
     queryKey: APP_PACKAGES_QUERY_KEY,
-    queryFn: () => nextclawClient.appPackages.list(),
+    queryFn: () => nextclawClient.appPackages.list({ includeStorageUsage: false }),
     staleTime: 0,
   });
 }
@@ -57,6 +57,7 @@ export function useAppPackageOperationSettlement({
   operations,
   refetchPackages,
   refetchPanels,
+  refetchAppData,
   settlementManager,
 }: {
   isLoaded: boolean;
@@ -65,6 +66,7 @@ export function useAppPackageOperationSettlement({
   refetchPanels: () => Promise<{
     data?: { entries: Array<{ id: string; packageId?: string }> };
   }>;
+  refetchAppData: () => Promise<unknown>;
   settlementManager: AppPackageOperationSettlementManager;
 }) {
   useEffect(() => {
@@ -73,8 +75,9 @@ export function useAppPackageOperationSettlement({
       operations,
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
-  }, [isLoaded, operations, refetchPackages, refetchPanels, settlementManager]);
+  }, [isLoaded, operations, refetchPackages, refetchPanels, refetchAppData, settlementManager]);
 }
 
 export function useAppPackageMutation() {

package/src/features/apps/managers/__tests__/app-package-operation-settlement.manager.test.ts

@@ -36,6 +36,7 @@ describe('AppPackageOperationSettlementManager', () => {
   it('ignores historical terminal operations and settles each new operation once', async () => {
     const reloadByDedupeKeys = vi.fn();
     const refetchPackages = vi.fn(async () => undefined);
+    const refetchAppData = vi.fn(async () => undefined);
     const refetchPanels = vi.fn(async () => ({
       data: {
         entries: [
@@ -54,6 +55,7 @@ describe('AppPackageOperationSettlementManager', () => {
       operations: [historical],
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
     expect(mocks.success).not.toHaveBeenCalled();
 
@@ -63,17 +65,20 @@ describe('AppPackageOperationSettlementManager', () => {
       operations: [completed, historical],
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
     manager.settle({
       isLoaded: true,
       operations: [completed, historical],
       refetchPackages,
       refetchPanels,
+      refetchAppData,
     });
 
     await vi.waitFor(() => {
       expect(refetchPackages).toHaveBeenCalledTimes(1);
       expect(refetchPanels).toHaveBeenCalledTimes(1);
+      expect(refetchAppData).toHaveBeenCalledTimes(1);
       expect(reloadByDedupeKeys).toHaveBeenCalledWith(['panel-app:todos']);
     });
     expect(mocks.success).toHaveBeenCalledTimes(1);

package/src/features/apps/managers/app-package-operation-settlement.manager.ts

@@ -19,11 +19,13 @@ export class AppPackageOperationSettlementManager {
     operations,
     refetchPackages,
     refetchPanels,
+    refetchAppData,
   }: {
     isLoaded: boolean;
     operations: AppPackageOperationView[];
     refetchPackages: () => Promise<unknown>;
     refetchPanels: RefetchPanels;
+    refetchAppData: () => Promise<unknown>;
   }): void => {
     if (!isLoaded) return;
     const terminal = operations.filter(
@@ -37,7 +39,7 @@ export class AppPackageOperationSettlementManager {
     terminal.forEach((operation) => {
       if (this.knownTerminalOperationIds.has(operation.id)) return;
       this.knownTerminalOperationIds.add(operation.id);
-      this.settleOperation(operation, refetchPackages, refetchPanels);
+      this.settleOperation(operation, refetchPackages, refetchPanels, refetchAppData);
     });
   };
 
@@ -45,10 +47,13 @@ export class AppPackageOperationSettlementManager {
     operation: AppPackageOperationView,
     refetchPackages: () => Promise<unknown>,
     refetchPanels: RefetchPanels,
+    refetchAppData: () => Promise<unknown>,
   ): void => {
     if (operation.status === 'succeeded') {
       toast.success(operationSuccessLabel(operation));
-      void Promise.all([refetchPackages(), refetchPanels()]).then(([, panelsResult]) => {
+      void refetchPackages();
+      void refetchAppData();
+      void refetchPanels().then((panelsResult) => {
         if (operation.action !== 'rollback' && operation.action !== 'update') return;
         this.docBrowserManager.reloadByDedupeKeys(
           panelsResult.data?.entries
@@ -61,6 +66,7 @@ export class AppPackageOperationSettlementManager {
     if (operation.status === 'failed' || operation.status === 'interrupted') {
       void refetchPackages();
       void refetchPanels();
+      void refetchAppData();
       toast.error(operation.error ?? t('appPackagesActionFailed'));
     }
   };

package/src/features/chat/features/message/utils/__tests__/chat-message-show-content-tool-card.utils.test.ts

@@ -237,3 +237,49 @@ describe("buildShowContentToolCard", () => {
     });
   });
 });
+
+describe("buildToolCard terminal outcome and timing", () => {
+  it.each([
+    [{ command: "false", ok: false, exitCode: 1 }, "error", "Failed"],
+    [{ command: "rm -rf /", blocked: true, status: "blocked" }, "error", "Failed"],
+    [{ command: "sleep 5", status: "cancelled" }, "cancelled", "Cancelled"],
+    [{ command: "pwd", status: "completed", exit_code: 0 }, "success", "Completed"],
+  ] as const)("normalizes terminal result %o", (outputData, statusTone, statusLabel) => {
+    expect(buildToolCard({
+      kind: "result",
+      name: "commandExecution",
+      detail: "command: pwd",
+      hasResult: true,
+      statusTone: "success",
+      statusLabel: "Completed",
+      outputData,
+    }, TEXTS)).toMatchObject({ statusTone, statusLabel });
+  });
+
+  it("only exposes standard execution timing and preserves the stable tool call identity", () => {
+    const card = buildToolCard({
+      kind: "result",
+      name: "exec",
+      detail: "command: pnpm test",
+      hasResult: true,
+      statusTone: "success",
+      statusLabel: "Completed",
+      toolCallId: "tool-timing-1",
+      outputData: { command: "pnpm test", durationMs: 999_999 },
+      execution: { durationMs: 4270 },
+    }, TEXTS);
+    expect(card).toMatchObject({
+      toolCallId: "tool-timing-1",
+      execution: { durationMs: 4270 },
+    });
+    expect(buildToolCard({
+      kind: "result",
+      name: "exec",
+      detail: "command: pnpm test",
+      hasResult: true,
+      statusTone: "success",
+      statusLabel: "Completed",
+      outputData: { command: "pnpm test", durationMs: 999_999 },
+    }, TEXTS).execution).toBeUndefined();
+  });
+});

package/src/features/chat/features/message/utils/chat-message-part.utils.ts

@@ -179,6 +179,8 @@ function buildToolInvocationPart(
     text: shouldShowRawResult && rawResult ? rawResult : undefined,
     outputData: invocation.result,
     callId: invocation.toolCallId || undefined,
+    toolCallId: invocation.toolCallId || undefined,
+    ...(invocation.execution ? { execution: invocation.execution } : {}),
     hasResult: statusView.hasResult,
     statusTone: invalidArgsError ? "error" : statusView.statusTone,
     statusLabel: invalidArgsError ? texts.toolStatusFailedLabel : statusView.statusLabel,

package/src/features/chat/features/message/utils/chat-message-tool-card.utils.ts

@@ -15,6 +15,8 @@ export type ToolCardViewSource = ToolCard & {
   action?: ChatToolPartViewModel["action"];
   fileOperation?: ChatToolPartViewModel["fileOperation"];
   outputData?: unknown;
+  execution?: ChatToolPartViewModel["execution"];
+  toolCallId?: string;
   panelApp?: ChatToolPartViewModel["panelApp"];
 };
 
@@ -62,6 +64,43 @@ export function isTerminalResultRecord(
   );
 }
 
+function readTerminalStatus(value: unknown): string {
+  return typeof value === "string" ? value.trim().toLowerCase() : "";
+}
+
+export function resolveTerminalResultStatus(
+  value: unknown,
+): "success" | "error" | "cancelled" | null {
+  if (!isTerminalResultRecord(value)) return null;
+  const status = readTerminalStatus(value.status ?? value.outcome);
+  if (
+    value.cancelled === true ||
+    value.aborted === true ||
+    status === "cancelled" ||
+    status === "canceled" ||
+    status === "aborted" ||
+    status === "interrupted"
+  ) {
+    return "cancelled";
+  }
+  const exitCode = readOptionalNumber(value.exitCode ?? value.exit_code);
+  if (
+    value.ok === false ||
+    value.blocked === true ||
+    value.timedOut === true ||
+    value.killed === true ||
+    status === "error" ||
+    status === "failed" ||
+    status === "blocked" ||
+    status === "declined" ||
+    status === "timed_out" ||
+    (exitCode != null && exitCode !== 0)
+  ) {
+    return "error";
+  }
+  return "success";
+}
+
 export function extractAssetFileView(
   value: unknown,
   texts: ChatMessageAdapterTexts,
@@ -107,9 +146,19 @@ export function buildToolCard(
   toolCard: ToolCardViewSource,
   texts: ChatMessageAdapterTexts,
 ): ChatToolPartViewModel {
+  const terminalStatus = toolCard.statusTone === "success"
+    ? resolveTerminalResultStatus(toolCard.outputData)
+    : null;
+  const statusTone = terminalStatus ?? toolCard.statusTone;
+  const statusLabel = statusTone === "error"
+    ? texts.toolStatusFailedLabel
+    : statusTone === "cancelled"
+      ? texts.toolStatusCancelledLabel
+      : toolCard.statusLabel;
   return {
     kind: toolCard.kind,
     toolName: toolCard.name,
+    ...(toolCard.toolCallId ? { toolCallId: toolCard.toolCallId } : {}),
     ...("agentId" in toolCard && toolCard.agentId
       ? { agentId: toolCard.agentId }
       : {}),
@@ -121,9 +170,10 @@ export function buildToolCard(
         : undefined,
     output: toolCard.text,
     outputData: toolCard.outputData,
+    ...(toolCard.execution ? { execution: { ...toolCard.execution } } : {}),
     hasResult: Boolean(toolCard.hasResult),
-    statusTone: toolCard.statusTone,
-    statusLabel: toolCard.statusLabel,
+    statusTone,
+    statusLabel,
     titleLabel:
       toolCard.kind === "call" ? texts.toolCallLabel : texts.toolResultLabel,
     outputLabel: texts.toolOutputLabel,

package/src/features/chat/features/ncp/hooks/__tests__/use-hydrated-ncp-agent.test.tsx

@@ -85,7 +85,10 @@ describe("useHydratedNcpAgent", () => {
     await waitFor(() => {
       expect(result.current.isHydrating).toBe(false);
     });
-    expect(mocks.stream).toHaveBeenCalledWith({ sessionId: "session-a" });
+    expect(mocks.stream).toHaveBeenCalledWith(
+      { sessionId: "session-a" },
+      expect.objectContaining({ onOpen: expect.any(Function) }),
+    );
 
     rerender({ sessionId: "session-b" });
 
@@ -94,7 +97,10 @@ describe("useHydratedNcpAgent", () => {
     await waitFor(() => {
       expect(result.current.isHydrating).toBe(false);
     });
-    expect(mocks.stream).toHaveBeenCalledWith({ sessionId: "session-b" });
+    expect(mocks.stream).toHaveBeenCalledWith(
+      { sessionId: "session-b" },
+      expect.objectContaining({ onOpen: expect.any(Function) }),
+    );
     expect(mocks.stream).toHaveBeenCalledTimes(2);
   });
 
@@ -207,12 +213,13 @@ describe("useHydratedNcpAgent", () => {
       expect(result.current.isHydrating).toBe(false);
     });
     expect(loadSeed).not.toHaveBeenCalled();
-    expect(mocks.stream).toHaveBeenCalledWith({
-      sessionId: "session-materialized",
-    });
+    expect(mocks.stream).toHaveBeenCalledWith(
+      { sessionId: "session-materialized" },
+      expect.objectContaining({ onOpen: expect.any(Function) }),
+    );
   });
 
-  it("reloads missed state and reconnects after the live stream disconnects", async () => {
+  it("reloads missed state and remains usable after repeated live stream disconnects", async () => {
     vi.useFakeTimers();
     try {
       const connected = new Promise<void>(() => {});
@@ -220,9 +227,15 @@ describe("useHydratedNcpAgent", () => {
         stop: mocks.stop.mockResolvedValue(undefined),
         stream: mocks.stream
           .mockRejectedValueOnce(new Error("stream disconnected"))
+          .mockRejectedValueOnce(new Error("stream disconnected again"))
           .mockImplementationOnce(() => connected),
         subscribe: vi.fn(() => () => {}),
-        send: mocks.send,
+        send: mocks.send.mockResolvedValue({
+          sessionId: "session-recovery",
+          userMessageId: "user-after-recovery",
+          assistantMessageId: null,
+          runId: null,
+        }),
       } as unknown as NcpAgentClientEndpoint;
       const recoveredMessage = {
         id: "message-recovered",
@@ -235,6 +248,7 @@ describe("useHydratedNcpAgent", () => {
       const loadSeed = vi
         .fn()
         .mockResolvedValueOnce({ messages: [], status: "running" })
+        .mockResolvedValueOnce({ messages: [], status: "running" })
         .mockResolvedValueOnce({
           messages: [recoveredMessage],
           status: "idle",
@@ -254,15 +268,22 @@ describe("useHydratedNcpAgent", () => {
       await act(async () => {
         await vi.runOnlyPendingTimersAsync();
       });
+      await vi.waitFor(() => expect(mocks.stream).toHaveBeenCalledTimes(2));
+      await act(async () => {
+        await vi.runOnlyPendingTimersAsync();
+      });
       await vi.waitFor(() => {
         expect(result.current.visibleMessages).toEqual([recoveredMessage]);
       });
 
-      expect(loadSeed).toHaveBeenCalledTimes(2);
-      expect(mocks.stream).toHaveBeenCalledTimes(2);
-      expect(mocks.send).not.toHaveBeenCalled();
+      expect(loadSeed).toHaveBeenCalledTimes(3);
+      expect(mocks.stream).toHaveBeenCalledTimes(3);
       expect(result.current.hydrateError).toBeNull();
       expect(result.current.isRunning).toBe(false);
+      await act(async () => {
+        await result.current.send("after recovery");
+      });
+      expect(mocks.send).toHaveBeenCalledOnce();
     } finally {
       vi.useRealTimers();
     }
@@ -306,3 +327,69 @@ describe("useHydratedNcpAgent", () => {
     }
   });
 });
+
+describe("useHydratedNcpAgent stream reconciliation", () => {
+  it("reconciles history after the stream opens without overwriting newer live completion", async () => {
+    let subscriber: NcpEndpointSubscriber | null = null;
+    let resolveReconcile: ((seed: { messages: readonly NcpMessage[]; status: "running" }) => void) | null = null;
+    const reconcileSeed = new Promise<{ messages: readonly NcpMessage[]; status: "running" }>((resolve) => {
+      resolveReconcile = resolve;
+    });
+    const client = {
+      stop: mocks.stop.mockResolvedValue(undefined),
+      stream: mocks.stream.mockImplementation((_payload, observer) => {
+        observer?.onOpen?.();
+        return new Promise<void>(() => {});
+      }),
+      subscribe: vi.fn((nextSubscriber: NcpEndpointSubscriber) => {
+        subscriber = nextSubscriber;
+        return () => {};
+      }),
+    } as unknown as NcpAgentClientEndpoint;
+    const loadSeed = vi
+      .fn()
+      .mockResolvedValueOnce({ messages: [], status: "running" })
+      .mockImplementationOnce(() => reconcileSeed);
+    const finalMessage: NcpMessage = {
+      id: "assistant-gap",
+      sessionId: "session-gap",
+      role: "assistant",
+      status: "final",
+      parts: [{ type: "text", text: "Recovered without refresh" }],
+      timestamp: "2026-08-14T00:00:00.000Z",
+    };
+    const { result } = renderHook(() =>
+      useHydratedNcpAgent({
+        sessionId: "session-gap",
+        client,
+        loadSeed,
+      }),
+    );
+
+    await waitFor(() => expect(loadSeed).toHaveBeenCalledTimes(2));
+    act(() => {
+      subscriber?.({
+        type: NcpEventType.MessageSent,
+        payload: { sessionId: "session-gap", message: finalMessage },
+      });
+      subscriber?.({
+        type: NcpEventType.RunFinished,
+        payload: { sessionId: "session-gap", runId: "run-gap" },
+      });
+    });
+    await waitFor(() => expect(result.current.visibleMessages).toEqual([finalMessage]));
+
+    await act(async () => {
+      resolveReconcile?.({
+        messages: [{ ...finalMessage, status: "streaming", parts: [{ type: "text", text: "Recovered" }] }],
+        status: "running",
+      });
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(result.current.visibleMessages).toEqual([finalMessage]);
+      expect(result.current.isRunning).toBe(false);
+    });
+  });
+});

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

@@ -19,6 +19,8 @@ import { nextclawClient } from "@/shared/lib/api";
 
 const NCP_AGENT_UNAVAILABLE_DURING_STARTUP =
   "ncp agent unavailable during startup";
+const NCP_AGENT_STREAM_OPEN_TIMEOUT_MS = 15_000;
+const NCP_AGENT_STREAM_IDLE_TIMEOUT_MS = 70_000;
 
 export { fetchNcpSessionConversationSeed } from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
 
@@ -42,6 +44,8 @@ export function createNcpSessionConversationClient(): NcpHttpAgentClientEndpoint
     baseUrl: API_BASE,
     basePath: "/api/ncp/agent",
     fetchImpl: createNcpAppClientFetch(),
+    streamOpenTimeoutMs: NCP_AGENT_STREAM_OPEN_TIMEOUT_MS,
+    streamIdleTimeoutMs: NCP_AGENT_STREAM_IDLE_TIMEOUT_MS,
   });
 }
 

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

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import {
   fetchNcpSessionSkills,
+  fetchNcpSessionTokenUsage,
   fetchNcpSessions
 } from '@/shared/lib/api';
 
@@ -30,3 +31,12 @@ export function useNcpSessionSkills(params: {
     ...ncpSessionQueryDefaults
   });
 }
+
+export function useNcpSessionTokenUsage(sessionId: string | null) {
+  return useQuery({
+    queryKey: ['ncp-session-token-usage', sessionId],
+    queryFn: () => fetchNcpSessionTokenUsage(sessionId as string),
+    enabled: Boolean(sessionId),
+    ...ncpSessionQueryDefaults
+  });
+}

package/src/features/chat/features/session/utils/__tests__/ncp-session-adapter.utils.test.ts

@@ -35,6 +35,33 @@ it('preserves NCP extension parts for the chat presentation adapter', () => {
   ]);
 });
 
+it('preserves standard tool execution timing without reading opaque result timing', () => {
+  const adapted = adaptNcpMessageToUiMessage({
+    id: 'ncp-message-timing-1',
+    sessionId: 'ncp-session-1',
+    role: 'assistant',
+    status: 'streaming',
+    timestamp: '2026-08-14T00:00:00.000Z',
+    parts: [{
+      type: 'tool-invocation',
+      toolCallId: 'tool-timing-1',
+      toolName: 'exec',
+      state: 'call',
+      args: { command: 'pnpm test' },
+      result: { durationMs: 999_999 },
+      execution: { startedAt: '2026-08-14T00:00:01.000Z' },
+    }],
+  });
+
+  expect(adapted.parts[0]).toMatchObject({
+    type: 'tool-invocation',
+    toolInvocation: {
+      toolCallId: 'tool-timing-1',
+      execution: { startedAt: '2026-08-14T00:00:01.000Z' },
+    },
+  });
+});
+
 describe('adaptNcpSessionSummary', () => {
   it('maps session metadata into shared session entry fields', () => {
     const adapted = adaptNcpSessionSummary(