@shipfox/client-integrations 4.0.0 → 6.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "4.0.0",
+  "version": "6.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -10,10 +10,6 @@
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "imports": {
-    "#*": "./dist/*",
-    "#test/*": "./test/*"
-  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -31,18 +27,19 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/api-integration-core-dto": "6.0.0",
-    "@shipfox/api-integration-gitea-dto": "6.0.0",
-    "@shipfox/api-integration-github-dto": "6.0.0",
-    "@shipfox/api-integration-linear-dto": "6.0.0",
-    "@shipfox/api-integration-slack-dto": "6.0.0",
-    "@shipfox/api-integration-sentry-dto": "6.0.0",
-    "@shipfox/api-integration-webhook-dto": "6.0.0",
-    "@shipfox/client-api": "4.0.0",
-    "@shipfox/client-auth": "4.0.0",
-    "@shipfox/client-shell": "4.0.0",
-    "@shipfox/client-ui": "4.0.0",
-    "@shipfox/react-ui": "0.3.5"
+    "@shipfox/api-integration-core-dto": "9.0.1",
+    "@shipfox/api-integration-gitea-dto": "9.0.1",
+    "@shipfox/api-integration-github-dto": "9.0.1",
+    "@shipfox/api-integration-linear-dto": "9.0.1",
+    "@shipfox/api-integration-slack-dto": "9.0.1",
+    "@shipfox/api-integration-sentry-dto": "9.0.1",
+    "@shipfox/api-integration-webhook-dto": "9.0.1",
+    "@shipfox/client-api": "6.0.1",
+    "@shipfox/client-auth": "6.0.1",
+    "@shipfox/client-shell": "6.0.1",
+    "@shipfox/client-ui": "6.0.1",
+    "@shipfox/integration-icons": "0.2.1",
+    "@shipfox/react-ui": "0.3.6"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",
@@ -51,6 +48,9 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "imports": {
+    "#*": "./dist/*"
+  },
   "scripts": {
     "build": "shipfox-swc",
     "check": "shipfox-biome-check",

package/src/application/complete-integration-callback.test.ts

@@ -0,0 +1,41 @@
+import {QueryClient} from '@tanstack/react-query';
+import type {IntegrationConnection} from '#core/models.js';
+import {integrationsQueryKeys} from '#hooks/api/integrations.js';
+import {completeIntegrationCallback} from './complete-integration-callback.js';
+
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+
+const connection: IntegrationConnection = {
+  id: '22222222-2222-4222-8222-222222222222',
+  workspaceId: WORKSPACE_ID,
+  provider: 'github',
+  externalAccountId: 'account',
+  slug: 'github-account',
+  displayName: 'GitHub',
+  lifecycleStatus: 'active',
+  capabilities: ['source_control'],
+  createdAt: '2026-07-23T00:00:00.000Z',
+  updatedAt: '2026-07-23T00:00:00.000Z',
+};
+
+describe('completeIntegrationCallback', () => {
+  test('invalidates the workspace connection views after callback completion', async () => {
+    const queryClient = new QueryClient();
+    const invalidateQueries = vi.spyOn(queryClient, 'invalidateQueries');
+    const refreshAuth = vi.fn().mockResolvedValue({accessToken: 'access-token'});
+    const complete = vi.fn().mockResolvedValue(connection);
+
+    const result = await completeIntegrationCallback({
+      input: {code: 'grant-code'},
+      refreshAuth,
+      complete,
+      queryClient,
+    });
+
+    expect(result).toBe(connection);
+    expect(complete).toHaveBeenCalledWith({code: 'grant-code'}, 'access-token');
+    expect(invalidateQueries).toHaveBeenCalledWith({
+      queryKey: integrationsQueryKeys.connectionsByWorkspace(WORKSPACE_ID),
+    });
+  });
+});

package/src/application/complete-integration-callback.ts

@@ -0,0 +1,39 @@
+import {type QueryClient, useQueryClient} from '@tanstack/react-query';
+import {useCallback} from 'react';
+import type {IntegrationConnection} from '#core/models.js';
+import {integrationsQueryKeys} from '#hooks/api/integrations.js';
+
+export interface CompleteIntegrationCallbackOptions<TInput> {
+  input: TInput;
+  refreshAuth: () => Promise<{accessToken: string}>;
+  complete: (input: TInput, accessToken: string) => Promise<IntegrationConnection>;
+  queryClient: QueryClient;
+}
+
+export async function completeIntegrationCallback<TInput>({
+  input,
+  refreshAuth,
+  complete,
+  queryClient,
+}: CompleteIntegrationCallbackOptions<TInput>): Promise<IntegrationConnection> {
+  const session = await refreshAuth();
+  const connection = await complete(input, session.accessToken);
+  try {
+    await queryClient.invalidateQueries({
+      queryKey: integrationsQueryKeys.connectionsByWorkspace(connection.workspaceId),
+    });
+  } catch {
+    // Cache refresh is best effort: the successful callback is already committed server-side.
+  }
+  return connection;
+}
+
+export function useCompleteIntegrationCallback() {
+  const queryClient = useQueryClient();
+  return useCallback(
+    async <TInput>(
+      options: Omit<CompleteIntegrationCallbackOptions<TInput>, 'queryClient'>,
+    ): Promise<IntegrationConnection> => completeIntegrationCallback({...options, queryClient}),
+    [queryClient],
+  );
+}

package/src/components/connection-picker.tsx

@@ -1,18 +1,18 @@
-import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
+import {IntegrationIcon} from '@shipfox/integration-icons';
 import {useIsTextTruncated} from '@shipfox/react-ui/hooks';
 import {Label} from '@shipfox/react-ui/label';
 import {RadioGroup, RadioGroupItem} from '@shipfox/react-ui/radio-group';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Text} from '@shipfox/react-ui/typography';
 import {useId} from 'react';
-import {IntegrationIcon} from '#integration-icon.js';
+import type {IntegrationConnection} from '#core/models.js';
 
 export function ConnectionPicker({
   connections,
   selectedConnectionId,
   onSelect,
 }: {
-  connections: IntegrationConnectionDto[];
+  connections: IntegrationConnection[];
   selectedConnectionId: string | undefined;
   onSelect: (connectionId: string) => void;
 }) {
@@ -39,8 +39,8 @@ export function ConnectionPicker({
   );
 }
 
-function ConnectionOption({connection}: {connection: IntegrationConnectionDto}) {
-  const {ref: nameRef, isTruncated} = useIsTextTruncated<HTMLSpanElement>(connection.display_name);
+function ConnectionOption({connection}: {connection: IntegrationConnection}) {
+  const {ref: nameRef, isTruncated} = useIsTextTruncated<HTMLSpanElement>(connection.displayName);
 
   return (
     <span className="flex min-w-0 items-center gap-10">
@@ -61,11 +61,11 @@ function ConnectionOption({connection}: {connection: IntegrationConnectionDto})
         <TooltipTrigger asChild>
           <span ref={nameRef} className="min-w-0 truncate">
             <Text as="span" size="sm" bold>
-              {connection.display_name}
+              {connection.displayName}
             </Text>
           </span>
         </TooltipTrigger>
-        {isTruncated ? <TooltipContent>{connection.display_name}</TooltipContent> : null}
+        {isTruncated ? <TooltipContent>{connection.displayName}</TooltipContent> : null}
       </Tooltip>
     </span>
   );

package/src/components/installed-integrations-section.tsx

@@ -1,8 +1,5 @@
-import type {
-  IntegrationConnectionDto,
-  ListIntegrationConnectionsResponseDto,
-} from '@shipfox/api-integration-core-dto';
 import {QueryLoadError} from '@shipfox/client-ui';
+import {IntegrationIcon} from '@shipfox/integration-icons';
 import {IconButton} from '@shipfox/react-ui/button';
 import {
   DropdownMenu,
@@ -15,18 +12,20 @@ import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {cn, formatDate} from '@shipfox/react-ui/utils';
-import type {UseQueryResult} from '@tanstack/react-query';
 import {Link} from '@tanstack/react-router';
 import {ConnectionStatusBadge} from '#connection-status-badge.js';
-import {IntegrationIcon} from '#integration-icon.js';
+import {type IntegrationConnection, isUsableConnection} from '#core/models.js';
 import {usageEventsForConnection} from './integration-usage-events.js';
 
 interface InstalledIntegrationsSectionProps {
-  connectionsQuery: UseQueryResult<ListIntegrationConnectionsResponseDto, Error>;
-  connections: IntegrationConnectionDto[];
+  connections: IntegrationConnection[];
+  isPending: boolean;
+  isFetching: boolean;
+  error?: Error | null | undefined;
+  onRetry: () => void;
   isMutating: boolean;
   onUse: (connectionId: string) => void;
-  onSetActive: (connection: IntegrationConnectionDto, active: boolean) => void;
+  onSetActive: (connection: IntegrationConnection, active: boolean) => void;
   onDelete: (connectionId: string) => void;
   providerDisplayName: (provider: string) => string | undefined;
 }
@@ -35,8 +34,11 @@ const INSTALLED_SURFACE_CLASS =
   'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
 
 export function InstalledIntegrationsSection({
-  connectionsQuery,
   connections,
+  isPending,
+  isFetching,
+  error,
+  onRetry,
   isMutating,
   onUse,
   onSetActive,
@@ -52,15 +54,18 @@ export function InstalledIntegrationsSection({
         </Text>
       </div>
 
-      {connectionsQuery.isPending ? <InstalledSkeleton label="Loading integrations" /> : null}
+      {isPending ? <InstalledSkeleton label="Loading integrations" /> : null}
 
-      {connectionsQuery.isError && connectionsQuery.data === undefined ? (
+      {error ? (
         <div className={cn(INSTALLED_SURFACE_CLASS, 'px-16')}>
-          <QueryLoadError query={connectionsQuery} subject="integrations" />
+          <QueryLoadError
+            query={{isError: true, isFetching, data: undefined, error, refetch: onRetry}}
+            subject="integrations"
+          />
         </div>
       ) : null}
 
-      {connectionsQuery.data !== undefined && connections.length === 0 ? (
+      {!isPending && !error && connections.length === 0 ? (
         <div className={cn(INSTALLED_SURFACE_CLASS, 'px-16')}>
           <EmptyState
             icon="componentLine"
@@ -97,15 +102,15 @@ function InstalledRow({
   onDelete,
   providerDisplayName,
 }: {
-  connection: IntegrationConnectionDto;
+  connection: IntegrationConnection;
   isMutating: boolean;
   onUse: (connectionId: string) => void;
   onSetActive: (active: boolean) => void;
   onDelete: (connectionId: string) => void;
   providerDisplayName: (provider: string) => string | undefined;
 }) {
-  const muted = connection.lifecycle_status === 'disabled';
-  const active = connection.lifecycle_status === 'active';
+  const muted = connection.lifecycleStatus === 'disabled';
+  const active = isUsableConnection(connection);
   const recentEventsEvent = usageEventsForConnection(connection)[0]?.value ?? 'received';
   const providerName = providerDisplayName(connection.provider);
 
@@ -126,12 +131,12 @@ function InstalledRow({
             bold
             className={cn('truncate', muted ? 'text-foreground-neutral-disabled' : undefined)}
           >
-            {connection.display_name}
+            {connection.displayName}
           </Text>
-          <ConnectionStatusBadge status={connection.lifecycle_status} className="shrink-0" />
+          <ConnectionStatusBadge status={connection.lifecycleStatus} className="shrink-0" />
         </div>
         <Text size="sm" className="truncate text-foreground-neutral-muted">
-          Added {formatDate(connection.created_at)}
+          Added {formatDate(connection.createdAt)}
         </Text>
       </div>
       <DropdownMenu>
@@ -140,13 +145,13 @@ function InstalledRow({
             size="sm"
             variant="transparent"
             icon="more2Line"
-            aria-label={`Open ${connection.display_name} integration actions`}
+            aria-label={`Open ${connection.displayName} integration actions`}
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
-          {connection.external_url ? (
+          {connection.externalUrl ? (
             <DropdownMenuItem asChild>
-              <a href={connection.external_url} target="_blank" rel="noreferrer noopener">
+              <a href={connection.externalUrl} target="_blank" rel="noreferrer noopener">
                 {providerName ? `Open in ${providerName}` : 'Open provider settings'}
               </a>
             </DropdownMenuItem>
@@ -157,7 +162,7 @@ function InstalledRow({
           <DropdownMenuItem asChild>
             <Link
               to="/workspaces/$wid/settings/events"
-              params={{wid: connection.workspace_id}}
+              params={{wid: connection.workspaceId}}
               search={{source: [connection.slug], event: [recentEventsEvent]}}
             >
               View recent events

package/src/components/integration-gallery-for-workspace.tsx

@@ -1,11 +1,11 @@
-import type {
-  IntegrationCapabilityDto,
-  IntegrationConnectionDto,
-  IntegrationProviderDto,
-} from '@shipfox/api-integration-core-dto';
 import {toast} from '@shipfox/react-ui/toast';
 import {Header, Text} from '@shipfox/react-ui/typography';
 import {useState} from 'react';
+import type {
+  IntegrationCapability,
+  IntegrationConnection,
+  IntegrationProvider,
+} from '#core/models.js';
 import {
   useDeleteIntegrationConnectionMutation,
   useIntegrationConnectionsQuery,
@@ -25,7 +25,7 @@ import {WebhookCreateModal} from './webhook/webhook-create-modal.js';
 import {WebhookUsageDetails} from './webhook/webhook-usage-details.js';
 
 interface IntegrationGalleryForWorkspaceProps {
-  capability: IntegrationCapabilityDto | undefined;
+  capability: IntegrationCapability | undefined;
   emptyProvidersMessage: string;
   workspaceId: string;
 }
@@ -38,7 +38,7 @@ export function IntegrationGalleryForWorkspace({
   const [createProvider, setCreateProvider] = useState<string | undefined>();
   const [usageConnectionId, setUsageConnectionId] = useState<string | undefined>();
   const [createdUsageConnection, setCreatedUsageConnection] = useState<
-    IntegrationConnectionDto | undefined
+    IntegrationConnection | undefined
   >();
   const [deleteConnectionId, setDeleteConnectionId] = useState<string | undefined>();
   const providersQuery = useIntegrationProvidersQuery(capability ? {capability} : undefined);
@@ -48,12 +48,12 @@ export function IntegrationGalleryForWorkspace({
   const updateWebhookConnection = useUpdateWebhookConnectionMutation();
   const deleteWebhookConnection = useDeleteWebhookConnectionMutation();
 
-  const providers = providersQuery.data?.providers ?? [];
-  const providersMap = new Map<string, IntegrationProviderDto>(
+  const providers = providersQuery.data ?? [];
+  const providersMap = new Map<string, IntegrationProvider>(
     providers.map((provider) => [provider.provider, provider]),
   );
 
-  const allConnections = connectionsQuery.data?.connections ?? [];
+  const allConnections = connectionsQuery.data ?? [];
   // Filter in memory so the all-status cache key stays shared; passing capability
   // into the hook would collide with the active-only `source_control` key used
   // elsewhere.
@@ -61,13 +61,13 @@ export function IntegrationGalleryForWorkspace({
     ? allConnections.filter((connection) => connection.capabilities.includes(capability))
     : allConnections;
 
-  const providerDisplayName = (provider: string) => providersMap.get(provider)?.display_name;
+  const providerDisplayName = (provider: string) => providersMap.get(provider)?.displayName;
   const providerLabel = (provider: string) => providerDisplayName(provider) ?? provider;
 
   const sortedConnections = [...connections].sort((a, b) => {
     const byProvider = providerLabel(a.provider).localeCompare(providerLabel(b.provider));
     if (byProvider !== 0) return byProvider;
-    return a.created_at.localeCompare(b.created_at);
+    return a.createdAt.localeCompare(b.createdAt);
   });
   const usageConnection =
     sortedConnections.find((connection) => connection.id === usageConnectionId) ??
@@ -77,7 +77,7 @@ export function IntegrationGalleryForWorkspace({
     (connection) => connection.id === deleteConnectionId,
   );
 
-  async function setConnectionActive(connection: IntegrationConnectionDto, active: boolean) {
+  async function setConnectionActive(connection: IntegrationConnection, active: boolean) {
     try {
       const body = {lifecycle_status: active ? 'active' : 'disabled'} as const;
       if (connection.provider === 'webhook') {
@@ -122,8 +122,11 @@ export function IntegrationGalleryForWorkspace({
   return (
     <div className="flex flex-col gap-24">
       <InstalledIntegrationsSection
-        connectionsQuery={connectionsQuery}
         connections={sortedConnections}
+        isPending={connectionsQuery.isPending}
+        isFetching={connectionsQuery.isFetching}
+        error={connectionsQuery.isError ? connectionsQuery.error : undefined}
+        onRetry={() => void connectionsQuery.refetch()}
         isMutating={
           updateConnection.isPending ||
           deleteConnection.isPending ||
@@ -147,7 +150,11 @@ export function IntegrationGalleryForWorkspace({
         </div>
 
         <ProviderGrid
-          providersQuery={providersQuery}
+          providers={providers}
+          isPending={providersQuery.isPending}
+          isFetching={providersQuery.isFetching}
+          error={providersQuery.isError ? providersQuery.error : undefined}
+          onRetry={() => void providersQuery.refetch()}
           workspaceId={workspaceId}
           emptyMessage={emptyProvidersMessage}
           onOpenProvider={setCreateProvider}
@@ -178,7 +185,7 @@ export function IntegrationGalleryForWorkspace({
         ) : null}
       </IntegrationUsageModal>
       <IntegrationDeleteConfirmModal
-        connectionName={deleteConnectionTarget?.display_name}
+        connectionName={deleteConnectionTarget?.displayName}
         open={deleteConnectionId !== undefined}
         isPending={deleteConnection.isPending || deleteWebhookConnection.isPending}
         onOpenChange={(open) => {

package/src/components/integration-gallery.tsx

@@ -1,9 +1,9 @@
-import type {IntegrationCapabilityDto} from '@shipfox/api-integration-core-dto';
 import {useActiveWorkspace} from '@shipfox/client-auth';
+import type {IntegrationCapability} from '#core/models.js';
 import {IntegrationGalleryForWorkspace} from './integration-gallery-for-workspace.js';
 
 export interface IntegrationGalleryProps {
-  capability?: IntegrationCapabilityDto;
+  capability?: IntegrationCapability;
   emptyProvidersMessage?: string;
   workspaceId?: string;
 }
@@ -35,7 +35,7 @@ function RoutedIntegrationGallery({
   capability,
   emptyProvidersMessage,
 }: {
-  capability: IntegrationCapabilityDto | undefined;
+  capability: IntegrationCapability | undefined;
   emptyProvidersMessage: string;
 }) {
   const workspace = useActiveWorkspace();

package/src/components/integration-usage-events.ts

@@ -1,116 +1 @@
-import type {IntegrationConnectionDto, SentryIssueAction} from '@shipfox/api-integration-core-dto';
-import {SENTRY_ISSUE_ACTIONS} from '@shipfox/api-integration-core-dto';
-import {linearWebhookEventNames} from '@shipfox/api-integration-linear-dto';
-import {WEBHOOK_RECEIVED_EVENT} from '@shipfox/api-integration-webhook-dto';
-import type {IntegrationUsageEvent} from './integration-usage-modal.js';
-
-const GITHUB_EVENTS = [
-  'push',
-  'branch_protection_configuration',
-  'branch_protection_rule',
-  'check_run',
-  'check_suite',
-  'code_scanning_alert',
-  'commit_comment',
-  'create',
-  'custom_property',
-  'custom_property_values',
-  'delete',
-  'dependabot_alert',
-  'deploy_key',
-  'deployment',
-  'deployment_protection_rule',
-  'deployment_review',
-  'deployment_status',
-  'discussion',
-  'discussion_comment',
-  'fork',
-  'github_app_authorization',
-  'gollum',
-  'installation',
-  'installation_repositories',
-  'installation_target',
-  'issue_comment',
-  'issue_dependencies',
-  'issues',
-  'label',
-  'marketplace_purchase',
-  'member',
-  'membership',
-  'merge_group',
-  'meta',
-  'milestone',
-  'org_block',
-  'organization',
-  'package',
-  'page_build',
-  'personal_access_token_request',
-  'ping',
-  'project',
-  'project_card',
-  'project_column',
-  'projects_v2',
-  'projects_v2_item',
-  'projects_v2_status_update',
-  'public',
-  'pull_request',
-  'pull_request_review',
-  'pull_request_review_comment',
-  'pull_request_review_thread',
-  'registry_package',
-  'release',
-  'repository',
-  'repository_advisory',
-  'repository_dispatch',
-  'repository_import',
-  'repository_ruleset',
-  'repository_vulnerability_alert',
-  'secret_scanning_alert',
-  'secret_scanning_alert_location',
-  'secret_scanning_scan',
-  'security_advisory',
-  'security_and_analysis',
-  'sponsorship',
-  'star',
-  'status',
-  'sub_issues',
-  'team',
-  'team_add',
-  'watch',
-  'workflow_dispatch',
-  'workflow_job',
-  'workflow_run',
-] as const;
-
-export function usageEventsForConnection(
-  connection: IntegrationConnectionDto,
-): IntegrationUsageEvent[] {
-  if (connection.provider === 'webhook') {
-    return [{value: WEBHOOK_RECEIVED_EVENT, label: WEBHOOK_RECEIVED_EVENT}];
-  }
-
-  if (connection.provider === 'github') {
-    return GITHUB_EVENTS.map((event) => ({value: event, label: event}));
-  }
-
-  if (connection.provider === 'sentry') {
-    return SENTRY_ISSUE_ACTIONS.map((action) => ({
-      value: `issue.${action}`,
-      label: sentryIssueEventLabel(action),
-    }));
-  }
-
-  if (connection.provider === 'linear') {
-    return linearWebhookEventNames.map((event) => ({value: event, label: event}));
-  }
-
-  if (connection.capabilities.includes('source_control')) {
-    return [{value: 'push', label: 'push'}];
-  }
-
-  return [{value: 'received', label: 'received'}];
-}
-
-function sentryIssueEventLabel(action: SentryIssueAction): string {
-  return `issue.${action}`;
-}
+export {usageEventsForConnection} from '#core/models.js';

package/src/components/integration-usage-modal.tsx

@@ -1,4 +1,3 @@
-import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
 import {Button} from '@shipfox/react-ui/button';
 import {
   CodeBlock,
@@ -29,6 +28,7 @@ import {Text} from '@shipfox/react-ui/typography';
 import type {ReactNode} from 'react';
 import {useEffect, useMemo, useState} from 'react';
 import {ConnectionStatusBadge} from '#connection-status-badge.js';
+import type {IntegrationConnection} from '#core/models.js';
 
 export interface IntegrationUsageEvent {
   value: string;
@@ -36,7 +36,7 @@ export interface IntegrationUsageEvent {
 }
 
 interface IntegrationUsageModalProps {
-  connection: IntegrationConnectionDto | null;
+  connection: IntegrationConnection | null;
   events: IntegrationUsageEvent[];
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -69,7 +69,7 @@ export function IntegrationUsageModal({
     () => [{language: 'yaml', filename: WORKFLOW_FILENAME, code: workflowExample}],
     [workflowExample],
   );
-  const title = connection ? `Use ${connection.display_name}` : 'Use integration';
+  const title = connection ? `Use ${connection.displayName}` : 'Use integration';
 
   return (
     <Modal open={open && connection !== null} onOpenChange={onOpenChange}>
@@ -82,7 +82,7 @@ export function IntegrationUsageModal({
                 {title}
               </Text>
               {connection ? (
-                <ConnectionStatusBadge status={connection.lifecycle_status} className="shrink-0" />
+                <ConnectionStatusBadge status={connection.lifecycleStatus} className="shrink-0" />
               ) : null}
             </div>
             <Text size="sm" className="text-foreground-neutral-muted">