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

/**
 * @file HomeDirSetting.tsx
 * @description One editable home directory (CLAUDE_HOME in Claude Code →
 * Overview, CODEX_HOME in Codex → Overview): a path field with Save, the
 * server's refusal inline, the saved value while the field differs from it,
 * and a warning when the real
 * environment sets the variable (the environment wins at the next start, so a
 * saved value would not survive a restart). Enter saves; a caller may ask for
 * a confirmation first (`confirm`). The server validates and persists; this
 * component only loads, submits and reports.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { AlertTriangle, FolderOpen } from "lucide-react";
import { confirmDialog } from "../../lib/confirm";
import { isSubmitEnter } from "../../lib/keys";
import { SettingsSection } from "./SettingsRow";
import { PathPickButton } from "../PathPickButton";

export interface HomeDirValue {
  value: string;
  envOwned: boolean;
  /** Shown after a save that succeeded only in part (e.g. a lane not updated). */
  warning?: string | null;
}

interface Props {
  /** `<section id>` — a deep-link target. */
  id: string;
  title: string;
  description: string;
  /** Optional second line under the description. */
  note?: string;
  placeholder: string;
  /** Ask this before saving (a change with wide effects, like CLAUDE_HOME). */
  confirm?: { title: string; message?: string };
  load: () => Promise<HomeDirValue>;
  save: (path: string) => Promise<HomeDirValue>;
}

/**
 * An editable home directory with its own load/save cycle.
 * @returns The section, or its skeleton-free shell while loading.
 */
export function HomeDirSetting({
  id,
  title,
  description,
  note,
  placeholder,
  confirm,
  load,
  save,
}: Props) {
  const { t } = useTranslation("settings");
  const [current, setCurrent] = useState<HomeDirValue | null>(null);
  const [input, setInput] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let live = true;
    load()
      .then((v) => {
        if (!live) return;
        setCurrent(v);
        setInput(v.value);
      })
      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
    return () => {
      live = false;
    };
    // `load` is a stable api call per mount; re-running on identity would loop.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleSave = async () => {
    if (!current || input === current.value || saving) return;
    if (confirm && !(await confirmDialog({ ...confirm, confirmLabel: t("homeDir.save") }))) return;
    setSaving(true);
    setError(null);
    try {
      const next = await save(input);
      setCurrent(next);
      setInput(next.value);
    } catch (err) {
      setError(err instanceof Error ? err.message : t("homeDir.saveFailed"));
    } finally {
      setSaving(false);
    }
  };

  return (
    <SettingsSection
      id={id}
      title={
        <span className="flex items-center gap-2">
          <FolderOpen className="w-4 h-4 text-fg-muted" />
          {title}
        </span>
      }
      description={description}
    >
      <div className="space-y-4">
        {note && <p className="text-[11px] text-fg-muted italic leading-snug">{note}</p>}
        <div className="flex items-center gap-3">
          <input
            type="text"
            value={input}
            aria-label={title}
            onChange={(e) => {
              setInput(e.target.value);
              setError(null);
            }}
            onKeyDown={(e) => {
              if (isSubmitEnter(e)) {
                e.preventDefault();
                void handleSave();
              }
            }}
            className="input flex-1 font-mono"
            placeholder={placeholder}
          />
          <PathPickButton
            start={input}
            onPick={(p) => {
              setInput(p);
              setError(null);
            }}
          />
          <button
            type="button"
            onClick={handleSave}
            disabled={saving || !current || input === current.value}
            className="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {saving ? t("homeDir.saving") : t("homeDir.save")}
          </button>
        </div>
        {error && <p className="text-xs text-status-danger">{error}</p>}
        {/* The saved value, only while the field says something else. */}
        {current && input !== current.value && (
          <p className="text-xs text-fg-muted">
            {t("homeDir.current")} <code className="text-fg-secondary">{current.value}</code>
          </p>
        )}
        {current?.envOwned && (
          <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("homeDir.envOwned")}
          </p>
        )}
        {current?.warning && (
          <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" />
            {current.warning}
          </p>
        )}
      </div>
    </SettingsSection>
  );
}