"use client"; import {  ArrowUpCircleIcon,  ChevronDownIcon,  CopyIcon,  DownloadIcon,  LoaderIcon,  PlusIcon,  Trash2Icon,  XIcon,} from "lucide-react";import { useEffect, useState, type ReactNode } from "react";import {  isProviderDriverKind,  type ProviderInstanceConfig,  type ProviderInstanceEnvironmentVariable,  type ProviderInstanceId,  type ProviderDriverKind,  type ServerProvider,  type ServerProviderModel,} from "@t3tools/contracts"; import { cn } from "../../lib/utils";import { useCopyToClipboard } from "../../hooks/useCopyToClipboard";import { normalizeProviderAccentColor } from "../../providerInstances";import { Badge } from "../ui/badge";import { Button } from "../ui/button";import { Collapsible, CollapsibleContent } from "../ui/collapsible";import { DraftInput } from "../ui/draft-input";import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";import { Switch } from "../ui/switch";import { stackedThreadToast, toastManager } from "../ui/toast";import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";import type { DriverOption } from "./providerDriverMeta";import { ProviderSettingsForm } from "./ProviderSettingsForm";import { ProviderModelsSection } from "./ProviderModelsSection";import { ProviderInstanceIcon } from "../chat/ProviderInstanceIcon";import { RedactedSensitiveText } from "./RedactedSensitiveText";import {  getProviderVersionAdvisoryPresentation,  PROVIDER_STATUS_STYLES,  getProviderSummary,  getProviderVersionLabel,  type ProviderStatusKey,} from "./providerStatus"; const PROVIDER_ACCENT_SWATCHES = [  "#2563eb",  "#16a34a",  "#ea580c",  "#dc2626",  "#7c3aed",  "#0891b2",] as const; const ENVIRONMENT_VARIABLE_NAME_PATTERN = /^[a-zA-Z_][a-zA-Z0-9_]*$/; let environmentVariableDraftId = 0;const nextEnvironmentVariableDraftId = () => `provider-env-${environmentVariableDraftId++}`; type EnvironmentDraftRow = {  readonly id: string;  readonly name: string;  readonly value: string;  readonly sensitive: boolean;  readonly valueRedacted?: boolean;}; function makeEnvironmentDraftRow(  variable: ProviderInstanceEnvironmentVariable,  index: number,): EnvironmentDraftRow {  return {    id: `${index}:${variable.name}`,    name: variable.name,    value: variable.value,    sensitive: variable.sensitive,    ...(variable.valueRedacted !== undefined ? { valueRedacted: variable.valueRedacted } : {}),  };} /** * Read a string[] at `key` from the opaque config blob, filtering out * non-string entries. Used for `customModels`, which is always typed as * `string[]` by the concrete driver schemas but arrives here as * `Schema.Unknown`. */function readConfigStringArray(config: unknown, key: string): ReadonlyArray<string> {  if (config === null || typeof config !== "object") return [];  const value = (config as Record<string, unknown>)[key];  if (!Array.isArray(value)) return [];  return value.filter((entry): entry is string => typeof entry === "string");} /** * Set `key` to an arbitrary value on the opaque config blob. Unlike * provider settings field updates, does not drop empty-looking values — the * caller is responsible for deciding whether an empty array / empty * object should be stored explicitly (e.g. `customModels: []` is a * meaningful "user cleared their custom list" state distinct from * "driver default"). */function nextConfigBlobWithValue(  config: unknown,  key: string,  value: unknown,): Record<string, unknown> {  const base: Record<string, unknown> =    config !== null && typeof config === "object" ? { ...(config as Record<string, unknown>) } : {};  base[key] = value;  return base;} export function deriveProviderModelsForDisplay(input: {  readonly liveModels: ReadonlyArray<ServerProviderModel> | undefined;  readonly customModels: ReadonlyArray<string>;}): ReadonlyArray<ServerProviderModel> {  const liveCustomModelsBySlug = new Map(    (input.liveModels ?? [])      .filter((model) => model.isCustom)      .map((model) => [model.slug, model] as const),  );  const serverModels = input.liveModels?.filter((model) => !model.isCustom) ?? [];  const customModels = input.customModels.map(    (slug) =>      liveCustomModelsBySlug.get(slug) ?? {        slug,        name: slug,        isCustom: true,        capabilities: null,      },  );  return [...serverModels, ...customModels];} function ProviderAuthEmail(props: {  readonly email: string | undefined;  readonly prefix?: string;  readonly separator?: boolean;}) {  const trimmed = props.email?.trim();  if (!trimmed) return null;   return (    <span className="inline-flex min-w-0 items-center gap-1.5">      {props.separator ? <span aria-hidden>·</span> : null}      {props.prefix ? <span className="text-muted-foreground/80">{props.prefix}</span> : null}      <RedactedSensitiveText        value={trimmed}        ariaLabel="Toggle account email visibility"        revealTooltip="Click to reveal email"        hideTooltip="Click to hide email"      />    </span>  );} function ProviderAccentColorPicker(props: {  readonly displayName: string;  readonly value: string | undefined;  readonly onCommit: (value: string) => void;}) {  const [draft, setDraft] = useState(props.value ?? "");  const [isEditing, setIsEditing] = useState(false);  const draftColor = normalizeProviderAccentColor(draft);   useEffect(() => {    if (isEditing) return;    setDraft(props.value ?? "");  }, [isEditing, props.value]);   const commitDraft = () => {    setIsEditing(false);    props.onCommit(draftColor ?? "");  };   const commitSwatch = (swatch: string) => {    setIsEditing(false);    setDraft(swatch);    props.onCommit(swatch);  };   return (    <div className="grid gap-2">      <span className="text-xs font-medium text-foreground">Accent color</span>      <div className="flex min-w-0 flex-wrap items-center gap-2">        <input          type="color"          value={draftColor ?? PROVIDER_ACCENT_SWATCHES[0]}          onFocus={() => setIsEditing(true)}          onInput={(event) => {            setIsEditing(true);            setDraft(event.currentTarget.value);          }}          onChange={(event) => {            setIsEditing(true);            setDraft(event.currentTarget.value);          }}          onBlur={commitDraft}          aria-label={`Accent color for ${props.displayName}`}          className="h-8 w-10 cursor-pointer rounded border border-input bg-background p-0.5"        />        <div className="flex flex-wrap gap-1.5">          {PROVIDER_ACCENT_SWATCHES.map((swatch) => {            const selected = draftColor?.toLowerCase() === swatch;            return (              <button                key={swatch}                type="button"                className={cn(                  "size-6 cursor-pointer rounded-full border transition",                  selected                    ? "border-foreground ring-2 ring-ring ring-offset-1 ring-offset-background"                    : "border-black/10 hover:scale-105 dark:border-white/20",                )}                style={{ backgroundColor: swatch }}                onClick={() => commitSwatch(swatch)}                aria-label={`Use ${swatch} accent`}              />            );          })}        </div>        {draftColor ? (          <Button            type="button"            size="sm"            variant="ghost"            className="h-7 px-2 text-xs text-muted-foreground"            onClick={() => {              setIsEditing(false);              setDraft("");              props.onCommit("");            }}          >            Clear          </Button>        ) : null}      </div>      <span className="text-xs text-muted-foreground">        Used to distinguish this instance in picker rails and model lists.      </span>    </div>  );} function ProviderEnvironmentSection(props: {  readonly environment: ReadonlyArray<ProviderInstanceEnvironmentVariable>;  readonly onChange: (environment: ReadonlyArray<ProviderInstanceEnvironmentVariable>) => void;}) {  const [rows, setRows] = useState<ReadonlyArray<EnvironmentDraftRow>>(() =>    props.environment.map(makeEnvironmentDraftRow),  );   useEffect(() => {    setRows(props.environment.map(makeEnvironmentDraftRow));  }, [props.environment]);   const publishRows = (nextRows: ReadonlyArray<EnvironmentDraftRow>) => {    const published: ProviderInstanceEnvironmentVariable[] = [];    for (const row of nextRows) {      const name = row.name.trim();      if (!ENVIRONMENT_VARIABLE_NAME_PATTERN.test(name)) {        if (          name.length > 0 ||          row.value.length > 0 ||          row.sensitive !== true ||          row.valueRedacted !== undefined        ) {          return;        }        continue;      }      const { id: _id, ...rest } = row;      published.push({ ...rest, name });    }    props.onChange(published);  };   const updateVariable = (id: string, patch: Partial<Omit<EnvironmentDraftRow, "id">>) => {    const nextRows = rows.map((row) =>      row.id === id        ? {            ...row,            ...patch,            ...(patch.value !== undefined ? { valueRedacted: false } : {}),          }        : row,    );    setRows(nextRows);    publishRows(nextRows);  };   const removeVariable = (id: string) => {    const nextRows = rows.filter((row) => row.id !== id);    setRows(nextRows);    publishRows(nextRows);  };   return (    <div className="grid gap-2">      <div className="flex items-center justify-between gap-3">        <span className="text-xs font-medium text-foreground">Environment variables</span>        <Button          type="button"          size="sm"          variant="outline"          className="h-7 gap-1.5 px-2 text-xs"          onClick={() =>            setRows([              ...rows,              {                id: nextEnvironmentVariableDraftId(),                name: "",                value: "",                sensitive: true,              },            ])          }        >          <PlusIcon className="size-3" />          Add        </Button>      </div>      {rows.length === 0 ? (        <p className="text-xs text-muted-foreground">          Add variables to pass API keys, base URLs, or other per-instance CLI settings.        </p>      ) : (        <div className="grid gap-2">          {rows.map((variable, index) => (            <div              key={variable.id}              className="grid gap-2 rounded-md border border-border/70 bg-muted/20 p-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)_auto_auto] sm:items-center"            >              <DraftInput                value={variable.name}                onCommit={(name) => updateVariable(variable.id, { name: name.trim() })}                placeholder="VARIABLE_NAME"                spellCheck={false}                aria-label={`Environment variable name ${index + 1}`}              />              <DraftInput                value={variable.valueRedacted ? "" : variable.value}                onCommit={(value) => updateVariable(variable.id, { value })}                type={variable.sensitive ? "password" : undefined}                autoComplete="off"                placeholder={                  variable.valueRedacted ? "Stored secret - enter a new value to replace" : "Value"                }                spellCheck={false}                aria-label={`Environment variable value ${index + 1}`}              />              <label className="inline-flex h-8 items-center gap-2 text-xs text-muted-foreground">                <input                  type="checkbox"                  className="size-3.5"                  checked={variable.sensitive}                  onChange={(event) => {                    const sensitive = event.currentTarget.checked;                    updateVariable(variable.id, {                      sensitive,                      ...(sensitive && variable.valueRedacted === undefined                        ? {}                        : { valueRedacted: sensitive ? variable.valueRedacted : false }),                    });                  }}                />                Sensitive              </label>              <Button                type="button"                size="icon-sm"                variant="ghost"                className="size-8 justify-self-start text-muted-foreground hover:text-destructive sm:justify-self-end"                onClick={() => removeVariable(variable.id)}                aria-label={`Remove environment variable ${variable.name || index + 1}`}              >                <XIcon className="size-3.5" />              </Button>            </div>          ))}        </div>      )}      <span className="text-xs text-muted-foreground">        Sensitive values are stored separately and are not returned to the app after saving.      </span>    </div>  );} interface ProviderInstanceCardProps {  readonly instanceId: ProviderInstanceId;  readonly instance: ProviderInstanceConfig;  readonly driverOption: DriverOption | undefined;  readonly liveProvider: ServerProvider | undefined;  readonly isExpanded: boolean;  readonly onExpandedChange: (open: boolean) => void;  readonly onUpdate: (nextInstance: ProviderInstanceConfig) => void;  /**   * Pass `undefined` to hide the delete button entirely. Built-in default   * instance slots use `undefined` — they can't be deleted without losing   * the slot, and their "reset to defaults" affordance lives on an outer   * reset button instead. Explicit `| undefined` in the type accommodates   * `exactOptionalPropertyTypes: true`, where an absent key and   * `{ onDelete: undefined }` are treated as distinct shapes.   */  readonly onDelete?: (() => void) | undefined;  /**   * Optional outer reset button rendered next to the driver icon. Built-in   * default slots supply a reset-to-factory control here; custom instances   * omit it.   */  readonly headerAction?: ReactNode | undefined;  readonly hiddenModels: ReadonlyArray<string>;  readonly favoriteModels: ReadonlyArray<string>;  readonly modelOrder: ReadonlyArray<string>;  readonly onHiddenModelsChange: (next: ReadonlyArray<string>) => void;  readonly onFavoriteModelsChange: (next: ReadonlyArray<string>) => void;  readonly onModelOrderChange: (next: ReadonlyArray<string>) => void;  readonly onRunUpdate?: (() => void) | undefined;  readonly isUpdating?: boolean | undefined;} /** * A single configured provider-instance row in the Providers settings * section. Used for every row — both the built-in default instance for a * driver (rendered with `onDelete` omitted) and user-authored custom * instances (`onDelete` supplied). The only UI difference between the two * is whether the trash button is visible; every other field (display * name, config fields, models) behaves identically. * * Behavior notes: *   - `liveProvider` is matched by the caller via `instanceId`; when no *     match is available (e.g. the server hasn't probed yet, or the *     driver is not shipped by the current build) the card still renders *     with a neutral "checking" summary. *   - Unknown drivers (`driverOption === undefined`) get a read-only *     notice instead of editable fields, so fork instances round-trip *     without accidentally destroying their config. *   - The enabled Switch writes to the envelope's `instance.enabled` *     field; the server's registry consults this at `entry.enabled ?? true` *     before materializing the instance, and the probe also checks its *     driver-specific `config.enabled`. We treat the envelope flag as the *     single source of truth from the UI — built-in cards used to write *     the inner flag, but on the promotion-to-instance path every edit *     flows through the envelope. */export function ProviderInstanceCard({  instanceId,  instance,  driverOption,  liveProvider,  isExpanded,  onExpandedChange,  onUpdate,  onDelete,  headerAction,  hiddenModels,  favoriteModels,  modelOrder,  onHiddenModelsChange,  onFavoriteModelsChange,  onModelOrderChange,  onRunUpdate,  isUpdating = false,}: ProviderInstanceCardProps) {  const enabled = instance.enabled ?? true;  // The server-reported status wins when present; otherwise fall back to  // "disabled"/"warning" based on the local `enabled` flag so the dot  // reflects the persisted intent even before the first probe completes.  const statusKey: ProviderStatusKey =    (liveProvider?.status as ProviderStatusKey | undefined) ?? (enabled ? "warning" : "disabled");  const statusStyle = PROVIDER_STATUS_STYLES[statusKey];  const rawSummary = getProviderSummary(liveProvider);  const authEmail = liveProvider?.auth.email;  const hasAuthenticatedEmail =    liveProvider?.auth.status === "authenticated" && Boolean(authEmail?.trim());  const authenticatedDetail = hasAuthenticatedEmail    ? (liveProvider?.auth.label ?? liveProvider?.auth.type ?? null)    : null;  const summary = rawSummary;  const versionLabel = getProviderVersionLabel(liveProvider?.version);  const versionAdvisory = getProviderVersionAdvisoryPresentation(liveProvider?.versionAdvisory);  const updateCommand = versionAdvisory?.updateCommand ?? null;  const FallbackIconComponent = driverOption?.icon;  const displayName =    instance.displayName?.trim() || driverOption?.label || String(instance.driver);  const accentColor = normalizeProviderAccentColor(instance.accentColor);  const { copyToClipboard } = useCopyToClipboard<{ providerName: string }>({    onCopy: ({ providerName }) => {      toastManager.add({        type: "success",        title: `${providerName} update command copied`,        description: "Run it in a terminal when you are ready to update.",      });    },    onError: (error, { providerName }) => {      toastManager.add(        stackedThreadToast({

Lines 1–500 of 868. Load more