Add username log censor setting

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/pages/InstanceGeneralSettings.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { SlidersHorizontal } from "lucide-react";
+import { instanceSettingsApi } from "@/api/instanceSettings";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { queryKeys } from "../lib/queryKeys";
+import { cn } from "../lib/utils";
+
+export function InstanceGeneralSettings() {
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const queryClient = useQueryClient();
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: "Instance Settings" },
+      { label: "General" },
+    ]);
+  }, [setBreadcrumbs]);
+
+  const generalQuery = useQuery({
+    queryKey: queryKeys.instance.generalSettings,
+    queryFn: () => instanceSettingsApi.getGeneral(),
+  });
+
+  const toggleMutation = useMutation({
+    mutationFn: async (enabled: boolean) =>
+      instanceSettingsApi.updateGeneral({ censorUsernameInLogs: enabled }),
+    onSuccess: async () => {
+      setActionError(null);
+      await queryClient.invalidateQueries({ queryKey: queryKeys.instance.generalSettings });
+    },
+    onError: (error) => {
+      setActionError(error instanceof Error ? error.message : "Failed to update general settings.");
+    },
+  });
+
+  if (generalQuery.isLoading) {
+    return <div className="text-sm text-muted-foreground">Loading general settings...</div>;
+  }
+
+  if (generalQuery.error) {
+    return (
+      <div className="text-sm text-destructive">
+        {generalQuery.error instanceof Error
+          ? generalQuery.error.message
+          : "Failed to load general settings."}
+      </div>
+    );
+  }
+
+  const censorUsernameInLogs = generalQuery.data?.censorUsernameInLogs === true;
+
+  return (
+    <div className="max-w-4xl space-y-6">
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <SlidersHorizontal className="h-5 w-5 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">General</h1>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Configure instance-wide defaults that affect how operator-visible logs are displayed.
+        </p>
+      </div>
+
+      {actionError && (
+        <div className="rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+          {actionError}
+        </div>
+      )}
+
+      <section className="rounded-xl border border-border bg-card p-5">
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1.5">
+            <h2 className="text-sm font-semibold">Censor username in logs</h2>
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              Hide the username segment in home-directory paths and similar log output. This is off by default.
+            </p>
+          </div>
+          <button
+            type="button"
+            aria-label="Toggle username log censoring"
+            disabled={toggleMutation.isPending}
+            className={cn(
+              "relative inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+              censorUsernameInLogs ? "bg-green-600" : "bg-muted",
+            )}
+            onClick={() => toggleMutation.mutate(!censorUsernameInLogs)}
+          >
+            <span
+              className={cn(
+                "inline-block h-4.5 w-4.5 rounded-full bg-white transition-transform",
+                censorUsernameInLogs ? "translate-x-6" : "translate-x-0.5",
+              )}
+            />
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}