Commit graph

255 commits

Author SHA1 Message Date
Jan-Henrik Bruhn
bd80e95004 feature: Migrate SkeletonLoader and PatternSummaryCard to shadcn/ui
- Replace SkeletonLoader with shadcn Skeleton component
- Simplify gradient animation to use shadcn's built-in pulse
- Migrate PatternSummaryCard to shadcn Card and Button
- Replace custom delete button with shadcn Button (outline variant)
- Use Loader2 from lucide-react for loading spinner

Code reduction:
- SkeletonLoader: Removed 8 lines of custom gradient classes
- Delete button: ~70% reduction (200+ char className → cleaner Button)
- Card wrapper: Semantic Card structure vs verbose div classes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-20 15:44:51 +01:00
Jan-Henrik Bruhn
365b0c7ae3 feature: Migrate AppHeader buttons and badges to shadcn/ui
- Replace Disconnect button with shadcn Button (outline variant)
- Replace status badge with shadcn Badge component
- Replace error button with shadcn Button (destructive variant)
- Use cn() helper for conditional className composition
- Preserve glass morphism effects and custom styling

Code reduction:
- Disconnect button: ~40% reduction
- Status badge: ~30% reduction
- Error button: ~60% reduction

Improved maintainability with semantic component usage and cleaner code structure.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-20 15:41:33 +01:00
Jan-Henrik Bruhn
08532d0b01 feature: Add shadcn/ui component library and migrate ConnectionPrompt
- Initialize shadcn/ui with cssVariables and path aliases
- Install core components: Button, Alert, Badge, Card, Dialog, etc.
- Configure Tailwind v4 theme integration with shadcn color system
- Migrate ConnectionPrompt to use shadcn Button and Alert components
- Add cursor-pointer to button variants for better UX
- Remove unused MachineConnection.tsx component

Code reduction: 87% in ConnectionPrompt button (150+ char className → 20 char)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-20 15:33:02 +01:00
Jan-Henrik Bruhn
d31cb2f29e
Merge pull request #21 from jhbruhn/fix/security-headers-and-csp
Some checks failed
Build, Test, and Lint / Build, Test, and Lint (push) Has been cancelled
Draft Release / Draft Release (push) Has been cancelled
Draft Release / Build Web App (push) Has been cancelled
Draft Release / Build Release - macos-latest (push) Has been cancelled
Draft Release / Build Release - ubuntu-latest (push) Has been cancelled
Draft Release / Build Release - windows-latest (push) Has been cancelled
Draft Release / Upload to GitHub Release (push) Has been cancelled
Fix: security headers and csp
2025-12-19 12:55:01 +01:00
1084633b64 fix: Add file path validation with dialog-based approval
- Implement dialog-based path approval system for file operations
- Track user-approved paths from OS file dialogs
- Validate paths before read/write operations
- Prevent path traversal attacks with normalization
- Reject relative paths and null bytes
- Users can save/open files anywhere they choose
- Blocks arbitrary file access from compromised renderer process

This prevents path traversal vulnerabilities while maintaining full
user freedom for file selection.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-19 12:52:34 +01:00
8e84cbf609 fix: Implement Content Security Policy and secure COOP/COEP headers
- Add strict Content Security Policy to protect against XSS attacks
- Implement custom app:// protocol for production builds with proper headers
- Enable secure cross-origin isolation for SharedArrayBuffer support
- Remove insecure --enable-features bypass flag
- Add proper COOP/COEP/CORP headers for all resources
- Allow Pyodide workers to function in production builds

