jj commit -m "packages/web: add paste/upload snapshot flows; unify inputs"

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I7cb4e2ee6962e5d343cd52da6524b3596a6a6964

packages/web/src/components/ComparisonView.tsx

@@ -1,10 +1,11 @@
 import { Component, For, createSignal, createMemo, Show, onMount, onCleanup } from 'solid-js';
-import { ComparisonEntry, calculateChange } from '@ns/core';
+import { ComparisonEntry, calculateChange, StatsData } from '@ns/core';
 import { formatBytes, formatNumber, formatTime, formatPercent } from '@ns/ui-utils';
 import ArrowRightIcon from 'lucide-solid/icons/arrow-right';
 import ArrowDownIcon from 'lucide-solid/icons/arrow-down';
 import ArrowUpIcon from 'lucide-solid/icons/arrow-up';
 import XIcon from 'lucide-solid/icons/x';
+import FileUpload from './FileUpload';
 
 interface ComparisonViewProps {
   entries: ComparisonEntry[];
@@ -14,6 +15,8 @@ interface ComparisonViewProps {
   pasteMode: 'advance' | 'replace';
   onPasteModeChange: (mode: 'advance' | 'replace') => void;
   onPasteStats: (text: string, name: string) => ComparisonEntry | null;
+  onFileLoad: (data: StatsData, raw: Record<string, unknown>) => void;
+  onTextLoad: (text: string) => void;
 }
 
 const ComparisonView: Component<ComparisonViewProps> = props => {
@@ -150,159 +153,189 @@ const ComparisonView: Component<ComparisonViewProps> = props => {
 
   return (
     <div class="comparison-view">
-      <div class="comparison-controls">
-        <div class="compare-selector">
-          <label>Baseline</label>
-          <select onChange={selectLeft} value={leftEntry()?.id || ''}>
-            <option value="">Select snapshot...</option>
-            <For each={props.entries}>
-              {entry => <option value={entry.id}>{entry.name}</option>}
-            </For>
-          </select>
-        </div>
-        <div class="compare-arrow">
-          <ArrowRightIcon size={20} />
-        </div>
-        <div class="compare-selector">
-          <label>Current</label>
-          <select onChange={selectRight} value={rightEntry()?.id || ''}>
-            <option value="">Select snapshot...</option>
-            <For each={props.entries}>
-              {entry => <option value={entry.id}>{entry.name}</option>}
-            </For>
-          </select>
-        </div>
-        <div class="compare-paste-toggle">
-          <button
-            class={props.pasteMode === 'advance' ? 'active' : ''}
-            onClick={() => props.onPasteModeChange('advance')}
-            title="Paste shifts current to baseline"
-          >
-            Auto
-          </button>
-          <button
-            class={props.pasteMode === 'replace' ? 'active' : ''}
-            onClick={() => props.onPasteModeChange('replace')}
-            title="Paste replaces current only"
-          >
-            Replace
-          </button>
-        </div>
-      </div>
-
-      <Show when={props.entries.length > 0}>
-        <div class="snapshots-list">
-          <h4>Saved Snapshots</h4>
-          <For each={props.entries}>
-            {entry => (
-              <div class="snapshot-item">
-                <span class="snapshot-name">{entry.name}</span>
-                <button class="delete-btn" onClick={() => props.onDelete(entry.id)}>
-                  <XIcon size={16} />
-                </button>
-              </div>
-            )}
-          </For>
+      <Show when={props.entries.length >= 2}>
+        <div class="comparison-controls">
+          <div class="compare-selector">
+            <label>Baseline</label>
+            <select onChange={selectLeft} value={leftEntry()?.id || ''}>
+              <option value="">Select snapshot...</option>
+              <For each={props.entries}>
+                {entry => <option value={entry.id}>{entry.name}</option>}
+              </For>
+            </select>
+          </div>
+          <div class="compare-arrow">
+            <ArrowRightIcon size={20} />
+          </div>
+          <div class="compare-selector">
+            <label>Current</label>
+            <select onChange={selectRight} value={rightEntry()?.id || ''}>
+              <option value="">Select snapshot...</option>
+              <For each={props.entries}>
+                {entry => <option value={entry.id}>{entry.name}</option>}
+              </For>
+            </select>
+          </div>
+          <div class="compare-paste-toggle">
+            <button
+              class={props.pasteMode === 'advance' ? 'active' : ''}
+              onClick={() => props.onPasteModeChange('advance')}
+              title="Paste shifts current to baseline"
+            >
+              Auto
+            </button>
+            <button
+              class={props.pasteMode === 'replace' ? 'active' : ''}
+              onClick={() => props.onPasteModeChange('replace')}
+              title="Paste replaces current only"
+            >
+              Replace
+            </button>
+          </div>
         </div>
       </Show>
 
       <Show
-        when={leftEntry() && rightEntry()}
-        fallback={<div class="compare-placeholder">Select two snapshots to compare metrics</div>}
-      >
-        <div class="comparison-table">
-          <div class="compare-header">
-            <div class="col-label">Metric</div>
-            <div class="col-value">{leftEntry()?.name}</div>
-            <div class="col-value">{rightEntry()?.name}</div>
-            <div class="col-change">Change</div>
-          </div>
-          <For each={comparison()}>
-            {row => (
-              <div
-                class={`compare-row ${row.isDifferent ? 'diff' : ''} ${row.isMissing ? 'missing' : ''}`}
-              >
-                <div class="col-label" title={row.label}>
-                  {row.label}
-                </div>
-                <div class="col-value">
-                  <Show
-                    when={row.isMissing}
-                    fallback={
-                      row.format === 'bytes'
-                        ? formatBytes(row.leftValue, prec())
-                        : row.format === 'time'
-                          ? formatTime(row.leftValue, prec())
-                          : row.format === 'percent'
-                            ? formatPercent(row.leftValue, prec())
-                            : formatNumber(row.leftValue, prec())
-                    }
-                  >
-                    <span class="missing-value">N/A</span>
-                  </Show>
-                </div>
-                <div class="col-value">
-                  <Show
-                    when={row.isMissing}
-                    fallback={
-                      row.format === 'bytes'
-                        ? formatBytes(row.rightValue, prec())
-                        : row.format === 'time'
-                          ? formatTime(row.rightValue, prec())
-                          : row.format === 'percent'
-                            ? formatPercent(row.rightValue, prec())
-                            : formatNumber(row.rightValue, prec())
-                    }
-                  >
-                    <span class="missing-value">N/A</span>
-                  </Show>
-                </div>
-                <div
-                  class={`col-change ${row.isReduction ? 'good' : row.isDifferent && !row.isMissing ? 'bad' : ''}`}
-                >
-                  <Show
-                    when={row.isMissing}
-                    fallback={
-                      <Show when={row.isDifferent} fallback={<span class="neutral">—</span>}>
-                        <span class="change-value">
-                          <Show when={row.isReduction}>
-                            <ArrowDownIcon size={14} />
-                          </Show>
-                          <Show when={!row.isReduction}>
-                            <ArrowUpIcon size={14} />
-                          </Show>
-                          {Math.abs(row.change).toFixed(prec())}%
-                        </span>
-                      </Show>
-                    }
-                  >
-                    <span
-                      class="missing-indicator"
-                      title="Field not available in one or both implementations"
-                    >
-                      N/A
-                    </span>
-                  </Show>
+        when={props.entries.length >= 2}
+        fallback={
+          <div class="compare-upload-section">
+            <FileUpload
+              onFileLoad={props.onFileLoad}
+              onTextLoad={props.onTextLoad}
+              snapshots={props.entries}
+              onLoadSnapshot={props.onSelect}
+            />
+            <Show when={props.entries.length === 1}>
+              <div class="compare-more-needed">
+                <div class="compare-placeholder-hint">
+                  Upload or paste one more snapshot to start comparing
                 </div>
               </div>
-            )}
-          </For>
-        </div>
+            </Show>
+          </div>
+        }
+      >
+        <Show when={props.entries.length > 0}>
+          <div class="snapshots-list">
+            <h4>Saved Snapshots</h4>
+            <For each={props.entries}>
+              {entry => (
+                <div class="snapshot-item">
+                  <span class="snapshot-name">{entry.name}</span>
+                  <button class="delete-btn" onClick={() => props.onDelete(entry.id)}>
+                    <XIcon size={16} />
+                  </button>
+                </div>
+              )}
+            </For>
+          </div>
+        </Show>
 
-        <div class="comparison-summary">
-          <Show when={comparison()?.some(r => r.isReduction)}>
-            <div class="summary-good">
-              <ArrowDownIcon size={16} />{' '}
-              {comparison()?.filter(r => r.isReduction && r.isDifferent).length} improved
+        <Show
+          when={leftEntry() && rightEntry()}
+          fallback={
+            <div class="compare-placeholder">
+              <div>Select two snapshots to compare metrics</div>
+              <div class="compare-placeholder-hint">
+                Paste JSON stats here (Ctrl+V) while in compare mode
+              </div>
             </div>
-          </Show>
-          <Show when={comparison()?.some(r => !r.isReduction && r.isDifferent)}>
-            <div class="summary-bad">
-              <ArrowUpIcon size={16} />{' '}
-              {comparison()?.filter(r => !r.isReduction && r.isDifferent).length} regressed
+          }
+        >
+          <div class="comparison-table">
+            <div class="compare-header">
+              <div class="col-label">Metric</div>
+              <div class="col-value">{leftEntry()?.name}</div>
+              <div class="col-value">{rightEntry()?.name}</div>
+              <div class="col-change">Change</div>
             </div>
-          </Show>
-        </div>
+            <For each={comparison()}>
+              {row => (
+                <div
+                  class={`compare-row ${row.isDifferent ? 'diff' : ''} ${row.isMissing ? 'missing' : ''}`}
+                >
+                  <div class="col-label" title={row.label}>
+                    {row.label}
+                  </div>
+                  <div class="col-value">
+                    <Show
+                      when={row.isMissing}
+                      fallback={
+                        row.format === 'bytes'
+                          ? formatBytes(row.leftValue, prec())
+                          : row.format === 'time'
+                            ? formatTime(row.leftValue, prec())
+                            : row.format === 'percent'
+                              ? formatPercent(row.leftValue, prec())
+                              : formatNumber(row.leftValue, prec())
+                      }
+                    >
+                      <span class="missing-value">N/A</span>
+                    </Show>
+                  </div>
+                  <div class="col-value">
+                    <Show
+                      when={row.isMissing}
+                      fallback={
+                        row.format === 'bytes'
+                          ? formatBytes(row.rightValue, prec())
+                          : row.format === 'time'
+                            ? formatTime(row.rightValue, prec())
+                            : row.format === 'percent'
+                              ? formatPercent(row.rightValue, prec())
+                              : formatNumber(row.rightValue, prec())
+                      }
+                    >
+                      <span class="missing-value">N/A</span>
+                    </Show>
+                  </div>
+                  <div
+                    class={`col-change ${row.isReduction ? 'good' : row.isDifferent && !row.isMissing ? 'bad' : ''}`}
+                  >
+                    <Show
+                      when={row.isMissing}
+                      fallback={
+                        <Show when={row.isDifferent} fallback={<span class="neutral">—</span>}>
+                          <span class="change-value">
+                            <Show when={row.isReduction}>
+                              <ArrowDownIcon size={14} />
+                            </Show>
+                            <Show when={!row.isReduction}>
+                              <ArrowUpIcon size={14} />
+                            </Show>
+                            {Math.abs(row.change).toFixed(prec())}%
+                          </span>
+                        </Show>
+                      }
+                    >
+                      <span
+                        class="missing-indicator"
+                        title="Field not available in one or both implementations"
+                      >
+                        N/A
+                      </span>
+                    </Show>
+                  </div>
+                </div>
+              )}
+            </For>
+          </div>
+
+          <div class="comparison-summary">
+            <Show when={comparison()?.some(r => r.isReduction)}>
+              <div class="summary-good">
+                <ArrowDownIcon size={16} />{' '}
+                {comparison()?.filter(r => r.isReduction && r.isDifferent).length} improved
+              </div>
+            </Show>
+            <Show when={comparison()?.some(r => !r.isReduction && r.isDifferent)}>
+              <div class="summary-bad">
+                <ArrowUpIcon size={16} />{' '}
+                {comparison()?.filter(r => !r.isReduction && r.isDifferent).length} regressed
+              </div>
+            </Show>
+          </div>
+        </Show>
       </Show>
 
       <Show when={showPasteModal()}>
@@ -349,7 +382,7 @@ const ComparisonView: Component<ComparisonViewProps> = props => {
                 Cancel
               </button>
               <button class="confirm-btn" onClick={confirmPaste}>
-                Save &amp; Compare
+                {props.entries.length >= 2 ? 'Save & Compare' : 'Save Snapshot'}
               </button>
             </div>
           </div>

packages/web/src/components/FileUpload.tsx

@@ -6,16 +6,15 @@ import ClockIcon from 'lucide-solid/icons/clock';
 interface FileUploadProps {
   onFileLoad: (data: StatsData, raw: Record<string, unknown>) => void;
   onTextLoad: (text: string) => void;
-  showHelp: boolean;
-  onToggleHelp: () => void;
   snapshots?: ComparisonEntry[];
   onLoadSnapshot?: (entry: ComparisonEntry) => void;
 }
 
 export default function FileUpload(props: FileUploadProps) {
   const [textInput, setTextInput] = createSignal('');
-  const [isTextMode, setIsTextMode] = createSignal(false);
+  const [isTextMode, setIsTextMode] = createSignal(true);
   const [error, setError] = createSignal('');
+  const [showHelp, setShowHelp] = createSignal(false);
 
   const handleFile = async (e: Event) => {
     const target = e.target as HTMLInputElement;
@@ -49,11 +48,11 @@ export default function FileUpload(props: FileUploadProps) {
         </div>
         <h2>Load Statistics</h2>
 
-        <div class="help-link" onClick={props.onToggleHelp}>
+        <div class="help-link" onClick={() => setShowHelp(!showHelp())}>
           How do I use this?
         </div>
 
-        <Show when={props.showHelp}>
+        <Show when={showHelp()}>
           <div class="help-panel">
             <h4>Generating Stats</h4>
             <code>NIX_SHOW_STATS=1 nix-instantiate expr.nix &gt; stats.json</code>
@@ -85,6 +84,17 @@ export default function FileUpload(props: FileUploadProps) {
             class="json-input"
             value={textInput()}
             onInput={e => setTextInput(e.currentTarget.value)}
+            onPaste={e => {
+              const text = e.clipboardData?.getData('text');
+              if (!text) return;
+              e.preventDefault();
+              try {
+                JSON.parse(text);
+                props.onTextLoad(text);
+              } catch {
+                setError('Invalid JSON in clipboard');
+              }
+            }}
           />
           <button class="load-btn" onClick={handleTextLoad}>
             Load

packages/web/src/index.tsx

@@ -29,11 +29,12 @@ function App() {
   const [view, setView] = createSignal<'analysis' | 'compare'>('analysis');
   const [snapshotName, setSnapshotName] = createSignal('');
   const [showSaveDialog, setShowSaveDialog] = createSignal(false);
-  const [showHelp, setShowHelp] = createSignal(false);
   const [showManageSnapshots, setShowManageSnapshots] = createSignal(false);
   const [precision, setPrecision] = createSignal(2);
   const [pasteMode, setPasteMode] = createSignal<'advance' | 'replace'>('advance');
   const [isLoading, setIsLoading] = createSignal(true);
+  const [showOverrideModal, setShowOverrideModal] = createSignal(false);
+  const [pendingOverrideText, setPendingOverrideText] = createSignal('');
 
   const STORAGE_KEY = 'ns-data';
 
@@ -80,8 +81,28 @@ function App() {
     };
     window.addEventListener('keydown', handleKeyDown);
 
+    const handleAnalysisPaste = (e: ClipboardEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+        return;
+      }
+      const text = e.clipboardData?.getData('text');
+      if (!text) return;
+      try {
+        JSON.parse(text);
+      } catch {
+        return;
+      }
+      if (view() === 'analysis' && currentStats()) {
+        setPendingOverrideText(text);
+        setShowOverrideModal(true);
+      }
+    };
+    document.addEventListener('paste', handleAnalysisPaste);
+
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('paste', handleAnalysisPaste);
     };
   });
 
@@ -199,6 +220,34 @@ function App() {
     return entry;
   };
 
+  const handleCompareFileLoad = (data: StatsData, raw: Record<string, unknown>) => {
+    const entry: ComparisonEntry = {
+      id: Date.now(),
+      name: `Snapshot ${snapshots().length + 1}`,
+      data,
+      raw,
+      timestamp: new Date(),
+    };
+    setSnapshots(prev => [...prev, entry]);
+  };
+
+  const handleCompareTextLoad = (text: string) => {
+    try {
+      const raw = JSON.parse(text);
+      const data = parseStats(raw);
+      const entry: ComparisonEntry = {
+        id: Date.now(),
+        name: `Snapshot ${snapshots().length + 1}`,
+        data,
+        raw,
+        timestamp: new Date(),
+      };
+      setSnapshots(prev => [...prev, entry]);
+    } catch (e) {
+      console.error('Failed to parse stats:', e);
+    }
+  };
+
   return (
     <div class="app">
       <header class="header">
@@ -209,11 +258,7 @@ function App() {
           <button class={view() === 'analysis' ? 'active' : ''} onClick={() => setView('analysis')}>
             Analysis
           </button>
-          <button
-            class={view() === 'compare' ? 'active' : ''}
-            onClick={() => setView('compare')}
-            disabled={snapshots().length < 2}
-          >
+          <button class={view() === 'compare' ? 'active' : ''} onClick={() => setView('compare')}>
             Compare ({snapshots().length})
           </button>
           <Show when={snapshots().length > 0}>
@@ -251,8 +296,6 @@ function App() {
               <FileUpload
                 onFileLoad={handleFileLoad}
                 onTextLoad={loadFromText}
-                showHelp={showHelp()}
-                onToggleHelp={() => setShowHelp(!showHelp())}
                 snapshots={snapshots()}
                 onLoadSnapshot={loadSnapshot}
               />
@@ -283,6 +326,30 @@ function App() {
                   </div>
                 </div>
               </Show>
+              <Show when={showOverrideModal()}>
+                <div class="modal-overlay" onClick={() => setShowOverrideModal(false)}>
+                  <div class="modal" onClick={e => e.stopPropagation()}>
+                    <h3>Override Analysis?</h3>
+                    <p style={{ color: 'var(--text-secondary)', 'margin-bottom': '1rem' }}>
+                      This will replace the current analysis with pasted data.
+                    </p>
+                    <div class="modal-actions">
+                      <button class="cancel-btn" onClick={() => setShowOverrideModal(false)}>
+                        Cancel
+                      </button>
+                      <button
+                        class="confirm-btn"
+                        onClick={() => {
+                          loadFromText(pendingOverrideText());
+                          setShowOverrideModal(false);
+                        }}
+                      >
+                        Override
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </Show>
             </Show>
           </Show>
 
@@ -295,6 +362,8 @@ function App() {
               pasteMode={pasteMode()}
               onPasteModeChange={setPasteMode}
               onPasteStats={handlePasteStats}
+              onFileLoad={handleCompareFileLoad}
+              onTextLoad={handleCompareTextLoad}
             />
           </Show>
         </Show>

packages/web/src/styles.css

@@ -183,6 +183,7 @@ body {
   align-items: center;
   gap: 2rem;
   padding-top: 4rem;
+  width: 100%;
 }
 
 .upload-card {
@@ -1504,6 +1505,25 @@ body {
   border-radius: 0.75rem;
 }
 
+.compare-placeholder-hint {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.compare-upload-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+}
+
+.compare-more-needed {
+  text-align: center;
+  padding: 1rem;
+}
+
 .comparison-table {
   background: var(--card-bg);
   border: 1px solid var(--border-color);