Merge branch 'develop'

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

.github/copilot-instructions.md

@@ -0,0 +1,98 @@
+# Fluidd AI Development Guide
+
+Fluidd is a Vue 2.7 + TypeScript web interface for Klipper 3D printers that communicates with Moonraker via WebSocket.
+
+## Architecture Overview
+
+- **Vue 2.7 + Vuetify 2**: UI framework with Material Design components
+- **Vuex Store**: Modular state management mirroring Klipper/Moonraker domains (`printer/`, `files/`, `console/`, etc.)
+- **WebSocket Communication**: Real-time bidirectional communication with Moonraker API via `socketActions.ts`
+- **Component Structure**: Mixins-based architecture with `StateMixin` providing common printer state access
+
+## Key Patterns
+
+### State Management
+- Store modules in `src/store/` mirror Moonraker API endpoints (printer, files, macros, etc.)
+- Use `$typedState` and `$typedGetters` for type-safe store access
+- WebSocket actions in `api/socketActions.ts` follow pattern: `baseEmit(method, {dispatch, wait, params})`
+
+### Component Architecture
+```typescript
+// Standard component pattern
+@Component({
+  components: { /* ... */ }
+})
+export default class MyComponent extends Vue {
+  // Component logic here
+}
+
+// Widget component needing printer state
+@Component({
+  components: { /* ... */ }
+})
+export default class PrinterWidget extends Mixins(StateMixin) {
+  // Access printer state via StateMixin getters
+  get printerState() { return this.printerState } // 'printing' | 'paused' | etc.
+}
+```
+
+### WebSocket Integration
+- All printer communication through `SocketActions` (not direct HTTP)
+- Use `wait` parameter for loading states: `wait: Waits.onPrintStart`
+- Real-time updates handled via store mutations from socket events
+
+## Development Workflow
+
+### Essential Commands
+```bash
+npm run bootstrap    # Install git hooks (after clone)
+npm run dev          # Start development server
+npm run build        # Production build
+npm run type-check   # TypeScript validation
+npm run lint         # ESLint with Vue/TS rules
+npm run test         # Vitest unit tests
+```
+
+### File Organization
+- `src/components/widgets/`: Dashboard cards organized by domain (status/, thermals/, macros/)
+- `src/views/`: Page-level components (Dashboard.vue, Console.vue, etc.)
+- `src/store/[domain]/`: Vuex modules matching Moonraker API structure
+- `src/api/`: WebSocket and HTTP client abstractions
+
+### Router & Authentication
+- Routes in `src/router/` with authentication guards
+
+### Icons & Theming
+- Material Design Icons via `src/globals.ts` constants
+- Vuetify theme system with custom color schemes
+- PWA support with service worker in `src/sw.ts`
+
+## Integration Points
+
+### Klipper/Moonraker Communication
+- All printer commands via `SocketActions` methods
+- Store updates from WebSocket events (not polling)
+- File operations through Moonraker's file API (`src/store/files/`)
+
+### Component Communication
+- Parent-child: Props down, events up
+- Cross-component: Vuex store or event bus
+- Use `vue-property-decorator` for TypeScript components
+
+## Testing Conventions
+- Unit tests in `tests/unit/` with Vitest + jsdom
+- Mock WebSocket connections for component testing
+- Test store actions/mutations independently from UI
+
+## Code Style
+- Vue class-style components with `vue-property-decorator`
+- ESLint enforced: neostandard + Vue 2 rules and further rules defined in 'eslint.config.mjs'
+- camelCase for variables/methods, PascalCase for components
+- Use `consola` for logging, not `console.log`
+- Type imports: `import type { ... }` for types only
+
+## Common Gotchas
+- Vue 2.7 limitations: No Composition API in production builds
+- WebSocket reconnection handled automatically by `socketClient.ts`
+- File uploads use FormData with progress tracking in store
+- Dynamic imports for code splitting (see `vue-echarts-chunk.ts`)

.github/workflows/build.yml

@@ -53,10 +53,22 @@ jobs:
           path: ./dist
 
   publish-docker:
-    name: Publish Docker Image
+    name: Publish ${{ matrix.type }} Image
     needs: build
     if: ${{ github.event_name != 'pull_request' }}
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - type: Docker
+            image-name: ${{ github.repository }}
+            base-image: nginx:alpine
+            port: 80
+          - type: Docker Unprivileged
+            image-name: ${{ github.repository }}-unprivileged
+            base-image: nginxinc/nginx-unprivileged:alpine
+            port: 8080
     permissions:
       id-token: write
       contents: read
@@ -77,7 +89,7 @@ jobs:
         uses: docker/metadata-action@v5
         with:
           images: |
-            ghcr.io/${{ github.repository }}
+            ghcr.io/${{ matrix.image-name }}
           tags: |
             type=semver,pattern={{raw}}
             type=ref,event=pr
@@ -105,6 +117,9 @@ jobs:
           context: .
           file: ./Dockerfile
           platforms: linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x
+          build-args: |
+            BASE_IMAGE=${{ matrix.base-image }}
+            PORT=${{ matrix.port }}
           push: true
           sbom: true
           provenance: true
@@ -116,7 +131,7 @@ jobs:
       - name: Attest Docker image
         uses: actions/attest-build-provenance@v2
         with:
-          subject-name: ghcr.io/${{ github.repository }}
+          subject-name: ghcr.io/${{ matrix.image-name }}
           subject-digest: ${{ steps.docker_push.outputs.digest }}
           push-to-registry: true
 

.husky/pre-commit

@@ -1,5 +1,13 @@
-FILES_TO_LINT=$(git diff --cached --name-only --diff-filter=ACM | grep -iE "\.(js|jsx|mjs|ts|tsx|vue)$" || true)
+FILES_TO_LINT=$(git diff --cached --name-only --diff-filter=ACMR | grep -iE "\.(js|jsx|mjs|ts|tsx|vue)$" || true)
 
 if [ -n "$FILES_TO_LINT" ]; then
   npx --no eslint -- --max-warnings 0 $FILES_TO_LINT
 fi
+
+SVG_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep -iE "\.(svg)$" || true)
+
+if [ -n "$SVG_FILES" ]; then
+  npx --no svgo -- -q $SVG_FILES
+
+  git update-index --again
+fi

Dockerfile

@@ -1,6 +1,11 @@
-FROM nginx:alpine
+ARG BASE_IMAGE=nginx:alpine
+ARG PORT=80
 
-ENV PORT=80
+FROM $BASE_IMAGE
+
+ARG PORT
+
+ENV PORT=$PORT
 
 COPY /dist /usr/share/nginx/html
 COPY /server/nginx /etc/nginx/templates

README.md

@@ -31,7 +31,13 @@ Older releases can be found [here](https://github.com/fluidd-core/fluidd/release
 
 ## Docker support
 
-We have an [official docker image](https://github.com/fluidd-core/fluidd/pkgs/container/fluidd). This is updated for each release and on each commit.
+We have an [official docker image](https://github.com/fluidd-core/fluidd/pkgs/container/fluidd), serving Fluidd by default on port 80.
+
+For those who have specific security requirements and need/want to run an unprivileged container, we also have an [unprivileged docker image](https://github.com/fluidd-core/fluidd/pkgs/container/fluidd-unprivileged) available, serving Fluidd by default on port 8080.
+
+You can override the default port where Fluidd will be served by setting the `PORT` environment variable when starting the docker container.
+
+Both of these docker images are updated for each release and on each commit.
 
 ## Official sponsors