Commit graph

145 commits

Author SHA1 Message Date
044c7f4906 Change application name 2025-12-07 23:45:34 +01:00
0a7e0e652d Shell bash 2025-12-07 23:20:36 +01:00
f05aa8d5a3 Fix release asset upload to support glob patterns
Remove duplicate upload step using actions/upload-release-asset@v1
which doesn't support wildcards. Keep only the gh CLI upload which
properly handles multiple files.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 23:11:28 +01:00
27d84aa895 add license 2025-12-07 22:58:02 +01:00
ca89658e80 Fix Linux packaging by specifying executable name
Add executableName to packagerConfig to ensure consistent binary naming
across platforms. Fixes DEB and RPM maker errors on Linux.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 22:54:17 +01:00
80a9558c5d Fix Electron Forge packaging error on macOS
Remove extraResource configuration that was trying to copy non-existent
dist/assets directory. The Vite plugin handles all assets automatically.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 22:52:16 +01:00
17d7fb6b12 Add GitHub Actions workflows for CI/CD and releases
- Add build.yml workflow for continuous integration
  - Builds web app on Ubuntu
  - Packages Electron app for Windows, macOS, and Linux
  - Uploads artifacts for each platform

- Add release.yml workflow with release-drafter integration
  - Automatically creates draft releases on push to main
  - Auto-calculates version based on PR labels (major/minor/patch)
  - Updates package.json version during build for proper installers
  - Uploads platform-specific installers to draft releases

- Add release-drafter.yml configuration
  - Organizes changelog by categories (Features, Bug Fixes, Maintenance)
  - Supports semantic versioning via PR labels

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 22:49:36 +01:00
f80cabc5f2 Add Electron desktop application support with Electron Forge
Major changes:
- Add Electron main process and preload scripts with Web Bluetooth support
- Implement platform abstraction layer for storage and file services
- Create BluetoothDevicePicker component for device selection UI
- Migrate from electron-builder to Electron Forge for packaging
- Configure Vite for dual browser/Electron builds
- Add native file dialogs and persistent storage via electron-store
- Hide menu bar for cleaner desktop app appearance

The app now works in both browser (npm run dev) and Electron (npm run start).
Package with 'npm run package' or create installers with 'npm run make'.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 22:39:38 +01:00
60ebd858ef Move upload progress bar below buttons in FileUpload component
Improve visual hierarchy by displaying the upload progress bar after the action buttons instead of before them.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:54:42 +01:00
45c3f2ee07 Add dark mode support to skeleton loaders
Update all skeleton components to properly support dark mode with appropriate color variants for backgrounds, borders, and gradients.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:52:08 +01:00
8ee7d0ce7b Add Bluetooth pairing error detection and automatic disconnect handling
Detect when device is not paired at OS level and handle automatic disconnections. The app now properly updates UI state when the device is disconnected by the OS.

Changes:
- Add BluetoothPairingError custom error class in BrotherPP1Service
- Track isInitialConnection state to differentiate pairing issues from disconnects
- Detect pairing issues in sendCommand() only during initial connection
- Add onDisconnect() subscription method to BrotherPP1Service
- Listen for 'gattserverdisconnected' events and update state automatically
- Add isPairingError state to useBrotherMachine hook
- Display pairing errors with blue info styling instead of red error styling
- Include step-by-step pairing instructions: long-press Bluetooth button on machine, then pair in OS settings
- Automatically reset connection state when device disconnects

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:49:34 +01:00
651fa35a77 Fix lint errors in Vite config and MachineConnection
- Add proper TypeScript types for PyPI API response
- Remove unused isPolling prop from MachineConnection interface
- Remove unused imports from vite.config.ts

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:35:02 +01:00
775a8b19d1 Add Vite plugin to download Python wheels from PyPI during build
Remove pystitch wheel from source control and implement automatic downloading via custom Vite plugin. The plugin fetches wheels from PyPI API and serves them in both dev and production builds.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:32:15 +01:00
3ef9ca14c1 Add icons to action buttons and improve button styling
FileUpload:
- Added FolderOpenIcon to "Choose PES File" button

