# Semantics Details Page (`semantics-details-01`) - SignalOS page block

> Semantics pipeline details page: a review queue of pipelines in single-source and multi-source layouts, with shared stages, a completed tab, version history, and an add-source dialog.

- **Version:** 0.6.13
- **Kind:** block (group: semantics-01) · **Category:** pages
- **Install:** `npx shadcn@latest add @signalos/semantics-details-01`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/button, @signalos/page-header, @signalos/textarea, @signalos/badge, @signalos/checkbox, @signalos/command, @signalos/form-dialog, @signalos/popover, @signalos/progress, @signalos/select, @signalos/skeleton, @signalos/tooltip, @signalos/signal-rules-01, @signalos/cross-source-01, @signalos/glossary-01, @signalos/questionnaire-01, @signalos/relationships-01, @signalos/metrics-01
- **npm dependencies:** lucide-react@^0.468.0, @xyflow/react@^12.0.0
- **Files installed:** `src/components/blocks/semantics-details-01/SemanticsDetails01.tsx`, `src/components/blocks/semantics-details-01/SemanticsDetails01.types.ts`, `src/components/blocks/semantics-details-01/components/Pipeline.types.ts`, `src/components/blocks/semantics-details-01/components/Schema.types.ts`, `src/components/blocks/semantics-details-01/components/AddSourceDialog.tsx`, `src/components/blocks/semantics-details-01/components/VersionHistoryPanel.tsx`, `src/components/blocks/semantics-details-01/components/CompletedStageCard.tsx`, `src/components/blocks/semantics-details-01/components/ReviewQueueCard.tsx`, `src/components/blocks/semantics-details-01/components/SharedStageCard.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/semantics-details-01
// mount the pulled page in a route, e.g. src/app/semantics-01/page.tsx
import { ReviewQueueView } from "@/components/blocks/semantics-details-01/SemanticsDetails01"

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

## Props

### `AddSourceDialogProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `open` | `boolean` | yes | - |  |
| `onOpenChange` | `(open: boolean) => void` | yes | - |  |
| `availableConnections` | `TConnection[]` | yes | - | Connections that can be selected and added. |
| `alreadyAddedConnections` | `TConnection[] \| undefined` | no | - | Connections already present in the pipeline (shown as read-only). |
| `isLoadingConnections` | `boolean \| undefined` | no | - | Show a spinner in place of the connection list. |
| `isSubmitting` | `boolean \| undefined` | no | - | Disable the submit button and show a spinner on it. |
| `errorMessage` | `string \| null \| undefined` | no | - | Error message rendered inside the dialog. |
| `selectedIds` | `string[] \| undefined` | no | - | Currently selected connection ids — controlled by the parent. |
| `onSelectedIdsChange` | `((ids: string[]) => void) \| undefined` | no | - | Called when the selected ids change. |
| `onSubmit` | `(selectedIds: string[]) => void` | yes | - | Called with the array of selected connection ids when the user confirms. |
| `data-testid` | `string \| undefined` | no | - | Test identifier rendered as `data-testid` on the dialog content element. |

### `ReviewQueueViewProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `viewTab` | `QueueViewTab` | yes | - |  |
| `onTabChange` | `(tab: QueueViewTab) => void` | yes | - |  |
| `onNavigate` | `(path: string) => void` | yes | - | Called when any card action button navigates to a stage review page |
| `inQueuePerSource` | `QueueItem[]` | yes | - |  |
| `inQueueShared` | `QueueItem[]` | yes | - |  |
| `completedPerSource` | `QueueItem[]` | yes | - |  |
| `completedShared` | `QueueItem[]` | yes | - |  |
| `isMultiSource` | `boolean` | yes | - |  |
| `isLoading` | `boolean \| undefined` | no | - |  |
| `isEmpty` | `boolean \| undefined` | no | - |  |
| `semanticVersion` | `number \| undefined` | no | - | Current semantic version number shown in the version toggle button. |
| `versionHistory` | `VersionHistoryPanelProps \| undefined` | no | - | When provided, renders the version history panel inline and passes these props to `VersionHistoryPanel`. The parent owns all version state. |
| `addSourceDialog` | `AddSourceDialogProps<TConnection> \| undefined` | no | - | When provided, renders the AddSourceDialog and passes these props to it. The parent owns open state, connection lists, loading, and submission. |
| `className` | `string \| undefined` | no | - |  |
| `data-testid` | `string \| undefined` | no | - | Test identifier rendered as `data-testid` on the root element. |

