@nextclaw/ui 0.15.20 → 0.15.22

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

@@ -12,14 +12,17 @@ import { t, type I18nLanguage } from "@/shared/lib/i18n";
 import type { UiTheme } from "@/shared/lib/theme";
 import { SidebarNavLinkItem } from "@/app/components/layout/sidebar-items";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import {
   AlarmClock,
   Bot,
   BrainCircuit,
+  Inbox,
   PanelLeftClose,
   PanelLeftOpen,
-  Plus,
+  FolderPlus,
 } from "lucide-react";
+import { useInboxUnreadCount } from "@/features/inbox";
 import { ChatSidebarSessionList } from "@/features/chat/features/session/components/chat-sidebar-session-list";
 import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-sidebar-utility-menu";
 import { isWindowsDesktopHost } from "@/platforms/desktop";
@@ -30,10 +33,14 @@ 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 = [
+  {
+    target: "/inbox",
+    label: () => t("inboxTitle"),
+    icon: Inbox,
+  },
   {
     target: "/cron",
     label: () => t("chatSidebarScheduledTasks"),
@@ -79,7 +86,7 @@ export function ChatSidebarDesktopHeader({
           ? "justify-center px-2 py-1.5"
           : isWindowsHost
             ? "justify-end px-3 py-1.5"
-            : "gap-2 px-5 py-2",
+            : "gap-2 px-4 py-2",
         isCollapsed && shouldReserveMacWindowControls ? "pt-8" : null,
       )}
     >
@@ -99,33 +106,31 @@ export function ChatSidebarDesktopNav({
 }: {
   isCollapsed: boolean;
 }) {
+  const unreadCount = useInboxUnreadCount();
   return (
-    <>
-      <div className={cn("pb-2", isCollapsed ? "px-0" : "px-3")}>
-        <ul className={isCollapsed ? SIDEBAR_RAIL_STACK_CLASS : "space-y-0.5"}>
-          {navItems.map((item) => (
-            <li
-              key={item.target}
-              className={isCollapsed ? "flex justify-center" : undefined}
-            >
-              <SidebarNavLinkItem
-                to={item.target}
-                label={item.label()}
-                icon={item.icon}
-                density="compact"
-                collapsed={isCollapsed}
-              />
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div
-        className={cn(
-          "border-t border-border/70",
-          isCollapsed ? "mx-2 my-1.5" : "mx-4",
-        )}
-      />
-    </>
+    <div className={cn("pb-1", isCollapsed ? "px-0" : "px-3")}>
+      <ul className={isCollapsed ? SIDEBAR_RAIL_STACK_CLASS : "space-y-0.5"}>
+        {navItems.map((item) => (
+          <li
+            key={item.target}
+            className={isCollapsed ? "flex justify-center" : undefined}
+          >
+            <SidebarNavLinkItem
+              to={item.target}
+              label={item.label()}
+              icon={item.icon}
+              density="compact"
+              collapsed={isCollapsed}
+              indicator={item.target === "/inbox" && unreadCount > 0}
+              trailing={item.target === "/inbox" && unreadCount > 0
+                ? unreadCount > 99 ? "99+" : unreadCount
+                : undefined}
+              className={isCollapsed ? undefined : "rounded-lg px-2.5 py-1.5"}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
 
@@ -160,14 +165,11 @@ export function ChatSidebarSessionArea({
 
   return (
     <>
-      <div className="flex items-center justify-between px-5 pb-2 pt-3">
-        <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
-          {t("chatSidebarTaskRecords")}
-        </div>
-        <div className="flex items-center gap-1">
+      <div className="flex items-center justify-end px-4 pb-1 pt-2">
+        <div className="flex h-7 items-center gap-1.5">
           {isProjectFirstView ? (
             <IconActionButton
-              icon={<Plus className="h-3.5 w-3.5" />}
+              icon={<FolderPlus className="h-3.5 w-3.5" />}
               label={t("chatProjectAdd")}
               onClick={onAddProject}
             />
@@ -181,8 +183,8 @@ export function ChatSidebarSessionArea({
 
       <div
         className={cn(
-          "custom-scrollbar min-h-0 flex-1 overflow-y-auto px-3 pb-7 pt-2",
-          SIDEBAR_SCROLL_EDGE_FADE_CLASS,
+          "custom-scrollbar min-h-0 flex-1 overflow-y-auto px-3 pb-4 pt-1",
+          SCROLL_BOTTOM_EDGE_FADE_CLASS,
         )}
       >
         <ChatSidebarSessionList
@@ -234,7 +236,7 @@ export function ChatSidebarDesktopFooter({
   return (
     <div
       className={cn(
-        "py-3",
+        "py-2",
         isCollapsed
           ? cn("flex justify-center", SIDEBAR_RAIL_PADDING_X_CLASS)
           : "px-3",

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

@@ -1,4 +1,4 @@
-import { Button, type ButtonProps } from "@/shared/components/ui/button";
+import { Button } from "@/shared/components/ui/button";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { Input } from "@/shared/components/ui/input";
 import {
@@ -20,51 +20,6 @@ import {
 } from "@/app/components/layout/sidebar-rail.styles";
 
 type SessionTypeOption = ChatSessionTypeOption;
-type NewSessionActionStyleVariant =
-  | "neutralSurface"
-  | "brandSoft"
-  | "brandTextSurface"
-  | "brandSolid";
-
-const NEW_SESSION_ACTION_STYLE_VARIANT: NewSessionActionStyleVariant =
-  "brandSoft";
-
-const NEW_SESSION_ACTION_STYLE_CLASSES: Record<
-  NewSessionActionStyleVariant,
-  {
-    leftVariant: ButtonProps["variant"];
-    leftClassName: string;
-    rightClassName: string;
-  }
-> = {
-  neutralSurface: {
-    leftVariant: "ghost",
-    leftClassName:
-      "bg-card text-foreground shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground hover:shadow-sm active:bg-accent",
-    rightClassName:
-      "bg-card text-muted-foreground shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground hover:shadow-sm active:bg-accent",
-  },
-  brandSoft: {
-    leftVariant: "ghost",
-    leftClassName:
-      "bg-primary/10 text-primary shadow-none ring-1 ring-primary/10 transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
-    rightClassName:
-      "bg-primary/10 text-primary shadow-none ring-1 ring-primary/10 transition-[background-color,color,box-shadow] hover:bg-primary/15 hover:text-primary-700 hover:shadow-sm active:bg-primary/20",
-  },
-  brandTextSurface: {
-    leftVariant: "ghost",
-    leftClassName:
-      "bg-card text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
-    rightClassName:
-      "bg-card text-primary shadow-none transition-[background-color,color,box-shadow] hover:bg-accent hover:text-primary-700 hover:shadow-sm active:bg-primary/15",
-  },
-  brandSolid: {
-    leftVariant: "primary",
-    leftClassName: "",
-    rightClassName:
-      "bg-primary text-primary-foreground shadow-sm hover:bg-primary-600 hover:text-primary-foreground active:bg-primary-700",
-  },
-};
 
 type ChatSidebarToolbarProps = {
   query: string;
@@ -117,8 +72,6 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
     collapsed = false,
   } = props;
   const supportsSessionTypeSwitch = sessionTypeOptions.length > 1;
-  const actionStyle =
-    NEW_SESSION_ACTION_STYLE_CLASSES[NEW_SESSION_ACTION_STYLE_VARIANT];
 
   if (collapsed) {
     return (
@@ -183,21 +136,20 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
 
   return (
     <>
-      <div className="px-4 pb-3">
-        <div className="flex items-center gap-2">
+      <div className="px-4 pb-2">
+        <div className="flex overflow-hidden rounded-lg bg-primary/10 text-primary ring-1 ring-primary/10">
           <Button
-            variant={actionStyle.leftVariant}
+            variant="ghost"
             className={cn(
-              "min-w-0 rounded-xl",
-              actionStyle.leftClassName,
-              supportsSessionTypeSwitch ? "flex-1 rounded-r-md" : "w-full",
+              "min-w-0 rounded-none bg-transparent px-3 text-primary shadow-none hover:bg-primary/10 hover:text-primary-700 active:bg-primary/15",
+              supportsSessionTypeSwitch ? "flex-1" : "w-full",
             )}
             onClick={() => {
               onCreateMenuOpenChange(false);
               onCreateSession(selectedNewSessionType);
             }}
           >
-            <Plus className="mr-2 h-4 w-4" />
+            <Plus className="mr-1.5 h-4 w-4" />
             {t("chatSidebarNewTask")}
           </Button>
           {supportsSessionTypeSwitch ? (
@@ -208,19 +160,16 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
               <PopoverTrigger asChild>
                 <IconActionButton
                   icon={
-                    <span className="inline-flex items-center gap-0.5">
+                    <span className="inline-flex items-center gap-1">
                       <SessionTypeTriggerIcon
                         option={selectedNewSessionTypeOption}
                       />
-                      <ChevronDown className="h-3 w-3 opacity-60" />
+                      <ChevronDown className="h-3 w-3 opacity-50" />
                     </span>
                   }
                   label={t("chatSessionTypeLabel")}
                   tooltip={t("chatSessionTypeLabel")}
-                  className={cn(
-                    "h-9 w-12 shrink-0 rounded-xl rounded-l-md",
-                    actionStyle.rightClassName,
-                  )}
+                  className="h-9 w-12 shrink-0 rounded-none border-l border-primary/10 bg-transparent text-primary shadow-none hover:bg-primary/10 hover:text-primary-700 active:bg-primary/15"
                 />
               </PopoverTrigger>
               <ChatPopoverContent
@@ -241,14 +190,14 @@ export function ChatSidebarDesktopToolbar(props: ChatSidebarToolbarProps) {
         </div>
       </div>
 
-      <div className="px-4 pb-3">
+      <div className="px-4 pb-2">
         <div className="relative">
-          <Search className="pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-muted-foreground/70" />
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
           <Input
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
             placeholder={t("chatSidebarSearchPlaceholder")}
-            className="h-9 rounded-lg pl-8 text-xs"
+            className="h-8 rounded-lg border-transparent bg-background/55 pl-8 text-xs shadow-none hover:bg-background/75"
           />
         </div>
       </div>

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

@@ -102,13 +102,10 @@ 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-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-background/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <Settings className="h-4 w-4 shrink-0 text-muted-foreground/70" />
             <span className="min-w-0 flex-1 text-left">{t("settings")}</span>
-            <span className="max-w-[112px] truncate text-[13px] text-muted-foreground">
-              {currentThemeLabel} / {currentLanguageLabel}
-            </span>
           </button>
         </PopoverTrigger>
       )}

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

@@ -389,7 +389,7 @@ describe("SessionConversationArea input boundary", () => {
 
     expect(screen.getByTestId("conversation-bottom-slot")).toBeTruthy();
     expect(screen.getByText(/出错了|Something went wrong/)).toBeTruthy();
-    expect(screen.getByText("Run failed: Invalid API Key")).toBeTruthy();
+    expect(screen.getByText(/Failed · Invalid API Key|失败 · Invalid API Key/)).toBeTruthy();
   });
 
   it("does not surface user-cancelled previews as conversation errors", () => {

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

@@ -3,9 +3,11 @@ import {
   useEffect,
   useMemo,
   useState,
+  type ReactElement,
   type MutableRefObject,
 } from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import {
   createChatComposerTextNode,
@@ -30,6 +32,15 @@ import { useChatMessageLayoutStore } from '@/features/chat/stores/chat-message-l
 
 const uploadNcpAssetsMock = vi.hoisted(() => vi.fn());
 
+function renderInput(input: ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>{input}</QueryClientProvider>,
+  );
+}
+
 afterEach(() => {
   useChatMessageLayoutStore.getState().setLayout('card');
 });
@@ -254,7 +265,7 @@ describe('SessionConversationInput streaming stability', () => {
     useChatMessageLayoutStore.getState().setLayout('flat');
     const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
 
-    render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
+    renderInput(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
 
     const track = document.querySelector(
       '[data-chat-conversation-track="flat"][data-chat-conversation-track-width="composer"]',
@@ -266,7 +277,7 @@ describe('SessionConversationInput streaming stability', () => {
 
   it('keeps a numbered IME candidate commit stable while streamed output rerenders the owner', async () => {
     const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
-    render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
+    renderInput(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
 
     const textbox = screen.getByRole('textbox');
     fireEvent.focus(textbox);
@@ -300,7 +311,7 @@ describe('SessionConversationInput streaming stability', () => {
     const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
     const deleteQueuedInput = vi.fn();
     const editQueuedInput = vi.fn();
-    render(
+    renderInput(
       <StreamingSessionConversationInputHarness
         controlRef={controlRef}
         controllerOverride={{
@@ -427,7 +438,7 @@ describe('SessionConversationInput attachment submit', () => {
     ]);
     const send = vi.fn<AttachmentSubmitAgentSend>(async () => createAttachmentRunHandle());
 
-    render(<AttachmentSubmitHarness send={send} />);
+    renderInput(<AttachmentSubmitHarness send={send} />);
 
     const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement | null;
     expect(fileInput).toBeTruthy();

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

@@ -13,6 +13,7 @@ import {
   resolveNcpChatSendErrorMessage,
 } from "@/features/chat/features/runtime/utils/ncp-chat-runtime-availability.utils";
 import { buildChatContextWindowIndicator } from "@/features/chat/features/session/utils/chat-context-window-indicator.utils";
+import { sessionActivityPreviewText } from "@/features/chat/features/session/utils/chat-session-display.utils";
 import { readNcpContextWindowValue } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
 import { ChatConversationWelcome } from "@/features/chat/features/welcome/components/chat-conversation-welcome";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
@@ -326,12 +327,10 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     }),
     [inputSnapshot, lastSendError],
   );
-  const sessionFailurePreview = inputQuery.selectedSession?.activityPreview;
+  const { selectedSession } = inputQuery;
   const sessionFailureMessage =
-    sessionFailurePreview?.state === "failed"
-      ? sessionFailurePreview.statusText?.trim() ||
-        sessionFailurePreview.replyText?.trim() ||
-        null
+    selectedSession?.activityPreview?.state === "failed"
+      ? sessionActivityPreviewText(selectedSession)
       : null;
   const sessionFailureSlot = sessionFailureMessage ? (
     <div className="rounded-lg border border-red-200/80 bg-red-50/80 px-3 py-2.5 shadow-sm">
@@ -348,7 +347,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     applyPromptSuggestion: inputActions.applyPromptSuggestion,
   });
   const renderInput = useCallback(
-    (surface: "default" | "embedded") => (
+    (surface: "default" | "embedded", placeholder?: string) => (
       <SessionConversationInput
         contextWindow={contextWindow}
         controller={inputController}
@@ -356,6 +355,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
         inputQuery={inputQuery}
         inputSnapshot={displayInputSnapshot}
         onContextCompactingChange={handleContextCompactingChange}
+        placeholder={placeholder}
         surface={surface}
       />
     ),
@@ -396,7 +396,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
         onLoadPreviousMessages={agent.loadPreviousMessages}
         welcomeSlot={
           <ChatConversationWelcome
-            inputSlot={renderInput("embedded")}
+            inputSlot={renderInput("embedded", t("chatWelcomeInputPlaceholder"))}
             pendingProjectRoot={inputSnapshot.pendingProjectRoot}
             pendingSessionType={inputSnapshot.pendingSessionType}
             selectedSessionTypeValue={inputSnapshot.selectedSessionType}

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -193,6 +193,7 @@ type SessionConversationInputProps = {
   readonly inputQuery: SessionConversationInputQuery;
   readonly inputSnapshot: SessionConversationInputSnapshot;
   readonly onContextCompactingChange?: (sessionId: string, isCompacting: boolean) => void;
+  readonly placeholder?: string;
   readonly surface?: 'default' | 'embedded';
 };
 
@@ -204,6 +205,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
     inputQuery,
     inputSnapshot,
     onContextCompactingChange,
+    placeholder,
     surface = 'default',
   } = props;
   const presenter = usePresenter();
@@ -277,7 +279,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
   const attachmentSupported = true;
   const textareaPlaceholder = isModelOptionsEmpty
     ? t('chatModelNoOptions')
-    : t(isMobile ? 'chatInputPlaceholderCompact' : 'chatInputPlaceholder');
+    : placeholder ?? t(isMobile ? 'chatInputPlaceholderCompact' : 'chatInputPlaceholder');
   const selectedModelOption = modelRecords.find((option) => option.value === selectedModel);
   const thinkingSupportedLevels = selectedModelOption?.thinkingCapability?.supported ?? [];
   const { handleFilesAdd, handleFileInputChange } = useSessionConversationInputAttachments({
@@ -426,6 +428,7 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
         },
       })}
       toolbar={{
+        addMenuLabel: t('chatInputAdd'),
         selects: [],
         trailingSelects: toolbarSelects,
         accessories: [
@@ -433,7 +436,6 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
             key: 'attach',
             label: t('chatInputAttach'),
             icon: 'paperclip' as const,
-            iconOnly: true,
             disabled: !attachmentSupported || inputDisabled,
             onClick: () => fileInputRef.current?.click(),
           },

package/src/features/chat/features/conversation/hooks/use-session-conversation-input-attachments.ts

@@ -46,6 +46,7 @@ export function useSessionConversationInputAttachments(params: UseSessionConvers
           insertedAttachments.map((attachment) => ({
             tokenKey: attachment.id,
             label: attachment.name,
+            previewUrl: attachment.mimeType.startsWith('image/') ? attachment.url : undefined,
           })),
         );
       }

package/src/features/chat/features/conversation/utils/session-conversation-input-toolbar.utils.ts

@@ -82,6 +82,7 @@ export function buildSessionConversationToolbarSelects(params: ToolbarSelectBuil
         favoriteModelsLabel,
         favoriteModelLabel,
         unfavoriteModelLabel,
+        manageModelsLabel: t('chatManageModels'),
         recentModelsLabel,
         allModelsLabel,
       },

package/src/features/chat/features/conversation/utils/session-queued-input.utils.ts

@@ -115,6 +115,7 @@ export function buildSessionQueuedInputComposerSnapshot(
       tokenKind: 'file',
       tokenKey: id,
       label: attachment.name,
+      previewUrl: attachment.mimeType.startsWith('image/') ? attachment.url : undefined,
     }));
   });
 

package/src/features/chat/features/input/utils/__tests__/chat-input-bar.utils.test.ts

@@ -22,6 +22,7 @@ function createModelTexts() {
     favoriteModelsLabel: 'Favorites',
     favoriteModelLabel: 'Favorite model',
     unfavoriteModelLabel: 'Remove favorite',
+    manageModelsLabel: 'Manage models and providers',
     recentModelsLabel: 'Recent',
     allModelsLabel: 'All models'
   };
@@ -262,6 +263,8 @@ describe('buildModelToolbarSelect', () => {
       value: 'minimax/MiniMax-M2.7',
       label: 'MiniMax/MiniMax-M2.7'
     });
+    expect(select.manageLabel).toBe('Manage models and providers');
+    expect(select.manageHref).toBe('/providers');
   });
 
   it('keeps the full provider/model label in shared state while exposing a compact mobile label', () => {

package/src/features/chat/features/input/utils/chat-input-bar.utils.ts

@@ -278,7 +278,6 @@ export function buildSkillPickerModel(params: {
   const recentKeySet = new Set(groupedRecentSkillValues ?? []);
   return {
     title: texts.title,
-    allGroupsLabel: texts.allSkillsLabel,
     searchPlaceholder: texts.searchPlaceholder,
     emptyLabel: texts.emptyLabel,
     loadingLabel: texts.loadingLabel,

package/src/features/chat/features/input/utils/chat-input-toolbar.utils.ts

@@ -86,6 +86,7 @@ export function buildModelToolbarSelect({
     | "favoriteModelsLabel"
     | "favoriteModelLabel"
     | "unfavoriteModelLabel"
+    | "manageModelsLabel"
     | "recentModelsLabel"
     | "allModelsLabel"
   >;
@@ -172,6 +173,8 @@ export function buildModelToolbarSelect({
           onToggle: onFavoriteToggle,
         }
       : undefined,
+    manageLabel: texts.manageModelsLabel,
+    manageHref: "/providers",
     onValueChange,
   };
 }

package/src/features/chat/features/message/utils/__tests__/chat-message-timeline.utils.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import {
+  NCP_INTERNAL_VISIBILITY_METADATA_KEY,
+  type NcpMessage,
+} from "@nextclaw/ncp";
+import { isVisibleChatMessage } from "@/features/chat/features/message/utils/chat-message-timeline.utils";
+
+const visibleMessage = {
+  id: "assistant-visible",
+  sessionId: "session-1",
+  role: "assistant",
+  status: "final",
+  timestamp: "2026-08-07T00:00:00.000Z",
+  parts: [{ type: "text", text: "visible" }],
+} satisfies NcpMessage;
+
+describe("chat message timeline visibility", () => {
+  it("hides internal and legacy silent messages", () => {
+    expect(isVisibleChatMessage({
+      ...visibleMessage,
+      metadata: { [NCP_INTERNAL_VISIBILITY_METADATA_KEY]: "hidden" },
+    })).toBe(false);
+    expect(isVisibleChatMessage({
+      ...visibleMessage,
+      parts: [{ type: "text", text: "\\n\\n<noreply/>" }],
+    })).toBe(false);
+    expect(isVisibleChatMessage(visibleMessage)).toBe(true);
+  });
+});

package/src/features/chat/features/message/utils/chat-message-timeline.utils.ts

@@ -1,4 +1,5 @@
-import type { NcpMessage } from "@nextclaw/ncp";
+import { isHiddenNcpMessage, type NcpMessage } from "@nextclaw/ncp";
+import { isSilentReplyNcpMessage } from "@nextclaw/shared";
 import type { ChatMessageViewModel } from "@nextclaw/agent-chat-ui";
 import {
   readContextCompactionTimeline,
@@ -48,6 +49,8 @@ function readInheritedSourceSessionId(message: NcpMessage): string | null {
 
 export function isVisibleChatMessage(message: NcpMessage): boolean {
   return (
+    !isHiddenNcpMessage(message) &&
+    !isSilentReplyNcpMessage(message) &&
     !readContextCompactionTimeline(message) &&
     !readInheritedSourceSessionId(message)
   );

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

@@ -63,12 +63,12 @@ function ChatSidebarSessionEditingView({
           }
         }}
         placeholder={t('sessionsLabelPlaceholder')}
-        className="h-8 rounded-lg border-gray-300 bg-white text-xs"
+        className="h-8 rounded-lg border-border bg-background text-xs"
         autoFocus
         disabled={isSaving}
       />
       <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0 text-[11px] text-gray-400 truncate">{sessionKey}</div>
+        <div className="min-w-0 truncate text-[11px] text-muted-foreground/65">{sessionKey}</div>
         <div className="flex items-center gap-1">
           <IconActionButton
             icon={<Check className="h-3.5 w-3.5" />}
@@ -134,8 +134,8 @@ function ChatSidebarSessionDisplayView({
                 className={cn(
                   'shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold leading-none',
                   active
-                    ? 'border-gray-300 bg-white/80 text-gray-700'
-                    : 'border-gray-200 bg-gray-100 text-gray-500'
+                    ? 'border-border/70 bg-background/80 text-foreground/75'
+                    : 'border-transparent bg-muted/70 text-muted-foreground'
                 )}
               >
                 {context.label}
@@ -143,12 +143,12 @@ function ChatSidebarSessionDisplayView({
             ) : null}
             {context.icon ? (
               <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-                <SessionContextIconNode icon={context.icon} className={cn('h-[13px] w-[13px]', active ? 'text-gray-700' : 'text-gray-500')} />
+                <SessionContextIconNode icon={context.icon} className={cn('h-[13px] w-[13px]', active ? 'text-foreground/75' : 'text-muted-foreground')} />
               </span>
             ) : null}
           </span>
         </div>
-        <div className="mt-1 flex items-center gap-2 text-[11px] text-gray-400">
+        <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted-foreground/65">
           <span className="min-w-0 truncate">
             {previewText}
           </span>
@@ -169,7 +169,7 @@ function ChatSidebarSessionDisplayView({
             event.stopPropagation();
             onOpenChildSessions();
           }}
-          className="pointer-events-none absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground opacity-0 transition-colors hover:bg-black/10 hover:text-foreground group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
+          className="pointer-events-none absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground opacity-0 transition-colors hover:bg-background/80 hover:text-foreground group-hover/session:pointer-events-auto group-hover/session:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"
           aria-label={t('chatSessionOpenChildSessions')}
           title={t('chatSessionOpenChildSessions')}
         >
@@ -245,10 +245,10 @@ export function ChatSidebarSessionItem({
   return (
     <div
       className={cn(
-        'w-full rounded-xl px-3 py-2.5 text-left transition-all text-[13px]',
+        'w-full rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors',
         active
-          ? 'bg-gray-200/80 text-gray-900 font-semibold shadow-sm'
-          : 'text-gray-700 hover:bg-gray-200/60 hover:text-gray-900'
+          ? 'bg-background/90 font-medium text-foreground'
+          : 'text-foreground/80 hover:bg-background/65 hover:text-foreground'
       )}
     >
       {isEditing ? (

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

@@ -61,10 +61,10 @@ export function ChatSidebarSessionList({
   }
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-2">
       {groups.map((group) => (
         <div key={group.label}>
-          <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
+          <div className="px-2 pb-1 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/65">
             {group.label}
           </div>
           <div className="space-y-0.5">{group.items.map(renderSessionItem)}</div>