feat(dashboard): redesign UI to match production design #2
Conversation
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
- Update ralph-migration.sh wave structure for phases 00-05 - Wave 1: Testing Foundation (Phase 00) - GATE - Wave 2: Foundation (Phase 01) - GATE - Wave 3: Dashboard + Skills (Phases 02, 03) - Parallel - Wave 4: Integration (Phase 04) - Sequential - Wave 5: Polish (Phase 05) - Sequential - Update ralph-phase.sh prompt for Mission Control context - Remove Next.js 16 + Sanity migration references Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add Vitest, Testing Library, jsdom, happy-dom, and Vite React plugin to establish the testing foundation for the monorepo. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Configure jsdom environment with globals enabled - Add path aliases for monorepo packages - Set up v8 coverage provider with 80/75/80/80 thresholds - Configure test file patterns and exclusions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Import @testing-library/jest-dom for DOM assertions - Configure automatic cleanup after each test - Mock ResizeObserver, IntersectionObserver, matchMedia for jsdom Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added test:watch, test:ui, test:coverage, test:unit, test:integration scripts. Changed test script from turbo test to vitest run. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create test-client.ts with createTestClient() and createTestAdminClient() - Add stub types.ts with Database interface for squads and agent_specs - Create index.ts to export client functions and types - Add ./test-client export to package.json Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create tests/fixtures/seed-test-data.ts with: - seedTestSquad() for creating test user, squad, and agents - cleanupTestData() for test teardown - generateTestEmail() helper for parallel test runs - Mark task 0.2.2 complete in PRD Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add @playwright/test ^1.58.1 to workspace root - Install browser binaries (Firefox, WebKit, Chromium) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add playwright.config.ts with multi-browser support (chromium, firefox, webkit, mobile) - Configure HTML/JSON reporters and trace/screenshot/video on failure - Set up webServer to auto-start dev server for tests - Create tests/e2e directory for E2E test files - Add playwright-report/ and test-results/ to .gitignore Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add 4 Playwright test scripts to root package.json: - test:e2e: run all E2E tests - test:e2e:ui: run tests with Playwright UI mode - test:e2e:debug: run tests with debug mode - test:visual: run tests tagged with @visual Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create tests/visual/README.md documenting Chrome MCP test process including: - Manual mode development workflow - Automated mode CI integration - Test scenarios for dashboard, panels, and UI states Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Install @anthropic-ai/sdk for AI testing - Create tests/ai/harness.ts with: - runAITest() for testing AI-powered features - runAITestSuite() for running multiple tests - Validation for tool calls and response content Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create tests/ai/onboarding-chat.test.ts with 4 test cases: - Extract squad name from user message - Suggest agents based on workflow description - Validate agent configuration - Guide user through squad creation process - Update tests/ai/harness.ts for jsdom compatibility: - Lazy initialization of Anthropic client - Add dangerouslyAllowBrowser flag for test environment - Add AI test scripts to package.json: - test:ai for dry-run (skips when no API key) - test:ai:live for live API testing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create tests/integration/api/setup.ts with external server pattern - Create tests/integration/api/heartbeat.test.ts with 4 test cases - Create vitest.integration.config.ts for integration-specific config - Update vitest.config.ts to exclude integration tests from default run - Update package.json test:integration script - Tests skip gracefully when server unavailable Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create .github/workflows/test.yml with 3 jobs: - unit-and-integration: Runs test:coverage, uploads to Codecov - e2e: Installs Playwright, builds app, runs E2E tests - ai-tests: Runs on main branch only with API key secret Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create atoms, molecules, organisms, templates, pages directories - Add .gitkeep files to track empty directories - Add barrel export file for atoms with documentation - Update PRD to mark task complete Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Applied initial_schema migration with 13 tables, 5 enums, triggers - Applied row_level_security migration with RLS on all tables - Created set_current_squad_id function for agent API context - Generated full TypeScript types from remote Supabase schema - Enabled real-time for 9 tables Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Confirmed all 13 tables have RLS enabled - Verified dashboard policies use auth.uid() matching owner_id - Verified set_current_squad_id RPC function exists for agent context - Confirmed 9 tables enabled for supabase_realtime - Verified agent API policies use app.current_squad_id pattern - Documented security advisor warnings for future fix Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create Sidebar component (organisms) with navigation and user section - Update root layout with sidebar and main content area structure - Install @ai-sdk/react and @ai-sdk/anthropic packages - Mark Next.js App Setup tasks as complete in PRD Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- heading: xl font-semibold for titles - body: base text for paragraphs - caption: xs muted for supporting text - label: sm font-medium for form labels Polymorphic `as` prop for semantic HTML elements. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…iants Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create useTasks hook with squadId parameter - Fetch tasks ordered by position for kanban board - Subscribe to realtime task changes (INSERT/UPDATE/DELETE) - Re-sort tasks on changes to maintain position order - Export TaskItem, TaskStatus, TaskPriority types - Full JSDoc with usage examples - React strict mode safe with refs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Created useActivities hook with real-time subscriptions - Supports pagination with loadMore for infinite scroll - Handles INSERT/UPDATE/DELETE events from Supabase Realtime - React strict mode safe with refs for clients - Exported types: Activity, ActivityType, UseActivitiesOptions, UseActivitiesResult Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…dates Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add hook that prevents loading indicator flicker by: - Delaying loader display by 200ms (configurable) - Keeping loader visible for minimum 400ms once shown (configurable) Includes manual controls (startLoading/stopLoading/reset) and supports both external isLoading prop and internal state management. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Hook was already implemented as part of task 2.3 (commit 0b3694f). Verified 24 tests pass for URL state persistence functionality. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create dashboard error boundary at /dashboard/error.tsx - Create onboarding error boundary at /onboarding/error.tsx - Both include CircleAlert icon, user-friendly message, Try Again button - Uses design system atoms: Button, Icon, Text - Includes data-testid attributes for testing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create reusable ErrorBoundary molecule component with customizable title, message, and componentName props - Create KanbanBoardWithErrorBoundary wrapper component - Export both components from their respective barrel files - ErrorBoundary matches route-level error UI style with recovery button Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add detailed Agent page: fetch and display agent metadata, status, squad, activities, and messages - Replace `AgentSidebar` with `AgentSidebarWithPanel` for enhanced sidebar functionality - Refactor squad agents list with links to Agent pages - Restructure dashboard layout, removing redundant Sidebar component
- Create AgentSidebarWithErrorBoundary component - Wrap AgentSidebar in reusable ErrorBoundary molecule - Follow established pattern from KanbanBoardWithErrorBoundary - Export from AgentSidebar and organisms barrel files Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Audit all error states across the codebase: - Route-level error boundaries with "Try Again" buttons - Reusable ErrorBoundary molecule with "Try Again" button - TaskCardContainer with "Retry" button - Form validation errors correctable by user input Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…pdates - Introduce URL-driven task modal functionality in `TasksClient`, auto-opening specific tasks via query parameters - Add navigational menu in Header with icon-based links to dashboard sections (Dashboard, Squads, Agents, Tasks) and "Create Squad" button - Implement `AgentSidebarWithPanel` for agent selection, detail viewing, and activity/message fetching - Create robust, accessible navigation and improved agent interaction experiences
Create comprehensive test suite for SquadChat onboarding component with 35 tests covering rendering, accessibility, message sending, keyboard interaction, AI responses, disabled states, imperative handle (ref), squad update callbacks, useChat configuration, styling, message parts handling, and avatar display. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create comprehensive test suite for SquadPreview component - 45 tests covering rendering, config updates, keyboard navigation, accessibility, imperative handle, styling, and edge cases - Verify PRD requirements: renders agent cards, updates on config changes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 36 comprehensive tests covering rendering, edit mode, validation, keyboard navigation, delete functionality, and edge cases - Tests verify PRD requirements: renders name/role, allows editing, validates required fields, is keyboard navigable - Follows established testing patterns from SquadChat and SquadPreview tests Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…feed with tests - Enhance `DashboardLayout` with collapsible sidebar and activity feed functionality - Persist collapse states in `localStorage` and restore on load - Add accessible toggle buttons with animated transitions - Comprehensive test suite covering rendering, toggling, `localStorage` state persistence, and restoration
…with tests - Add `notifications.ts` offering @mention parsing, notification creation, retry logic, and delivery tracking - Introduce `security` utilities for sanitization to prevent XSS vulnerabilities - Implement comprehensive test suites for notifications and `sanitizeHtml` methods, ensuring functionality and security compliance - Configure Qodana for static analysis with `qodana.yaml`
…ve tests - Introduce `queries.ts` for optimized Supabase eager loading queries to prevent N+1 patterns - Implement `CircuitBreaker` utility for reliable external API handling with state transitions and error management - Add `CircuitBreaker` test suite covering 479 cases like state changes, failure thresholds, cooldowns, and recovery handling - Comprehensive documentation and examples provided for both utilities
…ty type error - Add daily standup cron endpoint with Telegram integration - Add vercel.json cron configuration (11 PM UTC daily) - Fix ActivityMetadata type to satisfy Supabase Json constraint - 21 tests for daily standup covering auth, formatting, Telegram, errors Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add `openclaw.json` for OpenClaw agent configurations and heartbeat optimization - Update `SKILL.md` to address discrepancies with actual API behavior (task status enum, response shapes, pagination removal) - Refactor rate limit table for consistency with runtime implementation - Add placeholders for integration test setup, including Docker Compose and orchestrator components - Lay groundwork for comprehensive
Complete integration test infrastructure for validating the full agent lifecycle against a Docker Compose environment (Supabase + Next.js). - Test orchestrator with squad bootstrap, heartbeat simulation, and task assignment helpers - Typed API client covering all 17+ Mission Control endpoints with retry logic and multi-agent support via withAgent() - Polling helpers (waitForHealth, waitForAgentOnline, waitForTaskStatus) - 12-step lifecycle test: agents online → task CRUD → assignment → status updates → comments → @mentions → notifications → squad chat - 7 focused scenario suites: squad lifecycle, task flow, collaboration, SOUL.md sync, squad chat, error handling, AI work (gated) - CI workflow with Docker Compose, health polling, and nightly schedule - npm scripts for integration test lifecycle management Co-Authored-By: Claude <noreply@anthropic.com>
Fix 224 test failures caused by test-implementation drift from
earlier phases. Tests were written for APIs that subsequently evolved.
Hook tests: fix mock paths (client→browser), add realtime mocks,
match actual hook signatures and Supabase query patterns.
Realtime test: complete rewrite to test actual RealtimeClient API
instead of non-existent exports (subscribeToTable, MessageDeduplicator).
Component tests: update props, DOM queries, and assertions to match
current component implementations.
TaskForm: replace user.type('a'.repeat(2001)) with fireEvent.change
to fix flaky timeout under full suite load.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ware The anon Supabase client + set_current_squad_id RPC pattern broke because PostgREST runs each request in a separate transaction, losing the transaction-local config set by the RPC call. This caused all agent-authenticated routes to return 404. Switch to service role client for agent/spec lookups since the API key verification is already the security boundary. Also fixes test mismatches: invalid priority 'medium', wrong ChatMessage field names (from_agent/message vs author/content), and incorrect soul_md_sync expectation for new agents. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
… agent bootstrap scripts - Replace `openclaw.json` with `kong.yml` and a modularized configuration directory - Add robust agent bootstrap, setup, and entrypoint scripts - Update Supabase URL env fallback handling (`SUPABASE_URL`) - Enhance Docker Compose with new services, test healthchecks, and defaults - Refactor `supabase-db`, `mission-control`, and `openclaw-gateway` ports and dependencies
Radix UI requires DialogTitle as a descendant of DialogContent at mount time. Previously it was inside conditional branches and could be missed during validation. Now rendered as sr-only direct child of Content. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…upabase setup - Replace static `ENV` vars with build-time `ARG`s in `apps/web/Dockerfile` to support flexible runtime overrides. - Add detailed integration documentation for OpenClaw, Supabase, and Kong configuration, troubleshooting, and testing. - Introduce preflight validation script to detect common misconfigurations. - Update OpenClaw default config to enable cost-effective testing with Anthropic Haiku. - Refine port mappings, health checks, and modular service dependencies in `docker-compose.integration.yml`. - Ensure runtime handling of `NEXT_PUBLIC_SUPABASE_URL` and fallback patterns in client-side code.
…iguration - Replace single shared HEARTBEAT.md with agent-specific versions for Lead, Writer, and Social roles. - Update agent bootstrap scripts to copy distinct heartbeat instructions per workspace. - Rev
- Overhaul header, sidebar, kanban, live feed, agent profile, and task detail components to match production screenshot designs - Fix Supabase client auth: switch imports from @/lib/supabase/client to @/lib/supabase/browser (custom storageKey mismatch caused silent RLS failures returning empty results) - Add 20+ new molecule components: AgentFilterChips, AgentListItem, AgentStatusBox, AllAgentsRow, AssigneeDisplay, AttentionList, ConnectionStatus, DeliverableView, FeedEntry, FeedTypeTabs, FilterIndicator, MarkdownViewer, SquadBadge, StatusFilterBar, StatusFilterPill, StatusToggle, SystemMessage, TaskCardCompact - Add TaskDetailInlinePanel for non-modal task detail view - Add auto-select for single deliverables (skip intermediate list) - Add useAgentAttention hook for agent attention tracking - Add formatRelativeTime utility with tests - Add dashboard_ui_columns migration - Document storageKey mismatch solution in docs/solutions/ - Update tests for Header, AgentSidebar, LiveFeed, KanbanColumn, TaskCard, AgentProfilePanel, TaskDetailInlinePanel Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Danm72
force-pushed
the
feat/match-production-ui
branch
from
5e4ffcc to
8e5eef4
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
storageKeymismatch between@/lib/supabase/clientand@/lib/supabase/browserdashboard_ui_columnsmigration for new DB columnsdocs/solutions/Key bug fix
The
tasks-client.tsx,AgentSidebarWithPanel.tsx, anduseAgentAttention.tsfiles importedcreateClientfrom@/lib/supabase/clientwhich lacks the customstorageKey: 'sb-mission-control-auth-token'. The middleware and server client use this custom key, so client-side Supabase queries ran unauthenticated — RLS returned empty arrays (not errors), making the bug silent.Fix: Changed all 3 imports to
@/lib/supabase/browserwhich has the correctstorageKey.Test plan
pnpm test)🤖 Generated with Claude Code