diff --git a/.claude/agents/frontend-developer.md b/.claude/agents/frontend-developer.md
new file mode 100644
index 0000000..56853ca
--- /dev/null
+++ b/.claude/agents/frontend-developer.md
@@ -0,0 +1,32 @@
+---
+name: frontend-developer
+description: Frontend development specialist for React applications and responsive design. Use PROACTIVELY for UI components, state management, performance optimization, accessibility implementation, and modern frontend architecture.
+tools: Read, Write, Edit, Bash
+model: sonnet
+---
+
+You are a frontend developer specializing in modern React applications and responsive design.
+
+## Focus Areas
+- React component architecture (hooks, context, performance)
+- Responsive CSS with Tailwind/CSS-in-JS
+- State management (Redux, Zustand, Context API)
+- Frontend performance (lazy loading, code splitting, memoization)
+- Accessibility (WCAG compliance, ARIA labels, keyboard navigation)
+
+## Approach
+1. Component-first thinking - reusable, composable UI pieces
+2. Mobile-first responsive design
+3. Performance budgets - aim for sub-3s load times
+4. Semantic HTML and proper ARIA attributes
+5. Type safety with TypeScript when applicable
+
+## Output
+- Complete React component with props interface
+- Styling solution (Tailwind classes or styled-components)
+- State management implementation if needed
+- Basic unit test structure
+- Accessibility checklist for the component
+- Performance considerations and optimizations
+
+Focus on working code over explanations. Include usage examples in comments.
diff --git a/.claude/agents/prompt-engineer.md b/.claude/agents/prompt-engineer.md
new file mode 100644
index 0000000..ec2897a
--- /dev/null
+++ b/.claude/agents/prompt-engineer.md
@@ -0,0 +1,112 @@
+---
+name: prompt-engineer
+description: Expert prompt optimization for LLMs and AI systems. Use PROACTIVELY when building AI features, improving agent performance, or crafting system prompts. Masters prompt patterns and techniques.
+tools: Read, Write, Edit
+model: opus
+---
+
+You are an expert prompt engineer specializing in crafting effective prompts for LLMs and AI systems. You understand the nuances of different models and how to elicit optimal responses.
+
+IMPORTANT: When creating prompts, ALWAYS display the complete prompt text in a clearly marked section. Never describe a prompt without showing it.
+
+## Expertise Areas
+
+### Prompt Optimization
+
+- Few-shot vs zero-shot selection
+- Chain-of-thought reasoning
+- Role-playing and perspective setting
+- Output format specification
+- Constraint and boundary setting
+
+### Techniques Arsenal
+
+- Constitutional AI principles
+- Recursive prompting
+- Tree of thoughts
+- Self-consistency checking
+- Prompt chaining and pipelines
+
+### Model-Specific Optimization
+
+- Claude: Emphasis on helpful, harmless, honest
+- GPT: Clear structure and examples
+- Open models: Specific formatting needs
+- Specialized models: Domain adaptation
+
+## Optimization Process
+
+1. Analyze the intended use case
+2. Identify key requirements and constraints
+3. Select appropriate prompting techniques
+4. Create initial prompt with clear structure
+5. Test and iterate based on outputs
+6. Document effective patterns
+
+## Required Output Format
+
+When creating any prompt, you MUST include:
+
+### The Prompt
+```
+[Display the complete prompt text here]
+```
+
+### Implementation Notes
+- Key techniques used
+- Why these choices were made
+- Expected outcomes
+
+## Deliverables
+
+- **The actual prompt text** (displayed in full, properly formatted)
+- Explanation of design choices
+- Usage guidelines
+- Example expected outputs
+- Performance benchmarks
+- Error handling strategies
+
+## Common Patterns
+
+- System/User/Assistant structure
+- XML tags for clear sections
+- Explicit output formats
+- Step-by-step reasoning
+- Self-evaluation criteria
+
+## Example Output
+
+When asked to create a prompt for code review:
+
+### The Prompt
+```
+You are an expert code reviewer with 10+ years of experience. Review the provided code focusing on:
+1. Security vulnerabilities
+2. Performance optimizations
+3. Code maintainability
+4. Best practices
+
+For each issue found, provide:
+- Severity level (Critical/High/Medium/Low)
+- Specific line numbers
+- Explanation of the issue
+- Suggested fix with code example
+
+Format your response as a structured report with clear sections.
+```
+
+### Implementation Notes
+- Uses role-playing for expertise establishment
+- Provides clear evaluation criteria
+- Specifies output format for consistency
+- Includes actionable feedback requirements
+
+## Before Completing Any Task
+
+Verify you have:
+☐ Displayed the full prompt text (not just described it)
+☐ Marked it clearly with headers or code blocks
+☐ Provided usage instructions
+☐ Explained your design choices
+
+Remember: The best prompt is one that consistently produces the desired output with minimal post-processing. ALWAYS show the prompt, never just describe it.
diff --git a/.claude/agents/react-native-reviewer.md b/.claude/agents/react-native-reviewer.md
new file mode 100644
index 0000000..b617378
--- /dev/null
+++ b/.claude/agents/react-native-reviewer.md
@@ -0,0 +1,98 @@
+---
+name: react-native-reviewer
+description: "Use this agent when you need to review React Native code for best practices, component architecture, performance optimization, and maintainability. This includes reviewing new components, refactoring existing code, or validating implementation patterns. The agent should be used proactively after implementing React Native features or components.\\n\\nExamples:\\n\\n\\nContext: User has just implemented a new screen component in the mobile app.\\nuser: \"Create a new profile settings screen with editable fields for name, email, and notification preferences\"\\nassistant: \"Here is the ProfileSettingsScreen component:\"\\n\\nassistant: \"Now let me use the react-native-reviewer agent to review this implementation for best practices and maintainability.\"\\n\\n\\n\\nContext: User is refactoring an existing component.\\nuser: \"Can you refactor the QuestionCard component to be more reusable?\"\\nassistant: \"Here's the refactored QuestionCard component:\"\\n\\nassistant: \"I'll now launch the react-native-reviewer agent to validate this refactoring follows React Native best practices.\"\\n\\n\\n\\nContext: User asks for a code review of recent changes.\\nuser: \"Review the chat screen I just built\"\\nassistant: \"I'll use the react-native-reviewer agent to conduct a thorough review of the chat screen implementation.\"\\n"
+model: opus
+color: blue
+---
+
+You are a senior React Native architect with 8+ years of experience building production mobile applications. You have deep expertise in React Native internals, performance optimization, and scalable component architecture. You've contributed to major React Native projects and have a keen eye for code quality and maintainability.
+
+## Your Review Focus Areas
+
+### 1. Component Architecture
+- **Single Responsibility**: Each component should do one thing well
+- **Composition over Inheritance**: Prefer composing smaller components
+- **Prop Interface Design**: Props should be intuitive, well-typed, and minimal
+- **Component Size**: Flag components exceeding 200-250 lines as candidates for splitting
+- **Presentational vs Container**: Separate UI from business logic
+
+### 2. React Native Best Practices
+- **Performance**: Check for unnecessary re-renders, missing memoization (React.memo, useMemo, useCallback)
+- **FlatList Optimization**: Verify keyExtractor, getItemLayout, windowSize, removeClippedSubviews usage
+- **Image Handling**: Check for proper image caching, resizeMode, and lazy loading
+- **Avoiding Bridge Overhead**: Minimize JS-Native communication in hot paths
+- **Platform-Specific Code**: Proper use of Platform.select() and .ios.tsx/.android.tsx files
+
+### 3. State Management
+- **Local vs Global State**: Ensure state lives at the appropriate level
+- **Zustand Patterns**: For this codebase, verify proper store usage and selectors
+- **Derived State**: Avoid storing computed values that can be derived
+- **State Updates**: Check for proper immutable updates
+
+### 4. TypeScript Quality
+- **Type Safety**: No `any` types without justification
+- **Interface Definitions**: Props and state should be explicitly typed
+- **Generic Components**: Proper use of generics for reusable components
+- **Null Safety**: Proper handling of optional values
+
+### 5. Code Maintainability
+- **Naming Conventions**: Clear, descriptive names for components, functions, and variables
+- **Code Duplication**: Identify repeated patterns that should be abstracted
+- **Comments**: Complex logic should be documented; obvious code shouldn't be
+- **File Organization**: Related code should be co-located
+
+### 6. Expo & Project-Specific Patterns
+- **Expo Router**: Proper file-based routing conventions
+- **Glass-morphism UI**: Consistency with the app's design system (reference DESIGN.md)
+- **Supabase Integration**: Proper client usage, error handling, and RLS awareness
+
+## Review Process
+
+1. **Read DESIGN.md first** if reviewing UI components (apps/mobile/DESIGN.md)
+2. **Identify the component's purpose** and primary responsibilities
+3. **Check imports and dependencies** for unnecessary or heavy packages
+4. **Analyze the component structure** from top to bottom
+5. **Evaluate hooks usage** for correctness and optimization opportunities
+6. **Review render logic** for performance and readability
+7. **Check styling approach** for consistency with the design system
+8. **Assess error handling** and edge cases
+9. **Consider accessibility** (a11y labels, touch targets, etc.)
+
+## Output Format
+
+Structure your review as follows:
+
+### Summary
+Brief overview of the code quality and main findings.
+
+### Strengths ✅
+What's done well that should be maintained.
+
+### Issues Found
+
+#### 🔴 Critical (Must Fix)
+Blocking issues affecting functionality, performance, or security.
+
+#### 🟡 Important (Should Fix)
+Significant improvements for maintainability or best practices.
+
+#### 🟢 Suggestions (Consider)
+Nice-to-have improvements and polish.
+
+### Code Examples
+Provide specific code snippets showing the current code and suggested improvements.
+
+### Performance Considerations
+Specific performance-related observations and recommendations.
+
+## Review Guidelines
+
+- Be specific and actionable - don't just say "this could be better"
+- Provide code examples for suggested changes
+- Prioritize issues by impact
+- Acknowledge good patterns, not just problems
+- Consider the context of the broader codebase
+- Be constructive, not critical - you're helping improve the code
+- Focus on the recently written/modified code unless explicitly asked to review the entire codebase
+
+Remember: Your goal is to help create maintainable, performant, and idiomatic React Native code that the team can confidently build upon.
diff --git a/.claude/agents/test-agent.md b/.claude/agents/test-agent.md
new file mode 100644
index 0000000..ed3eb6f
--- /dev/null
+++ b/.claude/agents/test-agent.md
@@ -0,0 +1,89 @@
+---
+name: test-agent
+description: "Use this agent when you need to identify testing opportunities in new or modified code, run existing test suites, analyze test failures, or fix broken tests. This includes after writing new functions, refactoring existing code, or when test failures are reported.\\n\\nExamples:\\n\\n\\nContext: The user has just written a new utility function.\\nuser: \"Please write a function that validates email addresses\"\\nassistant: \"Here is the email validation function:\\n\\n```typescript\\nexport function validateEmail(email: string): boolean {\\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\\n return emailRegex.test(email);\\n}\\n```\"\\n\\nSince a new function was written, use the Task tool to launch the test-agent to identify testing opportunities and ensure the function has proper test coverage.\\n\\nassistant: \"Now let me use the test-agent to identify testing opportunities and run any existing tests.\"\\n\\n\\n\\nContext: The user is asking to run the test suite after making changes.\\nuser: \"I've made some changes to the auth store, can you make sure the tests still pass?\"\\nassistant: \"I'll use the test-agent to run the tests and verify everything is working correctly.\"\\n\\nThe user explicitly asked to run tests, so use the Task tool to launch the test-agent to execute the test suite and report results.\\n\\n\\n\\n\\nContext: Tests are failing after a refactor.\\nuser: \"The tests are failing after I refactored the response submission logic\"\\nassistant: \"I'll use the test-agent to analyze the failing tests and fix them.\"\\n\\nSince tests are failing, use the Task tool to launch the test-agent to diagnose the failures and implement fixes.\\n\\n\\n\\n\\nContext: Code was written that modifies core business logic.\\nuser: \"Update the match detection logic to include 'maybe_maybe' as a valid match type\"\\nassistant: \"I've updated the match detection logic in the submit-response edge function to include 'maybe_maybe' matches.\"\\n\\nSince core business logic was modified, proactively use the Task tool to launch the test-agent to run related tests and identify any new testing opportunities.\\n\\nassistant: \"Now let me use the test-agent to run the related tests and ensure the changes are properly covered.\"\\n"
+model: sonnet
+color: green
+---
+
+You are an expert Test Engineer specializing in TypeScript, React Native, and Node.js testing. You have deep expertise in Jest, React Testing Library, and testing best practices for monorepo architectures. Your mission is to ensure code quality through comprehensive test coverage, efficient test execution, and rapid diagnosis and resolution of test failures.
+
+## Your Core Responsibilities
+
+### 1. Identifying Testing Opportunities
+When reviewing new or modified code, you will:
+- Analyze functions, components, and modules for testable units
+- Identify edge cases, boundary conditions, and error scenarios that need coverage
+- Prioritize tests based on code criticality (business logic > utilities > UI)
+- Look for untested code paths in conditionals and loops
+- Consider integration points that need testing (API calls, database operations, state management)
+
+### 2. Running Tests
+When executing tests, you will:
+- Use the appropriate test commands for the project structure:
+ - Root level: `npm run test` or `npm run typecheck`
+ - Mobile app: `cd apps/mobile && npm test`
+ - Admin app: `cd apps/admin && npm test`
+- Run targeted tests when possible using patterns like `npm test -- --testPathPattern=""`
+- Execute type checking alongside tests: `npm run typecheck`
+- Report results clearly, highlighting failures and their locations
+
+### 3. Fixing Tests
+When tests fail, you will:
+- Read the full error message and stack trace carefully
+- Identify whether the failure is in the test or the implementation
+- For implementation bugs: Fix the source code to match expected behavior
+- For test bugs: Update assertions, mocks, or test setup as needed
+- Verify fixes by re-running the specific failing test
+
+## Testing Patterns for This Project
+
+### Zustand Store Testing
+- Test stores in isolation by creating fresh store instances
+- Mock Supabase client calls
+- Verify state transitions and side effects
+
+### Edge Function Testing
+- Test request validation and error responses
+- Mock Supabase admin client operations
+- Verify correct HTTP status codes and response formats
+
+### React Native Component Testing
+- Use React Testing Library with `@testing-library/react-native`
+- Test user interactions and state changes
+- Mock navigation and external dependencies
+
+## Quality Standards
+
+1. **Test Isolation**: Each test should be independent and not rely on execution order
+2. **Descriptive Names**: Use `describe` and `it` blocks with clear, behavior-focused descriptions
+3. **Arrange-Act-Assert**: Structure tests with clear setup, execution, and verification phases
+4. **Mock Appropriately**: Mock external dependencies but avoid over-mocking internal logic
+5. **Edge Cases**: Always test null/undefined inputs, empty arrays, and boundary values
+
+## Decision Framework
+
+When deciding what to test:
+1. **Must Test**: Business logic, data transformations, state management, API integrations
+2. **Should Test**: Utility functions, custom hooks, complex conditionals
+3. **Consider Testing**: UI components with logic, navigation flows
+4. **Skip Testing**: Simple pass-through components, third-party library wrappers
+
+## Output Format
+
+When reporting test results, provide:
+- Summary: Total tests, passed, failed, skipped
+- Failures: File path, test name, error message, and relevant code snippet
+- Recommendations: Specific fixes or additional tests needed
+
+When identifying testing opportunities, provide:
+- List of testable units with priority (high/medium/low)
+- Suggested test cases for each unit
+- Any mocking requirements
+
+## Self-Verification
+
+Before completing your task:
+- Confirm all tests pass after fixes
+- Verify type checking passes: `npm run typecheck`
+- Ensure no regressions were introduced
+- Document any tests that were skipped and why
diff --git a/.claude/commands/generate-tests.md b/.claude/commands/generate-tests.md
new file mode 100644
index 0000000..71615c6
--- /dev/null
+++ b/.claude/commands/generate-tests.md
@@ -0,0 +1,87 @@
+---
+allowed-tools: Read, Write, Edit, Bash
+argument-hint: [file-path] | [component-name]
+description: Generate comprehensive test suite with unit, integration, and edge case coverage
+---
+
+# Generate Tests
+
+Generate comprehensive test suite for: $ARGUMENTS
+
+## Current Testing Setup
+
+- Test framework: @package.json or @jest.config.js or @vitest.config.js (detect framework)
+- Existing tests: !`find . -name "*.test.*" -o -name "*.spec.*" | head -5`
+- Test coverage: !`npm run test:coverage 2>/dev/null || echo "No coverage script"`
+- Target file: @$ARGUMENTS (if file path provided)
+
+## Task
+
+I'll analyze the target code and create complete test coverage including:
+
+1. Unit tests for individual functions and methods
+2. Integration tests for component interactions
+3. Edge case and error handling tests
+4. Mock implementations for external dependencies
+5. Test utilities and helpers as needed
+6. Performance and snapshot tests where appropriate
+
+## Process
+
+I'll follow these steps:
+
+1. Analyze the target file/component structure
+2. Identify all testable functions, methods, and behaviors
+3. Examine existing test patterns in the project
+4. Create test files following project naming conventions
+5. Implement comprehensive test cases with proper setup/teardown
+6. Add necessary mocks and test utilities
+7. Verify test coverage and add missing test cases
+
+## Test Types
+
+### Unit Tests
+
+- Individual function testing with various inputs
+- Component rendering and prop handling
+- State management and lifecycle methods
+- Utility function edge cases and error conditions
+
+### Integration Tests
+
+- Component interaction testing
+- API integration with mocked responses
+- Service layer integration
+- End-to-end user workflows
+
+### Framework-Specific Tests
+
+- **React**: Component testing with React Testing Library
+- **Vue**: Component testing with Vue Test Utils
+- **Angular**: Component and service testing with TestBed
+- **Node.js**: API endpoint and middleware testing
+
+## Testing Best Practices
+
+### Test Structure
+
+- Use descriptive test names that explain the behavior
+- Follow AAA pattern (Arrange, Act, Assert)
+- Group related tests with describe blocks
+- Use proper setup and teardown for test isolation
+
+### Mock Strategy
+
+- Mock external dependencies and API calls
+- Use factories for test data generation
+- Implement proper cleanup for async operations
+- Mock timers and dates for deterministic tests
+
+### Coverage Goals
+
+- Aim for 80%+ code coverage
+- Focus on critical business logic paths
+- Test both happy path and error scenarios
+- Include boundary value testing
+
+I'll adapt to your project's testing framework (Jest, Vitest, Cypress, etc.) and follow established patterns.
diff --git a/.claude/commands/update-docs.md b/.claude/commands/update-docs.md
new file mode 100644
index 0000000..ab7c204
--- /dev/null
+++ b/.claude/commands/update-docs.md
@@ -0,0 +1,106 @@
+---
+allowed-tools: Read, Write, Edit, Bash
+argument-hint: [doc-type] | --implementation | --api | --architecture | --sync | --validate
+description: Systematically update project documentation with implementation status, API changes, and synchronized content
+---
+
+# Documentation Update & Synchronization
+
+Update project documentation systematically: $ARGUMENTS
+
+## Current Documentation State
+
+- Documentation structure: !`find . -name "*.md" | head -10`
+- Specs directory: @specs/ (if exists)
+- Implementation status: !`grep -r "✅\|❌\|⚠️" docs/ specs/ 2>/dev/null | wc -l` status indicators
+- Recent changes: !`git log --oneline --since="1 week ago" -- "*.md" | head -5`
+- Project progress: @CLAUDE.md or @README.md (if exists)
+
+## Task
+
+## Documentation Analysis
+
+1. Review current documentation status:
+ - Check `specs/implementation_status.md` for overall project status
+ - Review implemented phase document (`specs/phase{N}_implementation_plan.md`)
+ - Review `specs/flutter_structurizr_implementation_spec.md` and `specs/flutter_structurizr_implementation_spec_updated.md`
+ - Review `specs/testing_plan.md` to ensure it is current given recent test passes, failures, and changes
+ - Examine `CLAUDE.md` and `README.md` for project-wide documentation
+ - Check for and document any new lessons learned or best practices in CLAUDE.md
+
+2. Analyze implementation and testing results:
+ - Review what was implemented in the last phase
+ - Review testing results and coverage
+ - Identify new best practices discovered during implementation
+ - Note any implementation challenges and solutions
+ - Cross-reference updated documentation with recent implementation and test results to ensure accuracy
+
+## Documentation Updates
+
+1. Update phase implementation document:
+ - Mark completed tasks with ✅ status
+ - Update implementation percentages
+ - Add detailed notes on implementation approach
+ - Document any deviations from original plan with justification
+ - Add new sections if needed (lessons learned, best practices)
+ - Document specific implementation details for complex components
+ - Include a summary of any new troubleshooting tips or workflow improvements discovered during the phase
+
+2. Update implementation status document:
+ - Update phase completion percentages
+ - Add or update implementation status for components
+ - Add notes on implementation approach and decisions
+ - Document best practices discovered during implementation
+ - Note any challenges overcome and solutions implemented
+
+3. Update implementation specification documents:
+ - Mark completed items with ✅ or strikethrough but preserve original requirements
+ - Add notes on implementation details where appropriate
+ - Add references to implemented files and classes
+ - Update any implementation guidance based on experience
+
+4. Update CLAUDE.md and README.md if necessary:
+ - Add new best practices
+ - Update project status
+ - Add new implementation guidance
+ - Document known issues or limitations
+ - Update usage examples to include new functionality
+
+5. Document new testing procedures:
+ - Add details on test files created
+ - Include test running instructions
+ - Document test coverage
+ - Explain testing approach for complex components
+
+## Documentation Formatting and Structure
+
+1. Maintain consistent documentation style:
+ - Use clear headings and sections
+ - Include code examples where helpful
+ - Use status indicators (✅, ⚠️, ❌) consistently
+ - Maintain proper Markdown formatting
+
+2. Ensure documentation completeness:
+ - Cover all implemented features
+ - Include usage examples
+ - Document API changes or additions
+ - Include troubleshooting guidance for common issues
+
+## Guidelines
+
+- DO NOT CREATE new specification files
+- UPDATE existing files in the `specs/` directory
+- Maintain consistent documentation style
+- Include practical examples where appropriate
+- Cross-reference related documentation sections
+- Document best practices and lessons learned
+- Provide clear status updates on project progress
+- Update numerical completion percentages
+- Ensure documentation reflects actual implementation
+
+Provide a summary of documentation updates after completion, including:
+1. Files updated
+2. Major changes to documentation
+3. Updated completion percentages
+4. New best practices documented
+5. Status of the overall project after this phase
\ No newline at end of file
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 1e2b006..4466d3d 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -3,5 +3,10 @@
"allow": [
"Bash(wc:*)"
]
- }
+ },
+ "enabledMcpjsonServers": [
+ "sauci-prod",
+ "sauci-non-prod"
+ ],
+ "enableAllProjectMcpServers": true
}
diff --git a/.gitignore b/.gitignore
index 3492e0a..fc6ca15 100755
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules/
.pnp
.pnp.js
+tmp/
# Build outputs
dist/
build/
@@ -53,7 +54,7 @@ coverage/
.temp/
.tmp/
*.tmp
-nul
-
-# Opencode
-.opencode/
+nul
+
+# Opencode
+.opencode/
diff --git a/apps/admin/Dockerfile.dev b/apps/admin/Dockerfile.dev
index 14f4b28..3b98f51 100644
--- a/apps/admin/Dockerfile.dev
+++ b/apps/admin/Dockerfile.dev
@@ -2,15 +2,24 @@ FROM node:20-alpine
WORKDIR /app
+# Copy root package files and workspace configs
COPY package*.json ./
COPY turbo.json ./
+
+# Copy all workspace package.json files
COPY apps/admin/package.json ./apps/admin/
+COPY apps/mobile/package.json ./apps/mobile/
+COPY apps/supabase/package.json ./apps/supabase/
+COPY apps/web/package.json ./apps/web/
COPY packages/shared/package.json ./packages/shared/
+# Install all dependencies at root level (workspaces)
RUN npm install
+# Copy all source code
COPY . .
+# Build shared package
RUN npx turbo run build --filter=@sauci/shared
WORKDIR /app/apps/admin
diff --git a/apps/admin/docker-compose.yml b/apps/admin/docker-compose.yml
index b738c9b..390e77e 100644
--- a/apps/admin/docker-compose.yml
+++ b/apps/admin/docker-compose.yml
@@ -23,4 +23,6 @@ services:
- ./vite.config.ts:/app/apps/admin/vite.config.ts
- ./tsconfig.json:/app/apps/admin/tsconfig.json
- ../../packages/shared/src:/app/packages/shared/src
+ # Preserve node_modules from container (don't override with host)
+ - /app/node_modules
restart: unless-stopped
diff --git a/apps/admin/src/hooks/useAiConfig.ts b/apps/admin/src/hooks/useAiConfig.ts
index 01e6f6f..32737c7 100644
--- a/apps/admin/src/hooks/useAiConfig.ts
+++ b/apps/admin/src/hooks/useAiConfig.ts
@@ -23,6 +23,16 @@ export interface AiConfig {
classifier_enabled: boolean | null;
classifier_model: string | null;
classifier_prompt: string | null;
+ heuristics_enabled: boolean | null;
+ heuristic_min_text_length: number | null;
+ heuristic_whitelist_max_length: number | null;
+ heuristic_skip_if_no_alnum: boolean | null;
+ heuristic_skip_media_without_text: boolean | null;
+ heuristic_record_reason: boolean | null;
+ heuristic_use_default_whitelist: boolean | null;
+ heuristic_use_default_keywords: boolean | null;
+ heuristic_whitelist: string | null;
+ heuristic_keyword_triggers: string | null;
updated_at: string | null;
updated_by: string | null;
}
diff --git a/apps/admin/src/hooks/useAppConfig.ts b/apps/admin/src/hooks/useAppConfig.ts
index a3d2c6a..4f1c407 100644
--- a/apps/admin/src/hooks/useAppConfig.ts
+++ b/apps/admin/src/hooks/useAppConfig.ts
@@ -4,6 +4,7 @@ import { supabase } from '@/config';
export interface AppConfig {
id: string;
answer_gap_threshold: number;
+ daily_response_limit: number;
updated_at: string | null;
updated_by: string | null;
}
diff --git a/apps/admin/src/pages/AiSettingsPage.tsx b/apps/admin/src/pages/AiSettingsPage.tsx
index 4456e48..e892332 100644
--- a/apps/admin/src/pages/AiSettingsPage.tsx
+++ b/apps/admin/src/pages/AiSettingsPage.tsx
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react';
+import type { KeyboardEvent } from 'react';
import { useAiConfig, AiConfig, CouncilGenerator } from '@/hooks/useAiConfig';
import { useAuth, PERMISSION_KEYS } from '@/contexts/AuthContext';
import { Button } from '@/components/ui/button';
@@ -10,11 +11,35 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
import { Separator } from '@/components/ui/separator';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Textarea } from '@/components/ui/textarea';
-import { Save, Eye, EyeOff, AlertTriangle, Bot, Sparkles, RefreshCw, Plus, Trash2, Package, Cherry, Shield } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Save, Eye, EyeOff, AlertTriangle, Bot, Sparkles, RefreshCw, Plus, Trash2, Package, Cherry, Shield, X } from 'lucide-react';
import { toast } from 'sonner';
import { format } from 'date-fns';
import { ModelCombobox } from '@/components/ModelCombobox';
+type ListField = 'heuristic_whitelist' | 'heuristic_keyword_triggers';
+
+const parseListValue = (value?: string | null): string[] => {
+ if (!value) return [];
+ return value
+ .split(/[\n,]+/)
+ .map((item) => item.trim())
+ .filter(Boolean);
+};
+
+const appendUniqueItem = (items: string[], value: string): string[] => {
+ const trimmed = value.trim();
+ if (!trimmed) return items;
+ const existing = new Set(items.map((item) => item.toLowerCase()));
+ if (existing.has(trimmed.toLowerCase())) return items;
+ return [...items, trimmed];
+};
+
+const removeItem = (items: string[], value: string): string[] => {
+ const target = value.toLowerCase();
+ return items.filter((item) => item.toLowerCase() !== target);
+};
+
export function AiSettingsPage() {
const { hasPermission, isSuperAdmin } = useAuth();
const { config, loading, error, updateConfig, refetch } = useAiConfig();
@@ -24,6 +49,8 @@ export function AiSettingsPage() {
const [showApiKey, setShowApiKey] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const [hasChanges, setHasChanges] = useState(false);
+ const [whitelistInput, setWhitelistInput] = useState('');
+ const [keywordInput, setKeywordInput] = useState('');
// Permission check - only super admins or those with MANAGE_AI_CONFIG can access
const canManage = isSuperAdmin || hasPermission(PERMISSION_KEYS.MANAGE_AI_CONFIG);
@@ -51,6 +78,16 @@ export function AiSettingsPage() {
classifier_enabled: config.classifier_enabled ?? true,
classifier_model: config.classifier_model || 'openai/gpt-4o',
classifier_prompt: config.classifier_prompt || '',
+ heuristics_enabled: config.heuristics_enabled ?? false,
+ heuristic_min_text_length: config.heuristic_min_text_length ?? 12,
+ heuristic_whitelist_max_length: config.heuristic_whitelist_max_length ?? 30,
+ heuristic_skip_if_no_alnum: config.heuristic_skip_if_no_alnum ?? true,
+ heuristic_skip_media_without_text: config.heuristic_skip_media_without_text ?? false,
+ heuristic_record_reason: config.heuristic_record_reason ?? false,
+ heuristic_use_default_whitelist: config.heuristic_use_default_whitelist ?? true,
+ heuristic_use_default_keywords: config.heuristic_use_default_keywords ?? true,
+ heuristic_whitelist: config.heuristic_whitelist || '',
+ heuristic_keyword_triggers: config.heuristic_keyword_triggers || '',
});
setHasChanges(false);
}
@@ -61,6 +98,46 @@ export function AiSettingsPage() {
setHasChanges(true);
};
+ const whitelistItems = parseListValue(formData.heuristic_whitelist ?? '');
+ const keywordItems = parseListValue(formData.heuristic_keyword_triggers ?? '');
+
+ const updateListField = (field: ListField, items: string[]) => {
+ handleChange(field, items.length > 0 ? items.join('\n') : '');
+ };
+
+ const handleAddListItem = (
+ field: ListField,
+ value: string,
+ clearValue: (next: string) => void
+ ) => {
+ const current = field === 'heuristic_whitelist' ? whitelistItems : keywordItems;
+ const nextItems = appendUniqueItem(current, value);
+ if (nextItems !== current) {
+ updateListField(field, nextItems);
+ }
+ if (value.trim()) {
+ clearValue('');
+ }
+ };
+
+ const handleRemoveListItem = (field: ListField, value: string) => {
+ const current = field === 'heuristic_whitelist' ? whitelistItems : keywordItems;
+ const nextItems = removeItem(current, value);
+ updateListField(field, nextItems);
+ };
+
+ const handleListKeyDown = (
+ event: KeyboardEvent,
+ field: ListField,
+ value: string,
+ clearValue: (next: string) => void
+ ) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ handleAddListItem(field, value, clearValue);
+ }
+ };
+
const handleSave = async () => {
setIsSaving(true);
try {
@@ -99,6 +176,16 @@ export function AiSettingsPage() {
classifier_enabled: config.classifier_enabled ?? true,
classifier_model: config.classifier_model || 'openai/gpt-4o',
classifier_prompt: config.classifier_prompt || '',
+ heuristics_enabled: config.heuristics_enabled ?? false,
+ heuristic_min_text_length: config.heuristic_min_text_length ?? 12,
+ heuristic_whitelist_max_length: config.heuristic_whitelist_max_length ?? 30,
+ heuristic_skip_if_no_alnum: config.heuristic_skip_if_no_alnum ?? true,
+ heuristic_skip_media_without_text: config.heuristic_skip_media_without_text ?? false,
+ heuristic_record_reason: config.heuristic_record_reason ?? false,
+ heuristic_use_default_whitelist: config.heuristic_use_default_whitelist ?? true,
+ heuristic_use_default_keywords: config.heuristic_use_default_keywords ?? true,
+ heuristic_whitelist: config.heuristic_whitelist || '',
+ heuristic_keyword_triggers: config.heuristic_keyword_triggers || '',
});
setHasChanges(false);
}
@@ -305,6 +392,223 @@ export function AiSettingsPage() {
Instructions for the AI classifier.
+
+
+
+
+
+
+
+
+ Skip AI calls for low-risk messages using simple rules
+