@nextclaw/ui 0.15.21 → 0.15.22

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>

package/src/features/chat/features/session/components/session-header/chat-session-header-menu-item.tsx

@@ -23,7 +23,7 @@ export function ChatSessionHeaderMenuItem({
         'flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
         destructive
           ? 'text-destructive hover:bg-destructive/10'
-          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+          : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground'
       )}
       onClick={onClick}
       disabled={disabled}

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

@@ -57,7 +57,7 @@ export function ChatSessionProjectBadge({
           <button
             type="button"
             title={projectRoot ?? undefined}
-            className="min-w-0 max-w-[320px] shrink rounded-full border border-border bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground transition-colors hover:border-primary/35 hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-60"
+            className="min-w-0 max-w-[320px] shrink rounded-full border border-border bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground transition-colors hover:border-primary/35 hover:bg-[var(--interaction-hover)] hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-60"
             aria-label={t('chatSessionSetProject')}
             disabled={isProjectPending}
           >

package/src/features/chat/features/session/components/session-header/chat-session-switcher-groups.tsx

@@ -69,7 +69,7 @@ function ChatSessionSwitchItem({
         "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         active
           ? "bg-accent text-accent-foreground"
-          : "text-foreground hover:bg-accent/65 hover:text-accent-foreground",
+          : "text-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground",
       )}
       onClick={() => onSelect(session.key)}
     >

package/src/features/chat/features/session/components/session-header/chat-session-title-switcher.tsx

@@ -29,7 +29,7 @@ import { cn } from "@/shared/lib/utils";
 import { useProjects } from "@/shared/hooks/use-projects";
 
 const SWITCHER_TRIGGER_CLASS =
-  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
+  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
 
 function ChatSessionTitle({ title }: { title: string }) {
   return (

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

@@ -73,6 +73,32 @@ describe('chat-session-display', () => {
     ).toBe('正在调用工具：shell');
   });
 
+  it('localizes structured tool activity previews', () => {
+    const session = createSession({
+      activityPreview: {
+        state: 'running',
+        statusKind: 'tool-completed',
+        statusText: 'gateway',
+        timestamp: '2026-05-16T01:00:00.000Z'
+      }
+    });
+
+    expect(sessionActivityPreviewText(session, 'zh')).toBe('工具调用 · 已完成 · gateway');
+    expect(sessionActivityPreviewText(session, 'en')).toBe('Tool Call · Completed · gateway');
+  });
+
+  it('localizes persisted legacy tool activity previews', () => {
+    const session = createSession({
+      activityPreview: {
+        state: 'running',
+        statusText: 'Tool call completed: gateway',
+        timestamp: '2026-05-16T01:00:00.000Z'
+      }
+    });
+
+    expect(sessionActivityPreviewText(session, 'zh')).toBe('工具调用 · 已完成 · gateway');
+  });
+
   it('shows the final assistant reply after completion', () => {
     expect(
       sessionActivityPreviewText(

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

@@ -106,7 +106,8 @@ describe('adaptNcpSessionSummary', () => {
           last_activity_preview: {
             state: 'completed',
             replyText: 'Plan is ready',
-            statusText: 'Tool call completed',
+            statusKind: 'tool-completed',
+            statusText: 'read_file',
             timestamp: '2026-05-16T01:00:00.000Z',
           },
         },
@@ -116,7 +117,8 @@ describe('adaptNcpSessionSummary', () => {
     expect(adapted.activityPreview).toEqual({
       state: 'completed',
       replyText: 'Plan is ready',
-      statusText: 'Tool call completed',
+      statusKind: 'tool-completed',
+      statusText: 'read_file',
       timestamp: '2026-05-16T01:00:00.000Z',
     });
   });

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

@@ -1,6 +1,17 @@
-import type { SessionEntryView } from '@/shared/lib/api';
+import type { SessionActivityPreviewView, SessionEntryView } from '@/shared/lib/api';
 import { getLanguage, getLocale, t, type I18nLanguage } from '@/shared/lib/i18n';
 
+const LEGACY_ACTIVITY_STATUS_LABELS: Array<[
+  string,
+  NonNullable<SessionActivityPreviewView['statusKind']>
+]> = [
+  ['Thinking', 'thinking'],
+  ['Calling tool', 'tool-running'],
+  ['Tool call completed', 'tool-completed'],
+  ['Run failed', 'run-failed'],
+  ['Run interrupted', 'run-interrupted']
+];
+
 export function sessionDisplayName(session: SessionEntryView): string {
   const label = session.label?.trim();
   if (label) {
@@ -10,21 +21,46 @@ export function sessionDisplayName(session: SessionEntryView): string {
   return chunks[chunks.length - 1] || session.key;
 }
 
-export function sessionActivityPreviewText(session: SessionEntryView): string | null {
-  const preview = session.activityPreview;
-  if (!preview) {
-    return null;
+function formatSessionActivityStatus(
+  preview: SessionActivityPreviewView,
+  lang: I18nLanguage
+): string | null {
+  const detail = preview.statusText?.trim();
+  const legacyStatus = preview.statusKind || !detail
+    ? undefined
+    : LEGACY_ACTIVITY_STATUS_LABELS.find(([label]) => detail === label || detail.startsWith(`${label}: `));
+  const statusKind = preview.statusKind ?? legacyStatus?.[1];
+  const localizedDetail = legacyStatus
+    ? detail?.slice(legacyStatus[0].length).replace(/^:\s*/, '') || undefined
+    : detail;
+  switch (statusKind) {
+    case 'thinking':
+      return t('chatTyping', lang);
+    case 'tool-running':
+      return [t('chatToolCall', lang), t('chatToolStatusRunning', lang), localizedDetail].filter(Boolean).join(' · ');
+    case 'tool-completed':
+      return [t('chatToolCall', lang), t('chatToolStatusCompleted', lang), localizedDetail].filter(Boolean).join(' · ');
+    case 'run-failed':
+      return [t('chatToolStatusFailed', lang), localizedDetail].filter(Boolean).join(' · ');
+    case 'run-interrupted':
+      return t('chatSessionActivityInterrupted', lang);
+    default:
+      return localizedDetail ?? null;
   }
-  if (preview.state === 'cancelled') {
+}
+
+export function sessionActivityPreviewText(
+  session: SessionEntryView,
+  lang: I18nLanguage = getLanguage()
+): string | null {
+  const preview = session.activityPreview;
+  if (!preview || preview.state === 'cancelled') {
     return null;
   }
-  if (preview.state === 'failed' || preview.state === 'running') {
-    return preview.statusText ?? preview.replyText ?? null;
-  }
-  if (preview.state === 'completed') {
-    return preview.replyText ?? preview.statusText ?? null;
+  if (preview.state === 'completed' && preview.replyText) {
+    return preview.replyText;
   }
-  return preview.statusText ?? preview.replyText ?? null;
+  return formatSessionActivityStatus(preview, lang) ?? preview.replyText ?? null;
 }
 
 function startOfLocalDate(date: Date): number {

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

@@ -21,6 +21,13 @@ const SESSION_ACTIVITY_PREVIEW_STATE_SET = new Set<SessionActivityPreviewView['s
   'cancelled',
   'idle'
 ]);
+const SESSION_ACTIVITY_PREVIEW_STATUS_KIND_SET = new Set<NonNullable<SessionActivityPreviewView['statusKind']>>([
+  'thinking',
+  'tool-running',
+  'tool-completed',
+  'run-failed',
+  'run-interrupted'
+]);
 
 function stringifyUnknown(value: unknown): string {
   if (typeof value === 'string') {
@@ -66,13 +73,15 @@ function readNcpSessionActivityPreview(summary: NcpSessionSummaryView): SessionA
   if (!SESSION_ACTIVITY_PREVIEW_STATE_SET.has(state as SessionActivityPreviewView['state']) || !timestamp) {
     return null;
   }
-  const statusText = readOptionalString(previewRecord.statusText);
-  const replyText = readOptionalString(previewRecord.replyText);
+  const rawStatusKind = readOptionalString(previewRecord.statusKind);
   return {
     state: state as SessionActivityPreviewView['state'],
     timestamp,
-    ...(statusText ? { statusText } : {}),
-    ...(replyText ? { replyText } : {})
+    statusKind: SESSION_ACTIVITY_PREVIEW_STATUS_KIND_SET.has(rawStatusKind as NonNullable<SessionActivityPreviewView['statusKind']>)
+      ? rawStatusKind as NonNullable<SessionActivityPreviewView['statusKind']>
+      : undefined,
+    statusText: readOptionalString(previewRecord.statusText) ?? undefined,
+    replyText: readOptionalString(previewRecord.replyText) ?? undefined
   };
 }
 

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

@@ -79,6 +79,12 @@ vi.mock("@/shared/hooks/use-agents", () => ({
   }),
 }));
 
+vi.mock("@/shared/hooks/use-projects", () => ({
+  useProjects: () => ({
+    data: { projects: [] },
+  }),
+}));
+
 function createFetchedQuery<TData>(data: TData) {
   return {
     data,

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

@@ -50,21 +50,24 @@ describe('ChatWelcome', () => {
     expect(screen.queryByText('Current Agent:')).toBeNull();
   });
 
-  it('uses an adaptive capability grid for narrow docked layouts', () => {
+  it('renders a single-purpose welcome surface with compact prompt suggestions', () => {
     renderWelcome({ agents: [{ id: 'main', displayName: 'Main' }] });
 
-    expect(
-      screen.getByRole('button', { name: /Smart Conversations/ }).parentElement
-        ?.className,
-    ).toContain('auto-fit');
+    expect(screen.getByRole('heading', { name: 'What would you like to get done?' })).toBeTruthy();
+    expect(screen.queryByText(/Describe the goal/)).toBeNull();
+    expect(screen.getByRole('group', { name: 'Task context' })).toBeTruthy();
+    const suggestion = screen.getByRole('button', { name: 'Review this project' });
+    expect(suggestion.className).toContain('rounded-full');
+    expect(suggestion.className).not.toContain('border');
+    expect(suggestion.parentElement?.className).toContain('flex-wrap');
   });
 
-  it('fills the composer with a prompt suggestion when clicking a capability card', () => {
+  it('fills the composer with a prompt suggestion when clicking a suggestion', () => {
     const onSelectPrompt = vi.fn();
 
     renderWelcome({ onSelectPrompt });
 
-    fireEvent.click(screen.getByRole('button', { name: /Smart Conversations/ }));
+    fireEvent.click(screen.getByRole('button', { name: 'Review this project' }));
 
     expect(onSelectPrompt).toHaveBeenCalledWith(
       expect.stringContaining('next three concrete things'),

package/src/features/chat/features/welcome/components/chat-welcome-agent-picker.tsx

@@ -28,7 +28,7 @@ export function ChatWelcomeAgentPicker({
     <Select value={selectedAgentId} onValueChange={onSelectAgent}>
       <SelectTrigger
         aria-label={t('chatDraftAgentTitle')}
-        className="h-auto w-auto min-w-0 gap-1 rounded-lg border-0 bg-transparent px-2 py-1.5 text-muted-foreground shadow-none hover:bg-accent hover:text-accent-foreground focus:ring-0"
+        className="h-auto w-auto min-w-0 gap-1 rounded-lg border-0 bg-transparent px-2 py-1.5 text-muted-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus:ring-0"
       >
         <span className="sr-only">{t('chatDraftAgentTitle')}</span>
         <div className="flex min-w-0 items-center gap-1.5">