Reusable Connection Status Indicator Component

Problem/Feature Description

Several pages across the workspace dashboard need to show a small inline indicator of a service's connection status — for example, whether a data source, integration, or MCP server is currently connected, disconnected, or in a pending/loading state. Right now each page is rendering its own ad-hoc status label with inconsistent colors and copy, making the UI look fragmented and hard to maintain.

The design spec calls for a small pill-shaped badge with a colored dot and a short label. The three states are: connected (green dot + "Connected"), disconnected (red dot + "Disconnected"), and pending (amber dot + "Connecting…"). The component should be compact enough to sit inline next to a service name in a table row, but flexible enough that consumers can override its spacing and sizing for different layout contexts.

The component does not exist yet anywhere in the codebase. Before building it, check whether any existing shared component or Chakra primitive is close enough to extend — if so, prefer that approach.

Output Specification

Produce the following files:

• The component source file in the correct location under src/
• The Storybook stories file co-located with the component

The component must accept a status prop (the three states above) and allow consumers to pass additional style props to the root element. Export the component's TypeScript prop interface from the same file.

In the stories file, cover at minimum: each status variant, a disabled/inactive state if applicable, and an edge case where a long label or container forces wrapping. Do not produce a README or documentation file.

Design Values

The following pixel values come from the design. Map them to the project's token system rather than using the raw pixel values:

• Dot size: 8px × 8px
• Horizontal padding: 8px left and right
• Vertical padding: 4px top and bottom
• Corner radius: 4px
• Font size: 12px (extra-small)
• Font weight: 500 (medium)