@nextclaw/ui 0.13.13 → 0.14.1-beta.0

package/src/features/chat/features/ncp/utils/ncp-chat-query-derived.utils.ts

@@ -0,0 +1,85 @@
+import {
+  RUNTIME_DEFAULT_MODEL_VALUE,
+  type RuntimeModelSelectionMode,
+} from '@nextclaw/shared';
+import type { ConfigView, ProvidersView, ProviderTemplatesView } from '@/shared/lib/api';
+import type { ChatModelOption } from '@/features/chat/types/chat-input.types';
+import { buildProviderModelCatalog, composeProviderModel, resolveModelThinkingCapability } from '@/shared/lib/provider-models';
+
+function buildRuntimeDefaultModelOption(
+  label: string,
+  thinkingCapability?: ChatModelOption['thinkingCapability'],
+): ChatModelOption {
+  return {
+    value: RUNTIME_DEFAULT_MODEL_VALUE,
+    modelLabel: label,
+    providerLabel: '',
+    isRuntimeDefault: true,
+    thinkingCapability: thinkingCapability ?? null,
+  };
+}
+
+export function buildNcpChatProviderModelOptions(params: {
+  config: ConfigView | null;
+  providersView: ProvidersView | null;
+  templatesView: ProviderTemplatesView | null;
+}): ChatModelOption[] {
+  const seen = new Set<string>();
+  return buildProviderModelCatalog({
+    providersView: params.providersView ?? undefined,
+    templatesView: params.templatesView ?? undefined,
+    config: params.config ?? undefined,
+    onlyConfigured: true,
+  }).flatMap((provider) =>
+    provider.models.map((model): ChatModelOption | null => {
+      const value = composeProviderModel(provider.prefix, model);
+      if (!value || seen.has(value)) {
+        return null;
+      }
+      seen.add(value);
+      return {
+        value,
+        modelLabel: model,
+        providerLabel: provider.displayName,
+        thinkingCapability: resolveModelThinkingCapability(provider.modelThinking, model, provider.aliases),
+      };
+    }),
+  ).filter((option): option is ChatModelOption => option !== null).sort((left, right) => {
+    const providerCompare = left.providerLabel.localeCompare(right.providerLabel);
+    return providerCompare === 0 ? left.modelLabel.localeCompare(right.modelLabel) : providerCompare;
+  });
+}
+
+export function filterNcpChatModelOptionsBySessionType(params: {
+  modelOptions: ChatModelOption[];
+  modelSelectionMode?: RuntimeModelSelectionMode;
+  runtimeDefaultThinkingCapability?: ChatModelOption['thinkingCapability'];
+  runtimeDefaultModelLabel?: string;
+  supportedModels?: string[];
+}): ChatModelOption[] {
+  const {
+    modelOptions,
+    modelSelectionMode,
+    runtimeDefaultThinkingCapability,
+    runtimeDefaultModelLabel = 'Runtime default',
+    supportedModels,
+  } = params;
+  const runtimeDefaultOption = buildRuntimeDefaultModelOption(
+    runtimeDefaultModelLabel,
+    runtimeDefaultThinkingCapability,
+  );
+  if (modelSelectionMode === 'runtime-default') {
+    return [runtimeDefaultOption];
+  }
+  if (!supportedModels || supportedModels.length === 0) {
+    return modelSelectionMode === 'optional'
+      ? [runtimeDefaultOption, ...modelOptions]
+      : modelOptions;
+  }
+  const supportedModelSet = new Set(supportedModels);
+  const filtered = modelOptions.filter((option) => supportedModelSet.has(option.value));
+  const resolved = filtered.length > 0 ? filtered : modelOptions;
+  return modelSelectionMode === 'optional'
+    ? [runtimeDefaultOption, ...resolved]
+    : resolved;
+}

package/src/features/chat/{utils → features/runtime/utils/__tests__}/ncp-app-client-fetch.utils.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { createNcpAppClientFetch } from '@/features/chat/utils/ncp-app-client-fetch.utils';
+import { createNcpAppClientFetch } from '@/features/chat/features/runtime/utils/ncp-app-client-fetch.utils';
 
 const fetchMock = vi.fn<typeof fetch>();
 