This fixes critical security vulnerabilities while maintaining full
functionality including Pyodide web workers and SharedArrayBuffer.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-19 12:43:54 +01:00
Jan-Henrik Bruhn
a253901fb4 fix: run linter
Some checks are pending
Build, Test, and Lint / Build, Test, and Lint (push) Waiting to run
Draft Release / Draft Release (push) Waiting to run
Draft Release / Build Web App (push) Blocked by required conditions
Draft Release / Build Release - macos-latest (push) Blocked by required conditions
Draft Release / Build Release - ubuntu-latest (push) Blocked by required conditions
Draft Release / Build Release - windows-latest (push) Blocked by required conditions
Draft Release / Upload to GitHub Release (push) Blocked by required conditions
2025-12-18 11:39:22 +01:00
Jan-Henrik Bruhn
20b8d47b6a feature: add prettier to eslint 2025-12-18 11:37:47 +01:00
Jan-Henrik Bruhn
a4fc959eb1 fix: slightly shorten homing message 2025-12-18 11:27:58 +01:00
Jan-Henrik Bruhn
7c2172f52c fix: Remove unused src/assets directory
The src/assets directory only contained a react.svg file that was not referenced anywhere in the codebase. This appears to be leftover boilerplate from the project initialization.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-18 11:26:25 +01:00
Jan-Henrik Bruhn
6b3752cfc2 fix: Remove unused pyodideLoader file
The pyodideLoader was superseded by the worker-based pattern converter (client.ts and worker.ts) which runs Pyodide in a background thread. This legacy code is no longer referenced anywhere in the codebase.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-18 10:21:54 +01:00
Jan-Henrik Bruhn
444e31af35 ci: run smaller tasks on slim runners
Some checks are pending
Build, Test, and Lint / Build, Test, and Lint (push) Waiting to run
Draft Release / Draft Release (push) Waiting to run
Draft Release / Build Web App (push) Blocked by required conditions
Draft Release / Build Release - macos-latest (push) Blocked by required conditions
Draft Release / Build Release - ubuntu-latest (push) Blocked by required conditions
Draft Release / Build Release - windows-latest (push) Blocked by required conditions
Draft Release / Upload to GitHub Release (push) Blocked by required conditions
2025-12-17 21:49:57 +01:00
Jan-Henrik Bruhn
346e81a7c9 ci: run draft release on ubuntu-slim 2025-12-17 21:47:25 +01:00
Jan-Henrik Bruhn
8ae52a79fa
Merge pull request #20 from jhbruhn/feature/unified-color-system
feature: Implement unified semantic color system with Tailwind v4
2025-12-17 21:45:17 +01:00
Jan-Henrik Bruhn
ab9b22b9b8 feature: Implement unified semantic color system with Tailwind v4
- Define semantic color theme in App.css using @theme directive
  - Primary (blue), Success (green), Warning (amber), Danger (red)
  - Info (cyan), Accent (purple), Secondary (orange), Tertiary (teal)
  - Semantic colors reference Tailwind color variables via var()
  - Media query-based dark mode for canvas colors
- Migrate all 16 components from direct Tailwind colors to semantic names
- Create cssVariables.ts utility for Konva canvas color access
- Update KonvaComponents to use CSS variables dynamically
- Replace @apply with CSS variables in index.css for v4 compatibility
- Remove unused designTokens.ts file
- Improve light mode contrast with gray-300 app background
- Adjust canvas and info box backgrounds to gray-200

Benefits:
- Easy theme customization by updating App.css @theme block
- Consistent semantic naming across all components
- Proper dark mode support via media queries
- No visual regressions, all colors maintained

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 21:43:36 +01:00
Jan-Henrik Bruhn
a275f72311
Merge pull request #19 from jhbruhn/fix/fallback-to-pen-stitch-count
Some checks are pending
Build, Test, and Lint / Build, Test, and Lint (push) Waiting to run
Draft Release / Draft Release (push) Waiting to run
Draft Release / Build Web App (push) Blocked by required conditions
Draft Release / Build Release - macos-latest (push) Blocked by required conditions
Draft Release / Build Release - ubuntu-latest (push) Blocked by required conditions
Draft Release / Build Release - windows-latest (push) Blocked by required conditions
Draft Release / Upload to GitHub Release (push) Blocked by required conditions
fix: Fall back to PEN stitch count when machine reports 0 total stitches, fix remaining time calculation
2025-12-17 12:28:29 +01:00
Jan-Henrik Bruhn
38afe33826 style: Apply linter formatting to useMachineStore
Auto-formatted by linter:
- Single quotes → double quotes
- Line wrapping for better readability

