@spark-apps/piclet 1.0.3 → 1.0.5

package/dist/gui/css/theme.css

@@ -58,21 +58,35 @@ input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;hei
 @keyframes s{to{transform:rotate(360deg)}}
 .ld span{font-size:12px;color:var(--txt3)}
 
-/* Log - fills available space */
-.log{display:none;font:11px/1.4 Consolas,monospace;background:var(--bg2);border-radius:5px;padding:8px;flex:1;min-height:60px;max-height:none;overflow-y:auto}
-.log.on{display:block}
+/* Log with preview - 6 lines high with thumbnail */
+.log-container{display:none;gap:8px;height:calc(6 * 1.4em + 16px);flex-shrink:0}
+.log-container.on{display:flex}
+.log{flex:1;font:10px/1.4 Consolas,monospace;background:var(--bg2);border-radius:5px;padding:8px;overflow-y:auto;min-width:0}
 .log p{margin:2px 0}
 .log .i{color:var(--txt3)}
 .log .s{color:var(--ok)}
 .log .e{color:var(--err)}
+.log-preview{width:80px;height:80px;object-fit:contain;background:var(--bg2);border-radius:5px;border:1px solid var(--brd);flex-shrink:0;display:none;align-self:center}
+.log-preview.on{display:block}
 
-/* Done state */
-.dn{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:4px}
-.dn.on{display:flex}
-.dn h4{font-size:14px}
-.dn.ok h4{color:var(--ok)}
-.dn.err h4{color:var(--err)}
-.dn p{font-size:12px;color:var(--txt2);text-align:center}
+/* Done container (replaces log area) */
+.done-container{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:hidden}
+.done-container.on{display:flex}
+.done-preview{display:flex;width:100%;max-height:80%;align-items:center;justify-content:center;background:var(--bg2);border-radius:6px;overflow:hidden;position:relative}
+.done-preview::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(#1a1a1d 0% 25%, #222 0% 50%) 50%/10px 10px;z-index:0}
+.done-preview img{max-width:100%;height:auto;object-fit:contain;position:relative;z-index:1}
+.done-logs{flex:1 1 auto;font:10px/1.4 Consolas,monospace;background:var(--bg2);border-radius:6px;padding:8px;overflow-y:auto;min-height:60px}
+.done-logs p{margin:2px 0}
+.done-logs .i{color:var(--txt3)}
+.done-logs .s{color:var(--ok)}
+.done-logs .e{color:var(--err)}
+.done-result{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--bg2);border-radius:6px;flex:0 0 auto}
+.done-result h4{font-size:13px;margin:0;font-weight:600}
+.done-container.ok .done-result h4{color:var(--ok)}
+.done-container.err .done-result h4{color:var(--err)}
+.done-result p{font-size:11px;color:var(--txt2);margin:0;flex:1}
+.done-btns{display:flex;gap:8px;flex:0 0 auto}
+.done-btns .btn{padding:8px 16px;font-size:11px}
 
 /* Warning/info box */
 .warn-box{display:none;font-size:10px;color:#ca8a04;background:rgba(202,138,4,0.1);padding:6px 8px;border-radius:4px;text-align:center}

package/dist/gui/piclet.html

@@ -162,6 +162,11 @@
     .gif-export-btn{display:none;width:100%;padding:8px 4px;font-size:10px;background:var(--acc);border:none;border-radius:4px;color:#000;cursor:pointer;font-weight:600;margin-top:6px}
     .gif-export-btn.show{display:block}
     .gif-export-btn:hover{background:var(--acc2)}
+    .frame-actions{display:none;gap:4px;margin-top:6px}
+    .frame-actions.show{display:flex}
+    .frame-actions button{flex:1;padding:6px 4px;font-size:9px;background:var(--bg3);border:1px solid var(--brd);border-radius:4px;color:var(--txt2);cursor:pointer}
+    .frame-actions button:hover{border-color:var(--acc);color:var(--acc)}
+    .frame-actions button.del:hover{border-color:#c44;color:#c44}
 
     /* Export modal */
     .export-modal{background:var(--bg2);border:1px solid var(--brd);border-radius:8px;padding:16px 20px;min-width:280px;max-width:320px}
@@ -227,7 +232,12 @@
         <span>Frames</span>
       </div>
       <div class="frame-strip-scroll" id="frameScroll"></div>
+      <div class="frame-actions" id="frameActions">
+        <button class="del" onclick="deleteSelectedFrame()" title="Delete frame">Del</button>
+        <button onclick="replaceSelectedFrame()" title="Replace frame">Replace</button>
+      </div>
       <button class="gif-export-btn" id="gifExportBtn" onclick="showExportModal()">Export</button>
+      <input type="file" id="replaceInput" accept=".png,.jpg,.jpeg" style="display:none" onchange="handleReplaceFile(event)">
     </div>
 
     <!-- Left divider (for frame panel) -->
@@ -280,6 +290,12 @@
             </div>
             <label class="opt"><input type="checkbox" id="rb-trim" checked onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Auto-trim edges</label>
             <label class="opt"><input type="checkbox" id="rb-edges" onchange="schedulePreview()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Border only (preserve inner)</label>
+            <label class="opt"><input type="checkbox" id="rb-edgedetect" onchange="toggleEdgeDetect()"><span class="box"><svg viewBox="0 0 12 12"><polyline points="2,6 5,9 10,3"/></svg></span>Feather edges (smoother cuts)</label>
+            <div class="tool-row" id="rb-edgeRow" style="display:none">
+              <label>Softness</label>
+              <input type="range" id="rb-edgestr" min="0" max="100" value="50" oninput="$('rb-edgestrV').textContent=this.value+'%'" onchange="schedulePreview()">
+              <span class="val" id="rb-edgestrV">50%</span>
+            </div>
           </div>
         </div>
       </div>
@@ -379,15 +395,22 @@
 
   <!-- Loading state -->
   <div class="ld" id="L"><div class="sp"></div><span id="lT">Processing...</span></div>
-  <!-- Log -->
-  <div class="log" id="G"></div>
-  <!-- Done state -->
-  <div class="dn" id="D">
-    <h4 id="dT"></h4>
-    <p id="dM"></p>
-    <div class="btns" style="width:100%;margin-top:8px">
+  <!-- Log with preview -->
+  <div class="log-container" id="LC">
+    <div class="log" id="G"></div>
+    <img class="log-preview" id="LP">
+  </div>
+  <!-- Done state (replaces log container) -->
+  <div class="done-container" id="DC">
+    <div class="done-preview" id="donePreview"></div>
+    <div class="done-logs" id="doneLogs"></div>
+    <div class="done-result">
+      <h4 id="dT"></h4>
+      <p id="dM"></p>
+    </div>
+    <div class="done-btns">
       <button class="btn btn-g" onclick="reset()">Back</button>
-      <button class="btn" onclick="openOutputFolder()" id="openFolderBtn" style="display:none">Open Folder</button>
+      <button class="btn" onclick="openOutputFolder()" id="openFolderBtn">Open Folder</button>
       <button class="btn btn-p" onclick="PicLet.close()">Done</button>
     </div>
   </div>
@@ -403,6 +426,55 @@
   </div>
 </div>
 
+<!-- Simplify GIF modal -->
+<div class="modal-overlay" id="simplifyModal" onclick="hideSimplifyModal(event)">
+  <div class="export-modal" onclick="event.stopPropagation()">
+    <h3>Large GIF Detected</h3>
+    <p style="font-size:11px;color:var(--txt2);margin-bottom:12px">
+      This GIF has <b id="simplifyFrameCount">0</b> frames which may be slow to process.
+      Would you like to simplify it by skipping frames?
+    </p>
+    <div class="export-options">
+      <label class="export-opt" onclick="selectSimplifyOption(1)">
+        <input type="radio" name="simplifyType" value="1">
+        <span class="radio"></span>
+        <div class="export-opt-content">
+          <div class="export-opt-title">Keep All Frames</div>
+          <div class="export-opt-desc">Use the original GIF as-is</div>
+        </div>
+      </label>
+      <label class="export-opt selected" onclick="selectSimplifyOption(2)">
+        <input type="radio" name="simplifyType" value="2" checked>
+        <span class="radio"></span>
+        <div class="export-opt-content">
+          <div class="export-opt-title">Skip Every 2nd Frame</div>
+          <div class="export-opt-desc" id="simplifyDesc2">Reduces to ~0 frames</div>
+        </div>
+      </label>
+      <label class="export-opt" onclick="selectSimplifyOption(3)">
+        <input type="radio" name="simplifyType" value="3">
+        <span class="radio"></span>
+        <div class="export-opt-content">
+          <div class="export-opt-title">Skip Every 3rd Frame</div>
+          <div class="export-opt-desc" id="simplifyDesc3">Reduces to ~0 frames</div>
+        </div>
+      </label>
+      <label class="export-opt" onclick="selectSimplifyOption(4)">
+        <input type="radio" name="simplifyType" value="4">
+        <span class="radio"></span>
+        <div class="export-opt-content">
+          <div class="export-opt-title">Skip Every 4th Frame</div>
+          <div class="export-opt-desc" id="simplifyDesc4">Reduces to ~0 frames</div>
+        </div>
+      </label>
+    </div>
+    <div class="export-modal-btns">
+      <button class="cancel" onclick="hideSimplifyModal()">Cancel</button>
+      <button class="confirm" onclick="confirmSimplify()">Continue</button>
+    </div>
+  </div>
+</div>
+
 <!-- Export modal -->
 <div class="modal-overlay" id="exportModal" onclick="hideExportModal(event)">
   <div class="export-modal" onclick="event.stopPropagation()">
@@ -645,6 +717,16 @@ function toggleRatioLock() {
   schedulePreview();
 }
 
+function toggleEdgeDetect() {
+  const enabled = $('rb-edgedetect').checked;
+  $('rb-edgeRow').style.display = enabled ? 'flex' : 'none';
+  // Edge detect and preserve inner are mutually exclusive
+  if (enabled) {
+    $('rb-edges').checked = false;
+  }
+  schedulePreview();
+}
+
 // Get combined options for all active tools
 function getOptions() {
   const opts = { tools: Array.from(activeTools) };
@@ -653,7 +735,9 @@ function getOptions() {
     opts.removebg = {
       fuzz: +$('rb-fuzz').value,
       trim: $('rb-trim').checked,
-      preserveInner: $('rb-edges').checked
+      preserveInner: $('rb-edges').checked,
+      edgeDetect: $('rb-edgedetect').checked,
+      edgeStrength: +$('rb-edgestr').value
     };
   }
 
@@ -697,18 +781,7 @@ function schedulePreview() {
 
 // Show original image
 async function showOriginal() {
-  // For GIFs with frames loaded, show selected frame directly
-  if (isGifFile && gifFrames.length > 0 && gifFrames[selectedFrameIndex]) {
-    const frame = gifFrames[selectedFrameIndex];
-    pA.innerHTML = '';
-    const img = document.createElement('img');
-    img.src = frame.thumbnail;
-    pA.appendChild(img);
-    pI.textContent = `${imageInfo.width} × ${imageInfo.height} (Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount})`;
-    updateZoom();
-    return;
-  }
-
+  // Always fetch full-scale preview from API (not the 96px thumbnails)
   pA.innerHTML = '<div class="mini-sp"></div>';
   try {
     const opts = { tools: [], original: true };
@@ -723,7 +796,7 @@ async function showOriginal() {
       pA.appendChild(img);
       const frameInfo = isGifFile && imageInfo.frameCount > 1 ? ` (Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount})` : '';
       pI.textContent = `${imageInfo.width} × ${imageInfo.height}${frameInfo}`;
-      updateZoom(); // Apply current zoom
+      updateZoom();
     }
   } catch (e) {
     pA.innerHTML = '<span class="placeholder">Failed to load image</span>';
@@ -897,11 +970,24 @@ let isPlaying = false;
 let playInterval = null;
 let playSpeed = 100; // ms per frame
 
-function showFrameStrip() {
+function showFrameStrip(skipSimplifyCheck = false) {
+  // Check for large GIFs and offer to simplify
+  if (!skipSimplifyCheck && imageInfo.frameCount >= LARGE_GIF_THRESHOLD) {
+    checkForLargeGif(imageInfo.frameCount, () => {
+      // After simplification (or if user keeps all frames), show the strip
+      actuallyShowFrameStrip();
+    });
+    return;
+  }
+  actuallyShowFrameStrip();
+}
+
+function actuallyShowFrameStrip() {
   $('framePanel').classList.add('show');
   $('dividerLeft').classList.add('show');
   $('playControls').classList.add('show');
   $('gifExportBtn').classList.add('show');
+  $('frameActions').classList.add('show');
   $('frameCount').textContent = imageInfo.frameCount;
   selectedFrameIndex = 0;
   gifFrames = [];
@@ -914,6 +1000,7 @@ function hideFrameStrip() {
   $('dividerLeft').classList.remove('show');
   $('playControls').classList.remove('show');
   $('gifExportBtn').classList.remove('show');
+  $('frameActions').classList.remove('show');
   stopPlayback();
   gifFrames = [];
   framePreviewCache = {};
@@ -1025,16 +1112,18 @@ function updatePlaybackFrame() {
     thumb.classList.toggle('selected', i === selectedFrameIndex);
   });
 
-  // Update main preview
-  const frame = gifFrames[selectedFrameIndex];
-  if (frame && frame.thumbnail) {
+  // Get the frame image from the strip (includes applied effects if active)
+  const frameThumb = document.querySelector(`.frame-thumb[data-index="${selectedFrameIndex}"] img`);
+  const frameSrc = frameThumb?.src || (gifFrames[selectedFrameIndex]?.thumbnail);
+
+  if (frameSrc) {
     const img = pA.querySelector('img');
     if (img) {
-      img.src = frame.thumbnail;
+      img.src = frameSrc;
     } else {
       pA.innerHTML = '';
       const newImg = document.createElement('img');
-      newImg.src = frame.thumbnail;
+      newImg.src = frameSrc;
       pA.appendChild(newImg);
       updateZoom();
     }
@@ -1090,16 +1179,8 @@ function selectFrame(index) {
 
 async function showSelectedFrame() {
   if (activeTools.size === 0) {
-    // Show original frame
-    const frame = gifFrames[selectedFrameIndex];
-    if (frame && frame.thumbnail) {
-      pA.innerHTML = '';
-      const img = document.createElement('img');
-      img.src = frame.thumbnail;
-      pA.appendChild(img);
-      pI.textContent = `Frame ${selectedFrameIndex + 1} of ${imageInfo.frameCount}`;
-      updateZoom();
-    }
+    // Fetch full-scale frame from API
+    showOriginal();
   } else {
     // Regenerate preview for selected frame
     generatePreview();
@@ -1178,8 +1259,9 @@ async function runExport(opts, message) {
   $('M').classList.add('hide');
   $('B').classList.add('hide');
   $('L').classList.add('on');
-  $('G').classList.add('on');
+  $('LC').classList.add('on');
   $('G').innerHTML = '';
+  $('LP').classList.remove('on');
   $('lT').textContent = message;
 
   try {
@@ -1187,10 +1269,198 @@ async function runExport(opts, message) {
     if (result.logs) {
       result.logs.forEach(l => log('G', l.type[0], l.message));
     }
-    showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
+    // Show done state with preview
+    await showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
   } catch (e) {
     log('G', 'e', e.message);
-    showDone(false, 'Error', e.message);
+    await showDone(false, 'Error', e.message);
+  }
+}
+
+// ── Frame Delete/Replace ──
+
+async function deleteSelectedFrame() {
+  if (!isGifFile || gifFrames.length <= 1) {
+    showAlert('Cannot delete the only frame');
+    return;
+  }
+
+  stopPlayback();
+
+  // Show loading on the frame
+  const thumb = document.querySelector(`.frame-thumb[data-index="${selectedFrameIndex}"]`);
+  if (thumb) thumb.classList.add('processing');
+
+  try {
+    const result = await postJson('/api/delete-frame', { frameIndex: selectedFrameIndex });
+
+    if (result.success) {
+      imageInfo.frameCount = result.frameCount;
+      $('frameCount').textContent = result.frameCount;
+
+      // Adjust selected index if needed
+      if (selectedFrameIndex >= result.frameCount) {
+        selectedFrameIndex = result.frameCount - 1;
+      }
+
+      // Reload frame thumbnails
+      gifFrames = [];
+      framePreviewCache = {};
+      loadFrameThumbnails();
+
+      // Show updated frame
+      setTimeout(() => selectFrame(selectedFrameIndex), 100);
+    } else {
+      if (thumb) thumb.classList.remove('processing');
+      showAlert('Failed to delete frame: ' + (result.error || 'Unknown error'));
+    }
+  } catch (err) {
+    if (thumb) thumb.classList.remove('processing');
+    showAlert('Failed to delete frame: ' + err.message);
+  }
+}
+
+function replaceSelectedFrame() {
+  if (!isGifFile) return;
+  $('replaceInput').click();
+}
+
+async function handleReplaceFile(e) {
+  const file = e.target.files[0];
+  if (!file) return;
+  e.target.value = ''; // Reset for future use
+
+  stopPlayback();
+
+  // Show loading on the frame
+  const thumb = document.querySelector(`.frame-thumb[data-index="${selectedFrameIndex}"]`);
+  if (thumb) thumb.classList.add('processing');
+
+  try {
+    // Read file as base64
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const base64 = reader.result.split(',')[1]; // Remove data URL prefix
+
+      const result = await postJson('/api/replace-frame', {
+        frameIndex: selectedFrameIndex,
+        imageData: base64
+      });
+
+      if (result.success) {
+        // Reload frame thumbnails
+        gifFrames = [];
+        framePreviewCache = {};
+        loadFrameThumbnails();
+
+        // Show updated frame
+        setTimeout(() => selectFrame(selectedFrameIndex), 100);
+      } else {
+        if (thumb) thumb.classList.remove('processing');
+        showAlert('Failed to replace frame: ' + (result.error || 'Unknown error'));
+      }
+    };
+    reader.readAsDataURL(file);
+  } catch (err) {
+    if (thumb) thumb.classList.remove('processing');
+    showAlert('Failed to replace frame: ' + err.message);
+  }
+}
+
+// ── GIF Simplification ──
+
+const LARGE_GIF_THRESHOLD = 50; // Frames threshold for showing simplify prompt
+let selectedSimplifyOption = 2; // Default to skip every 2nd frame
+let pendingSimplifyCallback = null;
+
+function checkForLargeGif(frameCount, callback) {
+  if (frameCount >= LARGE_GIF_THRESHOLD) {
+    showSimplifyModal(frameCount, callback);
+    return true;
+  }
+  if (callback) callback();
+  return false;
+}
+
+function showSimplifyModal(frameCount, callback) {
+  pendingSimplifyCallback = callback;
+
+  // Update modal content
+  $('simplifyFrameCount').textContent = frameCount;
+  $('simplifyDesc2').textContent = `Reduces to ~${Math.ceil(frameCount / 2)} frames`;
+  $('simplifyDesc3').textContent = `Reduces to ~${Math.ceil(frameCount / 3)} frames`;
+  $('simplifyDesc4').textContent = `Reduces to ~${Math.ceil(frameCount / 4)} frames`;
+
+  // Reset selection to skip every 2nd (recommended for most cases)
+  selectedSimplifyOption = 2;
+  document.querySelectorAll('#simplifyModal .export-opt').forEach(opt => {
+    const input = opt.querySelector('input');
+    opt.classList.toggle('selected', input.value === '2');
+    input.checked = input.value === '2';
+  });
+
+  $('simplifyModal').classList.add('on');
+}
+
+function hideSimplifyModal(e) {
+  if (!e || e.target === $('simplifyModal')) {
+    $('simplifyModal').classList.remove('on');
+    pendingSimplifyCallback = null;
+  }
+}
+
+function selectSimplifyOption(value) {
+  selectedSimplifyOption = value;
+  document.querySelectorAll('#simplifyModal .export-opt').forEach(opt => {
+    const input = opt.querySelector('input');
+    opt.classList.toggle('selected', +input.value === value);
+    input.checked = +input.value === value;
+  });
+}
+
+async function confirmSimplify() {
+  // Save callback before hiding modal (hideSimplifyModal clears it)
+  const callback = pendingSimplifyCallback;
+  hideSimplifyModal();
+
+  if (selectedSimplifyOption === 1) {
+    // Keep all frames - just continue
+    if (callback) callback();
+    return;
+  }
+
+  // Show loading state
+  pA.innerHTML = '<div class="mini-sp"></div>';
+  pI.textContent = 'Simplifying GIF...';
+
+  try {
+    const result = await postJson('/api/simplify-gif', { skipFactor: selectedSimplifyOption });
+
+    if (result.success) {
+      // Update image info with simplified version
+      imageInfo.width = result.width;
+      imageInfo.height = result.height;
+      imageInfo.frameCount = result.frameCount;
+
+      // Update display
+      $('origSize').textContent = imageInfo.width + '×' + imageInfo.height;
+
+      // Refresh frame strip (skip simplify check since we just simplified)
+      currentFrameCount = result.frameCount;
+      if (result.frameCount > 1) {
+        showFrameStrip(true); // Skip simplify check
+      } else {
+        hideFrameStrip();
+      }
+
+      if (callback) callback();
+    } else {
+      showAlert('Failed to simplify GIF: ' + (result.error || 'Unknown error'));
+      showOriginal();
+    }
+  } catch (err) {
+    showAlert('Failed to simplify GIF: ' + err.message);
+    showOriginal();
   }
 }
 
@@ -1373,8 +1643,9 @@ async function apply() {
   $('M').classList.add('hide');
   $('B').classList.add('hide');
   $('L').classList.add('on');
-  $('G').classList.add('on');
+  $('LC').classList.add('on');
   $('G').innerHTML = '';
+  $('LP').classList.remove('on');
 
   const toolNames = Array.from(activeTools).map(t => {
     const names = { removebg: 'Remove BG', scale: 'Scale', icons: 'Icons', storepack: 'Store Assets' };
@@ -1389,20 +1660,22 @@ async function apply() {
       result.logs.forEach(l => log('G', l.type[0], l.message));
     }
 
-    showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
+    // Show done state with preview
+    await showDone(result.success, result.success ? 'Done' : 'Failed', result.success ? result.output : result.error);
   } catch (e) {
     log('G', 'e', e.message);
-    showDone(false, 'Error', e.message);
+    await showDone(false, 'Error', e.message);
   }
 }
 
 // Reset to main view
 function reset() {
-  $('D').classList.remove('on', 'ok', 'err');
-  $('G').classList.remove('on');
+  $('DC').classList.remove('on', 'ok', 'err');
+  $('donePreview').classList.remove('on');
+  $('LC').classList.remove('on');
+  $('LP').classList.remove('on');
   $('M').classList.remove('hide');
   $('B').classList.remove('hide');
-  $('openFolderBtn').style.display = 'none';
   lastOutputSuccess = false;
 }
 
@@ -1420,21 +1693,75 @@ function openOutputFolder() {
   postJson('/api/open-folder', {});
 }
 
-// Show done state with optional folder button
-function showDone(success, title, message) {
+// Show output preview thumbnail in log area
+async function showLogPreview() {
+  try {
+    const result = await fetchJson('/api/output-preview');
+    if (result.success && result.imageData) {
+      $('LP').src = result.imageData;
+      $('LP').classList.add('on');
+    }
+  } catch { /* ignore */ }
+}
+
+// Show done state (replaces log container)
+async function showDone(success, title, message) {
   $('L').classList.remove('on');
-  $('D').classList.add('on', success ? 'ok' : 'err');
+  $('LC').classList.remove('on'); // Hide log container
+  $('DC').classList.add('on', success ? 'ok' : 'err');
+  $('DC').classList.remove(success ? 'err' : 'ok');
   $('dT').textContent = title;
   $('dM').textContent = message;
   lastOutputSuccess = success;
   $('openFolderBtn').style.display = success ? '' : 'none';
   if (success) hasChanges = false;
+
+  // Copy logs to done container
+  $('doneLogs').innerHTML = $('G').innerHTML;
+
+  // Fetch and show thumbnail
+  const donePreview = $('donePreview');
+  if (success) {
+    try {
+      const result = await fetchJson('/api/output-preview');
+      if (result.success && result.imageData) {
+        donePreview.innerHTML = '';
+        const img = document.createElement('img');
+        img.src = result.imageData;
+        img.alt = 'Output';
+        donePreview.appendChild(img);
+      } else {
+        // Show error in preview area
+        donePreview.innerHTML = `<span style="color:var(--err);font-size:10px;z-index:1;position:relative">${result.error || 'No preview'}</span>`;
+      }
+    } catch (e) {
+      donePreview.innerHTML = `<span style="color:var(--err);font-size:10px;z-index:1;position:relative">Error: ${e.message}</span>`;
+    }
+  } else {
+    donePreview.innerHTML = '';
+  }
 }
 
 // Init
 setupDragDrop();
 setupDivider();
 
+// Spacebar to toggle GIF playback
+document.addEventListener('keydown', (e) => {
+  // Only handle space if not typing in an input
+  if (e.code === 'Space' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) {
+    if (isGifFile && gifFrames.length > 1) {
+      e.preventDefault();
+      const wasPlaying = isPlaying;
+      togglePlayback();
+      // When stopping, refresh to full-scale preview
+      if (wasPlaying) {
+        showSelectedFrame();
+      }
+    }
+  }
+});
+
 // Resizable dividers
 function setupDivider() {
   const divider = $('divider');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@spark-apps/piclet",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"description": "Lightweight image tools for content creators",
 	"type": "module",
 	"bin": {