@nextclaw/ui 0.13.12 → 0.14.0

package/src/features/chat/{components/conversation → features/session/components}/session-header/chat-session-header-actions.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { AlarmClock, FolderOpen, GitBranch, MoreVertical, Trash2 } from 'lucide-react';
-import { Button } from '@/shared/components/ui/button';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
-import { useChatSessionProject } from '@/features/chat/hooks/use-chat-session-project';
+import { useChatSessionProject } from '@/features/chat/features/session/hooks/use-chat-session-project';
 import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
 import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { t } from '@/shared/lib/i18n';
@@ -58,44 +58,32 @@ export function ChatSessionHeaderActions({
   return (
     <div className={SESSION_HEADER_ACTION_GROUP_CLASS}>
       {childSessionCount > 0 && onOpenChildSessions ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
+        <IconActionButton
+          icon={<GitBranch className="h-4 w-4" />}
+          label={t('chatSessionOpenChildSessions')}
           className={SESSION_HEADER_ACTION_BUTTON_CLASS}
-          aria-label={t('chatSessionOpenChildSessions')}
-          title={t('chatSessionOpenChildSessions')}
           onClick={onOpenChildSessions}
           disabled={isBusy}
-        >
-          <GitBranch className="h-4 w-4" />
-        </Button>
+        />
       ) : null}
       {sessionCronJobCount > 0 && onOpenSessionCronJobs ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
+        <IconActionButton
+          icon={<AlarmClock className="h-4 w-4" />}
+          label={t('chatSessionOpenCronJobs')}
           className={SESSION_HEADER_ACTION_BUTTON_CLASS}
-          aria-label={t('chatSessionOpenCronJobs')}
-          title={t('chatSessionOpenCronJobs')}
           onClick={onOpenSessionCronJobs}
           disabled={isBusy}
-        >
-          <AlarmClock className="h-4 w-4" />
-        </Button>
+        />
       ) : null}
       <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
         <PopoverTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
+          <IconActionButton
+            icon={<MoreVertical className="h-4 w-4" />}
+            label={t('chatSessionMoreActions')}
+            tooltip={false}
             className={SESSION_HEADER_ACTION_BUTTON_CLASS}
-            aria-label={t('chatSessionMoreActions')}
             disabled={isBusy}
-          >
-            <MoreVertical className="h-4 w-4" />
-          </Button>
+          />
         </PopoverTrigger>
         <PopoverContent align="end" className="w-56 p-2">
           <div className="space-y-1">

package/src/features/chat/{components/conversation → features/session/components}/session-header/chat-session-project-badge.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ChevronDown, FolderOpen, FolderX, Pencil } from 'lucide-react';
-import { useChatSessionProject } from '@/features/chat/hooks/use-chat-session-project';
+import { useChatSessionProject } from '@/features/chat/features/session/hooks/use-chat-session-project';
 import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
 import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';

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