No logic changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 12:27:34 +01:00
Jan-Henrik Bruhn
a6868ae5ec chore: Remove unused useBrotherMachine hook
This hook was replaced by useMachineStore (Zustand) and is no longer
used anywhere in the codebase. All functionality has been migrated to
the centralized machine store.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 12:26:49 +01:00
Jan-Henrik Bruhn
bc46fe0015 fix: Calculate time correctly per color block using Brother formula
Implemented proper time calculation matching the Brother app algorithm:
- 150ms per stitch + 3000ms startup time per color block
- Calculate total and elapsed time by summing across color blocks
- This fixes the "999 seconds" issue by calculating time accurately

Created timeCalculation utility with:
- convertStitchesToMinutes: Convert stitches to minutes using PP1 formula
- calculatePatternTime: Calculate total/elapsed time per color blocks

Updated ProgressMonitor to show:
- Total Time (calculated from all color blocks)
- Elapsed Time / Total Time (based on current stitch position)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 12:19:24 +01:00
Jan-Henrik Bruhn
f2d05c2714 fix: Fall back to PEN stitch count when machine reports 0 total stitches
When the machine reports 0 total stitches in patternInfo, fall back to
using the PEN data stitch count (penStitches.stitches.length) for UI
display. This ensures progress percentage and stitch counts display
correctly even when the machine hasn't fully initialized pattern info.

Updated ProgressMonitor to use derived totalStitches value that prefers
patternInfo.totalStitches but falls back to PEN data when needed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 12:14:41 +01:00
Jan-Henrik Bruhn
467eb9df95 refactor: Derive patternUploaded from patternInfo instead of syncing state
Removed redundant patternUploaded state from PatternStore and replaced
it with a derived selector usePatternUploaded() in MachineStore that
computes it from patternInfo !== null.

This eliminates duplicate state, removes the need for synchronization
logic, and ensures a single source of truth for pattern upload status.

Updated all components (App, LeftSidebar, FileUpload, PatternCanvas,
WorkflowStepper) to use the derived selector.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 11:25:26 +01:00
Jan-Henrik Bruhn
c81930d1b7 refactor: Break down App.tsx into focused subcomponents
Extracted App.tsx (469 lines → 91 lines) into 5 new components:
- ErrorPopover: Displays error details with solutions (84 lines)
- AppHeader: Machine status, workflow stepper, errors (207 lines)
- ConnectionPrompt: Connect button or browser warning (67 lines)
- LeftSidebar: Conditional rendering of controls (42 lines)
- PatternPreviewPlaceholder: Empty state for preview (46 lines)

