refactor(ui): standardize component library usage

[yottahmd]

Summary

• Consolidate legacy UI wrappers under components/ui and add import guardrails for consistent component usage.
• Refresh shared component styling, table rendering, sidebar contrast, and navbar-color-aware menu hover states.
• Add a shared resizable step details drawer for definition and status graphs while preserving status changes and sub-DAG drilldown behavior.

Testing

• pnpm typecheck
• pnpm test
• pnpm exec eslint --ext .ts,.tsx src/components/ui src/ui
• Focused eslint on touched graph/sidebar files
• pnpm vitest run src/features/dags/components/__tests__/DAGStatus.test.tsx
• pnpm build (passes with existing webpack asset-size warnings)

Summary by CodeRabbit

• New Features

  • Added step details inspector drawer for improved DAG visualization navigation.

• Improvements

  • Refreshed visual styling with updated color palette and component appearance.
  • Consolidated component library organization for better maintainability.
  • Enhanced dialog and modal system with improved fullscreen support.
  • Redesigned table components with improved layout and styling.

• Style

  • Updated button, card, input, and form styling across the application.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR performs a comprehensive refactoring of the UI component architecture, migrating components from ui/src/ui/ to ui/src/components/ui/, removing Radix Themes dependency, introducing new UI primitives and features (StepDetailsDrawer, ConfirmDialog, table enhancements), updating import paths across the codebase, overhauling the theme palette, and establishing a canonical component import pattern via ESLint rules.

Changes

