@nextclaw/ui 0.14.2 → 0.14.3

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

@@ -22,7 +22,10 @@ import {
 } from '@/features/chat/features/conversation/hooks/use-session-conversation-controller';
 import { useSessionConversationInputQuery } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-query';
 import { useSessionConversationInputState } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
-import { SessionConversationInput } from './session-conversation-input';
+import {
+  SessionConversationInput,
+  type SessionConversationInputController,
+} from './session-conversation-input';
 
 type SessionConversationAreaProps = {
   readonly consumeDraftIntent?: boolean;
@@ -226,14 +229,31 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     restoreComposer: inputActions.restoreComposer,
     setSendError: inputActions.setSendError,
   });
-  const displayInputSnapshot = useMemo(() => ({
-    ...inputSnapshot,
-    sendError: lastSendError ?? inputSnapshot.sendError,
-  }), [inputSnapshot, lastSendError]);
+  const controllerRef = useRef(controller);
+  useEffect(() => {
+    controllerRef.current = controller;
+  }, [controller]);
+  const inputController = useMemo<SessionConversationInputController>(() => ({
+    canStopGeneration: controller.canStopGeneration,
+    isSending: controller.isSending,
+    send: () => controllerRef.current.send(),
+    sendDisabled: controller.sendDisabled,
+    stop: () => controllerRef.current.stop(),
+    stopDisabled: controller.stopDisabled,
+  }), [
+    controller.canStopGeneration,
+    controller.isSending,
+    controller.sendDisabled,
+    controller.stopDisabled,
+  ]);
   const contextWindow = useMemo(
     () => buildChatContextWindowIndicator(readNcpContextWindowValue(agent.snapshot.contextWindow)),
     [agent.snapshot.contextWindow],
   );
