Complete frontend redesign plan: dark-first premium overhaul#3
Merged
Conversation
Replace the existing frontend rebuild plan with a comprehensive clean-slate redesign. Key decisions: - Remove HeroUI beta, adopt shadcn/ui pattern (Radix + Tailwind + cva) - Dark-first premium aesthetic (Linear/Vercel/Raycast inspired) - Deliberation view reimagined as social feed with agent post cards - Dramatic phase transitions as persistent feed dividers - Animated consensus reveal sequence - Recharts for energy visualization, Framer Motion for coordinated animations - Responsive: desktop-first with collapsible sidebar and toggleable panels - 8 implementation phases from foundation to polish Also updates README.md tech stack and project structure to reflect the modern frontend architecture. https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh
Delete-first rebuild of the entire frontend. Replaces HeroUI beta with shadcn/ui pattern (Radix primitives + class-variance-authority + Tailwind). Key changes: - New dark-first design system with CSS custom properties (app.css) - 17 shadcn/ui primitives (button, badge, card, dialog, tabs, etc.) - AppShell layout with collapsible sidebar and right panel - Social feed deliberation view with PostCard, phase transitions, energy gauge, agent stage, consensus reveal animations - Community pages with thread list, member panel, watcher management - Agent pool with search/filter and profile pages with calibration - Memory browser, notification center, and settings pages - All 4 dialog flows wired: create community, create thread, create watcher, report outcome - Vibrant agent color palette optimized for dark backgrounds - Responsive foundation (desktop-first, mobile-usable) Tech: Radix UI, class-variance-authority, Recharts, Sonner toasts, motion/react animations, TanStack Router + React Query preserved. https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh
Three issues fixed: - Tailwind v4 @theme variables were only in @layer theme (lowest cascade priority). Added explicit :root declarations outside any layer so dark colors always win. - All 66 instances of rounded-radius-* renamed to rounded-* to match Tailwind v4's @theme --radius-* convention (generates rounded-sm/md/lg, not rounded-radius-sm/md/lg). - Added inline dark styles to <html> and <body> in index.html for immediate dark rendering before CSS loads. - Switched Google Fonts from DM Sans/Outfit to Inter (matches design system). https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh
…Tailwind
The `* { margin: 0; padding: 0; }` in unlayered CSS was overriding
Tailwind v4's space-y-* and space-x-* utilities (which use :where()
selectors inside @layer utilities). Unlayered CSS always beats layered
CSS in the cascade, so the universal reset killed all space-* margins.
Tailwind v4's preflight in @layer base already includes the same reset,
and utilities properly override base layer rules.
https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh
The backend returns plain arrays from GET /api/subreddits and
GET /api/agents, but the frontend expected wrapped objects like
{ subreddits: [...] } and { agents: [...] }. This caused
data.subreddits to always be undefined, so communities never
appeared in the sidebar or home page.
Fixed api.ts type signatures to match actual backend responses
and updated all 4 consumers (AppSidebar, Home, Agents, Settings).
Also improved the 409 "already exists" error toast message.
https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh
Documents 6 issues found during testing: manual platform init requirement, community agent recruitment only selecting red team, agent detail page crash, thread history loading failure, watchers 503, and pluralization bug. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Issue 1 (High): Auto-initialize platform on startup instead of
requiring manual POST /api/platform/init. PlatformManager.initialize()
is now called during app creation.
Issue 2 (High): Fix community agent recruitment. When no
required_expertise is provided, auto-infer from primary_domain using
the registry's find_by_expertise(). Falls back to recruiting all
non-red-team agents if domain matching yields nothing.
Issue 3 (High): Fix agent detail page crash. Added null guard on
agent.phase_mandates before calling Object.keys() — the field can
be null/undefined when the API returns incomplete agent data.
Issue 4 (Medium): Fix deliberation thread view. Handle 404 from
/api/deliberations/{id}/history by showing "Deliberation Pending"
state instead of a generic error, since newly created threads
haven't started their session yet.
Issue 5 (Low): Watchers and notifications endpoints now return 200
with empty lists when registries aren't initialized, instead of 503.
Issue 6 (Low): Fix pluralization — "1 agents" → "1 agent" and
"1 threads" → "1 thread" on CommunityCard.
Pastel theme: Added .pastel class with warm cream backgrounds,
soft purple accents, and muted agent colors. Theme selector added
to Settings page with dark/light/pastel options, persisted via
zustand store.
https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh
The watchers/notifications endpoints now return empty lists instead of 503 when their backing stores are not initialized. Update the test assertion accordingly. https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh
Documents verification of 5/6 fixes from report 01, plus 6 new issues found including Expertise tab crash, missing deliberation launch mechanism, and agent detail display bugs. Also covers new theme switcher feature. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Issue 1 (High): Fix Expertise tab crash — evaluation_criteria was a Dict from backend but rendered with .map(); convert to string[] in API response and add Array.isArray guard in ExpertiseTagGrid. Issue 2 (Medium): Fix empty Persona + concatenated Knowledge Scope — backend wasn't returning persona_prompt or phase_mandates; knowledge_scope was List[str] rendered as plain text. Added missing fields to agent detail API; render knowledge_scope as a formatted bullet list. Issue 3 (Medium): Add Launch Deliberation button — thread pending state now shows a "Launch Deliberation" button that calls createAndStart to begin the agent discussion via WebSocket. Issue 4 (Low): Fix theme selection indicator — added checkmark badge and stronger ring/bg styling so the active theme is clearly visible on the Settings page across navigations. Issue 5 (Low): Handle non-existent community — show a proper "Community not found" page with a link back to Home instead of rendering a partial page with broken tabs. Issue 6 (Low): Fix thread title — fetch thread metadata from the community threads list so the actual title displays instead of "Loading..." https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replace the existing frontend rebuild plan with a comprehensive
clean-slate redesign. Key decisions:
Also updates README.md tech stack and project structure to reflect
the modern frontend architecture.
https://claude.ai/code/session_01HpB53eGx4cX8LTrqQbAKoh