@nextclaw/ui 0.14.0 → 0.14.1-beta.1

package/src/features/chat/features/session/components/session-header/chat-session-metadata-dialog.tsx

@@ -0,0 +1,46 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/shared/components/ui/dialog';
+import { t } from '@/shared/lib/i18n';
+
+type ChatSessionMetadataDialogProps = {
+  open: boolean;
+  metadata?: Record<string, unknown> | null;
+  onOpenChange: (open: boolean) => void;
+};
+
+function formatSessionMetadata(metadata?: Record<string, unknown> | null): string {
+  try {
+    return JSON.stringify(metadata ?? {}, null, 2);
+  } catch {
+    return '{}';
+  }
+}
+
+export function ChatSessionMetadataDialog({
+  open,
+  metadata,
+  onOpenChange,
+}: ChatSessionMetadataDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl gap-0 overflow-hidden p-0">
+        <DialogHeader className="border-b border-gray-200 px-5 py-4 pr-12">
+          <DialogTitle className="text-base">{t('chatSessionMetadataDialogTitle')}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {t('chatSessionMetadataDialogDescription')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="px-5 pb-5 pt-4">
+          <pre className="max-h-[60vh] overflow-auto rounded-lg border border-gray-200 bg-gray-950 p-4 text-xs leading-relaxed text-gray-100">
+            {formatSessionMetadata(metadata)}
+          </pre>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/chat/features/session/components/session-header/chat-session-project-badge.tsx

@@ -3,7 +3,12 @@ import { ChevronDown, FolderOpen, FolderX, Pencil } from 'lucide-react';
 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';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  createPopoverAvailableHeightLimit,
+} from '@/shared/components/ui/popover';
 import { t } from '@/shared/lib/i18n';
 
 type ChatSessionProjectBadgeProps = {
@@ -13,6 +18,10 @@ type ChatSessionProjectBadgeProps = {
   persistToServer: boolean;
 };
 
+const SESSION_PROJECT_MENU_STYLE = {
+  maxHeight: createPopoverAvailableHeightLimit('18rem'),
+};
+
 export function ChatSessionProjectBadge({
   sessionKey,
   projectName,
@@ -57,7 +66,11 @@ export function ChatSessionProjectBadge({
             </span>
           </button>
         </PopoverTrigger>
-        <PopoverContent align="start" className="w-72 p-2">
+        <PopoverContent
+          align="start"
+          className="w-72 p-2"
+          style={SESSION_PROJECT_MENU_STYLE}
+        >
           <div className="px-3 pb-2 pt-1">
             <div className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
               {projectName}

package/src/features/chat/features/session/hooks/__tests__/use-selected-session-context-window-indicator.test.tsx

@@ -0,0 +1,63 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { useSelectedSessionContextWindowIndicator } from '@/features/chat/features/session/hooks/use-selected-session-context-window-indicator';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
+import { useChatThreadStore } from '@/features/chat/stores/chat-thread.store';
+
+describe('useSelectedSessionContextWindowIndicator', () => {
+  beforeEach(() => {
+    useChatSessionListStore.getState().setSnapshot({
+      selectedSessionKey: null,
+    });
+    useChatThreadStore.getState().setSnapshot({
+      sessionKey: null,
+      contextWindow: null,
+    });
+  });
+
+  it('shows the current thread context window once the thread snapshot has it', () => {
+    useChatSessionListStore.getState().setSnapshot({
+      selectedSessionKey: 'session-other',
+    });
+    useChatThreadStore.getState().setSnapshot({
+      sessionKey: 'session-current',
+      contextWindow: {
+        usedContextTokens: 25,
+        totalContextTokens: 100,
+        availableContextTokens: 75,
+        prunedUsedContextTokens: 25,
+        droppedHistoryCount: 0,
+        truncatedToolResultCount: 0,
+        truncatedSystemPrompt: false,
+        truncatedUserMessage: false,
+        compacted: false,
+        compactedUsedContextTokens: 25,
+        compactedMessageCount: 0,
+        updatedAt: '2026-06-10T00:00:00.000Z',
+      },
+    });
+
+    const { result } = renderHook(() =>
+      useSelectedSessionContextWindowIndicator(),
+    );
+
+    expect(result.current).toMatchObject({
+      percentLabel: '25%',
+      ratio: 0.25,
+      tone: 'neutral',
+    });
+  });
+
+  it('hides the indicator when the current thread snapshot has no context window', () => {
+    useChatThreadStore.getState().setSnapshot({
+      sessionKey: 'session-current',
+      contextWindow: null,
+    });
+
+    const { result } = renderHook(() =>
+      useSelectedSessionContextWindowIndicator(),
+    );
+
+    expect(result.current).toBeNull();
+  });
+});

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

@@ -1,18 +1,15 @@
 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/features/session/utils/chat-context-window-indicator.utils';
 
 export function useSelectedSessionContextWindowIndicator(): ChatContextWindowIndicator | null {
-  const selectedSessionKey = useChatSessionListStore((state) => state.snapshot.selectedSessionKey);
-  const liveSessionKey = useChatThreadStore((state) => state.snapshot.sessionKey);
-  const liveContextWindow = useChatThreadStore((state) => state.snapshot.contextWindow);
+  const liveContextWindow = useChatThreadStore(
+    (state) => state.snapshot.contextWindow,
+  );
 
-  return useMemo(() => {
-    if (selectedSessionKey && liveSessionKey === selectedSessionKey && liveContextWindow) {
-      return buildChatContextWindowIndicator(liveContextWindow);
-    }
-    return null;
-  }, [liveContextWindow, liveSessionKey, selectedSessionKey]);
+  return useMemo(
+    () => buildChatContextWindowIndicator(liveContextWindow),
+    [liveContextWindow],
+  );
 }

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

@@ -43,6 +43,14 @@ describe('adaptNcpSessionSummary', () => {
       projectRoot: '/Users/demo/workspace/project-alpha',
       workingDir: '/Users/demo/workspace/project-alpha',
       projectName: 'project-alpha',
+      metadata: {
+        label: 'NCP Planning Thread',
+        model: 'openai/gpt-5',
+        preferred_thinking: 'medium',
+        project_root: '/Users/demo/workspace/project-alpha',
+        session_type: 'native',
+        ui_last_read_at: '2026-03-17T23:59:00.000Z'
+      },
       lastMessageAt: '2026-03-18T00:00:00.000Z',
       readAt: '2026-03-17T23:59:00.000Z',
       sessionType: 'native',

package/src/features/chat/features/session/utils/ncp-session-adapter.utils.ts

@@ -308,6 +308,7 @@ export function adaptNcpMessagesToUiMessages(messages: readonly NcpMessageView[]
 }
 
 export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionEntryView {
+  const metadata = readMetadata(summary);
   const label = readNcpSessionLabel(summary);
   const preferredModel = readNcpSessionPreferredModel(summary);
   const preferredThinking = readNcpSessionPreferredThinking(summary);
@@ -335,6 +336,7 @@ export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionE
     ...(projectRoot ? { projectRoot } : {}),
     ...(workingDir ? { workingDir } : {}),
     ...(projectName ? { projectName } : {}),
+    ...(metadata ? { metadata } : {}),
     sessionType: readNcpSessionType(summary),
     sessionTypeMutable: false,
     status: summary.status ?? 'idle',

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

@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSidebarCreateMenu } from "@/features/chat/features/session-type/components/chat-sidebar-create-menu";
+import { createPopoverAvailableHeightLimit } from "@/shared/components/ui/popover";
+
+const options = [
+  { value: "native", label: "Native", ready: true },
+  { value: "codex", label: "Codex", ready: true },
+];
+
+describe("ChatSidebarCreateMenu", () => {
+  it("keeps the session type menu height bounded", () => {
+    render(<ChatSidebarCreateMenu options={options} onSelect={vi.fn()} />);
+
+    const createMenu = screen.getByText("Session Type").parentElement;
+    expect(createMenu?.style.maxHeight).toBe(
+      createPopoverAvailableHeightLimit("18rem"),
+    );
+    expect(createMenu?.style.maxHeight).toContain("max(0px");
+    expect(createMenu?.style.maxHeight).toContain("100vh");
+    expect(createMenu?.style.maxHeight).toContain("2rem");
+    expect(createMenu?.className).toContain("overflow-y-auto");
+  });
+});

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

@@ -1,9 +1,15 @@
 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 { createPopoverAvailableHeightLimit } from "@/shared/components/ui/popover";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+const CHAT_SIDEBAR_CREATE_MENU_MAX_HEIGHT =
+  createPopoverAvailableHeightLimit("18rem");
+const CHAT_SIDEBAR_CREATE_MENU_STYLE = {
+  maxHeight: CHAT_SIDEBAR_CREATE_MENU_MAX_HEIGHT,
+};
 
 type ChatSidebarCreateMenuProps = {
   options: readonly SessionTypeOption[];
@@ -21,7 +27,10 @@ export function ChatSidebarCreateMenu({
   titleClassName,
 }: ChatSidebarCreateMenuProps) {
   return (
-    <div className={cn("space-y-1", className)}>
+    <div
+      className={cn("space-y-1 overflow-y-auto overscroll-contain", className)}
+      style={CHAT_SIDEBAR_CREATE_MENU_STYLE}
+    >
       <div
         className={cn(
           "px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400",

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

@@ -55,6 +55,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
         supportedModels: undefined,
         recommendedModel: null,
         modelSelectionMode: 'nextclaw',
+        runtimeDefaultThinking: null,
         cta: null
       });
     }

package/src/features/chat/features/session-type/utils/chat-session-type.utils.ts

@@ -1,6 +1,7 @@
 import type {
   AgentProfileView,
   ChatSessionTypeOptionView,
+  RuntimeDefaultThinkingView,
   SessionTypeIconView,
 } from "@/shared/lib/api";
 import type { RuntimeModelSelectionMode } from "@nextclaw/shared";
@@ -18,6 +19,7 @@ export type ChatSessionTypeOption = {
   supportedModels?: string[];
   recommendedModel?: string | null;
   modelSelectionMode?: RuntimeModelSelectionMode;
+  runtimeDefaultThinking?: RuntimeDefaultThinkingView | null;
   cta?: {
     kind: string;
     label?: string;
@@ -76,6 +78,7 @@ export function buildSessionTypeOptions(
       supportedModels: option.supportedModels,
       recommendedModel: option.recommendedModel ?? null,
       modelSelectionMode: option.modelSelectionMode ?? "nextclaw",
+      runtimeDefaultThinking: option.runtimeDefaultThinking ?? null,
       cta: option.cta ?? null,
     });
   }
@@ -90,6 +93,7 @@ export function buildSessionTypeOptions(
       supportedModels: undefined,
       recommendedModel: null,
       modelSelectionMode: "nextclaw",
+      runtimeDefaultThinking: null,
       cta: null,
     });
   }

package/src/features/chat/features/welcome/components/__tests__/chat-conversation-welcome.test.tsx

@@ -0,0 +1,193 @@
+import type { ReactNode } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatConversationWelcome } from "@/features/chat/features/welcome/components/chat-conversation-welcome";
+import { useChatInputStore } 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 { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import type { ChatQuerySnapshot } from "@/features/chat/stores/ncp-chat-query.store";
+
+const mocks = vi.hoisted(() => ({
+  setSelectedAgentId: vi.fn(),
+  applyPromptSuggestion: vi.fn(),
+  setPendingProjectRoot: vi.fn(),
+  setPendingSessionType: vi.fn(),
+  agents: [
+    { id: "main", displayName: "Main", runtime: "native" },
+    { id: "engineer", displayName: "Engineer", runtime: "codex" },
+  ],
+}));
+
+vi.mock("@/features/chat/features/welcome/components/chat-welcome", () => ({
+  ChatWelcome: ({
+    inputSlot,
+    onSelectAgent,
+    onSelectPrompt,
+    onSelectProjectRoot,
+    onSelectSessionType,
+  }: {
+    inputSlot: ReactNode;
+    onSelectAgent: (agentId: string) => void;
+    onSelectPrompt: (prompt: string) => void;
+    onSelectProjectRoot: (projectRoot: string) => void;
+    onSelectSessionType: (sessionType: string) => void;
+  }) => (
+    <div>
+      {inputSlot}
+      <button type="button" onClick={() => onSelectAgent("engineer")}>
+        switch draft agent
+      </button>
+      <button type="button" onClick={() => onSelectPrompt("example prompt")}>
+        pick prompt
+      </button>
+      <button type="button" onClick={() => onSelectSessionType("codex")}>
+        switch session type
+      </button>
+      <button
+        type="button"
+        onClick={() => onSelectProjectRoot("/tmp/project-alpha")}
+      >
+        select draft project
+      </button>
+    </div>
+  ),
+}));
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatSessionListManager: {
+      setSelectedAgentId: mocks.setSelectedAgentId,
+    },
+    chatInputManager: {
+      applyPromptSuggestion: mocks.applyPromptSuggestion,
+      setPendingProjectRoot: mocks.setPendingProjectRoot,
+      setPendingSessionType: mocks.setPendingSessionType,
+    },
+  }),
+}));
+
+vi.mock("@/shared/hooks/use-agents", () => ({
+  useAgents: () => ({
+    data: { agents: mocks.agents },
+  }),
+}));
+
+function createFetchedQuery<TData>(data: TData) {
+  return {
+    data,
+    error: null,
+    fetchStatus: "idle",
+    isFetched: true,
+    isFetching: false,
+    isLoading: false,
+    isSuccess: true,
+    status: "success",
+  };
+}
+
+function resetWelcomeTestState() {
+  mocks.setSelectedAgentId.mockReset();
+  mocks.applyPromptSuggestion.mockReset();
+  mocks.setPendingProjectRoot.mockReset();
+  mocks.setPendingSessionType.mockReset();
+  useChatInputStore.setState({
+    snapshot: {
+      ...useChatInputStore.getState().snapshot,
+      defaultSessionType: "native",
+      pendingSessionType: "native",
+      selectedSessionType: undefined,
+      pendingProjectRoot: null,
+    },
+  });
+  useChatSessionListStore.setState({
+    snapshot: {
+      ...useChatSessionListStore.getState().snapshot,
+      selectedAgentId: "main",
+    },
+  });
+  useChatThreadStore.setState({
+    snapshot: {
+      ...useChatThreadStore.getState().snapshot,
+      agentId: null,
+    },
+  });
+  useChatQueryStore.setState({
+    snapshot: {
+      configQuery: createFetchedQuery({
+        agents: {
+          defaults: {
+            workspace: "/Users/demo/.nextclaw/workspace",
+          },
+        },
+        providers: {},
+      }) as unknown as ChatQuerySnapshot["configQuery"],
+      sessionTypesQuery: createFetchedQuery({
+        defaultType: "native",
+        options: [
+          { value: "native", label: "Native", ready: true },
+          { value: "codex", label: "Codex", ready: true },
+        ],
+      }) as unknown as ChatQuerySnapshot["sessionTypesQuery"],
+      sessionsQuery: createFetchedQuery({
+        sessions: [],
+        total: 0,
+      }) as unknown as ChatQuerySnapshot["sessionsQuery"],
+    },
+  });
+}
+
+describe("ChatConversationWelcome", () => {
+  beforeEach(resetWelcomeTestState);
+
+  it("stores the selected welcome project through the input manager", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "select draft project" }),
+    );
+
+    expect(mocks.setPendingProjectRoot).toHaveBeenCalledWith("/tmp/project-alpha");
+  });
+
+  it("applies a selected prompt suggestion through the input manager", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "pick prompt" }),
+    );
+
+    expect(mocks.applyPromptSuggestion).toHaveBeenCalledWith("example prompt");
+  });
+
+
+  it("syncs the pending session type when switching the draft agent", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "switch draft agent" }),
+    );
+
+    expect(mocks.setSelectedAgentId).toHaveBeenCalledWith("engineer");
+    expect(mocks.setPendingSessionType).toHaveBeenCalledWith("codex");
+  });
+
+  it("stores an explicit welcome session type selection", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "switch session type" }),
+    );
+
+    expect(mocks.setPendingSessionType).toHaveBeenCalledWith("codex");
+  });
+});

