import {  ENVIRONMENT_MACHINE_KINDS,  isEnvironmentMachineKind,  resolveEnvironmentMachineKind,  type EnvironmentId,  type ServerConfig,} from "@t3tools/contracts";import { useCallback } from "react"; import { isElectron } from "../../env";import { usePrimarySessionState } from "../../environments/primary";import { useUpdateEnvironmentSettings } from "../../hooks/useSettings";import { usePrimaryEnvironmentId } from "../../state/environments";import { useEnvironmentSessionState } from "../../state/session";import { ENVIRONMENT_MACHINE_KIND_LABELS, EnvironmentMachineIcon } from "../EnvironmentMachineIcon";import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";import {  resolvePrimaryOperateAccess,  resolveRemoteOperateAccess,} from "./ProviderSettingsPanel.logic"; const AUTOMATIC_VALUE = "automatic"; /** * Why the picker is inert, in the order the user can do something about it. * Null means it can be changed. */export function resolveEnvironmentIconPickerLock(input: {  readonly serverConfig: ServerConfig | null;  readonly operateAccess: "granted" | "denied" | "pending";}): string | null {  if (input.serverConfig === null) {    return "Connect to this environment to change its icon.";  }  if (input.serverConfig.environment.capabilities.environmentIcon !== true) {    return "This environment's server is too old to keep an icon. Update it to choose one.";  }  if (input.operateAccess === "denied") {    return "Your session on this environment cannot change its settings.";  }  return null;} // Same split the provider settings use: the desktop app owns its primary// server outright, a browser session on the primary checks its cookie// session's scopes, and a remote checks the scopes its own server reports.function useEnvironmentOperateAccess(environmentId: EnvironmentId) {  const isPrimary = usePrimaryEnvironmentId() === environmentId;  const primarySession = usePrimarySessionState();  const remoteSession = useEnvironmentSessionState(environmentId);  if (isPrimary) {    return isElectron      ? "granted"      : resolvePrimaryOperateAccess({          isPrimary: true,          hasDesktopBridge: false,          session: primarySession.data,          isPending: primarySession.isPending,          hasError: primarySession.error !== null,        });  }  return resolveRemoteOperateAccess({    session: remoteSession.data,    isPending: remoteSession.isPending,    hasError: remoteSession.hasError,  });} /** * Picks the machine glyph an environment wears everywhere it is listed. * "Automatic" clears the override so the server's own detection shows * through; the label says what that currently resolves to so the user can * tell whether detection got it right before overriding. The control stays * visible while locked so the current icon still reads, the same way * server-scoped rows go inert instead of disappearing. */export function EnvironmentIconPicker({  environmentId,  serverConfig,  size = "sm",}: {  readonly environmentId: EnvironmentId;  readonly serverConfig: ServerConfig | null;  readonly size?: "xs" | "sm";}) {  const updateSettings = useUpdateEnvironmentSettings(environmentId);  const operateAccess = useEnvironmentOperateAccess(environmentId);  const lock = resolveEnvironmentIconPickerLock({ serverConfig, operateAccess });  const override = serverConfig?.settings.environmentIcon ?? null;  const detected = serverConfig?.environment.platform.machine ?? null;  const resolved = resolveEnvironmentMachineKind(serverConfig);  const value = override ?? AUTOMATIC_VALUE;  const automaticLabel =    detected === null ? "Automatic" : `Automatic (${ENVIRONMENT_MACHINE_KIND_LABELS[detected]})`;   const handleValueChange = useCallback(    (next: string | null) => {      if (next === null) return;      if (next === AUTOMATIC_VALUE) {        updateSettings({ environmentIcon: null });      } else if (isEnvironmentMachineKind(next)) {        updateSettings({ environmentIcon: next });      }    },    [updateSettings],  );   const select = (    <Select value={value} onValueChange={handleValueChange} disabled={lock !== null}>      <SelectTrigger size={size} className="w-full sm:w-52" aria-label="Environment icon">        <SelectValue>          <span className="flex min-w-0 items-center gap-2">            <EnvironmentMachineIcon kind={resolved} className="size-3.5 shrink-0" />            <span className="truncate">              {override === null ? automaticLabel : ENVIRONMENT_MACHINE_KIND_LABELS[override]}            </span>          </span>        </SelectValue>      </SelectTrigger>      <SelectPopup align="end" alignItemWithTrigger={false}>        <SelectItem hideIndicator value={AUTOMATIC_VALUE}>          <span className="flex min-w-0 items-center gap-2">            <EnvironmentMachineIcon kind={detected ?? "server"} className="size-3.5 shrink-0" />            <span className="truncate">{automaticLabel}</span>          </span>        </SelectItem>        {ENVIRONMENT_MACHINE_KINDS.map((kind) => (          <SelectItem hideIndicator key={kind} value={kind}>            <span className="flex min-w-0 items-center gap-2">              <EnvironmentMachineIcon kind={kind} className="size-3.5 shrink-0" />              <span className="truncate">{ENVIRONMENT_MACHINE_KIND_LABELS[kind]}</span>            </span>          </SelectItem>        ))}      </SelectPopup>    </Select>  );   if (lock === null) {    return select;  }  return (    <Tooltip>      <TooltipTrigger        render={          // Focusable so keyboard users can still reach the explanation.          <span            tabIndex={0}            className="flex w-full items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring sm:w-auto"          />        }      >        <span className="flex w-full items-center sm:w-auto">{select}</span>      </TooltipTrigger>      <TooltipPopup side="top" className="max-w-72">        {lock}      </TooltipPopup>    </Tooltip>  );}