@nextclaw/ui 0.13.12 → 0.14.0

package/src/features/chat/{utils → features/message/utils}/chat-message-part.utils.ts

@@ -1,8 +1,8 @@
 import {
   stringifyUnknown,
   summarizeToolArgs,
-} from "@/features/chat/utils/chat-message-core.utils";
-import { type ChatInlineTokenSource } from "@/features/chat/utils/chat-inline-token.utils";
+} from "@/features/chat/features/message/utils/chat-message-core.utils";
+import { type ChatInlineTokenSource } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import {
   buildRenderableText,
   buildTextPart,
@@ -18,6 +18,7 @@ import {
 } from "./chat-message-tool-card.utils";
 import { resolveToolInvocationAgentId } from "./chat-message-tool-agent-id.utils";
 import { buildFileOperationCardData } from "./file-operation/card.utils";
+import { buildShowContentToolCard } from "./chat-message-show-content-tool-card.utils";
 import { buildSessionRequestToolCard } from "./chat-message-session-request-tool-card.utils";
 import type {
   ChatMessagePartViewModel,
@@ -116,6 +117,18 @@ function buildToolInvocationPart(
     };
   }
 
+  const showContentToolCard = buildShowContentToolCard({
+    invocation,
+    actionLabel: texts.showContentActionLabel ?? "Show content",
+    statusLabel: texts.toolStatusCompletedLabel,
+  });
+  if (showContentToolCard) {
+    return {
+      type: "tool-card",
+      card: buildToolCard(showContentToolCard, texts),
+    };
+  }
+
   const statusView = resolveToolCardStatus({
     status: invocation.status,
     error: invocation.error,

package/src/features/chat/{utils → features/message/utils}/chat-message-session-request-tool-card.utils.ts

@@ -2,7 +2,7 @@ import {
   stringifyUnknown,
   summarizeToolArgs,
   type ToolCard,
-} from "@/features/chat/utils/chat-message-core.utils";
+} from "@/features/chat/features/message/utils/chat-message-core.utils";
 import { resolveToolInvocationAgentId } from "./chat-message-tool-agent-id.utils";
 import type { ChatToolPartViewModel } from "@nextclaw/agent-chat-ui";
 

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

@@ -0,0 +1,165 @@
+import type {
+  ChatUiShowContentRequest,
+} from "@nextclaw/agent-chat-ui";
+import type {
+  ChatMessagePartSource,
+} from "@/features/chat/types/chat-message.types";
+import type {
+  ToolCardViewSource,
+} from "./chat-message-tool-card.utils";
+
+const SHOW_CONTENT_TOOL_NAME = "show_content";
+
+type ShowContentTargetType = ChatUiShowContentRequest["target"]["type"];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function readOptionalString(value: unknown): string | undefined {
+  if (typeof value !== "string") {
+    return undefined;
+  }
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+}
+
+function readOptionalPositiveInteger(value: unknown): number | undefined {
+  return Number.isInteger(value) && typeof value === "number" && value > 0
+    ? value
+    : undefined;
+}
+
+function readTargetType(value: unknown): ShowContentTargetType | null {
+  return value === "file" || value === "url" || value === "panel_app"
+    ? value
+    : null;
+}
+
+function readPurpose(value: unknown): ChatUiShowContentRequest["purpose"] {
+  return value === "read" || value === "preview" || value === "edit" || value === "interact"
+    ? value
+    : undefined;
+}
+
+function readShowContentRequest(value: unknown): ChatUiShowContentRequest | null {
+  if (!isRecord(value) || !isRecord(value.target)) {
+    return null;
+  }
+  const { target } = value;
+  const {
+    payload,
+    type,
+  } = target;
+  const targetType = readTargetType(type);
+  if (!targetType || !isRecord(payload)) {
+    return null;
+  }
+  const title = readOptionalString(value.title);
+  const purpose = readPurpose(value.purpose);
+
+  if (targetType === "file") {
+    const path = readOptionalString(payload.path);
+    if (!path) {
+      return null;
+    }
+    return {
+      target: {
+        type: "file",
+        payload: {
+          path,
+          line: readOptionalPositiveInteger(payload.line),
+          column: readOptionalPositiveInteger(payload.column),
+        },
+      },
+      title,
+      purpose,
+    };
+  }
+
+  if (targetType === "url") {
+    const url = readOptionalString(payload.url);
+    if (!url) {
+      return null;
+    }
+    return {
+      target: {
+        type: "url",
+        payload: {
+          url,
+        },
+      },
+      title,
+      purpose,
+    };
+  }
+
+  const appId = readOptionalString(payload.appId);
+  if (!appId) {
+    return null;
+  }
+  return {
+    target: {
+      type: "panel_app",
+      payload: {
+        appId,
+      },
+    },
+    title,
+    purpose,
+  };
+}
+
+function readShowContentResult(value: unknown): ChatUiShowContentRequest | null {
+  if (!isRecord(value) || value.action !== "showContent") {
+    return null;
+  }
+  return readShowContentRequest(value.request);
+}
+
+function summarizeShowContentRequest(request: ChatUiShowContentRequest): string {
+  if (request.title) {
+    return request.title;
+  }
+  if (request.target.type === "file") {
+    return request.target.payload.path;
+  }
+  if (request.target.type === "url") {
+    return request.target.payload.url;
+  }
+  return request.target.payload.appId;
+}
+
+export function buildShowContentToolCard(params: {
+  invocation: Extract<ChatMessagePartSource, { type: "tool-invocation" }>["toolInvocation"];
+  actionLabel: string;
+  statusLabel: string;
+}): ToolCardViewSource | null {
+  const {
+    actionLabel,
+    invocation,
+    statusLabel,
+  } = params;
+  if (invocation.toolName !== SHOW_CONTENT_TOOL_NAME) {
+    return null;
+  }
+  const request = readShowContentResult(invocation.result);
+  if (!request) {
+    return null;
+  }
+  return {
+    kind: "result",
+    name: SHOW_CONTENT_TOOL_NAME,
+    detail: summarizeShowContentRequest(request),
+    text: undefined,
+    outputData: invocation.result,
+    hasResult: true,
+    statusTone: "success",
+    statusLabel,
+    action: {
+      kind: "show-content",
+      label: actionLabel,
+      request,
+    },
+  };
+}

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

@@ -1,7 +1,7 @@
 import {
   stringifyUnknown,
   type ToolCard,
-} from "@/features/chat/utils/chat-message-core.utils";
+} from "@/features/chat/features/message/utils/chat-message-core.utils";
 import type {
   ChatMessagePartViewModel,
   ChatToolPartViewModel,

package/src/features/chat/{utils → features/message/utils}/chat-message.utils.ts

@@ -1,5 +1,5 @@
 import { adaptChatMessagePart } from "./chat-message-part.utils";
-import type { ChatInlineTokenSource } from "@/features/chat/utils/chat-inline-token.utils";
+import type { ChatInlineTokenSource } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import type {
   ChatMessageRole,
   ChatMessageViewModel,

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

@@ -0,0 +1,57 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import type { NcpAgentClientEndpoint } from "@nextclaw/ncp";
+import { useHydratedNcpAgent } from "@nextclaw/ncp-react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  stream: vi.fn(),
+  stop: vi.fn(),
+}));
+
+describe("useHydratedNcpAgent", () => {
+  beforeEach(() => {
+    mocks.stream.mockReset();
+    mocks.stop.mockReset();
+  });
+
+  it("treats a newly selected session as hydrating immediately on rerender", async () => {
+    const client = {
+      stop: mocks.stop.mockResolvedValue(undefined),
+      stream: mocks.stream.mockResolvedValue(undefined),
+      subscribe: vi.fn(() => () => {}),
+    } as unknown as NcpAgentClientEndpoint;
+    const loadSeed = vi
+      .fn()
+      .mockResolvedValueOnce({ messages: [], status: "idle" })
+      .mockResolvedValueOnce({ messages: [], status: "idle" });
+
+    const { result, rerender } = renderHook(
+      ({ sessionId }: { sessionId: string }) =>
+        useHydratedNcpAgent({
+          sessionId,
+          client: client as never,
+          loadSeed,
+        }),
+      {
+        initialProps: {
+          sessionId: "session-a",
+        },
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isHydrating).toBe(false);
+    });
+    expect(mocks.stream).toHaveBeenCalledWith({ sessionId: "session-a" });
+
+    rerender({ sessionId: "session-b" });
+
+    expect(result.current.isHydrating).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isHydrating).toBe(false);
+    });
+    expect(mocks.stream).toHaveBeenCalledWith({ sessionId: "session-b" });
+    expect(mocks.stream).toHaveBeenCalledTimes(2);
+  });
+});

