@nextclaw/ui 0.15.0 → 0.15.2

package/src/app/configs/app-navigation.config.ts

@@ -2,6 +2,7 @@ import type { LucideIcon } from "lucide-react";
 import {
   Bot,
   BrainCircuit,
+  AlarmClock,
   Cpu,
   Download,
   KeyRound,
@@ -25,6 +26,11 @@ export type AppNavigationItem = {
   icon: LucideIcon;
 };
 
+export type AppNavigationSection = {
+  label: string;
+  items: AppNavigationItem[];
+};
+
 function matchesRouteTarget(pathname: string, target: string): boolean {
   const normalizedPath = pathname.toLowerCase();
   const normalizedTarget = target.toLowerCase();
@@ -80,6 +86,33 @@ export function getMobileBottomNavItems(
   ];
 }
 
+export function getMainSidebarNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/chat",
+      label: translate("chat"),
+      icon: MessageCircle,
+    },
+    {
+      target: "/chat/cron",
+      label: translate("cron"),
+      icon: AlarmClock,
+    },
+    {
+      target: "/chat/skills",
+      label: translate("marketplaceFilterSkills"),
+      icon: BrainCircuit,
+    },
+    {
+      target: "/agents",
+      label: translate("agentsPageTitle"),
+      icon: Bot,
+    },
+  ];
+}
+
 export function getSettingsNavItems(
   translate: Translate,
 ): AppNavigationItem[] {
@@ -142,6 +175,22 @@ export function getSettingsNavItems(
   ];
 }
 
+export function getSettingsNavSections(
+  translate: Translate,
+): AppNavigationSection[] {
+  const items = getSettingsNavItems(translate);
+  return [
+    {
+      label: translate("settingsGroupBasic"),
+      items: items.slice(0, 3),
+    },
+    {
+      label: translate("settingsGroupAdvanced"),
+      items: items.slice(3),
+    },
+  ];
+}
+
 export function getMobileSettingsNavItems(
   translate: Translate,
 ): AppNavigationItem[] {

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

@@ -284,6 +284,88 @@
    }
 }
 
