# @lssm-tech/example.integration-hub

Website: https://contractspec.io

**Integration Hub example with sync engine and field mappings for ContractSpec.**

## What This Demonstrates

- Connection management with typed schemas and enums.
- Integration lifecycle (create, configure, sync).
- Sync engine with field mapping and status tracking.
- MCP server example for tool integration.
- Capability and feature definition patterns.
- React UI with a cockpit-style Integration Hub command center, screen navigation, hooks, markdown renderers, and shared ContractSpec tables for connections and sync configs.
- Contract-backed visualizations for integration mix, connection health, and sync-state comparison.
- Client-mode table capabilities including sorting, pagination, column visibility, pinning, resizing, and expanded operational details.
- Event definitions and operation test-specs.
- Managed/BYOK credential setup metadata with monorepo-aware Next and Expo env aliases plus an interactive mode switch in the hub UI.
- Registry-derived provider seeding from `createDefaultIntegrationSpecRegistry()`
  so the preview covers the complete shipped integration catalog, including
  BYOK-only entries with explicit managed-mode exemption metadata.
- Redacted connection credential previews; handlers return secret placeholders
  instead of raw key material.
- Runtime resolver and governance screens that explain managed/BYOK fallback, policy evidence, and release-review posture.
- Managed/BYOK database mutation examples in `src/setup/database-mutation-examples.ts` route durable writes through the provider-database `./governed-mutation` helper only after an owning domain command emits `domainCommandRef`, `policyDecisionRef`, `idempotencyKey`, `transactionBoundary`, `expectedWriteSet`, `auditEventRefs`, `replayRef`, and `correlationRef` evidence; fixtures use redacted refs only and never embed raw database credentials.
- Phase 5 DS1/DS4: all UI cards in the catalog use `IntegrationCardSurface` (hover elevation + focus ring) and `IntegrationHealthDot` from `@lssm-tech/bundle.managed-companyos/ui/integrations`. Empty states use `EmptyStateIllustrated`. The credential setup flow is wrapped in `WizardStepper`. A dedicated **Rich Interactions** screen demonstrates every DS1 atom and molecule in one place.

## Reusable bundle integration

The example demonstrates the Integration Hub but does not own the reusable
Managed CompanyOS production surfaces. Hosts should compose the canonical bundle
surfaces directly:

- View-model builders from `@lssm-tech/bundle.managed-companyos/view-models/integration-*`.
- Templates from `@lssm-tech/bundle.managed-companyos/ui/templates`.
- Capability atoms and design primitives from `@lssm-tech/bundle.managed-companyos/ui/integrations`.

Example UI files should remain demo/adaptation layers over those imports. Do not
fork credential, secret, connection, sync, audit, or role-morph logic locally.
Managed/BYOK turn-on flows must require an explicit ownership-mode choice and
may render only redacted credential references.

## Design System Integration (Phase 5 DS1)

The example **imports** DS1 primitives from the bundle — it does not re-implement them.

| Primitive | Origin | Usage in example |
|---|---|---|
| `IntegrationCardSurface` | `atoms-design` bundle | Provider catalog cards |
| `IntegrationHealthDot` | `atoms-design` bundle | Status dot in catalog + rich-interactions |
| `EmptyStateIllustrated` | `molecules-design` bundle | Catalog empty state, rich-interactions |
| `LastRunPill` | `atoms-design` bundle | Rich interactions showcase |
| `RotationCountdown` | `atoms-design` bundle | Rich interactions showcase |
| `ScopeChip` | `atoms-design` bundle | Rich interactions showcase |
| `SecurityShieldBadge` | `atoms-design` bundle | Rich interactions showcase |
| `AffinityScoreBar` | `atoms-design` bundle | Recommended row demo |
| `WizardStepper` | `molecules-design` bundle | Credential setup preview |
| `DiffPreviewCard` | `molecules-design` bundle | Sync drift banner demo |

**Consumers** that want to adopt these primitives directly should import from
`@lssm-tech/bundle.managed-companyos/ui/integrations` — not from this example package.

## Running Locally

From `packages/examples/integration-hub`:
- `bun run dev`
- `bun run build`
- `bun run test`
- `bun run typecheck`

