provenance/frontend/app/trees/[id]/ai/page.tsx

"use client";

import { useParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";

import { api } from "@/lib/api/client";
import type { components } from "@/lib/api/schema";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

type Policy = components["schemas"]["TreeAiPolicyRead"];

// `null`/"" means "no AI for this role". The <select> uses "" for that option
// and we translate to null on save.
const NONE = "";

export default function AiPolicyPage() {
  const { id: treeId } = useParams<{ id: string }>();
  const [policy, setPolicy] = useState<Policy | null>(null);
  const [member, setMember] = useState<string>(NONE);
  const [recommender, setRecommender] = useState<string>(NONE);
  const [ready, setReady] = useState(false);
  const [forbidden, setForbidden] = useState(false);
  const [saving, setSaving] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);

  const load = useCallback(async () => {
    const { data, response } = await api.GET("/api/v1/trees/{tree_id}/ai", {
      params: { path: { tree_id: treeId } },
    });
    if (response.status === 403) {
      setForbidden(true);
      setReady(true);
      return;
    }
    if (data) {
      setPolicy(data);
      setMember(data.member_provider ?? NONE);
      setRecommender(data.recommender_provider ?? NONE);
    }
    setReady(true);
  }, [treeId]);

  useEffect(() => {
    load();
  }, [load]);

  async function save() {
    setSaving(true);
    setMsg(null);
    const { data, error } = await api.PATCH("/api/v1/trees/{tree_id}/ai", {
      params: { path: { tree_id: treeId } },
      body: {
        member_provider: member || null,
        recommender_provider: recommender || null,
      },
    });
    setSaving(false);
    if (error || !data) {
      setMsg("Couldn't save — pick a provider your operator has configured.");
      return;
    }
    setPolicy(data);
    setMember(data.member_provider ?? NONE);
    setRecommender(data.recommender_provider ?? NONE);
    setMsg("Saved.");
  }

  if (!ready) {
    return <div className="p-6 text-sm text-[var(--muted)]">Loading…</div>;
  }

  if (forbidden) {
    return (
      <div className="mx-auto max-w-2xl p-6">
        <h1 className="text-xl font-semibold">AI models</h1>
        <p className="mt-2 text-sm text-[var(--muted)]">
          Only the tree owner can configure which AI models this tree uses.
        </p>
      </div>
    );
  }

  const providers = policy?.configured_providers ?? [];
  const dirty =
    member !== (policy?.member_provider ?? NONE) ||
    recommender !== (policy?.recommender_provider ?? NONE);

  const Select = ({
    value,
    onChange,
  }: {
    value: string;
    onChange: (v: string) => void;
  }) => (
    <select
      className="h-9 w-full max-w-xs rounded-md border border-[var(--border)] bg-[var(--surface)] px-2 text-sm"
      value={value}
      onChange={(e) => onChange(e.target.value)}
    >
      <option value={NONE}>No AI</option>
      {providers.map((p) => (
        <option key={p.name} value={p.name}>
          {p.name} — {p.model}
        </option>
      ))}
    </select>
  );

  return (
    <div className="mx-auto max-w-2xl p-6">
      <h1 className="text-xl font-semibold">AI models</h1>
      <p className="mt-1 text-sm text-[var(--muted)]">
        Choose which configured model each role uses. As the owner you can use any
        configured provider; these settings pin members and the recommender to one.
      </p>

      {providers.length === 0 ? (
        <Card className="mt-6">
          <CardContent className="py-6 text-sm text-[var(--muted)]">
            No AI providers are configured on this deployment. Set provider
            credentials in the server environment (Anthropic, OpenAI, x.AI, or
            Ollama) and they&apos;ll appear here.
          </CardContent>
        </Card>
      ) : (
        <>
          <Card className="mt-6">
            <CardContent className="flex flex-col gap-6 py-6">
              <div className="flex flex-col gap-2">
                <div>
                  <div className="text-sm font-medium">Members&apos; assistant</div>
                  <div className="text-xs text-[var(--muted)]">
                    The model non-owner members&apos; AI assistant uses.
                  </div>
                </div>
                <Select value={member} onChange={setMember} />
              </div>

              <div className="flex flex-col gap-2">
                <div>
                  <div className="text-sm font-medium">Recommender</div>
                  <div className="text-xs text-[var(--muted)]">
                    The model that finds associations and suggests connections.
                  </div>
                </div>
                <Select value={recommender} onChange={setRecommender} />
              </div>

              <div className="flex items-center gap-3">
                <Button onClick={save} disabled={!dirty || saving}>
                  {saving ? "Saving…" : "Save"}
                </Button>
                {msg && <span className="text-sm text-[var(--muted)]">{msg}</span>}
              </div>
            </CardContent>
          </Card>

          <div className="mt-4 text-xs text-[var(--muted)]">
            <span className="font-medium">Configured providers:</span>{" "}
            {providers.map((p) => `${p.name} (${p.model})`).join(", ")}.
            {policy?.default_provider && (
              <> Default: {policy.default_provider}.</>
            )}{" "}
            As the owner you can use all of them.
          </div>
        </>
      )}
    </div>
  );
}