@machinespirits/eval 0.1.0

package/components/mobile/BottomSheet.tsx

@@ -0,0 +1,233 @@
+/**
+ * BottomSheet Component
+ *
+ * A premium mobile-native bottom sheet modal with drag-to-dismiss gesture support.
+ * Features glass morphism, smooth animations, and haptic feedback.
+ * Used for displaying run details, dialogue entries, and other drill-down content.
+ */
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import haptics from '../../utils/haptics';
+
+interface BottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  maxHeight?: string;
+}
+
+export const BottomSheet: React.FC<BottomSheetProps> = ({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  children,
+  maxHeight = '85vh'
+}) => {
+  const [dragY, setDragY] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const dragStartY = useRef<number | null>(null);
+  const velocityY = useRef(0);
+  const lastY = useRef(0);
+  const lastTime = useRef(Date.now());
+  const sheetRef = useRef<HTMLDivElement>(null);
+
+  // Reset drag state when sheet opens
+  useEffect(() => {
+    if (isOpen) {
+      setDragY(0);
+      setIsDragging(false);
+      setIsClosing(false);
+      velocityY.current = 0;
+    }
+  }, [isOpen]);
+
+  // Prevent body scroll when sheet is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    // Only start drag from the handle area
+    const target = e.target as HTMLElement;
+    if (target.closest('.bottom-sheet-handle')) {
+      dragStartY.current = e.touches[0].clientY;
+      lastY.current = e.touches[0].clientY;
+      lastTime.current = Date.now();
+      setIsDragging(true);
+      haptics.light();
+    }
+  }, []);
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    if (!isDragging || dragStartY.current === null) return;
+
+    const currentY = e.touches[0].clientY;
+    const deltaY = currentY - dragStartY.current;
+
+    // Calculate velocity for momentum-based closing
+    const now = Date.now();
+    const dt = now - lastTime.current;
+    if (dt > 0) {
+      velocityY.current = (currentY - lastY.current) / dt;
+    }
+    lastY.current = currentY;
+    lastTime.current = now;
+
+    // Only allow downward drag with rubber band effect
+    if (deltaY > 0) {
+      // Add resistance as user drags further
+      const resistance = 1 - Math.min(deltaY / 500, 0.5);
+      setDragY(deltaY * resistance);
+    }
+  }, [isDragging]);
+
+  const handleTouchEnd = useCallback(() => {
+    if (!isDragging) return;
+
+    // Close if dragged more than 100px down OR with high velocity
+    const shouldClose = dragY > 100 || (velocityY.current > 0.5 && dragY > 30);
+
+    if (shouldClose) {
+      haptics.medium();
+      setIsClosing(true);
+      // Wait for animation before calling onClose
+      setTimeout(() => {
+        onClose();
+        setIsClosing(false);
+      }, 200);
+    } else {
+      // Snap back
+      haptics.light();
+    }
+
+    setDragY(0);
+    setIsDragging(false);
+    dragStartY.current = null;
+    velocityY.current = 0;
+  }, [isDragging, dragY, onClose]);
+
+  const handleBackdropClick = useCallback(() => {
+    haptics.light();
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose();
+      setIsClosing(false);
+    }, 200);
+  }, [onClose]);
+
+  const handleCloseButton = useCallback(() => {
+    haptics.light();
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose();
+      setIsClosing(false);
+    }, 200);
+  }, [onClose]);
+
+  if (!isOpen) return null;
+
+  // Calculate backdrop opacity based on drag
+  const backdropOpacity = Math.max(0, 0.7 - (dragY / 300));
+
+  return (
+    <>
+      {/* Backdrop with blur */}
+      <div
+        className="fixed inset-0 z-40 transition-all duration-300"
+        style={{
+          backgroundColor: `rgba(0, 0, 0, ${isClosing ? 0 : backdropOpacity})`,
+          backdropFilter: isClosing ? 'none' : `blur(${Math.max(0, 4 - dragY / 50)}px)`,
+        }}
+        onClick={handleBackdropClick}
+      />
+
+      {/* Sheet with glass morphism */}
+      <div
+        ref={sheetRef}
+        className={`fixed left-0 right-0 bottom-0 z-50
+          bg-gray-900/95 backdrop-blur-xl
+          border-t border-white/10
+          rounded-t-3xl shadow-2xl
+          ${isClosing ? 'animate-slide-down' : 'animate-slide-up'}`}
+        style={{
+          maxHeight,
+          transform: `translateY(${isClosing ? '100%' : `${dragY}px`})`,
+          transition: isDragging ? 'none' : 'transform 0.3s cubic-bezier(0.32, 0.72, 0, 1)',
+          paddingBottom: 'env(safe-area-inset-bottom)',
+          boxShadow: '0 -10px 40px rgba(0, 0, 0, 0.3), 0 0 80px rgba(230, 57, 70, 0.05)'
+        }}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        {/* Drag handle - Premium styling */}
+        <div className="bottom-sheet-handle flex flex-col items-center pt-4 pb-3 cursor-grab active:cursor-grabbing">
+          <div className="relative">
+            {/* Glow effect on drag */}
+            {isDragging && (
+              <div className="absolute inset-0 w-12 h-1.5 rounded-full bg-brand-red/30 blur-md" />
+            )}
+            <div className={`w-12 h-1.5 rounded-full transition-all duration-200
+              ${isDragging ? 'bg-brand-red scale-110' : 'bg-white/20'}`}
+            />
+          </div>
+          {/* Drag hint */}
+          {dragY > 50 && (
+            <span className="mt-2 text-[10px] text-gray-500 font-medium animate-fade-in">
+              Release to close
+            </span>
+          )}
+        </div>
+
+        {/* Header with title and close button */}
+        {title && (
+          <div className="flex items-center justify-between px-5 pb-4 border-b border-white/5">
+            <div className="flex-1 min-w-0">
+              <h3 className="text-lg font-bold text-white truncate">{title}</h3>
+              {subtitle && (
+                <p className="text-xs text-gray-500 mt-0.5 truncate">{subtitle}</p>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={handleCloseButton}
+              className="flex-shrink-0 ml-3 w-9 h-9 -mr-1 flex items-center justify-center
+                rounded-full bg-white/5 border border-white/10
+                text-gray-400 hover:text-white hover:bg-white/10
+                active:scale-95 transition-all duration-150"
+              aria-label="Close"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        )}
+
+        {/* Content with scrollbar hidden */}
+        <div
+          className="overflow-y-auto overscroll-contain scrollbar-hide"
+          style={{ maxHeight: title ? 'calc(85vh - 100px)' : 'calc(85vh - 50px)' }}
+        >
+          {children}
+        </div>
+
+        {/* Bottom safe area gradient */}
+        <div className="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-gray-900 to-transparent pointer-events-none" />
+      </div>
+    </>
+  );
+};
+
+export default BottomSheet;

package/components/mobile/DimensionBreakdown.tsx

@@ -0,0 +1,210 @@
+/**
+ * DimensionBreakdown Component
+ *
+ * Displays the 6 evaluation dimensions as horizontal progress bars.
+ * Premium glass morphism styling with animated transitions.
+ * More readable on mobile than radar charts.
+ */
+
+import React from 'react';
+import type { EvalDimensionScores, EvalDimensionScore } from '../../types';
+import haptics from '../../utils/haptics';
+
+interface DimensionBreakdownProps {
+  scores: EvalDimensionScores;
+  compact?: boolean;
+  showLabels?: boolean;
+}
+
+interface DimensionConfig {
+  key: keyof EvalDimensionScores;
+  label: string;
+  shortLabel: string;
+  color: string;
+  bgColor: string;
+  glowColor: string;
+}
+
+// Premium dimension configurations with consistent color system
+const dimensions: DimensionConfig[] = [
+  {
+    key: 'relevance',
+    label: 'Relevance',
+    shortLabel: 'REL',
+    color: 'bg-dimension-relevance',
+    bgColor: 'bg-dimension-relevance/20',
+    glowColor: 'shadow-[0_0_10px_rgba(230,57,70,0.3)]'
+  },
+  {
+    key: 'specificity',
+    label: 'Specificity',
+    shortLabel: 'SPE',
+    color: 'bg-dimension-specificity',
+    bgColor: 'bg-dimension-specificity/20',
+    glowColor: 'shadow-[0_0_10px_rgba(69,123,157,0.3)]'
+  },
+  {
+    key: 'pedagogical',
+    label: 'Pedagogical',
+    shortLabel: 'PED',
+    color: 'bg-dimension-pedagogical',
+    bgColor: 'bg-dimension-pedagogical/20',
+    glowColor: 'shadow-[0_0_10px_rgba(42,157,143,0.3)]'
+  },
+  {
+    key: 'personalization',
+    label: 'Personalization',
+    shortLabel: 'PER',
+    color: 'bg-dimension-personalization',
+    bgColor: 'bg-dimension-personalization/20',
+    glowColor: 'shadow-[0_0_10px_rgba(233,196,106,0.3)]'
+  },
+  {
+    key: 'actionability',
+    label: 'Actionability',
+    shortLabel: 'ACT',
+    color: 'bg-dimension-actionability',
+    bgColor: 'bg-dimension-actionability/20',
+    glowColor: 'shadow-[0_0_10px_rgba(244,162,97,0.3)]'
+  },
+  {
+    key: 'tone',
+    label: 'Tone',
+    shortLabel: 'TON',
+    color: 'bg-dimension-tone',
+    bgColor: 'bg-dimension-tone/20',
+    glowColor: 'shadow-[0_0_10px_rgba(131,56,236,0.3)]'
+  }
+];
+
+// Extract numeric value from dimension score
+function getScoreValue(score: EvalDimensionScore): number | null {
+  if (score === null || score === undefined) return null;
+  if (typeof score === 'number') return score;
+  if (typeof score === 'object' && 'score' in score) return score.score;
+  return null;
+}
+
+// Get reasoning if available
+function getScoreReasoning(score: EvalDimensionScore): string | undefined {
+  if (score === null || score === undefined) return undefined;
+  if (typeof score === 'object' && 'reasoning' in score) return score.reasoning;
+  return undefined;
+}
+
+// Get score quality indicator
+function getScoreQuality(value: number | null): { label: string; color: string } {
+  if (value === null) return { label: '', color: 'text-gray-600' };
+  if (value >= 4) return { label: 'Excellent', color: 'text-green-400' };
+  if (value >= 3) return { label: 'Good', color: 'text-blue-400' };
+  if (value >= 2) return { label: 'Fair', color: 'text-yellow-400' };
+  return { label: 'Needs work', color: 'text-red-400' };
+}
+
+export const DimensionBreakdown: React.FC<DimensionBreakdownProps> = ({
+  scores,
+  compact = false,
+  showLabels = true
+}) => {
+  const [expandedDimension, setExpandedDimension] = React.useState<string | null>(null);
+
+  return (
+    <div className={compact ? 'space-y-2' : 'space-y-3'}>
+      {dimensions.map((dim, index) => {
+        const rawScore = scores[dim.key];
+        const value = getScoreValue(rawScore);
+        const reasoning = getScoreReasoning(rawScore);
+        const percentage = value !== null ? (value / 5) * 100 : 0;
+        const isExpanded = expandedDimension === dim.key;
+        const quality = getScoreQuality(value);
+
+        return (
+          <div
+            key={dim.key}
+            className="animate-fade-in"
+            style={{ animationDelay: `${index * 50}ms` }}
+          >
+            <button
+              type="button"
+              onClick={() => {
+                if (reasoning) {
+                  haptics.light();
+                  setExpandedDimension(isExpanded ? null : dim.key);
+                }
+              }}
+              className={`w-full text-left transition-all duration-200 rounded-lg
+                ${reasoning ? 'cursor-pointer hover:bg-white/5 active:scale-[0.99]' : 'cursor-default'}
+                ${compact ? 'p-1' : 'p-1.5 -mx-1.5'}`}
+              disabled={!reasoning}
+            >
+              <div className="flex justify-between items-center mb-1.5">
+                <div className="flex items-center gap-2">
+                  {/* Color indicator dot */}
+                  <div className={`w-2 h-2 rounded-full ${dim.color} ${value !== null && value >= 4 ? dim.glowColor : ''}`} />
+                  <span className={`font-medium ${compact ? 'text-xs' : 'text-sm'} text-gray-300`}>
+                    {showLabels ? (compact ? dim.shortLabel : dim.label) : dim.shortLabel}
+                  </span>
+                  {reasoning && (
+                    <svg
+                      className={`w-3 h-3 text-gray-600 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  {!compact && value !== null && (
+                    <span className={`text-[10px] font-medium ${quality.color} uppercase tracking-wide`}>
+                      {quality.label}
+                    </span>
+                  )}
+                  <span className={`font-semibold tabular-nums ${compact ? 'text-xs' : 'text-sm'}`}>
+                    {value !== null ? (
+                      <span className="text-white">{value.toFixed(1)}<span className="text-gray-500">/5</span></span>
+                    ) : (
+                      <span className="text-gray-600">—</span>
+                    )}
+                  </span>
+                </div>
+              </div>
+
+              {/* Progress bar with glass effect */}
+              <div className={`bg-gray-800/60 rounded-full overflow-hidden backdrop-blur-xs ${compact ? 'h-1.5' : 'h-2.5'}`}>
+                <div
+                  className={`h-full rounded-full transition-all duration-700 ease-out ${dim.color}
+                    ${value !== null && value >= 4 ? dim.glowColor : ''}`}
+                  style={{
+                    width: `${percentage}%`,
+                    transitionDelay: `${index * 50}ms`
+                  }}
+                />
+              </div>
+            </button>
+
+            {/* Expandable reasoning - Premium glass panel */}
+            {isExpanded && reasoning && (
+              <div className="mt-2 ml-4 animate-fade-in">
+                <div className={`p-3 rounded-xl ${dim.bgColor} backdrop-blur-sm border border-white/5`}>
+                  <div className="flex items-start gap-2">
+                    <svg className="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                        d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                    <p className="text-xs text-gray-300 leading-relaxed">
+                      {reasoning}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DimensionBreakdown;