package/src/features/chat/{utils → features/runtime/utils/__tests__}/ncp-chat-runtime-availability.utils.test.ts

@@ -5,7 +5,7 @@ import {
   isNcpChatRuntimeBlocked,
   resolveNcpChatRuntimeMessage,
   resolveNcpChatSendErrorMessage,
-} from './ncp-chat-runtime-availability.utils';
+} from '../ncp-chat-runtime-availability.utils';
 
 function createStatus(overrides: Partial<SystemStatusView> = {}): SystemStatusView {
   return {

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

@@ -1,5 +1,5 @@
 import type { SessionMessageView } from '@/shared/lib/api';
-import { extractMessageText } from './chat-message-core.utils';
+import { extractMessageText } from '@/features/chat/features/message/utils/chat-message-core.utils';
 import { ToolInvocationStatus, type UIMessage } from '@nextclaw/agent-chat';
 
 export { isAbortLikeError, formatSendError, buildLocalAssistantMessage } from '@nextclaw/agent-chat';

package/src/features/chat/{components → features/session/components}/chat-sidebar-project-groups.tsx

@@ -1,18 +1,14 @@
 import { useMemo, useState, type ReactNode } from 'react';
 import { Plus } from 'lucide-react';
-import { Button } from '@/shared/components/ui/button';
-import { ChatSessionTypeOptionItem } from "./chat-session-type-option-item";
+import { ChatSidebarCreateMenu } from "@/features/chat/features/session-type/components/chat-sidebar-create-menu";
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
-import type { NcpSessionListItemView } from '@/features/chat/hooks/use-ncp-session-list-view';
+import type { NcpSessionListItemView } from '@/features/chat/features/ncp/hooks/use-ncp-session-list-view';
+import type { ChatSidebarProjectGroup } from '@/features/chat/features/session/utils/chat-sidebar-session-groups.utils';
 import { t } from '@/shared/lib/i18n';
 
-export type ChatSidebarProjectGroup = {
-  projectRoot: string;
-  projectName: string;
-  items: NcpSessionListItemView[];
-  latestUpdatedAt: number;
-};
+export type { ChatSidebarProjectGroup };
 
 type SessionTypeOption = ChatInputSnapshot['sessionTypeOptions'][number];
 
@@ -70,50 +66,33 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                   }}
                 >
                   <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
+                    <IconActionButton
+                      icon={<Plus className="h-3.5 w-3.5" />}
+                      label={actionLabel}
+                      tooltip={false}
                       className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
-                      aria-label={actionLabel}
-                      title={actionLabel}
-                    >
-                      <Plus className="h-3.5 w-3.5" />
-                    </Button>
+                    />
                   </PopoverTrigger>
                   <PopoverContent
                     align="end"
                     className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
                   >
-                    <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400">
-                      {t('chatSessionTypeLabel')}
-                    </div>
-                    <div className="space-y-1">
-                      {sessionTypeOptions.map((option) => (
-                        <ChatSessionTypeOptionItem
-                          key={`${group.projectRoot}:${option.value}`}
-                          option={option}
-                          onSelect={() => {
-                            onCreateSession(option.value, group.projectRoot);
-                            setOpenProjectRoot(null);
-                          }}
-                        />
-                      ))}
-                    </div>
+                    <ChatSidebarCreateMenu
+                      options={sessionTypeOptions}
+                      onSelect={(sessionType) => {
+                        onCreateSession(sessionType, group.projectRoot);
+                        setOpenProjectRoot(null);
+                      }}
+                    />
                   </PopoverContent>
                 </Popover>
               ) : (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
+                <IconActionButton
+                  icon={<Plus className="h-3.5 w-3.5" />}
+                  label={actionLabel}
                   className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
                   onClick={() => onCreateSession(preferredSessionType, group.projectRoot)}
-                  aria-label={actionLabel}
-                  title={actionLabel}
-                >
-                  <Plus className="h-3.5 w-3.5" />
-                </Button>
+                />
               )}
             </div>
             <div className="space-y-0.5 pl-2">

