@shipfox/client-integrations 13.0.0 → 14.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-integrations",
   "license": "MIT",
-  "version": "13.0.0",
+  "version": "14.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -28,18 +28,19 @@
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
     "@shipfox/api-integration-core-dto": "12.0.0",
+    "@shipfox/api-integration-gitea-dto": "12.0.0",
     "@shipfox/api-integration-github-dto": "12.0.0",
+    "@shipfox/api-integration-jira-dto": "12.0.0",
     "@shipfox/api-integration-linear-dto": "12.0.0",
-    "@shipfox/api-integration-gitea-dto": "12.0.0",
     "@shipfox/api-integration-slack-dto": "12.0.0",
+    "@shipfox/api-integration-sentry-dto": "12.0.0",
     "@shipfox/api-integration-webhook-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "13.0.0",
-    "@shipfox/integration-icons": "0.2.3",
-    "@shipfox/api-integration-sentry-dto": "12.0.0",
-    "@shipfox/client-ui": "13.0.0",
-    "@shipfox/client-auth": "13.0.0",
-    "@shipfox/react-ui": "0.4.0"
+    "@shipfox/client-auth": "14.0.1",
+    "@shipfox/client-shell": "14.0.1",
+    "@shipfox/client-ui": "14.0.1",
+    "@shipfox/integration-icons": "0.3.1",
+    "@shipfox/react-ui": "1.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

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

@@ -1,7 +1,10 @@
 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';
+import {
+  completeIntegrationCallback,
+  completeIntegrationCallbackResult,
+} from './complete-integration-callback.js';
 
 const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
 
@@ -38,4 +41,44 @@ describe('completeIntegrationCallback', () => {
       queryKey: integrationsQueryKeys.connectionsByWorkspace(WORKSPACE_ID),
     });
   });
