modelbeast/web/src/Settings.jsx

import { useEffect, useState } from "react";
import { addUser, createToken, delUser, getSettings, listUsers, patchUser, putSettings } from "./api";

const LABELS = {
  fal_key: "fal.ai API key",
  tripo_key: "Tripo API key",
  meshy_key: "Meshy API key",
  replicate_token: "Replicate token",
  openrouter_key: "OpenRouter API key (nano-banana A/B tests)",
  hf_token: "HuggingFace token (for SF3D / TRELLIS.2 weights)",
  models_dir: "Models directory",
  archive_host: "Archive host (rsync)",
  archive_path: "Archive path",
};

export default function Settings({ onClose, onSaved }) {
  const [data, setData] = useState(null);
  const [edits, setEdits] = useState({});
  const [saving, setSaving] = useState(false);

  useEffect(() => { getSettings().then(setData); }, []);
  if (!data) return null;

  const secretKeys = new Set(data._secret_keys || []);
  const keys = data._env_keys || [];

  const save = async () => {
    setSaving(true);
    const fresh = await putSettings(edits);
    setData(fresh); setEdits({}); setSaving(false);
    onSaved?.(fresh);
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2>Settings</h2>
        <p className="dim">API keys unlock cloud operators. HuggingFace token lets local SF3D / TRELLIS.2 download their gated weights. Secrets are masked and never written to logs.</p>
        {keys.map((k) => {
          const isSecret = secretKeys.has(k);
          const current = data[k] || "";
          const placeholder = isSecret && current ? "•••••••• (set — leave blank to keep)" : "";
          return (
            <label key={k} className="setting">
              <span>{LABELS[k] || k}</span>
              <input
                type={isSecret ? "password" : "text"}
                placeholder={placeholder}
                defaultValue={isSecret ? "" : current}
                onChange={(e) => setEdits({ ...edits, [k]: e.target.value })}
              />
            </label>
          );
        })}
        <div className="modal-actions">
          <button onClick={onClose}>Close</button>
          <button className="go" onClick={save} disabled={saving || !Object.keys(edits).length}>
            {saving ? "Saving…" : "Save"}
          </button>
        </div>

        <Users />
      </div>
    </div>
  );
}

function Users() {
  const [users, setUsers] = useState([]);
  const [nu, setNu] = useState("");
  const [np, setNp] = useState("");
  const [msg, setMsg] = useState("");
  const load = () => listUsers().then(setUsers).catch(() => {});
  useEffect(() => { load(); }, []);

  const create = async () => {
    setMsg("");
    try {
      await addUser({ username: nu.trim(), password: np });
      setNu(""); setNp(""); load();
    } catch (e) { setMsg(String(e.message || e).slice(0, 120)); }
  };
  const mkToken = async (username) => {
    const r = await createToken({ username });
    setMsg(`token for ${username} (copy now, shown once): ${r.token}`);
  };

  return (
    <div className="users">
      <h2>Users · friends can log in and run LOCAL models only</h2>
      <table className="users-table">
        <tbody>
          {users.map((u) => (
            <tr key={u.username}>
              <td>{u.username}</td>
              <td className="dim">{u.role}</td>
              <td className="dim">cap {u.max_active_jobs}</td>
              <td>
                <button onClick={() => mkToken(u.username)} title="mint API token">token</button>
                {u.role !== "owner" && <button onClick={() => delUser(u.username).then(load)}>×</button>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="user-add">
        <input placeholder="new username" value={nu} autoCapitalize="none"
          onChange={(e) => setNu(e.target.value)} />
        <input type="password" placeholder="password (6+)" value={np}
          onChange={(e) => setNp(e.target.value)} />
        <button onClick={create} disabled={!nu || np.length < 6}>Add guest</button>
      </div>
      {msg && <p className="dim user-msg">{msg}</p>}
    </div>
  );
}