+@layer base {
+   :root[data-theme="work"] {
+      /* ========================================
+       BRAND COLORS (Work White Ink)
+       ======================================== */
+      --brand-50: 0 0% 97%;
+      --brand-100: 0 0% 94%;
+      --brand-200: 0 0% 88%;
+      --brand-300: 0 0% 78%;
+      --brand-400: 0 0% 58%;
+      --brand-500: 0 0% 23%;
+      --brand-600: 0 0% 18%;
+      --brand-700: 0 0% 12%;
+      --brand-800: 0 0% 7%;
+      --brand-900: 0 0% 4%;
+
+      /* ========================================
+       NEUTRAL COLORS (White Canvas / Soft Gray Rail)
+       ======================================== */
+      --gray-50: 0 0% 100%;
+      --gray-100: 0 0% 95%;
+      --gray-200: 0 0% 90%;
+      --gray-300: 0 0% 84%;
+      --gray-400: 0 0% 70%;
+      --gray-500: 0 0% 46%;
+      --gray-600: 0 0% 34%;
+      --gray-700: 0 0% 28%;
+      --gray-800: 0 0% 13%;
+      --gray-900: 0 0% 7%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-500);
+      --primary-hover: var(--brand-600);
+      --primary-active: var(--brand-700);
+      --primary-foreground: 0 0% 100%;
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: var(--gray-200);
+      --accent-foreground: var(--gray-800);
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --card: 0 0% 100%;
+      --card-foreground: var(--gray-800);
+      --card-border: var(--gray-200);
+      --popover: 0 0% 100%;
+      --popover-foreground: var(--gray-800);
+      --border: var(--gray-200);
+      --border-hover: var(--gray-300);
+      --border-active: var(--gray-600);
+      --input: 0 0% 100%;
+      --input-border: var(--gray-200);
+      --input-focus: var(--gray-600);
+      --ring: var(--gray-600);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (bright neutral tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(20 24 28 / 0.03);
+      --shadow-sm: 0 1px 3px 0 rgb(20 24 28 / 0.05), 0 1px 2px -1px rgb(20 24 28 / 0.04);
+      --shadow-md: 0 4px 6px -1px rgb(20 24 28 / 0.05), 0 2px 4px -2px rgb(20 24 28 / 0.04);
+      --shadow-lg: 0 10px 15px -3px rgb(20 24 28 / 0.06), 0 4px 6px -4px rgb(20 24 28 / 0.04);
+      --shadow-xl: 0 20px 25px -5px rgb(20 24 28 / 0.08), 0 8px 10px -6px rgb(20 24 28 / 0.04);
+      --shadow-2xl: 0 25px 50px -12px rgb(20 24 28 / 0.14);
+      --shadow-card: 0 0 8px 0 rgba(20, 24, 28, 0.04);
+      --shadow-card-hover: 0 0 16px 0 rgba(20, 24, 28, 0.06);
+   }
+
+   :root[data-theme="work"] .nextclaw-chat-message-user {
+      background-color: hsl(var(--gray-100));
+      border-color: transparent;
+      color: hsl(var(--gray-800));
+   }
+
+}
+
 @layer base {
    :root[data-theme="warm"] {
       /* ========================================

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

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+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";
@@ -50,6 +50,13 @@ const mocks = vi.hoisted(() => ({
           builtIn: false,
           model: "openai/gpt-5.2",
           runtime: "codex",
+          runtimeConfig: {
+            profile: "workspace-write",
+          },
+          thinkingDefault: "high",
+          contextTokens: 128000,
+          reservedContextTokens: 4096,
+          maxToolIterations: 64,
           workspace: "~/.nextclaw/workspace/agents/researcher",
           avatarUrl: null,
         },
@@ -63,6 +70,13 @@ const mocks = vi.hoisted(() => ({
         defaults: {
           model: "openai/gpt-5.1",
           workspace: "~/.nextclaw/workspace",
+          engine: "native",
+          engineConfig: {},
+          thinkingDefault: "off",
+          models: {},
+          contextTokens: 200000,
+          reservedContextTokens: 10000,
+          maxToolIterations: 1000,
         },
       },
       providers: {
@@ -252,6 +266,7 @@ describe("AgentsPage", () => {
     expect(screen.getByText("~/.nextclaw/workspace")).toBeTruthy();
     expect(screen.getAllByRole("button", { name: "开始对话" })).toHaveLength(2);
     expect(screen.getAllByRole("button", { name: "更多操作" })).toHaveLength(2);
+    expect(screen.queryByRole("button", { name: "查看详情" })).toBeNull();
     expect(screen.queryByRole("button", { name: "编辑" })).toBeNull();
     expect(screen.getByText("负责调研、信息筛选与结论提炼。")).toBeTruthy();
     expect(
@@ -269,7 +284,8 @@ describe("AgentsPage", () => {
     expect(screen.queryByText("创建新的 Agent 身份")).toBeNull();
 
     await user.click(screen.getAllByRole("button", { name: "更多操作" })[1]);
-    await user.click(screen.getByRole("button", { name: "编辑" }));
+    const detailsEditButtons = screen.getAllByRole("button", { name: "编辑" });
+    await user.click(detailsEditButtons[detailsEditButtons.length - 1]);
 
     expect(screen.getByText("编辑 Agent 身份")).toBeTruthy();
     expect(screen.getByText("主目录保持不变")).toBeTruthy();
@@ -280,6 +296,122 @@ describe("AgentsPage", () => {
     expect(screen.getByDisplayValue("gpt-5.2")).toBeTruthy();
   });
 
+  it("separates read-only details from editing and keeps advanced config collapsed until requested", async () => {
+    const user = userEvent.setup();
+
+    renderAgentsPage();
+
+    await user.click(screen.getAllByRole("button", { name: "更多操作" })[1]);
+    await user.click(screen.getByRole("button", { name: "查看详情" }));
+
+    expect(screen.getByText("身份")).toBeTruthy();
+    expect(screen.getByText("上下文窗口大小")).toBeTruthy();
+    expect(screen.getByText("128,000")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "保存编辑" })).toBeNull();
+    const detailsDialog = screen.getByText("身份").closest("[role='dialog']");
+    expect(detailsDialog?.className).toContain("sm:max-w-2xl");
+    const detailLists = Array.from(detailsDialog?.querySelectorAll("dl") ?? []);
+    expect(detailLists.length).toBeGreaterThan(0);
+    expect(
+      detailLists.every(
+        (list) =>
+          !list.className.includes("divide-y") &&
+          !list.className.includes("border-t"),
+      ),
+    ).toBe(true);
+    expect(
+      Array.from(detailsDialog?.querySelectorAll("section") ?? []).every(
+        (section) =>
+          section.className.includes("space-y-2") &&
+          section.className.includes("border-t") &&
+          !section.className.includes("sm:grid-cols"),
+      ),
+    ).toBe(true);
+    expect(
+      detailLists.every((list) => list.className.includes("pl-5")),
+    ).toBe(true);
+    expect(
+      Array.from(detailsDialog?.querySelectorAll("dt") ?? []).every(
+        (term) => {
+          const item = term.parentElement;
+          return Boolean(
+            item?.className.includes("grid-cols-[10rem_minmax(0,1fr)]") &&
+              !item.className.includes("space-y"),
+          );
+        },
+      ),
+    ).toBe(true);
+    expect(
+      Array.from(detailsDialog?.querySelectorAll("dt span") ?? []).every(
+        (label) => !label.className.includes("truncate"),
+      ),
+    ).toBe(true);
+    expect(
+      Array.from(detailsDialog?.querySelectorAll("dt") ?? []).every(
+        (term) =>
+          !term.textContent?.includes("继承默认") &&
+          !term.textContent?.includes("Agent 覆盖"),
+      ),
+    ).toBe(true);
+    expect(
+      Array.from(detailsDialog?.querySelectorAll("dd") ?? []).some((value) =>
+        value.textContent?.includes("128,000（Agent 覆盖）"),
+      ),
+    ).toBe(true);
+    expect(
+      Array.from(detailsDialog?.querySelectorAll("dd") ?? []).some((value) =>
+        value.textContent?.includes("未设置（继承默认）"),
+      ),
+    ).toBe(true);
+    expect(
+      Array.from(detailsDialog?.querySelectorAll("dt span, dd") ?? []).every(
+        (node) => node.className.includes("text-xs"),
+      ),
+    ).toBe(true);
+    expect(detailsDialog?.querySelector(".rounded-xl.bg-white.p-3")).toBeNull();
+
+    await user.click(screen.getByRole("button", { name: "编辑" }));
+
+    expect(screen.getByText("编辑 Agent 身份")).toBeTruthy();
+    const advancedDetails = screen.getByText("高级配置").closest("details");
+    expect(advancedDetails?.hasAttribute("open")).toBe(false);
+
+    await user.click(screen.getByText("高级配置"));
+    expect(advancedDetails?.hasAttribute("open")).toBe(true);
+    expect(screen.queryByLabelText("预留上下文大小")).toBeNull();
+    expect(screen.queryByLabelText("最大工具迭代次数")).toBeNull();
+    expect(screen.queryByLabelText("默认思考强度")).toBeNull();
+    expect(screen.queryByLabelText("Runtime 配置 JSON")).toBeNull();
+    expect(screen.queryByLabelText("模型覆盖 JSON")).toBeNull();
+
+    fireEvent.change(screen.getByLabelText("上下文窗口大小"), {
+      target: { value: "64000" },
+    });
+    await user.click(screen.getByRole("button", { name: "保存编辑" }));
+
+    expect(mocks.updateAgent).toHaveBeenCalledWith({
+      agentId: "researcher",
+      data: expect.objectContaining({
+        contextTokens: 64000,
+      }),
+    });
+    expect(mocks.updateAgent.mock.calls[0][0].data).not.toHaveProperty(
+      "reservedContextTokens",
+    );
+    expect(mocks.updateAgent.mock.calls[0][0].data).not.toHaveProperty(
+      "maxToolIterations",
+    );
+    expect(mocks.updateAgent.mock.calls[0][0].data).not.toHaveProperty(
+      "thinkingDefault",
+    );
+    expect(mocks.updateAgent.mock.calls[0][0].data).not.toHaveProperty(
+      "runtimeConfig",
+    );
+    expect(mocks.updateAgent.mock.calls[0][0].data).not.toHaveProperty(
+      "models",
+    );
+  });
+
   it("uses a runtime dropdown instead of manual text input when editing an agent", async () => {
     const user = userEvent.setup();
 
@@ -307,6 +439,7 @@ describe("AgentsPage", () => {
         avatar: "",
         model: "openai/gpt-5.2",
         runtime: "codex",
+        contextTokens: 128000,
       },
     });
   });

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

@@ -0,0 +1,70 @@
+import type { AgentEditFormState } from "@/features/agents/types/agent-form.types";
+import { Input } from "@/shared/components/ui/input";
+import { t } from "@/shared/lib/i18n";
+import { ChevronDown, Settings2 } from "lucide-react";
+
+type AgentAdvancedConfigFieldsProps = {
+  form: AgentEditFormState;
+  disabled?: boolean;
+  onChange: (patch: Partial<AgentEditFormState>) => void;
+};
+
+export function AgentAdvancedConfigFields({
+  form,
+  disabled = false,
+  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">
+        <span className="flex min-w-0 items-center gap-2">
+          <Settings2 className="h-4 w-4 shrink-0 text-gray-400" />
+          <span className="truncate">{t("agentsAdvancedConfigToggle")}</span>
+        </span>
+        <ChevronDown className="h-4 w-4 shrink-0 text-gray-400 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">
+          {t("agentsAdvancedConfigDescription")}
+        </p>
+        <div className="grid gap-4 md:grid-cols-2">
+          <AgentNumberField
+            label={t("agentsAdvancedContextTokensLabel")}
+            value={form.contextTokens}
+            min={1000}
+            step={1000}
+            disabled={disabled}
+            onChange={(contextTokens) => onChange({ contextTokens })}
+          />
+        </div>
+      </div>
+    </details>
+  );
+}
+
+function AgentNumberField(props: {
+  label: string;
+  value: string;
+  min: number;
+  step: number;
+  disabled: boolean;
+  onChange: (value: string) => void;
+}) {
+  const { label, value, min, step, disabled, onChange } = props;
+
+  return (
+    <label className="space-y-2 text-sm font-medium text-gray-700">
+      <span>{label}</span>
+      <Input
+        type="number"
+        min={min}
+        step={step}
+        value={value}
+        disabled={disabled}
+        placeholder={t("agentsAdvancedInheritPlaceholder")}
+        aria-label={label}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </label>
+  );
+}