### `VersionHistoryPanelProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `versions` | `PipelineVersion[]` | yes | - |  |
| `currentVersion` | `number` | yes | - |  |
| `isOpen` | `boolean \| undefined` | no | - |  |
| `isLoading` | `boolean \| undefined` | no | - |  |
| `isRestoring` | `boolean \| undefined` | no | - |  |
| `onRestore` | `(version: number) => void` | yes | - |  |
| `onOpen` | `() => void` | yes | - |  |
| `onClose` | `() => void` | yes | - |  |

### `SemanticsDetails01View`

```ts
export type SemanticsDetails01View = "review_queue" | "questionnaire"
```

## Changelog

## 0.6.13

- Replace the copied placeholder description with one that actually describes this block; the registry description is what the agent skill shows as "pick it when".

## 0.6.12

- Replace raw scale token classes with semantic tokens (text-text-error, bg-bg-success, border-border-warning, etc.) to respect client theme overrides.

## 0.6.11

- Fix cross-item imports to use canonical @/components paths; add missing signalos.category to manifests.

## 0.6.10

- `Pipeline.types.ts`: rename stage `metrics_baselines` → `functions` in `SemanticsStageName` union.
- `Pipeline.types.ts`: expand `SemanticsPipelineStatus` to `KnownPipelineStatus | (string & {})` union with additional known states (`created`, `awaiting_connectors`, `in_progress`).
- `Pipeline.types.ts`: add `KnownPipelineType` and `SemanticsPipelineType` union types; remove `MetricCatalog`/`MetricsFdeInput` imports from `metrics-01`.
- `SemanticsDetails01.tsx`: update `STAGE_ROUTE_SEGMENTS` and `isPipelineTransitioning` to use `functions` instead of `metrics_baselines`; add `as SemanticsStageName` cast where `current_stage` is used.
- `CompletedStageCard.tsx`: rename `metrics_baselines` → `functions` in `SHARED_STEPS` and `STAGE_ICONS`; update label to "Functions & Workflow".
- `SemanticsDetails01.types.ts`: remove stale commented-out import lines.

## 0.6.9

- Update ReviewQueueView: refine section layout, tab button styles, and empty/loading state presentation in SemanticsDetails01.

## 0.6.8

- Replace raw Dialog/DialogFooter with FormDialog in AddSourceDialog; custom footer carries cancel/submit buttons with original data-testids.
- Remove unused Plus icon import (was only used in DialogTitle decoration).
- Swap @signalos/dialog + @signalos/input + @signalos/label → @signalos/form-dialog (no text inputs exist in this block).

## 0.6.3

- Fix file casing: rename Metrics.types.ts and Relationships.types.ts to match PascalCase import paths.

## 0.6.2

- Lift AddSourceDialog selectedIds to controlled props (selectedIds, onSelectedIdsChange). Parent now owns selection state.

# semantics-details-01

## 0.5.0

- **Breaking:** `onToggleVersions` and `onAddSource` props removed from `ReviewQueueViewProps`. Replace them with the new `versionHistory` and `addSourceDialog` prop groups — the parent now owns all state and data for both panels.
- `AddSourceDialog` rewritten as a pure props-in/events-out component. It no longer imports from `@/store` or `@/types`; all connection lists, loading flags, error state, and the submit callback are passed as props. The component is now generic over `TConnection extends { id, name, status }` so callers can supply any connection shape.
- `VersionHistoryPanel` now imports `VersionHistoryPanelProps` from the shared types file instead of declaring a local interface.
- `ReviewQueueViewProps` is generic over `TConnection` (defaults to the built-in `PlatformConnection` shape), allowing typed `addSourceDialog` props without casting.
- Register `AddSourceDialog.tsx` and `VersionHistoryPanel.tsx` in `registry-item.json` so consumers receive both files on install.

## 0.4.0

- Register all 54 component files in `registry-item.json` so consumers receive the full component tree on install.

## 0.3.0

- Remove legacy `components/semantics/` folder; all components now live in per-stage directories (`glossary/`, `relationships/`, `cross-source/`, `metrics/`, `signal-rules/`, `equilibrium/`, `content-profile/`).
- Register all migrated component files in `registry-item.json` so consumers receive the full component tree.

## 0.2.0

- Lift navigation out of card sub-components: `ReviewQueueCard`, `SharedStageCard`, and `CompletedStageCard` no longer call `useRouter` — they now accept an `onNavigate: (path: string) => void` prop and call it instead.
- Add `onNavigate` to `ReviewQueueViewProps`; `ReviewQueueView` threads it through `QueueSection` to each card.
- Replace `@/types` imports in card components and `StepProgress` with relative imports from `../../pipeline.types` (removes the forbidden app-level alias from shipped files).
- Remove `StageActionDialog` import from `SharedStageCard` (pointed to `@/components/features/…`, a forbidden app-side path).

## 0.1.0

- Initial block: review queue view with per-source and shared stage sections, tab navigation, and questionnaire view.