package/src/features/chat/{hooks → features/ncp/hooks/__tests__}/use-ncp-agent-runtime.test.tsx

@@ -9,9 +9,9 @@ import {
   type NcpStreamRequestPayload,
   NcpEventType,
 } from "@nextclaw/ncp";
+import { useNcpAgentRuntime } from "@nextclaw/ncp-react";
+import { DefaultNcpAgentConversationStateManager } from "@nextclaw/ncp-toolkit";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { DefaultNcpAgentConversationStateManager } from "../../../../../ncp-packages/nextclaw-ncp-toolkit/src/agent/agent-conversation-state-manager.ts";
-import { useNcpAgentRuntime } from "../../../../../ncp-packages/nextclaw-ncp-react/src/hooks/use-ncp-agent-runtime.ts";
 
 const now = "2026-05-14T00:00:00.000Z";
 

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-chat-derived-state.test.tsx

@@ -0,0 +1,22 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useNcpChatSelectedSession } from '@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state';
+import { useChatQueryStore } from '@/features/chat/stores/ncp-chat-query.store';
+
+describe('useNcpChatSelectedSession', () => {
+  beforeEach(() => {
+    useChatQueryStore.setState({ snapshot: {} });
+  });
+
+  it('keeps the empty sessions snapshot stable before the sessions query loads', () => {
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { result } = renderHook(() => useNcpChatSelectedSession('missing-session'));
+
+    expect(result.current).toBeNull();
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      expect.stringContaining('The result of getSnapshot should be cached'),
+    );
+    errorSpy.mockRestore();
+  });
+});

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-chat-query-store-sync.test.tsx