package/src/features/chat/features/welcome/components/__tests__/chat-welcome.test.tsx

@@ -0,0 +1,123 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ChatWelcome } from '@/features/chat/features/welcome/components/chat-welcome';
+
+vi.mock(
+  '@/features/chat/features/session/components/session-header/chat-session-project-dialog',
+  () => ({
+    ChatSessionProjectDialog: () => null,
+  }),
+);
+
+const sessionTypeOptions = [
+  { value: 'native', label: 'Native', ready: true },
+  { value: 'codex', label: 'Codex', ready: true },
+];
+
+function renderWelcome(
+  overrides: Partial<Parameters<typeof ChatWelcome>[0]> = {},
+) {
+  return render(
+    <ChatWelcome
+      agents={[
+        { id: 'main', displayName: 'Main' },
+        { id: 'engineer', displayName: 'Engineer' },
+      ]}
+      projectOptions={[]}
+      selectedAgentId="main"
+      selectedSessionType="native"
+      sessionTypeOptions={sessionTypeOptions}
+      onSelectAgent={vi.fn()}
+      onSelectPrompt={vi.fn()}
+      onSelectSessionType={vi.fn()}
+      {...overrides}
+    />,
+  );
+}
+
+describe('ChatWelcome', () => {
+  it('renders a lightweight draft agent select and allows switching', () => {
+    const onSelectAgent = vi.fn();
+
+    renderWelcome({ onSelectAgent });
+
+    const trigger = screen.getByRole('combobox', { name: 'Draft agent' });
+    expect(screen.getByText('Main')).toBeTruthy();
+    fireEvent.keyDown(trigger, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Engineer'));
+
+    expect(onSelectAgent).toHaveBeenCalledWith('engineer');
+    expect(screen.queryByText('Current Agent:')).toBeNull();
+  });
+
+  it('uses an adaptive capability grid for narrow docked layouts', () => {
+    renderWelcome({ agents: [{ id: 'main', displayName: 'Main' }] });
+
+    expect(
+      screen.getByRole('button', { name: /Smart Conversations/ }).parentElement
+        ?.className,
+    ).toContain('auto-fit');
+  });
+
+  it('fills the composer with a prompt suggestion when clicking a capability card', () => {
+    const onSelectPrompt = vi.fn();
+
+    renderWelcome({ onSelectPrompt });
+
+    fireEvent.click(screen.getByRole('button', { name: /Smart Conversations/ }));
+
+    expect(onSelectPrompt).toHaveBeenCalledWith(
+      expect.stringContaining('next three concrete things'),
+    );
+  });
+
+  it('lets users switch the welcome session type', () => {
+    const onSelectSessionType = vi.fn();
+
+    renderWelcome({ onSelectSessionType });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Choose session type' }));
+    fireEvent.click(screen.getByText('Codex'));
+
+    expect(onSelectSessionType).toHaveBeenCalledWith('codex');
+  });
+
+  it('shows recent projects in a scrollable menu with a fixed folder action', async () => {
+    const onSelectProjectRoot = vi.fn();
+
+    renderWelcome({
+      defaultProjectRoot: '/Users/demo/.nextclaw/workspace',
+      onSelectProjectRoot,
+      projectOptions: [
+        {
+          projectRoot: '/Users/demo/.nextclaw/workspace',
+          projectName: 'workspace',
+          sessionCount: 0,
+          isDefault: true,
+        },
+        {
+          projectRoot: '/tmp/project-alpha',
+          projectName: 'project-alpha',
+          sessionCount: 3,
+          isDefault: false,
+        },
+      ],
+    });
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Choose working directory' }),
+    );
+    expect(screen.getByText('Recent projects')).toBeTruthy();
+    expect(screen.getByText('/tmp/project-alpha')).toBeTruthy();
+    expect(screen.getByText('Open folder')).toBeTruthy();
+    expect(screen.getByText('/tmp/project-alpha').closest('.overflow-y-auto'))
+      .toBeTruthy();
+
+    fireEvent.click(screen.getByText('project-alpha'));
+
+    expect(onSelectProjectRoot).toHaveBeenCalledWith('/tmp/project-alpha');
+    await waitFor(() => {
+      expect(screen.queryByText('Recent projects')).toBeNull();
+    });
+  });
+});