From 8953fb13abe8cc1282fd550acf1dfb9bd676eda6 Mon Sep 17 00:00:00 2001
From: Nexus Dev <nexus@local>
Date: Sat, 11 Apr 2026 13:17:40 +0000
Subject: [PATCH] feat(nexus): add WorkspaceSection settings card (phase 13)

First of eight section cards for the consolidated Settings page. Folds
in theme toggle, re-run onboarding trigger, keyboard shortcuts, log
censoring, feedback sharing preference, and the two experimental
toggles (isolated workspaces, dev-server auto-restart) that previously
lived at /instance/settings/experimental.

Preserves all existing form validation, save handlers, and error
toasting from InstanceGeneralSettings and InstanceExperimentalSettings.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../settings/WorkspaceSection.test.tsx        | 128 +++++++++
 .../components/settings/WorkspaceSection.tsx  | 257 ++++++++++++++++++
 2 files changed, 385 insertions(+)
 create mode 100644 ui/src/components/settings/WorkspaceSection.test.tsx
 create mode 100644 ui/src/components/settings/WorkspaceSection.tsx

diff --git a/ui/src/components/settings/WorkspaceSection.test.tsx b/ui/src/components/settings/WorkspaceSection.test.tsx
new file mode 100644
index 00000000..151073fc
--- /dev/null
+++ b/ui/src/components/settings/WorkspaceSection.test.tsx
@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const openOnboardingSpy = vi.fn();
+const setThemeSpy = vi.fn();
+
+vi.mock("@/context/DialogContext", () => ({
+  useDialog: () => ({
+    onboardingOpen: false,
+    openOnboarding: openOnboardingSpy,
+    closeOnboarding: () => {},
+  }),
+}));
+
+vi.mock("@/context/ThemeContext", () => ({
+  useTheme: () => ({
+    theme: "dark",
+    setTheme: setThemeSpy,
+    toggleTheme: () => {},
+    applyCustomTheme: () => {},
+  }),
+  THEME_META: {
+    dark: { label: "Dark", dark: true, bg: "#000000", primary: "#faff69" },
+    light: { label: "Light", dark: false, bg: "#fafafa", primary: "#166534" },
+  },
+  ORDERED_THEMES: ["dark", "light"],
+}));
+
+vi.mock("@/api/instanceSettings", () => ({
+  instanceSettingsApi: {
+    getGeneral: vi.fn(async () => ({
+      censorUsernameInLogs: false,
+      keyboardShortcuts: true,
+      feedbackDataSharingPreference: "prompt",
+    })),
+    updateGeneral: vi.fn(async (patch: unknown) => patch),
+    getExperimental: vi.fn(async () => ({
+      enableIsolatedWorkspaces: false,
+      autoRestartDevServerWhenIdle: false,
+    })),
+    updateExperimental: vi.fn(async (patch: unknown) => patch),
+  },
+}));
+
+import { WorkspaceSection } from "./WorkspaceSection";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("WorkspaceSection", () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot> | null = null;
+  let queryClient: QueryClient;
+
+  beforeEach(() => {
+    openOnboardingSpy.mockClear();
+    setThemeSpy.mockClear();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = null;
+    queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+  });
+
+  afterEach(() => {
+    if (root) {
+      act(() => {
+        root!.unmount();
+      });
+      root = null;
+    }
+    if (container.parentNode) {
+      container.remove();
+    }
+    queryClient.clear();
+  });
+
+  function render() {
+    root = createRoot(container);
+    act(() => {
+      root!.render(
+        <QueryClientProvider client={queryClient}>
+          <WorkspaceSection />
+        </QueryClientProvider>,
+      );
+    });
+  }
+
+  it("renders the Workspace section header", () => {
+    render();
+    const heading = container.querySelector("h2");
+    expect(heading?.textContent).toBe("Workspace");
+  });
+
+  it("exposes a Re-run onboarding button that opens the wizard", () => {
+    render();
+    const wizardButton = Array.from(container.querySelectorAll("button")).find(
+      (b) => b.textContent?.trim() === "Open wizard",
+    );
+    expect(wizardButton).toBeDefined();
+    act(() => {
+      wizardButton!.click();
+    });
+    expect(openOnboardingSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("offers dark and light theme buttons and calls setTheme", () => {
+    render();
+    const darkBtn = Array.from(container.querySelectorAll("button")).find(
+      (b) => b.textContent?.includes("Dark"),
+    );
+    const lightBtn = Array.from(container.querySelectorAll("button")).find(
+      (b) => b.textContent?.includes("Light"),
+    );
+    expect(darkBtn).toBeDefined();
+    expect(lightBtn).toBeDefined();
+    expect(darkBtn?.getAttribute("aria-pressed")).toBe("true");
+    act(() => {
+      lightBtn!.click();
+    });
+    expect(setThemeSpy).toHaveBeenCalledWith("light");
+  });
+});
diff --git a/ui/src/components/settings/WorkspaceSection.tsx b/ui/src/components/settings/WorkspaceSection.tsx
new file mode 100644
index 00000000..0b7cf899
--- /dev/null
+++ b/ui/src/components/settings/WorkspaceSection.tsx
@@ -0,0 +1,257 @@
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { instanceSettingsApi } from "@/api/instanceSettings";
+import { useDialog } from "@/context/DialogContext";
+import { useTheme, THEME_META, ORDERED_THEMES } from "@/context/ThemeContext";
+import { queryKeys } from "@/lib/queryKeys";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { SettingsSection, SettingsRow } from "./SettingsSection";
+
+const FEEDBACK_TERMS_URL = import.meta.env.VITE_FEEDBACK_TERMS_URL?.trim() || "https://paperclip.ing/tos";
+
+function ToggleSwitch({
+  enabled,
+  disabled,
+  ariaLabel,
+  onClick,
+}: {
+  enabled: boolean;
+  disabled?: boolean;
+  ariaLabel: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      data-slot="toggle"
+      aria-label={ariaLabel}
+      aria-pressed={enabled}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-60",
+        enabled ? "bg-success" : "bg-muted",
+      )}
+    >
+      <span
+        className={cn(
+          "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
+          enabled ? "translate-x-4.5" : "translate-x-0.5",
+        )}
+      />
+    </button>
+  );
+}
+
+export function WorkspaceSection() {
+  const queryClient = useQueryClient();
+  const { theme, setTheme } = useTheme();
+  const { openOnboarding } = useDialog();
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const generalQuery = useQuery({
+    queryKey: queryKeys.instance.generalSettings,
+    queryFn: () => instanceSettingsApi.getGeneral(),
+  });
+
+  const experimentalQuery = useQuery({
+    queryKey: queryKeys.instance.experimentalSettings,
+    queryFn: () => instanceSettingsApi.getExperimental(),
+  });
+
+  const updateGeneralMutation = useMutation({
+    mutationFn: instanceSettingsApi.updateGeneral,
+    onSuccess: async () => {
+      setActionError(null);
+      await queryClient.invalidateQueries({ queryKey: queryKeys.instance.generalSettings });
+    },
+    onError: (error) => {
+      setActionError(error instanceof Error ? error.message : "Failed to update general settings.");
+    },
+  });
+
+  const updateExperimentalMutation = useMutation({
+    mutationFn: instanceSettingsApi.updateExperimental,
+    onSuccess: async () => {
+      setActionError(null);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: queryKeys.instance.experimentalSettings }),
+        queryClient.invalidateQueries({ queryKey: queryKeys.health }),
+      ]);
+    },
+    onError: (error) => {
+      setActionError(error instanceof Error ? error.message : "Failed to update experimental settings.");
+    },
+  });
+
+  const censorUsernameInLogs = generalQuery.data?.censorUsernameInLogs === true;
+  const keyboardShortcuts = generalQuery.data?.keyboardShortcuts === true;
+  const feedbackDataSharingPreference = generalQuery.data?.feedbackDataSharingPreference ?? "prompt";
+  const enableIsolatedWorkspaces = experimentalQuery.data?.enableIsolatedWorkspaces === true;
+  const autoRestartDevServerWhenIdle = experimentalQuery.data?.autoRestartDevServerWhenIdle === true;
+
+  return (
+    <SettingsSection title="Workspace">
+      {actionError ? (
+        <div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+          {actionError}
+        </div>
+      ) : null}
+
+      <SettingsRow label="Theme" description="Choose the visual theme for Nexus.">
+        <div className="flex flex-wrap gap-2">
+          {ORDERED_THEMES.map((id) => {
+            const meta = THEME_META[id];
+            return (
+              <button
+                key={id}
+                type="button"
+                onClick={() => setTheme(id)}
+                aria-pressed={theme === id}
+                className={cn(
+                  "flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                  theme === id
+                    ? "border-primary bg-primary/10 text-primary"
+                    : "border-border bg-transparent text-muted-foreground hover:border-ring hover:text-primary",
+                )}
+              >
+                <span
+                  className="h-3 w-3 rounded-full border border-border/50 shrink-0"
+                  style={{ backgroundColor: meta.primary }}
+                />
+                {meta.label}
+              </button>
+            );
+          })}
+        </div>
+      </SettingsRow>
+
+      <SettingsRow
+        label="Re-run onboarding"
+        description="Restart the first-run wizard to reconfigure providers, voice, and phone access."
+      >
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="focus-visible:ring-offset-background"
+          onClick={() => openOnboarding()}
+        >
+          Open wizard
+        </Button>
+      </SettingsRow>
+
+      <SettingsRow
+        label="Keyboard shortcuts"
+        description="Enable global keyboard shortcuts for inbox navigation and quick actions."
+      >
+        <ToggleSwitch
+          enabled={keyboardShortcuts}
+          disabled={updateGeneralMutation.isPending || generalQuery.isLoading}
+          ariaLabel="Toggle keyboard shortcuts"
+          onClick={() => updateGeneralMutation.mutate({ keyboardShortcuts: !keyboardShortcuts })}
+        />
+      </SettingsRow>
+
+      <SettingsRow
+        label="Censor username in logs"
+        description="Mask the username segment in home-directory paths visible to operators."
+      >
+        <ToggleSwitch
+          enabled={censorUsernameInLogs}
+          disabled={updateGeneralMutation.isPending || generalQuery.isLoading}
+          ariaLabel="Toggle username log censoring"
+          onClick={() =>
+            updateGeneralMutation.mutate({ censorUsernameInLogs: !censorUsernameInLogs })
+          }
+        />
+      </SettingsRow>
+
+      <SettingsRow
+        label="AI feedback sharing"
+        description="Control whether thumbs up and thumbs down votes send the voted AI output to Paperclip Labs. Votes are always saved locally."
+      >
+        <div className="flex flex-wrap gap-2">
+          {[
+            { value: "allowed", label: "Allow" },
+            { value: "not_allowed", label: "Local only" },
+          ].map((option) => {
+            const active = feedbackDataSharingPreference === option.value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                disabled={updateGeneralMutation.isPending || generalQuery.isLoading}
+                aria-pressed={active}
+                onClick={() =>
+                  updateGeneralMutation.mutate({
+                    feedbackDataSharingPreference: option.value as "allowed" | "not_allowed",
+                  })
+                }
+                className={cn(
+                  "rounded-lg border px-3 py-1.5 text-xs transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                  "disabled:cursor-not-allowed disabled:opacity-60",
+                  active
+                    ? "border-primary bg-primary/10 text-primary"
+                    : "border-border bg-transparent text-muted-foreground hover:border-ring hover:text-primary",
+                )}
+              >
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+      </SettingsRow>
+      {feedbackDataSharingPreference === "prompt" ? (
+        <p className="-mt-2 text-xs text-muted-foreground">
+          No default saved yet — the next vote will ask once.{" "}
+          {FEEDBACK_TERMS_URL ? (
+            <a
+              href={FEEDBACK_TERMS_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="underline underline-offset-4 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              Read terms of service
+            </a>
+          ) : null}
+        </p>
+      ) : null}
+
+      <SettingsRow
+        label="Isolated workspaces"
+        description="Experimental: show execution workspace controls in project configuration for isolated runs."
+      >
+        <ToggleSwitch
+          enabled={enableIsolatedWorkspaces}
+          disabled={updateExperimentalMutation.isPending || experimentalQuery.isLoading}
+          ariaLabel="Toggle isolated workspaces experimental setting"
+          onClick={() =>
+            updateExperimentalMutation.mutate({ enableIsolatedWorkspaces: !enableIsolatedWorkspaces })
+          }
+        />
+      </SettingsRow>
+
+      <SettingsRow
+        label="Auto-restart dev server when idle"
+        description="Experimental: in pnpm dev, wait for runs to finish then restart the server when backend changes are pending."
+      >
+        <ToggleSwitch
+          enabled={autoRestartDevServerWhenIdle}
+          disabled={updateExperimentalMutation.isPending || experimentalQuery.isLoading}
+          ariaLabel="Toggle guarded dev-server auto-restart"
+          onClick={() =>
+            updateExperimentalMutation.mutate({
+              autoRestartDevServerWhenIdle: !autoRestartDevServerWhenIdle,
+            })
+          }
+        />
+      </SettingsRow>
+    </SettingsSection>
+  );
+}