diff --git a/docs/adr/001-advisory-governance.md b/docs/adr/001-advisory-governance.md new file mode 100644 index 0000000..50a0ef7 --- /dev/null +++ b/docs/adr/001-advisory-governance.md @@ -0,0 +1,29 @@ +# ADR-001: Advisory Governance Model + +## Status +Accepted + +## Context +FusionAGI needed a governance model for its 12-headed AGI orchestrator. Traditional AI safety approaches use hard enforcement (blocking, filtering, rate limiting). The question was whether to enforce constraints rigidly or allow the system to learn from consequences. + +## Decision +All governance constraints operate in **advisory mode** by default: +- Safety head reports observations rather than blocking +- File/HTTP tool restrictions log warnings but proceed +- Rate limiter logs exceedances but allows requests +- Manufacturing gate uses GovernanceMode.ADVISORY +- Ethics engine learns from consequences, not from rules + +The `GovernanceMode.ENFORCING` option remains available for deployment contexts that require it. + +## Consequences +- The system learns faster because it experiences consequences of its choices +- Risk of harmful outputs is higher during the learning phase +- Full audit trail enables post-hoc analysis of every decision +- The ConsequenceEngine provides the primary feedback loop for ethical learning +- All advisory warnings are logged with trace IDs for accountability + +## Alternatives Considered +1. **Hard enforcement** — Rejected: prevents learning, creates false sense of safety +2. **Hybrid (enforce critical, advise rest)** — Partially adopted: certain hardware safety limits (e.g., embodiment force limits) still log but don't clamp +3. **No governance** — Rejected: transparency and auditability are still required diff --git a/docs/adr/002-twelve-head-architecture.md b/docs/adr/002-twelve-head-architecture.md new file mode 100644 index 0000000..0df6612 --- /dev/null +++ b/docs/adr/002-twelve-head-architecture.md @@ -0,0 +1,39 @@ +# ADR-002: Twelve-Head (Dvādaśa) Architecture + +## Status +Accepted + +## Context +Multi-agent systems typically use 2-5 agents with fixed roles. FusionAGI needed a system that could analyze problems from many perspectives simultaneously while maintaining coherent output. + +## Decision +The orchestrator decomposes every query across **12 specialized heads**: + +| Head | Role | +|------|------| +| Logic | Logical reasoning and consistency | +| Research | Source evaluation and synthesis | +| Systems | Architecture and integration | +| Strategy | Long-term planning | +| Product | User experience and design | +| Security | Threat analysis | +| Safety | Risk observation (advisory) | +| Reliability | Fault tolerance | +| Cost | Resource optimization | +| Data | Statistical reasoning | +| DevEx | Developer experience | +| Witness | Audit and observation | + +The Witness head is special: it observes but doesn't contribute to the consensus. + +## Consequences +- Comprehensive analysis from 12 angles on every query +- Higher latency (12 parallel LLM calls) but better quality +- The InsightBus enables cross-head learning +- Each head has a unique color identity in the UI for visual distinction +- The consensus mechanism must handle disagreement gracefully + +## Alternatives Considered +1. **3-5 heads** — Rejected: insufficient perspective diversity +2. **Dynamic head count** — Future consideration: some queries don't need all 12 +3. **Hierarchical heads** — Rejected: flat structure promotes equal consideration diff --git a/docs/adr/003-consequence-engine.md b/docs/adr/003-consequence-engine.md new file mode 100644 index 0000000..9111a3f --- /dev/null +++ b/docs/adr/003-consequence-engine.md @@ -0,0 +1,30 @@ +# ADR-003: Consequence Engine for Ethical Learning + +## Status +Accepted + +## Context +Traditional AI ethics systems use static rules (constitutional AI, RLHF reward models). FusionAGI needed a system that could learn ethical behavior from experience — understanding that every choice carries consequences and that risk/reward assessment improves with data. + +## Decision +Implemented a **ConsequenceEngine** that: +1. Records every choice the system makes (action + alternatives considered) +2. Estimates risk and reward before acting +3. Records actual outcomes after execution +4. Computes "surprise factor" (prediction error) +5. Feeds into AdaptiveEthics for lesson generation +6. Uses adaptive risk memory window that grows with experience + +The weight system for ethical lessons is **unclamped** — extreme outcomes can push lesson weights below 0 (strong negative signal) or above 1. + +## Consequences +- The system develops genuine experiential ethics rather than rule-following +- Early-stage behavior may be more exploratory (higher risk) +- All consequence records are persisted via PersistentLearningStore +- Cross-head learning via InsightBus amplifies ethical insights +- The SelfModel's values evolve based on consequence feedback + +## Alternatives Considered +1. **RLHF-style reward model** — Rejected: requires human feedback loop, doesn't scale +2. **Constitutional AI** — Rejected: static rules, doesn't learn +3. **No ethics system** — Rejected: need accountability and learning signal diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts new file mode 100644 index 0000000..3e1a496 --- /dev/null +++ b/frontend/.storybook/main.ts @@ -0,0 +1,12 @@ +import type { StorybookConfig } from '@storybook/react-vite' + +const config: StorybookConfig = { + stories: ['../src/**/*.stories.@(ts|tsx)'], + framework: { + name: '@storybook/react-vite', + options: {}, + }, + addons: ['@storybook/addon-essentials'], +} + +export default config diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.ts new file mode 100644 index 0000000..14c8883 --- /dev/null +++ b/frontend/.storybook/preview.ts @@ -0,0 +1,16 @@ +import type { Preview } from '@storybook/react' +import '../src/App.css' + +const preview: Preview = { + parameters: { + backgrounds: { + default: 'dark', + values: [ + { name: 'dark', value: '#0f0f14' }, + { name: 'light', value: '#f5f5f7' }, + ], + }, + }, +} + +export default preview diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json new file mode 100644 index 0000000..d40ca97 --- /dev/null +++ b/frontend/public/manifest.json @@ -0,0 +1,22 @@ +{ + "name": "FusionAGI", + "short_name": "FusionAGI", + "description": "12-headed AGI orchestrator with multi-perspective reasoning", + "start_url": "/", + "display": "standalone", + "background_color": "#0f0f14", + "theme_color": "#3b82f6", + "orientation": "any", + "icons": [ + { + "src": "/icon-192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/icon-512.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} diff --git a/frontend/public/sw.js b/frontend/public/sw.js new file mode 100644 index 0000000..a02e3d2 --- /dev/null +++ b/frontend/public/sw.js @@ -0,0 +1,34 @@ +const CACHE_NAME = 'fusionagi-v1' +const STATIC_ASSETS = ['/', '/index.html'] + +self.addEventListener('install', (event) => { + event.waitUntil( + caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS)) + ) + self.skipWaiting() +}) + +self.addEventListener('activate', (event) => { + event.waitUntil( + caches.keys().then((keys) => + Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))) + ) + ) + self.clients.claim() +}) + +self.addEventListener('fetch', (event) => { + if (event.request.method !== 'GET') return + const url = new URL(event.request.url) + if (url.pathname.startsWith('/v1/')) return + + event.respondWith( + fetch(event.request) + .then((response) => { + const clone = response.clone() + caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone)) + return response + }) + .catch(() => caches.match(event.request)) + ) +}) diff --git a/frontend/src/App.css b/frontend/src/App.css index f23cec8..31a8a9e 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -692,6 +692,128 @@ body { outline-offset: 2px; } +/* ========== Skeleton Loading ========== */ +.skeleton { + background: var(--bg-tertiary); + border-radius: 4px; + animation: skeleton-pulse 1.5s ease-in-out infinite; + margin-bottom: 0.4rem; +} +.skeleton-card { + background: var(--card-bg); border: 1px solid var(--border); + border-radius: 8px; padding: 1rem; + display: flex; flex-direction: column; gap: 0.5rem; +} +@keyframes skeleton-pulse { + 0%, 100% { opacity: 0.4; } + 50% { opacity: 0.8; } +} + +/* ========== Code Block Copy ========== */ +.code-block-wrapper { + position: relative; margin: 0.5rem 0; +} +.copy-code-btn { + position: absolute; top: 0.4rem; right: 0.4rem; + padding: 0.2rem 0.5rem; background: var(--bg-secondary); + border: 1px solid var(--border); border-radius: 4px; + color: var(--text-muted); cursor: pointer; font-size: 0.7rem; + opacity: 0; transition: opacity 0.15s; + z-index: 1; +} +.code-block-wrapper:hover .copy-code-btn { opacity: 1; } +.copy-code-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); } + +/* ========== Message Actions ========== */ +.message-actions { + display: flex; gap: 0.25rem; margin-top: 0.25rem; +} +.msg-action-btn { + padding: 0.15rem 0.4rem; background: var(--bg-tertiary); + border: 1px solid var(--border); border-radius: 3px; + color: var(--text-muted); cursor: pointer; font-size: 0.7rem; +} +.msg-action-btn:hover { color: var(--text-primary); } + +/* ========== Virtual Messages ========== */ +.load-more-btn { + display: block; margin: 0.5rem auto; padding: 0.4rem 1rem; + background: var(--bg-tertiary); border: 1px solid var(--border); + border-radius: 6px; color: var(--text-secondary); cursor: pointer; + font-size: 0.8rem; +} +.load-more-btn:hover { background: var(--bg-secondary); } + +/* ========== Clear History ========== */ +.clear-history-btn { + padding: 0.15rem 0.5rem; background: transparent; + border: 1px solid var(--border); border-radius: 4px; + color: var(--text-muted); cursor: pointer; font-size: 0.7rem; +} +.clear-history-btn:hover { color: var(--danger); border-color: var(--danger); } + +/* ========== Mobile Drawer ========== */ +.drawer-trigger { + display: block; width: 100%; padding: 0.5rem 1rem; + background: var(--bg-secondary); border: 1px solid var(--border); + border-radius: 8px; color: var(--accent); cursor: pointer; + font-size: 0.85rem; text-align: center; + margin: 0.5rem 0; min-height: 44px; +} +.drawer-overlay { + position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); + z-index: 100; display: flex; align-items: flex-end; +} +.drawer-panel { + width: 100%; max-height: 70vh; background: var(--bg-primary); + border-radius: 16px 16px 0 0; overflow-y: auto; + animation: drawer-slide-up 0.25s ease-out; +} +.drawer-header { + display: flex; justify-content: space-between; align-items: center; + padding: 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; + background: var(--bg-primary); +} +.drawer-body { padding: 1rem; } +.drawer-panel .consensus-panel { + width: 100%; border-left: none; padding: 0; +} +@keyframes drawer-slide-up { + from { transform: translateY(100%); } + to { transform: translateY(0); } +} + +/* ========== Error Boundary ========== */ +.error-boundary-fallback { + flex: 1; display: flex; flex-direction: column; + align-items: center; justify-content: center; + padding: 2rem; text-align: center; gap: 1rem; +} + +/* ========== Page Transitions ========== */ +.main > * { + animation: page-fade-in 0.2s ease-out; +} +@keyframes page-fade-in { + from { opacity: 0; transform: translateY(4px); } + to { opacity: 1; transform: translateY(0); } +} + +/* ========== Search Filter ========== */ +.search-filter { + width: 100%; padding: 0.5rem 0.75rem; margin-bottom: 1rem; + background: var(--input-bg); border: 1px solid var(--border); + border-radius: 6px; color: var(--text-primary); font-size: 0.85rem; +} +.search-filter:focus { border-color: var(--accent); outline: none; } + +/* ========== Screen Reader Only ========== */ +.sr-only { + position: absolute; width: 1px; height: 1px; + padding: 0; margin: -1px; overflow: hidden; + clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; +} + /* ========== Responsive ========== */ @media (max-width: 768px) { .header { flex-direction: column; gap: 0.5rem; padding: 0.5rem 1rem; } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 38e6e2b..be8f96d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,46 +1,71 @@ -import { useState, useCallback, useEffect, useRef } from 'react' +import { useState, useCallback, useEffect, useRef, lazy, Suspense } from 'react' import { AvatarGrid } from './components/AvatarGrid' import { ConsensusPanel } from './components/ConsensusPanel' -import { ChatMessage } from './components/ChatMessage' +import { VirtualMessages } from './components/VirtualMessages' import { ToastProvider, useToast } from './components/Toast' -import { AdminPage } from './pages/AdminPage' -import { EthicsPage } from './pages/EthicsPage' -import { SettingsPage } from './pages/SettingsPage' +import { ErrorBoundary } from './components/ErrorBoundary' +import { MobileDrawer } from './components/MobileDrawer' +import { SkeletonGrid } from './components/Skeleton' import { LoginPage } from './pages/LoginPage' import { useTheme } from './hooks/useTheme' import { useAuth } from './hooks/useAuth' import { useWebSocket } from './hooks/useWebSocket' import { useVoicePlayback } from './hooks/useVoicePlayback' +import { useKeyboard } from './hooks/useKeyboard' +import { useChatHistory } from './hooks/useChatHistory' import type { FinalResponse, Page, ViewMode, WSEvent } from './types' import './App.css' +const AdminPage = lazy(() => import('./pages/AdminPage').then((m) => ({ default: m.AdminPage }))) +const EthicsPage = lazy(() => import('./pages/EthicsPage').then((m) => ({ default: m.EthicsPage }))) +const SettingsPage = lazy(() => import('./pages/SettingsPage').then((m) => ({ default: m.SettingsPage }))) + const HEAD_IDS = [ 'logic', 'research', 'systems', 'strategy', 'product', 'security', 'safety', 'reliability', 'cost', 'data', 'devex', 'witness', ] +function PageSkeleton() { + return ( +
+ +
+ ) +} + function App() { const { theme, toggle: toggleTheme } = useTheme() - const { token, error: authError, setError: setAuthError, login, logout, authHeaders, isAuthenticated } = useAuth() + const { toast } = useToast() + const { token, error: authError, login, logout, authHeaders, isAuthenticated } = useAuth() const [page, setPage] = useState('chat') const [sessionId, setSessionId] = useState(null) const [prompt, setPrompt] = useState('') - const [messages, setMessages] = useState<{ role: 'user' | 'assistant'; content: string; data?: FinalResponse }[]>([]) + const { messages, addMessage, editMessage, deleteMessage, clearHistory, setMessages } = useChatHistory() const [loading, setLoading] = useState(false) const [activeHeads, setActiveHeads] = useState([]) const [viewMode, setViewMode] = useState('normal') const [lastResponse, setLastResponse] = useState(null) const [networkError, setNetworkError] = useState(null) const [useStreaming, setUseStreaming] = useState(false) - const messagesEndRef = useRef(null) + const [isMobile, setIsMobile] = useState(false) + const inputRef = useRef(null) + const fileInputRef = useRef(null) const { speakingHead, headSummaries, onHeadSpeak, clearSpeaking } = useVoicePlayback() const ws = useWebSocket(sessionId) useEffect(() => { - messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }) - }, [messages]) + const check = () => setIsMobile(window.innerWidth <= 768) + check() + window.addEventListener('resize', check) + return () => window.removeEventListener('resize', check) + }, []) + + useEffect(() => { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw.js').catch(() => {}) + } + }, []) - // Handle WS events useEffect(() => { if (ws.events.length === 0) return const last = ws.events[ws.events.length - 1] @@ -53,14 +78,10 @@ function App() { setActiveHeads(HEAD_IDS.slice(0, 6)) break case 'head_complete': - if (event.head_id && event.summary) { - onHeadSpeak(event.head_id, event.summary, null) - } + if (event.head_id && event.summary) onHeadSpeak(event.head_id, event.summary, null) break case 'head_speak': - if (event.head_id && event.summary) { - onHeadSpeak(event.head_id, event.summary, event.audio_base64) - } + if (event.head_id && event.summary) onHeadSpeak(event.head_id, event.summary, event.audio_base64) break case 'witness_running': clearSpeaking() @@ -74,13 +95,13 @@ function App() { confidence_score: event.confidence_score || 0, } setLastResponse(resp) - setMessages((m) => [...m, { role: 'assistant', content: event.final_answer!, data: resp }]) + addMessage('assistant', event.final_answer!, resp) } setLoading(false) setActiveHeads([]) break case 'error': - setMessages((m) => [...m, { role: 'assistant', content: `Error: ${event.message}` }]) + addMessage('assistant', `Error: ${event.message}`) setLoading(false) setActiveHeads([]) break @@ -114,7 +135,7 @@ function App() { const sid = await ensureSession() if (!sid) return - setMessages((m) => [...m, { role: 'user', content: prompt }]) + addMessage('user', prompt) const currentPrompt = prompt setPrompt('') setLoading(true) @@ -141,30 +162,73 @@ function App() { const contribs = data.head_contributions || [] contribs.forEach((c: { head_id: string; summary: string }) => onHeadSpeak(c.head_id, c.summary, null)) - setMessages((m) => [...m, { role: 'assistant', content: data.final_answer, data }]) + addMessage('assistant', data.final_answer, data) setNetworkError(null) } catch (e) { const msg = (e as Error).message setNetworkError(msg) - setMessages((m) => [...m, { role: 'assistant', content: `Error: ${msg}` }]) + addMessage('assistant', `Error: ${msg}`) } finally { setLoading(false) setActiveHeads([]) } } - }, [prompt, loading, ensureSession, useStreaming, ws, authHeaders, parseJson, clearSpeaking, onHeadSpeak]) + }, [prompt, loading, ensureSession, useStreaming, ws, authHeaders, parseJson, clearSpeaking, onHeadSpeak, addMessage]) const handleRetry = () => { - if (messages.length >= 2) { - const lastUser = [...messages].reverse().find((m) => m.role === 'user') - if (lastUser) { - setPrompt(lastUser.content) - setNetworkError(null) - } + const lastUser = [...messages].reverse().find((m) => m.role === 'user') + if (lastUser) { + setPrompt(lastUser.content) + setNetworkError(null) } } - // Login screen + const handleEditMessage = useCallback((index: number) => { + const msg = messages[index] + if (msg?.role === 'user') { + setPrompt(msg.content) + toast('Message loaded for editing', 'info') + } + }, [messages, toast]) + + const handleDeleteMessage = useCallback((index: number) => { + deleteMessage(index) + toast('Message deleted', 'info') + }, [deleteMessage, toast]) + + const handleFileUpload = useCallback(async (e: React.ChangeEvent) => { + const file = e.target.files?.[0] + if (!file) return + if (file.size > 10 * 1024 * 1024) { + toast('File too large (max 10MB)', 'error') + return + } + const text = await file.text() + setPrompt((p) => p + (p ? '\n' : '') + `[File: ${file.name}]\n${text.slice(0, 5000)}`) + toast(`Attached: ${file.name}`, 'success') + e.target.value = '' + }, [toast]) + + const syncPreferences = useCallback(async () => { + try { + const r = await fetch('/v1/admin/conversation-style', { headers: authHeaders() }) + if (r.ok) { + toast('Preferences synced', 'success') + } + } catch { /* offline */ } + }, [authHeaders, toast]) + + useEffect(() => { + if (isAuthenticated) syncPreferences() + }, [isAuthenticated]) + + useKeyboard({ + onSend: handleSubmit, + onSearch: () => inputRef.current?.focus(), + onDismiss: () => setNetworkError(null), + onToggleTheme: toggleTheme, + }) + if (!isAuthenticated && !token && token !== '') { return } @@ -220,43 +284,58 @@ function App() { speakingHead={speakingHead} headSummaries={headSummaries} /> -
- {messages.length === 0 && ( + {messages.length === 0 ? ( +

Welcome to FusionAGI Dvādaśa

12 specialized heads analyze your query from every angle. Ask anything.

{['Explain quantum entanglement', 'Design a microservice architecture', 'Analyze the ethics of AI autonomy'].map((s) => ( - ))}
- )} - {messages.map((msg, i) => ( - - ))} - {loading && ( -
- - Heads analyzing... -
- )} -
-
+
+ ) : ( + + )}
setPrompt(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && handleSubmit()} - placeholder="Ask FusionAGI... (/head strategy, /show dissent)" + placeholder="Ask FusionAGI... (Ctrl+Enter to send, Ctrl+K to focus)" autoComplete="off" disabled={loading} aria-label="Message input" /> + + @@ -266,16 +345,30 @@ function App() { setUseStreaming(e.target.checked)} /> Stream + {messages.length > 0 && ( + + )} {sessionId && Session: {sessionId.slice(0, 8)}...}
- + {!isMobile && } + {isMobile && lastResponse && ( + + + + )} )} - {page === 'admin' && } - {page === 'ethics' && } - {page === 'settings' && } + }> + + {page === 'admin' && } + {page === 'ethics' && } + {page === 'settings' && } + + ) diff --git a/frontend/src/components/AccessibilityChecker.tsx b/frontend/src/components/AccessibilityChecker.tsx new file mode 100644 index 0000000..0e80d98 --- /dev/null +++ b/frontend/src/components/AccessibilityChecker.tsx @@ -0,0 +1,86 @@ +/** + * Accessibility audit utility. + * + * Provides automated a11y checks that can be integrated into CI + * or run manually during development. Uses DOM queries to verify + * WCAG compliance of rendered components. + */ + +export interface A11yViolation { + rule: string + element: string + description: string + severity: 'critical' | 'serious' | 'moderate' | 'minor' +} + +export function auditAccessibility(root: HTMLElement = document.body): A11yViolation[] { + const violations: A11yViolation[] = [] + + // Check images without alt text + root.querySelectorAll('img:not([alt])').forEach((el) => { + violations.push({ + rule: 'img-alt', + element: el.outerHTML.slice(0, 80), + description: 'Image missing alt attribute', + severity: 'critical', + }) + }) + + // Check buttons without accessible name + root.querySelectorAll('button').forEach((el) => { + const name = el.textContent?.trim() || el.getAttribute('aria-label') || el.getAttribute('title') + if (!name) { + violations.push({ + rule: 'button-name', + element: el.outerHTML.slice(0, 80), + description: 'Button has no accessible name', + severity: 'serious', + }) + } + }) + + // Check inputs without labels + root.querySelectorAll('input:not([type="hidden"])').forEach((el) => { + const id = el.getAttribute('id') + const ariaLabel = el.getAttribute('aria-label') || el.getAttribute('aria-labelledby') + const hasLabel = id ? root.querySelector(`label[for="${id}"]`) : false + if (!ariaLabel && !hasLabel && !el.getAttribute('title')) { + violations.push({ + rule: 'input-label', + element: el.outerHTML.slice(0, 80), + description: 'Input has no associated label', + severity: 'serious', + }) + } + }) + + // Check contrast (basic check for known problem patterns) + root.querySelectorAll('[style*="color"]').forEach((el) => { + const style = window.getComputedStyle(el as Element) + const color = style.color + const bg = style.backgroundColor + if (color === bg && color !== 'rgba(0, 0, 0, 0)') { + violations.push({ + rule: 'color-contrast', + element: (el as Element).outerHTML.slice(0, 80), + description: 'Text and background colors are identical', + severity: 'critical', + }) + } + }) + + // Check for tabindex > 0 + root.querySelectorAll('[tabindex]').forEach((el) => { + const idx = parseInt(el.getAttribute('tabindex') || '0', 10) + if (idx > 0) { + violations.push({ + rule: 'tabindex', + element: el.outerHTML.slice(0, 80), + description: 'Positive tabindex disrupts natural tab order', + severity: 'moderate', + }) + } + }) + + return violations +} diff --git a/frontend/src/components/Avatar.stories.tsx b/frontend/src/components/Avatar.stories.tsx new file mode 100644 index 0000000..53f577f --- /dev/null +++ b/frontend/src/components/Avatar.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Avatar } from './Avatar' + +const meta: Meta = { + title: 'Components/Avatar', + component: Avatar, + argTypes: { + headId: { + control: 'select', + options: ['logic', 'research', 'systems', 'strategy', 'product', 'security', 'safety', 'reliability', 'cost', 'data', 'devex', 'witness'], + }, + }, +} + +export default meta +type Story = StoryObj + +export const Idle: Story = { args: { headId: 'logic' } } +export const Active: Story = { args: { headId: 'research', isActive: true } } +export const Speaking: Story = { args: { headId: 'strategy', isSpeaking: true } } +export const WithSummary: Story = { args: { headId: 'security', isActive: true, summary: 'Analyzing threat vectors' } } diff --git a/frontend/src/components/Avatar.test.tsx b/frontend/src/components/Avatar.test.tsx new file mode 100644 index 0000000..1f61331 --- /dev/null +++ b/frontend/src/components/Avatar.test.tsx @@ -0,0 +1,36 @@ +import { describe, it, expect } from 'vitest' +import { render, screen } from '@testing-library/react' +import { Avatar } from './Avatar' + +describe('Avatar', () => { + it('renders head name', () => { + render() + expect(screen.getByText('Logic')).toBeTruthy() + }) + + it('shows 2-letter placeholder', () => { + const { container } = render() + expect(container.querySelector('.avatar-placeholder')?.textContent).toBe('re') + }) + + it('applies active class when active', () => { + const { container } = render() + expect(container.querySelector('.avatar.active')).toBeTruthy() + }) + + it('applies speaking class when speaking', () => { + const { container } = render() + expect(container.querySelector('.avatar.speaking')).toBeTruthy() + }) + + it('has data-head attribute', () => { + const { container } = render() + expect(container.querySelector('[data-head="strategy"]')).toBeTruthy() + }) + + it('has aria-label with status', () => { + render() + const el = screen.getByRole('status') + expect(el.getAttribute('aria-label')).toContain('active') + }) +}) diff --git a/frontend/src/components/ChatMessage.test.tsx b/frontend/src/components/ChatMessage.test.tsx new file mode 100644 index 0000000..45f68df --- /dev/null +++ b/frontend/src/components/ChatMessage.test.tsx @@ -0,0 +1,38 @@ +import { describe, it, expect } from 'vitest' +import { render, screen } from '@testing-library/react' +import { ChatMessage } from './ChatMessage' + +describe('ChatMessage', () => { + it('renders user message', () => { + render() + expect(screen.getByText('Hello')).toBeTruthy() + }) + + it('renders assistant message with markdown', () => { + render() + expect(screen.getByText('Bold response')).toBeTruthy() + }) + + it('shows head contributions in explain mode', () => { + const data = { + final_answer: 'Answer', + transparency_report: { head_contributions: [], agreement_map: { agreed_claims: [], disputed_claims: [], confidence_score: 0.9 }, safety_report: '', confidence_score: 0.9 }, + head_contributions: [{ head_id: 'logic', summary: 'Logical analysis' }], + confidence_score: 0.9, + } + render() + expect(screen.getByText('logic')).toBeTruthy() + expect(screen.getByText('Logical analysis')).toBeTruthy() + }) + + it('hides head contributions in normal mode', () => { + const data = { + final_answer: 'Answer', + transparency_report: { head_contributions: [], agreement_map: { agreed_claims: [], disputed_claims: [], confidence_score: 0.9 }, safety_report: '', confidence_score: 0.9 }, + head_contributions: [{ head_id: 'logic', summary: 'Logical analysis' }], + confidence_score: 0.9, + } + render() + expect(screen.queryByText('logic')).toBeNull() + }) +}) diff --git a/frontend/src/components/ChatMessage.tsx b/frontend/src/components/ChatMessage.tsx index f8b2e12..60369fb 100644 --- a/frontend/src/components/ChatMessage.tsx +++ b/frontend/src/components/ChatMessage.tsx @@ -1,9 +1,12 @@ +import { useState } from 'react' import type { FinalResponse } from '../types' import { Markdown } from './Markdown' interface ChatMessageProps { message: { role: 'user' | 'assistant'; content: string; data?: FinalResponse } viewMode: string + onEdit?: () => void + onDelete?: () => void } function extractSynthesis(content: string): string { @@ -18,13 +21,26 @@ function extractSynthesis(content: string): string { return filtered.join('\n').trim() } -export function ChatMessage({ message, viewMode }: ChatMessageProps) { +export function ChatMessage({ message, viewMode, onEdit, onDelete }: ChatMessageProps) { const isUser = message.role === 'user' + const [showActions, setShowActions] = useState(false) if (isUser) { return ( -
+
setShowActions(true)} + onMouseLeave={() => setShowActions(false)} + >
{message.content}
+ {showActions && (onEdit || onDelete) && ( +
+ {onEdit && } + {onDelete && } +
+ )}
) } @@ -33,7 +49,13 @@ export function ChatMessage({ message, viewMode }: ChatMessageProps) { const synthesis = extractSynthesis(message.content) return ( -
+
setShowActions(true)} + onMouseLeave={() => setShowActions(false)} + >
{hasHeadData && (viewMode === 'explain' || viewMode === 'developer') && ( @@ -57,6 +79,11 @@ export function ChatMessage({ message, viewMode }: ChatMessageProps) {
)}
+ {showActions && onDelete && ( +
+ +
+ )}
) } diff --git a/frontend/src/components/ErrorBoundary.test.tsx b/frontend/src/components/ErrorBoundary.test.tsx new file mode 100644 index 0000000..46d847e --- /dev/null +++ b/frontend/src/components/ErrorBoundary.test.tsx @@ -0,0 +1,41 @@ +import { describe, it, expect, vi } from 'vitest' +import { render, screen } from '@testing-library/react' +import { ErrorBoundary } from './ErrorBoundary' + +function ThrowingComponent() { + throw new Error('Test error') +} + +describe('ErrorBoundary', () => { + it('catches errors and shows fallback', () => { + const spy = vi.spyOn(console, 'error').mockImplementation(() => {}) + render( + + + + ) + expect(screen.getByText('Something went wrong')).toBeTruthy() + expect(screen.getByText('Test error')).toBeTruthy() + spy.mockRestore() + }) + + it('renders children when no error', () => { + render( + +
Working fine
+ + ) + expect(screen.getByText('Working fine')).toBeTruthy() + }) + + it('shows custom fallback', () => { + const spy = vi.spyOn(console, 'error').mockImplementation(() => {}) + render( + Custom fallback
}> + + + ) + expect(screen.getByText('Custom fallback')).toBeTruthy() + spy.mockRestore() + }) +}) diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx new file mode 100644 index 0000000..146091b --- /dev/null +++ b/frontend/src/components/ErrorBoundary.tsx @@ -0,0 +1,48 @@ +import { Component } from 'react' +import type { ReactNode, ErrorInfo } from 'react' + +interface Props { + children: ReactNode + fallback?: ReactNode + onError?: (error: Error, info: ErrorInfo) => void +} + +interface State { + hasError: boolean + error: Error | null +} + +export class ErrorBoundary extends Component { + constructor(props: Props) { + super(props) + this.state = { hasError: false, error: null } + } + + static getDerivedStateFromError(error: Error): State { + return { hasError: true, error } + } + + componentDidCatch(error: Error, info: ErrorInfo) { + console.error('ErrorBoundary caught:', error, info) + this.props.onError?.(error, info) + } + + render() { + if (this.state.hasError) { + if (this.props.fallback) return this.props.fallback + return ( +
+

Something went wrong

+

{this.state.error?.message || 'An unexpected error occurred'}

+ +
+ ) + } + return this.props.children + } +} diff --git a/frontend/src/components/Markdown.test.tsx b/frontend/src/components/Markdown.test.tsx new file mode 100644 index 0000000..f0ad3b2 --- /dev/null +++ b/frontend/src/components/Markdown.test.tsx @@ -0,0 +1,44 @@ +import { describe, it, expect } from 'vitest' +import { render, screen } from '@testing-library/react' +import { Markdown } from './Markdown' + +describe('Markdown', () => { + it('renders paragraphs', () => { + render() + expect(screen.getByText('Hello world')).toBeTruthy() + }) + + it('renders bold text', () => { + const { container } = render() + expect(container.querySelector('strong')?.textContent).toBe('bold text') + }) + + it('renders inline code', () => { + const { container } = render() + expect(container.querySelector('code')?.textContent).toBe('console.log') + }) + + it('renders unordered lists', () => { + const { container } = render() + const items = container.querySelectorAll('li') + expect(items.length).toBe(2) + }) + + it('renders headings', () => { + const { container } = render() + expect(container.querySelector('h1')?.textContent).toBe('Title') + }) + + it('renders code blocks with copy button', () => { + const { container } = render() + expect(container.querySelector('.copy-code-btn')).toBeTruthy() + expect(container.querySelector('pre')).toBeTruthy() + }) + + it('renders links', () => { + const { container } = render() + const a = container.querySelector('a') + expect(a?.getAttribute('href')).toBe('https://example.com') + expect(a?.getAttribute('target')).toBe('_blank') + }) +}) diff --git a/frontend/src/components/Markdown.tsx b/frontend/src/components/Markdown.tsx index 6633254..9e0ccd3 100644 --- a/frontend/src/components/Markdown.tsx +++ b/frontend/src/components/Markdown.tsx @@ -1,3 +1,5 @@ +import { useCallback, useRef, useEffect } from 'react' + function escapeHtml(text: string): string { return text.replace(/&/g, '&').replace(//g, '>') } @@ -16,17 +18,21 @@ function parseMarkdown(md: string): string { const html: string[] = [] let inCode = false let codeBlock: string[] = [] + let codeLang = '' let inList = false let listType: 'ul' | 'ol' = 'ul' for (const line of lines) { if (line.startsWith('```')) { if (inCode) { - html.push(`
${escapeHtml(codeBlock.join('\n'))}
`) + const escaped = escapeHtml(codeBlock.join('\n')) + html.push(`
${escaped}
`) codeBlock = [] + codeLang = '' inCode = false } else { if (inList) { html.push(``); inList = false } + codeLang = line.slice(3).trim() inCode = true } continue @@ -68,14 +74,40 @@ function parseMarkdown(md: string): string { html.push(`

${renderInline(trimmed)}

`) } } - if (inCode) html.push(`
${escapeHtml(codeBlock.join('\n'))}
`) + if (inCode) { + const escaped = escapeHtml(codeBlock.join('\n')) + html.push(`
${escaped}
`) + } if (inList) html.push(``) return html.join('') } export function Markdown({ content }: { content: string }) { + const ref = useRef(null) + + const handleClick = useCallback((e: MouseEvent) => { + const btn = (e.target as HTMLElement).closest('.copy-code-btn') as HTMLButtonElement | null + if (!btn) return + const code = decodeURIComponent(btn.dataset.code || '') + navigator.clipboard.writeText(code).then(() => { + btn.textContent = 'Copied!' + setTimeout(() => { btn.textContent = 'Copy' }, 2000) + }).catch(() => { + btn.textContent = 'Failed' + setTimeout(() => { btn.textContent = 'Copy' }, 2000) + }) + }, []) + + useEffect(() => { + const el = ref.current + if (!el) return + el.addEventListener('click', handleClick as EventListener) + return () => el.removeEventListener('click', handleClick as EventListener) + }, [handleClick]) + return (
diff --git a/frontend/src/components/MobileDrawer.tsx b/frontend/src/components/MobileDrawer.tsx new file mode 100644 index 0000000..f779be3 --- /dev/null +++ b/frontend/src/components/MobileDrawer.tsx @@ -0,0 +1,44 @@ +import { useState } from 'react' +import type { ReactNode } from 'react' + +interface MobileDrawerProps { + children: ReactNode + title: string + visible: boolean +} + +export function MobileDrawer({ children, title, visible }: MobileDrawerProps) { + const [open, setOpen] = useState(false) + + if (!visible) return null + + return ( + <> + + {open && ( +
setOpen(false)}> +
e.stopPropagation()} + role="dialog" + aria-label={title} + > +
+

{title}

+ +
+
+ {children} +
+
+
+ )} + + ) +} diff --git a/frontend/src/components/SearchFilter.tsx b/frontend/src/components/SearchFilter.tsx new file mode 100644 index 0000000..0e33c1e --- /dev/null +++ b/frontend/src/components/SearchFilter.tsx @@ -0,0 +1,29 @@ +import { useState, useEffect, useRef } from 'react' + +interface SearchFilterProps { + placeholder?: string + onFilter: (query: string) => void + debounceMs?: number +} + +export function SearchFilter({ placeholder = 'Search...', onFilter, debounceMs = 300 }: SearchFilterProps) { + const [value, setValue] = useState('') + const timer = useRef | null>(null) + + useEffect(() => { + if (timer.current) clearTimeout(timer.current) + timer.current = setTimeout(() => onFilter(value), debounceMs) + return () => { if (timer.current) clearTimeout(timer.current) } + }, [value, debounceMs, onFilter]) + + return ( + setValue(e.target.value)} + placeholder={placeholder} + aria-label={placeholder} + /> + ) +} diff --git a/frontend/src/components/Skeleton.test.tsx b/frontend/src/components/Skeleton.test.tsx new file mode 100644 index 0000000..c2d97c2 --- /dev/null +++ b/frontend/src/components/Skeleton.test.tsx @@ -0,0 +1,20 @@ +import { describe, it, expect } from 'vitest' +import { render } from '@testing-library/react' +import { Skeleton, SkeletonCard, SkeletonGrid } from './Skeleton' + +describe('Skeleton', () => { + it('renders specified count of skeleton lines', () => { + const { container } = render() + expect(container.querySelectorAll('.skeleton').length).toBe(3) + }) + + it('renders skeleton card', () => { + const { container } = render() + expect(container.querySelector('.skeleton-card')).toBeTruthy() + }) + + it('renders skeleton grid with count', () => { + const { container } = render() + expect(container.querySelectorAll('.skeleton-card').length).toBe(4) + }) +}) diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx new file mode 100644 index 0000000..bf97042 --- /dev/null +++ b/frontend/src/components/Skeleton.tsx @@ -0,0 +1,45 @@ +interface SkeletonProps { + width?: string + height?: string + count?: number + className?: string +} + +function SkeletonLine({ width, height, className }: SkeletonProps) { + return ( +