@@ -0,0 +1,101 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useChatQueryStoreSync } from '@/features/chat/features/ncp/hooks/use-ncp-chat-query-store-sync';
+
+const useNcpSessionSkillsMock = vi.fn();
+const syncSnapshotMock = vi.fn();
+const chatQueryManagerMock = {
+  syncSnapshot: syncSnapshotMock
+};
+const configData = { agents: { defaults: {} }, providers: {} };
+const providersData = { providers: {} };
+const templatesData = { providerTemplates: [] };
+const sessionsData = { sessions: [] };
+const sessionSkillsData = { records: [] };
+const sessionTypesData = {
+  defaultType: 'native',
+  options: [{ value: 'native', label: 'Native' }]
+};
+
+function createQuery<TData>(data: TData) {
+  return {
+    data,
+    error: null,
+    fetchStatus: 'idle',
+    isFetched: true,
+    isFetching: false,
+    isLoading: false,
+    isSuccess: true,
+    status: 'success',
+  };
+}
+
+vi.mock('@/shared/hooks/use-config', () => ({
+  useConfig: () => createQuery(configData),
+  useConfigMeta: () => ({
+    data: { providers: [] },
+    isFetched: true,
+    isSuccess: true
+  }),
+  useProviders: () => createQuery(providersData),
+  useProviderTemplates: () => createQuery(templatesData)
+}));
+
+vi.mock('@/features/chat/features/ncp/hooks/use-ncp-session-queries', () => ({
+  useNcpSessions: () => createQuery(sessionsData),
+  useNcpSessionSkills: (params: unknown) => useNcpSessionSkillsMock(params)
+}));
+
+vi.mock('@/features/chat/features/session-type/hooks/use-ncp-chat-session-types', () => ({
+  useNcpChatSessionTypes: () => createQuery(sessionTypesData)
+}));
+
+vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
+  usePresenter: () => ({
+    chatQueryManager: chatQueryManagerMock
+  })
+}));
+
+beforeEach(() => {
+  syncSnapshotMock.mockClear();
+  useNcpSessionSkillsMock.mockReset();
+});
+
+function renderQuerySync(params: { sessionKey: string | null }) {
+  return renderHook(() =>
+    useChatQueryStoreSync({
+      sessionKey: params.sessionKey,
+    })
+  );
+}
+
+describe('useChatQueryStoreSync skills query', () => {
+  it('loads draft-session skills before a new chat materializes', async () => {
+    const sessionSkillsQuery = createQuery(sessionSkillsData);
+    useNcpSessionSkillsMock.mockReturnValue(sessionSkillsQuery);
+
+    renderQuerySync({ sessionKey: null });
+
+    expect(useNcpSessionSkillsMock).toHaveBeenCalledWith({
+      sessionId: 'draft-session'
+    });
+    await waitFor(() =>
+      expect(syncSnapshotMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          sessionSkillsSessionId: 'draft-session',
+          sessionSkillsQuery
+        })
+      )
+    );
+  });
+
+  it('loads real session skills after materialization', () => {
+    useNcpSessionSkillsMock.mockReturnValue(createQuery(sessionSkillsData));
+
+    renderQuerySync({ sessionKey: 'session-1' });
+
+    expect(useNcpSessionSkillsMock).toHaveBeenCalledWith({
+      sessionId: 'session-1'
+    });
+  });
+});

