# Connectors 01 - Connection detail (`connectors-01`) - SignalOS page block

> Generic connector/connection detail page composed from Split Panel, Tabs, and Status Badge: header with status and actions, a catalog tab (resource browser + schema/actions), and a config tab.

- **Version:** 0.2.1
- **Kind:** block (group: connectors) · **Category:** pages
- **Install:** `npx shadcn@latest add @signalos/connectors-01`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/confirm-dialog, @signalos/badge, @signalos/button, @signalos/card, @signalos/input, @signalos/skeleton, @signalos/table, @signalos/tabs, @signalos/split-panel, @signalos/status-badge, @signalos/data-primitives
- **npm dependencies:** lucide-react@^1.7.0
- **Files installed:** `src/components/blocks/connectors-01/ConnectorsDetail01.tsx`, `src/components/blocks/connectors-01/ConnectorsDetail01.types.ts`, `src/components/blocks/connectors-01/ConnectorsDetail01.constants.ts`, `src/components/blocks/connectors-01/ConnectorsDetail01.utils.ts`, `src/components/blocks/connectors-01/components/CatalogTab.tsx`, `src/components/blocks/connectors-01/components/DetailHeader.tsx`, `src/components/blocks/connectors-01/components/ResourceDetail.tsx`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
// after: npx shadcn@latest add @signalos/connectors-01
// mount the pulled page in a route, e.g. src/app/connectors/page.tsx
import { ConnectorsDetail01 } from "@/components/blocks/connectors-01/ConnectorsDetail01"

export default function Page() {
  return <ConnectorsDetail01 />
}
```

## Props

### `ConnectorDetailField`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | yes | - |  |
| `label` | `ReactNode` | yes | - |  |
| `value` | `ReactNode` | yes | - |  |
| `mono` | `boolean \| undefined` | no | - |  |

### `ConnectorResourceField`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `type` | `string` | yes | - |  |
| `format` | `string \| undefined` | no | - |  |
| `nullable` | `boolean \| undefined` | no | - |  |

### `ConnectorResourceAction`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `description` | `ReactNode` | no | - |  |
| `outputType` | `string \| undefined` | no | - |  |
| `idempotent` | `boolean \| undefined` | no | - |  |

### `ConnectorResourceLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | yes | - |  |
| `namespace` | `string \| null \| undefined` | no | - |  |
| `type` | `string \| null \| undefined` | no | - |  |
| `description` | `string \| null \| undefined` | no | - |  |
| `schemaProperties` | `Record<string, ConnectorResourceField> \| null \| undefined` | no | - |  |
| `actions` | `Record<string, ConnectorResourceAction> \| undefined` | no | - |  |
| `metadata` | `Record<string, unknown> \| null \| undefined` | no | - |  |

### `ConnectorLike`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | yes | - |  |
| `name` | `string` | yes | - |  |
| `url` | `string \| null \| undefined` | no | - |  |
| `status` | `string \| undefined` | no | - |  |
| `statusLabel` | `ReactNode` | no | - |  |
| `version` | `string \| null \| undefined` | no | - |  |
| `connectorName` | `string \| null \| undefined` | no | - |  |
| `errorMessage` | `ReactNode` | no | - |  |
| `configFields` | `readonly ConnectorDetailField[] \| undefined` | no | - |  |
| `capabilityFields` | `readonly ConnectorDetailField[] \| undefined` | no | - |  |

### `ConnectorsDetail01Tab`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | yes | - |  |
| `label` | `ReactNode` | yes | - |  |
| `content` | `ReactNode` | yes | - |  |

### `ConnectorsDetail01Props`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `connection` | `TConnection \| null` | yes | - | The connection being displayed. `null` while unresolved. |
| `resources` | `readonly TResource[] \| undefined` | no | - | Discovered resources/catalog entries for this connection. |
| `loading` | `boolean \| undefined` | no | - |  |
| `error` | `boolean \| undefined` | no | - |  |
| `errorMessage` | `ReactNode` | no | - |  |
| `selectedResourceName` | `string \| null \| undefined` | no | - |  |
| `onSelectResource` | `((name: string) => void) \| undefined` | no | - |  |
| `onBack` | `(() => void) \| undefined` | no | - |  |
| `onRefresh` | `(() => void) \| undefined` | no | - |  |
| `onRetry` | `(() => void) \| undefined` | no | - |  |
| `onDelete` | `(() => void) \| undefined` | no | - |  |
| `isRefreshing` | `boolean \| undefined` | no | - |  |
| `isDeleting` | `boolean \| undefined` | no | - |  |
| `extraTabs` | `readonly ConnectorsDetail01Tab[] \| undefined` | no | - | Extra tabs appended after the built-in Catalog / Config tabs. |
| `className` | `string \| undefined` | no | - |  |
| `data-testid` | `string \| undefined` | no | - |  |

## Changelog

# connectors-01

## 0.2.1

- Update `data-testid` call sites for the renamed prop.

## 0.2.0

- Decompose the 618-line block: header (breadcrumb, status, actions, error
  banner) moves to `components/DetailHeader.tsx`, the catalog split view to
  `components/CatalogTab.tsx`, and the resource pane to
  `components/ResourceDetail.tsx`.
- Section labels now use the shared `SectionLabel` from
  `@signalos/data-primitives` instead of a local re-implementation.
- Status dots/badges and error surfaces move to semantic status tokens
  (`bg-status-*`, `bg-bg-*`, `text-text-*`, `border-border-*`); the
  non-token `amber-*` classes are gone, so client theme overrides now
  restyle every status color.

## 0.1.2

- Replaced the inline `AlertDialog` delete-confirmation with the shared
  `ConfirmDialog` widget for consistency across blocks.
- Content sync fix to bring source in line with published registry payload.

## 0.1.0

- Initial release: connector/connection detail page composed from the shared
  split-panel, tabs, and status-badge widgets. Header with status/actions,
  a catalog tab (resource browser + schema/actions), and a config tab.