@nextclaw/ui 0.15.21 → 0.15.23

package/src/app/styles/design-system.css

@@ -5,6 +5,12 @@
  */
 
 @layer base {
+   input:focus,
+   textarea:focus {
+      outline: none;
+      box-shadow: none;
+   }
+
    :root {
       color-scheme: light;
 
@@ -56,6 +62,10 @@
       --foreground-tertiary: var(--gray-500);
       --foreground-muted: var(--gray-400);
 
+      /* Links */
+      --link-foreground: 211 73% 45%;
+      --link-foreground-hover: 211 73% 38%;
+
       /* Primary (Brand) */
       --primary: var(--brand-500);
       --primary-hover: var(--brand-600);
@@ -70,6 +80,9 @@
       /* Accent */
       --accent: var(--brand-50);
       --accent-foreground: var(--brand-700);
+      --interaction-hover: hsl(0 0% 96%);
+      --interaction-selection: hsl(211 100% 92%);
+      --interaction-selection-border: hsl(211 75% 84%);
 
       /* Muted */
       --muted: var(--gray-100);
@@ -364,19 +377,6 @@
       color: hsl(var(--gray-800));
    }
 
-   /* User bubble is light in work theme; keep clickable skill tokens as link-colored text. */
-   :root[data-theme="work"] .nextclaw-chat-message-user .nextclaw-chat-inline-token {
-      border-color: transparent;
-      background-color: transparent;
-      color: var(--md-link, #1f73c9);
-      box-shadow: none;
-   }
-
-   :root[data-theme="work"] .nextclaw-chat-message-user .nextclaw-chat-inline-token > span:first-child {
-      color: currentColor;
-      opacity: 0.8;
-   }
-
 }
 
 @layer base {
@@ -717,6 +717,9 @@
       --secondary-foreground: var(--gray-800);
       --accent: 151 32% 18%;
       --accent-foreground: 148 34% 84%;
+      --interaction-hover: hsl(var(--gray-200));
+      --interaction-selection: hsl(211 48% 30%);
+      --interaction-selection-border: hsl(211 48% 42%);
       --muted: var(--gray-100);
       --muted-foreground: var(--gray-500);
       --destructive: 0 70% 52%;
@@ -823,6 +826,13 @@
    }
 }
 
