@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/chat/features/session/utils/chat-context-window-indicator.utils.ts

@@ -15,19 +15,58 @@ function formatTokenCount(value: number): string {
 export function buildChatContextWindowIndicator(
   contextWindow: SessionContextWindowView | null | undefined
 ): ChatContextWindowIndicator | null {
-  if (!contextWindow || contextWindow.totalContextTokens <= 0) {
+  if (
+    !contextWindow ||
+    contextWindow.completeInputBudget !== true ||
+    !contextWindow.fixedInputTokens ||
+    contextWindow.totalContextTokens <= 0
+  ) {
     return null;
   }
-  const ratio = contextWindow.usedContextTokens / contextWindow.totalContextTokens;
+  const triggerContextTokens = contextWindow.triggerContextTokens ?? contextWindow.totalContextTokens;
+  const ratio = contextWindow.usedContextTokens / Math.max(1, triggerContextTokens);
   const clampedRatio = Math.max(0, Math.min(1, ratio));
   const percentLabel = `${Math.round(clampedRatio * 100)}%`;
   const tone: ChatContextWindowIndicator['tone'] =
     clampedRatio >= 0.9 ? 'danger' : clampedRatio >= 0.75 ? 'warning' : 'neutral';
   const details: ChatContextWindowIndicator['details'] = [
-    { label: t('chatContextWindowUsed'), value: formatTokenCount(contextWindow.usedContextTokens) },
-    { label: t('chatContextWindowTotal'), value: formatTokenCount(contextWindow.totalContextTokens) },
-    { label: t('chatContextWindowAvailable'), value: formatTokenCount(contextWindow.availableContextTokens) }
+    { label: t('chatContextWindowUsed'), value: formatTokenCount(contextWindow.usedContextTokens) }
   ];
+  if (contextWindow.triggerContextTokens !== undefined) {
+    details.push({
+      label: t('chatContextWindowTrigger'),
+      value: formatTokenCount(contextWindow.triggerContextTokens)
+    });
+  }
+  details.push(contextWindow.availableBeforeCompactionTokens === undefined
+    ? { label: t('chatContextWindowAvailable'), value: formatTokenCount(contextWindow.availableContextTokens) }
+    : {
+        label: t('chatContextWindowAvailableBeforeCompaction'),
+        value: formatTokenCount(contextWindow.availableBeforeCompactionTokens)
+      });
+  if (contextWindow.fixedInputTokens !== undefined) {
+    details.push({
+      label: t('chatContextWindowFixed'),
+      value: formatTokenCount(contextWindow.fixedInputTokens),
+      dividerBefore: true
+    });
+  }
+  if (contextWindow.dynamicInputTokens !== undefined) {
+    details.push({
+      label: t('chatContextWindowDynamic'),
+      value: formatTokenCount(contextWindow.dynamicInputTokens)
+    });
+  }
+  if (contextWindow.reservedContextTokens !== undefined) {
+    details.push({
+      label: t('chatContextWindowReserve'),
+      value: formatTokenCount(contextWindow.reservedContextTokens)
+    });
+  }
+  details.push({
+    label: t('chatContextWindowTotal'),
+    value: formatTokenCount(contextWindow.totalContextTokens)
+  });
   if (contextWindow.prunedUsedContextTokens !== contextWindow.usedContextTokens) {
     details.push({
       label: t('chatContextWindowPruned'),

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
   };
 }
 
@@ -283,6 +292,16 @@ function toUiParts(parts: NcpMessagePart[]): UIMessage['parts'] {
   return uiParts;
 }
 
+export type NcpChatMessagePart =
+  | UIMessage['parts'][number]
+  | Extract<NcpMessagePart, { type: 'extension' }>;
+
+export function adaptNcpMessagePartsForChat(parts: NcpMessagePart[]): NcpChatMessagePart[] {
+  return parts.flatMap<NcpChatMessagePart>((part) =>
+    part.type === 'extension' ? [part] : toUiParts([part]),
+  );
+}
+
 function normalizeRole(role: NcpMessageView['role']): UIMessage['role'] {
   if (role === 'service') {
     return 'system';

package/src/features/chat/features/session/utils/ncp-session-context-metadata.utils.ts

@@ -37,11 +37,24 @@ export function readNcpContextWindowValue(value: unknown): SessionContextWindowV
     return null;
   }
   const compactedUsedContextTokens = readNonNegativeInteger(contextWindow.compactedUsedContextTokens);
+  const fixedInputTokens = readNonNegativeInteger(contextWindow.fixedInputTokens);
+  const dynamicInputTokens = readNonNegativeInteger(contextWindow.dynamicInputTokens);
+  const reservedContextTokens = readNonNegativeInteger(contextWindow.reservedContextTokens);
+  const triggerContextTokens = readNonNegativeInteger(contextWindow.triggerContextTokens);
+  const availableBeforeCompactionTokens = readNonNegativeInteger(
+    contextWindow.availableBeforeCompactionTokens,
+  );
   return {
+    completeInputBudget: readBoolean(contextWindow.completeInputBudget),
     usedContextTokens,
     totalContextTokens,
     prunedUsedContextTokens,
     availableContextTokens: readNonNegativeInteger(contextWindow.availableContextTokens) ?? Math.max(0, totalContextTokens - usedContextTokens),
+    ...(fixedInputTokens !== null ? { fixedInputTokens } : {}),
+    ...(dynamicInputTokens !== null ? { dynamicInputTokens } : {}),
+    ...(reservedContextTokens !== null ? { reservedContextTokens } : {}),
+    ...(triggerContextTokens !== null ? { triggerContextTokens } : {}),
+    ...(availableBeforeCompactionTokens !== null ? { availableBeforeCompactionTokens } : {}),
     droppedHistoryCount: readNonNegativeInteger(contextWindow.droppedHistoryCount) ?? 0,
     truncatedToolResultCount: readNonNegativeInteger(contextWindow.truncatedToolResultCount) ?? 0,
     truncatedSystemPrompt: readBoolean(contextWindow.truncatedSystemPrompt),
@@ -63,7 +76,10 @@ export const CONTEXT_COMPACTION_TIMELINE_KIND = 'context_compaction';
 
 export type ContextCompactionTimelineView = {
   id: string;
-  status: 'compressing' | 'compressed';
+  status: 'compressing' | 'compressed' | 'failed' | 'cancelled';
+  phase?: 'pre-run' | 'mid-run';
+  continuationMessageId?: string;
+  continuationMessageCoveredPartCount?: number;
   summary: string;
   coveredMessageCount: number;
   coveredSessionMessageCount: number;
@@ -86,8 +102,25 @@ export function readContextCompactionTimeline(message: Pick<NcpMessageView, 'met
     return null;
   }
   const id = readOptionalString(rawCheckpoint.id);
-  const status = rawCheckpoint.status === 'compressing' ? 'compressing' : rawCheckpoint.status === 'compressed' ? 'compressed' : null;
-  const summary = readOptionalString(rawCheckpoint.summary);
+  const status = rawCheckpoint.status === 'compressing'
+    ? 'compressing'
+    : rawCheckpoint.status === 'compressed'
+      ? 'compressed'
+      : rawCheckpoint.status === 'failed'
+        ? 'failed'
+        : rawCheckpoint.status === 'cancelled'
+          ? 'cancelled'
+          : null;
+  const phase = rawCheckpoint.phase === 'pre-run'
+    ? 'pre-run'
+    : rawCheckpoint.phase === 'mid-run'
+      ? 'mid-run'
+      : null;
+  const continuationMessageId = readOptionalString(rawCheckpoint.continuationMessageId);
+  const continuationMessageCoveredPartCount = readNonNegativeInteger(
+    rawCheckpoint.continuationMessageCoveredPartCount,
+  );
+  const summary = typeof rawCheckpoint.summary === 'string' ? rawCheckpoint.summary : null;
   const coveredMessageCount = readNonNegativeInteger(rawCheckpoint.coveredMessageCount);
   const coveredSessionMessageCount = readNonNegativeInteger(rawCheckpoint.coveredSessionMessageCount);
   const originalEstimatedTokens = readNonNegativeInteger(rawCheckpoint.originalEstimatedTokens);
@@ -97,7 +130,7 @@ export function readContextCompactionTimeline(message: Pick<NcpMessageView, 'met
   if (
     !id ||
     !status ||
-    !summary ||
+    summary === null ||
     coveredMessageCount === null ||
     coveredSessionMessageCount === null ||
     originalEstimatedTokens === null ||
@@ -110,6 +143,11 @@ export function readContextCompactionTimeline(message: Pick<NcpMessageView, 'met
   return {
     id,
     status,
+    ...(phase ? { phase } : {}),
+    ...(continuationMessageId ? { continuationMessageId } : {}),
+    ...(continuationMessageCoveredPartCount !== null
+      ? { continuationMessageCoveredPartCount }
+      : {}),
     summary,
     coveredMessageCount,
     coveredSessionMessageCount,

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'),
@@ -89,10 +92,17 @@ describe('ChatWelcome', () => {
       defaultProjectRoot: '/Users/demo/.nextclaw/workspace',
       onSelectProjectRoot,
       projectOptions: [
+        {
+          projectRoot: '/Users/demo/.nextclaw/workspace',
+          projectName: 'workspace',
+          sessionCount: 0,
+          isDefault: true,
+        },
         {
           projectRoot: '/tmp/project-alpha',
           projectName: 'project-alpha',
           sessionCount: 3,
+          isDefault: false,
         },
       ],
     });
@@ -100,7 +110,8 @@ describe('ChatWelcome', () => {
     fireEvent.click(
       screen.getByRole('button', { name: 'Choose working directory' }),
     );
-    expect(screen.getByText('Recent projects')).toBeTruthy();
+    expect(screen.getByText('Working directories')).toBeTruthy();
+    expect(screen.getByText('Default')).toBeTruthy();
     expect(screen.getByText('/tmp/project-alpha')).toBeTruthy();
     expect(screen.getByText('Open folder')).toBeTruthy();
     expect(screen.getByText('/tmp/project-alpha').closest('.overflow-y-auto'))
@@ -110,7 +121,14 @@ describe('ChatWelcome', () => {
 
     expect(onSelectProjectRoot).toHaveBeenCalledWith('/tmp/project-alpha');
     await waitFor(() => {
-      expect(screen.queryByText('Recent projects')).toBeNull();
+      expect(screen.queryByText('Working directories')).toBeNull();
     });
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Choose working directory' }),
+    );
+    fireEvent.click(screen.getByText('/Users/demo/.nextclaw/workspace'));
+
+    expect(onSelectProjectRoot).toHaveBeenLastCalledWith(null);
   });
 });

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">

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

@@ -11,19 +11,17 @@ import { t } from '@/shared/lib/i18n';
 import { getSessionProjectName } from '@/shared/lib/session-project';
 
 type ChatWelcomeProjectPickerProps = {
-  defaultProjectRoot?: string | null;
   isSaving: boolean;
   projectOptions: readonly ChatWelcomeProjectOption[];
   projectRoot: string | null;
   selectable: boolean;
   onOpenProjectDialog: () => void;
-  onSelectProjectRoot: (projectRoot: string) => Promise<void> | void;
+  onSelectProjectRoot: (projectRoot: string | null) => Promise<void> | void;
 };
 
 const PROJECT_PICKER_MAX_HEIGHT = createPopoverAvailableHeightLimit('20rem');
 
 export function ChatWelcomeProjectPicker({
-  defaultProjectRoot,
   isSaving,
   projectOptions,
   projectRoot,
@@ -34,12 +32,8 @@ export function ChatWelcomeProjectPicker({
   const [isOpen, setIsOpen] = useState(false);
   const projectLabel =
     getSessionProjectName(projectRoot) ?? t('chatWelcomeProjectPickerPlaceholder');
-  const isDefaultProject =
-    defaultProjectRoot !== null &&
-    defaultProjectRoot !== undefined &&
-    projectRoot === defaultProjectRoot;
 
-  const selectProjectRoot = async (nextProjectRoot: string) => {
+  const selectProjectRoot = async (nextProjectRoot: string | null) => {
     setIsOpen(false);
     await onSelectProjectRoot(nextProjectRoot);
   };
@@ -49,18 +43,13 @@ export function ChatWelcomeProjectPicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           title={projectRoot ?? undefined}
           aria-label={t('chatWelcomeProjectPickerLabel')}
           disabled={!selectable || isSaving}
         >
           <FolderOpen className="h-4 w-4 shrink-0" />
           <span className="truncate">{projectLabel}</span>
-          {isDefaultProject ? (
-            <span className="shrink-0 text-xs font-normal text-muted-foreground/70">
-              {t('chatWelcomeProjectDefaultBadge')}
-            </span>
-          ) : null}
           <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
         </button>
       </PopoverTrigger>
@@ -78,10 +67,10 @@ export function ChatWelcomeProjectPicker({
               <button
                 key={option.projectRoot}
                 type="button"
-                className="flex w-full min-w-0 items-start gap-2 rounded-xl px-2 py-2 text-left transition-colors hover:bg-accent"
+                className="flex w-full min-w-0 items-start gap-2 rounded-xl px-2 py-2 text-left transition-colors hover:bg-[var(--interaction-hover)]"
                 title={option.projectRoot}
                 onClick={() => {
-                  void selectProjectRoot(option.projectRoot);
+                  void selectProjectRoot(option.isDefault ? null : option.projectRoot);
                 }}
               >
                 <FolderOpen className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/70" />
@@ -90,6 +79,11 @@ export function ChatWelcomeProjectPicker({
                     <span className="truncate text-[13px] font-semibold text-foreground">
                       {option.projectName}
                     </span>
+                    {option.isDefault ? (
+                      <span className="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                        {t('chatWelcomeProjectDefaultBadge')}
+                      </span>
+                    ) : null}
                   </span>
                   <span className="block truncate text-[11px] leading-4 text-muted-foreground">
                     {option.projectRoot}
@@ -111,7 +105,7 @@ export function ChatWelcomeProjectPicker({
         <div className="shrink-0 border-t border-border p-1.5">
           <button
             type="button"
-            className="flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left text-[13px] font-semibold text-foreground transition-colors hover:bg-accent"
+            className="flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left text-[13px] font-semibold text-foreground transition-colors hover:bg-[var(--interaction-hover)]"
             onClick={() => {
               setIsOpen(false);
               onOpenProjectDialog();

package/src/features/chat/features/welcome/components/chat-welcome-prompt-suggestions.tsx

@@ -0,0 +1,37 @@
+import { t } from '@/shared/lib/i18n';
+
+const WELCOME_PROMPT_SUGGESTIONS = [
+  {
+    labelKey: 'chatWelcomeSuggestion1Label' as const,
+    promptKey: 'chatWelcomeSuggestion1Prompt' as const,
+  },
+  {
+    labelKey: 'chatWelcomeSuggestion2Label' as const,
+    promptKey: 'chatWelcomeSuggestion2Prompt' as const,
+  },
+  {
+    labelKey: 'chatWelcomeSuggestion3Label' as const,
+    promptKey: 'chatWelcomeSuggestion3Prompt' as const,
+  },
+];
+
+export function ChatWelcomePromptSuggestions({
+  onSelectPrompt,
+}: {
+  onSelectPrompt: (prompt: string) => void;
+}) {
+  return (
+    <div className="mt-5 flex flex-wrap justify-center gap-2">
+      {WELCOME_PROMPT_SUGGESTIONS.map((suggestion) => (
+        <button
+          key={suggestion.labelKey}
+          type="button"
+          onClick={() => onSelectPrompt(t(suggestion.promptKey))}
+          className="rounded-full bg-muted/55 px-3.5 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          {t(suggestion.labelKey)}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/features/chat/features/welcome/components/chat-welcome-session-type-picker.tsx

@@ -39,7 +39,7 @@ export function ChatWelcomeSessionTypePicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           aria-label={t('chatWelcomeSessionTypePickerLabel')}
         >
           {selectedOption.icon?.src ? (

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

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { useState } from 'react';
 import { ChatSessionProjectDialog } from '@/features/chat/features/session/components/session-header/chat-session-project-dialog';
 import { ChatWelcomeAgentPicker } from '@/features/chat/features/welcome/components/chat-welcome-agent-picker';
-import { ChatWelcomeCapabilityGrid } from '@/features/chat/features/welcome/components/chat-welcome-capability-grid';
+import { ChatWelcomePromptSuggestions } from '@/features/chat/features/welcome/components/chat-welcome-prompt-suggestions';
 import { ChatWelcomeProjectPicker } from '@/features/chat/features/welcome/components/chat-welcome-project-picker';
 import { ChatWelcomeSessionTypePicker } from '@/features/chat/features/welcome/components/chat-welcome-session-type-picker';
 import type { ChatWelcomeProjectOption } from '@/features/chat/features/welcome/utils/chat-welcome-project-options.utils';
@@ -23,7 +23,7 @@ type ChatWelcomeProps = {
   sessionTypeOptions: readonly SessionTypeOption[];
   onSelectAgent: (agentId: string) => void;
   onSelectPrompt: (prompt: string) => void;
-  onSelectProjectRoot?: (projectRoot: string) => Promise<void> | void;
+  onSelectProjectRoot?: (projectRoot: string | null) => Promise<void> | void;
   onSelectSessionType: (sessionType: string) => void;
 };
 
@@ -46,7 +46,7 @@ export function ChatWelcome({
   const [isProjectSaving, setIsProjectSaving] = useState(false);
   const resolvedProjectRoot = selectedProjectRoot ?? defaultProjectRoot ?? null;
 
-  const saveProjectRoot = async (projectRoot: string) => {
+  const saveProjectRoot = async (projectRoot: string | null) => {
     if (!onSelectProjectRoot) {
       return;
     }
@@ -61,45 +61,47 @@ export function ChatWelcome({
   const selectableProjectRoot = Boolean(onSelectProjectRoot);
 
   return (
-    <div className="flex min-h-full items-center justify-center px-4 py-8 sm:p-8">
-      <div className="min-w-0 w-full max-w-[min(760px,100%)]">
+    <div className="flex min-h-full items-center justify-center px-4 py-10 sm:p-8">
+      <div className="w-full min-w-0 max-w-[min(680px,100%)]">
         <div className="text-center">
-          <h2 className="text-2xl font-semibold text-foreground sm:text-3xl">
+          <h2 className="text-2xl font-semibold leading-tight text-foreground sm:text-[2rem]">
             {t('chatWelcomeTitle')}
           </h2>
-          <p className="mt-3 text-sm font-medium text-muted-foreground sm:text-base">
-            {t('chatWelcomeSubtitle')}
-          </p>
         </div>
 
-        {inputSlot ? <div className="mt-8">{inputSlot}</div> : null}
+        {inputSlot ? <div className="mt-6">{inputSlot}</div> : null}
 
-        <div className="mt-3 flex flex-wrap items-center gap-2 px-1 text-sm text-muted-foreground">
-          {onSelectProjectRoot ? (
-            <ChatWelcomeProjectPicker
-              defaultProjectRoot={defaultProjectRoot}
-              isSaving={isProjectSaving}
-              projectOptions={projectOptions}
-              projectRoot={resolvedProjectRoot}
-              selectable={selectableProjectRoot}
-              onOpenProjectDialog={() => setIsProjectDialogOpen(true)}
-              onSelectProjectRoot={saveProjectRoot}
+        <div className="mt-2 flex justify-center px-1">
+          <div
+            role="group"
+            aria-label={t('chatWelcomeContextLabel')}
+            className="flex min-w-0 max-w-full flex-wrap items-center justify-center gap-0.5 rounded-xl bg-muted/40 p-1 text-sm text-muted-foreground"
+          >
+            {onSelectProjectRoot ? (
+              <ChatWelcomeProjectPicker
+                isSaving={isProjectSaving}
+                projectOptions={projectOptions}
+                projectRoot={resolvedProjectRoot}
+                selectable={selectableProjectRoot}
+                onOpenProjectDialog={() => setIsProjectDialogOpen(true)}
+                onSelectProjectRoot={saveProjectRoot}
+              />
+            ) : null}
+            <ChatWelcomeAgentPicker
+              agents={agents}
+              selectedAgent={selectedAgent}
+              selectedAgentId={selectedAgentId}
+              onSelectAgent={onSelectAgent}
             />
-          ) : null}
-          <ChatWelcomeAgentPicker
-            agents={agents}
-            selectedAgent={selectedAgent}
-            selectedAgentId={selectedAgentId}
-            onSelectAgent={onSelectAgent}
-          />
-          <ChatWelcomeSessionTypePicker
-            options={sessionTypeOptions}
-            selectedSessionType={selectedSessionType}
-            onSelectSessionType={onSelectSessionType}
-          />
+            <ChatWelcomeSessionTypePicker
+              options={sessionTypeOptions}
+              selectedSessionType={selectedSessionType}
+              onSelectSessionType={onSelectSessionType}
+            />
+          </div>
         </div>
 
-        <ChatWelcomeCapabilityGrid onSelectPrompt={onSelectPrompt} />
+        <ChatWelcomePromptSuggestions onSelectPrompt={onSelectPrompt} />
       </div>
 
       {onSelectProjectRoot ? (