This improves code organization, maintainability, and reusability.
Each component now has a single, clear responsibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 11:16:59 +01:00
Jan-Henrik Bruhn
60762d1526
Merge pull request #18 from jhbruhn/fix/progress-monitor-use-pen-stitches
Some checks are pending
Build, Test, and Lint / Build, Test, and Lint (push) Waiting to run
Draft Release / Draft Release (push) Waiting to run
Draft Release / Build Web App (push) Blocked by required conditions
Draft Release / Build Release - macos-latest (push) Blocked by required conditions
Draft Release / Build Release - ubuntu-latest (push) Blocked by required conditions
Draft Release / Build Release - windows-latest (push) Blocked by required conditions
Draft Release / Upload to GitHub Release (push) Blocked by required conditions
fix: Use decoded penStitches for progress monitor color blocks
2025-12-17 00:26:14 +01:00
Jan-Henrik Bruhn
356e850147 ci: allow pull request write for autolabeler 2025-12-17 00:25:21 +01:00
Jan-Henrik Bruhn
e07d6b9a6f refactor: Extract PatternInfo component to eliminate duplication
Created shared PatternInfo component for displaying pattern statistics
(size, stitch count, colors) used in both FileUpload and PatternSummaryCard.
Reduces code duplication and ensures consistency across the UI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 00:23:56 +01:00
Jan-Henrik Bruhn
a6d9d266f8 fix: Display PEN stitch count with PES count in parentheses
Shows actual machine stitch count (including lock stitches) in both
FileUpload and PatternSummaryCard components, with original PES count
in lighter gray when they differ.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 00:21:02 +01:00
Jan-Henrik Bruhn
0e504c3069 fix: Use decoded penStitches for progress monitor color blocks
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-17 00:09:14 +01:00
Jan-Henrik Bruhn
9f13d49487
Merge pull request #16 from jhbruhn/feature/show-browser-hint
feature: Add browser compatibility detection for Web Bluetooth
2025-12-16 23:59:13 +01:00
Jan-Henrik Bruhn
dac772713c ci: add nameto autolabel workfow 2025-12-16 23:58:26 +01:00
Jan-Henrik Bruhn
abe8dde159 Merge branch 'main' into feature/show-browser-hint 2025-12-16 23:57:52 +01:00
Jan-Henrik Bruhn
f301269efd ci: only run autolabeler on PRs, draft-release on main 2025-12-16 23:57:36 +01:00
Jan-Henrik Bruhn
5fea462a71 feature: Add browser compatibility detection for Web Bluetooth
Detects if the browser supports Web Bluetooth API and displays an
informative warning when unsupported. Provides users with clear
options: use a compatible browser or download the desktop app.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-16 23:54:55 +01:00
Jan-Henrik Bruhn
6cf491d921 feature: Add browser compatibility detection for Web Bluetooth
Detects if the browser supports Web Bluetooth API and displays an
informative warning when unsupported. Provides users with clear
options: use a compatible browser or download the desktop app.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-16 23:49:35 +01:00
Jan-Henrik Bruhn
1517c69595 chore: rename npm tasks with categories 2025-12-16 23:04:27 +01:00
Jan-Henrik Bruhn
1cf3d231fe chore: upgrade pyodide 2025-12-16 23:01:16 +01:00
Jan-Henrik Bruhn
7d42435056
Merge pull request #15 from jhbruhn/fix/inject-version-in-pages-build
Fix: inject version in pages build
2025-12-15 13:54:31 +01:00
f2c5716ad8 fix: Only build and upload artifacts on main branch
Adds conditions to build and upload jobs to only run when triggered by pushes to the main branch, preventing unnecessary builds on pull requests.

Changes:
- Updated build-web job condition to include `github.ref == 'refs/heads/main'`
- Updated build-release job condition to include `github.ref == 'refs/heads/main'`
- Updated upload-to-release job condition to include `github.ref == 'refs/heads/main'`

This ensures:
- Pull requests only update the draft release notes (via release-drafter)
- Actual builds and artifact uploads only happen on main branch pushes
- More efficient CI/CD pipeline with reduced unnecessary builds

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-15 13:53:01 +01:00
2891eea03b fix: Rename release.yml to draft-release.yml
Renames the workflow file to better reflect its purpose of creating and maintaining draft releases.

Changes:
- Renamed .github/workflows/release.yml to .github/workflows/draft-release.yml
- Updated workflow name from "Release" to "Draft Release"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-15 13:51:37 +01:00
78e15432d8 fix: Build web app with version in release workflow
Moves web app build from publish-pages workflow to release workflow to ensure version consistency and better artifact management.

Changes:
- Added build-web job to release.yml that:
  - Updates package.json with the release version
  - Builds the web app with proper base path
  - Creates a versioned zip artifact (respira-web-{version}.zip)
  - Uploads as a release asset alongside desktop builds

- Updated publish-pages.yml to:
  - Remove the build-web job (no longer needed)
  - Download the pre-built web artifact from the release
  - Extract and deploy the versioned build

Benefits:
- All artifacts (desktop + web) built together with same version
- Web app now includes correct version number in package.json
- Simpler and faster publish-pages workflow (no rebuild needed)
- Better caching and consistency across deployments

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-15 13:50:41 +01:00
Jan-Henrik Bruhn
957241dcca
Merge pull request #14 from jhbruhn/fix/detect-pairing-issues
fix: Detect unpaired Bluetooth devices during connection
2025-12-15 13:48:00 +01:00
caf800b40b fix: Detect unpaired Bluetooth devices during connection
The application now properly detects when a Brother PP1 machine is not paired with the operating system. Previously, the connection would appear successful but commands would fail silently.

Changes:
- Enhanced sendCommand() to check for empty or invalid responses during initial connection
- Updated connect() to validate the connection with a test command (getMachineState)
- Properly disconnect and clean up when pairing is not established
- Throw BluetoothPairingError with helpful instructions for the user

