pulp-image 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -17,36 +17,74 @@ See [Roadmap](ROADMAP.md) for upcoming features (v0.2.0: UI Redesign, Rotate, Fl
 ### Changed
 - Streamlined README with quick links and features grid
 - Added public roadmap and changelog
-- Updated project slogan
+- Improved documentation and help content
 
 ---
 
 ## [0.1.7] - 2026-01-12
 
-### Added
-- Auto suffix option to add dimensions to filenames
-- Custom suffix support for output filenames
-- Rename patterns with tokens {name}, {ext}, {index} (UI only)
+### Fixed
+- Custom output directory filter not working correctly in UI
+
+### Changed
+- Improved Help tab content and styling
+
+---
+
+## [0.1.6] - 2026-01-11
+
+### Changed
+- Updated README and package.json homepage
+
+---
+
+## [0.1.5] - 2026-01-11
+
+### Fixed
+- UI color contrast for WCAG AA accessibility
+
+---
+
+## [0.1.4] - 2026-01-10
+
+### Fixed
+- Terminal banner (ASCII art) width now dynamic
+
+---
+
+## [0.1.3] - 2026-01-10
+
+### Fixed
+- Dynamic version display in banner
+
+---
+
+## [0.1.2] - 2026-01-09
 
 ### Fixed
-- Minor bug fixes and improvements
+- npm bin configuration for global install
 
 ---
 
-## [0.1.0] - Initial Release
+## [0.1.1] - 2026-01-09 (Initial Release)
 
 ### Added
 - **CLI Tool**: Full command-line interface for image processing
 - **Browser UI**: Launch with `pulp ui`, works offline, no uploads
-- **Format Conversion**: PNG, JPG, WebP, AVIF, GIF, TIFF
-- **Resize**: By width, height, or exact dimensions
-- **Quality Control**: Compression quality 1-100
+- **Format Conversion**: PNG, JPG, WebP, AVIF
+- **Resize**: By width, height, or exact dimensions with aspect ratio preservation
+- **Quality Control**: Compression quality 1-100 for lossy formats
 - **Lossless Mode**: For WebP and AVIF
 - **Transparency Handling**: Flatten with custom background color
-- **Batch Processing**: Process entire folders
+- **Batch Processing**: Process entire folders at once
+- **Auto Suffix**: Add dimensions to filenames (-800w, -600h, -800x600)
+- **Custom Suffix**: Add custom text to output filenames
+- **Rename Patterns**: Tokens {name}, {ext}, {index} for output naming (UI only)
 - **Custom Output Directory**: Save files anywhere
 - **Overwrite Protection**: Skip or overwrite existing files
 - **Delete Originals**: Remove source files after processing (CLI only)
+- **Verbose Mode**: Detailed per-file output (CLI only)
+- **Statistics**: Original size, final size, bytes saved, percentage reduction
 
 ---
 

package/ROADMAP.md

@@ -8,7 +8,7 @@
 
 | Feature | Description |
 |---------|-------------|
-| ~~**Format Conversion**~~ | ~~Convert between PNG, JPG, WebP, AVIF, GIF, TIFF~~ |
+| ~~**Format Conversion**~~ | ~~Convert between PNG, JPG, WebP, AVIF~~ |
 | ~~**Resize**~~ | ~~Resize by width, height, or both with auto aspect ratio~~ |
 | ~~**Quality Control**~~ | ~~Adjust compression quality (1-100)~~ |
 | ~~**Lossless Mode**~~ | ~~Preserve full quality for WebP and AVIF~~ |
@@ -27,6 +27,7 @@
 | Feature | Description |
 |---------|-------------|
 | **UI Redesign** | Modern tabbed interface with dark mode |
+| **Results Redesign** | Clearer output with operation summary (CLI and UI) |
 | **Rotate** | Rotate images by 90°, 180°, 270°, or custom angle |
 | **Flip / Mirror** | Flip vertically or horizontally |
 | **Grayscale** | Convert images to black and white |

package/bin/pulp.js

@@ -19,15 +19,33 @@ import { planTasks } from '../src/planTasks.js';
 import { Reporter } from '../src/reporter.js';
 import { runJob } from '../src/runJob.js';
 import { startUIServer } from '../src/uiServer.js';
+import { checkForUpdate, formatUpdateMessage } from '../src/updateCheck.js';
 import { statSync, existsSync } from 'fs';
 
 const program = new Command();
 const banner = getBanner(pkg.version);
 
+// Format update message with colors for CLI
+function formatUpdateBox(updateMsg) {
+  if (!updateMsg) return null;
+  
+  const lines = [
+    '',
+    chalk.bgYellow.black(' UPDATE AVAILABLE '),
+    '',
+    `  ${chalk.gray('Current:')} ${chalk.white(updateMsg.current)}`,
+    `  ${chalk.gray('Latest:')}  ${chalk.green.bold(updateMsg.latest)}`,
+    '',
+    `  ${chalk.cyan('npm update -g pulp-image')}`,
+    ''
+  ];
+  
+  return lines.join('\n');
+}
+
 program
   .name('pulp')
   .description('Full-featured image processing CLI with a browser UI. 100% local.')
-  .version(pkg.version)  
   .addHelpText('before', chalk.cyan(banner))
   .argument('[input]', 'Input file or directory')
   .option('-w, --width <number>', 'Output width in pixels')
@@ -73,6 +91,9 @@ Compression Behavior:
     // Display banner
     console.log(chalk.cyan(banner));
     
+    // Start update check early (runs in background while processing)
+    const updateCheckPromise = checkForUpdate(pkg.version).catch(() => null);
+    
     // Normalize config
     const config = {
       input: input || null,
@@ -212,6 +233,15 @@ Compression Behavior:
       results.failed.forEach(f => reporter.recordFailed(f.filePath, new Error(f.error)));
       reporter.printSummary(config.verbose);
     }
+    
+    // Show update notification at the end (if available)
+    const updateInfo = await updateCheckPromise;
+    if (updateInfo) {
+      const updateMsg = formatUpdateMessage(updateInfo);
+      if (updateMsg) {
+        console.log(formatUpdateBox(updateMsg));
+      }
+    }
   });
 
 // UI command
