@nextclaw/ui 0.14.1 → 0.14.2

package/src/features/chat/features/{input/hooks/use-chat-input-bar-query-state.ts → conversation/hooks/use-session-conversation-input-query.ts}

@@ -1,39 +1,54 @@
-import { useMemo } from 'react';
+import { useMemo, type SetStateAction } from 'react';
+
 import type { NcpSessionSummaryView, SessionSkillEntryView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
-import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import { normalizeSessionProjectRootValue } from '@/shared/lib/session-project';
+import {
+  useNcpSessionSkills,
+} from '@/features/chat/features/ncp/hooks/use-ncp-session-queries';
+import { useNcpChatProviderStateResolved } from '@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state';
 import {
   buildNcpChatProviderModelOptions,
   filterNcpChatModelOptionsBySessionType,
 } from '@/features/chat/features/ncp/utils/ncp-chat-query-derived.utils';
-import { useNcpChatProviderStateResolved } from '@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state';
-import { useChatSessionTypeState } from '@/features/chat/features/session-type/hooks/use-chat-session-type-state';
 import { adaptNcpSessionSummaries } from '@/features/chat/features/session/utils/ncp-session-adapter.utils';
 import { resolveRecentSessionPreferredValue } from '@/features/chat/features/session/utils/chat-session-preference-governance.utils';
+import { useChatSessionTypeState } from '@/features/chat/features/session-type/hooks/use-chat-session-type-state';
 import { chatRecentModelsManager } from '@/features/chat/managers/chat-recent-models.manager';
-import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
 import { useChatQueryStore } from '@/features/chat/stores/ncp-chat-query.store';
-import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
-import { normalizeSessionProjectRootValue } from '@/shared/lib/session-project';
+
+import type { SessionConversationInputSnapshot } from './use-session-conversation-input-state';
 
 const EMPTY_SESSION_SKILL_RECORDS: SessionSkillEntryView[] = [];
 const EMPTY_NCP_SESSION_SUMMARIES: NcpSessionSummaryView[] = [];
 
-export function useChatInputBarQueryState(snapshot: ChatInputSnapshot) {
-  const presenter = usePresenter();
-  const selectedSessionKey = useChatSessionListStore(
-    (state) => state.snapshot.selectedSessionKey,
-  );
+type UseSessionConversationInputQueryParams = {
+  readonly sessionKey: string | null;
+  readonly inputSnapshot: SessionConversationInputSnapshot;
+  readonly setPendingSessionType: (sessionType: SetStateAction<string>) => void;
+};
+
+export function useSessionConversationInputQuery(params: UseSessionConversationInputQueryParams) {
+  const {
+    sessionKey,
+    inputSnapshot,
+    setPendingSessionType,
+  } = params;
+  const selectedSessionKey = sessionKey ?? null;
   const isProviderStateResolved = useNcpChatProviderStateResolved();
   const querySnapshot = useChatQueryStore((state) => state.snapshot);
   const config = querySnapshot.configQuery?.data ?? null;
   const sessionSummaries =
     querySnapshot.sessionsQuery?.data?.sessions ?? EMPTY_NCP_SESSION_SUMMARIES;
+  const sessionSkillsQuery = useNcpSessionSkills({
+    sessionId: selectedSessionKey?.trim() || 'draft-session',
+    projectRoot: normalizeSessionProjectRootValue(inputSnapshot.pendingProjectRoot),
+  });
   const skillRecords =
-    querySnapshot.sessionSkillsQuery?.data?.records ?? EMPTY_SESSION_SKILL_RECORDS;
+    sessionSkillsQuery.data?.records ?? EMPTY_SESSION_SKILL_RECORDS;
   const isSkillsLoading = Boolean(
-    querySnapshot.sessionSkillsQuery?.isLoading ||
-      querySnapshot.sessionSkillsQuery?.isFetching,
+    sessionSkillsQuery.isLoading ||
+      sessionSkillsQuery.isFetching,
   );
   const sessions = useMemo(
     () => adaptNcpSessionSummaries(sessionSummaries),
@@ -45,8 +60,8 @@ export function useChatInputBarQueryState(snapshot: ChatInputSnapshot) {
   );
   const sessionTypeState = useChatSessionTypeState({
     selectedSession,
-    pendingSessionType: snapshot.pendingSessionType,
-    setPendingSessionType: presenter.chatInputManager.setPendingSessionType,
+    pendingSessionType: inputSnapshot.pendingSessionType,
+    setPendingSessionType,
     sessionTypesData: querySnapshot.sessionTypesQuery?.data ?? null,
   });
   const providerModelOptions = useMemo(

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

@@ -0,0 +1,281 @@
+import { useCallback, useMemo, useState, type SetStateAction } from 'react';
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
+
+import type { ThinkingLevel } from '@/shared/lib/api';
+import { DEFAULT_SESSION_TYPE } from '@/features/chat/features/session-type/utils/chat-session-type.utils';
+import { createChatComposerNodesFromDraft } from '@/features/chat/features/input/utils/chat-composer-state.utils';
+
+type SessionConversationInputStateValue = string | null | undefined;
+type SessionConversationSkillSelection = {
+  readonly ref: string;
+  readonly name: string;
+};
+
+export type SessionConversationComposerState = {
+  readonly text: string;
+  readonly nodes: readonly ChatComposerNode[];
+  readonly selectedSkills: readonly string[];
+  readonly skillRecords: readonly SessionConversationSkillSelection[];
+};
+
+export type SessionConversationInputSnapshot = SessionConversationComposerState & {
+  readonly attachments: readonly NcpDraftAttachment[];
+  readonly selectedModel: SessionConversationInputStateValue;
+  readonly selectedThinkingLevel: ThinkingLevel | null;
+  readonly pendingSessionType: string;
+  readonly selectedSessionType: string | null;
+  readonly pendingProjectRoot: string | null;
+  readonly composerFocusRequestId: number;
+  readonly sendError: string | null;
+};
+
+export type SessionConversationInputPatch =
+  Partial<SessionConversationInputSnapshot> |
+  ((snapshot: SessionConversationInputSnapshot) => Partial<SessionConversationInputSnapshot>);
+
+export type SessionConversationInputActions = {
+  readonly update: (patch: SessionConversationInputPatch) => void;
+  readonly syncComposer: (composer: SessionConversationComposerState) => void;
+  readonly resetComposer: () => void;
+  readonly restoreComposer: (
+    composer: SessionConversationComposerState & {
+      readonly attachments?: readonly NcpDraftAttachment[];
+    },
+  ) => void;
+  readonly applyPromptSuggestion: (prompt: string) => void;
+  readonly requestComposerFocusAtEnd: () => void;
+  readonly consumeComposerFocusRequest: () => void;
+  readonly setAttachments: (attachments: readonly NcpDraftAttachment[]) => void;
+  readonly addAttachments: (attachments: readonly NcpDraftAttachment[]) => readonly NcpDraftAttachment[];
+  readonly removeAttachment: (attachmentId: string) => void;
+  readonly setSelectedModel: (model: SessionConversationInputStateValue) => void;
+  readonly setSelectedThinkingLevel: (level: ThinkingLevel | null) => void;
+  readonly setPendingSessionType: (sessionType: SetStateAction<string>) => void;
+  readonly setPendingProjectRoot: (projectRoot: string | null) => void;
+  readonly setSelectedSkills: (
+    selectedSkills: readonly string[],
+    skillRecords: readonly SessionConversationSkillSelection[],
+  ) => void;
+  readonly setSendError: (message: string | null) => void;
+};
+
+const EMPTY_COMPOSER_STATE: SessionConversationComposerState = {
+  text: '',
+  nodes: [],
+  selectedSkills: [],
+  skillRecords: [],
+};
+
+const createInitialInputSnapshot = (): SessionConversationInputSnapshot => ({
+  ...EMPTY_COMPOSER_STATE,
+  attachments: [],
+  selectedModel: undefined,
+  selectedThinkingLevel: null,
+  pendingSessionType: DEFAULT_SESSION_TYPE,
+  selectedSessionType: DEFAULT_SESSION_TYPE,
+  pendingProjectRoot: null,
+  composerFocusRequestId: 0,
+  sendError: null,
+});
+
+const normalizeSessionType = (sessionType: string | null | undefined): string => {
+  const trimmed = sessionType?.trim();
+  return trimmed ? trimmed : DEFAULT_SESSION_TYPE;
+};
+
+const buildAttachmentKey = (attachment: NcpDraftAttachment): string => {
+  return [
+    attachment.assetUri ?? '',
+    attachment.url ?? '',
+    attachment.name,
+    attachment.mimeType,
+    String(attachment.sizeBytes),
+    attachment.contentBase64 ?? '',
+  ].join(':');
+};
+
+const mergeAttachments = (
+  current: readonly NcpDraftAttachment[],
+  next: readonly NcpDraftAttachment[],
+): readonly NcpDraftAttachment[] => {
+  const seen = new Set(current.map(buildAttachmentKey));
+  const merged = [...current];
+  next.forEach((attachment) => {
+    const key = buildAttachmentKey(attachment);
+    if (!seen.has(key)) {
+      seen.add(key);
+      merged.push(attachment);
+    }
+  });
+  return merged;
+};
+
+export const useSessionConversationInputState = () => {
+  const [snapshot, setSnapshot] = useState<SessionConversationInputSnapshot>(createInitialInputSnapshot);
+
+  const update = useCallback((patch: SessionConversationInputPatch) => {
+    setSnapshot((current) => {
+      const resolvedPatch = typeof patch === 'function' ? patch(current) : patch;
+      return {
+        ...current,
+        ...resolvedPatch,
+      };
+    });
+  }, []);
+
+  const syncComposer = useCallback((composer: SessionConversationComposerState) => {
+    update({
+      text: composer.text,
+      nodes: composer.nodes,
+      selectedSkills: composer.selectedSkills,
+      skillRecords: composer.skillRecords,
+      sendError: null,
+    });
+  }, [update]);
+
+  const resetComposer = useCallback(() => {
+    update({
+      ...EMPTY_COMPOSER_STATE,
+      attachments: [],
+      sendError: null,
+    });
+  }, [update]);
+
+  const restoreComposer = useCallback((
+    composer: SessionConversationComposerState & {
+      readonly attachments?: readonly NcpDraftAttachment[];
+    },
+  ) => {
+    update({
+      ...composer,
+    });
+  }, [update]);
+
+  const applyPromptSuggestion = useCallback((prompt: string) => {
+    update({
+      text: prompt,
+      nodes: createChatComposerNodesFromDraft(prompt),
+      selectedSkills: [],
+      skillRecords: [],
+      sendError: null,
+      composerFocusRequestId: Date.now(),
+    });
+  }, [update]);
+
+  const requestComposerFocusAtEnd = useCallback(() => {
+    update((current) => ({
+      composerFocusRequestId: current.composerFocusRequestId + 1,
+    }));
+  }, [update]);
+
+  const consumeComposerFocusRequest = useCallback(() => {
+    update({ composerFocusRequestId: 0 });
+  }, [update]);
+
+  const setAttachments = useCallback((attachments: readonly NcpDraftAttachment[]) => {
+    update({ attachments });
+  }, [update]);
+
+  const addAttachments = useCallback((attachments: readonly NcpDraftAttachment[]) => {
+    if (attachments.length === 0) {
+      return [];
+    }
+    const existingKeys = new Set(snapshot.attachments.map(buildAttachmentKey));
+    const nextAttachments = mergeAttachments(snapshot.attachments, attachments);
+    const insertedAttachments = nextAttachments.filter(
+      (attachment) => !existingKeys.has(buildAttachmentKey(attachment)),
+    );
+    if (insertedAttachments.length > 0) {
+      update({ attachments: nextAttachments });
+    }
+    return insertedAttachments;
+  }, [snapshot.attachments, update]);
+
+  const removeAttachment = useCallback((attachmentId: string) => {
+    update((current) => ({
+      attachments: current.attachments.filter((attachment) => attachment.id !== attachmentId),
+    }));
+  }, [update]);
+
+  const setSelectedModel = useCallback((model: SessionConversationInputStateValue) => {
+    update({ selectedModel: model });
+  }, [update]);
+
+  const setSelectedThinkingLevel = useCallback((level: ThinkingLevel | null) => {
+    update({ selectedThinkingLevel: level });
+  }, [update]);
+
+  const setPendingSessionType = useCallback((sessionType: SetStateAction<string>) => {
+    update((current) => {
+      const nextSessionType = typeof sessionType === 'function'
+        ? sessionType(current.pendingSessionType)
+        : sessionType;
+      const normalizedSessionType = normalizeSessionType(nextSessionType);
+      return {
+        pendingSessionType: normalizedSessionType,
+        selectedSessionType: normalizedSessionType,
+      };
+    });
+  }, [update]);
+
+  const setPendingProjectRoot = useCallback((projectRoot: string | null) => {
+    update({ pendingProjectRoot: projectRoot });
+  }, [update]);
+
+  const setSelectedSkills = useCallback((
+    selectedSkills: readonly string[],
+    skillRecords: readonly SessionConversationSkillSelection[],
+  ) => {
+    update({
+      selectedSkills,
+      skillRecords,
+      sendError: null,
+    });
+  }, [update]);
+
+  const setSendError = useCallback((message: string | null) => {
+    update({ sendError: message });
+  }, [update]);
+
+  const actions = useMemo<SessionConversationInputActions>(() => ({
+    update,
+    syncComposer,
+    resetComposer,
+    restoreComposer,
+    applyPromptSuggestion,
+    requestComposerFocusAtEnd,
+    consumeComposerFocusRequest,
+    setAttachments,
+    addAttachments,
+    removeAttachment,
+    setSelectedModel,
+    setSelectedThinkingLevel,
+    setPendingSessionType,
+    setPendingProjectRoot,
+    setSelectedSkills,
+    setSendError,
+  }), [
+    update,
+    syncComposer,
+    resetComposer,
+    restoreComposer,
+    applyPromptSuggestion,
+    requestComposerFocusAtEnd,
+    consumeComposerFocusRequest,
+    setAttachments,
+    addAttachments,
+    removeAttachment,
+    setSelectedModel,
+    setSelectedThinkingLevel,
+    setPendingSessionType,
+    setPendingProjectRoot,
+    setSelectedSkills,
+    setSendError,
+  ]);
+
+  return {
+    inputSnapshot: snapshot,
+    inputActions: actions,
+  };
+};

package/src/features/chat/features/conversation/utils/session-conversation-input-toolbar.utils.ts

@@ -0,0 +1,158 @@
+import { t } from '@/shared/lib/i18n';
+import {
+  buildModelToolbarSelect,
+  buildSkillPickerModel,
+  buildThinkingToolbarSelect,
+  type ChatModelRecord,
+  type ChatSkillRecord,
+  type ChatThinkingLevel,
+} from '@/features/chat/features/input/utils/chat-input-bar.utils';
+
+function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
+  return {
+    off: t('chatThinkingLevelOff'),
+    minimal: t('chatThinkingLevelMinimal'),
+    low: t('chatThinkingLevelLow'),
+    medium: t('chatThinkingLevelMedium'),
+    high: t('chatThinkingLevelHigh'),
+    adaptive: t('chatThinkingLevelAdaptive'),
+    xhigh: t('chatThinkingLevelXhigh'),
+  };
+}
+
+type ToolbarSelectBuildParams = {
+  readonly allModelsLabel: string;
+  readonly favoriteModelLabel: string;
+  readonly favoriteModelValues: string[];
+  readonly favoriteModelsLabel: string;
+  readonly hasModelOptions: boolean;
+  readonly isModelOptionsLoading: boolean;
+  readonly modelRecords: ChatModelRecord[];
+  readonly modelSearchEmptyLabel: string;
+  readonly modelSearchPlaceholder: string;
+  readonly onFavoriteModelToggle: (value: string, favorite: boolean) => void;
+  readonly onModelChange: (value: string) => void;
+  readonly onThinkingChange: (value: ChatThinkingLevel | null) => void;
+  readonly recentModelValues: string[];
+  readonly recentModelsLabel: string;
+  readonly selectedModel: string;
+  readonly selectedThinkingLevel: ChatThinkingLevel | null;
+  readonly thinkingDefaultLevel: ChatThinkingLevel | null;
+  readonly thinkingSupportedLevels: ChatThinkingLevel[];
+  readonly unfavoriteModelLabel: string;
+};
+
+export function buildSessionConversationToolbarSelects(params: ToolbarSelectBuildParams) {
+  const {
+    allModelsLabel,
+    favoriteModelLabel,
+    favoriteModelValues,
+    favoriteModelsLabel,
+    hasModelOptions,
+    isModelOptionsLoading,
+    modelRecords,
+    modelSearchEmptyLabel,
+    modelSearchPlaceholder,
+    onFavoriteModelToggle,
+    onModelChange,
+    onThinkingChange,
+    recentModelValues,
+    recentModelsLabel,
+    selectedModel,
+    selectedThinkingLevel,
+    thinkingDefaultLevel,
+    thinkingSupportedLevels,
+    unfavoriteModelLabel,
+  } = params;
+  return [
+    buildModelToolbarSelect({
+      modelOptions: modelRecords,
+      favoriteModelValues,
+      recentModelValues,
+      selectedModel,
+      isModelOptionsLoading,
+      hasModelOptions,
+      onFavoriteToggle: onFavoriteModelToggle,
+      onValueChange: onModelChange,
+      texts: {
+        modelSelectPlaceholder: t('chatSelectModel'),
+        modelNoOptionsLabel: t('chatModelNoOptions'),
+        modelSearchPlaceholder,
+        modelSearchEmptyLabel,
+        favoriteModelsLabel,
+        favoriteModelLabel,
+        unfavoriteModelLabel,
+        recentModelsLabel,
+        allModelsLabel,
+      },
+    }),
+    buildThinkingToolbarSelect({
+      supportedLevels: thinkingSupportedLevels,
+      selectedThinkingLevel,
+      defaultThinkingLevel: thinkingDefaultLevel,
+      onValueChange: onThinkingChange,
+      texts: {
+        thinkingLabels: buildThinkingLabels(),
+      },
+    }),
+  ].filter((item): item is NonNullable<typeof item> => item !== null);
+}
+
+export function buildSessionConversationSkillPicker(params: {
+  readonly allSkillsLabel: string;
+  readonly isSkillsLoading: boolean;
+  readonly onSelectedKeysChange: (keys: string[]) => void;
+  readonly recentSkillGroupValues: string[];
+  readonly recentSkillValues: string[];
+  readonly recentSkillsLabel: string;
+  readonly skillRecords: ChatSkillRecord[];
+  readonly selectedSkills: readonly string[];
+}) {
+  const {
+    allSkillsLabel,
+    isSkillsLoading,
+    onSelectedKeysChange,
+    recentSkillGroupValues,
+    recentSkillValues,
+    recentSkillsLabel,
+    selectedSkills,
+    skillRecords,
+  } = params;
+  return buildSkillPickerModel({
+    skillRecords,
+    recentSkillValues,
+    groupedRecentSkillValues: recentSkillGroupValues,
+    selectedSkills: [...selectedSkills],
+    isLoading: isSkillsLoading,
+    onSelectedKeysChange,
+    texts: {
+      title: t('chatSkillsPickerTitle'),
+      searchPlaceholder: t('chatSkillsPickerSearchPlaceholder'),
+      emptyLabel: t('chatSkillsPickerEmpty'),
+      loadingLabel: t('sessionsLoading'),
+      manageLabel: t('chatSkillsPickerManage'),
+      recentSkillsLabel,
+      allSkillsLabel,
+    },
+  });
+}
+
+export function resolveThinkingForConversationModel(
+  modelOption: ChatModelRecord | undefined,
+  current: ChatThinkingLevel | null,
+): ChatThinkingLevel | null {
+  const capability = modelOption?.thinkingCapability;
+  if (!capability || capability.supported.length === 0) {
+    return null;
+  }
+  if (current === 'off') {
+    return 'off';
+  }
+  if (current && capability.supported.includes(current)) {
+    return current;
+  }
+  if (capability.default && capability.supported.includes(capability.default)) {
+    return capability.default;
+  }
+  return 'off';
+}

package/src/features/chat/features/input/hooks/__tests__/use-chat-input-surface-state.test.tsx

@@ -0,0 +1,56 @@
+import { act, renderHook } from '@testing-library/react';
+import { expect, it, vi } from 'vitest';
+import { useChatInputSurfaceState } from '@/features/chat/features/input/hooks/use-chat-input-surface-state';
+
+vi.mock('@/features/panel-apps', () => ({
+  usePanelApps: () => ({
+    data: { entries: [] },
+    isFetching: false,
+    isLoading: false,
+  }),
+}));
+
+function createHookParams() {
+  return {
+    commands: [],
+    isSkillsLoading: false,
+    itemTexts: {
+      slashTexts: {
+        noSkillDescription: 'No description',
+        slashSkillScopeLabel: 'Scope',
+        slashSkillSpecLabel: 'Spec',
+        slashSkillSubtitle: 'Skill',
+      },
+    },
+    language: 'zh' as const,
+    onSelectSkill: vi.fn(),
+    recentSkillValues: [],
+    skillRecords: [],
+  };
+}
+
+it('keeps equivalent input surface trigger updates from rerendering the composer owner', () => {
+  let renderCount = 0;
+  const trigger = {
+    end: 4,
+    key: 'slash',
+    marker: '/',
+    query: 'xxx',
+    start: 0,
+  };
+  const { result } = renderHook(() => {
+    renderCount += 1;
+    return useChatInputSurfaceState(createHookParams());
+  });
+
+  expect(renderCount).toBe(1);
+
+  act(() => result.current.setInputSurfaceTrigger(trigger));
+  expect(renderCount).toBe(2);
+
+  act(() => result.current.setInputSurfaceTrigger({ ...trigger }));
+  expect(renderCount).toBe(2);
+
+  act(() => result.current.setInputSurfaceTrigger({ ...trigger, end: 3, query: 'xx' }));
+  expect(renderCount).toBe(3);
+});

package/src/features/chat/features/input/hooks/use-chat-input-surface-state.ts

@@ -0,0 +1,117 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  resolveChatInputSurfaceState,
+  type ChatInputSurfaceTrigger,
+} from '@nextclaw/agent-chat-ui';
+import { usePanelApps } from '@/features/panel-apps';
+import { t, type I18nLanguage } from '@/shared/lib/i18n';
+import { createPanelAppReferenceInputSurfacePlugin, PANEL_APP_REFERENCE_TRIGGER_SPEC } from '@/features/chat/features/input/input-surface-plugins/panel-app-reference-plugin.utils';
+import {
+  createSlashCommandInputSurfacePlugin,
+  type ChatSlashCommandDescriptor,
+} from '@/features/chat/features/input/input-surface-plugins/slash-command-plugin.utils';
+import type { ChatInputBarAdapterTexts, ChatSkillRecord } from '@/features/chat/types/chat-input-bar.types';
+
+export function useChatInputSurfaceState(params: {
+  commands: readonly ChatSlashCommandDescriptor[];
+  isSkillsLoading: boolean;
+  itemTexts: {
+    slashTexts: Pick<
+      ChatInputBarAdapterTexts,
+      'slashSkillSubtitle' | 'slashSkillSpecLabel' | 'slashSkillScopeLabel' | 'noSkillDescription'
+    >;
+  };
+  language: I18nLanguage;
+  onSelectSkill: (skillRef: string) => void;
+  recentSkillValues: readonly string[];
+  skillRecords: readonly ChatSkillRecord[];
+}) {
+  const {
+    isSkillsLoading,
+    itemTexts,
+    language,
+    onSelectSkill,
+    recentSkillValues,
+    skillRecords,
+    commands,
+  } = params;
+  const [inputSurfaceTrigger, setInputSurfaceTriggerState] = useState<ChatInputSurfaceTrigger | null>(null);
+  const inputSurfaceTriggerSignatureRef = useRef('null');
+  const setInputSurfaceTrigger = useCallback((nextTrigger: ChatInputSurfaceTrigger | null): void => {
+    const nextSignature = JSON.stringify(nextTrigger ? [nextTrigger.key, nextTrigger.marker, nextTrigger.query, nextTrigger.start, nextTrigger.end] : null);
+    if (inputSurfaceTriggerSignatureRef.current === nextSignature) return;
+    inputSurfaceTriggerSignatureRef.current = nextSignature;
+    setInputSurfaceTriggerState(nextTrigger);
+  }, []);
+  const panelApps = usePanelApps({ enabled: inputSurfaceTrigger?.key === PANEL_APP_REFERENCE_TRIGGER_SPEC.key });
+
+  const inputSurfacePlugins = useMemo(
+    () => [
+      createSlashCommandInputSurfacePlugin({
+        commands,
+        itemTexts: itemTexts.slashTexts,
+        menuTexts: {
+          loadingLabel: t('chatSlashLoading', language),
+          sectionLabel: t('chatSlashSection', language),
+          emptyLabel: t('chatSlashNoResult', language),
+          hintLabel: t('chatSlashHint', language),
+          itemHintLabel: t('chatSlashSkillHint', language)
+        },
+        labels: {
+          commandHintLabel: t('chatSlashCommandHint', language),
+          commandSectionLabel: t('chatSlashSectionCommands', language),
+          commandSubtitle: t('chatSlashTypeCommand', language),
+          skillHintLabel: t('chatSlashSkillHint', language),
+          skillSectionLabel: t('chatSlashSectionSkills', language)
+        },
+        onSelectSkill
+      }),
+      createPanelAppReferenceInputSurfacePlugin({
+        itemTexts: {
+          appIdLabel: t('chatPanelAppReferenceAppId', language),
+          fileLabel: t('chatPanelAppReferenceFile', language),
+          noDescriptionLabel: t('chatPanelAppReferenceNoDescription', language),
+          subtitle: t('chatPanelAppReferenceType', language)
+        },
+        menuTexts: {
+          loadingLabel: t('chatPanelAppReferenceLoading', language),
+          sectionLabel: t('chatPanelAppReferenceSection', language),
+          emptyLabel: t('chatPanelAppReferenceNoResult', language),
+          hintLabel: t('chatPanelAppReferenceHint', language),
+          itemHintLabel: t('chatPanelAppReferenceItemHint', language)
+        }
+      })
+    ],
+    [
+      commands,
+      itemTexts.slashTexts,
+      language,
+      onSelectSkill
+    ]
+  );
+  const inputSurfaceState = useMemo(
+    () => resolveChatInputSurfaceState({
+      data: {
+        isPanelAppsLoading: panelApps.isLoading || panelApps.isFetching,
+        isSkillsLoading,
+        panelApps: panelApps.data?.entries ?? [],
+        recentSkillValues,
+        skillRecords
+      },
+      plugins: inputSurfacePlugins,
+      trigger: inputSurfaceTrigger
+    }),
+    [
+      inputSurfacePlugins,
+      inputSurfaceTrigger,
+      panelApps.data?.entries,
+      panelApps.isFetching,
+      panelApps.isLoading,
+      isSkillsLoading,
+      recentSkillValues,
+      skillRecords
+    ]
+  );
+
+  return { inputSurfaceState, setInputSurfaceTrigger };
+}