ProgressMonitor:
- Start Sewing button takes 2x space (flex-[2]) as primary action
- Trace Again button takes 1x space (flex-1) as secondary action
- Added PlayIcon to Start/Resume Sewing buttons
- Added ArrowPathIcon to Trace Again button
- Buttons fill full width with proper flex distribution
- Sizing consistent with rest of UI (text-xs, px-3 py-2)

Header:
- Disconnect button turns red on hover for clear destructive action

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:17:51 +01:00
c573c6414c Add machine info tooltip to serial number in header
Show detailed machine information when hovering over serial number:
- Serial number
- MAC address
- Total stitches sewn by machine
- Stitches since last service

Tooltip dynamically includes only available information.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:12:08 +01:00
9d9f71c543 Fix missing isDeleting prop destructuring in ProgressMonitor
Add isDeleting to destructured props with default value of false.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:10:19 +01:00
72641c0fb6 Fix button states to prevent actions during ongoing operations
- FileUpload: Disable "Choose PES File" button during upload
- ProgressMonitor: Disable Start/Resume/Trace buttons during pattern deletion
- Add disabled states with opacity-50 and cursor-not-allowed styling

Prevents race conditions and confusing UI states when operations are in progress.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:09:50 +01:00
77c4c2fcdb Improve header typography hierarchy and layout
- Increased title size from text-sm to text-lg for better prominence
- Moved serial number to upper row next to title (prevents truncation)
- Improved font sizes: serial (text-sm), controls (text-xs), not connected (text-sm)
- Enlarged icons and padding for better touch targets and readability
- Increased vertical spacing between rows for better breathing room

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:06:12 +01:00
7346526cdc Integrate machine connection into header with fixed-width layout
- Redesigned header with grid layout (300px fixed + flexible columns)
- Moved machine connection status to header with connection indicator
- Added disconnect button and status badge to header
- Moved connect button to "Get Started" card in left column
- Workflow stepper now always visible in dedicated column
- Fixed layout shifts by using fixed-width column and flex-shrink-0
- Connection status truncates within fixed width to prevent pushing

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 13:02:54 +01:00
99ed1adb68 Implement unified compact card design system across all UI components
Replace inconsistent card layouts with a cohesive, space-efficient design
pattern featuring color-coded borders, icon headers, and compact spacing.
This redesign significantly reduces vertical space usage while improving
visual hierarchy and scannability.

UI/UX improvements:
- Apply consistent card design with border-left accent colors
- Add icon + title + subtitle header pattern to all cards
- Reduce padding from p-6 to p-4 for more compact layout
- Use smaller, tighter font sizes (text-xs, text-sm)
- Implement color-coded borders for quick visual identification

Component-specific changes:
- MachineConnection: Green/gray border, WiFi icon, compact status display
- PatternSummaryCard: Blue border, Document icon (new component)
- FileUpload: Orange/gray border, Document icon, inline button layout
- ProgressMonitor: Purple border, Chart icon, single-column layout
- PatternCanvas: Teal/gray border, Photo icon, dimensions in header

Conditional rendering optimizations:
- Show FileUpload OR PatternSummaryCard based on upload state
- Move ProgressMonitor to left column with PatternSummary
- Relocate NextStepGuide below PatternCanvas for better space usage
- Remove duplicate delete button from ProgressMonitor

Space savings: ~40-50% reduction in vertical space usage across all cards

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 12:37:08 +01:00
9b536e9deb Migrate to official @types/web-bluetooth package
Replace custom Web Bluetooth type declarations with the official
@types/web-bluetooth package from npm. This provides better
maintained and more comprehensive type definitions for the
Web Bluetooth API.

