@nextclaw/ui 0.14.4 → 0.15.0

package/src/app/styles/design-system.css

@@ -6,6 +6,8 @@
 
 @layer base {
    :root {
+      color-scheme: light;
+
       /* ========================================
        BRAND COLORS (Natural Olive)
        ======================================== */
@@ -200,10 +202,11 @@
       --z-dropdown: 100;
       --z-sticky: 200;
       --z-fixed: 300;
-      --z-modal-backdrop: 400;
-      --z-modal: 500;
-      --z-popover: 600;
-      --z-tooltip: 700;
+      --z-floating-panel: 9999;
+      --z-modal-backdrop: 10000;
+      --z-modal: 10050;
+      --z-popover: 10100;
+      --z-tooltip: 10150;
    }
 }
 
@@ -569,6 +572,90 @@
    }
 }
 
+
+@layer base {
+   :root[data-theme="night"] {
+      color-scheme: dark;
+
+      /* ========================================
+       BRAND COLORS (Night Moss)
+       ======================================== */
+      --brand-50: 148 36% 91%;
+      --brand-100: 148 34% 84%;
+      --brand-200: 149 32% 72%;
+      --brand-300: 149 33% 60%;
+      --brand-400: 150 36% 52%;
+      --brand-500: 150 42% 46%;
+      --brand-600: 150 46% 38%;
+      --brand-700: 151 48% 30%;
+      --brand-800: 152 48% 22%;
+      --brand-900: 153 46% 15%;
+
+      /* ========================================
+       NEUTRAL COLORS (Deep Workbench)
+       ======================================== */
+      --gray-50: 220 18% 8%;
+      --gray-100: 220 16% 11%;
+      --gray-200: 219 14% 16%;
+      --gray-300: 218 12% 24%;
+      --gray-400: 215 10% 46%;
+      --gray-500: 213 12% 62%;
+      --gray-600: 212 16% 74%;
+      --gray-700: 43 22% 82%;
+      --gray-800: 44 32% 90%;
+      --gray-900: 44 40% 96%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-400);
+      --primary-hover: var(--brand-300);
+      --primary-active: var(--brand-200);
+      --primary-foreground: 220 18% 8%;
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: 151 32% 18%;
+      --accent-foreground: 148 34% 84%;
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --destructive: 0 70% 52%;
+      --destructive-foreground: 0 0% 100%;
+      --success: 150 46% 44%;
+      --success-foreground: 220 18% 8%;
+      --warning: 42 82% 58%;
+      --warning-foreground: 220 18% 8%;
+      --card: 220 16% 10%;
+      --card-foreground: var(--gray-800);
+      --card-border: 218 13% 20%;
+      --popover: 220 16% 10%;
+      --popover-foreground: var(--gray-800);
+      --border: 218 13% 20%;
+      --border-hover: 218 12% 30%;
+      --border-active: var(--brand-400);
+      --input: 220 16% 12%;
+      --input-border: 218 13% 24%;
+      --input-focus: var(--brand-400);
+      --ring: var(--brand-400);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (deep neutral tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.28);
+      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.34), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+      --shadow-md: 0 8px 18px -10px rgb(0 0 0 / 0.42), 0 4px 8px -6px rgb(0 0 0 / 0.34);
+      --shadow-lg: 0 16px 28px -16px rgb(0 0 0 / 0.48), 0 8px 14px -10px rgb(0 0 0 / 0.38);
+      --shadow-xl: 0 24px 40px -20px rgb(0 0 0 / 0.56), 0 10px 18px -12px rgb(0 0 0 / 0.42);
+      --shadow-2xl: 0 32px 60px -24px rgb(0 0 0 / 0.65);
+      --shadow-card: 0 0 0 1px hsl(var(--border) / 0.82), 0 18px 48px -34px rgb(0 0 0 / 0.72);
+      --shadow-card-hover: 0 0 0 1px hsl(var(--border-hover) / 0.88), 0 24px 60px -36px rgb(0 0 0 / 0.82);
+   }
+}
+
 @layer base {
    :root[data-theme="probe"] {
       /* ========================================

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

@@ -0,0 +1,86 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { NcpMessage } from "@nextclaw/ncp";
+import { beforeEach, expect, it, vi } from "vitest";
+import { ChatConversationContent } from "@/features/chat/components/conversation/chat-conversation-content";
+
+const captures = vi.hoisted(() => ({
+  isAtBottom: true,
+  onScroll: vi.fn(),
+  scrollToBottom: vi.fn(),
+}));
+
+vi.mock("@nextclaw/agent-chat-ui", () => ({
+  useStickyBottomScroll: () => ({
+    isAtBottom: captures.isAtBottom,
+    onScroll: captures.onScroll,
+    scrollToBottom: captures.scrollToBottom,
+  }),
+}));
+
+vi.mock("@/features/chat/features/message/components/chat-message-list.container", () => ({
+  ChatMessageListContainer: () => <div data-testid="chat-message-list" />,
+}));
+
+vi.mock("@/shared/lib/i18n", () => ({
+  t: (key: string) => key,
+}));
+
+const messages = [
+  {
+    id: "message-1",
+    sessionId: "session-1",
+    role: "user",
+    status: "final",
+    timestamp: "2026-07-04T10:00:00.000Z",
+    parts: [{ type: "text", text: "hello" }],
+  },
+] as unknown as readonly NcpMessage[];
+
+function renderContent(options: { bottomSlot?: React.ReactNode } = {}) {
+  return render(
+    <ChatConversationContent
+      bottomSlot={options.bottomSlot}
+      isAwaitingAssistantOutput={false}
+      isHistoryLoading={false}
+      isSending={false}
+      messages={messages}
+      sessionKey="session-1"
+      showWelcome={false}
+    />,
+  );
+}
+
+beforeEach(() => {
+  captures.isAtBottom = true;
+  captures.onScroll.mockReset();
+  captures.scrollToBottom.mockReset();
+});
+
+it("hides the scroll-to-bottom action while the conversation is already at the bottom", () => {
+  renderContent();
+
+  expect(screen.queryByRole("button", { name: "chatScrollToBottom" })).toBeNull();
+});
+
+it("scrolls to the latest message when the user clicks the floating action", async () => {
+  const user = userEvent.setup();
+  captures.isAtBottom = false;
+
+  renderContent();
+  await user.click(screen.getByRole("button", { name: "chatScrollToBottom" }));
+
+  expect(captures.scrollToBottom).toHaveBeenCalledOnce();
+});
+
+it("renders bottom slot after the message list", () => {
+  renderContent({
+    bottomSlot: <div data-testid="conversation-bottom-slot">Run failed</div>,
+  });
+
+  const messageList = screen.getByTestId("chat-message-list");
+  const bottomSlot = screen.getByTestId("conversation-bottom-slot");
+  expect(
+    messageList.compareDocumentPosition(bottomSlot) & Node.DOCUMENT_POSITION_FOLLOWING,
+  ).toBeTruthy();
+});

package/src/features/chat/components/conversation/chat-conversation-content.tsx

@@ -1,9 +1,13 @@
 import { useRef, type ReactNode } from "react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import type { NcpMessage } from "@nextclaw/ncp";
+import { ArrowDown } from "lucide-react";
 import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { t } from "@/shared/lib/i18n";
 
 type ChatConversationContentProps = {
+  bottomSlot?: ReactNode;
   isAwaitingAssistantOutput: boolean;
   isHistoryLoading: boolean;
   isSending: boolean;
@@ -14,6 +18,7 @@ type ChatConversationContentProps = {
 };
 
 export function ChatConversationContent({
+  bottomSlot,
   isAwaitingAssistantOutput,
   isHistoryLoading,
   isSending,
@@ -28,7 +33,11 @@ export function ChatConversationContent({
     messages.length === 0 &&
     !isSending &&
     !isAwaitingAssistantOutput;
-  const { onScroll } = useStickyBottomScroll({
+  const {
+    isAtBottom,
+    onScroll,
+    scrollToBottom,
+  } = useStickyBottomScroll({
     scrollRef: threadRef,
     resetKey: sessionKey,
     isLoading: isHistoryLoading,
@@ -36,24 +45,45 @@ export function ChatConversationContent({
     contentVersion: messages[messages.length - 1] ?? null,
   });
   const hasMessages = messages.length > 0;
+  const showScrollToBottom = hasMessages && !showWelcome && !isAtBottom;
 
   return (
-    <div
-      ref={threadRef}
-      onScroll={onScroll}
-      data-chat-scroll-container="true"
-      className="flex-1 min-h-0 overflow-y-auto custom-scrollbar"
-    >
-      {showWelcome ? (
-        welcomeSlot ?? null
-      ) : hideEmptyHint || !hasMessages ? null : (
-        <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
-          <ChatMessageListContainer
-            messages={messages}
-            isSending={hasMessages && isSending && isAwaitingAssistantOutput}
-          />
-        </div>
-      )}
+    <div className="relative min-h-0 flex-1">
+      <div
+        ref={threadRef}
+        onScroll={onScroll}
+        data-chat-scroll-container="true"
+        className="h-full overflow-y-auto custom-scrollbar"
+      >
+        {showWelcome ? (
+          welcomeSlot ?? null
+        ) : (
+          <>
+            {hideEmptyHint || !hasMessages ? null : (
+              <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 py-4 sm:px-6 sm:py-5">
+                <ChatMessageListContainer
+                  messages={messages}
+                  isSending={hasMessages && isSending && isAwaitingAssistantOutput}
+                />
+              </div>
+            )}
+            {bottomSlot ? (
+              <div className="mx-auto w-full max-w-[min(1120px,100%)] px-4 pb-4 sm:px-6 sm:pb-5">
+                {bottomSlot}
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+      {showScrollToBottom ? (
+        <IconActionButton
+          icon={<ArrowDown className="h-4 w-4" />}
+          label={t("chatScrollToBottom")}
+          onClick={scrollToBottom}
+          tooltipSide="top"
+          className="absolute bottom-4 left-1/2 z-10 h-9 w-9 -translate-x-1/2 rounded-full border border-border bg-background/90 text-foreground shadow-lg backdrop-blur hover:bg-accent hover:text-accent-foreground"
+        />
+      ) : null}
     </div>
   );
 }

package/src/features/chat/components/layout/__tests__/chat-sidebar-read-state.test.tsx

@@ -188,6 +188,13 @@ describe("ChatSidebar read state sync", () => {
   it("collapses the desktop sidebar into accessible icon actions", () => {
     const { container } = renderReadStateSidebar(createTestQueryClient());
 
+    expect(
+      screen.getByText("Sessions").parentElement?.nextElementSibling?.className,
+    ).toContain("[mask-image:linear-gradient");
+    expect(
+      screen.getByRole("button", { name: "Settings menu" }).parentElement
+        ?.className,
+    ).not.toContain("border-t");
     fireEvent.click(screen.getByRole("button", { name: "Collapse sidebar" }));
 
     const persistedState = JSON.parse(

package/src/features/chat/components/layout/chat-sidebar-desktop-layout.tsx

@@ -29,6 +29,7 @@ import {
   SIDEBAR_RAIL_PADDING_X_CLASS,
   SIDEBAR_RAIL_STACK_CLASS,
   SIDEBAR_RAIL_SURFACE_CLASS,
+  SIDEBAR_SCROLL_EDGE_FADE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
 const navItems = [
@@ -67,9 +68,7 @@ export function ChatSidebarDesktopHeader({
   isCollapsed: boolean;
 }) {
   const isWindowsHost = isWindowsDesktopHost();
-  const shouldReserveMacWindowControls =
-    typeof window !== "undefined" &&
-    window.nextclawDesktop?.platform === "darwin";
+  const shouldReserveMacWindowControls = typeof window !== "undefined" && window.nextclawDesktop?.platform === "darwin";
 
   return (
     <div
@@ -170,7 +169,12 @@ export function ChatSidebarSessionArea({
         />
       </div>
 
-      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
+      <div
+        className={cn(
+          "custom-scrollbar min-h-0 flex-1 overflow-y-auto px-3 pb-7 pt-2",
+          SIDEBAR_SCROLL_EDGE_FADE_CLASS,
+        )}
+      >
         <ChatSidebarSessionList
           isLoading={isLoading}
           isProjectFirstView={isProjectFirstView}
@@ -221,7 +225,7 @@ export function ChatSidebarDesktopFooter({
   return (
     <div
       className={cn(
-        "border-t border-border/70 py-3",
+        "py-3",
         isCollapsed
           ? cn("flex justify-center", SIDEBAR_RAIL_PADDING_X_CLASS)
           : "px-3",

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -115,7 +115,7 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             aria-label={t("settingsMenu")}
-            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-muted-foreground transition-all duration-base hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
           >
             <Settings className="h-4 w-4 shrink-0 text-muted-foreground/70" />
             <span className="min-w-0 flex-1 text-left">{t("settings")}</span>
@@ -134,7 +134,7 @@ export function ChatSidebarUtilityMenu({
           <NavLink
             to="/settings"
             onClick={() => onOpenChange(false)}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
           >
             <Settings className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("settings")}</span>
@@ -142,7 +142,7 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             onClick={handleOpenDocs}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
           >
             <BookOpen className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("docBrowserHelp")}</span>
@@ -150,7 +150,7 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             onClick={handleOpenApps}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900"
           >
             <Boxes className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("appsTitle")}</span>
@@ -212,7 +212,7 @@ function ChatSidebarUtilitySelect<Value extends string>({
     >
       <SelectTrigger
         aria-label={label}
-        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-foreground shadow-none hover:bg-accent hover:text-accent-foreground focus:ring-0"
+        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-foreground shadow-none hover:bg-gray-200/60 hover:text-gray-900 focus:ring-0"
         indicator={<ChevronRight className="h-4 w-4 text-muted-foreground/70" />}
       >
         <div className="flex min-w-0 items-center gap-2.5">

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

@@ -7,6 +7,7 @@ import { SessionConversationArea } from '@/features/chat/features/conversation/c
 
 const mocks = vi.hoisted(() => {
   const inputRenderSpy = vi.fn();
+  const controllerParamsSpy = vi.fn();
   const inputActions = {
     update: vi.fn(),
     syncComposer: vi.fn(),
@@ -47,7 +48,14 @@ const mocks = vi.hoisted(() => {
     isProviderStateResolved: true,
     isSkillsLoading: false,
     modelOptions: [],
-    selectedSession: null,
+    selectedSession: null as null | {
+      activityPreview?: {
+        state: 'running' | 'completed' | 'failed' | 'idle';
+        statusText?: string;
+        replyText?: string;
+      };
+      status?: string;
+    },
     selectedSessionKey: null,
     sessionTypeState: {
       sessionTypeOptions: [],
@@ -62,8 +70,11 @@ const mocks = vi.hoisted(() => {
   };
   const controller = {
     canStopGeneration: true,
+    deleteQueuedInput: vi.fn(),
+    editQueuedInput: vi.fn(),
     hasSendableDraft: true,
     isSending: true,
+    queuedInputs: [],
     send: vi.fn(),
     sendDisabled: true,
     stop: vi.fn(),
@@ -87,6 +98,7 @@ const mocks = vi.hoisted(() => {
   return {
     agent,
     controller,
+    controllerParamsSpy,
     inputActions,
     inputQuery,
     inputRenderSpy,
@@ -120,16 +132,19 @@ vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
 
 vi.mock('@/features/chat/components/conversation/chat-conversation-content', () => ({
   ChatConversationContent: ({
+    bottomSlot,
     messages,
     showWelcome,
     welcomeSlot,
   }: {
+    bottomSlot?: ReactNode;
     messages: readonly unknown[];
     showWelcome: boolean;
     welcomeSlot?: ReactNode;
   }) => (
     <div data-testid="conversation-content" data-show-welcome={String(showWelcome)}>
       {showWelcome ? welcomeSlot : <div data-testid="message-count">{messages.length}</div>}
+      {bottomSlot ? <div data-testid="conversation-bottom-slot">{bottomSlot}</div> : null}
     </div>
   ),
 }));
@@ -162,7 +177,10 @@ vi.mock('@/features/chat/features/conversation/hooks/use-session-conversation-in
 }));
 
 vi.mock('@/features/chat/features/conversation/hooks/use-session-conversation-controller', () => ({
-  useSessionConversationController: () => mocks.controller,
+  useSessionConversationController: (params: unknown) => {
+    mocks.controllerParamsSpy(params);
+    return mocks.controller;
+  },
 }));
 
 vi.mock('@/features/chat/stores/chat-session-list.store', () => ({
@@ -197,6 +215,21 @@ describe('SessionConversationArea input boundary', () => {
     mocks.agent.isRunning = true;
     mocks.agent.isSending = true;
     mocks.agent.snapshot.contextWindow = null;
+    mocks.inputQuery.selectedSession = null;
+  });
+
+  it('passes running state without treating an active run as a send request in flight', () => {
+    mocks.agent.isRunning = true;
+    mocks.agent.isSending = false;
+
+    renderArea('session-1');
+
+    expect(mocks.controllerParamsSpy).toHaveBeenCalled();
+    const params = mocks.controllerParamsSpy.mock.calls[0]?.[0] as {
+      agent: { isRunning: boolean; isSending: boolean };
+    };
+    expect(params.agent.isRunning).toBe(true);
+    expect(params.agent.isSending).toBe(false);
   });
 
   it('keeps the composer input subtree stable when only streamed messages change', () => {
@@ -222,4 +255,20 @@ describe('SessionConversationArea input boundary', () => {
     expect(screen.getByTestId('welcome')).toBeTruthy();
     expect(screen.getByTestId('conversation-input')).toBeTruthy();
   });
+
+  it('surfaces selected-session failure previews at the conversation bottom', () => {
+    mocks.inputQuery.selectedSession = {
+      activityPreview: {
+        state: 'failed',
+        statusText: '运行出错：Invalid API Key',
+      },
+      status: 'idle',
+    };
+
+    renderArea('session-1');
+
+    expect(screen.getByTestId('conversation-bottom-slot')).toBeTruthy();
+    expect(screen.getByText(/出错了|Something went wrong/)).toBeTruthy();
+    expect(screen.getByText('运行出错：Invalid API Key')).toBeTruthy();
+  });
 });