Implements the SpeechSettings component with four sections:
- STT settings (enable/disable, language preference)
- TTS settings (enable/disable, voice selector, tier preference, auto-play, speed control)
- Voice preview with test button
- Provider status with health indicators
Also adds Slider UI component and getHealthStatus API client function.
30 unit tests covering all sections, toggles, voice loading, and PDA-friendly design.
Fixes#404
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implements AudioPlayer inline component with play/pause, progress bar,
speed control (0.5x-2x), download, and duration display. Adds
TextToSpeechButton "Read aloud" component that synthesizes text via
the speech API and integrates AudioPlayer for playback. Includes
useTextToSpeech hook with API integration, audio caching, and
playback state management. All 32 tests passing.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix Tooltip formatter/labelFormatter type overload conflicts
- Fix Pie label render props type mismatch
- Fix telemetry.ts date split array access type
Refs #375
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Install recharts for data visualization
- Add Usage nav item to sidebar navigation
- Create telemetry API service with data fetching functions
- Build dashboard page with summary cards, charts, and time range selector
- Token usage line chart, cost breakdown bar chart, task outcome pie chart
- Loading and empty states handled
- Responsive layout with PDA-friendly design
- Add unit tests (14 tests passing)
Refs #375
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace exported const mockConnections with getMockConnections() function
that returns mock data only when NODE_ENV === "development". In production
and test environments, returns an empty array as defense-in-depth alongside
the existing ComingSoon page gate (SEC-WEB-4).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
SEC-WEB-32: Added maxLength to form inputs (names: 100, descriptions: 500,
emails: 254) in WorkspaceSettings, TeamSettings, InviteMember components.
SEC-WEB-34: Added AbortController timeout (30s default, configurable) to
apiRequest and apiPostFormData in API client.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create centralized config module (apps/web/src/lib/config.ts) exporting:
- API_BASE_URL: Main API server URL from NEXT_PUBLIC_API_URL
- ORCHESTRATOR_URL: Orchestrator service URL from NEXT_PUBLIC_ORCHESTRATOR_URL
- Helper functions for building full URLs
- Update client.ts to import from central config
- Update LoginButton.tsx to use API_BASE_URL from config
- Update useWebSocket.ts to use API_BASE_URL from config
- Update AgentStatusWidget.tsx to use ORCHESTRATOR_URL from config
- Update TaskProgressWidget.tsx to use ORCHESTRATOR_URL from config
- Update useGraphData.ts to use API_BASE_URL from config
- Fixed wrong default port (was 8000, now uses correct 3001)
- Add comprehensive tests for config module
- Update useWebSocket tests to properly mock config module
Refs #338
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace raw fetch() with apiPost/apiPatch/apiDelete in:
- ImportExportActions.tsx: POST for file imports
- KanbanBoard.tsx: PATCH for task status updates
- ActiveProjectsWidget.tsx: POST for widget data fetches
- useLayouts.ts: POST/PATCH/DELETE for layout management
- Add apiPostFormData() method to API client for FormData uploads
- Ensures CSRF token is included in all state-changing requests
- Update tests to mock CSRF token fetch for API client usage
Refs #338
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Closes three CSRF security gaps identified in code review:
1. Added X-CSRF-Token and X-Workspace-Id to CORS allowed headers
- Updated apps/api/src/main.ts to accept CSRF token headers
2. Integrated CSRF token handling in web client
- Added fetchCsrfToken() to fetch token from API
- Store token in memory (not localStorage for security)
- Automatically include X-CSRF-Token in POST/PUT/PATCH/DELETE
- Implement automatic token refresh on 403 CSRF errors
- Added comprehensive test coverage for CSRF functionality
3. Applied CSRF Guard globally
- Added CsrfGuard as APP_GUARD in app.module.ts
- Verified @SkipCsrf() decorator works for exempted endpoints
All tests passing. CSRF protection now enforced application-wide.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replaced setTimeout hacks with proper polling mechanism:
- Added pollForQueryResponse() function with configurable polling interval
- Polls every 500ms with 30s timeout
- Properly handles DELIVERED and FAILED message states
- Throws errors for failures and timeouts
Updated dashboard to use polling instead of arbitrary delays:
- Removed setTimeout(resolve, 1000) hacks
- Added proper async/await for query responses
- Improved response data parsing for new query format
- Better error handling via polling exceptions
This fixes race conditions and unreliable data loading.
Fixes#298
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Update WorkspaceGuard to support query string as fallback (backward compatibility)
- Priority order: Header > Param > Body > Query
- Update web client to send workspace ID via X-Workspace-Id header (recommended)
- Extend apiRequest helpers to accept workspace ID option
- Update fetchTasks to use header instead of query parameter
- Add comprehensive tests for all workspace ID transmission methods
- Tests passing: API 11 tests, Web 6 new tests (total 494)
This ensures consistent workspace ID handling with proper multi-tenant isolation
while maintaining backward compatibility with existing query string approaches.
Fixes#194
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implements the final piece of M7-Federation - the spoke configuration UI
that allows administrators to configure their local instance's federation
capabilities and settings.
Backend Changes:
- Add UpdateInstanceDto with validation for name, capabilities, and metadata
- Implement FederationService.updateInstanceConfiguration() method
- Add PATCH /api/v1/federation/instance endpoint to FederationController
- Add audit logging for configuration updates
- Add tests for updateInstanceConfiguration (5 new tests, all passing)
Frontend Changes:
- Create SpokeConfigurationForm component with PDA-friendly design
- Create /federation/settings page with configuration management
- Add regenerate keypair functionality with confirmation dialog
- Extend federation API client with updateInstanceConfiguration and regenerateInstanceKeys
- Add comprehensive tests (10 tests, all passing)
Design Decisions:
- Admin-only access via AdminGuard
- Never expose private key in API responses (security)
- PDA-friendly language throughout (no demanding terms)
- Clear visual hierarchy with read-only and editable fields
- Truncated public key with copy button for usability
- Confirmation dialog for destructive key regeneration
All tests passing:
- Backend: 13/13 federation service tests passing
- Frontend: 10/10 SpokeConfigurationForm tests passing
- TypeScript compilation: passing
- Linting: passing
- PDA-friendliness: verified
This completes M7-Federation. All federation features are now implemented.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement unified dashboard to display tasks and events from multiple
federated Mosaic Stack instances with clear provenance indicators.
Backend Integration:
- Extended federation API client with query support (sendFederatedQuery)
- Added query message fetching functions
- Integrated with existing QUERY message type from Phase 3
Components Created:
- ProvenanceIndicator: Shows which instance data came from
- FederatedTaskCard: Task display with provenance
- FederatedEventCard: Event display with provenance
- AggregatedDataGrid: Unified grid for multiple data types
- Dashboard page at /federation/dashboard
Key Features:
- Query all ACTIVE federated connections on load
- Display aggregated tasks and events in unified view
- Clear provenance indicators (instance name badges)
- PDA-friendly language throughout (no demanding terms)
- Loading states and error handling
- Empty state when no connections available
Technical Implementation:
- Uses POST /api/v1/federation/query to send queries
- Queries each connection for tasks.list and events.list
- Aggregates responses with provenance metadata
- Handles connection failures gracefully
- 86 tests passing with >85% coverage
- TypeScript strict mode compliant
- ESLint compliant
PDA-Friendly Design:
- "Unable to reach" instead of "Connection failed"
- "No data available" instead of "No results"
- "Loading data from instances..." instead of "Fetching..."
- Calm color palette (soft blues, greens, grays)
- Status indicators: 🟢 Active, 📋 No data, ⚠️ Error
Files Added:
- apps/web/src/lib/api/federation-queries.ts
- apps/web/src/lib/api/federation-queries.test.ts
- apps/web/src/components/federation/types.ts
- apps/web/src/components/federation/ProvenanceIndicator.tsx
- apps/web/src/components/federation/ProvenanceIndicator.test.tsx
- apps/web/src/components/federation/FederatedTaskCard.tsx
- apps/web/src/components/federation/FederatedTaskCard.test.tsx
- apps/web/src/components/federation/FederatedEventCard.tsx
- apps/web/src/components/federation/FederatedEventCard.test.tsx
- apps/web/src/components/federation/AggregatedDataGrid.tsx
- apps/web/src/components/federation/AggregatedDataGrid.test.tsx
- apps/web/src/app/(authenticated)/federation/dashboard/page.tsx
- docs/scratchpads/92-aggregated-dashboard.md
Testing:
- 86 total tests passing
- Unit tests for all components
- Integration tests for API client
- PDA-friendly language verified
- TypeScript type checking passing
- ESLint passing
Ready for code review and QA testing.
Related Issues:
- Depends on #85 (FED-005: QUERY Message Type) - COMPLETED
- Depends on #91 (FED-008: Connection Manager UI) - COMPLETED
- Uses #90 (FED-007: EVENT Subscriptions) infrastructure
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented comprehensive UI for managing federation connections:
Features:
- View existing federation connections grouped by status
- Initiate new connections to remote instances
- Accept/reject pending connection requests
- Disconnect active connections
- Display connection status, metadata, and capabilities
- PDA-friendly design throughout (no demanding language)
Components:
- ConnectionCard: Display individual connections with actions
- ConnectionList: Grouped list view with status sections
- InitiateConnectionDialog: Modal for connecting to new instances
- Connections page: Main management interface
Implementation:
- Full test coverage (42 tests, 100% passing)
- TypeScript strict mode compliance
- ESLint passing with no warnings
- Mock data for development (ready for backend integration)
- Proper error handling and loading states
- PDA-friendly language (calm, supportive, stress-free)
Status indicators:
- 🟢 Active (soft green)
- 🔵 Pending (soft blue)
- ⏸️ Disconnected (soft yellow)
- ⚪ Rejected (light gray)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implements two key knowledge module features:
**#62 - Backlinks Display:**
- Added BacklinksList component to show entries that link to current entry
- Fetches backlinks from /api/knowledge/entries/:slug/backlinks
- Displays entry title, summary, and link context
- Clickable links to navigate to linking entries
- Loading, error, and empty states
**#64 - Wiki-Link Rendering:**
- Added WikiLinkRenderer component to parse and render wiki-links
- Supports [[slug]] and [[slug|display text]] syntax
- Converts wiki-links to clickable navigation links
- Distinct styling (blue color, dotted underline)
- XSS protection via HTML escaping
- Memoized HTML processing for performance
**Components:**
- BacklinksList.tsx - Backlinks display with empty/loading/error states
- WikiLinkRenderer.tsx - Wiki-link parser and renderer
- Updated EntryViewer.tsx to use WikiLinkRenderer
- Integrated BacklinksList into entry detail page
**API:**
- Added fetchBacklinks() function in knowledge.ts
- Added KnowledgeBacklink type to shared types
**Tests:**
- Comprehensive tests for BacklinksList (8 tests)
- Comprehensive tests for WikiLinkRenderer (14 tests)
- All tests passing with Vitest
**Type Safety:**
- Strict TypeScript compliance
- No 'any' types
- Proper error handling
- Fixed TypeScript exactOptionalPropertyTypes errors in chat components
- Removed console.error statements (errors are handled via state)
- Fixed type compatibility issues with undefined vs null values
- All chat-related files now pass strict TypeScript checks
- Added EntryVersion model with author relation
- Implemented automatic versioning on entry create/update
- Added API endpoints for version history:
- GET /api/knowledge/entries/:slug/versions - list versions
- GET /api/knowledge/entries/:slug/versions/:version - get specific
- POST /api/knowledge/entries/:slug/restore/:version - restore version
- Created VersionHistory.tsx component with timeline view
- Added History tab to entry detail page
- Supports version viewing and restoring
- Includes comprehensive tests for version operations
- All TypeScript types are explicit and type-safe
- Created API clients for LLM chat (/api/llm/chat) and Ideas (/api/ideas)
- Implemented useChat hook for conversation state management
- Connected Chat component to backend with full CRUD operations
- Integrated ConversationSidebar with conversation fetching
- Added automatic conversation persistence after each message
- Integrated WebSocket for connection status
- Used existing better-auth for authentication
- All TypeScript strict mode compliant (no any types)
Deliverables:
✅ Working chat interface at /chat route
✅ Conversations save to database via Ideas API
✅ Real-time WebSocket connection
✅ Clean TypeScript (no errors)
✅ Full conversation loading and persistence
See CHAT_INTEGRATION_SUMMARY.md for detailed documentation.
Issue #73 - Entry-Centered Graph View:
- Added GET /api/knowledge/entries/:id/graph endpoint with depth parameter
- Returns entry + connected nodes with link relationships
- Created GraphService for graph traversal using BFS
- Added EntryGraphViewer component for frontend
- Integrated graph view tab into entry detail page
Issue #74 - Graph Statistics Dashboard:
- Added GET /api/knowledge/stats endpoint
- Returns overview stats (entries, tags, links by status)
- Includes most connected entries, recent activity, tag distribution
- Created StatsDashboard component with visual stats
- Added route at /knowledge/stats
Backend:
- GraphService: BFS-based graph traversal with configurable depth
- StatsService: Parallel queries for comprehensive statistics
- GraphQueryDto: Validation for depth parameter (1-5)
- Entity types for graph nodes/edges and statistics
- Unit tests for both services
Frontend:
- EntryGraphViewer: Entry-centered graph visualization
- StatsDashboard: Statistics overview with charts
- Graph view tab on entry detail page
- API client functions for new endpoints
- TypeScript strict typing throughout
Implements Personality Module:
- Personality model and Prisma migration
- CRUD API with controller and service
- Comprehensive test suite
- Integration with workspace
- Add Personality model to Prisma schema with FormalityLevel enum
- Create migration and seed with 6 default personalities
- Implement CRUD API with TDD approach (97.67% coverage)
* PersonalitiesService: findAll, findOne, findDefault, create, update, remove
* PersonalitiesController: REST endpoints with auth guards
* Comprehensive test coverage (21 passing tests)
- Add Personality types to shared package
- Create frontend components:
* PersonalitySelector: dropdown for choosing personality
* PersonalityPreview: preview personality style and system prompt
* PersonalityForm: create/edit personalities with validation
* Settings page: manage personalities with CRUD operations
- Integrate with Ollama API:
* Support personalityId in chat endpoint
* Auto-inject system prompt from personality
* Fall back to default personality if not specified
- API client for frontend personality management
All tests passing with 97.67% backend coverage (exceeds 85% requirement)
- Fix updateData typing for partial updates
- Add slug field to CreateTagDto
- Build now passes
Note: tasks.controller.spec.ts needs test config update for WorkspaceGuard
- Create workspace listing page at /settings/workspaces
- List all user workspaces with role badges
- Create new workspace functionality
- Display member count per workspace
- Create workspace detail page at /settings/workspaces/[id]
- Workspace settings (name, ID, created date)
- Member management with role editing
- Invite member functionality
- Delete workspace (owner only)
- Add workspace components:
- WorkspaceCard: Display workspace info with role badge
- WorkspaceSettings: Edit workspace settings and delete
- MemberList: Display and manage workspace members
- InviteMember: Send invitations with role selection
- Add WorkspaceMemberWithUser type to shared package
- Follow existing app patterns for styling and structure
- Use mock data (ready for API integration)
