@nextclaw/ui 0.14.1-beta.0 → 0.14.1-beta.1

package/src/features/chat/features/message/utils/file-operation/line-builder.utils.ts

@@ -19,14 +19,15 @@ export function createLine(params: {
   oldLineNumber?: number;
   newLineNumber?: number;
 }): ChatFileOperationLineViewModel {
+  const { kind, newLineNumber, oldLineNumber, text } = params;
   return {
-    kind: params.kind,
-    text: params.text,
-    ...(typeof params.oldLineNumber === "number"
-      ? { oldLineNumber: params.oldLineNumber }
+    kind,
+    text,
+    ...(typeof oldLineNumber === "number"
+      ? { oldLineNumber }
       : {}),
-    ...(typeof params.newLineNumber === "number"
-      ? { newLineNumber: params.newLineNumber }
+    ...(typeof newLineNumber === "number"
+      ? { newLineNumber }
       : {}),
   };
 }
@@ -51,18 +52,19 @@ export function buildPreviewLines(params: {
   oldStartLine: number;
   newStartLine: number;
 }): ChatFileOperationLineViewModel[] {
-  return splitLines(params.text).map((line, index) =>
-    params.kind === "add"
+  const { kind, newStartLine, oldStartLine, text } = params;
+  return splitLines(text).map((line, index) =>
+    kind === "add"
       ? createLine({
           kind: "add",
           text: line,
-          newLineNumber: params.newStartLine + index,
+          newLineNumber: newStartLine + index,
         })
       : createLine({
           kind: "context",
           text: line,
-          oldLineNumber: params.oldStartLine + index,
-          newLineNumber: params.newStartLine + index,
+          oldLineNumber: oldStartLine + index,
+          newLineNumber: newStartLine + index,
         }),
   );
 }
@@ -73,10 +75,11 @@ function buildFallbackDiffLines(params: {
   oldStartLine?: number;
   newStartLine?: number;
 }): ChatFileOperationLineViewModel[] {
-  let oldLineNumber = params.oldStartLine;
-  let newLineNumber = params.newStartLine;
+  const { afterLines, beforeLines, newStartLine, oldStartLine } = params;
+  let oldLineNumber = oldStartLine;
+  let newLineNumber = newStartLine;
   return [
-    ...params.beforeLines.map((line) => {
+    ...beforeLines.map((line) => {
       const nextLine = createLine({
         kind: "remove",
         text: line,
@@ -85,7 +88,7 @@ function buildFallbackDiffLines(params: {
       oldLineNumber = incrementLineNumber(oldLineNumber);
       return nextLine;
     }),
-    ...params.afterLines.map((line) => {
+    ...afterLines.map((line) => {
       const nextLine = createLine({
         kind: "add",
         text: line,
@@ -101,22 +104,23 @@ function buildLcsMatrix(params: {
   beforeLines: string[];
   afterLines: string[];
 }): number[][] {
+  const { afterLines, beforeLines } = params;
   const matrix: number[][] = Array.from(
-    { length: params.beforeLines.length + 1 },
-    () => Array.from({ length: params.afterLines.length + 1 }, () => 0),
+    { length: beforeLines.length + 1 },
+    () => Array.from({ length: afterLines.length + 1 }, () => 0),
   );
   for (
-    let beforeIndex = params.beforeLines.length - 1;
+    let beforeIndex = beforeLines.length - 1;
     beforeIndex >= 0;
     beforeIndex -= 1
   ) {
     for (
-      let afterIndex = params.afterLines.length - 1;
+      let afterIndex = afterLines.length - 1;
       afterIndex >= 0;
       afterIndex -= 1
     ) {
       matrix[beforeIndex]![afterIndex] =
-        params.beforeLines[beforeIndex] === params.afterLines[afterIndex]
+        beforeLines[beforeIndex] === afterLines[afterIndex]
           ? (matrix[beforeIndex + 1]![afterIndex + 1] ?? 0) + 1
           : Math.max(
               matrix[beforeIndex + 1]![afterIndex] ?? 0,
@@ -136,33 +140,36 @@ function appendRemainingDiffLines(params: {
   oldLineNumber?: number;
   newLineNumber?: number;
 }): void {
+  const { afterIndex, afterLines, beforeIndex, beforeLines, lines, newLineNumber: initialNewLineNumber, oldLineNumber: initialOldLineNumber } = params;
+  let oldLineNumber = initialOldLineNumber;
+  let newLineNumber = initialNewLineNumber;
   for (
-    let index = params.beforeIndex;
-    index < params.beforeLines.length;
+    let index = beforeIndex;
+    index < beforeLines.length;
     index += 1
   ) {
-    params.lines.push(
+    lines.push(
       createLine({
         kind: "remove",
-        text: params.beforeLines[index] ?? "",
-        oldLineNumber: params.oldLineNumber,
+        text: beforeLines[index] ?? "",
+        oldLineNumber,
       }),
     );
-    params.oldLineNumber = incrementLineNumber(params.oldLineNumber);
+    oldLineNumber = incrementLineNumber(oldLineNumber);
   }
   for (
-    let index = params.afterIndex;
-    index < params.afterLines.length;
+    let index = afterIndex;
+    index < afterLines.length;
     index += 1
   ) {
-    params.lines.push(
+    lines.push(
       createLine({
         kind: "add",
-        text: params.afterLines[index] ?? "",
-        newLineNumber: params.newLineNumber,
+        text: afterLines[index] ?? "",
+        newLineNumber,
       }),
     );
-    params.newLineNumber = incrementLineNumber(params.newLineNumber);
+    newLineNumber = incrementLineNumber(newLineNumber);
   }
 }
 
@@ -172,14 +179,15 @@ export function buildLineDiff(params: {
   oldStartLine?: number;
   newStartLine?: number;
 }): ChatFileOperationLineViewModel[] {
-  const beforeLines = splitLines(params.beforeText);
-  const afterLines = splitLines(params.afterText);
+  const { afterText, beforeText, newStartLine, oldStartLine } = params;
+  const beforeLines = splitLines(beforeText);
+  const afterLines = splitLines(afterText);
   if (beforeLines.length * afterLines.length > MAX_DIFF_MATRIX_CELLS) {
     return buildFallbackDiffLines({
       beforeLines,
       afterLines,
-      oldStartLine: params.oldStartLine,
-      newStartLine: params.newStartLine,
+      oldStartLine,
+      newStartLine,
     });
   }
 
@@ -190,8 +198,8 @@ export function buildLineDiff(params: {
   const lines: ChatFileOperationLineViewModel[] = [];
   let beforeIndex = 0;
   let afterIndex = 0;
-  let oldLineNumber = params.oldStartLine;
-  let newLineNumber = params.newStartLine;
+  let oldLineNumber = oldStartLine;
+  let newLineNumber = newStartLine;
   while (beforeIndex < beforeLines.length && afterIndex < afterLines.length) {
     if (beforeLines[beforeIndex] === afterLines[afterIndex]) {
       lines.push(

package/src/features/chat/features/message/utils/file-operation/parsed-block.utils.ts

@@ -20,10 +20,11 @@ export function buildCaption(params: {
   operation?: string | null;
   lines: ChatFileOperationLineViewModel[];
 }): string | undefined {
-  const additions = params.lines.filter((line) => line.kind === "add").length;
-  const deletions = params.lines.filter((line) => line.kind === "remove").length;
+  const { lines, operation } = params;
+  const additions = lines.filter((line) => line.kind === "add").length;
+  const deletions = lines.filter((line) => line.kind === "remove").length;
   const parts: string[] = [];
-  const normalizedOperation = params.operation?.trim().toLowerCase() ?? "";
+  const normalizedOperation = operation?.trim().toLowerCase() ?? "";
   if (normalizedOperation && normalizedOperation !== "update") {
     parts.push(normalizedOperation);
   }
@@ -46,20 +47,21 @@ export function readDefaultDiffStartLines(params: {
   oldStartLine?: number;
   newStartLine?: number;
 } {
-  const normalizedOperation = params.operation?.trim().toLowerCase() ?? "";
+  const { afterText, beforeText, newStartLine: rawNewStartLine, oldStartLine: rawOldStartLine, operation } = params;
+  const normalizedOperation = operation?.trim().toLowerCase() ?? "";
   const oldStartLine =
-    typeof params.oldStartLine === "number"
-      ? params.oldStartLine
+    typeof rawOldStartLine === "number"
+      ? rawOldStartLine
       : (normalizedOperation === "delete" ||
             normalizedOperation === "remove") &&
-          params.beforeText != null
+          beforeText != null
         ? 1
         : undefined;
   const newStartLine =
-    typeof params.newStartLine === "number"
-      ? params.newStartLine
+    typeof rawNewStartLine === "number"
+      ? rawNewStartLine
       : (normalizedOperation === "write" || normalizedOperation === "add") &&
-          params.afterText != null
+          afterText != null
         ? 1
         : undefined;
   return { oldStartLine, newStartLine };
@@ -83,16 +85,17 @@ export function buildParsedPatchBlock(params: {
   operation: string | null;
   lines: ChatFileOperationLineViewModel[];
 }): ParsedBlock {
-  const limited = limitLines(params.lines);
+  const { lines, operation, path } = params;
+  const limited = limitLines(lines);
   return {
-    path: params.path,
+    path,
     display: "diff",
     caption: buildCaption({
-      operation: params.operation,
-      lines: params.lines,
+      operation,
+      lines,
     }),
     lines: limited.lines,
-    ...(limited.truncated ? { fullLines: params.lines } : {}),
+    ...(limited.truncated ? { fullLines: lines } : {}),
     truncated: limited.truncated,
   };
 }

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

@@ -2,6 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ChatSessionProjectBadge } from '@/features/chat/features/session/components/session-header/chat-session-project-badge';
+import { createPopoverAvailableHeightLimit } from '@/shared/components/ui/popover';
 
 const mocks = vi.hoisted(() => ({
   updateSessionProject: vi.fn(),
@@ -15,6 +16,17 @@ vi.mock('@/features/chat/features/session/components/session-header/chat-session
   ChatSessionProjectDialog: () => null,
 }));
 
+function renderProjectBadge() {
+  return render(
+    <ChatSessionProjectBadge
+      sessionKey="session-1"
+      projectName="project-alpha"
+      projectRoot="/tmp/project-alpha"
+      persistToServer
+    />
+  );
+}
+
 describe('ChatSessionProjectBadge', () => {
   beforeEach(() => {
     mocks.updateSessionProject.mockReset();
@@ -24,31 +36,26 @@ describe('ChatSessionProjectBadge', () => {
   it('shows project actions inside the badge popover', async () => {
     const user = userEvent.setup();
 
-    render(
-      <ChatSessionProjectBadge
-        sessionKey="session-1"
-        projectName="project-alpha"
-        projectRoot="/tmp/project-alpha"
-        persistToServer
-      />
-    );
+    renderProjectBadge();
 
     await user.click(screen.getByRole('button', { name: 'Set Project Directory' }));
 
     expect(screen.getAllByText('Set Project Directory').length).toBeGreaterThan(0);
     expect(screen.getByText('Clear Project Directory')).toBeTruthy();
-    expect(screen.getByText('/tmp/project-alpha')).toBeTruthy();
+    const projectRoot = screen.getByText('/tmp/project-alpha');
+    expect(projectRoot).toBeTruthy();
+
+    const boundedPopover = projectRoot.closest('[style*="max-height"]') as HTMLElement | null;
+    expect(boundedPopover?.style.maxHeight).toBe(
+      createPopoverAvailableHeightLimit('18rem')
+    );
+    expect(boundedPopover?.style.maxHeight).toContain('max(0px');
+    expect(boundedPopover?.style.maxHeight).toContain('100vh');
+    expect(boundedPopover?.style.maxHeight).toContain('2rem');
   });
 
   it('uses the neutral header tag styling instead of a highlighted accent color', () => {
-    render(
-      <ChatSessionProjectBadge
-        sessionKey="session-1"
-        projectName="project-alpha"
-        projectRoot="/tmp/project-alpha"
-        persistToServer
-      />
-    );
+    renderProjectBadge();
 
     const trigger = screen.getByRole('button', { name: 'Set Project Directory' });
     expect(trigger.className).toContain('border-gray-200');
@@ -59,14 +66,7 @@ describe('ChatSessionProjectBadge', () => {
   it('clears the current project from the badge popover', async () => {
     const user = userEvent.setup();
 
-    render(
-      <ChatSessionProjectBadge
-        sessionKey="session-1"
-        projectName="project-alpha"
-        projectRoot="/tmp/project-alpha"
-        persistToServer
-      />
-    );
+    renderProjectBadge();
 
     await user.click(screen.getByRole('button', { name: 'Set Project Directory' }));
     await user.click(screen.getByText('Clear Project Directory'));

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-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/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");
+  });
+});