Function AccountRow

packages/react/src/components/accounts-section.tsx:112–284

(props: {
  readonly connection: Connection;
  /** The integration declares scopes this connection was not granted — it must
   *  reconnect to grant the newly-needed access (e.g. after a service was added). */
  readonly needsReconsent: boolean;
  readonly showOwnerLabel: boolean;
  readonly onEdit: () => void;
  readonly onReconnect: () => void;
  readonly onRemove: () => void;
})

};

function AccountRow(props: {
  readonly connection: Connection;
  /** The integration declares scopes this connection was not granted — it must
   *  reconnect to grant the newly-needed access (e.g. after a service was added). */
  readonly needsReconsent: boolean;
  readonly showOwnerLabel: boolean;
  readonly onEdit: () => void;
  readonly onReconnect: () => void;
  readonly onRemove: () => void;
}) {
  const { connection, needsReconsent } = props;
  const [checking, setChecking] = useState(false);

  // The status renders WITHOUT any clicking: every checkHealth run persists its
  // verdict on the connection row, so the list answers "has this expired?" at a
  // glance. A live check from this session takes precedence. We deliberately do
  // NOT derive expiry from the stored `expiresAt`: that's the access-token
  // lifetime, which refreshes, so a passive countdown means nothing.
  //
  // Health checks are AUTOMATIC: the hook revalidates on mount, stale-while-
  // revalidate style (shared with the integrations-list summary), and the
  // persisted verdict renders instantly while the probe corrects it in place.
  const { probe, status, runCheck } = useConnectionHealth(connection);
  const indicator = HEALTH_INDICATOR_COLOR[status];

  // Prefer the stored label from the connection row, then a probed identity,
  // then the connection name. OAuth labels come from the grant's OIDC claims,
  // while health identities remain useful for non-OAuth probes.
  const identity =
    (connection.identityLabel && connection.identityLabel.length > 0
      ? connection.identityLabel
      : null) ?? (probe?.identity && probe.identity.length > 0 ? probe.identity : null);
  const displayLabel = identity ?? String(connection.name);

  const expired = status === "expired";
  // `misconfigured` is deliberately NOT folded into `needsHealthAttention`: it
  // gets its own amber "API disabled" badge and its own link-rendered detail
  // below, because the remediation is a console visit, not a reconnect.
  const misconfigured = status === "misconfigured";
  const needsHealthAttention = status === "expired" || status === "degraded";
  const healthDetail = needsHealthAttention ? probe?.detail : undefined;
  const missingOAuthScopes = connection.missingOAuthScopes ?? [];

  const handleCheck = async () => {
    if (checking) return;
    setChecking(true);
    const exit = await runCheck();
    setChecking(false);
    if (Exit.isFailure(exit)) {
      toast.error(messageFromExit(exit, "Health check failed"));
      return;
    }
    // The hook already folded the fresh probe into the live state.
    if (exit.value.status === "healthy") {
      toast.success(
        exit.value.identity ? `Healthy: ${exit.value.identity}` : "Connection is healthy",
      );
    } else if (exit.value.status === "expired") {