When the machine is not paired, users now see a clear error message instructing them to:
1. Long-press the Bluetooth button on the machine
2. Pair via the operating system's Bluetooth settings
3. Try connecting again

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-15 13:45:09 +01:00
5f46f67cb4 doc: Add Readme 2025-12-14 20:45:31 +01:00
Jan-Henrik Bruhn
254b09271e
Merge pull request #13 from jhbruhn/fix/combine-color-end-cut-flags
fix: Combine COLOR_END and CUT flags on same stitch for color changes
2025-12-14 16:52:14 +01:00
7a1178166a fix: Combine COLOR_END and CUT flags on same stitch for color changes
The COLOR_END and CUT commands must be on the same stitch, not separate stitches.
This was causing the machine to execute an extra stitch with the new color before
the jump to the new position.

Changes:
- Combine COLOR_END (X flag) and CUT (Y flag) into single stitch at old position
- Machine now correctly pauses after cut, before jumping to new color section
- Update all color change tests to expect combined COLOR_END+CUT stitch

The correct sequence is now:
1. Finishing lock stitches (old color)
2. COLOR_END+CUT stitch (old color) ← Machine pauses here
3. Jump to new position (new color)
4. Starting lock stitches (new color)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-14 16:44:56 +01:00
Jan-Henrik Bruhn
38c34315f8
Merge pull request #11 from jhbruhn/feature/add-pen-conversion-tests
fix: add lock stitch at start of design
2025-12-14 15:22:02 +01:00
6048a61230 fix: add more tests for lock stitch at start, properly place the lock stitch after the first imported stitch 2025-12-14 15:20:47 +01:00
4fb2b40cba fix: Add starting lock stitches to PEN encoder to match C# behavior
The encoder now adds 8 lock stitches at the very beginning of every pattern,
matching the behavior of the original C# PesxToPen.cs code (Nuihajime_TomeDataPlus
is called when counter <= 2).

Key changes:
- Find first non-MOVE stitch for lock stitch placement
- Add 8 starting lock stitches before main encoding loop
- Calculate forward-looking direction for optimal knot hiding
- Update all 30 tests to account for starting lock stitches

Also added tests to verify:
- DATA_END flag is automatically added to last stitch
- Starting lock stitches are correctly placed at pattern start

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-14 13:23:20 +01:00
Jan-Henrik Bruhn
e7fb02a163
Merge pull request #10 from jhbruhn/feature/add-pen-conversion-tests
Feature: add PEN conversion tests, refactoring around PEN conversion
2025-12-14 12:34:57 +01:00
d35228e40b feature: Add tests for automatic DATA_END flag insertion
Added tests to verify the encoder correctly handles pattern termination:

- Test that DATA_END flag is added to last stitch even without END flag
- Test that DATA_END flag is added when input has explicit END flag

This ensures patterns are always properly terminated in PEN format,
regardless of whether the input stitches have an END marker.

All 29 tests passing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-14 12:32:05 +01:00
ba380723c0 feature: Refactor PEN parser to decoder with coherent types
Renamed and restructured PEN parsing to match encoder pattern:

Changes:
- Renamed pen/parser.ts → pen/decoder.ts (consistent with encoder.ts)
- Created pen/types.ts for PEN-specific type definitions
- Moved types out of machine.ts (they're format-specific, not machine-specific)
- Unified decoder with encoder test helpers (encoder.test.ts now uses decoder)

New structure:
- decodePenStitch() - decode single 4-byte stitch
- decodeAllPenStitches() - decode all stitches from bytes
- decodePenData() - full decode with color blocks and bounds
- getStitchColor() - helper to get color for a stitch index

Type definitions:
- DecodedPenStitch - individual stitch with coordinates and flags
- PenColorBlock - color block (stitch range for one thread)
- DecodedPenData - complete decoded pattern data

Backward compatibility:
- Added compatibility aliases (isJump, flags, startStitch, endStitch)
- Maintains API compatibility with existing UI code

Also added dist-electron to eslint ignore list.

All tests passing (27/27), build successful, lint clean.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-14 12:27:24 +01:00