package/src/features/chat/{components/layout → features/session/components}/chat-sidebar-session-entry.tsx

@@ -1,22 +1,33 @@
 import type { SessionEntryView } from "@/shared/lib/api";
-import type { NcpSessionListItemView } from "@/features/chat/hooks/use-ncp-session-list-view";
-import { ChatSidebarSessionItem } from "@/features/chat";
-import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import { ChatSidebarSessionItem } from "@/features/chat/features/session/components/chat-sidebar-session-item";
 import { shouldShowUnreadSessionIndicator } from "@/features/chat/stores/chat-session-list.store";
-import { resolveSessionContextView } from "@/features/chat/utils/session-context.utils";
+import {
+  formatSessionListTime,
+  sessionActivityPreviewText,
+} from "@/features/chat/features/session/utils/chat-session-display.utils";
+import { resolveSessionContextView } from "@/features/chat/features/session/utils/session-context.utils";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 
 export function ChatSidebarSessionEntry(props: {
   item: NcpSessionListItemView;
   selectedSessionKey: string | null;
   optimisticReadAtBySessionKey: Record<string, string>;
-  agentsById: Map<string, { displayName?: string | null; avatarUrl?: string | null }>;
+  agentsById: Map<
+    string,
+    { displayName?: string | null; avatarUrl?: string | null }
+  >;
   childSessionsByParentKey: Map<string, NcpSessionListItemView[]>;
   editingSessionKey: string | null;
   draftLabel: string;
   savingSessionKey: string | null;
+  sessionTypeOptions: ChatSessionTypeOption[];
   sessionTitle: (session: SessionEntryView) => string;
   onSelectSession: (sessionKey: string) => void;
-  onOpenChildSessions: (parentSessionKey: string, activeChildSessionKey: string | null) => void;
+  onOpenChildSessions: (
+    parentSessionKey: string,
+    activeChildSessionKey: string | null,
+  ) => void;
   onStartEditingSessionLabel: (session: SessionEntryView) => void;
   onDraftLabelChange: (value: string) => void;
   onSaveSessionLabel: (session: SessionEntryView) => void;
@@ -31,6 +42,7 @@ export function ChatSidebarSessionEntry(props: {
     editingSessionKey,
     draftLabel,
     savingSessionKey,
+    sessionTypeOptions,
     sessionTitle,
     onSelectSession,
     onOpenChildSessions,
@@ -40,18 +52,25 @@ export function ChatSidebarSessionEntry(props: {
     onCancelEditingSessionLabel,
   } = props;
   const { session, runStatus } = item;
-  const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const active = selectedSessionKey === session.key;
   const optimisticReadAt = optimisticReadAtBySessionKey[session.key];
   const effectiveReadAt =
     optimisticReadAt && session.readAt
-      ? (optimisticReadAt.localeCompare(session.readAt) > 0 ? optimisticReadAt : session.readAt)
-      : optimisticReadAt ?? session.readAt;
+      ? optimisticReadAt.localeCompare(session.readAt) > 0
+        ? optimisticReadAt
+        : session.readAt
+      : (optimisticReadAt ?? session.readAt);
   const childSessions = childSessionsByParentKey.get(session.key) ?? [];
+  const agentLabel = session.agentId
+    ? (agentsById.get(session.agentId)?.displayName ?? session.agentId)
+    : null;
+  const previewText =
+    sessionActivityPreviewText(session) ??
+    `${agentLabel?.trim() ? `${agentLabel} · ` : ""}${session.messageCount}`;
 
   return (
     <ChatSidebarSessionItem
-      session={session}
+      sessionKey={session.key}
       active={active}
       showUnreadDot={shouldShowUnreadSessionIndicator({
         active,
@@ -60,11 +79,19 @@ export function ChatSidebarSessionEntry(props: {
         runStatus,
       })}
       runStatus={runStatus}
-      context={resolveSessionContextView(session, inputSnapshot.sessionTypeOptions)}
+      context={resolveSessionContextView(session, sessionTypeOptions)}
       title={sessionTitle(session)}
+      previewText={previewText}
+      trailingText={formatSessionListTime(
+        session.lastMessageAt ?? session.createdAt,
+      )}
       agentId={session.agentId ?? null}
-      agentLabel={session.agentId ? (agentsById.get(session.agentId)?.displayName ?? session.agentId) : null}
-      agentAvatarUrl={session.agentId ? (agentsById.get(session.agentId)?.avatarUrl ?? null) : null}
+      agentLabel={agentLabel}
+      agentAvatarUrl={
+        session.agentId
+          ? (agentsById.get(session.agentId)?.avatarUrl ?? null)
+          : null
+      }
       childSessionCount={childSessions.length}
       isEditing={editingSessionKey === session.key}
       draftLabel={draftLabel}

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

@@ -1,26 +1,23 @@
-import type { SessionEntryView } from '@/shared/lib/api';
 import { AgentAvatar } from '@/shared/components/common/agent-avatar';
-import { SessionContextIconNode } from '@/features/chat/components/session/session-context-icon';
-import { SessionRunBadge } from '@/features/chat/components/session/session-run-badge';
-import { Button } from '@/shared/components/ui/button';
+import { SessionContextIconNode } from '@/features/chat/features/session/components/session-context-icon';
+import { SessionRunBadge } from '@/features/chat/features/session/components/session-run-badge';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { Input } from '@/shared/components/ui/input';
-import { type SessionContextView } from '@/features/chat/utils/session-context.utils';
-import {
-  formatSessionListTime,
-  sessionActivityPreviewText
-} from '@/features/chat/utils/chat-session-display.utils';
+import { type SessionContextView } from '@/features/chat/features/session/utils/session-context.utils';
 import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
 import { Check, GitBranch, Pencil, X } from 'lucide-react';
 
 type ChatSidebarSessionItemProps = {
-  session: SessionEntryView;
+  sessionKey: string;
   active: boolean;
   showUnreadDot: boolean;
   runStatus?: SessionRunStatus;
   context: SessionContextView;
   title: string;
+  previewText: string;
+  trailingText: string;
   agentId?: string | null;
   agentLabel?: string | null;
   agentAvatarUrl?: string | null;
@@ -38,11 +35,11 @@ type ChatSidebarSessionItemProps = {
 
 type ChatSidebarSessionEditingViewProps = Pick<
   ChatSidebarSessionItemProps,
-  'session' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
+  'sessionKey' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
 >;
 
 function ChatSidebarSessionEditingView({
-  session,
+  sessionKey,
   draftLabel,
   isSaving,
   onDraftLabelChange,
@@ -69,30 +66,24 @@ function ChatSidebarSessionEditingView({
         disabled={isSaving}
       />
       <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0 text-[11px] text-gray-400 truncate">{session.key}</div>
+        <div className="min-w-0 text-[11px] text-gray-400 truncate">{sessionKey}</div>
         <div className="flex items-center gap-1">
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
+          <IconActionButton
+            icon={<Check className="h-3.5 w-3.5" />}
+            label={t('save')}
+            tooltip={false}
             className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
             onClick={() => void onSave()}
             disabled={isSaving}
-            aria-label={t('save')}
-          >
-            <Check className="h-3.5 w-3.5" />
-          </Button>
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
+          />
+          <IconActionButton
+            icon={<X className="h-3.5 w-3.5" />}
+            label={t('cancel')}
+            tooltip={false}
             className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
             onClick={onCancel}
             disabled={isSaving}
-            aria-label={t('cancel')}
-          >
-            <X className="h-3.5 w-3.5" />
-          </Button>
+          />
         </div>
       </div>
     </div>
@@ -101,16 +92,17 @@ function ChatSidebarSessionEditingView({
 
 type ChatSidebarSessionDisplayViewProps = Omit<
   ChatSidebarSessionItemProps,
-  'isEditing' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
+  'sessionKey' | 'isEditing' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
 >;
 
 function ChatSidebarSessionDisplayView({
-  session,
   active,
   showUnreadDot,
   runStatus,
   context,
   title,
+  previewText,
+  trailingText,
   agentId,
   agentLabel,
   agentAvatarUrl,
@@ -120,8 +112,6 @@ function ChatSidebarSessionDisplayView({
   onStartEditing
 }: ChatSidebarSessionDisplayViewProps) {
   const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-14' : 'pr-6';
-  const previewText = sessionActivityPreviewText(session);
-  const fallbackPreviewText = `${agentLabel?.trim() ? `${agentLabel} · ` : ''}${session.messageCount}`;
 
   return (
     <div className="group/session relative">
@@ -158,7 +148,7 @@ function ChatSidebarSessionDisplayView({
         </div>
         <div className="mt-1 flex items-center gap-2 text-[11px] text-gray-400">
           <span className="min-w-0 truncate">
-            {previewText ?? fallbackPreviewText}
+            {previewText}
           </span>
           {showUnreadDot ? (
             <span
@@ -166,7 +156,7 @@ function ChatSidebarSessionDisplayView({
               className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary"
             />
           ) : (
-            <span className="ml-auto shrink-0">{formatSessionListTime(session.lastMessageAt ?? session.createdAt)}</span>
+            <span className="ml-auto shrink-0">{trailingText}</span>
           )}
         </div>
       </button>
@@ -195,8 +185,10 @@ function ChatSidebarSessionDisplayView({
           <SessionRunBadge status={runStatus} />
         </span>
       ) : null}
-      <button
-        type="button"
+      <IconActionButton
+        icon={<Pencil className="h-3 w-3" />}
+        label={t('edit')}
+        tooltip={false}
         onClick={(event) => {
           event.stopPropagation();
           onStartEditing();
@@ -205,21 +197,20 @@ function ChatSidebarSessionDisplayView({
           'absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center rounded-md text-gray-400 transition-all hover:bg-white hover:text-gray-900',
           'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
         )}
-        aria-label={t('edit')}
-      >
-        <Pencil className="h-3 w-3" />
-      </button>
+      />
     </div>
   );
 }
 
 export function ChatSidebarSessionItem({
-  session,
+  sessionKey,
   active,
   showUnreadDot,
   runStatus,
   context,
   title,
+  previewText,
+  trailingText,
   agentId,
   agentLabel,
   agentAvatarUrl,
@@ -245,7 +236,7 @@ export function ChatSidebarSessionItem({
     >
       {isEditing ? (
         <ChatSidebarSessionEditingView
-          session={session}
+          sessionKey={sessionKey}
           draftLabel={draftLabel}
           isSaving={isSaving}
           onDraftLabelChange={onDraftLabelChange}
@@ -254,12 +245,13 @@ export function ChatSidebarSessionItem({
         />
       ) : (
         <ChatSidebarSessionDisplayView
-          session={session}
           active={active}
           showUnreadDot={showUnreadDot}
           runStatus={runStatus}
           context={context}
           title={title}
+          previewText={previewText}
+          trailingText={trailingText}
           agentId={agentId}
           agentLabel={agentLabel}
           agentAvatarUrl={agentAvatarUrl}

package/src/features/chat/features/session/components/chat-sidebar-session-list.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+import { MessageSquareText } from "lucide-react";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import type {
+  ChatSidebarDateGroup,
+  ChatSidebarProjectGroup,
+} from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+import { ChatSidebarProjectGroups } from "@/features/chat/features/session/components/chat-sidebar-project-groups";
+import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import { t } from "@/shared/lib/i18n";
+
+type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+
+type ChatSidebarSessionListProps = {
+  isLoading: boolean;
+  isProjectFirstView: boolean;
+  groups: ChatSidebarDateGroup[];
+  projectGroups: ChatSidebarProjectGroup[];
+  defaultSessionType: string;
+  sessionTypeOptions: SessionTypeOption[];
+  renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
+  onCreateSession: (sessionType: string, projectRoot?: string | null) => void;
+};
+
+function ChatSidebarEmptyState({ label }: { label: string }) {
+  return (
+    <div className="p-4 text-center">
+      <MessageSquareText className="mx-auto mb-2 h-6 w-6 text-gray-300" />
+      <div className="text-xs text-gray-500">{label}</div>
+    </div>
+  );
+}
+
+export function ChatSidebarSessionList({
+  defaultSessionType,
+  groups,
+  isLoading,
+  isProjectFirstView,
+  onCreateSession,
+  projectGroups,
+  renderSessionItem,
+  sessionTypeOptions,
+}: ChatSidebarSessionListProps) {
+  if (isLoading) {
+    return <div className="p-3 text-xs text-gray-500">{t("sessionsLoading")}</div>;
+  }
+
+  if (isProjectFirstView) {
+    return projectGroups.length === 0 ? (
+      <ChatSidebarEmptyState label={t("chatSidebarProjectViewEmpty")} />
+    ) : (
+      <ChatSidebarProjectGroups
+        groups={projectGroups}
+        defaultSessionType={defaultSessionType}
+        sessionTypeOptions={sessionTypeOptions}
+        renderSessionItem={renderSessionItem}
+        onCreateSession={onCreateSession}
+      />
+    );
+  }
+
+  if (groups.length === 0) {
+    return <ChatSidebarEmptyState label={t("sessionsEmpty")} />;
+  }
+
+  return (
+    <div className="space-y-3">
+      {groups.map((group) => (
+        <div key={group.label}>
+          <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+            {group.label}
+          </div>
+          <div className="space-y-0.5">{group.items.map(renderSessionItem)}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/features/chat/{components/session → features/session/components}/session-context-icon.tsx

@@ -1,4 +1,4 @@
-import { type SessionContextIcon } from '@/features/chat/utils/session-context.utils';
+import { type SessionContextIcon } from '@/features/chat/features/session/utils/session-context.utils';
 import { resolveAppResourceUri } from '@/shared/lib/app-resource-uri';
 import { LogoBadge } from '@/shared/components/common/logo-badge';
 import { getChannelLogo } from '@/shared/lib/logos';

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ChatSessionHeaderActions } from './chat-session-header-actions';
+import { ChatSessionHeaderActions } from '@/features/chat/features/session/components/session-header/chat-session-header-actions';
 
 const mocks = vi.hoisted(() => ({
   updateSessionProject: vi.fn(),
@@ -10,11 +10,11 @@ const mocks = vi.hoisted(() => ({
   onOpenSessionCronJobs: vi.fn(),
 }));
 
-vi.mock('@/features/chat/hooks/use-chat-session-project', () => ({
+vi.mock('@/features/chat/features/session/hooks/use-chat-session-project', () => ({
   useChatSessionProject: () => mocks.updateSessionProject,
 }));
 
-vi.mock('./chat-session-project-dialog', () => ({
+vi.mock('@/features/chat/features/session/components/session-header/chat-session-project-dialog', () => ({
   ChatSessionProjectDialog: () => null,
 }));
 
@@ -45,6 +45,7 @@ describe('ChatSessionHeaderActions', () => {
 
     expect(screen.getByText('Set Project Directory')).toBeTruthy();
     expect(screen.queryByText('Clear Project Directory')).toBeNull();
+    expect(screen.getByText('View Metadata')).toBeTruthy();
     expect(screen.getByText('Delete Session')).toBeTruthy();
   });
 
@@ -67,6 +68,32 @@ describe('ChatSessionHeaderActions', () => {
 
     expect(screen.getByText('Set Project Directory')).toBeTruthy();
     expect(screen.queryByText('Clear Project Directory')).toBeNull();
+    expect(screen.getByText('View Metadata')).toBeTruthy();
+  });
+
+  it('opens the session metadata dialog from the more-actions menu', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <ChatSessionHeaderActions
+        sessionKey="session-codex"
+        canDeleteSession
+        isDeletePending={false}
+        projectRoot={null}
+        metadata={{
+          codex_thread_id: 'thread-123',
+          runtime: 'codex',
+        }}
+        onDeleteSession={mocks.onDeleteSession}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'More actions' }));
+    await user.click(screen.getByRole('button', { name: 'View Metadata' }));
+
+    expect(screen.getByRole('dialog', { name: 'Session Metadata' })).toBeTruthy();
+    expect(screen.getByText(/codex_thread_id/)).toBeTruthy();
+    expect(screen.getByText(/thread-123/)).toBeTruthy();
   });
 
   it('shows a dedicated child-session entry button when the current session has child sessions', async () => {