@nextclaw/ui 0.26.5 → 0.27.1

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

@@ -9,12 +9,15 @@ import type { ChatWelcomeProjectOption } from '@/features/chat/features/welcome/
 import type { ChatSessionTypeOption } from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 import type { AgentProfileView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
+import type { ChatWelcomeContinuation } from '@/features/chat/features/welcome/utils/chat-welcome-continuation.utils';
 
 type SessionTypeOption = ChatSessionTypeOption;
 
 type ChatWelcomeProps = {
   agents: AgentProfileView[];
   inputSlot?: ReactNode;
+  hasDraftContent?: boolean;
+  continuation?: ChatWelcomeContinuation | null;
   defaultProjectRoot?: string | null;
   projectOptions: readonly ChatWelcomeProjectOption[];
   selectedAgentId: string;
@@ -31,6 +34,8 @@ export function ChatWelcome({
   agents,
   defaultProjectRoot,
   inputSlot,
+  hasDraftContent = false,
+  continuation,
   projectOptions,
   selectedAgentId,
   selectedProjectRoot,
@@ -64,18 +69,18 @@ export function ChatWelcome({
     <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 leading-tight text-foreground sm:text-[2rem]">
+          <h2 className="text-2xl font-[number:var(--welcome-title-weight)] leading-tight text-[hsl(var(--welcome-title-foreground))] sm:text-[1.75rem]">
             {t('chatWelcomeTitle')}
           </h2>
         </div>
 
         {inputSlot ? <div className="mt-6">{inputSlot}</div> : null}
 
-        <div className="mt-2 flex justify-center px-1">
+        <div className="mt-1.5 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"
+            className="flex min-w-0 max-w-full flex-wrap items-center justify-center gap-x-1 gap-y-0.5 text-xs text-muted-foreground"
           >
             {onSelectProjectRoot ? (
               <ChatWelcomeProjectPicker
@@ -101,7 +106,12 @@ export function ChatWelcome({
           </div>
         </div>
 
-        <ChatWelcomePromptSuggestions onSelectPrompt={onSelectPrompt} />
+        <ChatWelcomePromptSuggestions
+          hasDraftContent={hasDraftContent}
+          hasProject={Boolean(selectedProjectRoot)}
+          continuation={continuation}
+          onSelectPrompt={onSelectPrompt}
+        />
       </div>
 
       {onSelectProjectRoot ? (

package/src/features/chat/features/welcome/utils/__tests__/chat-welcome-continuation.utils.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import type { NcpSessionSummaryView } from '@/shared/lib/api';
+import { resolveChatWelcomeContinuation } from '@/features/chat/features/welcome/utils/chat-welcome-continuation.utils';
+
+const summary = (overrides: Partial<NcpSessionSummaryView> = {}): NcpSessionSummaryView => ({
+  sessionId: 'original', agentId: 'main', messageCount: 2,
+  updatedAt: '2026-09-16T10:00:00Z',
+  metadata: { label: 'Project plan', project_root: '/project' },
+  ...overrides,
+});
+const resolve = (sessions: NcpSessionSummaryView[], projectRoot = '/project') =>
+  resolveChatWelcomeContinuation({ sessions, projectRoot, defaultProjectRoot: '/default', agentId: 'main' });
+
+describe('resolveChatWelcomeContinuation', () => {
+  it('selects by message activity without changing source ordering', () => {
+    const sessions = [summary({ sessionId: 'old', lastMessageAt: '2026-09-10T10:00:00Z' }), summary()];
+    expect(resolve(sessions)?.sessionKey).toBe('original');
+    expect(sessions[0].sessionId).toBe('old');
+  });
+
+  it('excludes other agents, projects, empty, untitled and child sessions', () => {
+    expect(resolve([
+      summary({ agentId: 'other' }), summary({ messageCount: 0 }),
+      summary({ metadata: { project_root: '/other', label: 'Other' } }),
+      summary({ metadata: { project_root: '/project' } }),
+      summary({ metadata: { project_root: '/project', label: 'Child', parentSessionId: 'parent' } }),
+    ])).toBeNull();
+  });
+
+  it('uses the default workspace for old sessions without project metadata', () => {
+    const sessions = [summary({ metadata: { label: 'Previous discussion' } })];
+    expect(resolve(sessions, '/default')?.title).toBe('Previous discussion');
+    expect(resolve(sessions)).toBeNull();
+  });
+
+  it('respects a working directory when project metadata is absent', () => {
+    expect(resolve([summary({ metadata: { label: 'Working directory' }, workingDir: '/elsewhere' })])).toBeNull();
+    expect(resolve([])).toBeNull();
+  });
+});

package/src/features/chat/features/welcome/utils/chat-welcome-continuation.utils.ts

@@ -0,0 +1,21 @@
+import { adaptNcpSessionSummaries } from '@/features/chat/features/session/utils/ncp-session-adapter.utils';
+import type { NcpSessionSummaryView } from '@/shared/lib/api';
+
+export type ChatWelcomeContinuation = { sessionKey: string; title: string };
+
+export function resolveChatWelcomeContinuation(params: {
+  sessions: readonly NcpSessionSummaryView[];
+  projectRoot: string | null;
+  defaultProjectRoot: string | null;
+  agentId: string;
+}): ChatWelcomeContinuation | null {
+  const candidates = adaptNcpSessionSummaries([...params.sessions]).filter((session) =>
+    !session.isChildSession && session.messageCount > 0 && session.label?.trim() &&
+    (session.agentId ?? 'main') === params.agentId &&
+    (session.projectRoot ?? session.workingDir ?? params.defaultProjectRoot) === params.projectRoot,
+  );
+  const activityAt = (session: typeof candidates[number]) =>
+    Date.parse(session.lastMessageAt ?? session.updatedAt) || 0;
+  const recent = candidates.sort((a, b) => activityAt(b) - activityAt(a))[0];
+  return recent ? { sessionKey: recent.key, title: recent.label!.trim() } : null;
+}

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-file-preview.selection.test.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
 
 const onTextExcerptAdd = vi.fn();
@@ -37,6 +37,18 @@ vi.mock("@nextclaw/agent-chat-ui", () => ({
 }));
 
 describe("ChatSessionWorkspaceFilePreview selection", () => {
+  afterEach(cleanup);
+
+  it("does not offer an action when no composer callback is connected", () => {
+    render(<ChatSessionWorkspaceFilePreview
+      file={{ key: "boot", parentSessionKey: null, path: "BOOT.md", label: "BOOT.md", viewMode: "preview" }}
+      sessionProjectRoot={null}
+      sessionWorkingDir={null}
+      onFileOpen={vi.fn()}
+    />);
+    expect(screen.queryByRole("button", { name: "select excerpt" })).toBeNull();
+  });
+
   it("uses the resolved absolute path when a shell-style workspace root cannot be compared in the browser", () => {
     render(
       <ChatSessionWorkspaceFilePreview

package/src/features/chat/features/workspace/components/__tests__/session-cron-job-content.test.tsx

@@ -8,10 +8,14 @@ import { setLanguage } from "@/shared/lib/i18n";
 import { SessionCronJobContent } from "@/features/chat/features/workspace/components/session-cron-job-content";
 
 const mocks = vi.hoisted(() => ({
+  openResource: vi.fn(),
   deleteJob: vi.fn(),
   runJob: vi.fn(),
   toggleJob: vi.fn(),
 }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { open: mocks.openResource } }) }));
+vi.mock("react-router-dom", () => ({ useNavigate: () => vi.fn() }));
+vi.mock("@/features/right-panel-resources", () => ({ pageResourceFromSystemObject: (type: string, id: string) => ({ uri: `nextclaw://objects/${type}/${id}` }) }));
 
 vi.mock("@/features/cron", () => ({
   CronJobDetailDialog: ({ job, open }: { job: CronJobView | null; open: boolean }) => (
@@ -73,6 +77,6 @@ describe("SessionCronJobContent", () => {
     expect(mocks.runJob).toHaveBeenCalledWith(job);
 
     await user.click(screen.getByRole("button", { name: "查看任务详情" }));
-    expect(screen.getByRole("dialog").textContent).toContain(job.payload.message);
+    expect(mocks.openResource).toHaveBeenCalledWith({ uri: "nextclaw://objects/cron-job/paint-daily" }, "default", expect.any(Function));
   });
 });

package/src/features/chat/features/workspace/components/chat-session-workspace-directory-browser.tsx

@@ -359,7 +359,7 @@ function WorkspaceDirectoryBrowserReady({
 
   const content = (
     <div
-      className="flex h-full min-h-0 flex-col bg-white"
+      className="flex h-full min-h-0 flex-col bg-background"
       onContextMenu={(event) => {
         if (!(event.target as HTMLElement).closest('[data-workspace-tree-entry]')) clearSelection();
       }}

package/src/features/chat/features/workspace/components/chat-session-workspace-file-breadcrumbs.tsx

@@ -44,11 +44,7 @@ function WorkspaceBreadcrumbSegmentButton({
           aria-current={segment.isCurrent ? 'page' : undefined}
           className={cn(
             'inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
-            segment.kind === 'workspace'
-              ? 'bg-[var(--interaction-selection)] text-foreground hover:bg-[var(--interaction-selection)]'
-              : segment.isCurrent
-                ? 'bg-gray-200/70 text-gray-900'
-                : 'text-gray-500',
+            segment.isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground',
           )}
           disabled={!segment.browsePath}
         >
@@ -115,7 +111,7 @@ export function ChatSessionWorkspaceFileBreadcrumbs({
     <div
       data-testid="workspace-file-breadcrumbs"
       title={breadcrumb.fullPath}
-      className="flex h-8 min-w-0 shrink-0 items-center border-b border-gray-200/80 bg-gray-50/55"
+      className="flex h-7 min-w-0 shrink-0 items-center border-b border-border/40 bg-muted text-foreground"
     >
       {leading ? <div className="flex h-full shrink-0 items-center pl-1 pr-0.5">{leading}</div> : null}
       <div
@@ -128,7 +124,7 @@ export function ChatSessionWorkspaceFileBreadcrumbs({
             <Fragment key={segment.key}>
               <WorkspaceBreadcrumbSegmentButton segment={segment} onFileOpen={onFileOpen} />
               {index < breadcrumb.segments.length - 1 ? (
-                <ChevronRight className="h-3 w-3 shrink-0 text-gray-300" />
+                <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/65" />
               ) : null}
             </Fragment>
           ))}

package/src/features/chat/features/workspace/components/chat-session-workspace-file-preview.tsx

@@ -137,8 +137,8 @@ function WorkspaceFilePreviewStatus({ text, tone = 'muted' }: { text: string; to
   return (
     <div
       className={cn(
-        'flex h-full items-center justify-center px-6 text-center text-sm',
-        tone === 'error' ? 'text-rose-600' : 'text-gray-500',
+        'flex h-full items-center justify-center bg-background px-6 text-center text-sm',
+        tone === 'error' ? 'text-destructive' : 'text-muted-foreground',
       )}
     >
       {text}
@@ -260,7 +260,7 @@ function WorkspacePreviewBody({
       <div
         ref={markdownScrollRef}
         onScroll={onMarkdownScroll}
-        className="h-full overflow-auto custom-scrollbar px-5 py-4"
+        className="h-full overflow-auto bg-background text-foreground custom-scrollbar px-5 py-4"
       >
         <ChatMessageMarkdown
           text={previewText}
@@ -269,6 +269,7 @@ function WorkspacePreviewBody({
             copyCodeLabel: t('chatCodeCopy'),
             copiedCodeLabel: t('chatCodeCopied'),
             frontmatterLabel: t('chatMarkdownFrontmatter'),
+            detailsLabel: t('chatMarkdownDetails'),
           }}
           onFileOpen={onFileOpen}
           resolveFileContentUrl={(action) => buildServerPathContentUrl(action.path, fileBasePath)}
@@ -429,7 +430,7 @@ export function ChatSessionWorkspaceFilePreview({
   );
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-white">
+    <div className="flex h-full min-h-0 flex-col bg-background">
       {showBreadcrumbs ? (
         <ChatSessionWorkspaceFileBreadcrumbs
           breadcrumb={breadcrumb}
@@ -454,7 +455,7 @@ export function ChatSessionWorkspaceFilePreview({
       <div className="flex-1 min-h-0 overflow-hidden">
         {file.viewMode === 'diff' ? (
           <WorkspaceDiffBody diffBlock={diffBlock} fileKey={file.key} />
-        ) : excerptPath && previewText ? (
+        ) : excerptPath && previewText && onTextExcerptAdd ? (
           <WorkspaceTextSelectionMenu
             fileLabel={file.label?.trim() || excerptPath.split('/').at(-1) || excerptPath}
             filePath={excerptPath}

package/src/features/chat/features/workspace/components/chat-session-workspace-panel-content.tsx

@@ -66,17 +66,17 @@ function WorkspaceOverviewEntry({
   return (
     <button
       type="button"
-      className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+      className="group flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors first:rounded-t-lg last:rounded-b-lg hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/25"
       onClick={onClick}
     >
-      <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
+      <span className="inline-flex h-7 w-7 shrink-0 items-center justify-center text-muted-foreground">
         {icon}
       </span>
       <span className="min-w-0 flex-1">
         <span className="flex items-center gap-2 text-sm font-medium text-gray-900">
           <span className="truncate">{title}</span>
           {typeof count === 'number' ? (
-            <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold tabular-nums text-gray-500">
+            <span className="min-w-5 rounded bg-background px-1.5 py-0.5 text-center text-[11px] font-medium tabular-nums text-muted-foreground">
               {count}
             </span>
           ) : null}
@@ -84,7 +84,7 @@ function WorkspaceOverviewEntry({
         </span>
         <span className="mt-0.5 block text-xs leading-5 text-gray-500">{description}</span>
       </span>
-      <ChevronRight className="h-4 w-4 shrink-0 text-gray-300 transition-transform group-hover:translate-x-0.5 group-hover:text-gray-500" />
+      <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60 group-hover:text-muted-foreground" />
     </button>
   );
 }
@@ -102,52 +102,52 @@ function WorkspaceOverview({
   const observationsQuery = useNcpSessionObservations(sessionKey);
 
   return (
-    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
+    <div className="h-full overflow-auto bg-background px-4 py-5 custom-scrollbar">
       <div className="mx-auto max-w-xl">
         <h2 className="text-base font-semibold text-gray-900">{t('chatWorkspaceOverview')}</h2>
         <p className="mt-1 text-xs leading-5 text-gray-500">{t('chatWorkspaceOverviewDescription')}</p>
-        <div className="mt-4 space-y-2">
+        <div className="mt-3 divide-y divide-border rounded-lg border border-border bg-muted/40">
           <WorkspaceOverviewEntry
-            count={observationsQuery.data?.counts.total ?? 0}
-            description={t('chatWorkspaceContinuousAttentionDescription')}
-            icon={<Eye className="h-4 w-4" />}
-            title={t('chatWorkspaceContinuousAttention')}
+            description={t('chatWorkspaceProjectFilesDescription')}
+            icon={<FolderTree className="h-4 w-4" />}
+            title={t('chatWorkspaceProjectFiles')}
             onClick={() => {
               if (sessionKey) {
-                presenter.chatThreadManager.openContinuousAttention(sessionKey);
+                presenter.chatThreadManager.openProjectFiles(sessionKey);
               }
             }}
           />
           <WorkspaceOverviewEntry
-            count={childSessionTabs.length}
-            description={t('chatWorkspaceChildSessionsDescription')}
-            icon={<GitBranch className="h-4 w-4" />}
-            runStatus={childSessionTabs.some((tab) => tab.runStatus === 'running') ? 'running' : undefined}
-            title={t('chatWorkspaceChildSessions')}
+            count={sessionCronJobs.length}
+            description={t('chatWorkspaceSessionCronJobsDescription')}
+            icon={<AlarmClock className="h-4 w-4" />}
+            title={t('chatWorkspaceSessionCronJobs')}
             onClick={() => {
               if (sessionKey) {
-                presenter.chatThreadManager.openChildSessions(sessionKey);
+                presenter.chatThreadManager.openSessionCronPanel(sessionKey);
               }
             }}
           />
           <WorkspaceOverviewEntry
-            count={sessionCronJobs.length}
-            description={t('chatWorkspaceSessionCronJobsDescription')}
-            icon={<AlarmClock className="h-4 w-4" />}
-            title={t('chatWorkspaceSessionCronJobs')}
+            count={childSessionTabs.length}
+            description={t('chatWorkspaceChildSessionsDescription')}
+            icon={<GitBranch className="h-4 w-4" />}
+            runStatus={childSessionTabs.some((tab) => tab.runStatus === 'running') ? 'running' : undefined}
+            title={t('chatWorkspaceChildSessions')}
             onClick={() => {
               if (sessionKey) {
-                presenter.chatThreadManager.openSessionCronPanel(sessionKey);
+                presenter.chatThreadManager.openChildSessions(sessionKey);
               }
             }}
           />
           <WorkspaceOverviewEntry
-            description={t('chatWorkspaceProjectFilesDescription')}
-            icon={<FolderTree className="h-4 w-4" />}
-            title={t('chatWorkspaceProjectFiles')}
+            count={observationsQuery.data?.counts.total ?? 0}
+            description={t('chatWorkspaceContinuousAttentionDescription')}
+            icon={<Eye className="h-4 w-4" />}
+            title={t('chatWorkspaceContinuousAttention')}
             onClick={() => {
               if (sessionKey) {
-                presenter.chatThreadManager.openProjectFiles(sessionKey);
+                presenter.chatThreadManager.openContinuousAttention(sessionKey);
               }
             }}
           />
@@ -372,7 +372,7 @@ export function ChatSessionWorkspacePanelContent({
         data-theme-surface="workspace-explorer"
         data-mode={projectFilesActive ? 'full' : explorerOverlay ? 'overlay' : 'side'}
         className={cn(
-          'relative min-h-0 shrink-0 flex-col border-r border-gray-200/80 bg-white',
+          'relative min-h-0 shrink-0 flex-col border-r border-border bg-background',
           showExplorer ? 'flex' : 'hidden',
           projectFilesActive ? 'flex-1 border-r-0' : null,
           explorerOverlay ? 'absolute inset-y-0 left-0 z-20 w-[min(320px,86%)] shadow-xl' : null,

package/src/features/chat/features/workspace/components/overview/chat-session-continuous-attention.tsx

@@ -51,7 +51,7 @@ function ObservationRow({
     : t('chatWorkspaceContinuousAttentionResume');
 
   return (
-    <article className="rounded-xl border border-gray-200/80 bg-white p-3 shadow-sm">
+    <article className="rounded-lg border border-border bg-muted/30 p-3">
       <div className="flex min-w-0 items-start gap-3">
         <span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500">
           {item.kind === 'context' ? <Eye className="h-4 w-4" /> : <Inbox className="h-4 w-4" />}
@@ -148,11 +148,11 @@ export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: str
   };
 
   return (
-    <div className="h-full overflow-auto bg-gray-50/45 px-4 py-5 custom-scrollbar">
+    <div className="h-full overflow-auto bg-background px-4 py-5 custom-scrollbar">
       <div className="mx-auto max-w-xl">
         <ConfirmDialog />
         <div className="flex items-start gap-3">
-          <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
             <Eye className="h-4 w-4" />
           </span>
           <div className="min-w-0">
@@ -162,7 +162,7 @@ export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: str
         </div>
 
         {view ? (
-          <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4">
+          <div className="mt-4 grid grid-cols-2 gap-1.5 rounded-lg border border-border p-2">
             <SummaryCard label={t('chatWorkspaceContinuousAttentionTotal')} value={view.counts.total} />
             <SummaryCard label={t('chatWorkspaceContinuousAttentionState')} value={view.counts.context} />
             <SummaryCard label={t('chatWorkspaceContinuousAttentionEvents')} value={view.counts.events} />
@@ -170,7 +170,7 @@ export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: str
           </div>
         ) : null}
 
-        <div className="mt-4 flex rounded-lg border border-gray-200 bg-white p-1" role="tablist">
+        <div className="mt-3 flex rounded-lg border border-border bg-muted/40 p-1" role="tablist">
           {(['context', 'events'] as const).map((group) => {
             const count = group === 'context' ? (view?.counts.context ?? 0) : (view?.counts.events ?? 0);
             return (
@@ -191,7 +191,7 @@ export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: str
 
         {query.isPending ? (
           <div className="mt-3 space-y-2" aria-label={t('chatWorkspaceContinuousAttentionLoading')}>
-            {[0, 1].map((item) => <div key={item} className="h-28 animate-pulse rounded-xl border border-gray-200 bg-white" />)}
+            {[0, 1].map((item) => <div key={item} className="h-28 animate-pulse rounded-lg border border-border bg-muted/40" />)}
           </div>
         ) : query.isError ? (
           <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-5 text-center">
@@ -202,8 +202,8 @@ export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: str
             </button>
           </div>
         ) : items.length === 0 ? (
-          <div className="mt-4 rounded-xl border border-dashed border-gray-300 bg-white px-4 py-8 text-center">
-            <Clock3 className="mx-auto h-5 w-5 text-gray-300" />
+          <div className="mt-3 rounded-lg border border-border bg-muted/30 px-4 py-6 text-center">
+            <Clock3 className="mx-auto h-5 w-5 text-muted-foreground" />
             <p className="mt-2 text-sm font-medium text-gray-700">{t('chatWorkspaceContinuousAttentionEmpty')}</p>
             <p className="mt-1 text-xs leading-5 text-gray-500">{t('chatWorkspaceContinuousAttentionEmptyDescription')}</p>
           </div>
@@ -226,9 +226,9 @@ export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: str
 
 function SummaryCard({ label, value }: { label: string; value: number }) {
   return (
-    <div className="rounded-lg border border-gray-200/80 bg-white px-3 py-2">
-      <div className="text-[10px] uppercase tracking-wide text-gray-400">{label}</div>
-      <div className="mt-1 text-lg font-semibold tabular-nums text-gray-900">{value}</div>
+    <div className="rounded-md bg-muted/60 px-2.5 py-2">
+      <div className="text-[11px] text-muted-foreground">{label}</div>
+      <div className="mt-0.5 text-base font-medium tabular-nums text-foreground">{value}</div>
     </div>
   );
 }

package/src/features/chat/features/workspace/components/overview/chat-session-token-usage.tsx

@@ -25,9 +25,9 @@ function TokenUsageStatusBadge({ status }: { status: 'reported' | 'partial' | 'u
   return (
     <span
       className={cn(
-        'inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[10px] font-semibold',
+        'inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[10px] font-medium',
         status === 'reported'
-          ? 'bg-emerald-50 text-emerald-700'
+          ? 'text-muted-foreground'
           : status === 'partial'
             ? 'bg-amber-50 text-amber-700'
             : 'bg-gray-100 text-gray-500',
@@ -46,9 +46,9 @@ function TokenUsageStatusBadge({ status }: { status: 'reported' | 'partial' | 'u
 
 function TokenUsageMetric({ label, value }: { label: string; value: string }) {
   return (
-    <div className="min-w-0 rounded-md bg-gray-50 px-2.5 py-2">
-      <div className="truncate text-[10px] font-medium text-gray-500">{label}</div>
-      <div className="mt-0.5 truncate text-sm font-semibold tabular-nums text-gray-900">
+    <div className="min-w-0 rounded-md bg-muted/60 px-2.5 py-2 first:bg-muted first:[&>div:last-child]:font-semibold">
+      <div className="text-[11px] text-muted-foreground">{label}</div>
+      <div className="mt-0.5 break-words text-sm font-medium tabular-nums text-foreground">
         {value}
       </div>
     </div>
@@ -62,14 +62,14 @@ export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | nul
   return (
     <section
       aria-labelledby="chat-workspace-token-usage-title"
-      className="mt-4 rounded-lg border border-gray-200/80 bg-white p-3"
+      className="mt-4 rounded-lg border border-border p-3"
     >
-      <div className="flex items-start gap-3">
-        <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
+      <div className="flex items-start gap-2">
+        <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground">
           <ChartNoAxesColumn className="h-4 w-4" />
         </span>
         <div className="min-w-0 flex-1">
-          <div className="flex items-center justify-between gap-2">
+          <div className="flex flex-wrap items-center justify-between gap-2">
             <h3 id="chat-workspace-token-usage-title" className="text-sm font-semibold text-gray-900">
               {t('chatWorkspaceTokenUsage')}
             </h3>
@@ -136,10 +136,10 @@ export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | nul
             <div className="mb-1.5 text-[11px] font-medium text-gray-700">
               {t('chatWorkspaceTokenUsageByModel')}
             </div>
-            <div className="space-y-1.5">
+            <div className="space-y-2">
               {usage.models.map((modelUsage) => (
-                <div key={modelUsage.model} className="rounded-md border border-gray-200/70 px-2.5 py-2">
-                  <div className="flex min-w-0 items-center justify-between gap-2">
+                <div key={modelUsage.model} className="rounded-md border border-border bg-muted/30 px-2.5 py-2">
+                  <div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
                     <span className="min-w-0 truncate text-xs font-semibold text-gray-900" title={modelUsage.model}>
                       {modelUsage.model}
                     </span>
@@ -158,16 +158,16 @@ export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | nul
                       formatCacheHitRate(modelUsage.cacheHitRate),
                     )}
                   </div>
-                  <dl className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 text-[10px] sm:grid-cols-4">
+                  <dl className="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 text-[11px]">
                     {[
                       [t('chatWorkspaceTokenUsageInput'), modelUsage.inputTokens],
                       [t('chatWorkspaceTokenUsageOutput'), modelUsage.outputTokens],
                       [t('chatWorkspaceTokenUsageCachedInput'), modelUsage.cachedInputTokens],
                       [t('chatWorkspaceTokenUsageTotal'), modelUsage.totalTokens],
                     ].map(([label, value]) => (
-                      <div key={String(label)} className="flex min-w-0 items-center justify-between gap-1 sm:block">
+                      <div key={String(label)} className="min-w-0">
                         <dt className="truncate text-gray-500">{label}</dt>
-                        <dd className="shrink-0 font-semibold tabular-nums text-gray-800 sm:mt-0.5">
+                        <dd className="mt-0.5 break-words font-medium tabular-nums text-gray-800">
                           {formatTokenCount(value as number | null)}
                         </dd>
                       </div>

package/src/features/chat/features/workspace/components/project-files/workspace-directory-tree.tsx

@@ -77,9 +77,9 @@ function EntryIcon({
     return <FileTypeIcon fileName={fileName} />;
   }
   return isExpanded ? (
-    <FolderOpen className="h-4 w-4 shrink-0 text-amber-500" />
+    <FolderOpen className="h-4 w-4 shrink-0 text-muted-foreground" />
   ) : (
-    <Folder className="h-4 w-4 shrink-0 text-amber-500" />
+    <Folder className="h-4 w-4 shrink-0 text-muted-foreground" />
   );
 }
 

package/src/features/chat/features/workspace/components/project-files/workspace-new-folder-tree-item.tsx

@@ -64,7 +64,7 @@ export function WorkspaceNewFolderTreeItem({
         {kind === 'file' ? (
           <File className="h-4 w-4 shrink-0 text-gray-500" />
         ) : (
-          <Folder className="h-4 w-4 shrink-0 text-amber-500" />
+          <Folder className="h-4 w-4 shrink-0 text-muted-foreground" />
         )}
         <Input
           density="compact"

package/src/features/chat/features/workspace/components/project-files/workspace-project-files-toolbar.tsx

@@ -19,9 +19,9 @@ export function WorkspaceProjectFilesToolbar({
   onRefresh: () => void;
 }) {
   return (
-    <div className="flex h-9 shrink-0 items-center gap-0.5 border-b border-gray-200/80 bg-gray-50/55 px-1.5">
+    <div className="flex h-9 shrink-0 items-center gap-0.5 border-b border-border bg-background px-1.5">
       <span
-        className="min-w-0 flex-1 truncate px-0.5 text-[11px] font-semibold uppercase tracking-[0.03em] text-gray-800"
+        className="min-w-0 flex-1 truncate px-1 text-xs font-medium text-muted-foreground"
         title={rootLabel}
       >
         {rootLabel}