Skip to content

Phase 14b: UI component library integration#358

Merged
JustAGhosT merged 1 commit intodevfrom
feat/frontend-phase-14
Mar 11, 2026
Merged

Phase 14b: UI component library integration#358
JustAGhosT merged 1 commit intodevfrom
feat/frontend-phase-14

Conversation

@JustAGhosT
Copy link
Copy Markdown
Collaborator

@JustAGhosT JustAGhosT commented Mar 11, 2026

Summary

  • Merge CognitiveMeshUI repo (169 files): 48 shadcn/ui components with 27 @radix-ui/* packages, design tokens via Style Dictionary v5, Storybook v10 config
  • Fix all TypeScript errors (150+ errors → 0): components, visualizations, hooks, lib modules, stories, tests
  • Migrate Tailwind v3 → v4: @tailwindcss/postcss + CSS-first @config directive
  • Harden Next.js 16 SSR: Suspense boundaries for useSearchParams, typeof window guards, env var fallbacks
  • Remove dead code: BridgeHeader, FXModePanel, LayoutToolsPanel, VoiceFeedback, duplicate /settings route

Changes

Category Count
shadcn/ui components (moved + fixed) 48
App component fixes 12
Visualization fixes 3
Lib module fixes 6
Dead code removed 5 files
New files (utils, hooks, theme-provider) 4
Config updates (postcss, tsconfig, globals.css) 4

Gate criteria (Phase 14b → Phase 15)

  • npx tsc --noEmit passes with zero errors
  • npx next build passes (all 12 pages generated)
  • Design tokens generating CSS custom properties
  • No duplicate type definitions
  • [~] Storybook config aligned to v10 (addon version alignment deferred)

Test plan

  • Verify npm run build passes in CI
  • Verify npx tsc --noEmit reports 0 errors
  • Spot-check login page renders with Suspense boundary
  • Verify design token CSS variables load in browser

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

  • New Features

    • Added comprehensive migration tracking documentation for UI library integration Phase 14b
    • Introduced style-dictionary build scripts for design token generation
  • Bug Fixes

    • Improved server-side rendering safety checks in canvas initialization
    • Enhanced service worker error handling with optional chaining
  • Refactor

    • Removed legacy toast notification system and mobile detection utilities
    • Removed deprecated header and panel components; refactored component exports
    • Migrated to Tailwind CSS v4 with updated PostCSS configuration
    • Consolidated import paths using module aliases for improved maintainability
  • Chores

    • Updated Storybook configuration and dependencies
    • Enhanced TypeScript configuration for React 18 JSX transform
    • Strengthened component type safety across the codebase

…s, Tailwind v4

Merge CognitiveMeshUI repo (169 files): 48 shadcn/ui components with Radix UI
deps, design tokens via Style Dictionary v5, Storybook v10 config.

Key changes:
- Install 27 @radix-ui/* packages + cmdk, recharts@3, sonner, vaul, etc.
- Move components/ui/ → src/components/ui/ with TS validation enabled
- Move hooks (use-mobile, use-toast) and theme-provider into src/
- Add lib/utils.ts (shadcn cn() helper)
- Migrate Tailwind v3 → v4 (@tailwindcss/postcss + @config directive)
- Fix all 150+ TypeScript errors across components, visualizations, lib modules
- Harden Next.js 16 SSR (Suspense boundaries, window guards, env fallbacks)
- Remove dead code: BridgeHeader, FXModePanel, LayoutToolsPanel, VoiceFeedback
- Delete duplicate /settings route (kept (app)/settings)
- Update MIGRATION.md (100% complete) and AGENT_BACKLOG.md (Phase 14b ✓)

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

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

@chatgpt-codex-connector
Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 11, 2026

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR consolidates the frontend UI component library from custom implementations to Shadcn/UI-based components, removes deprecated hooks and components, migrates from Tailwind CSS legacy directives to new @tailwindcss/postcss, simplifies Storybook configuration, and updates package dependencies and TypeScript configuration. Multiple custom components (BridgeHeader, FXModePanel, LayoutToolsPanel, VoiceFeedback) and systems (toast, useIsMobile) are removed in favor of library-based alternatives.

Changes

Cohort / File(s) Summary
Documentation & Tracking
AGENT_BACKLOG.md, src/UILayer/web/MIGRATION.md
Updated backlog to reflect Phase 14b completion with adjusted phase ranges and remaining item counts; added comprehensive migration tracker documenting UI component library integration, migrated assets, and architectural changes.
Component Removals
src/UILayer/web/src/components/BridgeHeader.tsx, src/UILayer/web/src/components/FXModePanel.tsx, src/UILayer/web/src/components/LayoutToolsPanel.tsx, src/UILayer/web/src/components/VoiceFeedback.tsx, src/UILayer/web/src/app/settings/page.tsx, src/UILayer/web/components/ui/use-toast.ts, src/UILayer/web/hooks/use-mobile.tsx
Removed multiple custom components and hooks: BridgeHeader (header UI), FXModePanel (effects/mode controls), LayoutToolsPanel (layout controls), VoiceFeedback (voice feedback), SettingsPage (settings UI), toast system, and useIsMobile hook.
Component Index & Exports
src/UILayer/web/src/components/index.ts
Updated public API exports: removed BridgeHeader, FXModePanel, LayoutToolsPanel, VoiceFeedback; added StorageProviderCard, LLMModelCard, LLMSettings, GuidedTour; added type exports for AdvancedDraggableModuleProps, DraggableModuleProps, EnergyFlowProps, NexusMode, NexusProps, NexusSize.
Storybook Configuration
src/UILayer/web/.storybook/main.ts
Simplified Storybook configuration by removing stories glob pattern, removing addon-essentials and addon-interactions, and replacing autodocs configuration with empty docs object.
Tailwind CSS & PostCSS Migration
src/UILayer/web/postcss.config.mjs, src/UILayer/web/src/app/globals.css
Replaced Tailwind plugin key from tailwindcss to @tailwindcss/postcss in PostCSS config; updated globals.css to use @import "tailwindcss" and @config directives instead of legacy @tailwind directives while preserving design token imports.
Package Dependencies
src/UILayer/web/package.json
Added Radix UI packages, form libraries (react-hook-form), UI utilities (cmdk, embla-carousel-react, input-otp, react-day-picker, sonner), and visualization (recharts); added prebuild/predev scripts for style-dictionary; updated Storybook packages to caret versions.
UI Component Library Updates
src/UILayer/web/src/components/ui/calendar.tsx, src/UILayer/web/src/components/ui/chart.tsx, src/UILayer/web/src/components/ui/resizable.tsx
Refactored calendar component with renamed classNames keys and Chevron abstraction; updated chart tooltip/legend components with explicit typing and safer property access; replaced resizable panel API from PanelGroup/PanelResizeHandle to Group/Separator.
Type Safety & Imports
src/UILayer/web/src/components/agency/..., src/UILayer/web/src/components/visualizations/...
Strengthened TypeScript typing in agency components (AgentControlCenter, AgentActionAuditTrail, TwoHundredDollarTestWidget); updated visualization imports to use path aliases; added explicit type annotations and fallbacks.
Configuration & Utilities
src/UILayer/web/tsconfig.json, src/UILayer/web/src/lib/utils.ts, src/UILayer/web/src/lib/api/client.ts, src/UILayer/web/src/lib/service-worker/..., src/UILayer/web/src/lib/i18n/hooks/useTranslation.ts, src/UILayer/web/src/lib/accessibility/index.ts
Updated TSX runtime to react-jsx, expanded TypeScript includes; added cn() utility for class merging; improved error handling in API client and service worker; updated accessibility index to use default exports; adjusted i18n type generics.
Component Logic Updates
src/UILayer/web/src/components/Nexus/index.tsx, src/UILayer/web/src/components/ParticleField.tsx, src/UILayer/web/src/app/login/page.tsx, src/UILayer/web/src/components/DraggableModuleContent.tsx, src/UILayer/web/src/app/layout.tsx, src/UILayer/web/src/components/CognitiveMeshButton/CognitiveMeshButton.test.tsx
Refactored Nexus drag state API; added SSR safety guards in ParticleField; extracted LoginForm component with Suspense wrapper; added type imports and path alias updates; enhanced test setup imports.
Code Splitting
src/UILayer/web/src/lib/code-splitting/registry/lazyWidgets.ts
Introduced shared AnyImport type for lazy-loaded components with consistent type casting across dynamic imports.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Poem

🐰 Hop! The components migrate with care,
Shadcn takes the stage, legacy fare goes spare,
Tailwind v4 flows, new paths align,
Toast and mobile hooks retire in time,
Phase 14b complete—the UI does shine!

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description does not follow the required template structure. It is missing the 'Related Issues' section and the required 'Architecture Layer' checklist, and the 'Checklist' section is incomplete with all items unchecked or not applicable. Update the description to follow the template: add 'Related Issues' section with issue links, complete the 'Architecture Layer' checklist by checking relevant layers, and ensure all checklist items are addressed or marked as N/A.
Docstring Coverage ⚠️ Warning Docstring coverage is 11.11% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Phase 14b: UI component library integration' clearly and concisely summarizes the main objective of the PR, which is to integrate the UI component library in phase 14b.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/frontend-phase-14

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown

Summary

Summary
Generated on: 03/11/2026 - 05:32:11
Parser: MultiReport (10x OpenCover)
Assemblies: 1
Classes: 4
Files: 3
Line coverage: 14.2% (3 of 21)
Covered lines: 3
Uncovered lines: 18
Coverable lines: 21
Total lines: 190
Branch coverage: 33.3% (2 of 6)
Covered branches: 2
Total branches: 6
Method coverage: Feature is only available for sponsors

Coverage

CognitiveMesh.Shared - 14.2%
Name Line Branch
CognitiveMesh.Shared 14.2% 33.3%
CognitiveMesh.Shared.Interfaces.ChatMessage 0% 0%
CognitiveMesh.Shared.LogSanitizer 100% 100%
CognitiveMesh.Shared.Models.PolicyConfiguration 0%
CognitiveMesh.Shared.Models.RoutingRule 0%

@JustAGhosT JustAGhosT merged commit d98c3fe into dev Mar 11, 2026
7 of 8 checks passed
@JustAGhosT JustAGhosT deleted the feat/frontend-phase-14 branch March 11, 2026 05:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant