markupr 2.1.8

package/src/renderer/components/SessionReview.tsx

@@ -0,0 +1,1321 @@
+/**
+ * SessionReview - Premium Feedback Review Experience
+ *
+ * A document-editor-style interface for reviewing and editing feedback before export.
+ *
+ * Features:
+ * - Thumbnail grid with drag-to-reorder
+ * - Inline transcript editing
+ * - Delete with undo (5 second toast)
+ * - Split view: items list (60%) / Markdown preview (40%)
+ * - Category/severity tags (clickable to change)
+ * - Save/Copy/Open Folder actions
+ * - Full keyboard navigation (Up/Down, Delete, Enter)
+ */
+
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import type {
+  ReviewSession as Session,
+  ReviewFeedbackItem as FeedbackItem,
+  ReviewFeedbackCategory as FeedbackCategory,
+  ReviewFeedbackSeverity as FeedbackSeverity,
+} from '../../shared/types';
+import { useTheme } from '../hooks/useTheme';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface SessionReviewProps {
+  session: Session;
+  onSave: (session: Session) => void;
+  onCopy: () => void;
+  onOpenFolder: () => void;
+  onClose: () => void;
+}
+
+interface DeletedItem {
+  item: FeedbackItem;
+  index: number;
+  timeoutId: NodeJS.Timeout;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const CATEGORIES: FeedbackCategory[] = ['Bug', 'UX Issue', 'Suggestion', 'Performance', 'Question', 'General'];
+const SEVERITIES: FeedbackSeverity[] = ['Critical', 'High', 'Medium', 'Low'];
+
+// Category and severity color maps are now created inside components using useTheme()
+// to support dynamic theme switching.
+
+const UNDO_DURATION_MS = 5000;
+
+// ============================================================================
+// Sub-Components
+// ============================================================================
+
+/**
+ * FeedbackItemCard - Draggable, editable feedback item
+ */
+interface FeedbackItemCardProps {
+  item: FeedbackItem;
+  index: number;
+  isSelected: boolean;
+  isEditing: boolean;
+  isDragging: boolean;
+  dragOverIndex: number | null;
+  onSelect: () => void;
+  onStartEdit: () => void;
+  onSaveEdit: (newText: string) => void;
+  onCancelEdit: () => void;
+  onDelete: () => void;
+  onCategoryChange: (category: FeedbackCategory) => void;
+  onSeverityChange: (severity: FeedbackSeverity) => void;
+  onDragStart: (e: React.DragEvent, index: number) => void;
+  onDragOver: (e: React.DragEvent, index: number) => void;
+  onDragEnd: () => void;
+  onThumbnailClick: (imagePath: string) => void;
+}
+
+const FeedbackItemCard: React.FC<FeedbackItemCardProps> = ({
+  item,
+  index,
+  isSelected,
+  isEditing,
+  isDragging,
+  dragOverIndex,
+  onSelect,
+  onStartEdit,
+  onSaveEdit,
+  onCancelEdit,
+  onDelete,
+  onCategoryChange,
+  onSeverityChange,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  onThumbnailClick,
+}) => {
+  const [editText, setEditText] = useState(item.transcription);
+  const [showCategoryDropdown, setShowCategoryDropdown] = useState(false);
+  const [showSeverityDropdown, setShowSeverityDropdown] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const editInputRef = useRef<HTMLTextAreaElement>(null);
+  const { colors } = useTheme();
+
+  const CATEGORY_COLORS = useMemo((): Record<FeedbackCategory, string> => ({
+    Bug: colors.status.error,
+    'UX Issue': colors.status.warning,
+    Suggestion: colors.accent.default,
+    Performance: colors.status.success,
+    Question: colors.status.info,
+    General: colors.text.tertiary,
+  }), [colors]);
+
+  const SEVERITY_COLORS = useMemo((): Record<FeedbackSeverity, string> => ({
+    Critical: colors.status.error,
+    High: colors.status.warning,
+    Medium: colors.status.warning,
+    Low: colors.status.success,
+  }), [colors]);
+
+  useEffect(() => {
+    if (isEditing && editInputRef.current) {
+      editInputRef.current.focus();
+      editInputRef.current.select();
+    }
+  }, [isEditing]);
+
+  useEffect(() => {
+    setEditText(item.transcription);
+  }, [item.transcription]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSaveEdit(editText);
+    } else if (e.key === 'Escape') {
+      onCancelEdit();
+      setEditText(item.transcription);
+    }
+  };
+
+  const category = item.category || 'General';
+  const severity = item.severity || 'Medium';
+  const isDropTarget = dragOverIndex === index && !isDragging;
+
+  return (
+    <div
+      draggable={!isEditing}
+      onDragStart={(e) => onDragStart(e, index)}
+      onDragOver={(e) => onDragOver(e, index)}
+      onDragEnd={onDragEnd}
+      onClick={onSelect}
+      onDoubleClick={onStartEdit}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => {
+        setIsHovered(false);
+        setShowCategoryDropdown(false);
+        setShowSeverityDropdown(false);
+      }}
+      style={{
+        ...styles.card,
+        backgroundColor: isSelected ? colors.accent.subtle : colors.surface.inset,
+        borderColor: isSelected ? colors.accent.muted : colors.border.subtle,
+        transform: isDragging ? 'scale(0.98) rotate(1deg)' : isDropTarget ? 'translateY(4px)' : 'none',
+        opacity: isDragging ? 0.6 : 1,
+        boxShadow: isDropTarget
+          ? `0 -2px 0 0 ${colors.accent.default}, 0 8px 16px -4px rgba(0, 0, 0, 0.3)`
+          : isSelected
+          ? `0 8px 16px -4px ${colors.accent.subtle}`
+          : 'none',
+      }}
+    >
+      {/* Drag Handle */}
+      <div style={styles.dragHandle}>
+        <svg width="12" height="20" viewBox="0 0 12 20" fill="none">
+          <circle cx="3" cy="4" r="1.5" fill="currentColor" />
+          <circle cx="9" cy="4" r="1.5" fill="currentColor" />
+          <circle cx="3" cy="10" r="1.5" fill="currentColor" />
+          <circle cx="9" cy="10" r="1.5" fill="currentColor" />
+          <circle cx="3" cy="16" r="1.5" fill="currentColor" />
+          <circle cx="9" cy="16" r="1.5" fill="currentColor" />
+        </svg>
+      </div>
+
+      {/* Content Area */}
+      <div style={styles.cardContent}>
+        {/* Header Row: ID + Tags */}
+        <div style={styles.cardHeader}>
+          <span style={styles.itemId}>FB-{(index + 1).toString().padStart(3, '0')}</span>
+
+          {/* Category Tag */}
+          <div style={{ position: 'relative' }}>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowCategoryDropdown(!showCategoryDropdown);
+                setShowSeverityDropdown(false);
+              }}
+              style={{
+                ...styles.tag,
+                backgroundColor: `${CATEGORY_COLORS[category]}20`,
+                color: CATEGORY_COLORS[category],
+                borderColor: `${CATEGORY_COLORS[category]}40`,
+              }}
+            >
+              {category}
+            </button>
+            {showCategoryDropdown && (
+              <div style={styles.dropdown}>
+                {CATEGORIES.map((cat) => (
+                  <button
+                    key={cat}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onCategoryChange(cat);
+                      setShowCategoryDropdown(false);
+                    }}
+                    style={{
+                      ...styles.dropdownItem,
+                      backgroundColor: cat === category ? colors.accent.subtle : 'transparent',
+                    }}
+                  >
+                    <span
+                      style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: '50%',
+                        backgroundColor: CATEGORY_COLORS[cat],
+                        marginRight: 8,
+                      }}
+                    />
+                    {cat}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Severity Tag */}
+          <div style={{ position: 'relative' }}>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowSeverityDropdown(!showSeverityDropdown);
+                setShowCategoryDropdown(false);
+              }}
+              style={{
+                ...styles.tag,
+                backgroundColor: `${SEVERITY_COLORS[severity]}20`,
+                color: SEVERITY_COLORS[severity],
+                borderColor: `${SEVERITY_COLORS[severity]}40`,
+              }}
+            >
+              {severity}
+            </button>
+            {showSeverityDropdown && (
+              <div style={styles.dropdown}>
+                {SEVERITIES.map((sev) => (
+                  <button
+                    key={sev}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onSeverityChange(sev);
+                      setShowSeverityDropdown(false);
+                    }}
+                    style={{
+                      ...styles.dropdownItem,
+                      backgroundColor: sev === severity ? colors.accent.subtle : 'transparent',
+                    }}
+                  >
+                    <span
+                      style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: '50%',
+                        backgroundColor: SEVERITY_COLORS[sev],
+                        marginRight: 8,
+                      }}
+                    />
+                    {sev}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Action Buttons (on hover) */}
+          {isHovered && !isEditing && (
+            <div style={styles.cardActions}>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onStartEdit();
+                }}
+                style={styles.actionButton}
+                title="Edit (Enter)"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+                  <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
+                </svg>
+              </button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                }}
+                style={{ ...styles.actionButton, color: 'var(--status-error)' }}
+                title="Delete (Del)"
+              >
+                <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>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Transcription */}
+        {isEditing ? (
+          <textarea
+            ref={editInputRef}
+            value={editText}
+            onChange={(e) => setEditText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={() => onSaveEdit(editText)}
+            style={styles.editTextarea}
+            placeholder="Enter feedback text..."
+          />
+        ) : (
+          <p style={styles.transcription}>{item.transcription}</p>
+        )}
+
+        {/* Screenshot Thumbnails */}
+        {item.screenshots.length > 0 && (
+          <div style={styles.thumbnailRow}>
+            {item.screenshots.map((screenshot, ssIndex) => (
+              <button
+                key={screenshot.id}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onThumbnailClick(screenshot.imagePath);
+                }}
+                style={styles.thumbnail}
+                title="Click to view full size"
+              >
+                {screenshot.base64 ? (
+                  <img
+                    src={`data:image/png;base64,${screenshot.base64}`}
+                    alt={`Screenshot ${ssIndex + 1}`}
+                    style={styles.thumbnailImage}
+                  />
+                ) : (
+                  <div style={styles.thumbnailPlaceholder}>
+                    <svg width="20" height="20" 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>
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * MarkdownPreview - Live preview of the generated output
+ */
+interface MarkdownPreviewProps {
+  session: Session;
+  projectName?: string;
+}
+
+const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ session, projectName = 'Project' }) => {
+  const markdown = useMemo(() => {
+    const items = session.feedbackItems;
+    const duration = session.endTime
+      ? formatDuration(session.endTime - session.startTime)
+      : 'In Progress';
+    const timestamp = new Date(session.endTime || Date.now()).toLocaleString();
+
+    let content = `# ${projectName} Feedback Report\n`;
+    content += `> Generated by markupr on ${timestamp}\n`;
+    content += `> Duration: ${duration} | Items: ${items.length}\n\n`;
+    content += `---\n\n`;
+    content += `## Feedback Items\n\n`;
+
+    items.forEach((item, index) => {
+      const id = `FB-${(index + 1).toString().padStart(3, '0')}`;
+      const category = item.category || 'General';
+      const severity = item.severity || 'Medium';
+
+      content += `### ${id}: ${item.transcription.slice(0, 50)}${item.transcription.length > 50 ? '...' : ''}\n`;
+      content += `**Type:** ${category} | **Severity:** ${severity}\n\n`;
+      content += `> ${item.transcription}\n\n`;
+
+      if (item.screenshots.length > 0) {
+        content += `*${item.screenshots.length} screenshot(s) attached*\n\n`;
+      }
+
+      content += `---\n\n`;
+    });
+
+    return content;
+  }, [session, projectName]);
+
+  return (
+    <div style={styles.previewContainer}>
+      <div style={styles.previewHeader}>
+        <svg width="16" height="16" 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" />
+          <polyline points="10 9 9 9 8 9" />
+        </svg>
+        <span style={styles.previewTitle}>Markdown Preview</span>
+      </div>
+      <pre style={styles.previewContent}>{markdown}</pre>
+    </div>
+  );
+};
+
+/**
+ * DeleteUndoToast - Toast notification with undo action
+ */
+interface DeleteUndoToastProps {
+  itemId: string;
+  onUndo: () => void;
+  progress: number;
+}
+
+const DeleteUndoToast: React.FC<DeleteUndoToastProps> = ({ itemId, onUndo, progress }) => {
+  return (
+    <div style={styles.toast}>
+      <div style={styles.toastContent}>
+        <span style={styles.toastText}>Deleted {itemId}</span>
+        <button onClick={onUndo} style={styles.undoButton}>
+          Undo
+        </button>
+      </div>
+      <div style={styles.toastProgress}>
+        <div
+          style={{
+            ...styles.toastProgressBar,
+            width: `${progress}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * ActionToolbar - Save, Copy, Open Folder, Close actions
+ */
+interface ActionToolbarProps {
+  onSave: () => void;
+  onCopy: () => void;
+  onOpenFolder: () => void;
+  onClose: () => void;
+  itemCount: number;
+  hasChanges: boolean;
+}
+
+const ActionToolbar: React.FC<ActionToolbarProps> = ({
+  onSave,
+  onCopy,
+  onOpenFolder,
+  onClose,
+  itemCount,
+  hasChanges,
+}) => {
+  return (
+    <div style={styles.toolbar}>
+      <div style={styles.toolbarLeft}>
+        <span style={styles.itemCount}>{itemCount} items</span>
+        {hasChanges && <span style={styles.unsavedBadge}>Unsaved changes</span>}
+      </div>
+      <div style={styles.toolbarRight}>
+        <button onClick={onOpenFolder} style={styles.toolbarButton} 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>
+          <span>Open Folder</span>
+        </button>
+        <button onClick={onCopy} style={styles.toolbarButton} title="Copy to clipboard">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+          </svg>
+          <span>Copy</span>
+        </button>
+        <button
+          onClick={onSave}
+          style={{
+            ...styles.toolbarButton,
+            ...styles.primaryButton,
+          }}
+          title="Save changes"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
+            <polyline points="17 21 17 13 7 13 7 21" />
+            <polyline points="7 3 7 8 15 8" />
+          </svg>
+          <span>Save</span>
+        </button>
+        <button onClick={onClose} style={styles.closeButton} title="Close">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * ImageLightbox - Full-size image viewer
+ */
+interface ImageLightboxProps {
+  imagePath: string;
+  onClose: () => void;
+}
+
+const ImageLightbox: React.FC<ImageLightboxProps> = ({ imagePath, onClose }) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  return (
+    <div style={styles.lightboxOverlay} onClick={onClose}>
+      <button style={styles.lightboxClose} onClick={onClose}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+      <img
+        src={imagePath}
+        alt="Screenshot"
+        style={styles.lightboxImage}
+        onClick={(e) => e.stopPropagation()}
+      />
+    </div>
+  );
+};
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function formatDuration(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const mins = Math.floor(totalSeconds / 60);
+  const secs = totalSeconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+const SessionReview: React.FC<SessionReviewProps> = ({
+  session,
+  onSave,
+  onCopy,
+  onOpenFolder,
+  onClose,
+}) => {
+  // State
+  const [items, setItems] = useState<FeedbackItem[]>(session.feedbackItems);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [deletedItems, setDeletedItems] = useState<DeletedItem[]>([]);
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const [lightboxImage, setLightboxImage] = useState<string | null>(null);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [undoProgress, setUndoProgress] = useState(100);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Sync items back to session
+  const currentSession = useMemo(
+    (): Session => ({
+      ...session,
+      feedbackItems: items,
+    }),
+    [session, items]
+  );
+
+  // Undo progress timer
+  useEffect(() => {
+    if (deletedItems.length === 0) {
+      setUndoProgress(100);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setUndoProgress((prev) => Math.max(0, prev - 2));
+    }, UNDO_DURATION_MS / 50);
+
+    return () => clearInterval(interval);
+  }, [deletedItems]);
+
+  // Handlers
+  const handleDelete = useCallback(
+    (index: number) => {
+      const itemToDelete = items[index];
+      const timeoutId = setTimeout(() => {
+        setDeletedItems((prev) => prev.filter((d) => d.item.id !== itemToDelete.id));
+      }, UNDO_DURATION_MS);
+
+      setDeletedItems((prev) => [...prev, { item: itemToDelete, index, timeoutId }]);
+      setItems((prev) => prev.filter((_, i) => i !== index));
+      setHasChanges(true);
+      setUndoProgress(100);
+
+      if (selectedIndex === index) {
+        setSelectedIndex(null);
+      } else if (selectedIndex !== null && selectedIndex > index) {
+        setSelectedIndex(selectedIndex - 1);
+      }
+    },
+    [items, selectedIndex]
+  );
+
+  // Handle keyboard navigation (must be after handleDelete is defined)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't handle if editing
+      if (editingIndex !== null) return;
+
+      switch (e.key) {
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev === null ? items.length - 1 : Math.max(0, prev - 1)
+          );
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev === null ? 0 : Math.min(items.length - 1, prev + 1)
+          );
+          break;
+        case 'Delete':
+        case 'Backspace':
+          if (selectedIndex !== null && !e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+            handleDelete(selectedIndex);
+          }
+          break;
+        case 'Enter':
+          if (selectedIndex !== null) {
+            e.preventDefault();
+            setEditingIndex(selectedIndex);
+          }
+          break;
+        case 'Escape':
+          setSelectedIndex(null);
+          setEditingIndex(null);
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [items.length, selectedIndex, editingIndex, handleDelete]);
+
+  const handleUndo = useCallback(
+    (deletedItem: DeletedItem) => {
+      clearTimeout(deletedItem.timeoutId);
+      setDeletedItems((prev) => prev.filter((d) => d.item.id !== deletedItem.item.id));
+      setItems((prev) => {
+        const newItems = [...prev];
+        newItems.splice(deletedItem.index, 0, deletedItem.item);
+        return newItems;
+      });
+    },
+    []
+  );
+
+  const handleSaveEdit = useCallback(
+    (index: number, newText: string) => {
+      setItems((prev) =>
+        prev.map((item, i) =>
+          i === index ? { ...item, transcription: newText } : item
+        )
+      );
+      setEditingIndex(null);
+      setHasChanges(true);
+    },
+    []
+  );
+
+  const handleCategoryChange = useCallback(
+    (index: number, category: FeedbackCategory) => {
+      setItems((prev) =>
+        prev.map((item, i) => (i === index ? { ...item, category } : item))
+      );
+      setHasChanges(true);
+    },
+    []
+  );
+
+  const handleSeverityChange = useCallback(
+    (index: number, severity: FeedbackSeverity) => {
+      setItems((prev) =>
+        prev.map((item, i) => (i === index ? { ...item, severity } : item))
+      );
+      setHasChanges(true);
+    },
+    []
+  );
+
+  const handleDragStart = useCallback((e: React.DragEvent, index: number) => {
+    e.dataTransfer.effectAllowed = 'move';
+    setDragIndex(index);
+  }, []);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent, index: number) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      if (dragIndex !== null && dragIndex !== index) {
+        setDragOverIndex(index);
+      }
+    },
+    [dragIndex]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    if (dragIndex !== null && dragOverIndex !== null && dragIndex !== dragOverIndex) {
+      setItems((prev) => {
+        const newItems = [...prev];
+        const [draggedItem] = newItems.splice(dragIndex, 1);
+        newItems.splice(dragOverIndex, 0, draggedItem);
+        return newItems;
+      });
+      setHasChanges(true);
+    }
+    setDragIndex(null);
+    setDragOverIndex(null);
+  }, [dragIndex, dragOverIndex]);
+
+  const handleSave = useCallback(() => {
+    onSave(currentSession);
+    setHasChanges(false);
+  }, [currentSession, onSave]);
+
+  return (
+    <div ref={containerRef} style={styles.container}>
+      {/* toastSlideIn, pageFadeIn, pulseBorder keyframes provided by animations.css; scrollbar styles below */}
+      <style>
+        {`
+          .markupr-scrollbar::-webkit-scrollbar {
+            width: 8px;
+          }
+
+          .markupr-scrollbar::-webkit-scrollbar-track {
+            background: rgba(31, 41, 55, 0.3);
+            border-radius: 4px;
+          }
+
+          .markupr-scrollbar::-webkit-scrollbar-thumb {
+            background: rgba(107, 114, 128, 0.5);
+            border-radius: 4px;
+          }
+
+          .markupr-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: rgba(107, 114, 128, 0.7);
+          }
+        `}
+      </style>
+
+      {/* Toolbar */}
+      <ActionToolbar
+        onSave={handleSave}
+        onCopy={onCopy}
+        onOpenFolder={onOpenFolder}
+        onClose={onClose}
+        itemCount={items.length}
+        hasChanges={hasChanges}
+      />
+
+      {/* Main Content */}
+      <div style={styles.mainContent}>
+        {/* Items List (60%) */}
+        <div style={styles.itemsPane} className="markupr-scrollbar">
+          {items.length === 0 ? (
+            <div style={styles.emptyState}>
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                <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" />
+              </svg>
+              <p style={styles.emptyText}>No feedback items</p>
+              <p style={styles.emptySubtext}>Start a new recording to capture feedback</p>
+            </div>
+          ) : (
+            items.map((item, index) => (
+              <div
+                key={item.id}
+                className="ff-list-item-enter"
+                style={{ animationDelay: `${index * 50}ms` }}
+              >
+                <FeedbackItemCard
+                  item={item}
+                  index={index}
+                  isSelected={selectedIndex === index}
+                  isEditing={editingIndex === index}
+                  isDragging={dragIndex === index}
+                  dragOverIndex={dragOverIndex}
+                  onSelect={() => setSelectedIndex(index)}
+                  onStartEdit={() => setEditingIndex(index)}
+                  onSaveEdit={(newText) => handleSaveEdit(index, newText)}
+                  onCancelEdit={() => setEditingIndex(null)}
+                  onDelete={() => handleDelete(index)}
+                  onCategoryChange={(cat) => handleCategoryChange(index, cat)}
+                  onSeverityChange={(sev) => handleSeverityChange(index, sev)}
+                  onDragStart={handleDragStart}
+                  onDragOver={handleDragOver}
+                  onDragEnd={handleDragEnd}
+                  onThumbnailClick={setLightboxImage}
+                />
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Preview Pane (40%) */}
+        <div style={styles.previewPane}>
+          <MarkdownPreview session={currentSession} projectName={session.metadata?.sourceName} />
+        </div>
+      </div>
+
+      {/* Delete Undo Toast */}
+      {deletedItems.length > 0 && (
+        <div style={styles.toastContainer} className="ff-toast-enter">
+          {deletedItems.map((deleted) => (
+            <DeleteUndoToast
+              key={deleted.item.id}
+              itemId={`FB-${(deleted.index + 1).toString().padStart(3, '0')}`}
+              onUndo={() => handleUndo(deleted)}
+              progress={undoProgress}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Image Lightbox */}
+      {lightboxImage && (
+        <div className="ff-dialog-enter">
+          <ImageLightbox imagePath={lightboxImage} onClose={() => setLightboxImage(null)} />
+        </div>
+      )}
+
+      {/* Keyboard Shortcuts Help */}
+      <div style={styles.shortcutsHint}>
+        <span style={styles.shortcutKey}>Arrow</span> Navigate
+        <span style={styles.shortcutKey}>Enter</span> Edit
+        <span style={styles.shortcutKey}>Del</span> Remove
+        <span style={styles.shortcutKey}>Drag</span> Reorder
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+type ExtendedCSSProperties = React.CSSProperties & {
+  WebkitAppRegion?: 'drag' | 'no-drag';
+};
+
+const styles: Record<string, ExtendedCSSProperties> = {
+  container: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: 'var(--bg-primary)',
+    backgroundImage: 'linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%)',
+    color: 'var(--text-primary)',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    position: 'relative',
+    overflow: 'hidden',
+  },
+
+  // Toolbar
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '12px 20px',
+    borderBottom: '1px solid var(--border-default)',
+    backgroundColor: 'var(--surface-glass)',
+    backdropFilter: 'blur(12px)',
+    WebkitAppRegion: 'drag',
+  },
+  toolbarLeft: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    WebkitAppRegion: 'no-drag',
+  },
+  toolbarRight: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    WebkitAppRegion: 'no-drag',
+  },
+  itemCount: {
+    fontSize: 13,
+    color: 'var(--text-secondary)',
+    fontWeight: 500,
+  },
+  unsavedBadge: {
+    fontSize: 11,
+    color: 'var(--status-warning)',
+    backgroundColor: 'var(--status-warning-subtle)',
+    padding: '2px 8px',
+    borderRadius: 10,
+    fontWeight: 500,
+  },
+  toolbarButton: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    padding: '8px 12px',
+    backgroundColor: 'var(--surface-inset)',
+    border: '1px solid var(--border-strong)',
+    borderRadius: 8,
+    color: 'var(--text-primary)',
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+  },
+  primaryButton: {
+    backgroundColor: 'var(--accent-default)',
+    borderColor: 'var(--accent-muted)',
+  },
+  closeButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    padding: 0,
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: 6,
+    color: 'var(--text-secondary)',
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+  },
+
+  // Main Content
+  mainContent: {
+    display: 'flex',
+    flex: 1,
+    overflow: 'hidden',
+  },
+  itemsPane: {
+    width: '60%',
+    padding: 16,
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+  },
+  previewPane: {
+    width: '40%',
+    borderLeft: '1px solid var(--border-default)',
+    backgroundColor: 'var(--surface-glass)',
+    overflow: 'hidden',
+  },
+
+  // Card
+  card: {
+    display: 'flex',
+    gap: 12,
+    padding: 16,
+    borderRadius: 12,
+    border: '1px solid',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    position: 'relative',
+  },
+  dragHandle: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    cursor: 'grab',
+    opacity: 0.5,
+    color: 'var(--text-tertiary)',
+    transition: 'opacity 0.15s ease',
+  },
+  cardContent: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    minWidth: 0,
+  },
+  cardHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    flexWrap: 'wrap',
+  },
+  itemId: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: 'var(--text-tertiary)',
+    fontFamily: 'ui-monospace, SFMono-Regular, monospace',
+  },
+  tag: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px 8px',
+    fontSize: 11,
+    fontWeight: 500,
+    borderRadius: 6,
+    border: '1px solid',
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+    backgroundColor: 'transparent',
+  },
+  dropdown: {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    marginTop: 4,
+    backgroundColor: 'var(--bg-elevated)',
+    border: '1px solid var(--border-strong)',
+    borderRadius: 8,
+    padding: 4,
+    zIndex: 100,
+    boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.4)',
+    minWidth: 120,
+  },
+  dropdownItem: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    padding: '8px 12px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: 4,
+    color: 'var(--text-primary)',
+    fontSize: 12,
+    cursor: 'pointer',
+    transition: 'background-color 0.15s ease',
+    textAlign: 'left',
+  },
+  cardActions: {
+    marginLeft: 'auto',
+    display: 'flex',
+    gap: 4,
+  },
+  actionButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 28,
+    height: 28,
+    padding: 0,
+    backgroundColor: 'var(--surface-inset)',
+    border: 'none',
+    borderRadius: 6,
+    color: 'var(--text-secondary)',
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+  },
+  transcription: {
+    margin: 0,
+    fontSize: 14,
+    lineHeight: 1.6,
+    color: 'var(--text-primary)',
+    wordBreak: 'break-word',
+  },
+  editTextarea: {
+    width: '100%',
+    minHeight: 80,
+    padding: 12,
+    backgroundColor: 'var(--surface-inset)',
+    border: '2px solid var(--border-focus)',
+    borderRadius: 8,
+    color: 'var(--text-primary)',
+    fontSize: 14,
+    lineHeight: 1.6,
+    resize: 'vertical',
+    outline: 'none',
+    fontFamily: 'inherit',
+    animation: 'pulseBorder 1.5s ease-in-out infinite',
+  },
+  thumbnailRow: {
+    display: 'flex',
+    gap: 8,
+    marginTop: 4,
+    flexWrap: 'wrap',
+  },
+  thumbnail: {
+    width: 60,
+    height: 45,
+    borderRadius: 6,
+    overflow: 'hidden',
+    border: '1px solid var(--border-default)',
+    backgroundColor: 'var(--surface-inset)',
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+    padding: 0,
+  },
+  thumbnailImage: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+  thumbnailPlaceholder: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  // Preview
+  previewContainer: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  previewHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    padding: '12px 16px',
+    borderBottom: '1px solid var(--border-default)',
+  },
+  previewTitle: {
+    fontSize: 12,
+    fontWeight: 500,
+    color: 'var(--text-secondary)',
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+  },
+  previewContent: {
+    flex: 1,
+    padding: 16,
+    margin: 0,
+    fontSize: 12,
+    lineHeight: 1.6,
+    color: 'var(--text-secondary)',
+    fontFamily: 'ui-monospace, SFMono-Regular, monospace',
+    whiteSpace: 'pre-wrap',
+    overflowY: 'auto',
+    backgroundColor: 'transparent',
+  },
+
+  // Toast
+  toastContainer: {
+    position: 'fixed',
+    bottom: 60,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    zIndex: 1000,
+  },
+  toast: {
+    backgroundColor: 'var(--bg-elevated)',
+    border: '1px solid var(--border-strong)',
+    borderRadius: 12,
+    padding: 0,
+    overflow: 'hidden',
+    boxShadow: '0 20px 40px -10px rgba(0, 0, 0, 0.5)',
+    animation: 'toastSlideIn 0.3s ease-out',
+    minWidth: 240,
+  },
+  toastContent: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '12px 16px',
+  },
+  toastText: {
+    fontSize: 13,
+    color: 'var(--text-primary)',
+    fontWeight: 500,
+  },
+  undoButton: {
+    padding: '6px 12px',
+    backgroundColor: 'transparent',
+    border: '1px solid var(--accent-muted)',
+    borderRadius: 6,
+    color: 'var(--text-link)',
+    fontSize: 12,
+    fontWeight: 600,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+  },
+  toastProgress: {
+    height: 3,
+    backgroundColor: 'var(--surface-inset)',
+  },
+  toastProgressBar: {
+    height: '100%',
+    backgroundColor: 'var(--status-error)',
+    transition: 'width 0.1s linear',
+  },
+
+  // Lightbox
+  lightboxOverlay: {
+    position: 'fixed',
+    inset: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 2000,
+    animation: 'pageFadeIn 0.2s ease-out',
+    cursor: 'zoom-out',
+  },
+  lightboxClose: {
+    position: 'absolute',
+    top: 20,
+    right: 20,
+    width: 40,
+    height: 40,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    border: 'none',
+    borderRadius: '50%',
+    color: 'var(--text-inverse)',
+    cursor: 'pointer',
+    transition: 'background-color 0.15s ease',
+  },
+  lightboxImage: {
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    objectFit: 'contain',
+    borderRadius: 8,
+    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
+    cursor: 'default',
+  },
+
+  // Empty State
+  emptyState: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 40,
+    textAlign: 'center',
+  },
+  emptyText: {
+    marginTop: 16,
+    fontSize: 16,
+    fontWeight: 500,
+    color: 'var(--text-secondary)',
+  },
+  emptySubtext: {
+    marginTop: 4,
+    fontSize: 13,
+    color: 'var(--text-tertiary)',
+  },
+
+  // Keyboard Shortcuts Hint
+  shortcutsHint: {
+    position: 'absolute',
+    bottom: 12,
+    left: 20,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    fontSize: 11,
+    color: 'var(--text-tertiary)',
+  },
+  shortcutKey: {
+    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)',
+  },
+};
+
+export { SessionReview };
+export type { SessionReviewProps };