Two issues caused intermittent step addition failures in the automation
pipeline:
1. RemoveBgControls had onChange in its useEffect deps. Since onChange is
a new function reference on every parent render, this created an
infinite re-render loop (effect -> setState -> render -> effect).
Fixed by using the onChangeRef pattern matching other settings
components.
2. All step mutation callbacks read from stepsRef.current and passed
values to setSteps. Concurrent callbacks (e.g. addStep + a settings
effect) would overwrite each other. Fixed by switching to functional
state updates (setSteps(prev => ...)) and removing stepsRef.
Also rewrites automate e2e tests to use manual step addition instead of
referencing templates that no longer exist in the UI.
Child component effects (Controls onChange) fire before the parent's
useEffect that synced stepsRef. This caused updateStepSettings to read
stepsRef.current as [] and wipe out newly added steps.
Fix: assign stepsRef.current = steps directly during render so the
ref is always current before any child effects execute.
All step mutation callbacks (addStep, removeStep, moveStep,
updateStepSettings) captured `steps` in their useCallback closures.
When React batched state updates, rapid interactions could use a stale
steps array, causing clicks to silently fail.
Fix: use a stepsRef that always holds the latest value. Callbacks read
from stepsRef.current instead of the captured closure variable, and no
longer need `steps` in their dependency arrays.
When a tool was selected via search, the search text persisted after
the picker closed. Reopening the picker showed a filtered list instead
of all tools, making it look like clicking tools without searching
didn't work.
The settings panel used conditional rendering ({isExpanded && ...})
which unmounted the Controls component on collapse, losing all state.
Switch to CSS hidden class so the component stays mounted and settings
persist when the panel is collapsed and re-expanded.
Extract a *Controls subcomponent from all 16 pipeline-compatible tool
settings components. Each Controls component holds the UI state and
settings controls, accepts an onChange callback, and uses useRef to
prevent infinite re-render loops. The standalone *Settings components
become thin wrappers that add useToolProcessor, useFileStore, and
action buttons.
pipeline-step-settings.tsx is rewritten from ~675 lines to ~55 lines:
the entire TOOL_FIELDS declarative map and generic renderer are deleted
and replaced with direct imports of the Controls components. Pipeline
steps now render the exact same UI as standalone tool pages.
Special cases:
- CropControls: numeric inputs for pipeline (standalone uses canvas)
- RotateControls: resetSignal prop for post-processing reset
- ColorControls: accepts toolId for tab selection
- StripMetadataControls: checkboxes only (no file inspection)
- RemoveBgControls: already extracted, unchanged
Extract the settings controls (subject type, quality, background color)
from RemoveBgSettings into a shared RemoveBgControls component that
accepts settings + onChange props. Both the standalone tool page and the
pipeline step configurator now render the same component, so the UI is
identical and changes only need to be made in one place.
The pipeline step settings had an empty array for remove-background,
showing "No configurable settings" even though the tool supports
model selection and background color. Add AI model selector (u2net,
birefnet-general-lite, birefnet-general, birefnet-portrait, bria-rmbg)
and background color picker matching the standalone tool's options.
Register remove-background, upscale, and blur-faces in the pipeline
tool registry via registerToolProcessFn(). These tools keep their
custom HTTP routes (with progress callbacks) for direct use, but now
also provide a simple process function for pipeline/batch execution.
Add a search bar to the pipeline tool picker so users can quickly
find tools by name or description. Uses the existing SearchBar
component and the same filtering pattern as the main tool panel.
Update tests to reflect that these 3 AI tools are now pipeline-
compatible (moved from excluded to included assertions).
The pipeline tool picker was showing all tools, but only tools
registered via createToolRoute() support pipeline execution. Tools
with custom routes (remove-background, upscale, ocr, etc.) would
silently fail with "Tool not found" and the empty catch block hid
the error from users.
Add GET /api/v1/pipeline/tools endpoint that returns the IDs of
pipeline-compatible tools. The frontend fetches this list and filters
the tool picker accordingly. Also surface pipeline execution errors
in the UI instead of swallowing them.
Safari, Chrome, and Firefox only offer to save passwords when they see
a real form submission with page navigation, not fetch() + redirect.
After the change-password API call succeeds, dynamically create a form
with the username and new password (autocomplete=username + new-password),
POST it to "/" causing a real navigation. The browser detects the form
submission with credential fields and prompts to save.
Also make the username field visible (read-only) on the change-password
page since Safari ignores hidden inputs for password detection, and add
autocomplete attributes to the login page fields.
Add a "Generate strong password" button that creates a random 16-char
password meeting all requirements (uppercase, lowercase, digit).
Generated passwords are shown in plain text so users can copy them.
Add autocomplete attributes (current-password, new-password, username)
so browsers prompt to save the new credentials after submission.
The backend sets mustChangePassword=true for all new accounts and
blocks API calls until the password is changed. The frontend was not
handling this flag - it logged the user in and redirected to the
dashboard where every API call silently failed with 403.
Add a /change-password page that is shown when mustChangePassword is
true. The login page now redirects there instead of home, and the
AuthGuard intercepts any direct navigation to force the change first.
Remove hardcoded --platform=linux/amd64 from Dockerfile so buildx produces
native arm64 images for Apple Silicon and Raspberry Pi. Add audit logging
for auth events, harden file storage with extension whitelists and
double-extension attack prevention, reject null-byte buffers in validation,
add data-testid attributes to all tool settings components, update
deployment docs with architecture notes and correct CI workflow references,
and fix unit test mock to match throwWithMessage error extraction.
- Backend: look up teams by name first (frontend sends name, not ID)
- Frontend: parse response body on API errors instead of showing
generic "API error: 400" — now shows the actual server message
(e.g. "Password must be at least 8 characters...")
Replace the external mask file upload workflow with an interactive
canvas-based brush tool. Users now paint directly on the image to
mark areas for erasure. Adds EraserCanvas component with adjustable
brush size, undo/clear, and mask export. Switch Python inpainting
from broken lama-cleaner to OpenCV cv2.inpaint (Telea algorithm).
Add before/after comparison slider after processing.
Remove approximate processing times from remove-bg quality options.
Update tool count from 37 to 33 across README, settings dialog, login
page, and i18n strings to reflect the accurate count.
Fix face detection failure caused by MediaPipe 0.10.33 removing the
mp.solutions API. Replace with OpenCV Haar cascade which works reliably
in headless Docker. Add autoOrient() call before detection to handle
EXIF-rotated phone photos. Remove technical jargon from UI.
Fix rotated output by calling autoOrient() before passing images to
the Python upscaler, correcting EXIF orientation metadata. Replace
2x/4x buttons with 2x-8x slider plus quick-select buttons (2x, 3x,
4x, 6x, 8x). Remove technical jargon about Real-ESRGAN/Lanczos from
the UI and progress bar.
Add CSS filter-based live preview for brightness, contrast, saturation,
color effects (grayscale/sepia/invert), and color channels (via SVG
feColorMatrix). The image in the right panel updates instantly as
sliders are adjusted. Adds cssFilter prop to ImageViewer, onPreviewFilter
callback to ColorSettings, and wires them through the tool page.
Add a miniature page preview in the settings panel that shows how the
image will look in the PDF. The preview updates in real-time as the
user changes page size, orientation, or margin. Uses the same scaling
logic as the backend to accurately represent image placement. Preview
tracks the currently selected image when multiple files are uploaded.
Replace the static angle display between Left/Right buttons with an
editable input field that accepts direct angle entry. Add - and +
buttons for 1-degree fine-tuned control. All controls update the
rotation state which triggers real-time CSS preview on the image.
Remove docs/superpowers/, .claude/ config, and PRD.md from version
control (kept locally via .gitignore). Update README, CHANGELOG,
VitePress docs, and .env.example to reflect recent features: Files
page, teams, admin settings, persistent storage, and various API
improvements.
checkAuth was defined as a plain function and used as a useEffect
dependency, causing it to fire on every render. Moved it inside the
effect with an empty dependency array so it runs once on mount.
- Add Teams section with CRUD (create, rename, delete) and member count display
- Add Tools section with per-tool enable/disable toggles grouped by category
- Add logo upload/delete, experimental tools toggle, file management settings to System Settings
- Replace free-text team input with dropdown populated from teams API in People section
- Filter disabled/experimental tools in tool panel, pipeline builder, and fullscreen grid
- Display custom logo in mobile header and sidebar when configured
Replace static desktop-only layout with responsive version: mobile gets a
tab bar (Recent / Upload) and a bottom-sheet drawer for file details, while
desktop retains the existing three-column panel layout. FileDetails gains
updated mobile wrapper classes (removes border/width, uses flex gap).
Add serverFileId to FileEntry, pass fileId in tool processor formData when
a file originates from the Files page, and set serverFileId on the loaded
entry so subsequent tool runs create new file versions instead of duplicates.
Creates the full Files page UI (Tasks 8 & 9): FilesNav, FileListItem,
FileList, FileDetails, FileUploadArea components, FilesPage layout, and
wires up the /files route plus sidebar/mobile-nav entries.
Adds UserFile/UserFileDetail types plus apiListFiles, apiGetFileDetails,
apiUploadUserFiles, apiDeleteUserFiles, getFileThumbnailUrl, and
getFileDownloadUrl to support the Files page.
Replace placeholder "default settings" message with actual form controls
when expanding pipeline steps. Each tool now shows its configurable fields
(dimensions, quality, colors, modes, etc.) directly in the pipeline builder.
Covers all 30+ tools with data-driven field definitions: number inputs,
select groups, checkboxes, color pickers, and conditional fields.
- Remove @fastify/swagger and @fastify/swagger-ui (API docs live on GitHub Pages)
- Run typecheck, build, and docker CI jobs in parallel instead of sequentially
react-image-crop's onChange passes (pixelCrop, percentCrop) — we were
using the first arg (display pixels) but treating them as percentages,
causing values to exceed image dimensions.
Samsung Galaxy phones (and others) can have GPS EXIF tags with null
coordinate values when location is disabled. The server returned
_latitude: null, and the client guard used !== undefined which passed
for null, causing null.toFixed() to crash React with no ErrorBoundary.
- Server: validate GPS array values are actual numbers before computing
- Client: use != null guard (catches both null and undefined)
- App: add ErrorBoundary to prevent white screens from any future crash
Integrates feature/multi-image-ux branch with 20 commits including:
- Multi-image viewer with arrow navigation and filmstrip thumbnails
- Batch processing across all tool settings components
- File store rewrite with FileEntry model for multi-image support
- Resize settings redesigned with tab-based UI (presets, custom, scale)
- Side-by-side comparison for resize results
- Per-file metadata caching in strip-metadata
- Client-side ZIP extraction via fflate
- SSE progress correlation via clientJobId
Consolidate all access to localhost:1349 — Vite dev server serves on 1349
and proxies API calls to an internal dev port (13490). Production API
defaults to 1349. Also includes strip-metadata improvements, UI component
updates, and compress operation fixes.
Siddharth Kumar Sah