@nextclaw/ui 0.14.4 → 0.15.1

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

@@ -6,6 +6,8 @@
 
 @layer base {
    :root {
+      color-scheme: light;
+
       /* ========================================
        BRAND COLORS (Natural Olive)
        ======================================== */
@@ -200,10 +202,11 @@
       --z-dropdown: 100;
       --z-sticky: 200;
       --z-fixed: 300;
-      --z-modal-backdrop: 400;
-      --z-modal: 500;
-      --z-popover: 600;
-      --z-tooltip: 700;
+      --z-floating-panel: 9999;
+      --z-modal-backdrop: 10000;
+      --z-modal: 10050;
+      --z-popover: 10100;
+      --z-tooltip: 10150;
    }
 }
 
@@ -569,6 +572,90 @@
    }
 }
 
+
+@layer base {
+   :root[data-theme="night"] {
+      color-scheme: dark;
+
+      /* ========================================
+       BRAND COLORS (Night Moss)
+       ======================================== */
+      --brand-50: 148 36% 91%;
+      --brand-100: 148 34% 84%;
+      --brand-200: 149 32% 72%;
+      --brand-300: 149 33% 60%;
+      --brand-400: 150 36% 52%;
+      --brand-500: 150 42% 46%;
+      --brand-600: 150 46% 38%;
+      --brand-700: 151 48% 30%;
+      --brand-800: 152 48% 22%;
+      --brand-900: 153 46% 15%;
+
+      /* ========================================
+       NEUTRAL COLORS (Deep Workbench)
+       ======================================== */
+      --gray-50: 220 18% 8%;
+      --gray-100: 220 16% 11%;
+      --gray-200: 219 14% 16%;
+      --gray-300: 218 12% 24%;
+      --gray-400: 215 10% 46%;
+      --gray-500: 213 12% 62%;
+      --gray-600: 212 16% 74%;
+      --gray-700: 43 22% 82%;
+      --gray-800: 44 32% 90%;
+      --gray-900: 44 40% 96%;
+
+      /* 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-400);
+      --primary-hover: var(--brand-300);
+      --primary-active: var(--brand-200);
+      --primary-foreground: 220 18% 8%;
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: 151 32% 18%;
+      --accent-foreground: 148 34% 84%;
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --destructive: 0 70% 52%;
+      --destructive-foreground: 0 0% 100%;
+      --success: 150 46% 44%;
+      --success-foreground: 220 18% 8%;
+      --warning: 42 82% 58%;
+      --warning-foreground: 220 18% 8%;
+      --card: 220 16% 10%;
+      --card-foreground: var(--gray-800);
+      --card-border: 218 13% 20%;
+      --popover: 220 16% 10%;
+      --popover-foreground: var(--gray-800);
+      --border: 218 13% 20%;
+      --border-hover: 218 12% 30%;
+      --border-active: var(--brand-400);
+      --input: 220 16% 12%;
+      --input-border: 218 13% 24%;
+      --input-focus: var(--brand-400);
+      --ring: var(--brand-400);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (deep neutral tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.28);
+      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.34), 0 1px 2px -1px rgb(0 0 0 / 0.3);
+      --shadow-md: 0 8px 18px -10px rgb(0 0 0 / 0.42), 0 4px 8px -6px rgb(0 0 0 / 0.34);
+      --shadow-lg: 0 16px 28px -16px rgb(0 0 0 / 0.48), 0 8px 14px -10px rgb(0 0 0 / 0.38);
+      --shadow-xl: 0 24px 40px -20px rgb(0 0 0 / 0.56), 0 10px 18px -12px rgb(0 0 0 / 0.42);
+      --shadow-2xl: 0 32px 60px -24px rgb(0 0 0 / 0.65);
+      --shadow-card: 0 0 0 1px hsl(var(--border) / 0.82), 0 18px 48px -34px rgb(0 0 0 / 0.72);
+      --shadow-card-hover: 0 0 0 1px hsl(var(--border-hover) / 0.88), 0 24px 60px -36px rgb(0 0 0 / 0.82);
+   }
+}
+
 @layer base {
    :root[data-theme="probe"] {
       /* ========================================

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>
+  );
+}