package/src/features/chat/{hooks → features/ncp/hooks/__tests__}/use-ncp-session-conversation.test.tsx

@@ -1,7 +1,7 @@
 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";
+import { fetchNcpSessionConversationSeed, useNcpSessionConversation } from "../use-ncp-session-conversation";
 
 const mocks = vi.hoisted(() => ({
   fetchNcpSessionMessages: vi.fn(),

package/src/features/chat/features/ncp/hooks/__tests__/use-ui-show-content-event.test.tsx

@@ -0,0 +1,52 @@
+import { act, render, waitFor } from '@testing-library/react';
+import { eventKeys } from '@nextclaw/shared';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  ChatPresenterProvider,
+  type ChatPresenterLike,
+} from '@/features/chat/components/providers/chat-presenter.provider';
+import { useUiShowContentEvent } from '@/features/chat/features/ncp/hooks/use-ui-show-content-event';
+import { nextclawClient } from '@/shared/lib/api';
+
+function UiShowContentEventConsumer() {
+  useUiShowContentEvent();
+  return null;
+}
+
+describe('useUiShowContentEvent', () => {
+  it('routes ui.show-content events to the chat thread manager from context', async () => {
+    const handleUiShowContentEvent = vi.fn();
+    const presenter = {
+      chatThreadManager: {
+        handleUiShowContentEvent,
+      },
+    } as unknown as ChatPresenterLike;
+    const event = {
+      id: 'tool:call-show-content-1:show-content',
+      toolCallId: 'call-show-content-1',
+      target: {
+        type: 'url' as const,
+        payload: {
+          url: 'https://example.com/read',
+        },
+      },
+      title: 'Example URL',
+      purpose: 'read' as const,
+    };
+
+    const rendered = render(
+      <ChatPresenterProvider presenter={presenter}>
+        <UiShowContentEventConsumer />
+      </ChatPresenterProvider>,
+    );
+
+    act(() => {
+      nextclawClient.eventBus.emit(eventKeys.uiShowContent, event);
+    });
+
+    await waitFor(() => {
+      expect(handleUiShowContentEvent).toHaveBeenCalledWith(event);
+    });
+    rendered.unmount();
+  });
+});

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

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import type {
+  NcpSessionSummaryView,
+  SessionEntryView,
+} from '@/shared/lib/api';
+import { adaptNcpSessionSummaries } from '@/features/chat/features/session/utils/ncp-session-adapter.utils';
+import { useChatQueryStore } from '@/features/chat/stores/ncp-chat-query.store';
+
+const EMPTY_NCP_SESSION_SUMMARIES: NcpSessionSummaryView[] = [];
+
+export function useNcpChatProviderStateResolved(): boolean {
+  const isConfigResolved = useChatQueryStore(
+    (state) => Boolean(state.snapshot.configQuery?.isFetched || state.snapshot.configQuery?.isSuccess),
+  );
+  const isProvidersResolved = useChatQueryStore(
+    (state) => Boolean(state.snapshot.providersQuery?.isFetched || state.snapshot.providersQuery?.isSuccess),
+  );
+  const isTemplatesResolved = useChatQueryStore(
+    (state) =>
+      Boolean(state.snapshot.providerTemplatesQuery?.isFetched || state.snapshot.providerTemplatesQuery?.isSuccess),
+  );
+  return isConfigResolved && isProvidersResolved && isTemplatesResolved;
+}
+
+export function useNcpChatSelectedSession(sessionKey: string | null): SessionEntryView | null {
+  const sessionSummaries = useChatQueryStore(
+    (state) => state.snapshot.sessionsQuery?.data?.sessions ?? EMPTY_NCP_SESSION_SUMMARIES,
+  );
+  const allSessions = useMemo(
+    () => adaptNcpSessionSummaries(sessionSummaries),
+    [sessionSummaries],
+  );
+  return useMemo(
+    () => allSessions.find((session) => session.key === sessionKey) ?? null,
+    [allSessions, sessionKey],
+  );
+}

package/src/features/chat/features/ncp/hooks/use-ncp-chat-query-store-sync.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import { useNcpSessionSkills, useNcpSessions } from '@/features/chat/features/ncp/hooks/use-ncp-session-queries';
+import { useNcpChatSessionTypes } from '@/features/chat/features/session-type/hooks/use-ncp-chat-session-types';
+import { useConfig, useProviders, useProviderTemplates } from '@/shared/hooks/use-config';
+
+export function useChatQueryStoreSync(params: { sessionKey: string | null }) {
+  const presenter = usePresenter();
+  const configQuery = useConfig();
+  const providersQuery = useProviders();
+  const templatesQuery = useProviderTemplates();
+  const sessionsQuery = useNcpSessions({ limit: 200 });
+  const sessionTypesQuery = useNcpChatSessionTypes();
+  const sessionId = params.sessionKey?.trim() || 'draft-session';
+  const sessionSkillsQuery = useNcpSessionSkills({ sessionId });
+
+  useEffect(() => {
+    presenter.chatQueryManager.syncSnapshot({
+      configQuery,
+      providersQuery,
+      providerTemplatesQuery: templatesQuery,
+      sessionsQuery,
+      sessionTypesQuery,
+      sessionSkillsSessionId: sessionId,
+      sessionSkillsQuery,
+    });
+  }, [configQuery, presenter.chatQueryManager, providersQuery, sessionId, sessionSkillsQuery, sessionsQuery, sessionTypesQuery, templatesQuery]);
+}

package/src/features/chat/{hooks → features/ncp/hooks}/use-ncp-child-session-tabs-view.ts

@@ -1,10 +1,10 @@
 import { useMemo } from "react";
 import type { SessionEntryView } from "@/shared/lib/api";
-import { sessionDisplayName } from "@/features/chat/utils/chat-session-display.utils";
-import { adaptNcpSessionSummaries } from "@/features/chat/utils/ncp-session-adapter.utils";
-import { resolveSessionTypeLabel } from "@/features/chat/hooks/use-chat-session-type-state";
+import { sessionDisplayName } from "@/features/chat/features/session/utils/chat-session-display.utils";
+import { adaptNcpSessionSummaries } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
+import { resolveSessionTypeLabel } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import type { ChatChildSessionTab } from "@/features/chat/stores/chat-thread.store";
-import { useNcpSessions } from "@/shared/hooks/use-config";
+import { useNcpSessions } from "@/features/chat/features/ncp/hooks/use-ncp-session-queries";
 import type { SessionRunStatus } from "@/features/chat/types/session-run-status.types";
 
 export type ResolvedChildSessionTab = {

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

@@ -2,7 +2,7 @@ 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, type SessionContextWindowView } from "@/shared/lib/api";
-import { createNcpAppClientFetch } from "@/features/chat/utils/ncp-app-client-fetch.utils";
+import { createNcpAppClientFetch } from "@/features/chat/features/runtime/utils/ncp-app-client-fetch.utils";
 import { useSystemStatus } from "@/features/system-status";
 
 const DEFAULT_MESSAGE_LIMIT = 300;

package/src/features/chat/{hooks → features/ncp/hooks}/use-ncp-session-list-view.ts

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import type { SessionEntryView } from '@/shared/lib/api';
-import { sessionMatchesQuery } from '@/features/chat/utils/chat-session-display.utils';
-import { adaptNcpSessionSummaries } from '@/features/chat/utils/ncp-session-adapter.utils';
+import { sessionMatchesQuery } from '@/features/chat/features/session/utils/chat-session-display.utils';
+import { adaptNcpSessionSummaries } from '@/features/chat/features/session/utils/ncp-session-adapter.utils';
 import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
-import { useNcpSessions } from '@/shared/hooks/use-config';
+import { useNcpSessions } from '@/features/chat/features/ncp/hooks/use-ncp-session-queries';
 import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 
 export type NcpSessionListItemView = {

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

@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  fetchNcpSessionSkills,
+  fetchNcpSessions
+} from '@/shared/lib/api';
+
+const ncpSessionQueryDefaults = { staleTime: 5_000, retry: false } as const;
+
+export function useNcpSessions(params?: { limit?: number; peerId?: string }) {
+  return useQuery({
+    queryKey: ['ncp-sessions', params?.limit ?? null, params?.peerId?.trim() || null],
+    queryFn: () => fetchNcpSessions(params),
+    ...ncpSessionQueryDefaults
+  });
+}
+
+export function useNcpSessionSkills(params: {
+  sessionId: string | null;
+  projectRoot?: string | null;
+}) {
+  return useQuery({
+    queryKey: ['ncp-session-skills', params.sessionId, params.projectRoot ?? null],
+    queryFn: () =>
+      fetchNcpSessionSkills(params.sessionId as string, {
+        ...(Object.prototype.hasOwnProperty.call(params, 'projectRoot')
+          ? { projectRoot: params.projectRoot ?? null }
+          : {})
+    }),
+    enabled: Boolean(params.sessionId),
+    ...ncpSessionQueryDefaults
+  });
+}

package/src/features/chat/features/ncp/hooks/use-ui-show-content-event.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { eventKeys } from '@nextclaw/shared';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import { nextclawClient } from '@/shared/lib/api';
+
+export function useUiShowContentEvent(): void {
+  const presenter = usePresenter();
+
+  useEffect(() => (
+    nextclawClient.eventBus.on(eventKeys.uiShowContent, (payload) => {
+      void presenter.chatThreadManager.handleUiShowContentEvent(payload);
+    })
+  ), [presenter]);
+}