Changes:
- Add @types/web-bluetooth dependency
- Update tsconfig to include web-bluetooth types
- Remove custom src/web-bluetooth.d.ts declarations

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 12:18:27 +01:00
b7ea024df3 Improve polling indicator with service-level communication state
Previously, isPolling was manually set in individual refresh functions,
which didn't cover all BLE communication and could have race conditions.

Now the communication indicator is driven by the service layer:
- Added isCommunicating state to BrotherPP1Service
- setCommunicating() called at queue processing boundaries
- onCommunicationChange() callback subscription pattern
- Hook subscribes to service communication state automatically

Benefits:
- Indicator shows for ALL BLE commands (status, progress, service count, etc)
- Prevents race conditions from overlapping command queue processing
- More accurate representation of actual BLE communication
- Cleaner code - no manual setIsPolling in each function

The indicator now properly shows whenever the command queue is being
processed, regardless of which specific command triggered it.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-07 00:02:22 +01:00
37f80051e0 Fix build and lint errors, refactor embroidery constants
- Remove unused imports and variables across multiple files
- Fix TypeScript 'any' type annotations with proper types
- Fix React setState in effect warnings
- Create shared embroidery constants file (embroideryConstants.ts)
- Replace magic number 0x10 with named MOVE constant
- Map PyStitch constants to JS constants using registerJsModule
- Ensure PEN encoding constants remain separate and valid

All build and lint checks now pass successfully.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:55:10 +01:00
4428b8472c Properly preserve pattern filename after deletion for re-upload
Improve the previous fix by actually preserving the original filename
from the cache instead of using a generic fallback. This is a cleaner
solution that maintains the actual pattern name.

Changes:
- Add currentFileName state to App.tsx to track pattern filename
- When loading cached pattern, preserve resumeFileName in currentFileName
- When loading new pattern, pass fileName to handlePatternLoaded callback
- Pass currentFileName to FileUpload component as prop
- Use currentFileName in displayFileName logic (prioritized first)
- Remove generic 'pattern.pes' fallback

Now when you delete a cached pattern and re-upload it, the original
filename (e.g., "mypattern.pes") is preserved instead of using a
generic fallback name. This maintains better traceability.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:42:47 +01:00
085ac1a5f7 Fix pattern re-upload after deletion by preserving filename
Fix bug where deleting a cached pattern prevented re-uploading because
the filename was lost. After deletion, the pattern remains visible in
the UI for re-editing and re-uploading, but the upload would silently
fail because displayFileName was empty.

The issue occurred because:
1. Pattern loaded from cache uses resumeFileName (from hook)
2. Local fileName state in FileUpload was never set (empty string)
3. After deletion, resumeFileName is cleared to null
4. displayFileName becomes empty, preventing upload

Solution:
- Add fallback to 'pattern.pes' when pesDataProp exists but no filename
- This ensures re-upload works after deletion while keeping pattern visible
- Pattern data (pesData) persists in App.tsx state for re-editing

Now users can delete a cached pattern and immediately re-upload it
with position adjustments or other modifications.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:39:31 +01:00
3d51992581 Fix missing status icons in Machine Connection panel
Add proper Heroicon components to display status indicators in the
Machine Connection panel. The icons were referenced but not rendered,
causing weird padding next to status text.