+@layer base {
+   :root[data-theme-appearance="dark"] {
+      --link-foreground: 213 94% 68%;
+      --link-foreground-hover: 213 97% 79%;
+   }
+}
+
 @layer utilities {
    /* ========================================
      UTILITY CLASSES

package/src/features/agents/components/__tests__/agents-page.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
-import type * as ReactRouterDom from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { AgentsPage } from "@/features/agents";
 import {
@@ -14,8 +13,7 @@ const mocks = vi.hoisted(() => ({
   createAgent: vi.fn(),
   updateAgent: vi.fn(),
   deleteAgent: vi.fn(),
-  navigate: vi.fn(),
-  requestDraft: vi.fn(),
+  startAgentDraftChat: vi.fn(),
   sessionTypesQuery: {
     data: {
       defaultType: "native",
@@ -117,22 +115,6 @@ function createPersistStorage() {
   };
 }
 
-vi.mock("react-router-dom", async (importOriginal) => {
-  const actual = await importOriginal<typeof ReactRouterDom>();
-  return {
-    ...actual,
-    useNavigate: () => mocks.navigate,
-  };
-});
-
-vi.mock("@/app/components/app-presenter-provider", () => ({
-  useAppPresenter: () => ({
-    chatDraftIntentManager: {
-      requestDraft: mocks.requestDraft,
-    },
-  }),
-}));
-
 vi.mock("@/shared/hooks/use-agents", () => ({
   useAgents: () => mocks.agentsQuery,
   useCreateAgent: () => ({
@@ -197,7 +179,12 @@ vi.mock("@/features/chat", async () => {
     ...sessionTypeUtils,
     usePresenter: () => ({
       chatSessionListManager: {
-        startAgentDraftChat: (agentId: string) => {
+        startAgentDraftChat: (
+          agentId: string,
+          sessionType: string,
+          prompt?: string,
+        ) => {
+          mocks.startAgentDraftChat(agentId, sessionType, prompt);
           sessionListStore.useChatSessionListStore.getState().setSnapshot({
             selectedAgentId: agentId,
             selectedSessionKey: null,
@@ -231,8 +218,7 @@ describe("AgentsPage", () => {
     mocks.createAgent.mockReset();
     mocks.updateAgent.mockReset();
     mocks.deleteAgent.mockReset();
-    mocks.navigate.mockReset();
-    mocks.requestDraft.mockReset();
+    mocks.startAgentDraftChat.mockReset();
     if (!HTMLElement.prototype.hasPointerCapture) {
       HTMLElement.prototype.hasPointerCapture = () => false;
     }
@@ -263,6 +249,9 @@ describe("AgentsPage", () => {
     renderAgentsPage();
 
     expect(screen.getByText("Agent 管理台")).toBeTruthy();
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Agent 管理台" }),
+    ).toBeTruthy();
     expect(screen.getByText("~/.nextclaw/workspace")).toBeTruthy();
     expect(screen.getAllByRole("button", { name: "开始对话" })).toHaveLength(2);
     expect(screen.getAllByRole("button", { name: "更多操作" })).toHaveLength(2);
@@ -276,8 +265,9 @@ describe("AgentsPage", () => {
 
     await user.click(screen.getByRole("button", { name: "新增 Agent" }));
 
-    expect(mocks.navigate).toHaveBeenCalledWith("/chat");
-    expect(mocks.requestDraft).toHaveBeenCalledWith(
+    expect(mocks.startAgentDraftChat).toHaveBeenCalledWith(
+      "main",
+      "native",
       expect.stringContaining("请直接创建一个默认示例 Agent，不要问我问题"),
     );
     expect(mocks.createAgent).not.toHaveBeenCalled();
@@ -288,6 +278,9 @@ describe("AgentsPage", () => {
     await user.click(detailsEditButtons[detailsEditButtons.length - 1]);
 
     expect(screen.getByText("编辑 Agent 身份")).toBeTruthy();
+    const editDialog = screen.getByText("编辑 Agent 身份").closest("[role='dialog']");
+    expect(editDialog?.className).toContain("bg-popover");
+    expect(editDialog?.className).not.toContain("linear-gradient");
     expect(screen.getByText("主目录保持不变")).toBeTruthy();
     expect(screen.getByDisplayValue("Researcher")).toBeTruthy();
     expect(
@@ -310,6 +303,7 @@ describe("AgentsPage", () => {
     expect(screen.queryByRole("button", { name: "保存编辑" })).toBeNull();
     const detailsDialog = screen.getByText("身份").closest("[role='dialog']");
     expect(detailsDialog?.className).toContain("sm:max-w-2xl");
+    expect(detailsDialog?.className).toContain("bg-popover");
     const detailLists = Array.from(detailsDialog?.querySelectorAll("dl") ?? []);
     expect(detailLists.length).toBeGreaterThan(0);
     expect(
@@ -444,6 +438,24 @@ describe("AgentsPage", () => {
     });
   });
 
+  it("does not silently clamp an undersized context window before saving", async () => {
+    const user = userEvent.setup();
+    renderAgentsPage();
+
+    await user.click(screen.getAllByRole("button", { name: "更多操作" })[1]);
+    await user.click(screen.getByRole("button", { name: "编辑" }));
+    await user.click(screen.getByText("高级配置"));
+    fireEvent.change(screen.getByLabelText("上下文窗口大小"), {
+      target: { value: "100" },
+    });
+    await user.click(screen.getByRole("button", { name: "保存编辑" }));
+
+    expect(mocks.updateAgent).toHaveBeenCalledWith({
+      agentId: "researcher",
+      data: expect.objectContaining({ contextTokens: 100 }),
+    });
+  });
+
   it("starts a draft chat with the agent selected through the session list owner", async () => {
     const user = userEvent.setup();
 

package/src/features/agents/components/agent-advanced-config-fields.tsx

@@ -15,16 +15,16 @@ export function AgentAdvancedConfigFields({
   onChange,
 }: AgentAdvancedConfigFieldsProps) {
   return (
-    <details className="group rounded-2xl border border-gray-200 bg-white">
-      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-gray-800 [&::-webkit-details-marker]:hidden">
+    <details className="group rounded-2xl border border-border bg-card">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-foreground [&::-webkit-details-marker]:hidden">
         <span className="flex min-w-0 items-center gap-2">
-          <Settings2 className="h-4 w-4 shrink-0 text-gray-400" />
+          <Settings2 className="h-4 w-4 shrink-0 text-muted-foreground" />
           <span className="truncate">{t("agentsAdvancedConfigToggle")}</span>
         </span>
-        <ChevronDown className="h-4 w-4 shrink-0 text-gray-400 transition-transform group-open:rotate-180" />
+        <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" />
       </summary>
-      <div className="space-y-4 border-t border-gray-100 px-4 py-4">
-        <p className="text-xs leading-5 text-gray-500">
+      <div className="space-y-4 border-t border-border/60 px-4 py-4">
+        <p className="text-xs leading-5 text-muted-foreground">
           {t("agentsAdvancedConfigDescription")}
         </p>
         <div className="grid gap-4 md:grid-cols-2">
@@ -53,7 +53,7 @@ function AgentNumberField(props: {
   const { label, value, min, step, disabled, onChange } = props;
 
   return (
-    <label className="space-y-2 text-sm font-medium text-gray-700">
+    <label className="space-y-2 text-sm font-medium text-foreground">
       <span>{label}</span>
       <Input
         type="number"

package/src/features/agents/components/agent-details-dialog.tsx

@@ -74,7 +74,7 @@ export function AgentDetailsDialog({
 
   return (
     <Dialog open={agent !== null} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-white p-0 sm:max-h-[720px] sm:max-w-2xl">
+      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[720px] sm:max-w-2xl">
         <div className="shrink-0 px-5 pb-3 pt-5">
           <DialogHeader className="text-left">
             <div className="flex min-w-0 items-center gap-3">
@@ -321,9 +321,9 @@ function DetailSection(props: {
   const { icon: Icon, title, children } = props;
 
   return (
-    <section className="space-y-2 border-t border-gray-100 pt-3 first:border-t-0 first:pt-0">
-      <h3 className="flex items-center gap-1.5 text-xs font-semibold leading-5 text-gray-900">
-        <Icon className="h-3.5 w-3.5 text-gray-400" />
+    <section className="space-y-2 border-t border-border/60 pt-3 first:border-t-0 first:pt-0">
+      <h3 className="flex items-center gap-1.5 text-xs font-semibold leading-5 text-foreground">
+        <Icon className="h-3.5 w-3.5 text-muted-foreground" />
         {title}
       </h3>
       <dl className="grid min-w-0 gap-x-6 gap-y-2.5 pl-5 sm:grid-cols-2">
@@ -361,15 +361,15 @@ function DetailItem(props: {
       )}
     >
       <dt className="flex min-w-0 items-baseline leading-5">
-        <span className="whitespace-nowrap text-xs font-medium text-gray-500">
+        <span className="whitespace-nowrap text-xs font-medium text-muted-foreground">
           {label}
         </span>
       </dt>
       <dd
         className={cn(
-          "min-w-0 break-words text-xs leading-5 text-gray-900",
+          "min-w-0 break-words text-xs leading-5 text-foreground",
           isStructuredValue
-            ? "max-h-28 overflow-auto whitespace-pre-wrap rounded bg-gray-50/70 px-2 py-1.5 text-left"
+            ? "max-h-28 overflow-auto whitespace-pre-wrap rounded bg-muted/50 px-2 py-1.5 text-left"
             : "",
         )}
       >
@@ -387,7 +387,7 @@ function SourceBadge({ source }: { source: DetailSource }) {
     <span
       className={cn(
         "ml-1 whitespace-nowrap text-xs font-normal leading-5",
-        source === "override" ? "text-blue-500" : "text-gray-400",
+        source === "override" ? "text-blue-500" : "text-muted-foreground",
       )}
     >
       （{source === "override"

package/src/features/agents/components/agent-dialogs.tsx

@@ -138,7 +138,7 @@ function AgentRuntimeSelectField({
         </SelectContent>
       </Select>
       {helperText ? (
-        <p className="text-xs text-gray-500">{helperText}</p>
+        <p className="text-xs text-muted-foreground">{helperText}</p>
       ) : null}
     </div>
   );
@@ -238,8 +238,8 @@ function AgentCreateDialogContent(props: {
   );
 
   return (
-    <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-[linear-gradient(180deg,#fff9f1_0%,#ffffff_24%)] p-0 sm:max-h-[760px] sm:max-w-xl">
-      <div className="shrink-0 border-b border-[#f0e2c8] px-6 py-6">
+    <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[760px] sm:max-w-xl">
+      <div className="shrink-0 border-b border-border px-6 py-6">
         <DialogHeader className="text-left">
           <DialogTitle>{t("agentsCreateDialogTitle")}</DialogTitle>
           <DialogDescription>
@@ -319,7 +319,7 @@ function AgentCreateDialogContent(props: {
           />
         </div>
       </div>
-      <DialogFooter className="shrink-0 border-t border-[#f1e7d4] px-6 py-5">
+      <DialogFooter className="shrink-0 border-t border-border px-6 py-5">
         <Button
           type="button"
           variant="ghost"
@@ -366,8 +366,8 @@ function AgentEditDialogContent(props: {
   );
 
   return (
-    <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-[linear-gradient(180deg,#fff9f1_0%,#ffffff_24%)] p-0 sm:max-h-[760px] sm:max-w-xl">
-      <div className="shrink-0 border-b border-[#f0e2c8] px-6 py-6">
+    <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[760px] sm:max-w-xl">
+      <div className="shrink-0 border-b border-border px-6 py-6">
         <DialogHeader className="text-left">
           <DialogTitle>{t("agentsEditDialogTitle")}</DialogTitle>
           <DialogDescription>
@@ -447,7 +447,7 @@ function AgentEditDialogContent(props: {
           />
         </div>
       </div>
-      <DialogFooter className="shrink-0 border-t border-[#f1e7d4] px-6 py-5">
+      <DialogFooter className="shrink-0 border-t border-border px-6 py-5">
         <Button
           type="button"
           variant="ghost"

package/src/features/agents/components/agents-page.tsx

@@ -1,5 +1,4 @@
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import {
   useDeleteAgent,
   useAgents,
@@ -20,7 +19,6 @@ import {
   usePresenter,
   useNcpChatSessionTypes,
 } from "@/features/chat";
-import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { AgentAvatar } from "@/shared/components/common/agent-avatar";
 import { Button } from "@/shared/components/ui/button";
 import { Card, CardContent } from "@/shared/components/ui/card";
@@ -30,7 +28,7 @@ import {
   PopoverTrigger,
 } from "@/shared/components/ui/popover";
 import { TagChip } from "@/shared/components/tags/tag-chip";
-import { PageLayout } from "@/app/components/layout/page-layout";
+import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
 import { t } from "@/shared/lib/i18n";
 import { buildProviderModelCatalog } from "@/shared/lib/provider-models";
 import { cn } from "@/shared/lib/utils";
@@ -51,7 +49,7 @@ import { toast } from "sonner";
 const AGENT_CREATION_PROMPT =
   "请直接创建一个默认示例 Agent，不要问我问题。创建完成后，简单告诉我它能做什么。";
 
-function parseOptionalIntegerField(value: string, min: number): number | null {
+function parseOptionalIntegerField(value: string): number | null {
   const trimmed = value.trim();
   if (!trimmed) {
     return null;
@@ -60,7 +58,7 @@ function parseOptionalIntegerField(value: string, min: number): number | null {
   if (!Number.isFinite(parsed)) {
     throw new Error(t("agentsAdvancedInvalidNumberError"));
   }
-  return Math.max(min, Math.trunc(parsed));
+  return Math.trunc(parsed);
 }
 
 function buildAgentUpdateRequest(
@@ -74,41 +72,10 @@ function buildAgentUpdateRequest(
     ...(form.runtime.trim()
       ? { runtime: form.runtime.trim() }
       : { runtime: "" }),
-    contextTokens: parseOptionalIntegerField(form.contextTokens, 1000),
+    contextTokens: parseOptionalIntegerField(form.contextTokens),
   };
 }
 
-function AgentsHero(props: { agentCount: number; onCreate: () => void }) {
-  const { agentCount, onCreate } = props;
-
-  return (
-    <section className="flex flex-col gap-3 border-b border-gray-200 pb-4 sm:flex-row sm:items-end sm:justify-between">
-      <div className="min-w-0 space-y-1">
-        <div className="flex flex-wrap items-center gap-2">
-          <h1 className="text-xl font-semibold text-gray-950">
-            {t("agentsHeroEyebrow")}
-          </h1>
-          <span className="rounded-full border border-gray-200 bg-white px-2 py-0.5 text-xs font-medium text-gray-500">
-            {agentCount}
-          </span>
-        </div>
-        <p className="max-w-2xl text-sm leading-6 text-gray-500">
-          {t("agentsHeroDescription")}
-        </p>
-      </div>
-      <Button
-        type="button"
-        variant="primary"
-        className="h-9 shrink-0 rounded-xl px-4 text-sm font-semibold"
-        onClick={onCreate}
-      >
-        <Plus className="mr-2 h-4 w-4" />
-        {t("agentsCreateButton")}
-      </Button>
-    </section>
-  );
-}
-
 function AgentActionMenuItem(props: {
   icon: typeof Pencil;
   label: string;
@@ -131,7 +98,7 @@ function AgentActionMenuItem(props: {
         "flex w-full items-center gap-2 rounded-lg 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-foreground hover:bg-muted",
       )}
       onClick={onClick}
       disabled={disabled}
@@ -172,7 +139,7 @@ function AgentListCard(props: {
     : defaultRuntimeLabel;
 
   return (
-    <Card className="group overflow-hidden border border-gray-200 bg-white shadow-none transition-colors duration-200 hover:border-gray-300">
+    <Card className="group overflow-hidden border border-border bg-card shadow-none transition-colors duration-200 hover:border-border/80">
       <CardContent className="relative flex h-full flex-col gap-3 px-3.5 py-3.5">
         <div className="flex items-start gap-2.5 pr-16">
           <AgentAvatar
@@ -183,7 +150,7 @@ function AgentListCard(props: {
           />
           <div className="min-w-0 flex-1 space-y-0.5">
             <div className="flex min-w-0 items-center gap-2">
-              <div className="truncate text-sm font-semibold text-gray-950">
+              <div className="truncate text-sm font-semibold text-foreground">
                 {agent.displayName?.trim() || agent.id}
               </div>
               {agent.builtIn ? (
@@ -196,7 +163,7 @@ function AgentListCard(props: {
                 </TagChip>
               ) : null}
             </div>
-            <div className="truncate text-xs text-gray-400">@{agent.id}</div>
+            <div className="truncate text-xs text-muted-foreground">@{agent.id}</div>
           </div>
         </div>
 
@@ -205,7 +172,7 @@ function AgentListCard(props: {
             type="button"
             variant="ghost"
             size="icon"
-            className="h-8 w-8 rounded-lg text-gray-400 hover:text-gray-800"
+            className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
             aria-label={t("agentsCardStartChat")}
             title={t("agentsCardStartChat")}
             onClick={onStartChat}
@@ -218,7 +185,7 @@ function AgentListCard(props: {
                 type="button"
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 rounded-lg text-gray-400 hover:text-gray-800"
+                className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
                 aria-label={t("chatSessionMoreActions")}
                 title={t("chatSessionMoreActions")}
               >
@@ -250,20 +217,20 @@ function AgentListCard(props: {
           </Popover>
         </div>
 
-        <p className="line-clamp-2 min-h-10 text-sm leading-5 text-gray-600">
+        <p className="line-clamp-2 min-h-10 text-sm leading-5 text-muted-foreground">
           {agent.description?.trim() ||
             (agent.builtIn
               ? t("agentsCardBuiltInSummary")
               : t("agentsCardCustomSummary"))}
         </p>
 
-        <div className="mt-auto grid gap-2 border-t border-gray-100 pt-2 text-xs text-gray-500">
+        <div className="mt-auto grid gap-2 border-t border-border/60 pt-2 text-xs text-muted-foreground">
           <div className="flex min-w-0 items-center gap-2">
-            <Sparkles className="h-3.5 w-3.5 shrink-0 text-gray-300" />
+            <Sparkles className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
             <span className="truncate">{runtimeLabel}</span>
           </div>
           <div className="flex min-w-0 items-center gap-2">
-            <House className="h-3.5 w-3.5 shrink-0 text-gray-300" />
+            <House className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
             <span className="truncate">{agent.workspace ?? "-"}</span>
           </div>
         </div>
@@ -274,8 +241,6 @@ function AgentListCard(props: {
 
 export function AgentsPage() {
   const presenter = usePresenter();
-  const appPresenter = useAppPresenter();
-  const navigate = useNavigate();
   const agentsQuery = useAgents();
   const configQuery = useConfig();
   const providersQuery = useProviders();
@@ -362,34 +327,49 @@ export function AgentsPage() {
     );
   };
   const requestAgentCreationDraft = () => {
-    navigate("/chat");
-    appPresenter.chatDraftIntentManager.requestDraft(AGENT_CREATION_PROMPT);
+    presenter.chatSessionListManager.startAgentDraftChat(
+      "main",
+      defaultRuntime,
+      AGENT_CREATION_PROMPT,
+    );
   };
 
   return (
-    <PageLayout className="space-y-5">
-      <AgentsHero
-        agentCount={agents.length}
-        onCreate={requestAgentCreationDraft}
+    <PageLayout className="space-y-6">
+      <PageHeader
+        headingLevel={1}
+        title={t("agentsHeroEyebrow")}
+        description={t("agentsHeroDescription")}
+        actions={(
+          <Button
+            type="button"
+            variant="primary"
+            className="h-9 shrink-0 rounded-xl px-4 text-sm font-semibold"
+            onClick={requestAgentCreationDraft}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            {t("agentsCreateButton")}
+          </Button>
+        )}
       />
 
       <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
         {agentsQuery.isLoading ? (
-          <Card className="md:col-span-2 xl:col-span-3 border-dashed border-[#d9dce3] bg-white/70">
-            <CardContent className="py-14 text-center text-sm text-gray-500">
+          <Card className="md:col-span-2 xl:col-span-3 border-dashed border-border bg-card/70">
+            <CardContent className="py-14 text-center text-sm text-muted-foreground">
               {t("agentsLoading")}
             </CardContent>
           </Card>
         ) : sortedAgents.length === 0 ? (
-          <Card className="md:col-span-2 xl:col-span-3 overflow-hidden border-dashed border-[#d9dce3] bg-[linear-gradient(135deg,#fff7ea_0%,#f4fbff_100%)]">
+          <Card className="md:col-span-2 xl:col-span-3 overflow-hidden border-dashed border-border bg-gradient-subtle">
             <CardContent className="flex min-h-[240px] flex-col items-center justify-center px-6 py-14 text-center">
-              <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white/80 shadow-[0_18px_44px_rgba(0,0,0,0.08)]">
-                <Bot className="h-8 w-8 text-[#d39a3b]" />
+              <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-card/80 shadow-[0_18px_44px_rgba(0,0,0,0.08)]">
+                <Bot className="h-8 w-8 text-warning" />
               </div>
-              <div className="text-lg font-semibold text-[#2f2212]">
+              <div className="text-lg font-semibold text-foreground">
                 {t("agentsEmpty")}
               </div>
-              <p className="mt-2 max-w-md text-sm leading-6 text-[#78644d]">
+              <p className="mt-2 max-w-md text-sm leading-6 text-muted-foreground">
                 {t("agentsEmptyDescription")}
               </p>
               <Button

package/src/features/chat/components/chat-sidebar-list-mode-switch.tsx

@@ -10,7 +10,7 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
         type="button"
         aria-pressed={!isProjectFirstView}
         onClick={() => onSelectMode('time-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
+        className={cn('rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
       >
         {t('chatSidebarViewTime')}
       </button>
@@ -19,7 +19,7 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
         type="button"
         aria-pressed={isProjectFirstView}
         onClick={() => onSelectMode('project-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
+        className={cn('rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
       >
         {t('chatSidebarViewProject')}
       </button>