@@ -227,6 +257,14 @@ program
       process.exit(1);
     }
     
+    // Check for updates when starting UI
+    checkForUpdate(pkg.version).then(updateInfo => {
+      const updateMsg = formatUpdateMessage(updateInfo);
+      if (updateMsg) {
+        console.log(formatUpdateBox(updateMsg));
+      }
+    }).catch(() => {}); // Silently ignore errors
+    
     try {
       const { server } = await startUIServer(port);
       
@@ -248,5 +286,25 @@ program
     }
   });
 
-program.parse();
+// Handle --version manually (before Commander parses) to include update check
+if (process.argv.includes('--version') || process.argv.includes('-V')) {
+  (async () => {
+    console.log(pkg.version);
+    
+    // Check for updates
+    try {
+      const updateInfo = await checkForUpdate(pkg.version);
+      const updateMsg = formatUpdateMessage(updateInfo);
+      if (updateMsg) {
+        console.log(formatUpdateBox(updateMsg));
+      }
+    } catch {
+      // Silently ignore errors
+    }
+    
+    process.exit(0);
+  })();
+} else {
+  program.parse();
+}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulp-image",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Full-featured image processing CLI with a browser UI. 100% local.",
   "type": "module",
   "main": "bin/pulp.js",

package/src/uiServer.js

@@ -7,6 +7,7 @@ import { randomUUID } from 'crypto';
 import multer from 'multer';
 import open from 'open';
 import { runJob } from './runJob.js';
+import { checkForUpdate } from './updateCheck.js';
 import { exec, spawn } from 'child_process';
 import { promisify } from 'util';
 
@@ -321,6 +322,23 @@ export async function startUIServer(port = 3000) {
       res.status(500).json({ error: 'Failed to read version' });
     }
   });
+  
+  // Update check endpoint - checks npm registry for newer versions
+  app.get('/api/check-update', async (req, res) => {
+    try {
+      const packageJsonPath = join(projectRoot, 'package.json');
+      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+      const currentVersion = packageJson.version;
+      
+      const force = req.query.force === 'true';
+      const updateInfo = await checkForUpdate(currentVersion, { force });
+      
+      res.json(updateInfo);
+    } catch (error) {
+      console.error('Error checking for updates:', error);
+      res.status(500).json({ error: 'Failed to check for updates' });
+    }
+  });
 
   // Serve static files from ui directory
   app.use(express.static(uiDir));

package/src/updateCheck.js

