Function AccountRow

packages/react/src/components/accounts-section.tsx:121–315

(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;
  /** Reconnect routing needs the stored client binding; while the client
   *  summaries carry no data the route is unknown, so the action is
   *  disabled rather than guessed (same idiom as "Check now" above). */
  readonly reconnectDisabled: boolean;
  /** The summaries query failed: the Reconnect item stays disabled but says
   *  so (never a silently dead action). Retained stale data never routes — a
   *  binding changed since the snapshot could misroute. Opening the menu
   *  retries the query via `onMenuOpenChange`, so the hint reflects a retry
   *  that just failed, not a permanently stuck state. */
  readonly reconnectFailed: boolean;
  /** Forwarded to the row menu; the owner uses the OPEN transition to retry
   *  a failed client-summaries query. */
  readonly onMenuOpenChange: (open: boolean) => 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;
  /** Reconnect routing needs the stored client binding; while the client
   *  summaries carry no data the route is unknown, so the action is
   *  disabled rather than guessed (same idiom as "Check now" above). */
  readonly reconnectDisabled: boolean;
  /** The summaries query failed: the Reconnect item stays disabled but says
   *  so (never a silently dead action). Retained stale data never routes — a
   *  binding changed since the snapshot could misroute. Opening the menu
   *  retries the query via `onMenuOpenChange`, so the hint reflects a retry
   *  that just failed, not a permanently stuck state. */
  readonly reconnectFailed: boolean;
  /** Forwarded to the row menu; the owner uses the OPEN transition to retry
   *  a failed client-summaries query. */
  readonly onMenuOpenChange: (open: boolean) => 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;