@@ -2,7 +2,7 @@ import { act, renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { toast } from 'sonner';
 import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
-import { useChatSessionProject } from '@/features/chat/hooks/use-chat-session-project';
+import { useChatSessionProject } from '@/features/chat/features/session/hooks/use-chat-session-project';
 
 const mocks = vi.hoisted(() => ({
   updateSession: vi.fn()
@@ -14,7 +14,7 @@ vi.mock('sonner', () => ({
   }
 }));
 
-vi.mock('@/features/chat/hooks/use-chat-session-update', () => ({
+vi.mock('@/features/chat/features/session/hooks/use-chat-session-update', () => ({
   useChatSessionUpdate: () => mocks.updateSession
 }));
 

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

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { toast } from 'sonner';
-import { useChatSessionUpdate } from '@/features/chat/hooks/use-chat-session-update';
+import { useChatSessionUpdate } from '@/features/chat/features/session/hooks/use-chat-session-update';
 import type * as SharedApiModule from '@/shared/lib/api';
 
 const mocks = vi.hoisted(() => ({

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

@@ -1,7 +1,7 @@
 import { toast } from 'sonner';
 import { t } from '@/shared/lib/i18n';
 import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
-import { useChatSessionUpdate } from '@/features/chat/hooks/use-chat-session-update';
+import { useChatSessionUpdate } from '@/features/chat/features/session/hooks/use-chat-session-update';
 
 type UpdateChatSessionProjectParams = {
   sessionKey: string;

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

@@ -11,6 +11,11 @@ type UpdateChatSessionParams = {
   successMessage?: string;
 };
 
+type UpdateChatSessionLabelParams = {
+  sessionKey: string;
+  label: string | null;
+};
+
 export function useChatSessionUpdate() {
   const queryClient = useQueryClient();
 
@@ -27,3 +32,15 @@ export function useChatSessionUpdate() {
     }
   };
 }
+
+export function useChatSessionLabel() {
+  const updateSession = useChatSessionUpdate();
+
+  return async (params: UpdateChatSessionLabelParams): Promise<void> => {
+    await updateSession({
+      sessionKey: params.sessionKey,
+      patch: { label: params.label },
+      successMessage: t('configSavedApplied')
+    });
+  };
+}

package/src/features/chat/{hooks → features/session/hooks}/use-chat-sidebar-session-label-editor.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import type { SessionEntryView } from '@/shared/lib/api';
-import { useChatSessionLabel } from '@/features/chat/hooks/use-chat-session-label';
+import { useChatSessionLabel } from '@/features/chat/features/session/hooks/use-chat-session-update';
 
 export function useChatSidebarSessionLabelEditor() {
   const updateSessionLabel = useChatSessionLabel();

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

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import type { ChatContextWindowIndicator } from '@nextclaw/agent-chat-ui';
 import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
 import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
-import { buildChatContextWindowIndicator } from '@/features/chat/utils/chat-context-window-indicator.utils';
+import { buildChatContextWindowIndicator } from '@/features/chat/features/session/utils/chat-context-window-indicator.utils';
 
 export function useSelectedSessionContextWindowIndicator(): ChatContextWindowIndicator | null {
   const selectedSessionKey = useChatSessionListStore((state) => state.snapshot.selectedSessionKey);

package/src/features/chat/{utils → features/session/utils/__tests__}/chat-session-display.utils.test.ts

@@ -5,7 +5,7 @@ import {
   sessionActivityPreviewText,
   sessionDisplayName,
   sessionMatchesQuery
-} from './chat-session-display.utils';
+} from '../chat-session-display.utils';
 
 function createSession(overrides: Partial<SessionEntryView> = {}): SessionEntryView {
   return {

package/src/features/chat/{utils → features/session/utils/__tests__}/chat-session-route.utils.test.ts

@@ -3,7 +3,7 @@ import {
   CHAT_DRAFT_SESSION_PATH,
   buildSessionPath,
   parseSessionKeyFromRoute,
-} from '@/features/chat/utils/chat-session-route.utils';
+} from '@/features/chat/features/session/utils/chat-session-route.utils';
 
 describe('chat session route utils', () => {
   it('keeps the draft route separate from real session keys', () => {

package/src/features/chat/{utils → features/session/utils/__tests__}/ncp-session-adapter.utils.cancelled-tool.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
-import { adaptChatMessage } from '@/features/chat/utils/chat-message.utils';
-import { adaptNcpMessageToUiMessage } from './ncp-session-adapter.utils';
+import { adaptChatMessage } from '@/features/chat/features/message/utils/chat-message.utils';
+import { adaptNcpMessageToUiMessage } from '../ncp-session-adapter.utils';
 
 const texts = {
   roleLabels: {

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

@@ -2,8 +2,8 @@ import {
   adaptNcpMessageToUiMessage,
   adaptNcpSessionSummary,
   readNcpSessionPreferredThinking
-} from '@/features/chat/utils/ncp-session-adapter.utils';
-import { adaptChatMessage } from '@/features/chat/utils/chat-message.utils';
+} from '@/features/chat/features/session/utils/ncp-session-adapter.utils';
+import { adaptChatMessage } from '@/features/chat/features/message/utils/chat-message.utils';
 import type { NcpSessionSummaryView } from '@/shared/lib/api';
 
 function createSummary(partial: Partial<NcpSessionSummaryView> = {}): NcpSessionSummaryView {

package/src/features/chat/{utils → features/session/utils/__tests__}/session-context.utils.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { resolveSessionContextView } from "./session-context.utils";
+import { resolveSessionContextView } from "../session-context.utils";
 
 vi.mock("@/shared/lib/logos", () => ({
   getChannelLogo: vi.fn(() => null),

package/src/features/chat/features/session/utils/chat-run-metadata.utils.ts

@@ -0,0 +1,60 @@
+import { buildInlineSkillTokensFromComposer, CHAT_UI_INLINE_TOKENS_METADATA_KEY } from "@/features/chat/features/input/utils/chat-inline-token.utils";
+import { normalizeRequestedSkills } from "@/features/chat/features/runtime/utils/chat-runtime.utils";
+import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
+
+function createMetadataFields(
+  value: string | undefined,
+  fields: readonly string[],
+): Record<string, string> {
+  return value ? Object.fromEntries(fields.map((field) => [field, value])) : {};
+}
+
+export function buildChatRunMetadata(payload: {
+  agentId?: string;
+  model?: string;
+  thinkingLevel?: string;
+  sessionType?: string;
+  projectRoot?: string | null;
+  requestedSkills?: string[];
+  composerNodes?: Parameters<typeof buildInlineSkillTokensFromComposer>[0];
+}): Record<string, unknown> {
+  const projectRoot = normalizeSessionProjectRootValue(payload.projectRoot);
+  const metadata: Record<string, unknown> = {
+    ...createMetadataFields(payload.model?.trim(), ["model", "preferred_model"]),
+    ...createMetadataFields(payload.thinkingLevel?.trim(), ["thinkingEffort", "thinking", "preferred_thinking"]),
+    ...createMetadataFields(payload.sessionType?.trim(), ["agentRuntimeId", "session_type", "runtime"]),
+    ...createMetadataFields(payload.agentId?.trim(), ["agentId", "agent_id"]),
+    ...createMetadataFields(projectRoot ?? undefined, ["projectRoot", "project_root"]),
+  };
+  const requestedSkills = normalizeRequestedSkills(payload.requestedSkills);
+  if (requestedSkills.length > 0) {
+    metadata.requested_skill_refs = requestedSkills;
+  }
+  const inlineSkillTokens = payload.composerNodes
+    ? buildInlineSkillTokensFromComposer(payload.composerNodes)
+    : [];
+  if (inlineSkillTokens.length > 0) {
+    metadata[CHAT_UI_INLINE_TOKENS_METADATA_KEY] = inlineSkillTokens;
+  }
+  return metadata;
+}
+
+export function shouldClearPendingProjectRootOverride(params: {
+  pendingProjectRoot: string | null;
+  pendingProjectRootSessionKey: string | null;
+  sessionKey: string | null | undefined;
+  selectedSessionProjectRoot: string | null | undefined;
+}): boolean {
+  const {
+    pendingProjectRoot,
+    pendingProjectRootSessionKey,
+    selectedSessionProjectRoot,
+    sessionKey,
+  } = params;
+  return (
+    pendingProjectRoot !== null &&
+    pendingProjectRootSessionKey !== null &&
+    sessionKey === pendingProjectRootSessionKey &&
+    (selectedSessionProjectRoot ?? null) === pendingProjectRoot
+  );
+}

package/src/features/chat/{utils → features/session/utils}/chat-session-preference-governance.utils.ts

@@ -1,5 +1,3 @@
-import { useEffect, useRef } from 'react';
-import type { Dispatch, SetStateAction } from 'react';
 import type { SessionEntryView, ThinkingLevel } from '@/shared/lib/api';
 import type { ChatModelOption } from '@/features/chat/types/chat-input.types';
 
@@ -159,129 +157,3 @@ export function resolveRecentSessionPreferredValue<T>(params: {
   }
   return bestValue;
 }
-
-function buildSyncKey(parts: unknown[]): string {
-  return parts.map((part) => (part == null ? '' : String(part))).join('\u0002');
-}
-
-type UseSyncSessionPreferenceParams<T> = {
-  isPreferenceAvailable: boolean;
-  emptyValue: T;
-  syncKey: string;
-  selectedSessionKey?: string | null;
-  selectedSessionExists?: boolean;
-  setValue: Dispatch<SetStateAction<T>>;
-  resolveValue: (params: { currentValue: T; sessionChanged: boolean; preserveCurrentValueOnSessionChange: boolean }) => T;
-};
-
-function useSyncSessionPreference<T>(params: UseSyncSessionPreferenceParams<T>) {
-  const {
-    isPreferenceAvailable,
-    emptyValue,
-    syncKey,
-    selectedSessionKey,
-    selectedSessionExists = false,
-    setValue,
-    resolveValue
-  } = params;
-  const previousSessionKeyRef = useRef<string | null | undefined>(undefined);
-  const resolveValueRef = useRef(resolveValue);
-  const lastSyncedValueRef = useRef<T>(emptyValue);
-
-  useEffect(() => {
-    resolveValueRef.current = resolveValue;
-  }, [resolveValue]);
-
-  useEffect(() => {
-    const sessionChanged = previousSessionKeyRef.current !== selectedSessionKey;
-    if (!isPreferenceAvailable) {
-      setValue(emptyValue);
-      lastSyncedValueRef.current = emptyValue;
-      previousSessionKeyRef.current = selectedSessionKey;
-      return;
-    }
-    setValue((prev) => {
-      const next = resolveValueRef.current({
-        currentValue:
-          !sessionChanged && Object.is(prev, lastSyncedValueRef.current)
-            ? emptyValue
-            : prev,
-        sessionChanged,
-        preserveCurrentValueOnSessionChange: sessionChanged && Boolean(selectedSessionKey) && !selectedSessionExists
-      });
-      lastSyncedValueRef.current = next;
-      return next;
-    });
-    previousSessionKeyRef.current = selectedSessionKey;
-  }, [emptyValue, isPreferenceAvailable, selectedSessionExists, selectedSessionKey, setValue, syncKey]);
-}
-
-export function useSyncSelectedModel(params: {
-  modelOptions: ChatModelOption[];
-  selectedSessionKey?: string | null;
-  selectedSessionExists?: boolean;
-  selectedSessionPreferredModel?: string;
-  fallbackPreferredModel?: string;
-  defaultModel?: string;
-  setSelectedModel: Dispatch<SetStateAction<string>>;
-}) {
-  const { modelOptions, selectedSessionKey, selectedSessionExists = false, selectedSessionPreferredModel, fallbackPreferredModel, defaultModel, setSelectedModel } = params;
-  useSyncSessionPreference<string>({
-    isPreferenceAvailable: modelOptions.length > 0,
-    emptyValue: '',
-    syncKey: buildSyncKey([
-      modelOptions.map((option) => option.value).join('\u0001'),
-      selectedSessionPreferredModel,
-      fallbackPreferredModel,
-      defaultModel
-    ]),
-    selectedSessionKey,
-    selectedSessionExists,
-    setValue: setSelectedModel,
-    resolveValue: ({ currentValue, sessionChanged, preserveCurrentValueOnSessionChange }) =>
-      resolveSelectedModelValue({
-        currentSelectedModel: currentValue,
-        modelOptions,
-        selectedSessionPreferredModel,
-        fallbackPreferredModel,
-        defaultModel,
-        preferSessionPreferredModel: sessionChanged,
-        preserveCurrentSelectedModelOnSessionChange: preserveCurrentValueOnSessionChange
-      })
-  });
-}
-
-export function useSyncSelectedThinking(params: {
-  supportedThinkingLevels: readonly ThinkingLevel[];
-  selectedSessionKey?: string | null;
-  selectedSessionExists?: boolean;
-  selectedSessionPreferredThinking?: ThinkingLevel | null;
-  fallbackPreferredThinking?: ThinkingLevel | null;
-  defaultThinkingLevel?: ThinkingLevel | null;
-  setSelectedThinkingLevel: Dispatch<SetStateAction<ThinkingLevel | null>>;
-}) {
-  const { supportedThinkingLevels, selectedSessionKey, selectedSessionExists = false, selectedSessionPreferredThinking, fallbackPreferredThinking, defaultThinkingLevel, setSelectedThinkingLevel } = params;
-  useSyncSessionPreference<ThinkingLevel | null>({
-    isPreferenceAvailable: supportedThinkingLevels.length > 0,
-    emptyValue: null,
-    syncKey: buildSyncKey([
-      supportedThinkingLevels.join('\u0001'),
-      selectedSessionPreferredThinking,
-      fallbackPreferredThinking,
-      defaultThinkingLevel
-    ]),
-    selectedSessionKey,
-    selectedSessionExists,
-    setValue: setSelectedThinkingLevel,
-    resolveValue: ({ currentValue, sessionChanged, preserveCurrentValueOnSessionChange }) =>
-      resolveSelectedThinkingLevelValue({
-        currentSelectedThinkingLevel: currentValue,
-        supportedThinkingLevels,
-        selectedSessionPreferredThinking,
-        fallbackPreferredThinking,
-        defaultThinkingLevel,
-        preferSessionPreferredThinking: sessionChanged,
-        preserveCurrentSelectedThinkingOnSessionChange: preserveCurrentValueOnSessionChange
-      })
-  });
-}

package/src/features/chat/features/session/utils/chat-sidebar-session-groups.utils.ts

@@ -0,0 +1,144 @@
+import type { SessionEntryView } from "@/shared/lib/api";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import { getSessionProjectName } from "@/shared/lib/session-project";
+import { t } from "@/shared/lib/i18n";
+
+export type ChatSidebarDateGroup = {
+  label: string;
+  items: NcpSessionListItemView[];
+};
+
+export type ChatSidebarProjectGroup = {
+  projectRoot: string;
+  projectName: string;
+  items: NcpSessionListItemView[];
+  latestUpdatedAt: number;
+};
+
+export function getSessionActivityAtTimestamp(
+  item: NcpSessionListItemView,
+): number {
+  return new Date(
+    item.session.lastMessageAt ?? item.session.createdAt,
+  ).getTime();
+}
+
+export function sortSessionItemsByActivityAtDesc(
+  items: NcpSessionListItemView[],
+): NcpSessionListItemView[] {
+  return [...items].sort(
+    (left, right) =>
+      getSessionActivityAtTimestamp(right) -
+      getSessionActivityAtTimestamp(left),
+  );
+}
+
+export function groupSessionsByDate(
+  items: NcpSessionListItemView[],
+): ChatSidebarDateGroup[] {
+  const now = new Date();
+  const todayStart = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  ).getTime();
+  const yesterdayStart = todayStart - 86_400_000;
+  const sevenDaysStart = todayStart - 7 * 86_400_000;
+
+  const today: NcpSessionListItemView[] = [];
+  const yesterday: NcpSessionListItemView[] = [];
+  const previous7: NcpSessionListItemView[] = [];
+  const older: NcpSessionListItemView[] = [];
+
+  for (const item of items) {
+    const ts = getSessionActivityAtTimestamp(item);
+    if (ts >= todayStart) {
+      today.push(item);
+    } else if (ts >= yesterdayStart) {
+      yesterday.push(item);
+    } else if (ts >= sevenDaysStart) {
+      previous7.push(item);
+    } else {
+      older.push(item);
+    }
+  }
+
+  const groups: ChatSidebarDateGroup[] = [];
+  if (today.length > 0) groups.push({ label: t("chatSidebarToday"), items: today });
+  if (yesterday.length > 0)
+    groups.push({ label: t("chatSidebarYesterday"), items: yesterday });
+  if (previous7.length > 0)
+    groups.push({ label: t("chatSidebarPrevious7Days"), items: previous7 });
+  if (older.length > 0) groups.push({ label: t("chatSidebarOlder"), items: older });
+  return groups;
+}
+
+export function groupSessionsByProject(
+  items: NcpSessionListItemView[],
+): ChatSidebarProjectGroup[] {
+  const grouped = new Map<string, ChatSidebarProjectGroup>();
+
+  for (const item of items) {
+    const projectRoot = item.session.projectRoot?.trim();
+    if (!projectRoot) {
+      continue;
+    }
+    const existingGroup = grouped.get(projectRoot);
+    const updatedAt = getSessionActivityAtTimestamp(item);
+    if (existingGroup) {
+      existingGroup.items.push(item);
+      existingGroup.latestUpdatedAt = Math.max(
+        existingGroup.latestUpdatedAt,
+        updatedAt,
+      );
+      continue;
+    }
+    grouped.set(projectRoot, {
+      projectRoot,
+      projectName:
+        item.session.projectName?.trim() ||
+        getSessionProjectName(projectRoot) ||
+        projectRoot,
+      items: [item],
+      latestUpdatedAt: updatedAt,
+    });
+  }
+
+  return [...grouped.values()]
+    .map((group) => ({
+      ...group,
+      items: sortSessionItemsByActivityAtDesc(group.items),
+    }))
+    .sort((left, right) => right.latestUpdatedAt - left.latestUpdatedAt);
+}
+
+export function groupChildSessionsByParentKey(
+  items: NcpSessionListItemView[],
+): Map<string, NcpSessionListItemView[]> {
+  const grouped = new Map<string, NcpSessionListItemView[]>();
+  for (const item of items) {
+    const parentSessionKey = item.session.parentSessionId?.trim();
+    if (!parentSessionKey) {
+      continue;
+    }
+    const bucket = grouped.get(parentSessionKey) ?? [];
+    bucket.push(item);
+    grouped.set(parentSessionKey, bucket);
+  }
+  for (const bucket of grouped.values()) {
+    bucket.sort(
+      (left, right) =>
+        getSessionActivityAtTimestamp(right) -
+        getSessionActivityAtTimestamp(left),
+    );
+  }
+  return grouped;
+}
+
+export function getSessionTitle(session: SessionEntryView): string {
+  if (session.label && session.label.trim()) {
+    return session.label.trim();
+  }
+  const chunks = session.key.split(":");
+  return chunks[chunks.length - 1] || session.key;
+}

package/src/features/chat/{components → features/session-type/components/__tests__}/chat-session-type-option-item.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { ChatSessionTypeOptionItem } from "./chat-session-type-option-item";
+import { ChatSessionTypeOptionItem } from "@/features/chat/features/session-type/components/chat-session-type-option-item";
 
 describe("ChatSessionTypeOptionItem", () => {
   it("renders a runtime icon image when the session type option provides an app resource URI", () => {

package/src/features/chat/{components → features/session-type/components}/chat-session-type-option-item.tsx

@@ -1,7 +1,7 @@
 import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
-import { SessionContextIconNode } from "@/features/chat/components/session/session-context-icon";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import { StatusDot } from "@/shared/components/status/status-dot";
 import { t } from "@/shared/lib/i18n";
-import { cn } from "@/shared/lib/utils";
 import { Bot } from "lucide-react";
 
 type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
@@ -43,20 +43,11 @@ export function ChatSessionTypeOptionItem(props: {
               <div className="truncate text-[13px] font-semibold text-gray-900">
                 {option.label}
               </div>
-              <span
-                className={cn(
-                  "inline-flex shrink-0 items-center gap-1.5 text-[11px] font-medium",
-                  option.ready === false ? "text-amber-700" : "text-emerald-600",
-                )}
-              >
-                <span
-                  className={cn(
-                    "h-1.5 w-1.5 rounded-full",
-                    option.ready === false ? "bg-amber-500" : "bg-emerald-500",
-                  )}
-                />
-                {option.ready === false ? t("statusSetup") : t("statusReady")}
-              </span>
+              <StatusDot
+                status={option.ready === false ? "warning" : "ready"}
+                label={option.ready === false ? t("statusSetup") : t("statusReady")}
+                className="bg-transparent px-0"
+              />
             </div>
             {helperText ? (
               <div className="mt-1 pr-4 text-[11px] leading-4 text-gray-500">

package/src/features/chat/features/session-type/components/chat-sidebar-create-menu.tsx

@@ -0,0 +1,42 @@
+import { ChatSessionTypeOptionItem } from "@/features/chat/features/session-type/components/chat-session-type-option-item";
+import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+
+type ChatSidebarCreateMenuProps = {
+  options: readonly SessionTypeOption[];
+  onSelect: (sessionType: string) => void;
+  title?: string;
+  className?: string;
+  titleClassName?: string;
+};
+
+export function ChatSidebarCreateMenu({
+  className,
+  onSelect,
+  options,
+  title = t("chatSessionTypeLabel"),
+  titleClassName,
+}: ChatSidebarCreateMenuProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <div
+        className={cn(
+          "px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400",
+          titleClassName,
+        )}
+      >
+        {title}
+      </div>
+      {options.map((option) => (
+        <ChatSessionTypeOptionItem
+          key={option.value}
+          option={option}
+          onSelect={() => onSelect(option.value)}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { resolveSessionTypeLabel, useChatSessionTypeState } from './use-chat-session-type-state';
+import { resolveSessionTypeLabel, useChatSessionTypeState } from '../use-chat-session-type-state';
 
 vi.mock('@/shared/lib/i18n', () => ({
   t: (key: string) => key