Cohort / File(s)	Summary
Configuration & Package Management ui/eslint.config.mjs, ui/package.json	Added ESLint no-restricted-imports rule enforcing @/components/ui/* as canonical path; removed @emotion/react, @emotion/styled, @radix-ui/themes dependencies.
App Entry Point & Core Setup ui/src/App.tsx	Removed Radix UI Theme wrapper and stylesheet; updated import paths for ErrorModalProvider and ToastProvider to use @/ aliases; restructured provider hierarchy.
New Dialog & Modal Components ui/src/components/ui/dialog.tsx, ui/src/components/ui/confirm-dialog.tsx	Extended DialogContent with fullscreen mode support; added new ConfirmDialog component with keyboard interactions (Enter/Escape handling), auto-focus, and optional style overrides.
New Action & Status UI Components ui/src/components/ui/action-button.tsx, ui/src/components/ui/status-chip.tsx, ui/src/components/ui/labeled-item.tsx, ui/src/components/ui/sub-title.tsx, ui/src/components/ui/title.tsx	Created new action button wrapper, status chip with animated text support, labeled item display, subtitle/title typography components.
New Utility Components ui/src/components/ui/loading-indicator.tsx, ui/src/components/ui/ticker.tsx, ui/src/components/ui/with-loading.tsx, ui/src/components/ui/multiline-text.tsx, ui/src/components/ui/visually-hidden.tsx	Added spinner, interval-based ticker, loading state wrapper, multiline text renderer, and accessible visually-hidden span components.
Complex Diagram & Visualization Components ui/src/components/ui/mermaid.tsx, ui/src/components/ui/matrix-text.tsx, ui/src/components/ui/bordered-box.tsx	Implemented Mermaid diagram renderer with theme detection, scaling, node interactions, and error handling; added animated glow-effect text component; created bordered box wrapper with MUI-style spacing props.
Table Component Migration ui/src/components/ui/table.tsx, ui/src/components/ui/styled-table-row.tsx	Migrated from Radix UI table components to native HTML table elements with forwardRef support; added styled table row wrapper with last-border removal.
Button & Form Input Updates ui/src/components/ui/button.tsx, ui/src/components/ui/input.tsx, ui/src/components/ui/textarea.tsx, ui/src/components/ui/switch.css, ui/src/components/ui/alert.tsx, ui/src/components/ui/badge.tsx, ui/src/components/ui/card.tsx, ui/src/components/ui/tabs.tsx	Updated button styling with focus-visible rings; enhanced input/textarea with new shadow/color tokens; refactored CSS variable usage in switch component; reformatted alert/badge/card/tabs styling and class definitions.
Component Library Documentation ui/src/components/ui/README.md	Added documentation establishing @/components/ui/* as the canonical import path and defining UI component conventions.
Legacy Shim Layer ui/src/ui/ActionButton.tsx, ui/src/ui/BorderedBox.tsx, ui/src/ui/ConfirmModal.tsx, ui/src/ui/CustomDialog.tsx, ui/src/ui/LabeledItem.tsx, ui/src/ui/LoadingIndicator.tsx, ui/src/ui/MatrixText.tsx, ui/src/ui/Mermaid.tsx, ui/src/ui/MultilineText.tsx, ui/src/ui/StatusChip.tsx, ui/src/ui/StyledTableRow.tsx, ui/src/ui/SubTitle.tsx, ui/src/ui/Ticker.tsx, ui/src/ui/Title.tsx, ui/src/ui/VisuallyHidden.tsx, ui/src/ui/WithLoading.tsx	Converted all legacy component files to re-export shims pointing to new @/components/ui/* locations for backward compatibility.
DAG Editor & Spec Components ui/src/features/dags/components/dag-editor/DAGSpec.tsx, ui/src/features/dags/components/dag-editor/DAGSpecReadOnly.tsx, ui/src/features/dags/components/dag-editor/ExternalChangeDialog.tsx	Refactored DAGSpec to use imported StepDetailsDrawer; updated dialog imports to use new component paths; changed button styling from custom classes to variant props.
Step Details & Drawer Implementation ui/src/features/dags/components/step-details/StepDetailsDrawer.tsx, ui/src/features/dags/components/step-details/StepDetails.tsx, ui/src/features/dags/components/step-details/index.ts	Added new StepDetailsDrawer component with resizable width persistence, focus management, keyboard controls (Tab trapping, Escape, arrow keys), and portal rendering; updated theme colors for shell code blocks; re-exported StepDetailsDrawer from module index.
Graph & Visualization Updates ui/src/features/dags/components/visualization/DAGGraph.tsx, ui/src/features/dags/components/visualization/Graph.tsx	Added onClickStep prop and step inspection callbacks; introduced onDoubleClickNode for double-click handling; updated tooltip text; changed Mermaid import path; adjusted event wiring to support step details interaction.
DAG Status & Execution Enhancements ui/src/features/dags/components/DAGStatus.tsx, ui/src/features/dags/components/dag-execution/DAGExecutionHistory.tsx	Integrated StepDetailsDrawer with step inspection callbacks; added state for selected step details; wired graph node click handlers to open drawer; auto-close drawer on tab changes.
Feature Component Import Updates ui/src/features/cockpit/components/ArtifactListModal.tsx, ui/src/features/cockpit/components/KanbanCard.tsx, ui/src/features/dag-runs/components/common/DAGRunActions.tsx, ui/src/features/dag-runs/components/.../*, ui/src/features/dags/components/common/DAGActions.tsx, ui/src/features/dags/components/common/.../*, ui/src/features/dags/components/dag-list/.../*, ui/src/features/dags/components/dag-execution/.../*	Widespread import path updates across 40+ component files, changing from relative paths and old @/ui/* to canonical @/components/ui/* aliases.
Page-Level Import Updates ui/src/pages/agent-memory/index.tsx, ui/src/pages/agent-settings/index.tsx, ui/src/pages/agent-souls/index.tsx, ui/src/pages/api-keys/index.tsx, ui/src/pages/base-config/index.tsx, ui/src/pages/dag-runs/index.tsx, ui/src/pages/dags/index.tsx, ui/src/pages/docs/.../*, ui/src/pages/git-sync/.../*, ui/src/pages/index.tsx, ui/src/pages/license/index.tsx, ui/src/pages/queues/index.tsx, ui/src/pages/remote-nodes/index.tsx, ui/src/pages/search/index.tsx, ui/src/pages/system-status/index.tsx, ui/src/pages/users/index.tsx, ui/src/pages/webhooks/index.tsx, ui/src/pages/workers/index.tsx	Updated all page-level component imports to use canonical @/components/ui/* paths; adjusted modal/dialog imports from @/ui/* to @/components/ui/....
Layout & Sidebar Styling ui/src/layouts/Layout.tsx, ui/src/menu.tsx	Added sidebar theming CSS variables and overlay color helpers; removed customColor prop and branches; refactored sidebar button/nav styling to use shared Tailwind class constants; updated section comments from "GCP-style" to "Developer-tool".
Global Styles & Theme ui/src/styles/global.css	Removed Radix Themes override; completely overhauled color palette from warm/sepia to blue/gray scheme; added sidebar hover/active color variables; removed legacy .btn-* button classes and GCP-style table utilities; updated status pill styling to use color-mix; refactored typography and component-specific styles.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DAGStatus as DAGStatus Component
    participant Graph as Graph/Mermaid
    participant StepDrawer as StepDetailsDrawer
    participant StepDetails as StepDetails

    User->>DAGStatus: View DAG visualization
    DAGStatus->>Graph: Render graph with onClickStep callback
    User->>Graph: Click on step node
    Graph->>DAGStatus: onClickStep(nodeId)
    DAGStatus->>DAGStatus: Find matching step, set selectedDetailStep
    DAGStatus->>DAGStatus: Set isStepDetailsOpen = true
    DAGStatus->>StepDrawer: Render with step prop
    StepDrawer->>StepDrawer: Focus close button on mount
    StepDrawer->>StepDrawer: Attach keyboard listeners (Tab trap, Escape, arrows)
    StepDrawer->>StepDetails: Render step content
    User->>StepDrawer: Press Escape / Click overlay
    StepDrawer->>DAGStatus: Call onClose()
    DAGStatus->>DAGStatus: Set isStepDetailsOpen = false
    StepDrawer->>StepDrawer: Restore focus to previous element

Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

• feat: add workflow design workspace #2012: Both modify App.tsx entry point, DAGSpec/step-details drawer, Graph/DAGGraph components, and update Mermaid and StepDetailsDrawer integrations across the same feature code.
• feat: add DAG definition improvement flow from the spec editor #1980: Both refactor DAGSpec component files and related step/visualization UI components, touching overlapping areas of the dag-editor and dag-execution features.
• fix: restore DAG status live updates #2028: Both modify DAG status UI code, specifically DAGStatus.tsx and related node/step status components, including step inspection and step details functionality.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ui-component-library-consistency