+
+  test('does not invalidate a connection view for a result without a connection', async () => {
+    const queryClient = new QueryClient();
+    const invalidateQueries = vi.spyOn(queryClient, 'invalidateQueries');
+    const refreshAuth = vi.fn().mockResolvedValue({accessToken: 'access-token'});
+    const complete = vi.fn().mockResolvedValue({sites: []});
+
+    const result = await completeIntegrationCallbackResult({
+      input: {code: 'grant-code'},
+      refreshAuth,
+      complete,
+      getConnection: () => undefined,
+      queryClient,
+    });
+
+    expect(result).toEqual({sites: []});
+    expect(complete).toHaveBeenCalledWith({code: 'grant-code'}, 'access-token');
+    expect(invalidateQueries).not.toHaveBeenCalled();
+  });
+
+  test('invalidates a connection view for a result with a connection', async () => {
+    const queryClient = new QueryClient();
+    const invalidateQueries = vi.spyOn(queryClient, 'invalidateQueries');
+    const refreshAuth = vi.fn().mockResolvedValue({accessToken: 'access-token'});
+    const complete = vi.fn(async () => connection);
+
+    const result = await completeIntegrationCallbackResult({
+      input: {code: 'grant-code'},
+      refreshAuth,
+      complete,
+      getConnection: (value) => value,
+      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

@@ -10,22 +10,65 @@ export interface CompleteIntegrationCallbackOptions<TInput> {
   queryClient: QueryClient;
 }
 
+export interface CompleteIntegrationCallbackResultOptions<TInput, TResult> {
+  input: TInput;
+  refreshAuth: () => Promise<{accessToken: string}>;
+  complete: (input: TInput, accessToken: string) => Promise<TResult>;
+  getConnection: (result: TResult) => IntegrationConnection | undefined;
+  queryClient: QueryClient;
+}
+
 export async function completeIntegrationCallback<TInput>({
   input,
   refreshAuth,
   complete,
   queryClient,
 }: CompleteIntegrationCallbackOptions<TInput>): Promise<IntegrationConnection> {
+  return await completeIntegrationCallbackResultInternal({
+    input,
+    refreshAuth,
+    complete,
+    getConnection: (result) => result,
+    queryClient,
+  });
+}
+
+export async function completeIntegrationCallbackResult<TInput, TResult>({
+  input,
+  refreshAuth,
+  complete,
+  getConnection,
+  queryClient,
+}: CompleteIntegrationCallbackResultOptions<TInput, TResult>): Promise<TResult> {
+  return await completeIntegrationCallbackResultInternal({
+    input,
+    refreshAuth,
+    complete,
+    getConnection,
+    queryClient,
+  });
+}
+
+async function completeIntegrationCallbackResultInternal<TInput, TResult>({
+  input,
+  refreshAuth,
+  complete,
+  getConnection,
+  queryClient,
+}: CompleteIntegrationCallbackResultOptions<TInput, TResult>): Promise<TResult> {
   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.
+  const result = await complete(input, session.accessToken);
+  const connection = getConnection(result);
+  if (connection) {
+    try {
+      await queryClient.invalidateQueries({
+        queryKey: integrationsQueryKeys.connectionsByWorkspace(connection.workspaceId),
+      });
+    } catch {
+      // Cache refresh is best effort: the callback is already committed server-side.
+    }
   }
-  return connection;
+  return result;
 }
 
 export function useCompleteIntegrationCallback() {
@@ -37,3 +80,13 @@ export function useCompleteIntegrationCallback() {
     [queryClient],
   );
 }
+
+export function useCompleteIntegrationCallbackResult() {
+  const queryClient = useQueryClient();
+  return useCallback(
+    async <TInput, TResult>(
+      options: Omit<CompleteIntegrationCallbackResultOptions<TInput, TResult>, 'queryClient'>,
+    ): Promise<TResult> => completeIntegrationCallbackResult({...options, queryClient}),
+    [queryClient],
+  );
+}

package/src/components/callback-status-shell.tsx

@@ -19,7 +19,10 @@ export function CallbackStatusShell({
   startOver?: boolean;
   switchAccount?: boolean;
   workspaceSlug?: string | undefined;
-  installPath: '/w/$workspaceSlug/integrations/linear' | '/w/$workspaceSlug/integrations/slack';
+  installPath:
+    | '/w/$workspaceSlug/integrations/linear'
+    | '/w/$workspaceSlug/integrations/slack'
+    | '/w/$workspaceSlug/integrations/jira';
 }) {
   const headingRef = useRef<HTMLHeadingElement>(null);
   useEffect(() => headingRef.current?.focus(), []);
@@ -40,15 +43,15 @@ export function CallbackStatusShell({
     : undefined;
 
   return (
-    <main className="flex min-h-screen bg-background-subtle-base px-16 py-32">
-      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-20">
+    <main className="flex min-h-screen bg-background-subtle-base px-row py-frame">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col justify-center gap-section">
         <h2 ref={headingRef} tabIndex={-1} className="text-24 font-semibold outline-none">
           {title}
         </h2>
         <Callout role={status === 'error' ? 'alert' : 'status'} type={status}>
           <Text size="sm">{message}</Text>
         </Callout>
-        <div className="flex flex-col gap-8 sm:flex-row sm:items-center">
+        <div className="flex flex-col gap-inline sm:flex-row sm:items-center">
           {switchAccount ? (
             <ButtonLink asChild className="min-h-44 w-full sm:w-fit">
               <Link

package/src/components/connection-picker.tsx

@@ -19,7 +19,7 @@ export function ConnectionPicker({
   const labelId = useId();
 
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-inline">
       <Label id={labelId} className="sr-only">
         Source integration
       </Label>
@@ -27,7 +27,7 @@ export function ConnectionPicker({
         aria-labelledby={labelId}
         value={selectedConnectionId ?? ''}
         onValueChange={onSelect}
-        className="grid grid-cols-2 gap-8 max-[760px]:grid-cols-1"
+        className="grid grid-cols-2 gap-inline max-[760px]:grid-cols-1"
       >
         {connections.map((connection) => (
           <RadioGroupItem key={connection.id} value={connection.id}>
@@ -43,7 +43,7 @@ function ConnectionOption({connection}: {connection: IntegrationConnection}) {
   const {ref: nameRef, isTruncated} = useIsTextTruncated<HTMLSpanElement>(connection.displayName);
 
   return (
-    <span className="flex min-w-0 items-center gap-10">
+    <span className="flex min-w-0 items-center gap-inline">
       <Tooltip>
         <TooltipTrigger asChild>
           <span className="shrink-0">

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

@@ -48,8 +48,8 @@ export function InstalledIntegrationsSection({
   providerDisplayName,
 }: InstalledIntegrationsSectionProps) {
   return (
-    <section className="flex flex-col gap-16" aria-label="Installed integrations">
-      <div className="flex flex-col gap-4">
+    <section className="flex flex-col gap-group" aria-label="Installed integrations">
+      <div className="flex flex-col gap-tight">
         <Header variant="h3">Installed integrations</Header>
         <Text size="sm" className="text-foreground-neutral-muted">
           Provider accounts installed in this workspace.
@@ -59,7 +59,7 @@ export function InstalledIntegrationsSection({
       {isPending ? <InstalledSkeleton label="Loading integrations" /> : null}
 
       {error ? (
-        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-16')}>
+        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-row')}>
           <QueryLoadError
             query={{isError: true, isFetching, data: undefined, error, refetch: onRetry}}
             subject="integrations"
@@ -68,7 +68,7 @@ export function InstalledIntegrationsSection({
       ) : null}
 
       {!isPending && !error && connections.length === 0 ? (
-        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-16')}>
+        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-row')}>
           <EmptyState
             icon="componentLine"
             title="No integrations installed yet"
@@ -120,7 +120,7 @@ function InstalledRow({
   const providerName = providerDisplayName(connection.provider);
 
   return (
-    <li className="flex items-center gap-12 px-16 py-12 transition-colors hover:bg-background-components-hover">
+    <li className="flex items-center gap-cluster px-row py-row transition-colors hover:bg-background-components-hover">
       <IntegrationIcon
         source={connection.provider}
         aria-hidden
@@ -129,8 +129,8 @@ function InstalledRow({
           muted ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-base',
         )}
       />
-      <div className="flex min-w-0 flex-1 flex-col gap-2">
-        <div className="flex min-w-0 items-center gap-8">
+      <div className="flex min-w-0 flex-1 flex-col gap-tight">
+        <div className="flex min-w-0 items-center gap-inline">
           <Text
             size="md"
             bold
@@ -196,9 +196,9 @@ function InstalledSkeleton({label}: {label: string}) {
       className={cn('divide-y divide-border-neutral-base', INSTALLED_SURFACE_CLASS)}
     >
       {[0, 1, 2].map((row) => (
-        <li key={row} className="flex items-center gap-12 px-16 py-12">
+        <li key={row} className="flex items-center gap-cluster px-row py-row">
           <Skeleton className="size-24 shrink-0" />
-          <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <div className="flex min-w-0 flex-1 flex-col gap-tight">
             <Skeleton className="h-16 w-120" />
             <Skeleton className="h-12 w-80" />
           </div>

package/src/components/integration-delete-confirm-modal.tsx

@@ -36,7 +36,7 @@ export function IntegrationDeleteConfirmModal({
       <ModalContent aria-describedby={undefined}>
         <ModalTitle className="sr-only">Delete integration</ModalTitle>
         <ModalHeader title="Delete integration" showClose={!isPending} />
-        <ModalBody className="gap-16">
+        <ModalBody className="gap-group">
           <Text size="sm">
             Are you sure you want to delete <strong className="font-medium">{name}</strong>? Once
             deleted, Shipfox will immediately stop processing events from this integration. This

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

@@ -123,7 +123,7 @@ export function IntegrationGalleryForWorkspace({
   }
 
   return (
-    <div className="flex flex-col gap-24">
+    <div className="flex flex-col gap-section">
       <InstalledIntegrationsSection
         workspaceSlug={workspaceSlug}
         connections={sortedConnections}
@@ -145,8 +145,8 @@ export function IntegrationGalleryForWorkspace({
         providerDisplayName={providerDisplayName}
       />
 
-      <section className="flex flex-col gap-16" aria-label="Available integrations">
-        <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-group" aria-label="Available integrations">
+        <div className="flex flex-col gap-tight">
           <Header variant="h3">Available integrations</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             Providers available to install in this workspace.

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

@@ -1,4 +1,5 @@
 import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
+import {jiraWebhookEventNames} from '@shipfox/api-integration-jira-dto';
 import {linearWebhookEventNames} from '@shipfox/api-integration-linear-dto';
 import {WEBHOOK_RECEIVED_EVENT} from '@shipfox/api-integration-webhook-dto';
 import {usageEventsForConnection} from './integration-usage-events.js';
@@ -67,6 +68,18 @@ describe('usageEventsForConnection', () => {
     expect(events.map((event) => event.value)).toEqual(linearWebhookEventNames);
   });
 
+  it('uses Jira webhook names directly', () => {
+    const connection = {
+      ...baseConnection,
+      provider: 'jira',
+      capabilities: ['agent_tools'],
+    } satisfies IntegrationConnectionDto;
+
+    const events = usageEventsForConnection(connection);
+
+    expect(events.map((event) => event.value)).toEqual(jiraWebhookEventNames);
+  });
+
   it('falls back to a generic received event for uncataloged providers', () => {
     const connection = {
       ...baseConnection,

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

@@ -76,8 +76,8 @@ export function IntegrationUsageModal({
       <ModalContent aria-describedby={undefined} className="max-h-[calc(100vh-32px)] max-w-[640px]">
         <ModalTitle className="sr-only">{title}</ModalTitle>
         <ModalHeader>
-          <div className="flex min-w-0 flex-col gap-2">
-            <div className="flex min-w-0 items-center gap-8">
+          <div className="flex min-w-0 flex-col gap-tight">
+            <div className="flex min-w-0 items-center gap-inline">
               <Text size="lg" aria-hidden="true" className="truncate">
                 {title}
               </Text>
@@ -92,13 +92,13 @@ export function IntegrationUsageModal({
         </ModalHeader>
         {connection ? (
           <>
-            <ModalBody className="min-h-0 flex-1 gap-24 overflow-y-auto overflow-x-clip scrollbar">
-              <section className="flex w-full flex-col gap-12">
+            <ModalBody className="min-h-0 flex-1 gap-section overflow-y-auto overflow-x-clip scrollbar">
+              <section className="flex w-full flex-col gap-cluster">
                 <Text size="md" bold>
                   Usage
                 </Text>
                 {events.length > 1 ? (
-                  <div className="flex flex-col gap-6">
+                  <div className="flex flex-col gap-inline">
                     <label
                       htmlFor="integration-usage-event"
                       className="font-display text-sm font-medium text-foreground-neutral-base"
@@ -144,7 +144,7 @@ export function IntegrationUsageModal({
                 </CodeBlock>
               </section>
               {children ? (
-                <section className="flex w-full flex-col gap-12">
+                <section className="flex w-full flex-col gap-cluster">
                   <Text size="md" bold>
                     Details
                   </Text>

package/src/components/provider-grid.tsx

@@ -23,7 +23,7 @@ export interface ProviderGridProps {
   onOpenProvider?: ((provider: string) => void) | undefined;
 }
 
-export const PROVIDER_GRID_CLASS = 'grid grid-cols-2 gap-12 max-[760px]:grid-cols-1';
+export const PROVIDER_GRID_CLASS = 'grid grid-cols-2 gap-cluster max-[760px]:grid-cols-1';
 
 export const PROVIDER_SURFACE_CLASS =
   'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
@@ -46,7 +46,7 @@ export function ProviderGrid({
 
   if (error) {
     return (
-      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-16')}>
+      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-row')}>
         <QueryLoadError
           query={{
             isError: true,
@@ -63,7 +63,7 @@ export function ProviderGrid({
 
   if (installableProviders.length === 0) {
     return (
-      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-16')}>
+      <div className={cn(PROVIDER_SURFACE_CLASS, 'px-row')}>
         <EmptyState
           icon="componentLine"
           title="No integrations available"
@@ -106,7 +106,7 @@ function ProviderCard({
         type="button"
         aria-label={`Add ${provider.displayName}`}
         onClick={() => onOpenProvider?.(provider.provider)}
-        className="group flex h-full w-full min-w-0 items-center justify-between gap-12 rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
+        className="group flex h-full w-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
       >
         <ProviderCardContent provider={provider} action="Add" />
       </button>
@@ -118,7 +118,7 @@ function ProviderCard({
       to={catalog.setupPath}
       params={{workspaceSlug}}
       aria-label={`Install ${provider.displayName}`}
-      className="group flex h-full min-w-0 items-center justify-between gap-12 rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
+      className="group flex h-full min-w-0 items-center justify-between gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
     >
       <ProviderCardContent provider={provider} action="Install" />
     </Link>
@@ -134,7 +134,7 @@ function ProviderCardContent({
 }) {
   return (
     <>
-      <span className="flex min-w-0 items-center gap-12">
+      <span className="flex min-w-0 items-center gap-cluster">
         <IntegrationIcon
           source={provider.provider}
           aria-hidden
@@ -144,7 +144,7 @@ function ProviderCardContent({
           {provider.displayName}
         </Text>
       </span>
-      <span className="flex shrink-0 items-center gap-4 text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
+      <span className="flex shrink-0 items-center gap-tight text-foreground-neutral-muted transition-colors group-hover:text-foreground-highlight-interactive">
         <Text as="span" size="sm">
           {action}
         </Text>
@@ -159,9 +159,9 @@ function ProviderGridSkeleton({label}: {label: string}) {
     <ul role="status" aria-label={label} className={PROVIDER_GRID_CLASS}>
       {[0, 1, 2, 3].map((tile) => (
         <li key={tile}>
-          <Card className="h-full p-16">
-            <div className="flex items-center justify-between gap-12">
-              <div className="flex min-w-0 items-center gap-12">
+          <Card className="h-full p-panel-compact">
+            <div className="flex items-center justify-between gap-cluster">
+              <div className="flex min-w-0 items-center gap-cluster">
                 <Skeleton className="size-24 shrink-0" />
                 <Skeleton className="h-16 w-100" />
               </div>

package/src/components/redirect-install-page.tsx

@@ -54,7 +54,7 @@ export function RedirectInstallPage({
 
   if (errorMessage) {
     return (
-      <div className="mx-auto flex w-full max-w-[480px] flex-col gap-16">
+      <div className="mx-auto flex w-full max-w-[480px] flex-col gap-group">
         <Callout role="alert" type="error">
           <Text size="sm">{errorMessage}</Text>
         </Callout>

package/src/components/repository-picker.test.tsx

@@ -75,7 +75,7 @@ describe('RepositoryPicker', () => {
     const loadingGrid = container.querySelector('[aria-hidden="true"]');
     if (!loadingGrid) throw new Error('Repository loading grid was not rendered');
 
-    expect(loadingGrid).toHaveClass('grid', 'grid-cols-2', 'gap-8', 'max-[760px]:grid-cols-1');
+    expect(loadingGrid).toHaveClass('grid', 'grid-cols-2', 'gap-inline', 'max-[760px]:grid-cols-1');
     expect(loadingGrid.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(4);
     for (const placeholder of loadingGrid.querySelectorAll(':scope > div')) {
       expect(placeholder).toHaveClass(
@@ -84,7 +84,7 @@ describe('RepositoryPicker', () => {
         'border',
         'border-border-neutral-base',
         'bg-background-neutral-base',
-        'p-14',
+        'p-[14px]',
       );
     }
   });

package/src/components/repository-picker.tsx

@@ -9,7 +9,7 @@ import {Text} from '@shipfox/react-ui/typography';
 import {useId} from 'react';
 import type {Repository} from '#core/models.js';
 
-const REPOSITORY_GRID_CLASS_NAME = 'grid grid-cols-2 gap-8 max-[760px]:grid-cols-1';
+const REPOSITORY_GRID_CLASS_NAME = 'grid grid-cols-2 gap-inline max-[760px]:grid-cols-1';
 const REPOSITORY_SKELETON_WIDTHS = ['w-64', 'w-96', 'w-80', 'w-112'] as const;
 
 export function RepositoryPicker({
@@ -41,7 +41,7 @@ export function RepositoryPicker({
   const showSearch = onSearchChange !== undefined;
 
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-inline">
       <Label id={labelId} className="sr-only">
         Repository
       </Label>
@@ -60,7 +60,7 @@ export function RepositoryPicker({
       {isLoading ? <RepositoryLoadingState /> : null}
 
       {!isLoading && repositories.length === 0 ? (
-        <div className="rounded-8 border border-border-neutral-base bg-background-subtle-base p-14">
+        <div className="rounded-8 border border-border-neutral-base bg-background-subtle-base p-panel-compact">
           <Text size="sm">{emptyMessage}</Text>
         </div>
       ) : null}
@@ -119,10 +119,12 @@ function RepositoryLoadingState() {
         Loading repositories.
       </div>
       <div aria-hidden="true" className={REPOSITORY_GRID_CLASS_NAME}>
+        {/* The skeleton mirrors RadioGroupItem's own 14px padding contract so the
+            placeholder and the loaded card stay the same height. */}
         {REPOSITORY_SKELETON_WIDTHS.map((width) => (
           <div
             key={width}
-            className="h-50 min-w-0 rounded-8 border border-border-neutral-base bg-background-neutral-base p-14"
+            className="h-50 min-w-0 rounded-8 border border-border-neutral-base bg-background-neutral-base p-[14px]"
           >
             <Skeleton className={`h-20 ${width}`} />
           </div>

package/src/components/webhook/copyable-value.tsx

@@ -40,12 +40,12 @@ export function CopyableValue({label, value, note, className}: CopyableValueProp
   }
 
   return (
-    <div className={cn('flex w-full min-w-0 flex-col gap-8', className)}>
-      <div className="flex min-w-0 items-center gap-8">
+    <div className={cn('flex w-full min-w-0 flex-col gap-inline', className)}>
+      <div className="flex min-w-0 items-center gap-inline">
         <Code
           as="span"
           variant="paragraph"
-          className="min-w-0 flex-1 break-all rounded-4 border border-border-neutral-base bg-background-components-base px-8 py-6 text-foreground-neutral-base"
+          className="min-w-0 flex-1 break-all rounded-4 border border-border-neutral-base bg-background-components-base px-tight py-[6px] text-foreground-neutral-base"
         >
           {value}
         </Code>

package/src/components/webhook/webhook-create-modal.tsx

@@ -97,7 +97,7 @@ export function WebhookCreateModal({
             void form.handleSubmit();
           }}
         >
-          <ModalBody className="gap-16">
+          <ModalBody className="gap-group">
             <Text size="sm" className="text-foreground-neutral-muted">
               Create a named inbound webhook URL for this workspace.
             </Text>

package/src/components/webhook/webhook-usage-details.tsx

@@ -29,8 +29,8 @@ export function WebhookUsageDetails({workspaceId, connectionId}: WebhookUsageDet
   if (!connection) return null;
 
   return (
-    <div className="flex w-full flex-col gap-16">
-      <div className="flex w-full min-w-0 flex-col gap-8">
+    <div className="flex w-full flex-col gap-group">
+      <div className="flex w-full min-w-0 flex-col gap-inline">
         <Text size="sm" bold>
           Inbound URL
         </Text>

package/src/core/models.ts

@@ -7,6 +7,13 @@ export interface IntegrationProvider {
   capabilities: IntegrationCapability[];
 }
 
+export interface JiraSite {
+  cloudId: string;
+  name: string;
+  url: string;
+  scopes: string[];
+}
+
 export interface IntegrationConnection {
   id: string;
   workspaceId: string;
@@ -163,6 +170,15 @@ const linearUsageEvents = [
 
 const sentryIssueActions = ['created', 'resolved', 'assigned', 'archived', 'unresolved'] as const;
 
+const jiraUsageEvents = [
+  'jira:issue_created',
+  'jira:issue_updated',
+  'jira:issue_deleted',
+  'comment_created',
+  'comment_updated',
+  'comment_deleted',
+] as const;
+
 export function usageEventsForConnection(
   connection: Pick<IntegrationConnection, 'provider' | 'capabilities'>,
 ): IntegrationUsageEvent[] {
@@ -174,6 +190,8 @@ export function usageEventsForConnection(
       value: `issue.${action}`,
       label: `issue.${action}`,
     }));
+  if (connection.provider === 'jira')
+    return jiraUsageEvents.map((value) => ({value, label: value}));
   if (connection.provider === 'linear')
     return linearUsageEvents.map((value) => ({value, label: value}));
   if (connection.capabilities.includes('source_control')) return [{value: 'push', label: 'push'}];

package/src/feature.ts

@@ -23,6 +23,11 @@ export const integrationsFeature = defineClientFeature({
       parent: 'root',
       impl: '@shipfox/client-integrations/routes/linear-callback',
     },
+    {
+      path: '/integrations/jira/callback',
+      parent: 'root',
+      impl: '@shipfox/client-integrations/routes/jira-callback',
+    },
     {
       path: '/integrations/sentry/callback',
       parent: 'root',
@@ -53,6 +58,11 @@ export const integrationsFeature = defineClientFeature({
       parent: 'workspaceLayout',
       impl: '@shipfox/client-integrations/routes/linear',
     },
+    {
+      path: '/w/$workspaceSlug/integrations/jira',
+      parent: 'workspaceLayout',
+      impl: '@shipfox/client-integrations/routes/jira',
+    },
     {
       path: '/w/$workspaceSlug/integrations/sentry',
       parent: 'workspaceLayout',