@machinespirits/eval 0.1.0

package/components/MobileEvalDashboard.tsx

@@ -0,0 +1,267 @@
+/**
+ * Mobile Evaluation Dashboard
+ *
+ * A mobile-first evaluation dashboard for testing and reviewing AI tutor performance.
+ * Features bottom tab navigation, touch-optimized interactions, and offline support.
+ *
+ * Tabs:
+ * - Test: Run quick tests with streaming output
+ * - History: Browse past evaluation runs
+ * - Logs: View dialogue transcripts
+ * - Docs: Read evaluation documentation
+ */
+
+import React, { useState, useCallback, useRef } from 'react';
+import { useEvalData } from '../hooks/useEvalData';
+import haptics from '../utils/haptics';
+import { QuickTestView } from './mobile/QuickTestView';
+import { RunHistoryView } from './mobile/RunHistoryView';
+import { LogsView } from './mobile/LogsView';
+import { DocsView } from './mobile/DocsView';
+import { BottomSheet } from './mobile/BottomSheet';
+import { RunDetailView } from './mobile/RunDetailView';
+import type { RunDetails } from '../hooks/useEvalData';
+
+// Tab configuration
+type ViewMode = 'test' | 'history' | 'logs' | 'docs';
+
+interface TabConfig {
+  id: ViewMode;
+  label: string;
+  icon: React.ReactNode;
+}
+
+// Icons as inline SVG for bundle efficiency
+const PlayIcon = () => (
+  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+const ClockIcon = () => (
+  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+const FileTextIcon = () => (
+  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+  </svg>
+);
+
+const BookIcon = () => (
+  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+  </svg>
+);
+
+const tabs: TabConfig[] = [
+  { id: 'test', label: 'Test', icon: <PlayIcon /> },
+  { id: 'history', label: 'History', icon: <ClockIcon /> },
+  { id: 'logs', label: 'Logs', icon: <FileTextIcon /> },
+  { id: 'docs', label: 'Docs', icon: <BookIcon /> }
+];
+
+export const MobileEvalDashboard: React.FC = () => {
+  // View state
+  const [activeTab, setActiveTab] = useState<ViewMode>('test');
+
+  // Bottom sheet state
+  const [showRunDetail, setShowRunDetail] = useState(false);
+  const [selectedRunDetails, setSelectedRunDetails] = useState<RunDetails | null>(null);
+
+  // Swipe navigation state
+  const touchStartX = useRef<number | null>(null);
+  const touchEndX = useRef<number | null>(null);
+  const MIN_SWIPE_DISTANCE = 50;
+
+  // Data hook
+  const evalData = useEvalData();
+
+  // Tab switching with haptic feedback
+  const handleTabChange = useCallback((tab: ViewMode) => {
+    if (tab !== activeTab) {
+      haptics.light();
+      setActiveTab(tab);
+    }
+  }, [activeTab]);
+
+  // Swipe navigation between tabs
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    touchEndX.current = null;
+    touchStartX.current = e.touches[0].clientX;
+  }, []);
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    touchEndX.current = e.touches[0].clientX;
+  }, []);
+
+  const handleTouchEnd = useCallback(() => {
+    if (!touchStartX.current || !touchEndX.current) return;
+
+    const distance = touchStartX.current - touchEndX.current;
+    const tabOrder: ViewMode[] = ['test', 'history', 'logs', 'docs'];
+    const currentIndex = tabOrder.indexOf(activeTab);
+
+    if (Math.abs(distance) > MIN_SWIPE_DISTANCE) {
+      if (distance > 0 && currentIndex < tabOrder.length - 1) {
+        // Swipe left - go to next tab
+        haptics.light();
+        setActiveTab(tabOrder[currentIndex + 1]);
+      } else if (distance < 0 && currentIndex > 0) {
+        // Swipe right - go to previous tab
+        haptics.light();
+        setActiveTab(tabOrder[currentIndex - 1]);
+      }
+    }
+
+    touchStartX.current = null;
+    touchEndX.current = null;
+  }, [activeTab]);
+
+  // Handle run selection from history
+  const handleSelectRun = useCallback(async (runId: string) => {
+    haptics.light();
+    const details = await evalData.loadRunDetails(runId);
+    if (details) {
+      setSelectedRunDetails(details);
+      setShowRunDetail(true);
+    }
+  }, [evalData]);
+
+  // Handle navigation to logs from run detail
+  const handleViewDialogue = useCallback((logDate: string) => {
+    setShowRunDetail(false);
+    setActiveTab('logs');
+    // The LogsView will handle loading the specific date
+  }, []);
+
+  return (
+    <div
+      className="mobile-eval-dashboard flex flex-col h-screen bg-[#0a0a0a] text-white overflow-hidden"
+      style={{ paddingTop: 'env(safe-area-inset-top)' }}
+    >
+      {/* Header */}
+      <header className="flex-shrink-0 px-4 py-3 border-b border-gray-800">
+        <h1 className="text-lg font-semibold">Evaluation</h1>
+        {evalData.error && (
+          <div className="mt-2 px-3 py-2 bg-red-900/30 border border-red-800 rounded-lg text-sm text-red-400 flex items-center justify-between">
+            <span>{evalData.error}</span>
+            <button
+              type="button"
+              onClick={evalData.clearError}
+              className="ml-2 text-red-400 hover:text-red-300"
+            >
+              &times;
+            </button>
+          </div>
+        )}
+      </header>
+
+      {/* Main content area with swipe support */}
+      <main
+        className="flex-1 overflow-hidden"
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        {activeTab === 'test' && (
+          <QuickTestView
+            profiles={evalData.profiles}
+            scenarios={evalData.scenarios}
+            onRunTest={evalData.runQuickTest}
+            onRunMatrix={evalData.runMatrixTest}
+            isRunning={evalData.isTestRunning}
+            isMatrixRunning={evalData.isMatrixRunning}
+            isLoadingData={evalData.isInitialLoading}
+            result={evalData.testResult}
+            matrixResult={evalData.matrixResult}
+            streamLogs={evalData.streamLogs}
+            onClearResult={evalData.clearTestResult}
+            onClearMatrixResult={evalData.clearMatrixResult}
+          />
+        )}
+
+        {activeTab === 'history' && (
+          <RunHistoryView
+            runs={evalData.runs}
+            isLoading={evalData.isLoading}
+            onSelectRun={handleSelectRun}
+            onRefresh={evalData.loadRuns}
+          />
+        )}
+
+        {activeTab === 'logs' && (
+          <LogsView
+            logDates={evalData.logDates}
+            isLoading={evalData.isLoading}
+            onLoadDates={evalData.loadLogDates}
+            onLoadDialogues={evalData.loadDialogues}
+            onLoadDialogueById={evalData.loadDialogueById}
+          />
+        )}
+
+        {activeTab === 'docs' && (
+          <DocsView
+            docs={evalData.docs}
+            isLoading={evalData.isLoading}
+            onLoadDocs={evalData.loadDocs}
+            onLoadDocContent={evalData.loadDocContent}
+          />
+        )}
+      </main>
+
+      {/* Bottom Tab Bar - Glass morphism */}
+      <nav
+        className="flex-shrink-0 bg-gray-900/80 backdrop-blur-xl border-t border-white/5"
+        style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+      >
+        <div className="flex justify-around items-center h-14" role="tablist">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              role="tab"
+              aria-selected={activeTab === tab.id}
+              onClick={() => handleTabChange(tab.id)}
+              className={`relative flex flex-col items-center justify-center w-full h-full transition-all duration-200
+                ${activeTab === tab.id ? 'text-[#E63946]' : 'text-gray-500 hover:text-gray-300'}`}
+              style={{ minHeight: '48px' }}
+            >
+              {/* Active indicator glow */}
+              {activeTab === tab.id && (
+                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-gradient-to-r from-transparent via-[#E63946] to-transparent" />
+              )}
+              <div className={`transition-transform duration-200 ${activeTab === tab.id ? 'scale-110' : ''}`}>
+                {tab.icon}
+              </div>
+              <span className={`text-[10px] mt-1 font-medium transition-all duration-200
+                ${activeTab === tab.id ? 'text-[#E63946]' : ''}`}>
+                {tab.label}
+              </span>
+            </button>
+          ))}
+        </div>
+      </nav>
+
+      {/* Run Detail Bottom Sheet */}
+      <BottomSheet
+        isOpen={showRunDetail}
+        onClose={() => setShowRunDetail(false)}
+        title="Run Details"
+      >
+        {selectedRunDetails && (
+          <RunDetailView
+            details={selectedRunDetails}
+            onViewDialogue={handleViewDialogue}
+            onClose={() => setShowRunDetail(false)}
+          />
+        )}
+      </BottomSheet>
+    </div>
+  );
+};
+
+export default MobileEvalDashboard;

