AgentHub/client/src/components/settings/PrivacySettings.tsx

/**
 * @file PrivacySettings.tsx
 * @description Settings → Data → Privacy: the two opt-in ingest controls of
 * `server/lib/privacy.js` — redact secrets (API keys, tokens, bearer headers,
 * private keys, `password=…`) from the payloads and summaries AgentHub stores,
 * and a list of folders whose hooks are dropped whole (one absolute path per
 * line; a folder and everything under it). Both persist through
 * `PUT /api/settings/privacy`; one the environment set is shown read-only.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { AlertTriangle, ShieldCheck } from "lucide-react";
import { api } from "../../lib/api";
import type { PrivacySettings as PrivacyState } from "../../lib/api";
import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";

const lines = (text: string) =>
  text
    .split("\n")
    .map((l) => l.trim())
    .filter(Boolean);

export function PrivacySettings() {
  const { t } = useTranslation("settings");
  const [state, setState] = useState<PrivacyState | null>(null);
  const [draft, setDraft] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const apply = (s: PrivacyState) => {
    setState(s);
    setDraft(s.ignore_cwd.join("\n"));
  };

  useEffect(() => {
    api.settings.privacy
      .get()
      .then(apply)
      .catch(() => undefined);
  }, []);

  async function save(patch: { redact_secrets?: boolean; ignore_cwd?: string[] }) {
    setSaving(true);
    setError(null);
    try {
      apply(await api.settings.privacy.save(patch));
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setSaving(false);
    }
  }

  const listChanged = !!state && lines(draft).join("\n") !== state.ignore_cwd.join("\n");

  return (
    <div id="privacy" className="scroll-mt-24">
      <SettingsSection
        title={
          <span className="flex items-center gap-2">
            <ShieldCheck className="w-4 h-4 text-fg-muted" />
            {t("privacy.title")}
          </span>
        }
        description={t("privacy.description")}
      >
        <SettingsSwitchRow
          label={t("privacy.redact")}
          description={t("privacy.redactHint")}
          checked={!!state?.redact_secrets}
          disabled={!state || saving || state.env_owned.redact_secrets}
          onChange={(v) => void save({ redact_secrets: v })}
        />
        <div className="py-3 space-y-2">
          <label htmlFor="privacy-ignore" className="block text-sm text-fg-secondary">
            {t("privacy.ignore")}
          </label>
          <p className="text-xs text-fg-muted">{t("privacy.ignoreHint")}</p>
          <textarea
            id="privacy-ignore"
            className="input w-full font-mono text-xs min-h-[72px]"
            placeholder={"/home/you/clients/secret-project\n~/private"}
            value={draft}
            disabled={!state || state.env_owned.ignore_cwd}
            onChange={(e) => {
              setDraft(e.target.value);
              setError(null);
            }}
          />
          <button
            type="button"
            className="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
            disabled={saving || !listChanged}
            onClick={() => void save({ ignore_cwd: lines(draft) })}
          >
            {saving ? t("homeDir.saving") : t("homeDir.save")}
          </button>
          {error && <p className="text-xs text-status-danger">{error}</p>}
          {(state?.env_owned.redact_secrets || state?.env_owned.ignore_cwd) && (
            <p className="text-xs text-status-warning flex items-start gap-1.5">
              <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-px" />
              {t("privacy.envOwned")}
            </p>
          )}
        </div>
      </SettingsSection>
    </div>
  );
}