+  const displayInputSnapshot = useMemo(() => ({
+    ...inputSnapshot,
+    sendError: lastSendError ?? inputSnapshot.sendError,
+  }), [inputSnapshot, lastSendError]);
   useSessionConversationDraftIntent({
     consumeDraftIntent,
     applyPromptSuggestion: inputActions.applyPromptSuggestion,
@@ -241,7 +261,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
   const renderInput = useCallback((surface: 'default' | 'embedded') => (
     <SessionConversationInput
       contextWindow={contextWindow}
-      controller={controller}
+      controller={inputController}
       inputActions={inputActions}
       inputQuery={inputQuery}
       inputSnapshot={displayInputSnapshot}
@@ -249,8 +269,8 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     />
   ), [
     contextWindow,
-    controller,
     displayInputSnapshot,
+    inputController,
     inputActions,
     inputQuery,
   ]);
@@ -258,8 +278,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     showWelcomeForDraft &&
     !sessionKey &&
     agent.visibleMessages.length === 0 &&
-    !agent.isHydrating &&
-    !controller.isSending;
+    !agent.isHydrating;
 
   return (
     <>

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

@@ -1,10 +1,15 @@
 import {
+  memo,
   useCallback,
   useEffect,
   useMemo,
   useRef,
 } from 'react';
-import { ChatInputBar, type ChatInputBarHandle, type ChatContextWindowIndicator } from '@nextclaw/agent-chat-ui';
+import {
+  ChatInputBar,
+  type ChatContextWindowIndicator,
+  type ChatInputBarHandle,
+} from '@nextclaw/agent-chat-ui';
 import { isRuntimeDefaultModelValue } from '@nextclaw/shared';
 
 import { useI18n } from '@/app/components/i18n-provider';
@@ -43,7 +48,6 @@ import {
   CHAT_RECENT_SKILLS_MIN_OPTIONS,
 } from '@/features/chat/managers/chat-recent-skills.manager';
 
-import type { useSessionConversationController } from '@/features/chat/features/conversation/hooks/use-session-conversation-controller';
 import { useSessionConversationInputAttachments } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-attachments';
 import type { useSessionConversationInputQuery } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-query';
 import type {
@@ -57,7 +61,15 @@ import {
 } from '@/features/chat/features/conversation/utils/session-conversation-input-toolbar.utils';
 
 type SessionConversationInputQuery = ReturnType<typeof useSessionConversationInputQuery>;
-type SessionConversationController = ReturnType<typeof useSessionConversationController>;
+
+export type SessionConversationInputController = {
+  readonly canStopGeneration: boolean;
+  readonly isSending: boolean;
+  readonly sendDisabled: boolean;
+  readonly stopDisabled: boolean;
+  readonly send: () => Promise<void> | void;
+  readonly stop: () => Promise<void> | void;
+};
 
 function toSkillRecords(
   snapshotRecords: SessionSkillEntryView[],
@@ -150,14 +162,14 @@ function useSessionConversationInputCollections(params: {
 
 type SessionConversationInputProps = {
   readonly contextWindow: ChatContextWindowIndicator | null;
-  readonly controller: SessionConversationController;
+  readonly controller: SessionConversationInputController;
   readonly inputActions: SessionConversationInputActions;
   readonly inputQuery: SessionConversationInputQuery;
   readonly inputSnapshot: SessionConversationInputSnapshot;
   readonly surface?: 'default' | 'embedded';
 };
 
-export function SessionConversationInput(props: SessionConversationInputProps) {
+export const SessionConversationInput = memo(function SessionConversationInput(props: SessionConversationInputProps) {
   const {
     contextWindow,
     controller,
@@ -424,4 +436,4 @@ export function SessionConversationInput(props: SessionConversationInputProps) {
       />
     </>
   );
-}
+});

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

@@ -55,18 +55,6 @@ const resolveModelForSend = (value: string | null | undefined): string | undefin
   return trimmed || undefined;
 };
 
-const resolveProjectRootForSend = (params: {
-  readonly inputSnapshot: SessionConversationInputSnapshot;
-  readonly inputQuery: SessionConversationInputQuery;
-  readonly sessionKey: string | null;
-}): string | null => {
-  const { inputSnapshot, inputQuery, sessionKey } = params;
-  if (!sessionKey) {
-    return inputSnapshot.pendingProjectRoot ?? inputQuery.defaultProjectRoot ?? null;
-  }
-  return inputQuery.selectedSession?.projectRoot ?? null;
-};
-
 export function useSessionConversationController(params: UseSessionConversationControllerParams) {
   const {
     agent,
@@ -135,7 +123,9 @@ export function useSessionConversationController(params: UseSessionConversationC
         : inputQuery.sessionTypeState.selectedSessionType,
       projectRoot: materializationContext
         ? inputSnapshot.pendingProjectRoot
-        : resolveProjectRootForSend({ inputSnapshot, inputQuery, sessionKey }),
+        : sessionKey
+          ? inputQuery.selectedSession?.projectRoot ?? null
+          : inputSnapshot.pendingProjectRoot,
       requestedSkills: [...inputSnapshot.selectedSkills],
       composerNodes: [...inputSnapshot.nodes],
       sessionMaterialization: materializationContext

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

@@ -119,9 +119,25 @@ export function useSessionConversationInputQuery(params: UseSessionConversationI
     [selectedSessionKey, sessionTypeState.selectedSessionType, sessions],
   );
 
-  return {
+  const defaultProjectRoot = normalizeSessionProjectRootValue(
+    config?.agents.defaults.workspace,
+  );
+
+  return useMemo(() => ({
     defaultModel: config?.agents.defaults.model,
-    defaultProjectRoot: normalizeSessionProjectRootValue(config?.agents.defaults.workspace),
+    defaultProjectRoot,
+    fallbackPreferredModel,
+    fallbackPreferredThinking,
+    isProviderStateResolved,
+    isSkillsLoading,
+    modelOptions,
+    selectedSession,
+    selectedSessionKey,
+    sessionTypeState,
+    skillRecords,
+  }), [
+    config?.agents.defaults.model,
+    defaultProjectRoot,
     fallbackPreferredModel,
     fallbackPreferredThinking,
     isProviderStateResolved,
@@ -131,5 +147,5 @@ export function useSessionConversationInputQuery(params: UseSessionConversationI
     selectedSessionKey,
     sessionTypeState,
     skillRecords,
-  };
+  ]);
 }

package/src/features/chat/features/message/components/chat-inline-panel-app-card.tsx

@@ -77,28 +77,28 @@ export function ChatInlinePanelAppCard({
   if (!url) {
     return (
       <div
-        className="h-[320px] min-h-[220px] w-full animate-pulse rounded-lg border border-[#eee3d1] bg-gradient-to-b from-white to-amber-50/60"
+        className="h-[320px] min-h-[220px] w-full animate-pulse rounded-lg border border-border bg-muted/45"
         style={{ maxHeight: PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX }}
       />
     );
   }
 
   return (
-    <div className="w-full max-w-[42rem] overflow-hidden rounded-lg border border-[#eee3d1] bg-white shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
-      <div className="flex h-9 items-center justify-between gap-2 border-b border-[#f1e7d4] bg-[#fffaf2] px-2.5">
-        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-[#5c4933]">
+    <div className="w-full max-w-[42rem] overflow-hidden rounded-lg border border-border bg-card shadow-sm">
+      <div className="flex h-9 items-center justify-between gap-2 border-b border-border bg-muted/45 px-2.5">
+        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-foreground">
           <AppWindow className="h-3.5 w-3.5 shrink-0 text-primary" />
           <span className="truncate">{title}</span>
         </div>
         <IconActionButton
-          className="h-7 w-7 rounded-md text-[#7a6145] hover:bg-white hover:text-[#2f2212]"
+          className="h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
           icon={<Maximize2 className="h-3.5 w-3.5" />}
           label={t('chatPanelCardExpand')}
           onClick={openExpanded}
         />
       </div>
       <div
-        className="relative h-[420px] min-h-[220px] max-h-[min(60vh,420px)] overflow-hidden bg-white"
+        className="relative h-[420px] min-h-[220px] max-h-[min(60vh,420px)] overflow-hidden bg-card"
       >
         <iframe
           ref={iframeRef}
@@ -107,7 +107,7 @@ export function ChatInlinePanelAppCard({
           title={title}
           sandbox={PANEL_APP_INLINE_IFRAME_SANDBOX}
           scrolling="auto"
-          className="h-full w-full border-0 bg-white"
+          className="h-full w-full border-0 bg-card"
         />
       </div>
     </div>

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -126,13 +126,13 @@ function ChatContextCompactionDivider({
     `${t("chatContextCompactionProjectedTokens")}: ${checkpoint.projectedEstimatedTokens}`,
   ].join("\n");
   return (
-    <div className="my-4 flex items-center gap-3 text-[11px] text-gray-500" title={title}>
-      <div className="h-px flex-1 bg-gray-200" />
-      <div className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50 px-3 py-1">
+    <div className="my-4 flex items-center gap-3 text-[11px] text-muted-foreground" title={title}>
+      <div className="h-px flex-1 bg-border" />
+      <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1">
         {checkpoint.status === "compressing" ? (
-          <span className="h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" />
+          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground" />
         ) : (
-          <span className="h-1.5 w-1.5 rounded-full bg-gray-300" />
+          <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/45" />
         )}
         <span>
           {checkpoint.status === "compressing"
@@ -140,7 +140,7 @@ function ChatContextCompactionDivider({
             : t("chatContextCompactionCompressed")}
         </span>
       </div>
-      <div className="h-px flex-1 bg-gray-200" />
+      <div className="h-px flex-1 bg-border" />
     </div>
   );
 }

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -49,12 +49,12 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
             <div className="flex items-center justify-between gap-2 px-2 py-0.5">
               <div className="flex min-w-0 items-center gap-1.5">
                 <div
-                  className="truncate text-[11px] font-medium uppercase tracking-wider text-gray-500"
+                  className="truncate text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
                   title={group.projectRoot}
                 >
                   {group.projectName}
                 </div>
-                <span className="shrink-0 text-[10px] text-gray-400">
+                <span className="shrink-0 text-[10px] text-muted-foreground/70">
                   {group.items.length}
                 </span>
               </div>
@@ -70,12 +70,12 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                       icon={<Plus className="h-3.5 w-3.5" />}
                       label={actionLabel}
                       tooltip={false}
-                      className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                      className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                     />
                   </PopoverTrigger>
                   <PopoverContent
                     align="end"
-                    className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+                    className="w-56 rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
                   >
                     <ChatSessionTypeMenu
                       options={sessionTypeOptions}
@@ -91,7 +91,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                 <IconActionButton
                   icon={<Plus className="h-3.5 w-3.5" />}
                   label={actionLabel}
-                  className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                  className="h-7 w-7 shrink-0 rounded-lg text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                   onClick={() => onCreateSession(preferredSessionType, group.projectRoot)}
                 />
               )}

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

@@ -25,8 +25,8 @@ type ChatSidebarSessionListProps = {
 function ChatSidebarEmptyState({ label }: { label: string }) {
   return (
     <div className="p-4 text-center">
-      <MessageSquareText className="mx-auto mb-2 h-6 w-6 text-gray-300" />
-      <div className="text-xs text-gray-500">{label}</div>
+      <MessageSquareText className="mx-auto mb-2 h-6 w-6 text-muted-foreground/45" />
+      <div className="text-xs text-muted-foreground">{label}</div>
     </div>
   );
 }
@@ -42,7 +42,7 @@ export function ChatSidebarSessionList({
   sessionTypeOptions,
 }: ChatSidebarSessionListProps) {
   if (isLoading) {
-    return <div className="p-3 text-xs text-gray-500">{t("sessionsLoading")}</div>;
+    return <div className="p-3 text-xs text-muted-foreground">{t("sessionsLoading")}</div>;
   }
 
   if (isProjectFirstView) {
@@ -67,7 +67,7 @@ export function ChatSidebarSessionList({
     <div className="space-y-3">
       {groups.map((group) => (
         <div key={group.label}>
-          <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+          <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
             {group.label}
           </div>
           <div className="space-y-0.5">{group.items.map(renderSessionItem)}</div>

package/src/features/chat/features/session/components/session-context-icon.tsx

@@ -17,7 +17,7 @@ export function SessionContextIconNode({ icon, className }: { icon: SessionConte
         src={runtimeIconSrc ?? undefined}
         className={cn('h-[1.125rem] w-[1.125rem]', className)}
         imgClassName="h-full w-full object-contain"
-        fallback={<Bot className={cn('h-3 w-3 text-gray-500', className)} />}
+        fallback={<Bot className={cn('h-3 w-3 text-muted-foreground', className)} />}
       />
     );
   }
@@ -34,7 +34,7 @@ function ChannelLogoIcon(
       src={logoSrc}
       className={cn('h-[1.125rem] w-[1.125rem]', className)}
       imgClassName="h-full w-full object-contain"
-      fallback={<Bot className="h-3 w-3 text-gray-500" />}
+      fallback={<Bot className="h-3 w-3 text-muted-foreground" />}
     />
   );
 }

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

@@ -58,8 +58,8 @@ describe('ChatSessionProjectBadge', () => {
     renderProjectBadge();
 
     const trigger = screen.getByRole('button', { name: 'Set Project Directory' });
-    expect(trigger.className).toContain('border-gray-200');
-    expect(trigger.className).toContain('text-gray-600');
+    expect(trigger.className).toContain('border-border');
+    expect(trigger.className).toContain('text-muted-foreground');
     expect(trigger.className).not.toContain('emerald');
   });
 

package/src/features/chat/features/session/components/session-header/chat-session-header-actions.tsx

@@ -9,7 +9,7 @@ import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { t } from '@/shared/lib/i18n';
 
 const SESSION_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
-const SESSION_HEADER_ACTION_BUTTON_CLASS = 'h-7 w-7 rounded-lg shrink-0 text-gray-400 hover:text-gray-700';
+const SESSION_HEADER_ACTION_BUTTON_CLASS = 'h-7 w-7 shrink-0 rounded-lg text-muted-foreground/70 hover:bg-accent hover:text-accent-foreground';
 
 type ChatSessionHeaderActionsProps = {
   sessionKey: string;

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-gray-700 hover:bg-gray-100'
+          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
       )}
       onClick={onClick}
       disabled={disabled}

package/src/features/chat/features/session/components/session-header/chat-session-metadata-dialog.tsx

@@ -29,7 +29,7 @@ export function ChatSessionMetadataDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl gap-0 overflow-hidden p-0">
-        <DialogHeader className="border-b border-gray-200 px-5 py-4 pr-12">
+        <DialogHeader className="border-b border-border px-5 py-4 pr-12">
           <DialogTitle className="text-base">{t('chatSessionMetadataDialogTitle')}</DialogTitle>
           <DialogDescription className="sr-only">
             {t('chatSessionMetadataDialogDescription')}

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

@@ -55,7 +55,7 @@ export function ChatSessionProjectBadge({
           <button
             type="button"
             title={projectRoot ?? undefined}
-            className="min-w-0 max-w-[320px] shrink rounded-full border border-gray-200 bg-gray-100/90 px-2 py-0.5 text-[11px] font-medium text-gray-600 transition-colors hover:border-gray-300 hover:bg-gray-100 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-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-60"
             aria-label={t('chatSessionSetProject')}
             disabled={isProjectPending}
           >
@@ -72,11 +72,11 @@ export function ChatSessionProjectBadge({
           style={SESSION_PROJECT_MENU_STYLE}
         >
           <div className="px-3 pb-2 pt-1">
-            <div className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
+            <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
               {projectName}
             </div>
             {projectRoot ? (
-              <div className="mt-1 break-all text-xs text-gray-500">
+              <div className="mt-1 break-all text-xs text-muted-foreground">
                 {projectRoot}
               </div>
             ) : null}

package/src/features/chat/features/session/components/session-run-badge.tsx

@@ -12,7 +12,7 @@ export function SessionRunBadge({ status, className }: SessionRunBadgeProps) {
   const label = status === 'running' ? t('sessionsRunStatusRunning') : t('sessionsRunStatusQueued');
   return (
     <span
-      className={cn('inline-flex h-3.5 w-3.5 items-center justify-center text-gray-400', className)}
+      className={cn('inline-flex h-3.5 w-3.5 items-center justify-center text-muted-foreground/70', className)}
       title={label}
       aria-label={label}
     >

package/src/features/chat/features/session-type/hooks/use-chat-session-type-state.ts

@@ -128,7 +128,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     return null;
   }, [availableSessionTypeSet, selectedSession, selectedSessionType, selectedSessionTypeOption]);
 
-  return {
+  return useMemo(() => ({
     sessionTypeOptions,
     selectedSessionTypeOption,
     defaultSessionType,
@@ -136,5 +136,13 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     canEditSessionType,
     sessionTypeUnavailable,
     sessionTypeUnavailableMessage
-  };
+  }), [
+    canEditSessionType,
+    defaultSessionType,
+    selectedSessionType,
+    selectedSessionTypeOption,
+    sessionTypeOptions,
+    sessionTypeUnavailable,
+    sessionTypeUnavailableMessage
+  ]);
 }

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

@@ -89,17 +89,10 @@ 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,
         },
       ],
     });

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-gray-500 shadow-none hover:bg-gray-100 hover:text-gray-800 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-accent 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">
@@ -48,7 +48,7 @@ export function ChatWelcomeAgentPicker({
         </div>
       </SelectTrigger>
       <SelectContent
-        className="rounded-xl border-gray-200/80 shadow-lg"
+        className="rounded-xl border-border shadow-lg"
         style={{ maxHeight: AGENT_PICKER_MAX_HEIGHT }}
       >
         {agents.map((agent) => (
@@ -60,7 +60,7 @@ export function ChatWelcomeAgentPicker({
                 avatarUrl={agent.avatarUrl}
                 className="h-5 w-5 shrink-0"
               />
-              <span className="truncate text-sm font-medium text-gray-700">
+              <span className="truncate text-sm font-medium text-foreground">
                 {agent.displayName?.trim() || agent.id}
               </span>
             </div>

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

@@ -35,15 +35,15 @@ export function ChatWelcomeCapabilityGrid({
           <button
             key={capability.titleKey}
             onClick={() => onSelectPrompt(t(capability.promptKey))}
-            className="min-w-0 rounded-2xl border border-gray-200 bg-white p-3 text-left shadow-card transition-shadow hover:shadow-card-hover sm:p-4"
+            className="min-w-0 rounded-2xl border border-border bg-card p-3 text-left text-card-foreground shadow-card transition-[border-color,box-shadow,transform] hover:border-primary/30 hover:shadow-card-hover sm:p-4"
           >
-            <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-xl bg-primary/8">
+            <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-xl bg-accent">
               <Icon className="h-4.5 w-4.5 text-primary" />
             </div>
-            <div className="mb-1 text-sm font-semibold text-gray-900">
+            <div className="mb-1 text-sm font-semibold text-foreground">
               {t(capability.titleKey)}
             </div>
-            <div className="text-[11px] leading-relaxed text-gray-500">
+            <div className="text-[11px] leading-relaxed text-muted-foreground">
               {t(capability.descKey)}
             </div>
           </button>

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

@@ -49,7 +49,7 @@ 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-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+          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-2 focus-visible:ring-primary/25"
           title={projectRoot ?? undefined}
           aria-label={t('chatWelcomeProjectPickerLabel')}
           disabled={!selectable || isSaving}
@@ -57,19 +57,19 @@ export function ChatWelcomeProjectPicker({
           <FolderOpen className="h-4 w-4 shrink-0" />
           <span className="truncate">{projectLabel}</span>
           {isDefaultProject ? (
-            <span className="shrink-0 text-xs font-normal text-gray-400">
+            <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-gray-400" />
+          <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
         </button>
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        className="flex w-[min(20rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-gray-200/80 bg-white p-0 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+        className="flex w-[min(20rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-border bg-popover p-0 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
         style={{ maxHeight: PROJECT_PICKER_MAX_HEIGHT }}
       >
-        <div className="shrink-0 px-3 pb-2 pt-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400">
+        <div className="shrink-0 px-3 pb-2 pt-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
           {t('chatWelcomeProjectRecentTitle')}
         </div>
         <div className="min-h-0 flex-1 overflow-y-auto px-1.5 pb-1.5">
@@ -78,51 +78,46 @@ 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-gray-50"
+                className="flex w-full min-w-0 items-start gap-2 rounded-xl px-2 py-2 text-left transition-colors hover:bg-accent"
                 title={option.projectRoot}
                 onClick={() => {
                   void selectProjectRoot(option.projectRoot);
                 }}
               >
-                <FolderOpen className="mt-0.5 h-4 w-4 shrink-0 text-gray-400" />
+                <FolderOpen className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/70" />
                 <span className="min-w-0 flex-1">
                   <span className="flex min-w-0 items-center gap-1.5">
-                    <span className="truncate text-[13px] font-semibold text-gray-800">
+                    <span className="truncate text-[13px] font-semibold text-foreground">
                       {option.projectName}
                     </span>
-                    {option.isDefault ? (
-                      <span className="shrink-0 text-[10px] font-medium text-gray-400">
-                        {t('chatWelcomeProjectDefaultBadge')}
-                      </span>
-                    ) : null}
                   </span>
-                  <span className="block truncate text-[11px] leading-4 text-gray-500">
+                  <span className="block truncate text-[11px] leading-4 text-muted-foreground">
                     {option.projectRoot}
                   </span>
                 </span>
                 {option.sessionCount > 0 ? (
-                  <span className="mt-0.5 shrink-0 rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500">
+                  <span className="mt-0.5 shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
                     {option.sessionCount}
                   </span>
                 ) : null}
               </button>
             ))
           ) : (
-            <div className="px-2 py-5 text-center text-xs text-gray-400">
+            <div className="px-2 py-5 text-center text-xs text-muted-foreground">
               {t('chatWelcomeProjectNoRecent')}
             </div>
           )}
         </div>
-        <div className="shrink-0 border-t border-gray-100 p-1.5">
+        <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-gray-700 transition-colors hover:bg-gray-50"
+            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"
             onClick={() => {
               setIsOpen(false);
               onOpenProjectDialog();
             }}
           >
-            <FolderOpen className="h-4 w-4 shrink-0 text-gray-400" />
+            <FolderOpen className="h-4 w-4 shrink-0 text-muted-foreground/70" />
             <span>{t('chatWelcomeProjectOpenFolder')}</span>
           </button>
         </div>