Conversation
- Resolved package-lock.json conflict - Kept Tailwind 4.1.2 upgrade from feature branch - Merged main's updates (react-icons, file reorganization, new features) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
WalkthroughAdds a gated Style Guide feature, a comprehensive UI standards doc and automated review workflow, many new style‑guide pages/showcases/primitives, Tailwind v4/tooling updates, settings/context changes to persist styleGuideEnabled, and global styling/system refactors. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as FeaturesSection (Settings)
participant Ctx as SettingsContext
participant API as Backend Settings API
participant App as Router
User->>UI: Toggle "Style Guide"
UI->>Ctx: setStyleGuideEnabled(enabled)
Ctx->>API: persist STYLE_GUIDE_ENABLED
API-->>Ctx: 200 / error
alt success
Ctx-->>UI: resolve
App-->>User: /style-guide nav item visible
else error
Ctx-->>UI: reject (revert)
UI-->>User: show error toast
end
sequenceDiagram
autonumber
actor User
participant Browser as Browser
participant App as App Router
participant SG as StyleGuideView
participant Pill as PillNavigation
participant Tabs as LayoutsTab
participant Side as SideNavigation
Browser->>App: GET /style-guide
App->>SG: render StyleGuideView
SG->>Pill: render tabs (Style Guide | Layouts)
User->>Pill: click "Layouts"
Pill-->>SG: onSectionClick("layouts")
SG->>Tabs: render LayoutsTab
Tabs->>Side: render sections
User->>Side: select "Projects"
Side-->>Tabs: onSectionClick("projects")
Tabs-->>Browser: show ProjectsLayoutExample
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 15
🧹 Nitpick comments (13)
archon-ui-main/src/features/style-guide/standards/modalStandards.ts (1)
1-32: Prefer a single top-level const assertionInstead of repeating
as conston every field, add oneas constto the object literal. That keeps the config readonly and removes redundant casts.-export const MODAL_TYPES = { - confirmation: { - size: "sm" as const, - glowColor: "red" as const, - purpose: "Destructive actions", - }, +export const MODAL_TYPES = { + confirmation: { + size: "sm", + glowColor: "red", + purpose: "Destructive actions", + }, formCreate: { - size: "md" as const, - glowColor: "green" as const, + size: "md", + glowColor: "green", purpose: "Creating resources", }, formEdit: { - size: "md" as const, - glowColor: "blue" as const, + size: "md", + glowColor: "blue", purpose: "Editing resources", }, display: { - size: "lg" as const, - glowColor: "purple" as const, + size: "lg", + glowColor: "purple", purpose: "Detailed information", }, codeViewer: { - size: "xl" as const, - glowColor: "cyan" as const, + size: "xl", + glowColor: "cyan", purpose: "Code display", }, settings: { - size: "lg" as const, - glowColor: "blue" as const, + size: "lg", + glowColor: "blue", purpose: "App settings", }, -}; +} as const;archon-ui-main/src/features/ui/primitives/radio-group.tsx (1)
1-32: Well-implemented radio group primitive with proper Radix integration.The component correctly uses Radix UI primitives, React.forwardRef, and TypeScript typing. Glassmorphism styling with Tron-inspired cyan colors is applied consistently. Accessibility is handled by Radix, and the focus ring follows form control best practices.
Optional refinement: Add hover state for improved UX.
Consider adding a subtle hover effect to improve user experience:
<RadioGroupPrimitive.Item ref={ref} className={cn( "aspect-square h-4 w-4 rounded-full", "backdrop-blur-md bg-gradient-to-b from-white/80 to-white/60", "dark:from-white/10 dark:to-black/30", glassmorphism.border.default, glassmorphism.interactive.base, + "hover:border-cyan-400/60", "focus:outline-none focus:ring-2 focus:ring-cyan-500", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:border-cyan-500", className, )}Based on learnings.
archon-ui-main/package.json (1)
50-50: Consider updating lucide-react to latest version.The current version
^0.441.0is valid, but the latest stable version is0.542.0(per npm). Consider updating to benefit from additional icons, accessibility improvements, and performance fixes.Based on learnings: lucide-react follows seminal versioning and has continuous improvements. Update is low-risk:
- "lucide-react": "^0.441.0", + "lucide-react": "^0.542.0",archon-ui-main/src/features/style-guide/components.json (1)
21-21: Consider maintenance strategy for line number references.Several entries include specific line number ranges (e.g.,
:188-210,:88-118). While these provide precise documentation now, they may become stale as the codebase evolves. Consider:
- Using more resilient references (e.g., function/component names)
- Documenting that line numbers are approximate
- Implementing automated validation of line references as part of CI
Also applies to: 37-37, 55-55, 67-67
archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx (1)
2-2: Align PowerButton with primitives directory
PowerButton lives in@/components/ui/PowerButtonwhile other UI primitives reside under@/features/ui/primitives/; move PowerButton into primitives if it’s a reusable component, or document why it remains in its legacy location.archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx (1)
23-37: Consider adding accessibility attributes for active state.The active navigation button should include
aria-current="true"to improve screen reader experience.Apply this diff to add aria-current:
<button key={section.id} type="button" onClick={() => onSectionClick(section.id)} + aria-current={isActive ? "true" : undefined} className={cn(CONTRIBUTING.md (1)
373-373: Fix bare URL to markdown link format.The bare URL should be converted to a proper markdown link for better readability and accessibility.
Apply this diff:
- - Access at http://localhost:3737/style-guide + - Access at [http://localhost:3737/style-guide](http://localhost:3737/style-guide)archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx (1)
5-17: Consider displaying the unusedtailwindfield.Each color object includes a
tailwindfield (e.g., "blue-500") that isn't displayed in the UI. Consider showing this information to help developers know which Tailwind class to use.You could add the Tailwind class name below the hex value:
<p className="text-xs text-gray-500 dark:text-gray-400 font-mono mt-1">{color.hex}</p> +<p className="text-xs text-gray-500 dark:text-gray-400 font-mono">{color.tailwind}</p> <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">{color.usage}</p>archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx (1)
39-39: Consider using Card's glow props instead of manual shadow classes.The Card primitive supports
glowColor,glowType, andglowSizeprops. Using these instead of manually adding shadow classes would be more consistent with the design system.Apply this diff to use Card's built-in glow feature:
-<Card className="p-6 shadow-[inset_0_0_15px_rgba(34,211,238,0.1)] dark:shadow-[inset_0_0_20px_rgba(34,211,238,0.15)]"> +<Card className="p-6" glowColor="cyan" glowType="inner" glowSize="sm">Based on learnings: This aligns with the glassmorphism styling patterns established in the Card primitive.
archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx (1)
29-66: Consider responsive design for the wireframe mockup.The fixed heights and widths (e.g.,
h-[500px],w-[72px]) might not display well on smaller screens. Consider making these responsive or adding a note that this is best viewed on larger displays.You could add responsive classes or a viewport size notice:
<div className="relative h-[500px] min-h-[300px] lg:h-[500px]"> {/* ... */} </div>archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx (1)
31-41: Avoid string cast; type Tab IDs explicitlyDefine a TabId type and derive from navigationItems to drop the cast and prevent invalid IDs at compile-time.
-import { Layout, Palette } from "lucide-react"; +import { Layout, Palette } from "lucide-react"; @@ -export const StyleGuideView = () => { - const [activeTab, setActiveTab] = useState<"style-guide" | "layouts">("style-guide"); +type TabId = "style-guide" | "layouts"; +export const StyleGuideView = () => { + const [activeTab, setActiveTab] = useState<TabId>("style-guide"); @@ - const navigationItems: PillNavigationItem[] = [ + const navigationItems: PillNavigationItem[] = [ { id: "style-guide", label: "Style Guide", icon: <Palette className="w-4 h-4" /> }, { id: "layouts", label: "Layouts", icon: <Layout className="w-4 h-4" /> }, ]; @@ - onSectionClick={(id) => setActiveTab(id as typeof activeTab)} + onSectionClick={(id) => { + if (id === "style-guide" || id === "layouts") setActiveTab(id); + }}archon-ui-main/src/components/settings/FeaturesSection.tsx (2)
211-213: Awaiting context setter requires async typeYou await setStyleGuideContext, which is good, but SettingsContext types currently declare setters as returning void. After updating the context interface to Promise, this will be type-safe. See related comment in SettingsContext.tsx.
64-70: Remove or gate debug logsMultiple console logs will spam production. Wrap in a dev guard or remove.
- console.log('🔍 Projects health response:', { ... }); + if (process.env.NODE_ENV !== "production") { + // eslint-disable-next-line no-console + console.log("Projects health response:", { + response: projectsHealthResponse, + ok: projectsHealthResponse?.ok, + status: projectsHealthResponse?.status, + url: `${credentialsService["baseUrl"]}/api/projects/health`, + }); + } @@ - console.log('🔍 Projects health data:', healthData); + if (process.env.NODE_ENV !== "production") { + // eslint-disable-next-line no-console + console.log("Projects health data:", healthData); + } @@ - console.log('🔍 Projects health check failed'); + if (process.env.NODE_ENV !== "production") { + // eslint-disable-next-line no-console + console.log("Projects health check failed"); + }Also applies to: 72-74, 87-93
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
archon-ui-main/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (56)
.claude/commands/archon/archon-ui-consistency-review.md(1 hunks).gitignore(1 hunks)CLAUDE.md(1 hunks)CONTRIBUTING.md(2 hunks)PRPs/ai_docs/UI_STANDARDS.md(1 hunks)archon-ui-main/package.json(2 hunks)archon-ui-main/postcss.config.js(1 hunks)archon-ui-main/src/App.tsx(2 hunks)archon-ui-main/src/components/layout/Navigation.tsx(5 hunks)archon-ui-main/src/components/settings/FeaturesSection.tsx(7 hunks)archon-ui-main/src/contexts/SettingsContext.tsx(3 hunks)archon-ui-main/src/contexts/ThemeContext.tsx(1 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx(1 hunks)archon-ui-main/src/features/shared/api/apiClient.ts(1 hunks)archon-ui-main/src/features/style-guide/components.json(1 hunks)archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx(1 hunks)archon-ui-main/src/features/style-guide/index.ts(1 hunks)archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx(1 hunks)archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx(1 hunks)archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx(1 hunks)archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx(1 hunks)archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx(1 hunks)archon-ui-main/src/features/style-guide/shared/PillNavigation.tsx(1 hunks)archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticEffects.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticTables.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx(1 hunks)archon-ui-main/src/features/style-guide/standards/modalStandards.ts(1 hunks)archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx(1 hunks)archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx(1 hunks)archon-ui-main/src/features/style-guide/types/index.ts(1 hunks)archon-ui-main/src/features/ui/primitives/card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/checkbox.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/data-card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/draggable-card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/grouped-card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/index.ts(1 hunks)archon-ui-main/src/features/ui/primitives/label.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/pill-navigation.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/radio-group.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/select.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/selectable-card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/styles.ts(4 hunks)archon-ui-main/src/features/ui/primitives/switch.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/tabs.tsx(2 hunks)archon-ui-main/src/features/ui/primitives/toggle-group.tsx(1 hunks)archon-ui-main/src/index.css(2 hunks)archon-ui-main/src/pages/StyleGuidePage.tsx(1 hunks)archon-ui-main/tailwind.config.js(1 hunks)archon-ui-main/vite.config.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
archon-ui-main/src/features/**/*.{ts,tsx}: Use TanStack Query for all data fetching (no prop drilling); use smart HTTP polling (no WebSockets)
Biome formatting in features: 120-character line length, double quotes, and trailing commas
Apply Tron-inspired glassmorphism styling with Tailwind for feature UIUse Biome in features: 120 character line length, double quotes, and trailing commas
Files:
archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsxarchon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsxarchon-ui-main/src/features/ui/primitives/label.tsxarchon-ui-main/src/features/style-guide/showcases/StaticTypography.tsxarchon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsxarchon-ui-main/src/features/shared/api/apiClient.tsarchon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/selectable-card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticForms.tsxarchon-ui-main/src/features/style-guide/showcases/StaticToggles.tsxarchon-ui-main/src/features/ui/primitives/select.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/style-guide/index.tsarchon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsxarchon-ui-main/src/features/style-guide/standards/modalStandards.tsarchon-ui-main/src/features/style-guide/showcases/StaticTables.tsxarchon-ui-main/src/features/ui/primitives/checkbox.tsxarchon-ui-main/src/features/ui/primitives/grouped-card.tsxarchon-ui-main/src/features/style-guide/shared/SideNavigation.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsxarchon-ui-main/src/features/style-guide/showcases/StaticColors.tsxarchon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/style-guide/shared/PillNavigation.tsxarchon-ui-main/src/features/style-guide/components/StyleGuideView.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsxarchon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/data-card.tsxarchon-ui-main/src/features/style-guide/types/index.tsarchon-ui-main/src/features/ui/primitives/radio-group.tsxarchon-ui-main/src/features/ui/primitives/index.tsarchon-ui-main/src/features/ui/primitives/toggle-group.tsxarchon-ui-main/src/features/ui/primitives/draggable-card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticEffects.tsxarchon-ui-main/src/features/ui/primitives/styles.ts
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Disallow implicit any in TypeScript
archon-ui-main/src/**/*.{ts,tsx}: Frontend TypeScript must use strict mode with no implicit any
Use TanStack Query for all data fetching; avoid prop drilling
Use database values directly in the frontend; avoid mapping layers between BE and FE types
Files:
archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsxarchon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsxarchon-ui-main/src/features/ui/primitives/label.tsxarchon-ui-main/src/features/style-guide/showcases/StaticTypography.tsxarchon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsxarchon-ui-main/src/features/shared/api/apiClient.tsarchon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/selectable-card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticForms.tsxarchon-ui-main/src/features/style-guide/showcases/StaticToggles.tsxarchon-ui-main/src/features/ui/primitives/select.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/style-guide/index.tsarchon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsxarchon-ui-main/src/features/style-guide/standards/modalStandards.tsarchon-ui-main/src/features/style-guide/showcases/StaticTables.tsxarchon-ui-main/src/features/ui/primitives/checkbox.tsxarchon-ui-main/src/features/ui/primitives/grouped-card.tsxarchon-ui-main/src/features/style-guide/shared/SideNavigation.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsxarchon-ui-main/src/features/style-guide/showcases/StaticColors.tsxarchon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsxarchon-ui-main/src/contexts/SettingsContext.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/style-guide/shared/PillNavigation.tsxarchon-ui-main/src/features/style-guide/components/StyleGuideView.tsxarchon-ui-main/src/pages/StyleGuidePage.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsxarchon-ui-main/src/components/settings/FeaturesSection.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsxarchon-ui-main/src/contexts/ThemeContext.tsxarchon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/App.tsxarchon-ui-main/src/features/ui/primitives/data-card.tsxarchon-ui-main/src/features/style-guide/types/index.tsarchon-ui-main/src/features/ui/primitives/radio-group.tsxarchon-ui-main/src/features/ui/primitives/index.tsarchon-ui-main/src/features/ui/primitives/toggle-group.tsxarchon-ui-main/src/features/ui/primitives/draggable-card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticEffects.tsxarchon-ui-main/src/features/ui/primitives/styles.tsarchon-ui-main/src/components/layout/Navigation.tsx
archon-ui-main/src/**/*.{ts,tsx,py}
📄 CodeRabbit inference engine (CLAUDE.md)
In code comments, avoid meta terms like SIMPLIFIED, ENHANCED, LEGACY, CHANGED, REMOVED; comment only on functionality and reasoning (do not mention beta/global rules)
Files:
archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsxarchon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsxarchon-ui-main/src/features/ui/primitives/label.tsxarchon-ui-main/src/features/style-guide/showcases/StaticTypography.tsxarchon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsxarchon-ui-main/src/features/shared/api/apiClient.tsarchon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/selectable-card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticForms.tsxarchon-ui-main/src/features/style-guide/showcases/StaticToggles.tsxarchon-ui-main/src/features/ui/primitives/select.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/style-guide/index.tsarchon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsxarchon-ui-main/src/features/style-guide/standards/modalStandards.tsarchon-ui-main/src/features/style-guide/showcases/StaticTables.tsxarchon-ui-main/src/features/ui/primitives/checkbox.tsxarchon-ui-main/src/features/ui/primitives/grouped-card.tsxarchon-ui-main/src/features/style-guide/shared/SideNavigation.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsxarchon-ui-main/src/features/style-guide/showcases/StaticColors.tsxarchon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsxarchon-ui-main/src/contexts/SettingsContext.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/style-guide/shared/PillNavigation.tsxarchon-ui-main/src/features/style-guide/components/StyleGuideView.tsxarchon-ui-main/src/pages/StyleGuidePage.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsxarchon-ui-main/src/components/settings/FeaturesSection.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsxarchon-ui-main/src/contexts/ThemeContext.tsxarchon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/App.tsxarchon-ui-main/src/features/ui/primitives/data-card.tsxarchon-ui-main/src/features/style-guide/types/index.tsarchon-ui-main/src/features/ui/primitives/radio-group.tsxarchon-ui-main/src/features/ui/primitives/index.tsarchon-ui-main/src/features/ui/primitives/toggle-group.tsxarchon-ui-main/src/features/ui/primitives/draggable-card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticEffects.tsxarchon-ui-main/src/features/ui/primitives/styles.tsarchon-ui-main/src/components/layout/Navigation.tsx
archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Radix UI primitives from the primitives library when building feature components
Use Radix UI primitives from src/features/ui/primitives when creating UI components
Files:
archon-ui-main/src/features/ui/primitives/label.tsxarchon-ui-main/src/features/ui/primitives/selectable-card.tsxarchon-ui-main/src/features/ui/primitives/select.tsxarchon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/ui/primitives/checkbox.tsxarchon-ui-main/src/features/ui/primitives/grouped-card.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/data-card.tsxarchon-ui-main/src/features/ui/primitives/radio-group.tsxarchon-ui-main/src/features/ui/primitives/index.tsarchon-ui-main/src/features/ui/primitives/toggle-group.tsxarchon-ui-main/src/features/ui/primitives/draggable-card.tsxarchon-ui-main/src/features/ui/primitives/styles.ts
archon-ui-main/src/features/*/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Place new UI components under the feature’s components directory
Place new UI components under src/features/[feature]/components
Files:
archon-ui-main/src/features/style-guide/components/StyleGuideView.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx
archon-ui-main/src/features/*/types/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Define feature-specific TypeScript types in the feature’s types directory
Define shared types under src/features/[feature]/types
Files:
archon-ui-main/src/features/style-guide/types/index.ts
🧠 Learnings (12)
📓 Common learnings
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/**/*.{ts,tsx} : Apply Tron-inspired glassmorphism styling with Tailwind for feature UI
📚 Learning: 2025-09-10T11:50:38.763Z
Learnt from: zaksnet
PR: coleam00/Archon#473
File: archon-ui-main/src/features/agents/components/provider-management/ProviderSettings.tsx:147-155
Timestamp: 2025-09-10T11:50:38.763Z
Learning: The Button component in archon-ui-main/src/components/ui/Button.tsx supports the "primary" variant along with: default, destructive, outline, secondary, ghost, link, and cyan.
Applied to files:
archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx
📚 Learning: 2025-09-10T11:50:38.763Z
Learnt from: zaksnet
PR: coleam00/Archon#473
File: archon-ui-main/src/features/agents/components/provider-management/ProviderSettings.tsx:147-155
Timestamp: 2025-09-10T11:50:38.763Z
Learning: The Button component in archon-ui-main/src/components/ui/Button.tsx supports exactly these variants: 'primary', 'secondary', 'outline', and 'ghost'. The "primary" variant is valid and is actually the default variant for the component.
Applied to files:
archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx
📚 Learning: 2025-09-19T10:32:55.580Z
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx} : Use Radix UI primitives from src/features/ui/primitives when creating UI components
Applied to files:
archon-ui-main/src/features/ui/primitives/label.tsxarchon-ui-main/src/features/style-guide/components.jsonarchon-ui-main/src/features/ui/primitives/checkbox.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxCLAUDE.mdarchon-ui-main/src/features/ui/primitives/radio-group.tsxarchon-ui-main/src/features/ui/primitives/index.tsarchon-ui-main/package.json
📚 Learning: 2025-09-19T10:31:54.292Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx} : Use Radix UI primitives from the primitives library when building feature components
Applied to files:
archon-ui-main/src/features/ui/primitives/label.tsxarchon-ui-main/src/features/ui/primitives/checkbox.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/ui/primitives/radio-group.tsxarchon-ui-main/src/features/ui/primitives/index.tsarchon-ui-main/package.json
📚 Learning: 2025-09-19T10:31:54.292Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/*/components/**/*.{ts,tsx} : Place new UI components under the feature’s components directory
Applied to files:
archon-ui-main/src/features/style-guide/components.jsonCLAUDE.md
📚 Learning: 2025-09-19T10:31:54.292Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/**/*.{ts,tsx} : Apply Tron-inspired glassmorphism styling with Tailwind for feature UI
Applied to files:
archon-ui-main/src/index.cssarchon-ui-main/src/features/style-guide/types/index.tsarchon-ui-main/src/features/ui/primitives/styles.ts
📚 Learning: 2025-09-19T10:32:55.580Z
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/**/*.{tsx} : Apply Tron-inspired glassmorphism styling with Tailwind in feature UI components
Applied to files:
archon-ui-main/src/index.cssPRPs/ai_docs/UI_STANDARDS.mdarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/style-guide/types/index.tsarchon-ui-main/src/features/ui/primitives/styles.ts
📚 Learning: 2025-09-19T10:32:55.580Z
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/*/components/**/*.{ts,tsx} : Place new UI components under src/features/[feature]/components
Applied to files:
CLAUDE.md
📚 Learning: 2025-09-19T10:32:55.580Z
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/*/types/**/*.{ts,tsx} : Define shared types under src/features/[feature]/types
Applied to files:
archon-ui-main/src/features/style-guide/types/index.ts
📚 Learning: 2025-09-19T10:31:54.292Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/*/types/**/*.{ts,tsx} : Define feature-specific TypeScript types in the feature’s types directory
Applied to files:
archon-ui-main/src/features/style-guide/types/index.ts
📚 Learning: 2025-09-19T10:31:54.292Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/**/*.test.{ts,tsx} : Write frontend tests with Vitest and React Testing Library
Applied to files:
CONTRIBUTING.md
🧬 Code graph analysis (33)
archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx (2)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)
archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx (1)
archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx (2)
SideNavigationSection(4-8)SideNavigation(16-43)
archon-ui-main/src/features/ui/primitives/label.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)
archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx (1)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)
archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx (5)
archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/dialog.tsx (2)
Dialog(7-7)DialogContent(32-81)archon-ui-main/src/features/ui/primitives/tabs.tsx (4)
Tabs(6-6)TabsList(9-22)TabsTrigger(26-94)TabsContent(98-110)archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)
archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx (3)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)archon-ui-main/src/features/ui/primitives/label.tsx (1)
Label(5-19)archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)
archon-ui-main/src/features/ui/primitives/selectable-card.tsx (2)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)
archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx (5)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)archon-ui-main/src/features/ui/primitives/label.tsx (1)
Label(5-19)archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)archon-ui-main/src/features/ui/primitives/select.tsx (5)
Select(9-9)SelectTrigger(55-88)SelectValue(10-10)SelectContent(101-149)SelectItem(153-193)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)
archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx (2)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)archon-ui-main/src/features/ui/primitives/label.tsx (1)
Label(5-19)
archon-ui-main/src/features/ui/primitives/select.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassmorphism(12-119)
archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx (7)
archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)archon-ui-main/src/features/ui/primitives/toggle-group.tsx (2)
ToggleGroup(14-30)ToggleGroupItem(37-61)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/grouped-card.tsx (1)
GroupedCard(24-74)archon-ui-main/src/features/ui/primitives/data-card.tsx (4)
DataCard(21-97)DataCardHeader(102-110)DataCardContent(115-123)DataCardFooter(128-143)archon-ui-main/src/features/ui/primitives/pill.tsx (1)
StatPill(68-100)
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx (8)
archon-ui-main/src/features/ui/primitives/pill-navigation.tsx (2)
PillNavigationItem(6-11)PillNavigation(27-153)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/selectable-card.tsx (1)
SelectableCard(22-73)archon-ui-main/src/features/ui/primitives/pill.tsx (1)
StatPill(68-100)archon-ui-main/src/features/ui/primitives/draggable-card.tsx (1)
DraggableCard(18-64)archon-ui-main/src/features/ui/primitives/tooltip.tsx (2)
Tooltip(9-9)TooltipContent(15-50)archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)
archon-ui-main/src/features/ui/primitives/checkbox.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassmorphism(12-119)
archon-ui-main/src/features/ui/primitives/grouped-card.tsx (2)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/data-card.tsx (1)
DataCard(21-97)
archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx (2)
archon-ui-main/src/features/style-guide/index.ts (1)
SideNavigation(3-3)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)
archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx (4)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)archon-ui-main/src/features/ui/primitives/selectable-card.tsx (1)
SelectableCard(22-73)archon-ui-main/src/features/ui/primitives/draggable-card.tsx (1)
DraggableCard(18-64)
archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx (2)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)
archon-ui-main/src/contexts/SettingsContext.tsx (2)
archon-ui-main/src/services/serverHealthService.ts (1)
loadSettings(22-30)archon-ui-main/src/services/credentialsService.ts (1)
credentialsService(604-604)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
glassCard(122-566)cn(605-607)
archon-ui-main/src/features/style-guide/shared/PillNavigation.tsx (2)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/select.tsx (5)
Select(9-9)SelectTrigger(55-88)SelectValue(10-10)SelectContent(101-149)SelectItem(153-193)
archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx (3)
archon-ui-main/src/features/ui/primitives/pill-navigation.tsx (2)
PillNavigationItem(6-11)PillNavigation(27-153)archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx (1)
StyleGuideTab(24-74)archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx (1)
LayoutsTab(10-90)
archon-ui-main/src/pages/StyleGuidePage.tsx (2)
archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx (1)
StyleGuideView(8-51)archon-ui-main/src/features/style-guide/index.ts (1)
StyleGuideView(2-2)
archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx (6)
archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx (2)
SideNavigationSection(4-8)SideNavigation(16-43)archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx (1)
NavigationExplanation(3-78)archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx (1)
ProjectsLayoutExample(113-302)archon-ui-main/src/features/style-guide/layouts/SettingsLayoutExample.tsx (1)
SettingsLayoutExample(9-208)archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx (1)
KnowledgeLayoutExample(68-184)archon-ui-main/src/features/style-guide/layouts/DocumentBrowserExample.tsx (1)
DocumentBrowserExample(54-70)
archon-ui-main/src/components/settings/FeaturesSection.tsx (2)
archon-ui-main/src/contexts/SettingsContext.tsx (1)
useSettings(15-21)archon-ui-main/src/services/serverHealthService.ts (2)
loadSettings(22-30)serverHealthService(170-170)
archon-ui-main/src/features/ui/primitives/switch.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassmorphism(12-119)
archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx (1)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)
archon-ui-main/src/features/ui/primitives/tabs.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)
archon-ui-main/src/App.tsx (1)
archon-ui-main/src/contexts/SettingsContext.tsx (1)
useSettings(15-21)
archon-ui-main/src/features/ui/primitives/data-card.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassCard(122-566)
archon-ui-main/src/features/ui/primitives/radio-group.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassmorphism(12-119)
archon-ui-main/src/features/ui/primitives/draggable-card.tsx (1)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)
archon-ui-main/src/features/style-guide/showcases/StaticEffects.tsx (2)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-147)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)
archon-ui-main/src/components/layout/Navigation.tsx (2)
archon-ui-main/src/contexts/SettingsContext.tsx (1)
useSettings(15-21)archon-ui-main/src/features/ui/primitives/tooltip.tsx (2)
Tooltip(9-9)TooltipTrigger(12-12)
🪛 markdownlint-cli2 (0.18.1)
PRPs/ai_docs/UI_STANDARDS.md
12-12: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
22-22: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
33-33: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
40-40: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
45-45: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
79-79: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
126-126: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
133-133: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
225-225: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
240-240: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
251-251: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
352-352: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
357-357: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
362-362: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
374-374: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
483-483: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
489-489: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
677-677: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
685-685: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
693-693: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
702-702: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
710-710: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
719-719: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
729-729: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
737-737: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
745-745: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
752-752: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
760-760: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
767-767: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
777-777: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
785-785: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
794-794: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
885-885: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
898-898: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
CONTRIBUTING.md
373-373: Bare URL used
(MD034, no-bare-urls)
🔇 Additional comments (29)
archon-ui-main/src/features/shared/api/apiClient.ts (1)
63-67: Quote normalization matches Biome rules.Switching to double quotes keeps us consistent with the feature-level Biome guideline. No further action needed.
archon-ui-main/src/contexts/ThemeContext.tsx (2)
11-15: Lazy initialization prevents theme flash—excellent improvement.Reading
localStoragedirectly in theuseStateinitializer eliminates the flash of incorrect theme that would occur with a separateuseEffect. The fallback to'dark'ensures a consistent default.
19-25: Simplified dark mode handling aligns with Tailwind v4 recommendations.The updated logic correctly toggles only the
darkclass, following Tailwind v4's class-based dark mode strategy. This is cleaner than managing bothdarkandlightclasses..gitignore (1)
8-8: LGTM!The addition of
PRPs/reviews/to gitignore appropriately excludes generated review reports from version control, aligning with the new UI consistency review workflow.archon-ui-main/package.json (1)
33-40: LGTM! New Radix UI primitives align with style guide expansion.The addition of
@radix-ui/react-checkbox,@radix-ui/react-label,@radix-ui/react-radio-group, and@radix-ui/react-switchsupports the new UI primitives being introduced in the style guide feature.CLAUDE.md (1)
212-221: LGTM! Enhanced UI component guidance with important constraints.The addition of explicit guidance to review
UI_STANDARDS.mdbefore creating components, along with the requirement to follow responsive design patterns and avoid dynamic Tailwind class construction, provides clear guardrails for maintaining UI consistency. These additions align well with the new style guide feature and formalized UI standards.archon-ui-main/src/features/style-guide/showcases/StaticSpacing.tsx (1)
1-38: LGTM! Clean spacing scale visualization.The component effectively demonstrates the spacing scale using:
- Proper Card primitive from the primitives library
- Responsive grid layout (2 columns mobile, 4 columns desktop)
- Inline
styleattribute for dynamic height values (line 26), which is appropriate for this visualization use case and doesn't violate the "no dynamic class construction" guidelineThe implementation follows the coding guidelines for the features directory.
As per coding guidelines.
archon-ui-main/src/features/style-guide/showcases/StaticToggles.tsx (1)
8-9: Excellent use of useId for accessibility.Using React's
useIdhook to generate unique IDs for form controls ensures proper accessibility when multiple instances of this component are rendered. This follows React best practices for accessible form labeling.archon-ui-main/src/features/ui/primitives/label.tsx (1)
1-20: LGTM! Well-implemented Radix primitive wrapper.This Label component follows the established primitive pattern correctly:
- Wraps
@radix-ui/react-labelwith forwardRef- Applies consistent styling (typography, colors, disabled states)
- Uses the
cnutility for class merging- Properly sets displayName for dev tools
The implementation aligns with the coding guidelines to use Radix UI primitives from
src/features/ui/primitiveswhen creating UI components.Based on learnings and coding guidelines.
archon-ui-main/src/features/style-guide/components.json (2)
1-210: Comprehensive component catalog for style guide feature.This JSON configuration provides excellent documentation of the component architecture, including:
- Navigation, layout, card, information display, button, and Radix primitive categories
- File paths, usage patterns, props, and examples for each component
- Integration patterns between components
The structured format will be valuable for both developers and AI agents working with the codebase.
11-29: All referenced component paths and line number ranges are accurate.archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx (1)
11-11: LGTM! Good import organization.Consolidating the import to the top of the file improves code organization and follows common import grouping conventions.
archon-ui-main/vite.config.ts (1)
5-5: LGTM! Correct Tailwind v4 Vite plugin integration.The integration of the official
@tailwindcss/viteplugin is the recommended approach for Tailwind CSS v4. This aligns with the first-party Vite plugin support introduced in v4 and will enable the new high-performance build engine.Also applies to: 29-29
archon-ui-main/src/App.tsx (1)
16-16: LGTM! Consistent feature-flag implementation.The style guide routing follows the same feature-flag pattern as the projects feature (lines 38-45), ensuring consistency across the application. The conditional routing with
Navigatefallback is a clean approach for gated features.Also applies to: 25-25, 33-37
archon-ui-main/tailwind.config.js (1)
1-5: LGTM! Correct Tailwind v4 configuration pattern.The migration to ES module exports and minimal configuration aligns with Tailwind CSS v4's new architecture. As noted in the comment, v4 uses the
@themedirective in CSS for most configuration, making this minimal config file appropriate.archon-ui-main/postcss.config.js (1)
3-3: LGTM! Correct Tailwind v4 PostCSS plugin.The update to use
@tailwindcss/postcssis required for Tailwind CSS v4 compatibility. This aligns with the v4 plugin naming and packaging changes.archon-ui-main/src/pages/StyleGuidePage.tsx (1)
1-8: LGTM! Clean and simple page component.The StyleGuidePage component follows React best practices with proper typing and a clean structure. The delegation to
StyleGuideViewmaintains good separation of concerns between routing and UI logic.archon-ui-main/src/features/style-guide/tabs/StyleGuideTab.tsx (1)
24-74: LGTM! Well-structured tab component.The component demonstrates good practices:
- Proper TypeScript typing with
SideNavigationSection- Defensive programming with a default case in the switch statement (line 61)
- Clean separation between navigation and content rendering
- Consistent icon usage across all sections
archon-ui-main/src/features/style-guide/showcases/StaticTypography.tsx (1)
1-61: LGTM! Well-structured typography showcase.The component demonstrates good practices:
- Proper semantic HTML elements (h1-h4, p, code)
- Consistent dark mode support across all text variants
- Appropriate use of
font-monofor technical labels showing Tailwind classes- Clean visual hierarchy with spacing
archon-ui-main/src/features/style-guide/shared/SideNavigation.tsx (1)
18-18: Fixed width may truncate labels in some languages.The fixed
w-32width combined withtruncateon line 36 might cause i18n issues with longer translations. Consider making the width responsive or providing a wider default.Verify whether the labels in your target languages fit within 8rem (w-32) or if a wider container is needed.
archon-ui-main/src/components/layout/Navigation.tsx (1)
1-1: LGTM! Clean feature flag integration.The style guide navigation item is properly gated by the
styleGuideEnabledfeature flag, and the filtering logic cleanly removes disabled items from the navigation. The implementation follows the existing navigation patterns consistently.Also applies to: 27-27, 57-62, 71-72
CONTRIBUTING.md (1)
368-376: Excellent addition of UI design standards section.The new documentation clearly guides contributors to review UI standards and use the consistency review tool before submitting UI changes. This will help maintain design system compliance across contributions.
archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx (1)
33-33: Inline styles break Tailwind-only approach.Using inline
style={{ backgroundColor: color.hex }}bypasses Tailwind's design system. Consider using Tailwind color classes dynamically or accepting this as necessary for showcasing arbitrary hex colors.Verify whether showcasing arbitrary hex colors justifies inline styles, or if the component should only display Tailwind's predefined color palette.
Also applies to: 52-55
archon-ui-main/src/features/style-guide/showcases/StaticButtons.tsx (1)
1-112: Excellent button showcase with comprehensive variants.The component effectively demonstrates all button variants, sizes, and use cases with clear descriptions. The use of Card primitives and consistent Tailwind styling aligns well with the design system.
archon-ui-main/src/features/style-guide/index.ts (1)
1-5: LGTM! Clean barrel export pattern.The index file provides a clean public API for the style-guide feature, consolidating exports from multiple files into a single import location.
archon-ui-main/src/features/style-guide/layouts/NavigationExplanation.tsx (1)
1-78: Excellent educational component for navigation patterns.The visual hierarchy explanation with color-coded sections effectively communicates the navigation structure. The "Important" note at the end clearly explains the positioning relationship between components.
archon-ui-main/src/features/ui/primitives/index.ts (1)
17-28: LGTM! Proper expansion of the primitives API.The new card primitive exports (card, data-card, draggable-card, grouped-card, selectable-card) are properly integrated into the public API, making them available for feature components as per the design system guidelines.
As per coding guidelines: These primitives are now available from the primitives library for building feature components.
archon-ui-main/src/features/ui/primitives/toggle-group.tsx (1)
5-12: LGTM on prop union broadeningUsing the Radix Single/Multiple prop union improves typing without behavior change. Looks good.
archon-ui-main/src/features/style-guide/tabs/LayoutsTab.tsx (1)
10-90: LGTMClean section switching via SideNavigation; content blocks read well. No issues spotted.
There was a problem hiding this comment.
Actionable comments posted: 8
♻️ Duplicate comments (2)
archon-ui-main/src/features/ui/primitives/switch.tsx (1)
103-115: Uncontrolled state handling still broken.Despite being marked as "fixed" in the previous review, the component still doesn't support uncontrolled usage. When using
defaultChecked, the icon won't update becausedisplayIconrelies solely on thecheckedprop (line 111). The component needs internal state management.Apply this diff to properly support both controlled and uncontrolled usage:
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>( + ( + { + className, + size = "md", + color = "cyan", + icon, + iconOn, + iconOff, + checked: controlledChecked, + defaultChecked, + onCheckedChange, + ...props + }, + ref, + ) => { + const sizeStyles = switchVariants.size[size]; + const colorStyles = switchVariants.color[color]; + const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked ?? false); + const isControlled = controlledChecked !== undefined; + const checked = isControlled ? controlledChecked : uncontrolledChecked; + + const handleCheckedChange = React.useCallback( + (next: boolean) => { + if (!isControlled) { + setUncontrolledChecked(next); + } + onCheckedChange?.(next); + }, + [isControlled, onCheckedChange], + ); -const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>( - ({ className, size = "md", color = "cyan", icon, iconOn, iconOff, checked, ...props }, ref) => { - const sizeStyles = switchVariants.size[size]; - const colorStyles = switchVariants.color[color]; const displayIcon = React.useMemo(() => { if (size === "sm") return null; - - if (checked !== undefined) { - return checked ? iconOn || icon : iconOff || icon; - } - return icon; + return checked ? iconOn ?? icon : iconOff ?? icon; }, [size, checked, icon, iconOn, iconOff]);Additionally update line 133 to include the handler:
<SwitchPrimitives.Root className={cn( ... )} checked={checked} + onCheckedChange={handleCheckedChange} {...props} ref={ref} >archon-ui-main/src/features/ui/primitives/selectable-card.tsx (1)
48-59: Fix ARIA state for button semantics.
Withrole="button"the state must be exposed viaaria-pressed, notaria-selected, otherwise assistive tech gets an unsupported attribute. Switch toaria-pressed(and make tab focus conditional on havingonSelect) so the selectable button remains accessible.- <motion.div - role="button" - tabIndex={0} - onClick={onSelect} - onKeyDown={handleKeyDown} - aria-selected={isSelected} + <motion.div + role={onSelect ? "button" : undefined} + tabIndex={onSelect ? 0 : undefined} + onClick={onSelect} + onKeyDown={handleKeyDown} + aria-pressed={onSelect ? isSelected : undefined}
🧹 Nitpick comments (3)
archon-ui-main/src/contexts/SettingsContext.tsx (1)
88-107: Feature implementation looks solid.The
setStyleGuideEnabledfunction correctly mirrors thesetProjectsEnabledpattern with optimistic updates, backend persistence, and error handling with state reversion.Optional: Consider reducing code duplication.
Both
setProjectsEnabledandsetStyleGuideEnabledfollow identical patterns. You could extract a generic helper:const createFeatureSetter = ( key: string, description: string, setState: (enabled: boolean) => void ) => async (enabled: boolean) => { try { setState(enabled); await credentialsService.createCredential({ key, value: enabled.toString(), is_encrypted: false, category: 'features', description }); } catch (error) { console.error(`Failed to update ${key}:`, error); setState(!enabled); throw error; } };However, given the functions are simple and self-contained, keeping them separate is also reasonable.
archon-ui-main/src/features/ui/primitives/switch.tsx (1)
112-113: Prefer nullish coalescing for icon fallbacks.Using
||for fallbacks treats all falsy values (false, 0, "", null, undefined) identically. IficonOnoriconOffare explicitlyfalseor0, they would incorrectly fall back toicon. Use??instead.Apply this diff:
- return checked ? iconOn || icon : iconOff || icon; + return checked ? iconOn ?? icon : iconOff ?? icon;archon-ui-main/src/features/ui/primitives/card.tsx (1)
95-137: Align edge-lit implementations or document divergencecard.tsx now uses explicit
<div>elements for edge lighting, while data-card.tsx relies on theglassCard.edgeLitpseudo-element styles defined in styles.ts. Consider unifying both components on a single approach or adding comments in styles.ts to explain the differing implementations.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
.claude/commands/archon/archon-ui-consistency-review.md(1 hunks)PRPs/ai_docs/UI_STANDARDS.md(1 hunks)archon-ui-main/src/contexts/SettingsContext.tsx(3 hunks)archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/checkbox.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/data-card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/pill-navigation.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/select.tsx(2 hunks)archon-ui-main/src/features/ui/primitives/selectable-card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/switch.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/tabs.tsx(2 hunks)ui-consistency-review-style-guide.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx
- archon-ui-main/src/features/ui/primitives/checkbox.tsx
- .claude/commands/archon/archon-ui-consistency-review.md
🧰 Additional context used
📓 Path-based instructions (4)
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
archon-ui-main/src/features/**/*.{ts,tsx}: Use TanStack Query for all data fetching (no prop drilling); use smart HTTP polling (no WebSockets)
Biome formatting in features: 120-character line length, double quotes, and trailing commas
Apply Tron-inspired glassmorphism styling with Tailwind for feature UIUse Biome in features: 120 character line length, double quotes, and trailing commas
Files:
archon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/selectable-card.tsxarchon-ui-main/src/features/ui/primitives/data-card.tsxarchon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/ui/primitives/select.tsx
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Disallow implicit any in TypeScript
archon-ui-main/src/**/*.{ts,tsx}: Frontend TypeScript must use strict mode with no implicit any
Use TanStack Query for all data fetching; avoid prop drilling
Use database values directly in the frontend; avoid mapping layers between BE and FE types
Files:
archon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/selectable-card.tsxarchon-ui-main/src/features/ui/primitives/data-card.tsxarchon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/contexts/SettingsContext.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/ui/primitives/select.tsx
archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Radix UI primitives from the primitives library when building feature components
Use Radix UI primitives from src/features/ui/primitives when creating UI components
Files:
archon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/selectable-card.tsxarchon-ui-main/src/features/ui/primitives/data-card.tsxarchon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/ui/primitives/select.tsx
archon-ui-main/src/**/*.{ts,tsx,py}
📄 CodeRabbit inference engine (CLAUDE.md)
In code comments, avoid meta terms like SIMPLIFIED, ENHANCED, LEGACY, CHANGED, REMOVED; comment only on functionality and reasoning (do not mention beta/global rules)
Files:
archon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/selectable-card.tsxarchon-ui-main/src/features/ui/primitives/data-card.tsxarchon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/contexts/SettingsContext.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/switch.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/ui/primitives/select.tsx
🧠 Learnings (4)
📚 Learning: 2025-09-19T10:31:54.292Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/**/*.{ts,tsx} : Apply Tron-inspired glassmorphism styling with Tailwind for feature UI
Applied to files:
archon-ui-main/src/features/ui/primitives/tabs.tsx
📚 Learning: 2025-09-19T10:32:55.580Z
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/**/*.{tsx} : Apply Tron-inspired glassmorphism styling with Tailwind in feature UI components
Applied to files:
archon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/card.tsx
📚 Learning: 2025-09-19T10:32:55.580Z
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx} : Use Radix UI primitives from src/features/ui/primitives when creating UI components
Applied to files:
archon-ui-main/src/features/ui/primitives/switch.tsx
📚 Learning: 2025-09-19T10:31:54.292Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx} : Use Radix UI primitives from the primitives library when building feature components
Applied to files:
archon-ui-main/src/features/ui/primitives/switch.tsx
🧬 Code graph analysis (10)
archon-ui-main/src/features/ui/primitives/tabs.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)
archon-ui-main/src/features/ui/primitives/selectable-card.tsx (2)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-160)
archon-ui-main/src/features/ui/primitives/data-card.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
glassCard(122-566)cn(605-607)
archon-ui-main/src/features/ui/primitives/pill-navigation.tsx (2)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/select.tsx (5)
Select(9-9)SelectTrigger(55-88)SelectValue(10-10)SelectContent(101-149)SelectItem(153-193)
archon-ui-main/src/contexts/SettingsContext.tsx (2)
archon-ui-main/src/services/serverHealthService.ts (1)
loadSettings(22-30)archon-ui-main/src/services/credentialsService.ts (1)
credentialsService(604-604)
archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx (4)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-160)archon-ui-main/src/features/ui/primitives/selectable-card.tsx (1)
SelectableCard(22-88)archon-ui-main/src/features/ui/primitives/draggable-card.tsx (1)
DraggableCard(18-64)
archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx (7)
archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)archon-ui-main/src/features/ui/primitives/toggle-group.tsx (2)
ToggleGroup(14-30)ToggleGroupItem(37-61)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/grouped-card.tsx (1)
GroupedCard(24-74)archon-ui-main/src/features/ui/primitives/data-card.tsx (4)
DataCard(21-102)DataCardHeader(107-115)DataCardContent(120-128)DataCardFooter(133-148)archon-ui-main/src/features/ui/primitives/pill.tsx (1)
StatPill(68-100)
archon-ui-main/src/features/ui/primitives/switch.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassmorphism(12-119)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
glassCard(122-566)cn(605-607)
archon-ui-main/src/features/ui/primitives/select.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassmorphism(12-119)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test Results Summary
🔇 Additional comments (7)
archon-ui-main/src/contexts/SettingsContext.tsx (2)
32-61: LGTM! Parallel loading improves performance.The use of
Promise.allto fetch both feature flags concurrently is efficient, and the individual catch handlers ensure resilience if one fetch fails. The default values (projects enabled, style guide disabled) are appropriate for backward compatibility.
113-120: Context value correctly exposes the new feature flag.The new
styleGuideEnabledandsetStyleGuideEnabledare properly added to the context value, making the feature flag available to consuming components.archon-ui-main/src/features/ui/primitives/switch.tsx (3)
1-14: LGTM: Clean imports and type definitions.The imports, type exports, and interface structure follow best practices. The extension of Radix's
ComponentPropsWithoutRefcorrectly inheritsdefaultCheckedandonCheckedChangeprops.
16-78: LGTM: Focus ring fix applied correctly.The variant structure is comprehensive and well-organized. The explicit
focusRingclasses (lines 40, 47, 54, 61, 68, 75) properly fix the Tailwind v4 dynamic class generation issue mentioned in the previous review.
117-170: LGTM: Rendering implementation follows best practices.The component structure correctly uses Radix primitives with Tron-inspired glassmorphism styling. The transitions, gradients, and conditional icon rendering are well-implemented. The explicit focus ring class (line 125) is now Tailwind v4 compatible.
archon-ui-main/src/features/ui/primitives/tabs.tsx (2)
8-23: LGTM! Pill-styled navigation with proper glassmorphism.The TabsList refactor applies the Tron-inspired glassmorphism correctly with backdrop-blur, translucent backgrounds, borders, and rounded-full shape. The implementation is clean and follows the style guide updates.
56-65: LGTM once color and type issues are resolved.The TabsTrigger styling is well-implemented with pill-like appearance, proper transitions, and correct usage of both
activeClasses[color]andfocusRingClasses[color]. The component will work correctly once the green/emerald color inconsistency is fixed and type annotations are added.
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
archon-ui-main/src/contexts/SettingsContext.tsx (1)
67-106: Capture and restore the actual previous state on failureBoth setters optimistically flip state, but on error they revert with
setXState(!enabled). If the caller passed a value equal to the current state (e.g., idempotent toggle, stale UI, double click), the failure path flips the flag even though nothing changed, leaving the context in the wrong state. Grab the previous value before the optimistic update and restore that instead of blindly inverting.- const setProjectsEnabled = async (enabled: boolean) => { - try { - // Update local state immediately - setProjectsEnabledState(enabled); + const setProjectsEnabled = async (enabled: boolean) => { + const previous = projectsEnabled; + try { + // Update local state immediately + setProjectsEnabledState(enabled); @@ - } catch (error) { + } catch (error) { console.error('Failed to update projects setting:', error); // Revert on error - setProjectsEnabledState(!enabled); + setProjectsEnabledState(previous); throw error; } }; const setStyleGuideEnabled = async (enabled: boolean) => { + const previous = styleGuideEnabled; try { // Update local state immediately setStyleGuideEnabledState(enabled); @@ } catch (error) { console.error('Failed to update style guide setting:', error); // Revert on error - setStyleGuideEnabledState(!enabled); + setStyleGuideEnabledState(previous); throw error; } };
🧹 Nitpick comments (2)
archon-ui-main/src/features/ui/primitives/tabs.tsx (1)
32-51: Move color maps outside the component.Both
activeClassesandfocusRingClassesare recreated on every render. For better performance, move them outside the component body and add type assertions.Apply this diff:
+const activeClasses = { + blue: "data-[state=active]:bg-blue-500/20 dark:data-[state=active]:bg-blue-400/20 data-[state=active]:text-blue-700 dark:data-[state=active]:text-blue-300 data-[state=active]:border data-[state=active]:border-blue-400/50 data-[state=active]:shadow-[0_0_10px_rgba(59,130,246,0.5)]", + purple: + "data-[state=active]:bg-purple-500/20 dark:data-[state=active]:bg-purple-400/20 data-[state=active]:text-purple-700 dark:data-[state=active]:text-purple-300 data-[state=active]:border data-[state=active]:border-purple-400/50 data-[state=active]:shadow-[0_0_10px_rgba(168,85,247,0.5)]", + pink: "data-[state=active]:bg-pink-500/20 dark:data-[state=active]:bg-pink-400/20 data-[state=active]:text-pink-700 dark:data-[state=active]:text-pink-300 data-[state=active]:border data-[state=active]:border-pink-400/50 data-[state=active]:shadow-[0_0_10px_rgba(236,72,153,0.5)]", + orange: + "data-[state=active]:bg-orange-500/20 dark:data-[state=active]:bg-orange-400/20 data-[state=active]:text-orange-700 dark:data-[state=active]:text-orange-300 data-[state=active]:border data-[state=active]:border-orange-400/50 data-[state=active]:shadow-[0_0_10px_rgba(251,146,60,0.5)]", + cyan: "data-[state=active]:bg-cyan-500/20 dark:data-[state=active]:bg-cyan-400/20 data-[state=active]:text-cyan-700 dark:data-[state=active]:text-cyan-300 data-[state=active]:border data-[state=active]:border-cyan-400/50 data-[state=active]:shadow-[0_0_10px_rgba(34,211,238,0.5)]", + green: + "data-[state=active]:bg-green-500/20 dark:data-[state=active]:bg-green-400/20 data-[state=active]:text-green-700 dark:data-[state=active]:text-green-300 data-[state=active]:border data-[state=active]:border-green-400/50 data-[state=active]:shadow-[0_0_10px_rgba(16,185,129,0.5)]", +} satisfies Record<"blue" | "purple" | "pink" | "orange" | "cyan" | "green", string>; + +const focusRingClasses = { + blue: "focus-visible:ring-blue-500", + purple: "focus-visible:ring-purple-500", + pink: "focus-visible:ring-pink-500", + orange: "focus-visible:ring-orange-500", + cyan: "focus-visible:ring-cyan-500", + green: "focus-visible:ring-green-500", +} satisfies Record<"blue" | "purple" | "pink" | "orange" | "cyan" | "green", string>; + export const TabsTrigger = React.forwardRef< React.ElementRef<typeof TabsPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & { color?: "blue" | "purple" | "pink" | "orange" | "cyan" | "green"; } >(({ className, color = "blue", ...props }, ref) => { - const activeClasses = { - blue: "data-[state=active]:bg-blue-500/20 dark:data-[state=active]:bg-blue-400/20 data-[state=active]:text-blue-700 dark:data-[state=active]:text-blue-300 data-[state=active]:border data-[state=active]:border-blue-400/50 data-[state=active]:shadow-[0_0_10px_rgba(59,130,246,0.5)]", - purple: - "data-[state=active]:bg-purple-500/20 dark:data-[state=active]:bg-purple-400/20 data-[state=active]:text-purple-700 dark:data-[state=active]:text-purple-300 data-[state=active]:border data-[state=active]:border-purple-400/50 data-[state=active]:shadow-[0_0_10px_rgba(168,85,247,0.5)]", - pink: "data-[state=active]:bg-pink-500/20 dark:data-[state=active]:bg-pink-400/20 data-[state=active]:text-pink-700 dark:data-[state=active]:text-pink-300 data-[state=active]:border data-[state=active]:border-pink-400/50 data-[state=active]:shadow-[0_0_10px_rgba(236,72,153,0.5)]", - orange: - "data-[state=active]:bg-orange-500/20 dark:data-[state=active]:bg-orange-400/20 data-[state=active]:text-orange-700 dark:data-[state=active]:text-orange-300 data-[state=active]:border data-[state=active]:border-orange-400/50 data-[state=active]:shadow-[0_0_10px_rgba(251,146,60,0.5)]", - cyan: "data-[state=active]:bg-cyan-500/20 dark:data-[state=active]:bg-cyan-400/20 data-[state=active]:text-cyan-700 dark:data-[state=active]:text-cyan-300 data-[state=active]:border data-[state=active]:border-cyan-400/50 data-[state=active]:shadow-[0_0_10px_rgba(34,211,238,0.5)]", - green: - "data-[state=active]:bg-green-500/20 dark:data-[state=active]:bg-green-400/20 data-[state=active]:text-green-700 dark:data-[state=active]:text-green-300 data-[state=active]:border data-[state=active]:border-green-400/50 data-[state=active]:shadow-[0_0_10px_rgba(16,185,129,0.5)]", - }; - - const focusRingClasses = { - blue: "focus-visible:ring-blue-500", - purple: "focus-visible:ring-purple-500", - pink: "focus-visible:ring-pink-500", - orange: "focus-visible:ring-orange-500", - cyan: "focus-visible:ring-cyan-500", - green: "focus-visible:ring-emerald-500", - }; - return (PRPs/ai_docs/UI_STANDARDS.md (1)
450-493: Optional: Consider using markdown headings for better document structure.The static analysis tool flags several instances where bold text is used for section headers instead of proper markdown headings (lines 450, 458, 463, 471, 484). While the current formatting is readable, using proper markdown headings (e.g.,
#### Horizontal Scrollinstead of**Horizontal Scroll**) would improve document structure and navigation in markdown editors.This is purely a documentation style preference and doesn't affect functionality.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
.claude/commands/archon/archon-ui-consistency-review.md(1 hunks)PRPs/ai_docs/UI_STANDARDS.md(1 hunks)archon-ui-main/src/contexts/SettingsContext.tsx(3 hunks)archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx(1 hunks)archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/checkbox.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/data-card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/pill-navigation.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/select.tsx(2 hunks)archon-ui-main/src/features/ui/primitives/selectable-card.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/switch.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/tabs.tsx(2 hunks)ui-consistency-review-style-guide.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- archon-ui-main/src/features/ui/primitives/switch.tsx
- archon-ui-main/src/features/ui/primitives/data-card.tsx
- archon-ui-main/src/features/ui/primitives/checkbox.tsx
- archon-ui-main/src/features/ui/primitives/selectable-card.tsx
- archon-ui-main/src/features/style-guide/showcases/StaticForms.tsx
🧰 Additional context used
📓 Path-based instructions (4)
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
archon-ui-main/src/features/**/*.{ts,tsx}: Use TanStack Query for all data fetching (no prop drilling); use smart HTTP polling (no WebSockets)
Biome formatting in features: 120-character line length, double quotes, and trailing commas
Apply Tron-inspired glassmorphism styling with Tailwind for feature UIUse Biome in features: 120 character line length, double quotes, and trailing commas
Files:
archon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/ui/primitives/select.tsxarchon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsx
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Disallow implicit any in TypeScript
archon-ui-main/src/**/*.{ts,tsx}: Frontend TypeScript must use strict mode with no implicit any
Use TanStack Query for all data fetching; avoid prop drilling
Use database values directly in the frontend; avoid mapping layers between BE and FE types
Files:
archon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/ui/primitives/select.tsxarchon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsxarchon-ui-main/src/contexts/SettingsContext.tsx
archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Radix UI primitives from the primitives library when building feature components
Use Radix UI primitives from src/features/ui/primitives when creating UI components
Files:
archon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/ui/primitives/select.tsxarchon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/card.tsx
archon-ui-main/src/**/*.{ts,tsx,py}
📄 CodeRabbit inference engine (CLAUDE.md)
In code comments, avoid meta terms like SIMPLIFIED, ENHANCED, LEGACY, CHANGED, REMOVED; comment only on functionality and reasoning (do not mention beta/global rules)
Files:
archon-ui-main/src/features/ui/primitives/pill-navigation.tsxarchon-ui-main/src/features/ui/primitives/select.tsxarchon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/card.tsxarchon-ui-main/src/features/style-guide/showcases/StaticCards.tsxarchon-ui-main/src/contexts/SettingsContext.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/**/*.{ts,tsx} : Apply Tron-inspired glassmorphism styling with Tailwind for feature UI
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/**/*.{tsx} : Apply Tron-inspired glassmorphism styling with Tailwind in feature UI components
📚 Learning: 2025-09-19T10:31:54.292Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-19T10:31:54.292Z
Learning: Applies to archon-ui-main/src/features/**/*.{ts,tsx} : Apply Tron-inspired glassmorphism styling with Tailwind for feature UI
Applied to files:
archon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/card.tsx
📚 Learning: 2025-09-19T10:32:55.580Z
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/**/*.{tsx} : Apply Tron-inspired glassmorphism styling with Tailwind in feature UI components
Applied to files:
archon-ui-main/src/features/ui/primitives/tabs.tsxarchon-ui-main/src/features/ui/primitives/card.tsx
🧬 Code graph analysis (7)
archon-ui-main/src/features/ui/primitives/pill-navigation.tsx (2)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/select.tsx (5)
Select(9-9)SelectTrigger(55-88)SelectValue(10-10)SelectContent(101-149)SelectItem(153-193)
archon-ui-main/src/features/ui/primitives/select.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassmorphism(12-119)
archon-ui-main/src/features/ui/primitives/tabs.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)
archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx (8)
archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)archon-ui-main/src/features/ui/primitives/toggle-group.tsx (2)
ToggleGroup(14-30)ToggleGroupItem(37-61)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx (1)
KnowledgeCard(36-349)archon-ui-main/src/features/ui/primitives/grouped-card.tsx (1)
GroupedCard(24-74)archon-ui-main/src/features/ui/primitives/data-card.tsx (4)
DataCard(21-102)DataCardHeader(107-115)DataCardContent(120-128)DataCardFooter(133-148)archon-ui-main/src/features/ui/primitives/pill.tsx (1)
StatPill(68-100)
archon-ui-main/src/features/ui/primitives/card.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
glassCard(122-566)cn(605-607)
archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx (4)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/card.tsx (1)
Card(23-160)archon-ui-main/src/features/ui/primitives/selectable-card.tsx (1)
SelectableCard(22-88)archon-ui-main/src/features/ui/primitives/draggable-card.tsx (1)
DraggableCard(18-64)
archon-ui-main/src/contexts/SettingsContext.tsx (2)
archon-ui-main/src/services/serverHealthService.ts (1)
loadSettings(22-30)archon-ui-main/src/services/credentialsService.ts (1)
credentialsService(604-604)
🪛 markdownlint-cli2 (0.18.1)
PRPs/ai_docs/UI_STANDARDS.md
450-450: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
458-458: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
463-463: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
471-471: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
484-484: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
ui-consistency-review-style-guide.md
181-181: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
188-188: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
383-383: Unordered list indentation
Expected: 0; Actual: 3
(MD007, ul-indent)
384-384: Unordered list indentation
Expected: 0; Actual: 3
(MD007, ul-indent)
385-385: Unordered list indentation
Expected: 0; Actual: 3
(MD007, ul-indent)
389-389: Unordered list indentation
Expected: 0; Actual: 3
(MD007, ul-indent)
390-390: Unordered list indentation
Expected: 0; Actual: 3
(MD007, ul-indent)
🔇 Additional comments (8)
archon-ui-main/src/features/ui/primitives/tabs.tsx (1)
8-22: LGTM!The pill navigation styling with glassmorphism effects (backdrop blur, translucent background, border) aligns well with the Tron-inspired design system.
.claude/commands/archon/archon-ui-consistency-review.md (1)
1-59: LGTM! Well-structured workflow documentation.The UI consistency review workflow is comprehensive and clearly defined. It properly references UI_STANDARDS.md as the source of truth, includes all necessary automated scans, and specifies a detailed reporting format with actionable output.
ui-consistency-review-style-guide.md (1)
1-421: Comprehensive review report with accurate findings.This review report provides excellent documentation of the style-guide implementation. The identified issues (duplicate PillNavigation component and color naming inconsistency) are accurately described with clear remediation steps. The overall A- grade reflects the high quality of the implementation with minor maintenance concerns.
Note: The static analysis warnings about list indentation (lines 383-390) are minor markdown formatting issues that don't affect readability.
archon-ui-main/src/features/style-guide/showcases/StaticCards.tsx (1)
1-306: LGTM! Exemplary Tailwind v4 compliance and UI patterns.This file demonstrates perfect adherence to the UI standards:
- Static color classes: Lines 151-156 show the correct pattern for color variants—all properties are statically defined in a lookup object, ensuring Tailwind generates CSS at build time.
- Functional UI logic: Draggable cards (lines 197-214) properly manage state and reordering, and selectable cards have working selection handlers.
- Responsive design: Grid layout uses proper breakpoints (line 224, line 253).
- Primitive usage: Card, SelectableCard, and DraggableCard are used correctly with all props properly configured.
- No dynamic class construction: All color classes are resolved through static lookups.
This is a gold-standard reference implementation for the design system.
archon-ui-main/src/features/style-guide/layouts/KnowledgeLayoutExample.tsx (1)
1-310: LGTM! Functional layout with proper filtering and responsive design.This layout example demonstrates excellent UI patterns:
- Working filter logic: Lines 72-75 properly implement filtering with
useMemo, ensuring the typeFilter state affects rendered data (past issue was addressed).- Responsive design: Grid layout uses proper breakpoints (line 134), and table view has correct scroll handling (lines 141-142).
- Primitive usage: DataCard, GroupedCard, Input, ToggleGroup, and other primitives are used correctly.
- Text truncation: Dynamic content has proper truncation (lines 233, 235, 303).
- No dynamic classes: All color variants use static conditional classes.
The switchable view modes (grid/table) work correctly, and the GroupedCard showcase demonstrates progressive scaling effects.
archon-ui-main/src/features/ui/primitives/card.tsx (3)
44-69: Excellent use of static class lookups for glow variants.The glow implementation (lines 44-69) correctly uses static class lookups from
glassCard.innerGlowSizes,glassCard.outerGlowSizes, and their hover variants. This ensures Tailwind v4 can generate all necessary CSS at build time. The fallback toglowVariant.glowandglowVariant.hoverprovides good resilience.
72-93: Static color mappings comply with Tailwind v4.The
edgeColors(lines 72-80) andtintBackgrounds(lines 85-93) objects use static class strings for all color variants. This follows the Tailwind v4 requirement that all classes must be statically analyzable at build time.
104-121: Verify non-top edge rendering
Visual-testedgePosition="left","right", and"bottom"to confirm each edge’s line and glow appear in the correct location with the intended gradient direction.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
PRPs/ai_docs/UI_STANDARDS.md (2)
371-371: Fix duplicate section numbering.We already use “## 6. PRIMITIVES LIBRARY”; repeating “## 6. ACCESSIBILITY” breaks the document structure and any generated table of contents. Please bump this (and subsequent references) to “## 7” so the numbering stays monotonic.
709-751: Convert pseudo-headings into real headings.The quick-reference entries rely on bold text instead of heading syntax, which violates markdownlint rule MD036 and hurts navigation. Switch these to heading markers, e.g. replace
**Horizontal Scroll (Archon Standard)**with#### Horizontal Scroll (Archon Standard)(same for Responsive Grid, Flex + Scroll Container, Color Variants, Keyboard Support).archon-ui-main/src/features/ui/primitives/switch.tsx (1)
134-137: Consider stricter nullish coalescing for icon fallback.The icon fallback logic uses
||operators, which work for React nodes but could be more explicit with nullish coalescing (??) to only fallback onnull/undefinedrather than any falsy value.Apply this diff for stricter fallback logic:
- return actualChecked ? iconOn || icon : iconOff || icon; + return actualChecked ? iconOn ?? icon : iconOff ?? icon;archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx (1)
265-265: Consider marking decorative icons as aria-hidden.Several decorative icons could be marked with
aria-hidden="true"to improve screen reader experience:
- Line 265:
Listicon in the expand sidebar button (button already has text)- Line 582:
Pinicon in the full card pinned badge (badge has "PINNED" text)- Line 885:
Searchicon adjacent to the search input (input has its own label)Example for line 265:
- <List className="w-3 h-3 mr-1" /> + <List className="w-3 h-3 mr-1" aria-hidden="true" />Apply similar changes to the other decorative icons if desired.
Also applies to: 582-582, 885-885
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
PRPs/ai_docs/UI_STANDARDS.md(1 hunks)archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx(1 hunks)archon-ui-main/src/features/ui/primitives/switch.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
archon-ui-main/src/**/*.{ts,tsx}: Frontend TypeScript must use strict mode with no implicit any
Use TanStack Query for all data fetching; avoid prop drilling
Use database values directly in the frontend; avoid mapping layers between BE and FE types
archon-ui-main/src/**/*.{ts,tsx}: Never return null to indicate failure in TypeScript; surface errors explicitly (throw or Result-like)
Do not use WebSockets on the frontend; rely on TanStack Query with smart HTTP polling
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome in features: 120 character line length, double quotes, and trailing commas
archon-ui-main/src/features/**/*.{ts,tsx}: Use TanStack Query for all data fetching; avoid prop drilling
Biome is the formatter/linter for features: 120-char lines, double quotes, trailing commas
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/src/features/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (CLAUDE.md)
Apply Tron-inspired glassmorphism styling with Tailwind in features
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
TypeScript strict mode with noImplicitAny must be respected
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/src/features/**
📄 CodeRabbit inference engine (CLAUDE.md)
Maintain vertical slice architecture: features own their sub-features and organization
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Radix UI primitives from src/features/ui/primitives when creating UI components
Use Radix UI primitives from src/features/ui/primitives for new feature components
Files:
archon-ui-main/src/features/ui/primitives/switch.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-10-10T00:41:23.369Z
Learning: Applies to archon-ui-main/src/features/**/*.{ts,tsx,css} : Apply Tron-inspired glassmorphism styling with Tailwind in features
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/**/*.{tsx} : Apply Tron-inspired glassmorphism styling with Tailwind in feature UI components
📚 Learning: 2025-10-10T00:41:23.369Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-10-10T00:41:23.369Z
Learning: Applies to archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx} : Use Radix UI primitives from src/features/ui/primitives for new feature components
Applied to files:
archon-ui-main/src/features/ui/primitives/switch.tsx
📚 Learning: 2025-09-19T10:32:55.580Z
Learnt from: CR
PR: coleam00/Archon#0
File: AGENTS.md:0-0
Timestamp: 2025-09-19T10:32:55.580Z
Learning: Applies to archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx} : Use Radix UI primitives from src/features/ui/primitives when creating UI components
Applied to files:
archon-ui-main/src/features/ui/primitives/switch.tsx
🧬 Code graph analysis (2)
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx (8)
archon-ui-main/src/features/ui/primitives/pill-navigation.tsx (2)
PillNavigationItem(6-11)PillNavigation(27-164)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/selectable-card.tsx (1)
SelectableCard(22-88)archon-ui-main/src/features/ui/primitives/pill.tsx (1)
StatPill(68-100)archon-ui-main/src/features/ui/primitives/tooltip.tsx (4)
TooltipProvider(6-6)Tooltip(9-9)TooltipTrigger(12-12)TooltipContent(15-50)archon-ui-main/src/features/ui/primitives/draggable-card.tsx (1)
DraggableCard(18-64)archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)
archon-ui-main/src/features/ui/primitives/switch.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassmorphism(12-119)
🪛 markdownlint-cli2 (0.18.1)
PRPs/ai_docs/UI_STANDARDS.md
709-709: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
717-717: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
722-722: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
730-730: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
743-743: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Backend Tests (Python + pytest)
🔇 Additional comments (7)
archon-ui-main/src/features/ui/primitives/switch.tsx (6)
1-14: LGTM! Clean type definitions.The imports and type definitions are well-structured. The component correctly extends Radix UI's
SwitchPrimitives.Rootprops while adding size, color, and icon customization options.
16-78: LGTM! Well-structured variant system.The variant definitions are comprehensive and properly organized. The static focus ring classes (e.g.,
"focus-visible:ring-purple-500") ensure Tailwind v4 compatibility, and the glow effects align with the Tron-inspired glassmorphism aesthetic.Based on learnings
80-106: LGTM! Excellent documentation.The AI context comment provides comprehensive documentation of the component's behavior, glass properties, size variants, glow effects, and controlled/uncontrolled mode support. This is very helpful for both developers and AI agents.
112-132: LGTM! Correct controlled/uncontrolled state handling.The state management implementation properly supports both controlled and uncontrolled modes:
- Correctly detects controlled mode with
checked !== undefined- Maintains internal state for uncontrolled mode initialized from
defaultChecked- Derives
actualCheckedfrom the appropriate source- Updates internal state when uncontrolled and calls parent handler
This resolves the issues raised in previous review comments.
139-189: LGTM! Proper Radix integration with glassmorphism styling.The JSX implementation correctly:
- Passes
actualCheckedto<SwitchPrimitives.Root>(line 155)- Passes
handleCheckedChangeto handle state updates (line 156)- Uses static focus ring classes from
colorStyles.focusRing(line 147) for Tailwind v4 compatibility- Applies proper glassmorphism styling with backdrop blur, transparency, and glow effects
The component aligns well with the Tron-inspired aesthetic from the project learnings.
Based on learnings
193-195: LGTM! Clean exports.The component properly sets
displayNamefor better debugging experience and exports both the component and variants for flexible usage.archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx (1)
133-152: Previous accessibility issues have been successfully addressed.All the accessibility concerns from earlier reviews have been fixed:
- Layout toggle buttons now include
aria-labelandaria-pressedattributes- Board/table view toggles properly label their purpose and state
- Sidebar collapse/expand buttons communicate their action and state
- Project and task action buttons are wrapped in tooltips with appropriate
aria-labelandaria-hiddenon iconsExcellent work on improving the accessibility of these interactive elements!
Also applies to: 190-211, 230-239, 287-307, 589-636, 718-744
| * - Uncontrolled: Pass defaultChecked, component manages own state | ||
| */ | ||
| const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>( | ||
| ({ className, size = "md", color = "cyan", icon, iconOn, iconOff, checked, defaultChecked, onCheckedChange, ...props }, ref) => { |
There was a problem hiding this comment.
Line length exceeds Biome limit.
This line is approximately 145 characters, exceeding the 120-character limit specified in the coding guidelines for features.
As per coding guidelines
Apply this diff to break it into multiple lines:
- ({ className, size = "md", color = "cyan", icon, iconOn, iconOff, checked, defaultChecked, onCheckedChange, ...props }, ref) => {
+ (
+ { className, size = "md", color = "cyan", icon, iconOn, iconOff, checked, defaultChecked, onCheckedChange, ...props },
+ ref,
+ ) => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ({ className, size = "md", color = "cyan", icon, iconOn, iconOff, checked, defaultChecked, onCheckedChange, ...props }, ref) => { | |
| ( | |
| { className, size = "md", color = "cyan", icon, iconOn, iconOff, checked, defaultChecked, onCheckedChange, ...props }, | |
| ref, | |
| ) => { |
🤖 Prompt for AI Agents
In archon-ui-main/src/features/ui/primitives/switch.tsx around line 108, the
long function parameter list exceeds the 120-char line limit; split the
parameter list across multiple lines so each line stays under 120 chars — put
opening paren and first few props on the first line, then place remaining props
(size, color, icon, iconOn, iconOff, checked, defaultChecked, onCheckedChange,
...props) each on their own or grouped on subsequent indented lines, keeping the
default values and ref parameter intact and preserving trailing comma and
closing paren before the =>.
…Example.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…Example.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx (2)
646-772: Document or implement drag-and-drop functionality.The
DraggableCardprimitive is used without anonDrophandler (line 697), making the drag-and-drop purely visual. For a style guide example, this is acceptable, but consider either:
- Adding a comment explaining this is a visual-only demonstration
- Implementing basic task reordering with state updates
This helps users understand whether the primitive requires additional wiring or works out-of-the-box.
Example documentation:
// Kanban Board - NO BACKGROUNDS, wrapped in DndProvider +// Note: Drag-and-drop is visual-only in this example. In a real implementation, +// add an onDrop handler to DraggableCard to update task positions. const KanbanBoardView = () => {
1-939: Consider splitting into separate files for improved maintainability.This file contains the main layout component plus six sub-components across 939 lines. While co-location makes the example easier to understand, splitting into separate files would improve maintainability:
layouts/ ProjectsLayoutExample.tsx (main component) ProjectsLayoutExample/ SidebarProjectCard.tsx ProjectCardExample.tsx KanbanBoardView.tsx TaskCardExample.tsx TaskTableView.tsx EmbeddedDocumentBrowser.tsx mock-data.tsHowever, for a style guide example where demonstrating the full implementation is valuable, the current structure is acceptable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
archon-ui-main/src/**/*.{ts,tsx}: Frontend TypeScript must use strict mode with no implicit any
Use TanStack Query for all data fetching; avoid prop drilling
Use database values directly in the frontend; avoid mapping layers between BE and FE types
archon-ui-main/src/**/*.{ts,tsx}: Never return null to indicate failure in TypeScript; surface errors explicitly (throw or Result-like)
Do not use WebSockets on the frontend; rely on TanStack Query with smart HTTP polling
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome in features: 120 character line length, double quotes, and trailing commas
archon-ui-main/src/features/**/*.{ts,tsx}: Use TanStack Query for all data fetching; avoid prop drilling
Biome is the formatter/linter for features: 120-char lines, double quotes, trailing commas
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
archon-ui-main/src/features/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (CLAUDE.md)
Apply Tron-inspired glassmorphism styling with Tailwind in features
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
archon-ui-main/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
TypeScript strict mode with noImplicitAny must be respected
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
archon-ui-main/src/features/**
📄 CodeRabbit inference engine (CLAUDE.md)
Maintain vertical slice architecture: features own their sub-features and organization
Files:
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
🧠 Learnings (1)
📓 Common learnings
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-10-10T00:41:23.369Z
Learning: Applies to archon-ui-main/src/features/**/*.{ts,tsx,css} : Apply Tron-inspired glassmorphism styling with Tailwind in features
🧬 Code graph analysis (1)
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx (8)
archon-ui-main/src/features/ui/primitives/pill-navigation.tsx (2)
PillNavigationItem(6-11)PillNavigation(27-164)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/selectable-card.tsx (1)
SelectableCard(22-88)archon-ui-main/src/features/ui/primitives/pill.tsx (1)
StatPill(68-100)archon-ui-main/src/features/ui/primitives/tooltip.tsx (4)
TooltipProvider(6-6)Tooltip(9-9)TooltipTrigger(12-12)TooltipContent(15-50)archon-ui-main/src/features/ui/primitives/draggable-card.tsx (1)
DraggableCard(18-64)archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Backend Tests (Python + pytest)
🔇 Additional comments (2)
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx (2)
1-111: LGTM: Clean imports and well-structured mock data.The imports are well-organized, and the mock data uses proper const assertions for type safety. The data structure effectively demonstrates the UI primitives.
113-321: Well-structured layout component with comprehensive state management.The component handles multiple view states (layout mode, active tab, view mode) cleanly. The conditional rendering between horizontal and sidebar layouts is well-organized. Previous accessibility concerns have been properly addressed.
Feature/UI style guide
1 participant
Pull Request
Summary
Upgrade to Tailwind CSS v4 and implement comprehensive UI Style Guide feature with automated consistency review tooling. This PR establishes the design system foundation for Archon with Tron-inspired glassmorphism patterns, shared UI primitives, and developer documentation.
Changes Made
@theme inlinepattern and custom variant configuration/style-guide) showcasing all UI components, patterns, and layoutsUI_STANDARDS.md(963 lines) documenting Tailwind v4 patterns, responsive layouts, Radix usage, and component reusability/archon:archon-ui-consistency-reviewslash command for automated UI compliance scanningType of Change
Affected Services
Testing
Test Evidence
Checklist
Breaking Changes
None. This is a fully additive feature behind a feature flag.
Migration Steps: None required. Style guide is opt-in via Settings → Features → Style Guide toggle.
Additional Notes
Design System Impact
This PR establishes the foundation for consistent UI development across Archon:
styles.tsKey Files Added
PRPs/ai_docs/UI_STANDARDS.md- Complete design system documentation (963 lines).claude/commands/archon/archon-ui-consistency-review.md- Automated UI review command (269 lines)src/features/ui/primitives/pill-navigation.tsx- New shared navigation primitivesrc/features/style-guide/- Complete style guide feature (17 new files, 3,125 lines)Tailwind v4 Migration Notes
@custom-variant darkpattern required for dark mode functionalityhsl()wrapper)@theme inlinemaps CSS variables to Tailwind utilitiesPerformance Improvements
Style Guide Features
Component Showcases (8 sections):
Layout Patterns (4 examples):
Navigation Patterns:
Stats
Summary by CodeRabbit
New Features
Improvements
Documentation
Chores
Bug Fixes