atelier/web/Generate/ProvidersBar.tsx

import { useEffect, useState } from 'react';
import { Check, KeyRound, Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import type { ProviderStatus } from '../lib/api';
import type { ProvidersManager } from './useProviders';

/**
 * Providers, as one line at the top of the Generate panel.
 *
 * It was a whole panel — a card per provider, each with its own key field and three buttons, filling
 * a quarter of the screen for something set once and then ignored. What it actually has to answer is
 * "which one is this generation going to use", and that is a dropdown.
 *
 * Adding one opens a dialog rather than expanding the menu: it is three fields, one of them a secret,
 * and a menu that turns into a form cannot be dismissed by clicking away without losing what was typed.
 */
export const ProvidersBar = ({ manager }: { manager: ProvidersManager }) => {
  const [dialog, setDialog] = useState<null | { mode: 'add' } | { mode: 'key'; provider: ProviderStatus }>(null);

  const active =
    manager.providers.find((row) => row.is_default && row.configured && row.enabled) ??
    manager.providers.find((row) => row.configured && row.enabled) ??
    manager.providers[0];

  return (
    <div className="flex items-center gap-2">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="sm" className="min-w-0 flex-1 justify-start">
            <span className="truncate">{active ? label(active) : 'No provider'}</span>
            {active && !active.configured && <span className="ml-auto shrink-0 text-xs text-destructive">no key</span>}
          </Button>
        </DropdownMenuTrigger>

        <DropdownMenuContent align="start" className="w-72">
          {manager.providers.length === 0 && (
            <DropdownMenuItem disabled>No providers configured</DropdownMenuItem>
          )}

          {manager.providers.map((provider) => (
            <DropdownMenuItem
              key={provider.id}
              // Choosing one makes it the default, which is what "use this" means to the server: a
              // request names a model, and the default provider is the row that answers for it.
              onSelect={() => void manager.makeDefault(provider.id)}
              className="gap-2"
            >
              {provider.id === active?.id ? <Check className="size-3.5 shrink-0" /> : <span className="w-3.5" />}
              <span className="min-w-0 flex-1 truncate">{label(provider)}</span>

              {!provider.configured && (
                <button
                  type="button"
                  title="Set the API key"
                  className="shrink-0 rounded p-1 text-destructive hover:bg-destructive/10"
                  onClick={(ev) => {
                    // The row's own onSelect would close the menu and make this the default instead.
                    ev.preventDefault();
                    ev.stopPropagation();
                    setDialog({ mode: 'key', provider });
                  }}
                >
                  <KeyRound className="size-3.5" />
                </button>
              )}

              <button
                type="button"
                title="Delete this provider"
                className="shrink-0 rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
                onClick={(ev) => {
                  ev.preventDefault();
                  ev.stopPropagation();
                  void manager.remove(provider.id);
                }}
              >
                <Trash2 className="size-3.5" />
              </button>
            </DropdownMenuItem>
          ))}

          <DropdownMenuSeparator />
          <DropdownMenuItem onSelect={() => setDialog({ mode: 'add' })} className="gap-2">
            <Plus className="size-3.5" />
            Add provider
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      {manager.error && <span className="shrink-0 text-xs text-destructive">{manager.error}</span>}

      <ProviderDialog state={dialog} manager={manager} onClose={() => setDialog(null)} />
    </div>
  );
};

const label = (provider: ProviderStatus) => `${provider.adapter} · ${provider.model}`;

type DialogState = null | { mode: 'add' } | { mode: 'key'; provider: ProviderStatus };

/** Add a provider, or set the key on one that has none. Same dialog, since the key field is shared. */
const ProviderDialog = ({
  state,
  manager,
  onClose,
}: {
  state: DialogState;
  manager: ProvidersManager;
  onClose: () => void;
}) => {
  const [adapter, setAdapter] = useState('');
  const [model, setModel] = useState('');
  const [apiKey, setApiKey] = useState('');

  // Seeded when the dialog opens, not on every render: the adapter list arrives asynchronously, and
  // resetting on each render would fight the user's own choice as soon as it did.
  useEffect(() => {
    if (state?.mode !== 'add') return;
    const first = manager.adapters[0];
    setAdapter(first?.name ?? '');
    setModel(first?.default_model ?? '');
    setApiKey('');
  }, [state, manager.adapters]);

  useEffect(() => {
    if (state?.mode === 'key') setApiKey('');
  }, [state]);

  const submit = async () => {
    if (!state) return;
    const ok =
      state.mode === 'add'
        ? await manager.add(adapter, model, apiKey)
        : apiKey.trim()
          ? await manager.setKey(state.provider.id, apiKey)
          : false;
    if (ok) onClose();
  };

  return (
    <Dialog open={!!state} onOpenChange={(next) => !next && onClose()}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{state?.mode === 'key' ? 'Set API key' : 'Add a provider'}</DialogTitle>
          <DialogDescription>
            {state?.mode === 'key'
              ? `${label(state.provider)} — the key is stored encrypted and never sent back.`
              : 'An adapter and a model. The same adapter can back several providers — two keys, two accounts.'}
          </DialogDescription>
        </DialogHeader>

        <form
          className="grid gap-4"
          onSubmit={(ev) => {
            ev.preventDefault();
            void submit();
          }}
        >
          {state?.mode === 'add' && (
            <>
              <Label className="grid gap-2">
                <span className="text-xs text-muted-foreground">Adapter</span>
                <Select
                  value={adapter}
                  onValueChange={(value) => {
                    setAdapter(value);
                    setModel(manager.adapterFor(value)?.default_model ?? '');
                  }}
                >
                  <SelectTrigger className="w-full">
                    <SelectValue placeholder="Choose" />
                  </SelectTrigger>
                  <SelectContent>
                    {manager.adapters.map((entry) => (
                      <SelectItem key={entry.name} value={entry.name}>
                        {entry.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </Label>

              <Label className="grid gap-2">
                <span className="text-xs text-muted-foreground">Model</span>
                <Select value={model} onValueChange={setModel}>
                  <SelectTrigger className="w-full">
                    <SelectValue placeholder="Choose" />
                  </SelectTrigger>
                  <SelectContent>
                    {manager.modelsFor(adapter).map((entry) => (
                      <SelectItem key={entry} value={entry}>
                        {entry}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </Label>
            </>
          )}

          <Label className="grid gap-2">
            <span className="text-xs text-muted-foreground">
              API key {state?.mode === 'add' && <span className="text-muted-foreground/60">— optional</span>}
            </span>
            <Input
              type="password"
              autoComplete="off"
              placeholder="sk-…"
              value={apiKey}
              onChange={(ev) => setApiKey(ev.target.value)}
            />
            <span className="text-xs text-muted-foreground">
              {state?.mode === 'add'
                ? 'Leave empty if the key is already in the environment for this adapter.'
                : 'Stored encrypted, so this field always starts empty.'}
            </span>
          </Label>

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={onClose}>
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={manager.busy || (state?.mode === 'add' ? !adapter || !model : !apiKey.trim())}
            >
              {state?.mode === 'key' ? 'Save key' : 'Add'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};