@@ -0,0 +1,200 @@
+/**
+ * Update checker for Pulp Image
+ * Checks npm registry for newer versions and caches results
+ */
+
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { join } from 'path';
+import { homedir } from 'os';
+
+const PACKAGE_NAME = 'pulp-image';
+const NPM_REGISTRY_URL = `https://registry.npmjs.org/${PACKAGE_NAME}/latest`;
+const CACHE_DURATION_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+/**
+ * Get cache directory path
+ * @returns {string} Path to cache directory
+ */
+function getCacheDir() {
+  return join(homedir(), '.config', 'pulp-image');
+}
+
+/**
+ * Get cache file path
+ * @returns {string} Path to cache file
+ */
+function getCacheFile() {
+  return join(getCacheDir(), 'update-cache.json');
+}
+
+/**
+ * Read cached update check result
+ * @returns {object|null} Cached result or null if expired/missing
+ */
+function readCache() {
+  try {
+    const cacheFile = getCacheFile();
+    if (!existsSync(cacheFile)) {
+      return null;
+    }
+    
+    const cache = JSON.parse(readFileSync(cacheFile, 'utf-8'));
+    const now = Date.now();
+    
+    // Check if cache is still valid
+    if (cache.timestamp && (now - cache.timestamp) < CACHE_DURATION_MS) {
+      return cache;
+    }
+    
+    return null; // Cache expired
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Write update check result to cache
+ * @param {object} data - Data to cache
+ */
+function writeCache(data) {
+  try {
+    const cacheDir = getCacheDir();
+    if (!existsSync(cacheDir)) {
+      mkdirSync(cacheDir, { recursive: true });
+    }
+    
+    const cache = {
+      ...data,
+      timestamp: Date.now()
+    };
+    
+    writeFileSync(getCacheFile(), JSON.stringify(cache, null, 2));
+  } catch {
+    // Silently fail - caching is optional
+  }
+}
+
+/**
+ * Compare two semantic version strings
+ * @param {string} current - Current version (e.g., "0.1.8")
+ * @param {string} latest - Latest version (e.g., "0.2.0")
+ * @returns {boolean} True if latest is newer than current
+ */
+function isNewerVersion(current, latest) {
+  const parseVersion = (v) => v.replace(/^v/, '').split('.').map(n => parseInt(n, 10) || 0);
+  
+  const currentParts = parseVersion(current);
+  const latestParts = parseVersion(latest);
+  
+  for (let i = 0; i < 3; i++) {
+    const curr = currentParts[i] || 0;
+    const lat = latestParts[i] || 0;
+    
+    if (lat > curr) return true;
+    if (lat < curr) return false;
+  }
+  
+  return false; // Versions are equal
+}
+
+/**
+ * Fetch latest version from npm registry
+ * @param {number} timeoutMs - Request timeout in milliseconds
+ * @returns {Promise<string|null>} Latest version or null on error
+ */
+async function fetchLatestVersion(timeoutMs = 3000) {
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), timeoutMs);
+    
+    const response = await fetch(NPM_REGISTRY_URL, {
+      signal: controller.signal,
+      headers: {
+        'Accept': 'application/json'
+      }
+    });
+    
+    clearTimeout(timeout);
+    
+    if (!response.ok) {
+      return null;
+    }
+    
+    const data = await response.json();
+    return data.version || null;
+  } catch {
+    // Network error, timeout, or offline - silently fail
+    return null;
+  }
+}
+
+/**
+ * Check for updates (with caching)
+ * @param {string} currentVersion - Current installed version
+ * @param {object} options - Options
+ * @param {boolean} options.force - Force check, ignore cache
+ * @returns {Promise<object>} Update check result
+ */
+export async function checkForUpdate(currentVersion, options = {}) {
+  const { force = false } = options;
+  
+  // Check cache first (unless forced)
+  if (!force) {
+    const cached = readCache();
+    if (cached && cached.currentVersion === currentVersion) {
+      return {
+        updateAvailable: cached.updateAvailable,
+        currentVersion: cached.currentVersion,
+        latestVersion: cached.latestVersion,
+        cached: true
+      };
+    }
+  }
+  
+  // Fetch latest version from npm
+  const latestVersion = await fetchLatestVersion();
+  
+  if (!latestVersion) {
+    // Couldn't fetch - return no update (fail silently)
+    return {
+      updateAvailable: false,
+      currentVersion,
+      latestVersion: null,
+      error: true
+    };
+  }
+  
+  const updateAvailable = isNewerVersion(currentVersion, latestVersion);
+  
+  // Cache the result
+  const result = {
+    updateAvailable,
+    currentVersion,
+    latestVersion
+  };
+  
+  writeCache(result);
+  
+  return {
+    ...result,
+    cached: false
+  };
+}
+
+/**
+ * Format update notification message for CLI
+ * @param {object} updateInfo - Result from checkForUpdate
+ * @returns {object|null} Message parts or null if no update
+ */
+export function formatUpdateMessage(updateInfo) {
+  if (!updateInfo.updateAvailable || !updateInfo.latestVersion) {
+    return null;
+  }
+  
+  return {
+    current: updateInfo.currentVersion,
+    latest: updateInfo.latestVersion,
+    // Simple text version for basic usage
+    text: `Update available: ${updateInfo.currentVersion} → ${updateInfo.latestVersion}\nRun: npm update -g pulp-image`
+  };
+}