Changes:
- Import CheckCircleIcon, BoltIcon, PauseCircleIcon, ExclamationTriangleIcon
- Create stateIcons mapping from iconName to Heroicon components
- Fix reference from stateVisual.icon (doesn't exist) to stateVisual.iconName
- Render icon component dynamically based on machine state

Icon mapping:
- ready/complete: CheckCircle (✓)
- active: Bolt (lightning)
- waiting/interrupted: PauseCircle
- error: ExclamationTriangle

This fixes the TypeScript error and displays proper status indicators.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:35:16 +01:00
18e7b5afd3 Add cumulative stitch statistics from SERVICE_COUNT command
Implement support for fetching and displaying the machine's cumulative
stitch statistics using the SERVICE_COUNT (0x0100) command.

The SERVICE_COUNT command returns two uint32 values:
- serviceCount: Cumulative service counter
- totalCount: Total stitches sewn by the machine (lifetime)

Changes:
- Add serviceCount and totalCount fields to MachineInfo interface
- Implement getServiceCount() method in BrotherPP1Service
- Call getServiceCount() when fetching machine info on connect
- Display "Total Stitches" in Machine Connection panel
- Format stitch count with locale-specific thousand separators
- Handle errors gracefully if SERVICE_COUNT command fails

The total stitch count is now visible in the Machine Connection section,
providing users with insight into their machine's lifetime usage.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:33:10 +01:00
c842334efc Display machine serial number instead of model number
Change the Machine Connection panel to show the serial number instead
of the model number. The serial number is more useful for identifying
specific machines, especially when multiple machines of the same model
are in use.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:30:12 +01:00
762cb4bc0e Remove duplicate upload success message in FileUpload component
Remove the redundant "Upload Complete!" green banner that appeared at
the bottom of the Pattern File section. The top blue banner "Pattern
uploaded successfully!" already provides this information along with
additional context about the locked state.

This eliminates visual clutter and duplicate messaging while keeping
the more informative message that explains the pattern is locked.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:26:02 +01:00
be3f15eace Fix TRIM command encoding in PES to PEN conversion
Correct the encoding of TRIM commands to use the proper bit flag (bit 1)
instead of incorrectly treating them the same as JUMP commands (bit 0).

The PEN format uses two separate flags in the Y-coordinate low byte:
- Bit 0 (0x01): FEED_DATA - Jump stitch (move without stitching)
- Bit 1 (0x02): CUT_DATA - Trim/cut thread command

Previously, both JUMP and TRIM commands were encoded with bit 0, which
prevented the machine from distinguishing between jumps and thread cuts.

Changes:
- Add PEN_CUT_DATA constant (0x02) for TRIM commands
- Update encoding logic to set bit 0 for JUMP (cmd=1)
- Update encoding logic to set bit 1 for TRIM (cmd=2)
- Add detailed comments explaining the PEN format flags
- Document that Y-coordinate flags can be combined
- Document that X-coordinate flags are mutually exclusive

This fix ensures thread cutting happens when intended, matching the
behavior of the original C# implementation in the Asura app.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:23:50 +01:00
711f291eff Add immediate loading states for Upload and Delete operations
Fix UI delay issue where buttons remained clickable during BLE communication
setup. Now provides instant visual feedback when operations begin.

Changes:
- Add isUploading and isDeleting state tracking in useBrotherMachine hook
- Set loading states immediately on button click, before BLE communication
- Update FileUpload component to disable upload button and show spinner
- Update ProgressMonitor to disable delete button with loading indicator
- Add PatternCacheService.deletePattern() method for proper cache cleanup
- Pass loading state props through App.tsx to child components

The UI now responds immediately with disabled buttons and loading spinners,
preventing double-clicks and providing clear feedback during the initial
BLE setup period before progress reporting begins.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 23:20:01 +01:00
a05d199b1b Add comprehensive error descriptions and solutions for all machine error codes
Enhance the error handling system with detailed descriptions and step-by-step
solutions for all Brother PP1 protocol error codes. This provides users with
clear, actionable guidance when machine errors occur.

Added detailed error information for:
- Thread errors (0x00, 0x60-0x63): Upper/lower thread issues with rethreading steps
- Safety errors (0x01-0x03): Safety device activations and bobbin issues
- Restart errors (0x10-0x1C): System malfunctions with specific error codes (M519411-M51941C)
- Mechanical errors (0x20-0x21): Needle plate and thread lever positioning
- Hoop errors (0x70-0x72): Hoop detection and initialization procedures
- Maintenance errors (0x80, 0x98): Regular inspection and settings constraints

Each error now includes:
- Clear title describing the issue
- Detailed description of what the error means
- Step-by-step solutions for resolution
- Support contact information where applicable

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 20:38:02 +01:00
2d33eb40ab Implement comprehensive dark mode support and improve pattern visibility
Dark Mode Implementation:
- Add Tailwind config with darkMode: 'media' for system preference detection
- Update all 9 components with 200+ dark mode variants
- Semantic color backgrounds with semi-transparent overlays in dark mode
- Proper text contrast (gray-900/gray-100) for readability
- Enhanced borders, shadows, and focus rings for dark backgrounds

Component Dark Mode Updates:
- App.tsx: Header gradient, error banners, empty states
- MachineConnection: Status badges with proper dark variants for all states
- FileUpload: Pattern info cards, thread swatches, upload progress
- PatternCanvas: Canvas background, overlays, zoom controls
- ProgressMonitor: Color blocks, progress bars, state indicators with colored icons
- NextStepGuide: All status boxes (blue/yellow/cyan/green/red)
- WorkflowStepper: Progress indicators and step states
- ConfirmDialog: Modal overlays and dialog backgrounds
- KonvaComponents: Grid lines and origin markers

Pattern Visibility Improvements:
- Pattern shows full opacity (1.0) when unlocked for easy positioning
- Pattern shows reduced opacity (0.75) for unstitched areas when locked/uploading
- Helps distinguish completed vs pending stitches during sewing
- Pattern locks during upload to prevent accidental repositioning
- Canvas dragging disabled when pattern is uploading or uploaded

Status Indicator Enhancements:
- Machine status badges: All states (idle/active/waiting/complete/error) have dark variants
- Progress monitor state icons: Colored icons (blue/yellow/green/red) in both modes
- Color blocks: Proper backgrounds and borders for completed/current/pending states
- All semantic colors maintain visibility and meaning in dark mode

Canvas Lock Behavior:
- Pattern locked during upload (uploadProgress > 0 && < 100)
- Pattern locked after upload (patternUploaded = true)
- Lock indicator shows amber background with lock icon
- Cursor changes prevent confusion about draggability
- Full opacity during positioning, transparency during progress tracking

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 20:12:46 +01:00
c5ec118b95 Enhance UI/UX with loading states, animations, and pattern lock functionality
Loading State Improvements:
- Add SkeletonLoader component with pattern info, canvas, and connection skeletons
- Show loading spinner on file selection and during pattern upload
- Display upload progress with enhanced progress bar and percentage
- Add success confirmation message when upload completes
- Show thread color preview dots inline with pattern info (up to 5 colors)

Visual Polish & Animations:
- Add custom animations: fadeIn, slideInRight, pulseGlow, skeleton-loading
- Enhance all cards with subtle hover shadow effects
- Improve header with richer gradient (blue-600 → blue-700 → blue-800)
- Polish error messages with icons and improved layouts
- Enhance empty state with decorative patterns and feature highlights
- Add smooth transitions to all NextStepGuide states
- Current color block pulses with blue glow animation
- Color blocks have hover states for better interactivity

Pattern Upload & Lock Functionality:
- Hide upload button after pattern is uploaded (patternUploaded && uploadProgress === 100)
- Disable pattern dragging when uploaded with visual lock indicator
- Pattern position overlay shows amber background with lock icon when locked
- Pattern remains in canvas after deletion for re-editing and re-upload
- Delete pattern from cache when deleting from machine to prevent auto-resume
- Add LockClosedIcon to indicate locked pattern state

Pattern Management:
- Keep pattern data in UI after deletion for repositioning and re-uploading
- Clear machine-related state but preserve pattern visualization
- Reset upload progress and pattern uploaded state on deletion

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-06 19:28:24 +01:00
3d26291d6d Polish header: make auto-refresh indicator icon-only
- Removed 'Auto-refreshing' text, kept pulsing blue dot
- Added tooltip and aria-label for accessibility
- Cleaner, more compact header design
2025-12-06 13:16:19 +01:00
e03e89e76a Implement comprehensive UI/UX improvements
Visual enhancements:
- Create design tokens system with semantic colors (primary, success, warning, danger, info, neutral)
- Enhanced button states with hover shadow, active press feedback, and focus rings
- Improved WorkflowStepper with larger circles, gradient progress bar, and green completion indicators
- Enhanced color blocks with larger swatches (w-8 h-8), better shadows, and animated current indicator
- Reorganized ProgressMonitor layout - progress/controls on left, color blocks on right
- Moved disconnect button to header as small, compact button

Accessibility improvements:
- Added comprehensive ARIA labels to all interactive elements
- Implemented proper focus states with color-matched rings
- Added role attributes for navigation and progress elements
- Enhanced screen reader support with descriptive labels
- All buttons now meet 44px touch target requirements

Button improvements across all components:
- Standardized to rounded-lg for softer appearance
- Added hover:shadow-lg for depth perception
- Added active:scale-[0.98] for tactile feedback
- Clean disabled states without grayscale filter
- Keyboard navigation with visible focus rings
- Consistent transition timing (150ms)

Typography:
- Maintained minimum 12px text size throughout
- Proper hierarchy with defined heading sizes
- Improved readability with consistent weights

Documentation:
- Created comprehensive UI design analysis
- Implementation guides and checklists
- Before/after examples
- Design tokens reference

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-06 13:15:51 +01:00
d0a8273fee Fix PEN encoding and improve UI layout
Major fixes:
- Fix PEN data encoding to properly mark color changes and end markers
  - COLOR_END (0x03) for intermediate color blocks
  - DATA_END (0x05) for the final stitch only
  - Machine now correctly reads total stitch count across all color blocks
- Reset uploadProgress when pattern is deleted to re-enable upload button
- Allow pattern deletion during WAITING states
- Allow pattern upload in COMPLETE states
- Fix pattern state tracking to reset when patternInfo is null

UI improvements:
- Integrate workflow stepper into compact header
- Change app title to "SKiTCH Controller"
- Reduce header size from ~200px to ~70px
- Make Sewing Progress section more compact with two-column layout
- Replace emojis with Heroicons throughout
- Reorganize action buttons with better visual hierarchy
- Add cursor-pointer to all buttons for better UX
- Fix cached pattern not showing info in Pattern File box
- Remove duplicate status messages (keep only state visual indicator)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-06 12:56:27 +01:00
bf20c2b378 Add Heroicons and remove button hover lift effect
- Install @heroicons/react package
- Replace text symbols with proper heroicons:
  - Zoom controls: PlusIcon, MinusIcon, ArrowPathIcon
  - Color block status: CheckCircleIcon, ArrowRightIcon, CircleStackIcon
  - Resume sewing: PlayIcon
- Remove hover:-translate-y-0.5 and active:translate-y-0 from all buttons
- Buttons now have stable hover states (color change and shadow only)
- Improved UI consistency and accessibility with vector icons

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 23:44:48 +01:00
cd43a64bc4 Migrate to declarative react-konva and add pattern offset caching
React-Konva Migration:
- Create KonvaComponents.tsx with declarative components
- Convert Grid, Origin, Hoop, Stitches, PatternBounds, and CurrentPosition to React components
- Add React.memo and useMemo for performance optimization
- Remove imperative layer manipulation (destroyChildren, add, batchDraw)
- Remove backgroundLayerRef and patternLayerRef
- Let React handle component lifecycle and updates
- Improve performance through React's diffing algorithm

Pattern Offset Persistence:
- Add patternOffset field to CachedPattern interface
- Update PatternCacheService.savePattern to accept and store offset
- Modify useBrotherMachine to save offset when uploading pattern
- Update resumedPattern state to include offset information
- Restore cached pattern offset in App.tsx on resume
- Add initialPatternOffset prop to PatternCanvas component
- Pattern position now persists across page reloads and reconnections

Benefits:
- More maintainable and React-idiomatic code
- Better performance with large patterns
- Automatic cleanup and no memory leaks
- Pattern positioning workflow preserved across sessions
- Improved developer experience

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 23:38:23 +01:00
30d87f82bc Migrate to Tailwind CSS and fix canvas zoom issues
- Install Tailwind CSS and configure Vite plugin
- Replace all custom CSS classes with Tailwind utility classes
- Migrate all components to use Tailwind styling:
  - App.tsx: Responsive layout with modern styling
  - MachineConnection: Status badges and action buttons
  - FileUpload: File input and progress bars with shimmer effect
  - ProgressMonitor: Color blocks, state indicators, and actions
  - ConfirmDialog: Modal overlay with backdrop blur
  - PatternCanvas: Canvas viewer with floating controls
- Add custom shimmer animation for progress bars
- Fix canvas resizing issue during zoom operations:
  - Add ResizeObserver for stable container dimensions
  - Use clientWidth/clientHeight instead of offset dimensions
  - Cache container size to prevent layout thrashing
- Improve zoom button behavior to zoom towards viewport center
- Maintain consistent design with shadows, borders, and transitions

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 23:25:55 +01:00
f94aa071fb Migrate PatternCanvas to react-konva
- Replace vanilla Konva imperative API with react-konva declarative components
- Use Stage, Layer, and Group components from react-konva
- Remove complex ResizeObserver and containerSize state management
- Stage dimensions now read directly from CSS-defined container size
- Eliminates React/Konva DOM conflicts and feedback loops
- Cleaner, more maintainable React-friendly code
- All functionality preserved: pan, zoom, pattern dragging

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 23:06:39 +01:00
3c8c2d49fd Fix React/Konva DOM conflicts and zoom reset issues
- Separate Konva container from React-managed overlays to prevent removeChild errors
- Move wheel zoom handler into stage initialization to maintain stable reference
- Remove zoomLevel from background effect dependencies to prevent zoom reset
- Add double-initialization guard for stage creation
- Clear refs before stage destruction to prevent race conditions

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 22:34:10 +01:00
0f40cec8ec Implement interactive pattern canvas with Konva.js
- Replace vanilla canvas with Konva.js for better interactivity
- Add pan and zoom functionality (mouse wheel zoom, drag to pan)
- Make pattern draggable within hoop coordinate system
- Center canvas on embroidery origin (0,0)
- Default zoom shows entire 100x100mm hoop
- Pass user-defined pattern offset to LAYOUT command
- Replace auto-centering with manual pattern positioning
- Add visual overlays for thread legend, dimensions, pattern position, and zoom controls
- Fix effect dependencies to prevent drag interruption on machine status updates
- Memoize callbacks to prevent unnecessary re-renders
- Create konvaRenderers.ts utility for rendering grid, hoop, stitches, etc.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 22:27:22 +01:00
e0fadf69da Fix PES to PEN conversion and protocol implementation
- Use PyStitch raw stitches with proper command flag handling
- Import constants from pystitch.EmbConstant (STITCH, JUMP, TRIM, etc.)
- Filter COLOR_CHANGE, STOP, and END command-only stitches
- Properly encode jump/trim stitches with PEN_FEED_DATA flag
- Add pattern centering with moveX/moveY in layout
- Fix color change detection and PEN_COLOR_END marking
- Add comprehensive debug logging for pattern analysis
- Fix machine state helpers for IDLE and MASK_TRACE_COMPLETE states
- Update ProgressMonitor UI for proper button visibility
- Add error handling for undefined error codes

Machine now successfully uploads patterns, completes mask trace,
and transitions to sewing mode.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 21:08:52 +01:00
Jan-Henrik Bruhn
acdf87b237 initial 2025-11-30 22:18:14 +01:00