package/components/comparison/DeltaAnalysisTable.tsx

@@ -0,0 +1,137 @@
+/**
+ * DeltaAnalysisTable Component
+ *
+ * Dimension-by-dimension comparison table showing:
+ * - Baseline score
+ * - Recognition score
+ * - Delta (difference)
+ * - Winner badge per dimension
+ */
+
+import React from 'react';
+import { WinnerIndicator } from './WinnerIndicator';
+
+interface DeltaEntry {
+  dimension: string;
+  baseline: number | null;
+  recognition: number | null;
+  delta: number;
+  deltaPercent: number;
+  significance: '' | '*' | '**';
+  winner: 'baseline' | 'recognition' | null;
+}
+
+interface DeltaAnalysisTableProps {
+  deltaAnalysis: DeltaEntry[];
+}
+
+const dimensionLabels: Record<string, string> = {
+  relevance: 'Relevance',
+  specificity: 'Specificity',
+  pedagogical: 'Pedagogical',
+  personalization: 'Personalization',
+  actionability: 'Actionability',
+  tone: 'Tone',
+};
+
+export const DeltaAnalysisTable: React.FC<DeltaAnalysisTableProps> = ({
+  deltaAnalysis,
+}) => {
+  if (!deltaAnalysis || deltaAnalysis.length === 0) {
+    return (
+      <div className="bg-gray-900/60 backdrop-blur-sm border border-white/5 rounded-xl p-4">
+        <div className="text-xs text-gray-400 mb-3">Delta Analysis</div>
+        <div className="text-sm text-gray-500 text-center py-4">
+          No comparison data available
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-900/60 backdrop-blur-sm border border-white/5 rounded-xl p-4">
+      <div className="flex items-center justify-between mb-4">
+        <div className="text-xs text-gray-400">Delta Analysis</div>
+        <div className="flex items-center gap-3 text-[10px] text-gray-500">
+          <span>
+            <span className="text-yellow-400 font-bold">*</span> &gt;5% improvement
+          </span>
+          <span>
+            <span className="text-yellow-400 font-bold">**</span> &gt;10% improvement
+          </span>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="text-gray-500 border-b border-white/5">
+              <th className="text-left py-2 pr-4">Dimension</th>
+              <th className="text-right py-2 px-2">Baseline</th>
+              <th className="text-right py-2 px-2">Recognition</th>
+              <th className="text-right py-2 px-2">Delta</th>
+              <th className="text-center py-2 pl-4">Winner</th>
+            </tr>
+          </thead>
+          <tbody>
+            {deltaAnalysis.map((entry) => {
+              const deltaColor =
+                entry.delta > 0
+                  ? 'text-green-400'
+                  : entry.delta < 0
+                    ? 'text-red-400'
+                    : 'text-gray-400';
+
+              return (
+                <tr
+                  key={entry.dimension}
+                  className="border-b border-white/5 last:border-0 hover:bg-white/5 transition-colors"
+                >
+                  <td className="py-2 pr-4">
+                    <span className="text-gray-300">
+                      {dimensionLabels[entry.dimension] || entry.dimension}
+                    </span>
+                  </td>
+                  <td className="text-right py-2 px-2 text-blue-400 font-mono">
+                    {entry.baseline != null ? entry.baseline.toFixed(2) : '—'}
+                  </td>
+                  <td className="text-right py-2 px-2 text-yellow-400 font-mono">
+                    {entry.recognition != null ? entry.recognition.toFixed(2) : '—'}
+                  </td>
+                  <td className={`text-right py-2 px-2 font-mono ${deltaColor}`}>
+                    {entry.delta > 0 ? '+' : ''}
+                    {entry.delta.toFixed(2)}
+                    {entry.significance && (
+                      <span className="text-yellow-300 ml-0.5">{entry.significance}</span>
+                    )}
+                  </td>
+                  <td className="text-center py-2 pl-4">
+                    <WinnerIndicator
+                      winner={entry.winner}
+                      significance={entry.significance}
+                      size="sm"
+                      showLabel={false}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Summary row */}
+      <div className="mt-3 pt-3 border-t border-white/5 flex items-center justify-between">
+        <div className="text-[10px] text-gray-500">
+          {deltaAnalysis.filter((d) => d.winner === 'recognition').length} dimensions favor
+          recognition
+        </div>
+        <div className="text-[10px] text-gray-500">
+          {deltaAnalysis.filter((d) => d.winner === 'baseline').length} dimensions favor baseline
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeltaAnalysisTable;

package/components/comparison/ProfileComparisonCard.tsx

@@ -0,0 +1,176 @@
+/**
+ * ProfileComparisonCard Component
+ *
+ * Single profile result display with:
+ * - Profile badge (baseline vs recognition)
+ * - Overall score with delta indicator
+ * - Mini radar chart of dimension scores
+ * - Test stats (latency, success rate)
+ */
+
+import React from 'react';
+
+interface DimensionAverages {
+  relevance: number | null;
+  specificity: number | null;
+  pedagogical: number | null;
+  personalization: number | null;
+  actionability: number | null;
+  tone: number | null;
+}
+
+interface ProfileComparisonCardProps {
+  profile: 'baseline' | 'recognition';
+  overallScore: number | null;
+  delta?: number | null;
+  dimensionAverages: DimensionAverages;
+  testCount: number;
+  successCount: number;
+  avgLatency: number;
+  isWinner?: boolean;
+}
+
+// Mini radar chart component
+const MiniRadarChart: React.FC<{
+  scores: DimensionAverages;
+  color: string;
+}> = ({ scores, color }) => {
+  const dimensions = ['relevance', 'specificity', 'pedagogical', 'personalization', 'actionability', 'tone'] as const;
+  const size = 80;
+  const center = size / 2;
+  const radius = 30;
+
+  // Calculate points for polygon
+  const points = dimensions
+    .map((dim, i) => {
+      const angle = (Math.PI * 2 * i) / dimensions.length - Math.PI / 2;
+      const value = (scores[dim] ?? 0) / 5; // Normalize to 0-1 (assuming 5-point scale)
+      const x = center + Math.cos(angle) * radius * value;
+      const y = center + Math.sin(angle) * radius * value;
+      return `${x},${y}`;
+    })
+    .join(' ');
+
+  // Background polygon (full scale)
+  const bgPoints = dimensions
+    .map((_, i) => {
+      const angle = (Math.PI * 2 * i) / dimensions.length - Math.PI / 2;
+      const x = center + Math.cos(angle) * radius;
+      const y = center + Math.sin(angle) * radius;
+      return `${x},${y}`;
+    })
+    .join(' ');
+
+  return (
+    <svg width={size} height={size} className="mx-auto">
+      {/* Background grid */}
+      <polygon points={bgPoints} fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="1" />
+      <polygon
+        points={bgPoints}
+        fill="none"
+        stroke="rgba(255,255,255,0.05)"
+        strokeWidth="1"
+        transform={`scale(0.66) translate(${center * 0.5}, ${center * 0.5})`}
+      />
+      <polygon
+        points={bgPoints}
+        fill="none"
+        stroke="rgba(255,255,255,0.05)"
+        strokeWidth="1"
+        transform={`scale(0.33) translate(${center * 2}, ${center * 2})`}
+      />
+
+      {/* Data polygon */}
+      <polygon points={points} fill={`${color}20`} stroke={color} strokeWidth="2" />
+
+      {/* Center dot */}
+      <circle cx={center} cy={center} r="2" fill={color} />
+    </svg>
+  );
+};
+
+export const ProfileComparisonCard: React.FC<ProfileComparisonCardProps> = ({
+  profile,
+  overallScore,
+  delta,
+  dimensionAverages,
+  testCount,
+  successCount,
+  avgLatency,
+  isWinner = false,
+}) => {
+  const isRecognition = profile === 'recognition';
+
+  // Profile-specific styling
+  const profileStyles = isRecognition
+    ? {
+        border: isWinner ? 'border-yellow-500/40' : 'border-yellow-500/20',
+        badge: 'bg-gradient-to-r from-yellow-500/20 to-green-500/20 text-yellow-400 border-yellow-500/30',
+        color: '#facc15', // yellow-400
+        icon: '⚡',
+        label: 'Recognition',
+      }
+    : {
+        border: isWinner ? 'border-blue-500/40' : 'border-blue-500/20',
+        badge: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+        color: '#60a5fa', // blue-400
+        icon: '🎯',
+        label: 'Baseline',
+      };
+
+  const successRate = testCount > 0 ? (successCount / testCount) * 100 : 0;
+
+  return (
+    <div
+      className={`bg-gray-900/60 backdrop-blur-sm border rounded-xl p-4 ${profileStyles.border} ${isWinner ? 'ring-2 ring-yellow-500/20' : ''}`}
+    >
+      {/* Header with badge */}
+      <div className="flex items-center justify-between mb-3">
+        <span
+          className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs border ${profileStyles.badge}`}
+        >
+          <span>{profileStyles.icon}</span>
+          <span className="font-medium">{profileStyles.label}</span>
+        </span>
+
+        {isWinner && (
+          <span className="text-yellow-400 text-sm">🏆</span>
+        )}
+      </div>
+
+      {/* Score and radar */}
+      <div className="flex items-center gap-4 mb-4">
+        {/* Overall score */}
+        <div className="text-center">
+          <div className="text-3xl font-bold" style={{ color: profileStyles.color }}>
+            {overallScore != null ? overallScore.toFixed(1) : '—'}
+          </div>
+          {delta != null && (
+            <div
+              className={`text-xs ${delta > 0 ? 'text-green-400' : delta < 0 ? 'text-red-400' : 'text-gray-400'}`}
+            >
+              {delta > 0 ? '+' : ''}
+              {delta.toFixed(1)}
+            </div>
+          )}
+          <div className="text-[10px] text-gray-500">Overall</div>
+        </div>
+
+        {/* Mini radar */}
+        <div className="flex-1">
+          <MiniRadarChart scores={dimensionAverages} color={profileStyles.color} />
+        </div>
+      </div>
+
+      {/* Stats row */}
+      <div className="flex items-center justify-between text-[10px] text-gray-500 pt-2 border-t border-white/5">
+        <span>
+          {successCount}/{testCount} tests ({successRate.toFixed(0)}%)
+        </span>
+        <span>{avgLatency.toFixed(0)}ms avg</span>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileComparisonCard;