feat(tracker-web): add token bridge + Primitives adapter (UX-1)

Add @bytelyst/ui and @bytelyst/design-tokens as workspace dependencies,
create token bridge layer mapping --bl-* to existing tracker vars, and
implement Primitives.tsx adapter for shared UI components. Includes smoke
test verifying component exports. All verification checks pass.

Generated with [Devin](https://cli.devin.ai/docs)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

dashboards/tracker-web/package.json

@@ -28,9 +28,11 @@
     "@bytelyst/config": "workspace:*",
     "@bytelyst/dashboard-components": "workspace:*",
     "@bytelyst/data-table": "workspace:*",
+    "@bytelyst/design-tokens": "workspace:*",
     "@bytelyst/errors": "workspace:*",
     "@bytelyst/telemetry-client": "workspace:*",
     "@bytelyst/logger": "workspace:*",
+    "@bytelyst/ui": "workspace:*",
     "clsx": "^2.1.1",
     "next": "16.1.6",
     "posthog-js": "^1.345.5",

dashboards/tracker-web/src/__tests__/primitives-adapter.test.ts

@@ -0,0 +1,90 @@
+/**
+ * Smoke test for Primitives adapter (UX-1)
+ *
+ * Verifies that the @bytelyst/ui components are properly re-exported through
+ * the Primitives adapter and can be imported in tracker-web.
+ *
+ * @see docs/roadmaps/UX_INTEGRATION_BYTELYST.md (UX-1, task 1.4)
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  Button,
+  StatusBadge,
+  StatusDot,
+  Input,
+  Field,
+  FieldLabel,
+  FieldError,
+  FieldDescription,
+  Modal,
+  ConfirmDialog,
+  Badge,
+  EmptyState,
+  Skeleton,
+  TableSkeleton,
+  MetricCard,
+  Toast,
+  ToastProvider,
+  useToast,
+  toast,
+  dismissToast,
+} from '@/components/ui/Primitives';
+
+describe('Primitives adapter smoke test', () => {
+  it('should export Button component', () => {
+    expect(Button).toBeDefined();
+  });
+
+  it('should export StatusBadge component', () => {
+    expect(StatusBadge).toBeDefined();
+    expect(StatusDot).toBeDefined();
+  });
+
+  it('should export Input component', () => {
+    expect(Input).toBeDefined();
+  });
+
+  it('should export Field components', () => {
+    expect(Field).toBeDefined();
+    expect(FieldLabel).toBeDefined();
+    expect(FieldError).toBeDefined();
+    expect(FieldDescription).toBeDefined();
+  });
+
+  it('should export Modal component', () => {
+    expect(Modal).toBeDefined();
+  });
+
+  it('should export ConfirmDialog component', () => {
+    expect(ConfirmDialog).toBeDefined();
+  });
+
+  it('should export Badge component', () => {
+    expect(Badge).toBeDefined();
+  });
+
+  it('should export EmptyState component', () => {
+    expect(EmptyState).toBeDefined();
+  });
+
+  it('should export Skeleton components', () => {
+    expect(Skeleton).toBeDefined();
+    expect(TableSkeleton).toBeDefined();
+  });
+
+  it('should export MetricCard component', () => {
+    expect(MetricCard).toBeDefined();
+  });
+
+  it('should export Toast components and hooks', () => {
+    expect(Toast).toBeDefined();
+    expect(ToastProvider).toBeDefined();
+    expect(useToast).toBeDefined();
+    expect(typeof useToast).toBe('function');
+    expect(toast).toBeDefined();
+    expect(typeof toast).toBe('function');
+    expect(dismissToast).toBeDefined();
+    expect(typeof dismissToast).toBe('function');
+  });
+});

dashboards/tracker-web/src/app/globals.css

@@ -89,6 +89,26 @@
   --chart-5: oklch(0.645 0.246 16.439);
 }
 
+/* Token bridge: map @bytelyst/ui --bl-* tokens to tracker's shadcn-style OKLCH vars */
+:root, .dark {
+  --bl-accent: var(--primary);
+  --bl-accent-foreground: var(--primary-foreground);
+  --bl-bg-canvas: var(--background);
+  --bl-surface-card: var(--card);
+  --bl-text-primary: var(--foreground);
+  --bl-text-secondary: var(--muted-foreground);
+  --bl-text-tertiary: var(--muted-foreground);
+  --bl-border: var(--border);
+  --bl-danger: var(--destructive);
+  --bl-radius-control: var(--radius-md);
+  --bl-radius-card: var(--radius-lg);
+  --bl-chart-1: var(--chart-1);
+  --bl-chart-2: var(--chart-2);
+  --bl-chart-3: var(--chart-3);
+  --bl-chart-4: var(--chart-4);
+  --bl-chart-5: var(--chart-5);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

dashboards/tracker-web/src/components/ui/Primitives.tsx

@@ -0,0 +1,59 @@
+/**
+ * Primitives adapter for @bytelyst/ui components.
+ *
+ * This file re-exports shared UI components from @bytelyst/ui, providing a single
+ * import point for the tracker-web application. All app code should import from this
+ * adapter rather than directly from @bytelyst/ui to enable future UI-drift ratcheting.
+ *
+ * @see docs/roadmaps/UX_INTEGRATION_BYTELYST.md (UX-1)
+ */
+
+export { Button, type ButtonProps } from '@bytelyst/ui';
+
+export { Input, type InputProps } from '@bytelyst/ui';
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+  type FieldContentProps,
+  type FieldDescriptionProps,
+  type FieldErrorProps,
+  type FieldGroupProps,
+  type FieldLabelProps,
+  type FieldProps,
+  type FieldTitleProps,
+} from '@bytelyst/ui';
+
+export { Modal, type ModalProps } from '@bytelyst/ui';
+
+export { ConfirmDialog, type ConfirmDialogProps } from '@bytelyst/ui';
+
+export { Badge, type BadgeProps } from '@bytelyst/ui';
+
+export { StatusBadge, StatusDot, type StatusBadgeProps, type StatusTone } from '@bytelyst/ui';
+
+export { EmptyState, type EmptyStateProps } from '@bytelyst/ui';
+
+export {
+  Skeleton,
+  SkeletonGroup,
+  TableSkeleton,
+  type SkeletonProps,
+  type SkeletonGroupProps,
+} from '@bytelyst/ui';
+
+export { MetricCard, type MetricCardProps } from '@bytelyst/ui';
+
+export {
+  Toast,
+  ToastProvider,
+  useToast,
+  toast,
+  dismissToast,
+  type ToastMessage,
+} from '@bytelyst/ui';

pnpm-lock.yaml

@@ -252,6 +252,9 @@ importers:
       '@bytelyst/data-table':
         specifier: workspace:*
         version: link:../../packages/data-table
+      '@bytelyst/design-tokens':
+        specifier: workspace:*
+        version: link:../../packages/design-tokens
       '@bytelyst/errors':
         specifier: workspace:*
         version: link:../../packages/errors
@@ -261,6 +264,9 @@ importers:
       '@bytelyst/telemetry-client':
         specifier: workspace:*
         version: link:../../packages/telemetry-client
+      '@bytelyst/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       clsx:
         specifier: ^2.1.1
         version: 2.1.1