@nextclaw/ui 0.12.4 → 0.12.6

package/src/components/chat/managers/chat-session-list.manager.ts

@@ -4,6 +4,7 @@ import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
 import type { SetStateAction } from 'react';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
 import { normalizeSessionProjectRootValue } from '@/lib/session-project/session-project.utils';
+import { createNcpSessionId } from '@/components/chat/ncp/ncp-session-adapter';
 
 export class ChatSessionListManager {
   constructor(
@@ -45,8 +46,22 @@ export class ChatSessionListManager {
     useChatSessionListStore.getState().setSnapshot({ listMode: value });
   };
 
-  createSession = (sessionType?: string, projectRoot?: string | null) => {
+  markSessionRead = (sessionKey: string | null | undefined, updatedAt: string | null | undefined) => {
+    if (!sessionKey) {
+      return;
+    }
+    useChatSessionListStore.getState().markSessionRead(sessionKey, updatedAt);
+  };
+
+  hydrateReadWatermarks = (
+    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+  ) => {
+    useChatSessionListStore.getState().hydrateReadWatermarks(entries);
+  };
+
+  createSession = (sessionType?: string, projectRoot?: string | null): string => {
     const { snapshot } = useChatInputStore.getState();
+    const { snapshot: sessionListSnapshot } = useChatSessionListStore.getState();
     const { defaultSessionType: configuredDefaultSessionType } = snapshot;
     const defaultSessionType = configuredDefaultSessionType || 'native';
     const nextSessionType =
@@ -54,14 +69,26 @@ export class ChatSessionListManager {
         ? sessionType.trim()
         : defaultSessionType;
     const normalizedProjectRoot = normalizeSessionProjectRootValue(projectRoot);
+    const nextSessionKey = sessionListSnapshot.draftSessionKey;
     this.streamActionsManager.resetStreamState();
-    useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
+    useChatSessionListStore.getState().setSnapshot({
+      draftSessionKey: createNcpSessionId()
+    });
     useChatInputStore.getState().setSnapshot({
       pendingSessionType: nextSessionType,
       pendingProjectRoot: normalizedProjectRoot,
-      pendingProjectRootSessionKey: null
+      pendingProjectRootSessionKey: normalizedProjectRoot ? nextSessionKey : null
     });
-    this.uiManager.goToChatRoot();
+    this.uiManager.goToSession(nextSessionKey);
+    return nextSessionKey;
+  };
+
+  ensureDraftSession = (sessionType?: string): string => {
+    const { snapshot } = useChatSessionListStore.getState();
+    if (snapshot.selectedSessionKey) {
+      return snapshot.selectedSessionKey;
+    }
+    return this.createSession(sessionType);
   };
 
   selectSession = (sessionKey: string) => {

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -2,7 +2,6 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from "react";
 import {
   buildNcpRequestEnvelope,
@@ -22,7 +21,6 @@ import {
 } from "@/components/chat/chat-session-route";
 import { useNcpChatPageData } from "@/components/chat/ncp/ncp-chat-page-data";
 import { NcpChatPresenter } from "@/components/chat/ncp/ncp-chat.presenter";
-import { createNcpSessionId } from "@/components/chat/ncp/ncp-session-adapter";
 import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
 import { useNcpChatDerivedState, useNcpChatSnapshotSync } from "@/components/chat/ncp/page/ncp-chat-derived-state";
 import { ChatPresenterProvider } from "@/components/chat/presenter/chat-presenter-context";
@@ -79,26 +77,39 @@ export function buildNcpSendMetadata(payload: {
   return metadata;
 }
 
-export function shouldRefreshDraftSessionId(params: {
-  previousSelectedSessionKey: string | null | undefined;
-  nextSelectedSessionKey: string | null;
+export function shouldClearPendingProjectRootOverride(params: {
+  pendingProjectRoot: string | null;
+  pendingProjectRootSessionKey: string | null;
+  sessionKey: string | null | undefined;
+  selectedSessionProjectRoot: string | null | undefined;
 }): boolean {
+  const {
+    pendingProjectRoot,
+    pendingProjectRootSessionKey,
+    sessionKey,
+    selectedSessionProjectRoot,
+  } = params;
   return (
-    params.nextSelectedSessionKey === null &&
-    params.previousSelectedSessionKey !== undefined &&
-    params.previousSelectedSessionKey !== null
+    pendingProjectRoot !== null &&
+    pendingProjectRootSessionKey !== null &&
+    sessionKey === pendingProjectRootSessionKey &&
+    (selectedSessionProjectRoot ?? null) === pendingProjectRoot
   );
 }
 
 export function NcpChatPage({ view }: ChatPageProps) {
-  const [presenter] = useState(() => new NcpChatPresenter());
-  const [draftSessionId, setDraftSessionId] = useState(() =>
-    createNcpSessionId(),
-  );
+  const presenterRef = useRef<NcpChatPresenter | null>(null);
+  if (!presenterRef.current) {
+    presenterRef.current = new NcpChatPresenter();
+  }
+  const presenter = presenterRef.current;
   const query = useChatSessionListStore((state) => state.snapshot.query);
   const selectedSessionKey = useChatSessionListStore(
     (state) => state.snapshot.selectedSessionKey,
   );
+  const draftSessionKey = useChatSessionListStore(
+    (state) => state.snapshot.draftSessionKey,
+  );
   const selectedAgentId = useChatSessionListStore(
     (state) => state.snapshot.selectedAgentId,
   );
@@ -123,21 +134,14 @@ export function NcpChatPage({ view }: ChatPageProps) {
   }>();
   const threadRef = useRef<HTMLDivElement | null>(null);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
-  const previousSelectedSessionKeyRef = useRef<string | null | undefined>(
-    undefined,
-  );
   const routeSessionKey = useMemo(
     () => parseSessionKeyFromRoute(routeSessionIdParam),
     [routeSessionIdParam],
   );
-  const sessionKey = selectedSessionKey ?? draftSessionId;
-  const hasDraftProjectRootOverride =
-    pendingProjectRoot !== null &&
-    pendingProjectRootSessionKey === null &&
-    selectedSessionKey === null;
+  const sessionKey = routeSessionKey ?? selectedSessionKey ?? draftSessionKey;
   const hasSessionProjectRootOverride =
     pendingProjectRoot !== null &&
-    (pendingProjectRootSessionKey === sessionKey || hasDraftProjectRootOverride);
+    pendingProjectRootSessionKey === sessionKey;
   const sessionProjectRootOverride = hasSessionProjectRootOverride
     ? pendingProjectRoot
     : undefined;
@@ -168,25 +172,6 @@ export function NcpChatPage({ view }: ChatPageProps) {
 
   const agent = useNcpSessionConversation(sessionKey);
 
-  useEffect(() => {
-    presenter.setDraftSessionId(draftSessionId);
-  }, [draftSessionId, presenter]);
-
-  useEffect(() => {
-    if (
-      shouldRefreshDraftSessionId({
-        previousSelectedSessionKey:
-          previousSelectedSessionKeyRef.current,
-        nextSelectedSessionKey: selectedSessionKey,
-      })
-    ) {
-      const nextDraftSessionId = createNcpSessionId();
-      setDraftSessionId(nextDraftSessionId);
-      presenter.setDraftSessionId(nextDraftSessionId);
-    }
-    previousSelectedSessionKeyRef.current = selectedSessionKey;
-  }, [presenter, selectedSessionKey]);
-
   const effectiveSessionProjectRoot = hasSessionProjectRootOverride
     ? pendingProjectRoot
     : (selectedSession?.projectRoot ?? null);
@@ -215,10 +200,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
           thinkingLevel: payload.thinkingLevel,
           sessionType: payload.sessionType,
           projectRoot:
-            payload.sessionKey === pendingProjectRootSessionKey ||
-            (pendingProjectRoot !== null &&
-              pendingProjectRootSessionKey === null &&
-              selectedSessionKey === null)
+            payload.sessionKey === pendingProjectRootSessionKey
               ? pendingProjectRoot
               : (selectedSession?.projectRoot ?? null),
           requestedSkills: payload.requestedSkills,
@@ -279,15 +261,14 @@ export function NcpChatPage({ view }: ChatPageProps) {
   ]);
 
   useEffect(() => {
-    const matchesPendingProjectSession =
-      pendingProjectRootSessionKey === null
-        ? selectedSessionKey !== null
-        : pendingProjectRootSessionKey === selectedSession?.key;
     if (
       !selectedSession ||
-      pendingProjectRoot === null ||
-      !matchesPendingProjectSession ||
-      (selectedSession.projectRoot ?? null) !== pendingProjectRoot
+      !shouldClearPendingProjectRootOverride({
+        pendingProjectRoot,
+        pendingProjectRootSessionKey,
+        sessionKey: selectedSession.key,
+        selectedSessionProjectRoot: selectedSession.projectRoot ?? null,
+      })
     ) {
       return;
     }

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

@@ -55,7 +55,7 @@ describe('ncp-app-client-fetch', () => {
         'content-type': 'application/json'
       },
       body: JSON.stringify({ sessionId: 's1' })
-    })).rejects.toThrow('Failed to fetch');
+    })).rejects.toThrow('NCP fetch failed for POST http://127.0.0.1:55667/api/ncp/agent/abort: Error: Failed to fetch');
   });
 
   it('preserves native SSE request headers', async () => {

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

@@ -1,9 +1,49 @@
 type FetchLike = typeof fetch;
 
+function formatFetchTarget(input: RequestInfo | URL): string {
+  if (typeof input === 'string') {
+    return input;
+  }
+  if (input instanceof URL) {
+    return input.toString();
+  }
+  return input.url;
+}
+
+function formatUnknownFetchError(error: unknown): string {
+  if (error instanceof Error) {
+    const name = error.name?.trim();
+    const message = error.message?.trim();
+    if (name && message) {
+      return `${name}: ${message}`;
+    }
+    return message || name || 'Unknown Error';
+  }
+  return String(error ?? 'Unknown error');
+}
+
+function createErrorWithCause(message: string, cause: unknown): Error {
+  const error = new Error(message) as Error & { cause?: unknown };
+  if (cause !== undefined) {
+    error.cause = cause;
+  }
+  return error;
+}
+
 export function createNcpAppClientFetch(): FetchLike {
-  return (input, init) =>
-    fetch(input, {
-      credentials: 'include',
-      ...init
-    });
+  return async (input, init) => {
+    try {
+      return await fetch(input, {
+        credentials: 'include',
+        ...init
+      });
+    } catch (error) {
+      const method = (init?.method || 'GET').toUpperCase();
+      const target = formatFetchTarget(input);
+      throw createErrorWithCause(
+        `NCP fetch failed for ${method} ${target}: ${formatUnknownFetchError(error)}`,
+        error
+      );
+    }
+  };
 }

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

@@ -18,6 +18,7 @@ import { useChatSessionListStore } from '@/components/chat/stores/chat-session-l
 import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
 import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
+import type { ChatSessionListManager } from '@/components/chat/managers/chat-session-list.manager';
 import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
 import { chatRecentModelsManager } from '@/components/chat/chat-recent-models.manager';
 import { chatRecentSkillsManager } from '@/components/chat/chat-recent-skills.manager';
@@ -40,7 +41,7 @@ export class NcpChatInputManager {
   constructor(
     private uiManager: ChatUiManager,
     private streamActionsManager: ChatStreamActionsManager,
-    private getDraftSessionId: () => string
+    private sessionListManager: ChatSessionListManager
   ) {}
 
   private hasSnapshotChanges = (patch: Partial<ChatInputSnapshot>): boolean => {
@@ -179,10 +180,7 @@ export class NcpChatInputManager {
       return;
     }
     const { selectedSkills: requestedSkills, composerNodes } = inputSnapshot;
-    const sessionKey = sessionSnapshot.selectedSessionKey ?? this.getDraftSessionId();
-    if (!sessionSnapshot.selectedSessionKey) {
-      this.uiManager.goToSession(sessionKey, { replace: true });
-    }
+    const sessionKey = sessionSnapshot.selectedSessionKey ?? this.sessionListManager.ensureDraftSession(inputSnapshot.selectedSessionType);
     this.setComposerNodes(createInitialChatComposerNodes());
     await this.streamActionsManager.sendMessage({
       message,

package/src/components/chat/ncp/ncp-chat-page-data.ts

@@ -116,7 +116,6 @@ export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
   );
   const sessionTypeState = useChatSessionTypeState({
     selectedSession,
-    selectedSessionKey: params.sessionKey,
     pendingSessionType: params.pendingSessionType,
     setPendingSessionType: params.setPendingSessionType,
     sessionTypesData: sessionTypesQuery.data

package/src/components/chat/ncp/ncp-chat.presenter.ts

@@ -11,21 +11,11 @@ export class NcpChatPresenter {
   chatInputManager = new NcpChatInputManager(
     this.chatUiManager,
     this.chatStreamActionsManager,
-    () => this.getDraftSessionId()
+    this.chatSessionListManager
   );
   chatThreadManager = new NcpChatThreadManager(
     this.chatUiManager,
     this.chatSessionListManager,
     this.chatStreamActionsManager
   );
-
-  private draftSessionId = '';
-
-  setDraftSessionId = (sessionId: string) => {
-    this.draftSessionId = sessionId;
-  };
-
-  private getDraftSessionId(): string {
-    return this.draftSessionId;
-  }
 }

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

@@ -1,15 +1,23 @@
-import { useMemo } from 'react';
-import type { SessionEntryView } from '@/api/types';
-import { sessionDisplayName } from '@/components/chat/chat-session-display';
-import { adaptNcpSessionSummaries } from '@/components/chat/ncp/ncp-session-adapter';
-import type { ChatChildSessionTab } from '@/components/chat/stores/chat-thread.store';
-import { useNcpSessions } from '@/hooks/useConfig';
+import { useMemo } from "react";
+import type { SessionEntryView } from "@/api/types";
+import { sessionDisplayName } from "@/components/chat/chat-session-display";
+import { adaptNcpSessionSummaries } from "@/components/chat/ncp/ncp-session-adapter";
+import { resolveSessionTypeLabel } from "@/components/chat/useChatSessionTypeState";
+import type { ChatChildSessionTab } from "@/components/chat/stores/chat-thread.store";
+import { useNcpSessions } from "@/hooks/useConfig";
+import type { SessionRunStatus } from "@/lib/session-run-status";
 
 export type ResolvedChildSessionTab = {
   sessionKey: string;
   parentSessionKey: string | null;
   title: string;
   agentId: string | null;
+  updatedAt: string | null;
+  runStatus?: SessionRunStatus;
+  sessionTypeLabel: string | null;
+  preferredModel: string | null;
+  projectName: string | null;
+  projectRoot: string | null;
 };
 
 function resolveChildSessionTitle(
@@ -29,24 +37,42 @@ export function useNcpChildSessionTabsView(
   tabs: readonly ChatChildSessionTab[],
 ): ResolvedChildSessionTab[] {
   const sessionsQuery = useNcpSessions({ limit: 200 });
+  const summaries = useMemo(
+    () => sessionsQuery.data?.sessions ?? [],
+    [sessionsQuery.data?.sessions],
+  );
 
   const sessionByKey = useMemo(() => {
-    const sessions = adaptNcpSessionSummaries(sessionsQuery.data?.sessions ?? []);
+    const sessions = adaptNcpSessionSummaries(summaries);
     return new Map(sessions.map((session) => [session.key, session]));
-  }, [sessionsQuery.data?.sessions]);
+  }, [summaries]);
+
+  const summaryByKey = useMemo(
+    () => new Map(summaries.map((summary) => [summary.sessionId, summary])),
+    [summaries],
+  );
 
   return useMemo(
     () =>
       tabs.map((tab) => {
         const session = sessionByKey.get(tab.sessionKey) ?? null;
+        const summary = summaryByKey.get(tab.sessionKey) ?? null;
         const agentId = tab.agentId?.trim() || session?.agentId || null;
         return {
           sessionKey: tab.sessionKey,
           parentSessionKey: tab.parentSessionKey,
           title: resolveChildSessionTitle(tab, session),
           agentId,
+          updatedAt: session?.updatedAt ?? null,
+          runStatus: summary?.status === "running" ? "running" : undefined,
+          sessionTypeLabel: session?.sessionType
+            ? resolveSessionTypeLabel(session.sessionType)
+            : null,
+          preferredModel: session?.preferredModel?.trim() || null,
+          projectName: session?.projectName?.trim() || null,
+          projectRoot: session?.projectRoot?.trim() || null,
         };
       }),
-    [sessionByKey, tabs],
+    [sessionByKey, summaryByKey, tabs],
   );
 }

package/src/components/chat/stores/chat-session-list.store.ts

@@ -1,33 +1,127 @@
-import { create } from 'zustand';
+import { create, type StateCreator } from 'zustand';
+import { createNcpSessionId } from '@/components/chat/ncp/ncp-session-adapter';
+import type { SessionRunStatus } from '@/lib/session-run-status';
 
 export type ChatSessionListMode = 'time-first' | 'project-first';
 
 export type ChatSessionListSnapshot = {
   selectedSessionKey: string | null;
+  draftSessionKey: string;
   selectedAgentId: string;
   query: string;
   listMode: ChatSessionListMode;
 };
 
+export function hasUnreadSessionUpdate(
+  updatedAt: string | null | undefined,
+  readUpdatedAt: string | undefined,
+): boolean {
+  const normalizedUpdatedAt = updatedAt?.trim();
+  if (!normalizedUpdatedAt) {
+    return false;
+  }
+  const normalizedReadUpdatedAt = readUpdatedAt?.trim();
+  if (!normalizedReadUpdatedAt) {
+    return true;
+  }
+  return normalizedUpdatedAt.localeCompare(normalizedReadUpdatedAt) > 0;
+}
+
+export function shouldShowUnreadSessionIndicator(params: {
+  active: boolean;
+  updatedAt: string | null | undefined;
+  readUpdatedAt: string | undefined;
+  runStatus?: SessionRunStatus;
+}): boolean {
+  const { active, readUpdatedAt, runStatus, updatedAt } = params;
+  if (active || runStatus === 'running') {
+    return false;
+  }
+  return hasUnreadSessionUpdate(updatedAt, readUpdatedAt);
+}
+
 type ChatSessionListStore = {
   snapshot: ChatSessionListSnapshot;
+  readUpdatedAtBySessionKey: Record<string, string>;
+  hasHydratedReadWatermarks: boolean;
   setSnapshot: (patch: Partial<ChatSessionListSnapshot>) => void;
+  markSessionRead: (sessionKey: string, updatedAt: string | null | undefined) => void;
+  hydrateReadWatermarks: (
+    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+  ) => void;
 };
 
+type ChatSessionListStoreSet = Parameters<StateCreator<ChatSessionListStore>>[0];
+
 const initialSnapshot: ChatSessionListSnapshot = {
   selectedSessionKey: null,
+  draftSessionKey: createNcpSessionId(),
   selectedAgentId: 'main',
   query: '',
   listMode: 'time-first'
 };
 
-export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({
-  snapshot: initialSnapshot,
-  setSnapshot: (patch) =>
+function createSetSnapshotAction(set: ChatSessionListStoreSet) {
+  return (patch: Partial<ChatSessionListSnapshot>) =>
     set((state) => ({
       snapshot: {
         ...state.snapshot,
         ...patch
       }
-    }))
+    }));
+}
+
+function createMarkSessionReadAction(set: ChatSessionListStoreSet) {
+  return (sessionKey: string, updatedAt: string | null | undefined) =>
+    set((state) => {
+      const normalizedSessionKey = sessionKey.trim();
+      const normalizedUpdatedAt = updatedAt?.trim();
+      if (!normalizedSessionKey || !normalizedUpdatedAt) {
+        return state;
+      }
+      if (state.readUpdatedAtBySessionKey[normalizedSessionKey] === normalizedUpdatedAt) {
+        return state;
+      }
+      return {
+        ...state,
+        readUpdatedAtBySessionKey: {
+          ...state.readUpdatedAtBySessionKey,
+          [normalizedSessionKey]: normalizedUpdatedAt
+        }
+      };
+    });
+}
+
+function createHydrateReadWatermarksAction(set: ChatSessionListStoreSet) {
+  return (
+    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+  ) =>
+    set((state) => {
+      if (state.hasHydratedReadWatermarks) {
+        return state;
+      }
+      const nextReadUpdatedAtBySessionKey = { ...state.readUpdatedAtBySessionKey };
+      for (const entry of entries) {
+        const normalizedSessionKey = entry.sessionKey.trim();
+        const normalizedUpdatedAt = entry.updatedAt?.trim();
+        if (!normalizedSessionKey || !normalizedUpdatedAt || nextReadUpdatedAtBySessionKey[normalizedSessionKey]) {
+          continue;
+        }
+        nextReadUpdatedAtBySessionKey[normalizedSessionKey] = normalizedUpdatedAt;
+      }
+      return {
+        ...state,
+        hasHydratedReadWatermarks: true,
+        readUpdatedAtBySessionKey: nextReadUpdatedAtBySessionKey
+      };
+    });
+}
+
+export const useChatSessionListStore = create<ChatSessionListStore>((set) => ({
+  snapshot: initialSnapshot,
+  readUpdatedAtBySessionKey: {},
+  hasHydratedReadWatermarks: false,
+  setSnapshot: createSetSnapshotAction(set),
+  markSessionRead: createMarkSessionReadAction(set),
+  hydrateReadWatermarks: createHydrateReadWatermarksAction(set)
 }));

package/src/components/chat/useChatSessionTypeState.test.tsx

@@ -17,7 +17,6 @@ describe('useChatSessionTypeState', () => {
     const { result } = renderHook(() =>
       useChatSessionTypeState({
         selectedSession: null,
-        selectedSessionKey: null,
         pendingSessionType: 'codex-sdk',
         setPendingSessionType,
         sessionTypesData: {
@@ -40,7 +39,6 @@ describe('useChatSessionTypeState', () => {
     renderHook(() =>
       useChatSessionTypeState({
         selectedSession: null,
-        selectedSessionKey: null,
         pendingSessionType: '',
         setPendingSessionType,
         sessionTypesData: {
@@ -62,7 +60,6 @@ describe('useChatSessionTypeState', () => {
     const { result } = renderHook(() =>
       useChatSessionTypeState({
         selectedSession: null,
-        selectedSessionKey: null,
         pendingSessionType: 'claude',
         setPendingSessionType,
         sessionTypesData: {

package/src/components/chat/useChatSessionTypeState.ts

@@ -22,7 +22,6 @@ export type ChatSessionTypeOption = {
 
 type UseChatSessionTypeStateParams = {
   selectedSession: SessionEntryView | null;
-  selectedSessionKey: string | null;
   pendingSessionType: string;
   setPendingSessionType: Dispatch<SetStateAction<string>>;
   sessionTypesData?: {
@@ -114,7 +113,6 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
 } {
   const {
     selectedSession,
-    selectedSessionKey,
     pendingSessionType,
     setPendingSessionType,
     sessionTypesData
@@ -164,7 +162,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
   );
 
   useEffect(() => {
-    if (selectedSessionKey) {
+    if (selectedSession) {
       return;
     }
     const rawPending = typeof pendingSessionType === 'string' ? pendingSessionType.trim() : '';
@@ -181,9 +179,9 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
       return;
     }
     setPendingSessionType(defaultSessionType);
-  }, [defaultSessionType, pendingSessionType, selectedSessionKey, setPendingSessionType]);
+  }, [defaultSessionType, pendingSessionType, selectedSession, setPendingSessionType]);
 
-  const canEditSessionType = !selectedSessionKey || Boolean(selectedSession?.sessionTypeMutable);
+  const canEditSessionType = !selectedSession || Boolean(selectedSession.sessionTypeMutable);
   const availableSessionTypeSet = useMemo(
     () => new Set(runtimeSessionTypeOptions.map((option) => option.value)),
     [runtimeSessionTypeOptions]