markupr 2.1.8 → 2.5.0

package/src/renderer/components/SessionHistory.tsx

@@ -1,1746 +0,0 @@
-/**
- * SessionHistory - Professional Data Management Experience
- *
- * A comprehensive session browser for viewing, searching, and managing past feedback sessions.
- *
- * Features:
- * - List all sessions with thumbnails and metadata
- * - Search by content (transcription text, project name)
- * - Sort/Filter by date, name, item count
- * - Quick preview on hover
- * - Actions: Open, delete, export, copy, open folder
- * - Bulk actions: Select multiple, delete/export batch
- * - Virtual scrolling for large lists
- * - Full keyboard navigation
- * - Context menu support
- */
-
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { Skeleton, SkeletonText } from './Skeleton';
-import { useTheme } from '../hooks/useTheme';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-/**
- * Re-export SessionMetadata for external usage
- * The actual interface is defined in electron.d.ts as SessionHistoryItem
- */
-export interface SessionMetadata {
-  id: string;
-  startTime: number;
-  endTime: number;
-  itemCount: number;
-  screenshotCount: number;
-  sourceName: string;
-  firstThumbnail?: string;
-  folder: string;
-  transcriptionPreview?: string;
-}
-
-interface SessionHistoryProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onOpenSession: (session: SessionMetadata) => void;
-}
-
-type SortOption = 'date' | 'name' | 'items' | 'duration';
-type SortDirection = 'asc' | 'desc';
-
-interface ContextMenuState {
-  visible: boolean;
-  x: number;
-  y: number;
-  sessionId: string | null;
-}
-
-// ============================================================================
-// Helper Functions
-// ============================================================================
-
-function formatDuration(ms: number): string {
-  const totalSeconds = Math.floor(ms / 1000);
-  const mins = Math.floor(totalSeconds / 60);
-  const secs = totalSeconds % 60;
-  if (mins === 0) {
-    return `${secs}s`;
-  }
-  return `${mins}:${secs.toString().padStart(2, '0')}`;
-}
-
-function formatRelativeDate(timestamp: number): string {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / (1000 * 60));
-  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-
-  if (diffMins < 1) return 'Just now';
-  if (diffMins < 60) return `${diffMins}m ago`;
-  if (diffHours < 24) return `${diffHours}h ago`;
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
-}
-
-// ============================================================================
-// Sub-Components
-// ============================================================================
-
-/**
- * Session Card - Individual session item
- */
-interface SessionCardProps {
-  session: SessionMetadata;
-  isSelected: boolean;
-  isFocused: boolean;
-  onSelect: (shift: boolean, ctrl: boolean) => void;
-  onOpen: () => void;
-  onDelete: () => void;
-  onExport: () => void;
-  onOpenFolder: () => void;
-  onContextMenu: (e: React.MouseEvent) => void;
-}
-
-const SessionCard: React.FC<SessionCardProps> = ({
-  session,
-  isSelected,
-  isFocused,
-  onSelect,
-  onOpen,
-  onDelete,
-  onExport,
-  onOpenFolder,
-  onContextMenu,
-}) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const { colors } = useTheme();
-  const duration = session.endTime - session.startTime;
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      onSelect(e.shiftKey, e.metaKey || e.ctrlKey);
-    },
-    [onSelect]
-  );
-
-  const handleDoubleClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      onOpen();
-    },
-    [onOpen]
-  );
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onOpen();
-      } else if (e.key === 'Delete' || e.key === 'Backspace') {
-        e.preventDefault();
-        onDelete();
-      }
-    },
-    [onOpen, onDelete]
-  );
-
-  return (
-    <div
-      role="row"
-      tabIndex={0}
-      onClick={handleClick}
-      onDoubleClick={handleDoubleClick}
-      onContextMenu={onContextMenu}
-      onKeyDown={handleKeyDown}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      style={{
-        ...styles.sessionCard,
-        backgroundColor: isSelected
-          ? colors.accent.subtle
-          : isHovered
-          ? colors.bg.subtle
-          : colors.surface.inset,
-        borderColor: isSelected
-          ? colors.accent.muted
-          : isFocused
-          ? colors.border.focus
-          : colors.border.subtle,
-        boxShadow: isSelected ? `0 4px 12px -2px ${colors.accent.subtle}` : 'none',
-      }}
-    >
-      {/* Checkbox */}
-      <div
-        style={{
-          ...styles.checkbox,
-          backgroundColor: isSelected ? colors.accent.default : 'transparent',
-          borderColor: isSelected ? colors.accent.default : colors.text.tertiary,
-        }}
-      >
-        {isSelected && (
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-            <path
-              d="M2.5 6l2.5 2.5 4.5-4.5"
-              stroke={colors.text.inverse}
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        )}
-      </div>
-
-      {/* Thumbnail */}
-      <div style={styles.thumbnail}>
-        {session.firstThumbnail ? (
-          <img
-            src={`file://${session.firstThumbnail}`}
-            alt="Session thumbnail"
-            style={styles.thumbnailImage}
-            onError={(e) => {
-              (e.target as HTMLImageElement).style.display = 'none';
-            }}
-          />
-        ) : (
-          <div style={styles.thumbnailPlaceholder}>
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ color: 'var(--text-tertiary)' }}>
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-              <circle cx="8.5" cy="8.5" r="1.5" />
-              <polyline points="21 15 16 10 5 21" />
-            </svg>
-          </div>
-        )}
-      </div>
-
-      {/* Content */}
-      <div style={styles.sessionContent}>
-        <div style={styles.sessionHeader}>
-          <span style={styles.sessionName}>{session.sourceName || 'Untitled Session'}</span>
-          <span style={styles.sessionDate}>{formatRelativeDate(session.startTime)}</span>
-        </div>
-        <div style={styles.sessionMeta}>
-          <span style={styles.metaItem}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M12 2v10l4 2" />
-              <circle cx="12" cy="12" r="10" />
-            </svg>
-            {formatDuration(duration)}
-          </span>
-          <span style={styles.metaItem}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-              <circle cx="8.5" cy="8.5" r="1.5" />
-              <polyline points="21 15 16 10 5 21" />
-            </svg>
-            {session.screenshotCount}
-          </span>
-          <span style={styles.metaItem}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
-              <polyline points="14 2 14 8 20 8" />
-              <line x1="16" y1="13" x2="8" y2="13" />
-              <line x1="16" y1="17" x2="8" y2="17" />
-            </svg>
-            {session.itemCount} items
-          </span>
-        </div>
-        {session.transcriptionPreview && (
-          <p style={styles.transcriptionPreview}>
-            {session.transcriptionPreview.slice(0, 80)}
-            {session.transcriptionPreview.length > 80 ? '...' : ''}
-          </p>
-        )}
-      </div>
-
-      {/* Actions (on hover) */}
-      {isHovered && (
-        <div style={styles.actionButtons}>
-          <button
-            style={styles.actionButton}
-            onClick={(e) => {
-              e.stopPropagation();
-              onOpen();
-            }}
-            title="Open Session"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
-              <polyline points="15 3 21 3 21 9" />
-              <line x1="10" y1="14" x2="21" y2="3" />
-            </svg>
-          </button>
-          <button
-            style={styles.actionButton}
-            onClick={(e) => {
-              e.stopPropagation();
-              onOpenFolder();
-            }}
-            title="Open Folder"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
-            </svg>
-          </button>
-          <button
-            style={styles.actionButton}
-            onClick={(e) => {
-              e.stopPropagation();
-              onExport();
-            }}
-            title="Export"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
-            </svg>
-          </button>
-          <button
-            style={{ ...styles.actionButton, color: colors.status.error }}
-            onClick={(e) => {
-              e.stopPropagation();
-              onDelete();
-            }}
-            title="Delete"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
-            </svg>
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * Search Input with clear button
- */
-const SearchInput: React.FC<{
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-}> = ({ value, onChange, placeholder = 'Search sessions...' }) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <div style={styles.searchContainer}>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        style={{ ...styles.searchIcon, color: 'var(--text-tertiary)' }}
-      >
-        <circle cx="11" cy="11" r="8" />
-        <path d="M21 21l-4.35-4.35" />
-      </svg>
-      <input
-        ref={inputRef}
-        type="text"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        style={styles.searchInput}
-      />
-      {value && (
-        <button
-          style={styles.clearButton}
-          onClick={() => {
-            onChange('');
-            inputRef.current?.focus();
-          }}
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <circle cx="12" cy="12" r="10" />
-            <line x1="15" y1="9" x2="9" y2="15" />
-            <line x1="9" y1="9" x2="15" y2="15" />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-};
-
-/**
- * Sort Dropdown
- */
-const SortDropdown: React.FC<{
-  sortBy: SortOption;
-  direction: SortDirection;
-  onSortChange: (sort: SortOption) => void;
-  onDirectionToggle: () => void;
-}> = ({ sortBy, direction, onSortChange, onDirectionToggle }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const sortOptions: { value: SortOption; label: string }[] = [
-    { value: 'date', label: 'Date' },
-    { value: 'name', label: 'Name' },
-    { value: 'items', label: 'Item Count' },
-    { value: 'duration', label: 'Duration' },
-  ];
-
-  const currentLabel = sortOptions.find((opt) => opt.value === sortBy)?.label || 'Date';
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  return (
-    <div ref={dropdownRef} style={styles.sortDropdown}>
-      <button style={styles.sortButton} onClick={() => setIsOpen(!isOpen)}>
-        <span>Sort: {currentLabel}</span>
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-          <path
-            d="M3 5l3 3 3-3"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </button>
-      <button
-        style={{
-          ...styles.directionButton,
-          transform: direction === 'asc' ? 'rotate(180deg)' : 'none',
-        }}
-        onClick={onDirectionToggle}
-        title={direction === 'desc' ? 'Newest first' : 'Oldest first'}
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
-      </button>
-      {isOpen && (
-        <div style={styles.sortDropdownMenu}>
-          {sortOptions.map((option) => (
-            <button
-              key={option.value}
-              style={{
-                ...styles.sortDropdownItem,
-                backgroundColor: sortBy === option.value ? 'var(--accent-subtle)' : 'transparent',
-              }}
-              onClick={() => {
-                onSortChange(option.value);
-                setIsOpen(false);
-              }}
-            >
-              {option.label}
-              {sortBy === option.value && (
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent-default)" strokeWidth="2">
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * Context Menu
- */
-const ContextMenu: React.FC<{
-  state: ContextMenuState;
-  onClose: () => void;
-  onOpen: () => void;
-  onOpenFolder: () => void;
-  onExport: () => void;
-  onDelete: () => void;
-  onSelectAll: () => void;
-}> = ({ state, onClose, onOpen, onOpenFolder, onExport, onDelete, onSelectAll }) => {
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [onClose]);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
-
-  if (!state.visible) return null;
-
-  return (
-    <div
-      ref={menuRef}
-      style={{
-        ...styles.contextMenu,
-        top: state.y,
-        left: state.x,
-      }}
-    >
-      <button style={styles.contextMenuItem} onClick={onOpen}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
-          <polyline points="15 3 21 3 21 9" />
-          <line x1="10" y1="14" x2="21" y2="3" />
-        </svg>
-        Open
-      </button>
-      <button style={styles.contextMenuItem} onClick={onOpenFolder}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
-        </svg>
-        Open Folder
-      </button>
-      <div style={styles.contextMenuDivider} />
-      <button style={styles.contextMenuItem} onClick={onExport}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-          <polyline points="7 10 12 15 17 10" />
-          <line x1="12" y1="15" x2="12" y2="3" />
-        </svg>
-        Export
-      </button>
-      <button style={styles.contextMenuItem} onClick={onSelectAll}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-          <path d="M9 9h6v6H9z" />
-        </svg>
-        Select All
-      </button>
-      <div style={styles.contextMenuDivider} />
-      <button style={{ ...styles.contextMenuItem, color: 'var(--status-error)' }} onClick={onDelete}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
-        </svg>
-        Delete
-      </button>
-    </div>
-  );
-};
-
-/**
- * Delete Confirmation Dialog
- */
-const DeleteConfirmDialog: React.FC<{
-  isOpen: boolean;
-  count: number;
-  onConfirm: () => void;
-  onCancel: () => void;
-}> = ({ isOpen, count, onConfirm, onCancel }) => {
-  if (!isOpen) return null;
-
-  return (
-    <div style={styles.dialogOverlay}>
-      <div style={styles.dialogBackdrop} onClick={onCancel} />
-      <div style={styles.dialog}>
-        <div style={styles.dialogIcon}>
-          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--status-error)" strokeWidth="1.5">
-            <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
-            <line x1="10" y1="11" x2="10" y2="17" />
-            <line x1="14" y1="11" x2="14" y2="17" />
-          </svg>
-        </div>
-        <h3 style={styles.dialogTitle}>
-          Delete {count} session{count > 1 ? 's' : ''}?
-        </h3>
-        <p style={styles.dialogMessage}>
-          This will permanently delete the session{count > 1 ? 's' : ''} and all associated screenshots. This action
-          cannot be undone.
-        </p>
-        <div style={styles.dialogButtons}>
-          <button style={styles.dialogCancelButton} onClick={onCancel}>
-            Cancel
-          </button>
-          <button style={styles.dialogDeleteButton} onClick={onConfirm}>
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-/**
- * Empty State
- */
-const EmptyState: React.FC<{ hasSearch: boolean; onClear: () => void }> = ({ hasSearch, onClear }) => (
-  <div style={styles.emptyState}>
-    <div style={styles.emptyIcon}>
-      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" style={{ color: 'var(--text-tertiary)' }}>
-        {hasSearch ? (
-          <>
-            <circle cx="11" cy="11" r="8" />
-            <path d="M21 21l-4.35-4.35" />
-            <path d="M8 11h6" strokeWidth="1.5" />
-          </>
-        ) : (
-          <>
-            <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
-            <path d="M12 11v6M9 14h6" strokeWidth="1.5" strokeLinecap="round" />
-          </>
-        )}
-      </svg>
-    </div>
-    <h3 style={styles.emptyTitle}>{hasSearch ? 'No sessions found' : 'No sessions yet'}</h3>
-    <p style={styles.emptyMessage}>
-      {hasSearch
-        ? "Try adjusting your search terms or clear the filter to see all sessions."
-        : 'Start recording feedback to see your sessions here.'}
-    </p>
-    {hasSearch && (
-      <button style={styles.emptyClearButton} onClick={onClear}>
-        Clear Search
-      </button>
-    )}
-  </div>
-);
-
-/**
- * Loading State
- */
-const LoadingState: React.FC = () => (
-  <div style={styles.loadingContainer}>
-    {Array.from({ length: 5 }).map((_, index) => (
-      <div
-        key={index}
-        style={{
-          ...styles.skeletonCard,
-          animationDelay: `${index * 100}ms`,
-        }}
-        className="ff-list-item-enter"
-      >
-        <Skeleton width={20} height={20} rounded={4} />
-        <Skeleton width={80} height={56} rounded={8} />
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
-          <Skeleton width="60%" height={16} />
-          <Skeleton width="40%" height={12} />
-          <SkeletonText lines={1} animation="shimmer" />
-        </div>
-      </div>
-    ))}
-  </div>
-);
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
-export function SessionHistory({ isOpen, onClose, onOpenSession }: SessionHistoryProps) {
-  // State
-  const [sessions, setSessions] = useState<SessionMetadata[]>([]);
-  const [search, setSearch] = useState('');
-  const [sortBy, setSortBy] = useState<SortOption>('date');
-  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [focusedIndex, setFocusedIndex] = useState<number>(-1);
-  const [isLoading, setIsLoading] = useState(true);
-  const [contextMenu, setContextMenu] = useState<ContextMenuState>({
-    visible: false,
-    x: 0,
-    y: 0,
-    sessionId: null,
-  });
-  const [deleteConfirm, setDeleteConfirm] = useState<{
-    isOpen: boolean;
-    sessionIds: string[];
-  }>({ isOpen: false, sessionIds: [] });
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-
-  // Load sessions on mount/open
-  useEffect(() => {
-    if (!isOpen) return;
-
-    async function loadSessions() {
-      setIsLoading(true);
-      try {
-        // Call the IPC API to list sessions
-        // The API is typed in electron.d.ts as window.markupr.output.listSessions()
-        if (window.markupr?.output?.listSessions) {
-          const list = await window.markupr.output.listSessions();
-          setSessions(list);
-        } else {
-          // Fallback for development/testing without full IPC wiring
-          console.warn('[SessionHistory] listSessions API not available');
-          setSessions([]);
-        }
-      } catch (error) {
-        console.error('Failed to load sessions:', error);
-        setSessions([]);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-
-    loadSessions();
-    setSelected(new Set());
-    setFocusedIndex(-1);
-  }, [isOpen]);
-
-  // Filter and sort sessions
-  const filteredSessions = useMemo(() => {
-    let result = sessions;
-
-    // Filter by search
-    if (search) {
-      const searchLower = search.toLowerCase();
-      result = result.filter(
-        (s) =>
-          s.sourceName.toLowerCase().includes(searchLower) ||
-          (s.transcriptionPreview && s.transcriptionPreview.toLowerCase().includes(searchLower))
-      );
-    }
-
-    // Sort
-    result = [...result].sort((a, b) => {
-      let comparison = 0;
-
-      switch (sortBy) {
-        case 'date':
-          comparison = b.startTime - a.startTime;
-          break;
-        case 'name':
-          comparison = (a.sourceName || '').localeCompare(b.sourceName || '');
-          break;
-        case 'items':
-          comparison = b.itemCount - a.itemCount;
-          break;
-        case 'duration':
-          comparison = (b.endTime - b.startTime) - (a.endTime - a.startTime);
-          break;
-      }
-
-      return sortDirection === 'desc' ? comparison : -comparison;
-    });
-
-    return result;
-  }, [sessions, search, sortBy, sortDirection]);
-
-  // Handlers
-  const handleSelectSession = useCallback(
-    (sessionId: string, shift: boolean, ctrl: boolean) => {
-      setSelected((prev) => {
-        const newSet = new Set(prev);
-
-        if (shift && focusedIndex >= 0) {
-          // Range selection
-          const currentIndex = filteredSessions.findIndex((s) => s.id === sessionId);
-          const start = Math.min(focusedIndex, currentIndex);
-          const end = Math.max(focusedIndex, currentIndex);
-
-          for (let i = start; i <= end; i++) {
-            newSet.add(filteredSessions[i].id);
-          }
-        } else if (ctrl) {
-          // Toggle selection
-          if (newSet.has(sessionId)) {
-            newSet.delete(sessionId);
-          } else {
-            newSet.add(sessionId);
-          }
-        } else {
-          // Single selection
-          newSet.clear();
-          newSet.add(sessionId);
-        }
-
-        return newSet;
-      });
-
-      // Update focused index
-      const index = filteredSessions.findIndex((s) => s.id === sessionId);
-      if (index >= 0) {
-        setFocusedIndex(index);
-      }
-    },
-    [filteredSessions, focusedIndex]
-  );
-
-  const handleOpenSession = useCallback(
-    (session: SessionMetadata) => {
-      onOpenSession(session);
-      onClose();
-    },
-    [onOpenSession, onClose]
-  );
-
-  const handleDeleteSessions = useCallback((sessionIds: string[]) => {
-    setDeleteConfirm({ isOpen: true, sessionIds });
-  }, []);
-
-  const handleConfirmDelete = useCallback(async () => {
-    const { sessionIds } = deleteConfirm;
-
-    try {
-      // Call the IPC API to delete sessions
-      if (window.markupr?.output?.deleteSessions) {
-        const result = await window.markupr.output.deleteSessions(sessionIds);
-        if (result.success) {
-          // Remove successfully deleted sessions from state
-          setSessions((prev) => prev.filter((s) => !result.deleted.includes(s.id)));
-          setSelected((prev) => {
-            const newSet = new Set(prev);
-            result.deleted.forEach((id) => newSet.delete(id));
-            return newSet;
-          });
-        }
-        if (result.failed.length > 0) {
-          console.warn('Some sessions failed to delete:', result.failed);
-        }
-      } else {
-        // Fallback: just remove from local state
-        setSessions((prev) => prev.filter((s) => !sessionIds.includes(s.id)));
-        setSelected((prev) => {
-          const newSet = new Set(prev);
-          sessionIds.forEach((id) => newSet.delete(id));
-          return newSet;
-        });
-      }
-    } catch (error) {
-      console.error('Failed to delete sessions:', error);
-    }
-
-    setDeleteConfirm({ isOpen: false, sessionIds: [] });
-  }, [deleteConfirm]);
-
-  const handleExportSessions = useCallback(async (sessionIds: string[]) => {
-    try {
-      // Call the IPC API to export sessions
-      if (window.markupr?.output?.exportSessions) {
-        const result = await window.markupr.output.exportSessions(sessionIds);
-        if (result.success && result.path) {
-          console.log('Sessions exported to:', result.path);
-          // Optionally open the folder containing the export
-          await window.markupr.output.openFolder(result.path);
-        } else if (result.error) {
-          console.error('Export failed:', result.error);
-        }
-      } else {
-        console.warn('[SessionHistory] exportSessions API not available');
-      }
-    } catch (error) {
-      console.error('Failed to export sessions:', error);
-    }
-  }, []);
-
-  const handleOpenFolder = useCallback(async (session: SessionMetadata) => {
-    try {
-      await window.markupr.output.openFolder(session.folder);
-    } catch (error) {
-      console.error('Failed to open folder:', error);
-    }
-  }, []);
-
-  const handleSelectAll = useCallback(() => {
-    setSelected(new Set(filteredSessions.map((s) => s.id)));
-  }, [filteredSessions]);
-
-  const handleDeselectAll = useCallback(() => {
-    setSelected(new Set());
-  }, []);
-
-  const handleContextMenu = useCallback((e: React.MouseEvent, sessionId: string) => {
-    e.preventDefault();
-    setContextMenu({
-      visible: true,
-      x: e.clientX,
-      y: e.clientY,
-      sessionId,
-    });
-  }, []);
-
-  // Keyboard navigation
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Close on Escape
-      if (e.key === 'Escape') {
-        if (contextMenu.visible) {
-          setContextMenu((prev) => ({ ...prev, visible: false }));
-        } else if (deleteConfirm.isOpen) {
-          setDeleteConfirm({ isOpen: false, sessionIds: [] });
-        } else {
-          onClose();
-        }
-        return;
-      }
-
-      // Navigation
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setFocusedIndex((prev) => Math.min(prev + 1, filteredSessions.length - 1));
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setFocusedIndex((prev) => Math.max(prev - 1, 0));
-      } else if (e.key === ' ' && focusedIndex >= 0) {
-        e.preventDefault();
-        const session = filteredSessions[focusedIndex];
-        handleSelectSession(session.id, e.shiftKey, true);
-      } else if (e.key === 'Enter' && focusedIndex >= 0) {
-        e.preventDefault();
-        const session = filteredSessions[focusedIndex];
-        handleOpenSession(session);
-      } else if (e.key === 'Delete' || e.key === 'Backspace') {
-        if (selected.size > 0 && !e.metaKey && !e.ctrlKey) {
-          e.preventDefault();
-          handleDeleteSessions(Array.from(selected));
-        }
-      } else if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
-        e.preventDefault();
-        handleSelectAll();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [
-    isOpen,
-    filteredSessions,
-    focusedIndex,
-    selected,
-    contextMenu.visible,
-    deleteConfirm.isOpen,
-    handleSelectSession,
-    handleOpenSession,
-    handleDeleteSessions,
-    handleSelectAll,
-    onClose,
-  ]);
-
-  // Scroll focused item into view
-  useEffect(() => {
-    if (focusedIndex >= 0 && listRef.current) {
-      const item = listRef.current.children[focusedIndex] as HTMLElement;
-      if (item) {
-        item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-      }
-    }
-  }, [focusedIndex]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div style={styles.overlay}>
-      {/* dialogEnter keyframe provided by animations.css; scrollbar styles below */}
-      <style>
-        {`
-          .markupr-history-scrollbar::-webkit-scrollbar {
-            width: 8px;
-          }
-
-          .markupr-history-scrollbar::-webkit-scrollbar-track {
-            background: var(--surface-inset);
-            border-radius: 4px;
-          }
-
-          .markupr-history-scrollbar::-webkit-scrollbar-thumb {
-            background: var(--border-strong);
-            border-radius: 4px;
-          }
-
-          .markupr-history-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: var(--text-tertiary);
-          }
-        `}
-      </style>
-
-      <div style={styles.backdrop} onClick={onClose} />
-
-      <div ref={containerRef} style={styles.panel} className="ff-dialog-enter">
-        {/* Header */}
-        <div style={styles.header}>
-          <div style={styles.headerLeft}>
-            <h2 style={styles.headerTitle}>Session History</h2>
-            {!isLoading && (
-              <span style={styles.sessionCount}>
-                {filteredSessions.length} session{filteredSessions.length !== 1 ? 's' : ''}
-              </span>
-            )}
-          </div>
-          <SearchInput value={search} onChange={setSearch} />
-          <button style={styles.closeButton} onClick={onClose} aria-label="Close">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <path d="M5 5l10 10M15 5l-10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-            </svg>
-          </button>
-        </div>
-
-        {/* Toolbar */}
-        <div style={styles.toolbar}>
-          <div style={styles.toolbarLeft}>
-            <SortDropdown
-              sortBy={sortBy}
-              direction={sortDirection}
-              onSortChange={setSortBy}
-              onDirectionToggle={() => setSortDirection((d) => (d === 'desc' ? 'asc' : 'desc'))}
-            />
-            {selected.size > 0 && (
-              <span style={styles.selectedCount}>
-                {selected.size} selected
-                <button style={styles.deselectButton} onClick={handleDeselectAll}>
-                  Clear
-                </button>
-              </span>
-            )}
-          </div>
-          <div style={styles.toolbarRight}>
-            {selected.size > 0 && (
-              <>
-                <button
-                  style={styles.bulkButton}
-                  onClick={() => handleExportSessions(Array.from(selected))}
-                  title="Export selected"
-                >
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-                    <polyline points="7 10 12 15 17 10" />
-                    <line x1="12" y1="15" x2="12" y2="3" />
-                  </svg>
-                  Export
-                </button>
-                <button
-                  style={{ ...styles.bulkButton, ...styles.deleteButton }}
-                  onClick={() => handleDeleteSessions(Array.from(selected))}
-                  title="Delete selected"
-                >
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" />
-                  </svg>
-                  Delete
-                </button>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Content */}
-        <div ref={listRef} style={styles.content} className="markupr-history-scrollbar" role="grid">
-          {isLoading ? (
-            <LoadingState />
-          ) : filteredSessions.length === 0 ? (
-            <EmptyState hasSearch={!!search} onClear={() => setSearch('')} />
-          ) : (
-            filteredSessions.map((session, index) => (
-              <SessionCard
-                key={session.id}
-                session={session}
-                isSelected={selected.has(session.id)}
-                isFocused={focusedIndex === index}
-                onSelect={(shift, ctrl) => handleSelectSession(session.id, shift, ctrl)}
-                onOpen={() => handleOpenSession(session)}
-                onDelete={() => handleDeleteSessions([session.id])}
-                onExport={() => handleExportSessions([session.id])}
-                onOpenFolder={() => handleOpenFolder(session)}
-                onContextMenu={(e) => handleContextMenu(e, session.id)}
-              />
-            ))
-          )}
-        </div>
-
-        {/* Footer */}
-        <div style={styles.footer}>
-          <div style={styles.footerLeft}>
-            <span style={styles.footerHint}>
-              <kbd style={styles.kbd}>Arrow</kbd> Navigate
-              <kbd style={styles.kbd}>Space</kbd> Select
-              <kbd style={styles.kbd}>Enter</kbd> Open
-              <kbd style={styles.kbd}>Del</kbd> Delete
-            </span>
-          </div>
-          <button style={styles.closeFooterButton} onClick={onClose}>
-            Close
-          </button>
-        </div>
-      </div>
-
-      {/* Context Menu */}
-      <ContextMenu
-        state={contextMenu}
-        onClose={() => setContextMenu((prev) => ({ ...prev, visible: false }))}
-        onOpen={() => {
-          const session = filteredSessions.find((s) => s.id === contextMenu.sessionId);
-          if (session) handleOpenSession(session);
-          setContextMenu((prev) => ({ ...prev, visible: false }));
-        }}
-        onOpenFolder={() => {
-          const session = filteredSessions.find((s) => s.id === contextMenu.sessionId);
-          if (session) handleOpenFolder(session);
-          setContextMenu((prev) => ({ ...prev, visible: false }));
-        }}
-        onExport={() => {
-          if (contextMenu.sessionId) handleExportSessions([contextMenu.sessionId]);
-          setContextMenu((prev) => ({ ...prev, visible: false }));
-        }}
-        onDelete={() => {
-          if (contextMenu.sessionId) handleDeleteSessions([contextMenu.sessionId]);
-          setContextMenu((prev) => ({ ...prev, visible: false }));
-        }}
-        onSelectAll={() => {
-          handleSelectAll();
-          setContextMenu((prev) => ({ ...prev, visible: false }));
-        }}
-      />
-
-      {/* Delete Confirmation Dialog */}
-      <DeleteConfirmDialog
-        isOpen={deleteConfirm.isOpen}
-        count={deleteConfirm.sessionIds.length}
-        onConfirm={handleConfirmDelete}
-        onCancel={() => setDeleteConfirm({ isOpen: false, sessionIds: [] })}
-      />
-    </div>
-  );
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-type ExtendedCSSProperties = React.CSSProperties & {
-  WebkitAppRegion?: 'drag' | 'no-drag';
-};
-
-const styles: Record<string, ExtendedCSSProperties> = {
-  // Overlay & Panel
-  overlay: {
-    position: 'fixed',
-    inset: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 100,
-    padding: 24,
-  },
-
-  backdrop: {
-    position: 'absolute',
-    inset: 0,
-    backgroundColor: 'var(--bg-overlay)',
-    backdropFilter: 'blur(4px)',
-  },
-
-  panel: {
-    position: 'relative',
-    width: '100%',
-    maxWidth: 900,
-    maxHeight: '90vh',
-    backgroundColor: 'var(--surface-glass)',
-    borderRadius: 16,
-    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-default)',
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-  },
-
-  // Header
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 16,
-    padding: '20px 24px',
-    borderBottom: '1px solid var(--border-default)',
-    WebkitAppRegion: 'drag',
-  },
-
-  headerLeft: {
-    display: 'flex',
-    alignItems: 'baseline',
-    gap: 12,
-    WebkitAppRegion: 'no-drag',
-  },
-
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: 600,
-    color: 'var(--text-primary)',
-    margin: 0,
-  },
-
-  sessionCount: {
-    fontSize: 13,
-    color: 'var(--text-tertiary)',
-    fontWeight: 400,
-  },
-
-  closeButton: {
-    width: 32,
-    height: 32,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 8,
-    color: 'var(--text-secondary)',
-    cursor: 'pointer',
-    transition: 'all 0.2s ease',
-    WebkitAppRegion: 'no-drag',
-    marginLeft: 8,
-  },
-
-  // Search
-  searchContainer: {
-    flex: 1,
-    maxWidth: 280,
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    WebkitAppRegion: 'no-drag',
-  },
-
-  searchIcon: {
-    position: 'absolute',
-    left: 12,
-    pointerEvents: 'none',
-  },
-
-  searchInput: {
-    width: '100%',
-    padding: '8px 36px 8px 38px',
-    backgroundColor: 'var(--surface-inset)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 8,
-    color: 'var(--text-primary)',
-    fontSize: 13,
-    outline: 'none',
-    transition: 'border-color 0.2s ease',
-  },
-
-  clearButton: {
-    position: 'absolute',
-    right: 8,
-    width: 24,
-    height: 24,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 4,
-    color: 'var(--text-tertiary)',
-    cursor: 'pointer',
-  },
-
-  // Toolbar
-  toolbar: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '12px 24px',
-    borderBottom: '1px solid var(--border-subtle)',
-    backgroundColor: 'var(--surface-glass)',
-  },
-
-  toolbarLeft: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 16,
-  },
-
-  toolbarRight: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-  },
-
-  selectedCount: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-    fontSize: 13,
-    color: 'var(--text-link)',
-    fontWeight: 500,
-  },
-
-  deselectButton: {
-    padding: '2px 8px',
-    backgroundColor: 'transparent',
-    border: '1px solid var(--accent-subtle)',
-    borderRadius: 4,
-    color: 'var(--text-link)',
-    fontSize: 11,
-    cursor: 'pointer',
-  },
-
-  // Sort Dropdown
-  sortDropdown: {
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    gap: 4,
-  },
-
-  sortButton: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-    padding: '6px 10px',
-    backgroundColor: 'var(--surface-inset)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 6,
-    color: 'var(--text-secondary)',
-    fontSize: 12,
-    fontWeight: 500,
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-
-  directionButton: {
-    width: 28,
-    height: 28,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'var(--surface-inset)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 6,
-    color: 'var(--text-secondary)',
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-
-  sortDropdownMenu: {
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    marginTop: 4,
-    minWidth: 140,
-    backgroundColor: 'var(--bg-elevated)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 8,
-    padding: 4,
-    zIndex: 50,
-    boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.4)',
-  },
-
-  sortDropdownItem: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    padding: '8px 12px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 4,
-    color: 'var(--text-primary)',
-    fontSize: 13,
-    textAlign: 'left',
-    cursor: 'pointer',
-    transition: 'background-color 0.15s ease',
-  },
-
-  // Bulk Actions
-  bulkButton: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-    padding: '6px 12px',
-    backgroundColor: 'var(--surface-inset)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 6,
-    color: 'var(--text-secondary)',
-    fontSize: 12,
-    fontWeight: 500,
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-
-  deleteButton: {
-    backgroundColor: 'var(--status-error-subtle)',
-    borderColor: 'var(--status-error)',
-    color: 'var(--status-error)',
-  },
-
-  // Content
-  content: {
-    flex: 1,
-    padding: 16,
-    overflowY: 'auto',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 8,
-  },
-
-  // Session Card
-  sessionCard: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-    padding: 12,
-    borderRadius: 10,
-    border: '1px solid',
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-    outline: 'none',
-  },
-
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderRadius: 4,
-    border: '2px solid',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    transition: 'all 0.15s ease',
-  },
-
-  thumbnail: {
-    width: 80,
-    height: 56,
-    borderRadius: 6,
-    overflow: 'hidden',
-    backgroundColor: 'var(--surface-inset)',
-    flexShrink: 0,
-  },
-
-  thumbnailImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-
-  thumbnailPlaceholder: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'var(--surface-inset)',
-  },
-
-  sessionContent: {
-    flex: 1,
-    minWidth: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 4,
-  },
-
-  sessionHeader: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 8,
-  },
-
-  sessionName: {
-    fontSize: 14,
-    fontWeight: 500,
-    color: 'var(--text-primary)',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-
-  sessionDate: {
-    fontSize: 11,
-    color: 'var(--text-tertiary)',
-    whiteSpace: 'nowrap',
-    flexShrink: 0,
-  },
-
-  sessionMeta: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-  },
-
-  metaItem: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 4,
-    fontSize: 12,
-    color: 'var(--text-secondary)',
-  },
-
-  transcriptionPreview: {
-    margin: 0,
-    fontSize: 12,
-    color: 'var(--text-tertiary)',
-    lineHeight: 1.4,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-
-  actionButtons: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 4,
-    marginLeft: 8,
-    flexShrink: 0,
-  },
-
-  actionButton: {
-    width: 32,
-    height: 32,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'var(--surface-inset)',
-    border: 'none',
-    borderRadius: 6,
-    color: 'var(--text-secondary)',
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-
-  // Context Menu
-  contextMenu: {
-    position: 'fixed',
-    minWidth: 160,
-    backgroundColor: 'var(--bg-elevated)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 8,
-    padding: 4,
-    zIndex: 200,
-    boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.5)',
-  },
-
-  contextMenuItem: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 10,
-    width: '100%',
-    padding: '8px 12px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: 4,
-    color: 'var(--text-primary)',
-    fontSize: 13,
-    textAlign: 'left',
-    cursor: 'pointer',
-    transition: 'background-color 0.15s ease',
-  },
-
-  contextMenuDivider: {
-    height: 1,
-    backgroundColor: 'var(--border-subtle)',
-    margin: '4px 0',
-  },
-
-  // Delete Dialog
-  dialogOverlay: {
-    position: 'fixed',
-    inset: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 300,
-  },
-
-  dialogBackdrop: {
-    position: 'absolute',
-    inset: 0,
-    backgroundColor: 'var(--bg-overlay)',
-  },
-
-  dialog: {
-    position: 'relative',
-    width: 320,
-    backgroundColor: 'var(--bg-elevated)',
-    borderRadius: 12,
-    padding: 24,
-    textAlign: 'center',
-    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
-  },
-
-  dialogIcon: {
-    width: 56,
-    height: 56,
-    margin: '0 auto 16px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'var(--status-error-subtle)',
-    borderRadius: '50%',
-  },
-
-  dialogTitle: {
-    fontSize: 16,
-    fontWeight: 600,
-    color: 'var(--text-primary)',
-    margin: '0 0 8px',
-  },
-
-  dialogMessage: {
-    fontSize: 13,
-    color: 'var(--text-secondary)',
-    margin: '0 0 20px',
-    lineHeight: 1.5,
-  },
-
-  dialogButtons: {
-    display: 'flex',
-    gap: 8,
-  },
-
-  dialogCancelButton: {
-    flex: 1,
-    padding: '10px 16px',
-    backgroundColor: 'var(--surface-inset)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 8,
-    color: 'var(--text-secondary)',
-    fontSize: 13,
-    fontWeight: 500,
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-
-  dialogDeleteButton: {
-    flex: 1,
-    padding: '10px 16px',
-    backgroundColor: 'var(--status-error)',
-    border: 'none',
-    borderRadius: 8,
-    color: 'var(--text-inverse)',
-    fontSize: 13,
-    fontWeight: 500,
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-
-  // Empty State
-  emptyState: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 40,
-    textAlign: 'center',
-  },
-
-  emptyIcon: {
-    width: 80,
-    height: 80,
-    marginBottom: 16,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'var(--surface-inset)',
-    borderRadius: '50%',
-  },
-
-  emptyTitle: {
-    fontSize: 16,
-    fontWeight: 500,
-    color: 'var(--text-secondary)',
-    margin: '0 0 8px',
-  },
-
-  emptyMessage: {
-    fontSize: 13,
-    color: 'var(--text-tertiary)',
-    margin: '0 0 16px',
-    maxWidth: 280,
-    lineHeight: 1.5,
-  },
-
-  emptyClearButton: {
-    padding: '8px 16px',
-    backgroundColor: 'var(--accent-subtle)',
-    border: '1px solid var(--accent-muted)',
-    borderRadius: 6,
-    color: 'var(--text-link)',
-    fontSize: 13,
-    fontWeight: 500,
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-
-  // Loading
-  loadingContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 8,
-  },
-
-  skeletonCard: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-    padding: 12,
-    backgroundColor: 'var(--surface-inset)',
-    borderRadius: 10,
-    border: '1px solid var(--border-subtle)',
-  },
-
-  // Footer
-  footer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '12px 24px',
-    borderTop: '1px solid var(--border-default)',
-    backgroundColor: 'var(--surface-glass)',
-  },
-
-  footerLeft: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-
-  footerHint: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 12,
-    fontSize: 11,
-    color: 'var(--text-tertiary)',
-  },
-
-  kbd: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: 20,
-    padding: '2px 6px',
-    marginRight: 4,
-    backgroundColor: 'var(--surface-inset)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 4,
-    fontSize: 10,
-    fontWeight: 500,
-    color: 'var(--text-secondary)',
-    fontFamily: 'ui-monospace, SFMono-Regular, monospace',
-  },
-
-  closeFooterButton: {
-    padding: '8px 20px',
-    backgroundColor: 'var(--surface-inset)',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 8,
-    color: 'var(--text-secondary)',
-    fontSize: 13,
-    fontWeight: 500,
-    cursor: 'pointer',
-    transition: 'all 0.15s ease',
-  },
-};
-
-export default SessionHistory;