## Usage

Use `@lssm-tech/example.integration-hub` as a reference implementation, or import its exported surfaces into a workspace that composes ContractSpec examples and bundles.

## Architecture

- `src/connection` is part of the package's public or composition surface.
- `src/docs/` contains docblocks and documentation-facing exports.
- `src/events.ts` is package-level event definitions.
- `src/example.ts` is the runnable example entrypoint.
- `src/handlers/` contains handlers or demo adapters wired to contract surfaces.
- `src/index.ts` is the root public barrel and package entrypoint.
- `src/integration` is part of the package's public or composition surface.
- `src/setup` exposes BYOK credential manifests, secret-reference fixtures, and monorepo env aliases.
- `src/ui/IntegrationDashboard.*` subpaths expose advanced UI composition pieces for hosts that want to reuse the command-center shell, navigation, screen model, or individual rich screens. The default `./ui/IntegrationDashboard` export wraps its command center in the shared `NestedCommandShell` from `@lssm-tech/lib.example-shared-ui`; keep local navigation inside that reusable nested-safe shell unless a preview-specific containment guardrail requires otherwise. Prefer `./ui/IntegrationDashboard` unless custom composition is required.
- Production apps should consume bundle Integration Hub view-models/templates directly; this package remains an example adapter and documentation surface.

## Public Entry Points

- Export `.` resolves through `./src/index.ts`.
- Export `./connection` resolves through `./src/connection/index.ts`.
- Export `./connection/connection.enum` resolves through `./src/connection/connection.enum.ts`.
- Export `./connection/connection.operation` resolves through `./src/connection/connection.operation.ts`.
- Export `./connection/connection.presentation` resolves through `./src/connection/connection.presentation.ts`.
- Export `./connection/connection.schema` resolves through `./src/connection/connection.schema.ts`.
- Export `./docs` resolves through `./src/docs/index.ts`.
- Export `./docs/integration-hub.docblock` resolves through `./src/docs/integration-hub.docblock.ts`.
- Export `./events` resolves through `./src/events.ts`.
- Export `./example` resolves through `./src/example.ts`.
- Export `./setup` resolves through `./src/setup/index.ts`.
- Export `./setup/credential-setup` resolves through `./src/setup/credential-setup.ts`.
- The package publishes 52 total export subpaths; keep docs aligned with `package.json`.

## Local Commands

- `bun run dev` — contractspec-bun-build dev
- `bun run build` — bun run prebuild && bun run build:bundle && bun run build:types
- `bun run lint` — bun lint:fix
- `bun run lint:check` — biome check .
- `bun run lint:fix` — biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .
- `bun run typecheck` — tsgo --noEmit
- `bun run validate` — contractspec validate "src/**/*"
- `bun run publish:pkg` — bun publish --tolerate-republish --ignore-scripts --verbose
- `bun run publish:pkg:canary` — bun publish:pkg --tag canary
- `bun run clean` — rimraf dist .turbo
- `bun run build:bundle` — contractspec-bun-build transpile
- `bun run build:types` — contractspec-bun-build types
- `bun run run:mcp` — bun tsx src/run-mcp.ts
- `bun run prebuild` — contractspec-bun-build prebuild

## Recent Updates

- Replace eslint+prettier by biomejs to optimize speed.
- Vnext ai-native.
- Missing contract layers.
- Resolve lint, build, and type errors across nine packages.
- Add Composio universal fallback, fix provider-ranking types, and expand package exports.
- Add first-class transport, auth, versioning, and BYOK support across all integrations.
- Add Integration Hub BYOK credential setup metadata and Next/Expo alias previews.
- Seed Integration Hub from the shipped provider registry and expose typed
  ownership mode plus redacted credential previews through handler flows.
- Upgrade the Integration Hub dashboard into a rich command-center demo with provider catalog, managed/BYOK credential, connection, sync, runtime governance, and assistant screens.

## Notes

- Works alongside `@lssm-tech/lib.ai-agent`, `@lssm-tech/lib.contracts-spec`, `@lssm-tech/lib.design-system`, `@lssm-tech/lib.example-shared-ui`, `@lssm-tech/lib.runtime-sandbox`, ...