feat(ui,web): Phase 2 — Shared Components & Terminal Panel (#449) #452

jason.woltje · 2026-02-22T21:12:03Z

jason.woltje commented

2026-02-22 21:12:03 +00:00

Summary

UI-001+UI-002: Aligned all packages/ui components (Button, Card, Badge, Input, Select, Textarea, Avatar, Modal, Toast) to CSS custom property design system. Added Dot component, new Badge variants (teal, amber, blue, purple, pulse), Button success variant.
UI-003: Created MetricsStrip, ProgressBar, FilterTabs shared components.
UI-004: Created SectionHeader, DataTable, LogLine shared components.
UI-005: Created TerminalPanel component (bottom drawer with tabs, line coloring, blinking cursor).

Test Plan

pnpm lint passes (0 errors)
pnpm typecheck passes
pnpm build passes
All new components export from packages/ui/src/index.ts

Closes #449

## Summary - **UI-001+UI-002**: Aligned all packages/ui components (Button, Card, Badge, Input, Select, Textarea, Avatar, Modal, Toast) to CSS custom property design system. Added Dot component, new Badge variants (teal, amber, blue, purple, pulse), Button success variant. - **UI-003**: Created MetricsStrip, ProgressBar, FilterTabs shared components. - **UI-004**: Created SectionHeader, DataTable, LogLine shared components. - **UI-005**: Created TerminalPanel component (bottom drawer with tabs, line coloring, blinking cursor). ## Test Plan - [x] pnpm lint passes (0 errors) - [x] pnpm typecheck passes - [x] pnpm build passes - [x] All new components export from packages/ui/src/index.ts Closes #449

jason.woltje added 3 commits 2026-02-22 21:12:04 +00:00

feat(ui): align design tokens and update component variants (MS15-UI-001, MS15-UI-002) 44011f4e27

Replace hardcoded Tailwind color classes with CSS custom property inline
styles across all packages/ui components (Button, Card, Badge, Input,
Select, Textarea, Avatar, Modal, Toast).

Badge: add new variants (badge-teal, badge-amber, badge-blue, badge-purple,
badge-pulse) with mono font and pill shape.

Button: add success variant, hover states via React state.

Card: flat design, no shadows, semantic border/surface tokens.

New: Dot component (teal, blue, amber, red, muted) with glow effect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat(ui,web): add shared components and terminal panel (MS15-UI-003, UI-004, UI-005)

ci/woodpecker/push/orchestrator Pipeline was successful

Details

ci/woodpecker/push/api Pipeline was successful

Details

ci/woodpecker/push/web Pipeline was successful

Details

9b0445cd5b

UI-003: MetricsStrip (6-cell KPI grid), ProgressBar (4 variants with
ARIA), FilterTabs (segmented control).

UI-004: SectionHeader (title/subtitle/actions), DataTable (generic
typed table with hover), LogLine (colored log entry grid).

UI-005: TerminalPanel bottom-drawer component with tabs, line coloring,
blinking cursor, slide animation.

All components use CSS custom properties for theming.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docs: mark Phase 2 shared components tasks complete (UI-001 through UI-005) 7366bea759

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

jason.woltje merged commit 716f230f72 into main

2026-02-22 21:12:14 +00:00

jason.woltje referenced this issue from a commit

2026-02-22 21:12:15 +00:00

feat(ui,web): Phase 2 — Shared Components & Terminal Panel (#449) (#452)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: mosaic/stack#452