import { Stats } from '../types';
import { PersonaConfig } from '../types';
interface HeaderProps {
config: PersonaConfig;
stats: Stats | null;
loading: boolean;
onTogglePersona: () => void;
onNavigateToArthur?: () => void;
}
export function Header({ config, stats, loading, onTogglePersona, onNavigateToArthur }: HeaderProps) {
return (
<header>
<h1>{config.title}</h1>
<button className="persona-toggle" onClick={onTogglePersona} title="Toggle persona">
switch
</button>
{onNavigateToArthur && (
<button
className="arthur-link"
onClick={onNavigateToArthur}
title="Open Arthur AI Assistant"
style={{
marginLeft: '10px',
padding: '5px 12px',
background: 'rgba(0, 195, 255, 0.2)',
border: '1px solid rgba(0, 195, 255, 0.4)',
borderRadius: '15px',
color: 'rgba(0, 195, 255, 0.9)',
fontSize: '0.8rem',
cursor: 'pointer',
}}
>
ARTHUR
</button>
)}
<div className="stats">
{loading ? (
<div className="stat">Loading...</div>
) : stats ? (
<>
{stats.is_stale && (
<div className="stat stale-warning" title={`Index is ${stats.index_age_hours} hours old`}>
<span className="stat-value">⚠️</span> Stale
</div>
)}
<div className="stat">
<span className="stat-value">{stats.total}</span> total
</div>
<div className="stat">
<span className="stat-value">{stats.by_type.principle || 0}</span> principles
</div>
<div className="stat">
<span className="stat-value">{stats.by_type.learning || 0}</span> learnings
</div>
<div className="stat">
<span className="stat-value">{stats.by_type.retro || 0}</span> retros
</div>
</>
) : (
<div className="stat">Offline</div>
)}
</div>
</header>
);
}