package/ui/app.js

@@ -67,6 +67,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   await loadVersion(); // Load version from backend
   await updateOutputDirectory(); // Initialize output directory
   await updateUI();
+  checkForUpdates(); // Check for updates (non-blocking)
 });
 
 // Load version from backend (single source of truth)
@@ -1316,6 +1317,61 @@ function setupHelpSubnav() {
   window.addEventListener('scroll', updateActiveOnScroll);
 }
 
+// Check for Updates
+async function checkForUpdates() {
+  try {
+    const response = await fetch('/api/check-update');
+    if (!response.ok) return;
+    
+    const updateInfo = await response.json();
+    
+    if (updateInfo.updateAvailable && updateInfo.latestVersion) {
+      showUpdateBanner(updateInfo.currentVersion, updateInfo.latestVersion);
+    }
+  } catch (error) {
+    // Silently fail - update check is optional
+    console.debug('Update check failed:', error);
+  }
+}
+
+// Show Update Banner
+function showUpdateBanner(currentVersion, latestVersion) {
+  // Don't show if already shown
+  if (document.getElementById('update-banner')) return;
+  
+  const banner = document.createElement('div');
+  banner.id = 'update-banner';
+  banner.className = 'update-banner';
+  banner.innerHTML = `
+    <div class="update-banner-content">
+      <span class="update-banner-icon">🎉</span>
+      <div class="update-banner-text">
+        <strong>Update available!</strong>
+        <span class="update-banner-versions">v${currentVersion} → v${latestVersion}</span>
+      </div>
+      <div class="update-banner-actions">
+        <span class="update-banner-hint">CLI users:</span>
+        <code>npm update -g pulp-image</code>
+        <span class="update-banner-separator">|</span>
+        <span class="update-banner-hint">Portable:</span>
+        <a href="https://pulp.run" target="_blank" rel="noopener">pulp.run</a>
+      </div>
+    </div>
+    <button class="update-banner-close" aria-label="Dismiss">&times;</button>
+  `;
+  
+  // Add close handler
+  banner.querySelector('.update-banner-close').addEventListener('click', () => {
+    banner.remove();
+  });
+  
+  // Insert at top of container
+  const container = document.querySelector('.container');
+  if (container) {
+    container.insertBefore(banner, container.firstChild);
+  }
+}
+
 // Initialize when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
   setupTerminalCopyButtons();

package/ui/styles.css

@@ -1220,3 +1220,131 @@ body {
   }
 }
 
+/* Update Banner */
+.update-banner {
+  background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
+  padding: 1rem 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
+}
+
+.update-banner-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.update-banner-icon {
+  font-size: 1.5rem;
+}
+
+.update-banner-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.update-banner-text strong {
+  color: white;
+  font-size: 1rem;
+}
+
+.update-banner-versions {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.update-banner-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 0.85rem;
+}
+
+.update-banner-hint {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.update-banner-separator {
+  color: rgba(255, 255, 255, 0.4);
+  margin: 0 0.25rem;
+}
+
+.update-banner-actions code {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.8rem;
+}
+
+.update-banner-actions a {
+  color: white;
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
+.update-banner-actions a:hover {
+  text-decoration-thickness: 3px;
+}
+
+.update-banner-close {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  font-size: 1.25rem;
+  color: white;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  line-height: 1;
+  border-radius: 4px;
+  opacity: 0.8;
+  transition: opacity 0.2s, background 0.2s;
+}
+
+.update-banner-close:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+@media (max-width: 700px) {
+  .update-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+    position: relative;
+    padding-right: 3rem;
+  }
+  
+  .update-banner-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  
+  .update-banner-close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+  }
+  
+  .update-banner-actions {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.35rem;
+  }
+  
+  .update-banner-separator {
+    display: none;
+  }
+}