feat(CUB-65): add multi-stage Dockerfile and .dockerignore for backend

.gitignore

@@ -2,9 +2,4 @@ bin/
 obj/
 *.user
 *.suo
-.vs/
+.vs/
-
-# Frontend build artifacts
-frontend/dist/
-frontend/node_modules/
-frontend/.angular/

backend/API/Filters/FluentValidationFilter.cs

@@ -1,69 +0,0 @@
-using FluentValidation;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.AspNetCore.Mvc.Filters;
-
-namespace Extrudex.API.Filters;
-
-/// <summary>
-/// Action filter that automatically validates request DTOs using FluentValidation
-/// validators registered in DI. Runs before the controller action executes.
-/// Returns 400 Bad Request with validation errors if validation fails.
-/// </summary>
-public class FluentValidationFilter : IAsyncActionFilter
-{
-    private readonly IServiceProvider _serviceProvider;
-    private readonly ILogger<FluentValidationFilter> _logger;
-
-    public FluentValidationFilter(IServiceProvider serviceProvider, ILogger<FluentValidationFilter> logger)
-    {
-        _serviceProvider = serviceProvider;
-        _logger = logger;
-    }
-
-    public async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
-    {
-        foreach (var argument in context.ActionArguments.Values)
-        {
-            if (argument is null) continue;
-
-            var argumentType = argument.GetType();
-            var validatorType = typeof(IValidator<>).MakeGenericType(argumentType);
-
-            // Try to resolve a validator for this argument type
-            var validator = _serviceProvider.GetService(validatorType) as IValidator;
-            if (validator is null) continue;
-
-            _logger.LogDebug("Validating {Type} with {Validator}", argumentType.Name, validator.GetType().Name);
-
-            var validationResult = await validator.ValidateAsync(
-                new ValidationContext<object>(argument), context.HttpContext.RequestAborted);
-
-            if (!validationResult.IsValid)
-            {
-                foreach (var error in validationResult.Errors)
-                {
-                    context.ModelState.AddModelError(error.PropertyName, error.ErrorMessage);
-                }
-            }
-        }
-
-        if (!context.ModelState.IsValid)
-        {
-            var errors = context.ModelState
-                .Where(kvp => kvp.Value?.Errors.Count > 0)
-                .ToDictionary(
-                    kvp => kvp.Key,
-                    kvp => kvp.Value!.Errors.Select(e => e.ErrorMessage).ToArray());
-
-            context.Result = new BadRequestObjectResult(new
-            {
-                title = "Validation failed",
-                status = 400,
-                errors
-            });
-            return;
-        }
-
-        await next();
-    }
-}

backend/API/Validators/FilamentValidators.cs

@@ -1,108 +0,0 @@
-using Extrudex.API.DTOs.Filaments;
-using FluentValidation;
-
-namespace Extrudex.API.Validators;
-
-/// <summary>
-/// Validation rules for creating a Filament (Spool) via the /filaments route.
-/// Mirrors the domain rules enforced in the controller and ensures consistent
-/// validation regardless of the request pipeline entry point.
-/// </summary>
-public class CreateFilamentRequestValidator : AbstractValidator<CreateFilamentRequest>
-{
-    public CreateFilamentRequestValidator()
-    {
-        RuleFor(x => x.MaterialBaseId)
-            .NotEmpty().WithMessage("MaterialBaseId is required.");
-
-        RuleFor(x => x.MaterialFinishId)
-            .NotEmpty().WithMessage("MaterialFinishId is required.");
-
-        RuleFor(x => x.Brand)
-            .NotEmpty().WithMessage("Brand is required.")
-            .MaximumLength(200).WithMessage("Brand must not exceed 200 characters.");
-
-        RuleFor(x => x.ColorName)
-            .NotEmpty().WithMessage("ColorName is required.")
-            .MaximumLength(200).WithMessage("ColorName must not exceed 200 characters.");
-
-        RuleFor(x => x.ColorHex)
-            .NotEmpty().WithMessage("ColorHex is required.")
-            .Matches(@"^#[0-9A-Fa-f]{6}$").WithMessage("ColorHex must be a valid hex color code (e.g., #FF0000).");
-
-        RuleFor(x => x.WeightTotalGrams)
-            .GreaterThan(0).WithMessage("Total weight must be greater than zero.");
-
-        RuleFor(x => x.WeightRemainingGrams)
-            .GreaterThanOrEqualTo(0).WithMessage("Remaining weight must be non-negative.");
-
-        RuleFor(x => x.WeightRemainingGrams)
-            .LessThanOrEqualTo(x => x.WeightTotalGrams)
-            .WithMessage("WeightRemainingGrams cannot exceed WeightTotalGrams.");
-
-        RuleFor(x => x.FilamentDiameterMm)
-            .GreaterThan(0).WithMessage("Filament diameter must be greater than zero.");
-
-        RuleFor(x => x.SpoolSerial)
-            .NotEmpty().WithMessage("SpoolSerial is required.")
-            .MaximumLength(200).WithMessage("SpoolSerial must not exceed 200 characters.");
-
-        When(x => x.PurchasePrice.HasValue, () =>
-        {
-            RuleFor(x => x.PurchasePrice!.Value)
-                .GreaterThanOrEqualTo(0).WithMessage("Purchase price must be non-negative.");
-        });
-    }
-}
-
-/// <summary>
-/// Validation rules for updating a Filament (Spool) via the /filaments route.
-/// Enforces the same domain rules as creation, plus ensures the updated
-/// WeightRemainingGrams does not exceed the updated WeightTotalGrams.
-/// </summary>
-public class UpdateFilamentRequestValidator : AbstractValidator<UpdateFilamentRequest>
-{
-    public UpdateFilamentRequestValidator()
-    {
-        RuleFor(x => x.MaterialBaseId)
-            .NotEmpty().WithMessage("MaterialBaseId is required.");
-
-        RuleFor(x => x.MaterialFinishId)
-            .NotEmpty().WithMessage("MaterialFinishId is required.");
-
-        RuleFor(x => x.Brand)
-            .NotEmpty().WithMessage("Brand is required.")
-            .MaximumLength(200).WithMessage("Brand must not exceed 200 characters.");
-
-        RuleFor(x => x.ColorName)
-            .NotEmpty().WithMessage("ColorName is required.")
-            .MaximumLength(200).WithMessage("ColorName must not exceed 200 characters.");
-
-        RuleFor(x => x.ColorHex)
-            .NotEmpty().WithMessage("ColorHex is required.")
-            .Matches(@"^#[0-9A-Fa-f]{6}$").WithMessage("ColorHex must be a valid hex color code (e.g., #FF0000).");
-
-        RuleFor(x => x.WeightTotalGrams)
-            .GreaterThan(0).WithMessage("Total weight must be greater than zero.");
-
-        RuleFor(x => x.WeightRemainingGrams)
-            .GreaterThanOrEqualTo(0).WithMessage("Remaining weight must be non-negative.");
-
-        RuleFor(x => x.WeightRemainingGrams)
-            .LessThanOrEqualTo(x => x.WeightTotalGrams)
-            .WithMessage("WeightRemainingGrams cannot exceed WeightTotalGrams.");
-
-        RuleFor(x => x.FilamentDiameterMm)
-            .GreaterThan(0).WithMessage("Filament diameter must be greater than zero.");
-
-        RuleFor(x => x.SpoolSerial)
-            .NotEmpty().WithMessage("SpoolSerial is required.")
-            .MaximumLength(200).WithMessage("SpoolSerial must not exceed 200 characters.");
-
-        When(x => x.PurchasePrice.HasValue, () =>
-        {
-            RuleFor(x => x.PurchasePrice!.Value)
-                .GreaterThanOrEqualTo(0).WithMessage("Purchase price must be non-negative.");
-        });
-    }
-}

backend/Dockerfile

@@ -27,8 +27,4 @@ COPY --from=build /app/publish .
 # ASP.NET Core listens on 8080 by default in .NET 8+
 EXPOSE 8080
 
-# Health check against /health endpoint
-HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
-    CMD curl --fail http://localhost:8080/health || exit 1
-
 ENTRYPOINT ["dotnet", "Extrudex.dll"]

backend/Extrudex.csproj

@@ -9,7 +9,6 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="AspNetCore.HealthChecks.NpgSql" Version="9.0.0" />
     <PackageReference Include="FluentValidation.DependencyInjectionExtensions" Version="12.1.1" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.3" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.3" />

backend/Program.cs

@@ -1,5 +1,4 @@
 using System.Reflection;
-using Extrudex.API.Filters;
 using Extrudex.API.Hubs;
 using Extrudex.Domain.Interfaces;
 using Extrudex.Infrastructure.Data;
@@ -24,10 +23,7 @@ builder.Services.AddDbContext<ExtrudexDbContext>(options =>
     options.UseNpgsql(connectionString));
 
 // ── API Services ───────────────────────────────────────────
-builder.Services.AddControllers(options =>
+builder.Services.AddControllers();
-{
-    options.Filters.AddService<FluentValidationFilter>();
-});
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen(c =>
 {
@@ -54,10 +50,6 @@ builder.Services.AddSingleton<IQrCodeService, QrCodeService>();
 // Registers all validators from the API assembly into DI.
 builder.Services.AddValidatorsFromAssembly(Assembly.GetExecutingAssembly());
 
-// Register the FluentValidation action filter so validators run automatically
-// on all API controller actions before the action executes.
-builder.Services.AddScoped<FluentValidationFilter>();
-
 // ── CORS (kiosk + remote browser) ─────────────────────────
 // AllowAnyOrigin disallows credentials by spec; this is fine for
 // REST API calls. SignalR WebSockets negotiate without credentials
@@ -77,10 +69,6 @@ builder.Services.AddCors(options =>
 // ── SignalR (real-time printer updates) ────────────────────
 builder.Services.AddSignalR();
 
-// ── Health Checks ───────────────────────────────────────────
-builder.Services.AddHealthChecks()
-    .AddNpgSql(connectionString);
-
 var app = builder.Build();
 
 // ── Middleware ──────────────────────────────────────────────
@@ -97,9 +85,6 @@ app.MapControllers();
 // ── Hub Endpoints ───────────────────────────────────────────
 app.MapHub<PrinterHub>("/hubs/printer");
 
-// ── Health Check Endpoint ──────────────────────────────────
-app.MapHealthChecks("/health");
-
 app.Run();
 
 // Helper: builds a connection string from individual env vars.

deploy.sh

@@ -1,33 +0,0 @@
-#!/bin/bash
-set -e
-
-echo "🔧 Deploying Extrudex Docker runtime..."
-
-# Check if Docker Compose is available
-if ! command -v docker-compose &> /dev/null && ! docker compose version &> /dev/null; then
-    echo "❌ Docker Compose is not installed"
-    exit 1
-fi
-
-COMPOSE_CMD="docker compose"
-if command -v docker-compose &> /dev/null; then
-    COMPOSE_CMD="docker-compose"
-fi
-
-echo "📦 Building and starting services..."
-$COMPOSE_CMD -f docker-compose.dev.yml up -d --build
-
-echo "⏳ Waiting for services to become healthy..."
-sleep 10
-
-echo "✅ Deployment complete!"
-echo ""
-echo "Services running:"
-echo "  • Extrudex API: http://localhost:5080"
-echo "  • Control Center Web: http://localhost:5081"
-echo ""
-echo "To view logs:"
-echo "  $COMPOSE_CMD -f docker-compose.dev.yml logs -f"
-echo ""
-echo "To stop:"
-echo "  $COMPOSE_CMD -f docker-compose.dev.yml down"

docker-compose.dev.yml

@@ -1,40 +0,0 @@
-version: '3.8'
-
-services:
-  extrudex-api:
-    build:
-      context: ./backend
-      dockerfile: Dockerfile
-    container_name: extrudex-api
-    ports:
-      - "5080:8080"
-    environment:
-      - ASPNETCORE_ENVIRONMENT=Development
-      - ASPNETCORE_URLS=http://+:8080
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:8080/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 40s
-    networks:
-      - extrudex-network
-
-  control-center-web:
-    build:
-      context: ../Control-Center/frontend
-      dockerfile: Dockerfile
-    container_name: control-center-web
-    ports:
-      - "5081:80"
-    depends_on:
-      extrudex-api:
-        condition: service_healthy
-    restart: unless-stopped
-    networks:
-      - extrudex-network
-
-networks:
-  extrudex-network:
-    driver: bridge

frontend/.editorconfig

@@ -1,17 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-ij_typescript_use_double_quotes = false
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

frontend/.gitignore

@@ -1,44 +0,0 @@
-# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
-
-# Compiled output
-/dist
-/tmp
-/out-tsc
-/bazel-out
-
-# Node
-/node_modules
-npm-debug.log
-yarn-error.log
-
-# IDEs and editors
-.idea/
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# Visual Studio Code
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-!.vscode/mcp.json
-.history/*
-
-# Miscellaneous
-/.angular/cache
-.sass-cache/
-/connect.lock
-/coverage
-/libpeerconnection.log
-testem.log
-/typings
-__screenshots__/
-
-# System files
-.DS_Store
-Thumbs.db

frontend/.prettierrc

@@ -1,12 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true,
-  "overrides": [
-    {
-      "files": "*.html",
-      "options": {
-        "parser": "angular"
-      }
-    }
-  ]
-}

frontend/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}

frontend/.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}

frontend/.vscode/mcp.json

@@ -1,9 +0,0 @@
-{
-  // For more information, visit: https://angular.dev/ai/mcp
-  "servers": {
-    "angular-cli": {
-      "command": "npx",
-      "args": ["-y", "@angular/cli", "mcp"]
-    }
-  }
-}

frontend/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "Changes detected"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation (complete|failed)"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "Changes detected"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation (complete|failed)"
-          }
-        }
-      }
-    }
-  ]
-}

frontend/README.md

@@ -1,59 +0,0 @@
-# Frontend
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.8.
-
-## Development server
-
-To start a local development server, run:
-
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the project run:
-
-```bash
-ng build
-```
-
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

frontend/angular.json

@@ -1,78 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "npm"
-  },
-  "newProjectRoot": "projects",
-  "projects": {
-    "frontend": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:application",
-          "options": {
-            "browser": "src/main.ts",
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/styles.scss"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "frontend:build:production"
-            },
-            "development": {
-              "buildTarget": "frontend:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "test": {
-          "builder": "@angular/build:unit-test"
-        }
-      }
-    }
-  }
-}

frontend/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "frontend",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
-  "private": true,
-  "packageManager": "npm@11.11.0",
-  "dependencies": {
-    "@angular/animations": "^21.2.10",
-    "@angular/cdk": "^21.2.8",
-    "@angular/common": "^21.2.0",
-    "@angular/compiler": "^21.2.0",
-    "@angular/core": "^21.2.0",
-    "@angular/forms": "^21.2.0",
-    "@angular/material": "^21.2.8",
-    "@angular/platform-browser": "^21.2.0",
-    "@angular/router": "^21.2.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0"
-  },
-  "devDependencies": {
-    "@angular/build": "^21.2.8",
-    "@angular/cli": "^21.2.8",
-    "@angular/compiler-cli": "^21.2.0",
-    "@vitest/browser-playwright": "^4.1.5",
-    "jsdom": "^28.0.0",
-    "prettier": "^3.8.1",
-    "typescript": "~5.9.2",
-    "vitest": "^4.0.8"
-  }
-}

frontend/src/app/app.config.ts

@@ -1,15 +0,0 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { provideHttpClient, withFetch } from '@angular/common/http';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes),
-    provideHttpClient(withFetch()),
-    provideAnimationsAsync(),
-  ]
-};

frontend/src/app/app.html

@@ -1,10 +0,0 @@
-<!-- Extrudex — Homepage (Main Hub) -->
-<main class="main-content">
-  <h1 class="sr-only">Extrudex Dashboard</h1>
-
-  <!-- Status Summary Bar — fleet-wide health at a glance -->
-  <app-dashboard-summary></app-dashboard-summary>
-
-  <!-- Filament Inventory — routed view -->
-  <router-outlet />
-</main>

frontend/src/app/app.routes.ts

@@ -1,9 +0,0 @@
-import { Routes } from '@angular/router';
-import { FilamentTableComponent } from './components/filament-table/filament-table.component';
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: FilamentTableComponent,
-  },
-];

frontend/src/app/app.scss

@@ -1,27 +0,0 @@
-:host {
-  display: block;
-  min-height: 100vh;
-  background: #1a1a2e;
-  color: #e0e0e0;
-  font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
-}
-
-.main-content {
-  padding: 16px;
-
-  @media (min-width: 800px) {
-    padding: 24px;
-  }
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

frontend/src/app/app.spec.ts

@@ -1,23 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { App } from './app';
-
-describe('App', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [App],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(App);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it('should render title', async () => {
-    const fixture = TestBed.createComponent(App);
-    await fixture.whenStable();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Extrudex Dashboard');
-  });
-});

frontend/src/app/app.ts

@@ -1,28 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { DashboardSummaryComponent } from './components/dashboard-summary/dashboard-summary.component';
-import { AgentSummary, SystemHealth } from './models/agent.model';
-
-@Component({
-  selector: 'app-root',
-  imports: [RouterOutlet, DashboardSummaryComponent],
-  templateUrl: './app.html',
-  styleUrl: './app.scss'
-})
-export class App {
-  @ViewChild(DashboardSummaryComponent) summaryComponent!: DashboardSummaryComponent;
-
-  /** Sample data for development — will be replaced by real service data */
-  readonly sampleSummary: AgentSummary = {
-    total: 7,
-    active: 4,
-    idle: 1,
-    thinking: 1,
-    error: 1,
-  };
-
-  readonly sampleHealth: SystemHealth = {
-    connected: true,
-    status: 'healthy',
-  };
-}

frontend/src/app/components/dashboard-summary/dashboard-summary.component.html

@@ -1,63 +0,0 @@
-<!-- Dashboard Summary Bar — Fleet-wide health at a glance -->
-<section class="dashboard-summary" role="status" aria-label="Dashboard summary">
-
-  <!-- System Health Indicator -->
-  <div class="summary-item health-indicator"
-       [class.healthy]="health().status === 'healthy'"
-       [class.degraded]="isDegraded()"
-       [class.down]="isDown()"
-       [matTooltip]="statusLabel()"
-       matTooltipPosition="below">
-    <span class="connection-dot" [class.connected]="health().connected"></span>
-    <span class="health-label">{{ statusLabel() }}</span>
-  </div>
-
-  <!-- Total Active Agents -->
-  <div class="summary-item" matTooltip="Total active agents" matTooltipPosition="below">
-    <mat-icon aria-hidden="true">smart_toy</mat-icon>
-    <span class="metric-value">{{ summary().active }} / {{ summary().total }}</span>
-    <span class="metric-label">Active</span>
-  </div>
-
-  <!-- Status Breakdown -->
-  <div class="summary-item status-breakdown">
-    <mat-chip-set aria-label="Agent status breakdown">
-      <mat-chip
-        class="status-chip chip-active"
-        [class.has-count]="summary().active > 0"
-        matTooltip="Active agents">
-        <mat-icon matChipStart>check_circle</mat-icon>
-        <span class="chip-count">{{ summary().active }}</span>
-        <span class="chip-label">Active</span>
-      </mat-chip>
-
-      <mat-chip
-        class="status-chip chip-idle"
-        [class.has-count]="summary().idle > 0"
-        matTooltip="Idle agents">
-        <mat-icon matChipStart>pause_circle</mat-icon>
-        <span class="chip-count">{{ summary().idle }}</span>
-        <span class="chip-label">Idle</span>
-      </mat-chip>
-
-      <mat-chip
-        class="status-chip chip-thinking"
-        [class.has-count]="summary().thinking > 0"
-        matTooltip="Thinking agents">
-        <mat-icon matChipStart>psychology</mat-icon>
-        <span class="chip-count">{{ summary().thinking }}</span>
-        <span class="chip-label">Thinking</span>
-      </mat-chip>
-
-      <mat-chip
-        class="status-chip chip-error"
-        [class.has-count]="hasErrors()"
-        matTooltip="Agents in error">
-        <mat-icon matChipStart>error</mat-icon>
-        <span class="chip-count">{{ summary().error }}</span>
-        <span class="chip-label">Error</span>
-      </mat-chip>
-    </mat-chip-set>
-  </div>
-
-</section>

frontend/src/app/components/dashboard-summary/dashboard-summary.component.scss

@@ -1,174 +0,0 @@
-/**
- * Dashboard Summary Component Styles
- * Touch-optimized for kiosk (Raspberry Pi 5) and mobile PWA
- * Uses Angular Material utility classes where possible
- */
-
-// Touch-optimized sizing
-$touch-target-min: 48px;
-$kiosk-font-primary: 20px;
-$mobile-font-primary: 16px;
-$spacing-unit: 8px;
-
-// Status colors — high contrast for workshop/bright environments
-$color-active: #4ade70;    // Green — printing/active
-$color-idle: #94a3b8;      // Gray — idle/offline
-$color-thinking: #60a5fa;  // Blue — thinking/processing
-$color-error: #f87171;     // Red — error/failed
-$color-connected: #4ade70; // Green — SignalR connected
-$color-disconnected: #f87171; // Red — disconnected
-
-.dashboard-summary {
-  display: flex;
-  align-items: center;
-  gap: $spacing-unit * 2;
-  padding: $spacing-unit * 2;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-
-  // Responsive: on mobile, allow horizontal scroll
-  @media (max-width: 480px) {
-    padding: $spacing-unit;
-    gap: $spacing-unit;
-  }
-}
-
-.summary-item {
-  display: flex;
-  align-items: center;
-  gap: $spacing-unit;
-  min-height: $touch-target-min;
-  white-space: nowrap;
-
-  .metric-value {
-    font-size: $kiosk-font-primary;
-    font-weight: 600;
-    line-height: 1.2;
-
-    @media (max-width: 480px) {
-      font-size: $mobile-font-primary;
-    }
-  }
-
-  .metric-label {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.7);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-
-    @media (max-width: 480px) {
-      font-size: 10px;
-    }
-  }
-}
-
-// Health indicator
-.health-indicator {
-  padding: $spacing-unit $spacing-unit * 2;
-  border-radius: 24px;
-  transition: background-color 0.3s ease;
-
-  &.healthy {
-    background-color: rgba($color-active, 0.15);
-  }
-
-  &.degraded {
-    background-color: rgba($color-thinking, 0.15);
-  }
-
-  &.down {
-    background-color: rgba($color-error, 0.15);
-  }
-
-  .connection-dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    display: inline-block;
-    transition: background-color 0.3s ease;
-
-    &.connected {
-      background-color: $color-connected;
-      box-shadow: 0 0 6px $color-connected;
-    }
-
-    &:not(.connected) {
-      background-color: $color-disconnected;
-      box-shadow: 0 0 6px $color-disconnected;
-    }
-  }
-
-  .health-label {
-    font-size: 14px;
-    font-weight: 500;
-
-    @media (max-width: 480px) {
-      font-size: 12px;
-    }
-  }
-}
-
-// Status breakdown chips
-.status-breakdown {
-  flex-shrink: 0;
-}
-
-.status-chip {
-  min-height: $touch-target-min !important;
-  font-size: 14px !important;
-
-  @media (max-width: 480px) {
-    min-height: 40px !important;
-    font-size: 12px !important;
-    padding: 0 8px !important;
-  }
-
-  .chip-count {
-    font-weight: 700;
-    margin: 0 4px;
-  }
-
-  .chip-label {
-    font-size: 12px;
-    opacity: 0.8;
-  }
-
-  mat-icon {
-    font-size: 18px !important;
-    width: 18px !important;
-    height: 18px !important;
-  }
-}
-
-// Status chip color variants
-.chip-active {
-  --mdc-chip-outline-color: #{$color-active};
-
-  &.has-count {
-    background-color: rgba($color-active, 0.15) !important;
-  }
-}
-
-.chip-idle {
-  --mdc-chip-outline-color: #{$color-idle};
-
-  &.has-count {
-    background-color: rgba($color-idle, 0.15) !important;
-  }
-}
-
-.chip-thinking {
-  --mdc-chip-outline-color: #{$color-thinking};
-
-  &.has-count {
-    background-color: rgba($color-thinking, 0.15) !important;
-  }
-}
-
-.chip-error {
-  --mdc-chip-outline-color: #{$color-error};
-
-  &.has-count {
-    background-color: rgba($color-error, 0.2) !important;
-  }
-}

frontend/src/app/components/dashboard-summary/dashboard-summary.component.spec.ts

@@ -1,103 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DashboardSummaryComponent } from './dashboard-summary.component';
-import { AgentSummary, SystemHealth } from '../../models/agent.model';
-
-describe('DashboardSummaryComponent', () => {
-  let component: DashboardSummaryComponent;
-  let fixture: ComponentFixture<DashboardSummaryComponent>;
-
-  const mockSummary: AgentSummary = {
-    total: 7,
-    active: 4,
-    idle: 1,
-    thinking: 1,
-    error: 1,
-  };
-
-  const mockHealthy: SystemHealth = {
-    connected: true,
-    status: 'healthy',
-  };
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DashboardSummaryComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DashboardSummaryComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should default to zeroed summary', () => {
-    const summary = component.summary();
-    expect(summary.total).toBe(0);
-    expect(summary.active).toBe(0);
-    expect(summary.idle).toBe(0);
-    expect(summary.thinking).toBe(0);
-    expect(summary.error).toBe(0);
-  });
-
-  it('should default to disconnected/down health', () => {
-    const health = component.health();
-    expect(health.connected).toBe(false);
-    expect(health.status).toBe('down');
-  });
-
-  it('should update summary data', () => {
-    component.updateSummary(mockSummary);
-    expect(component.summary()).toEqual(mockSummary);
-  });
-
-  it('should update health data', () => {
-    component.updateHealth(mockHealthy);
-    expect(component.health()).toEqual(mockHealthy);
-  });
-
-  it('should compute hasErrors correctly', () => {
-    expect(component.hasErrors()).toBe(false);
-    component.updateSummary({ ...mockSummary, error: 2 });
-    expect(component.hasErrors()).toBe(true);
-  });
-
-  it('should compute connectionColor correctly', () => {
-    expect(component.connectionColor()).toBe('disconnected');
-    component.updateHealth({ connected: true, status: 'healthy' });
-    expect(component.connectionColor()).toBe('connected');
-  });
-
-  it('should compute statusLabel for each state', () => {
-    component.updateHealth({ connected: true, status: 'healthy' });
-    expect(component.statusLabel()).toBe('All Systems Go');
-
-    component.updateHealth({ connected: true, status: 'degraded' });
-    expect(component.statusLabel()).toBe('Degraded');
-
-    component.updateHealth({ connected: false, status: 'down' });
-    expect(component.statusLabel()).toBe('Offline');
-  });
-
-  it('should render summary values in template', () => {
-    component.updateSummary(mockSummary);
-    component.updateHealth(mockHealthy);
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.textContent).toContain('4 / 7');
-    expect(compiled.textContent).toContain('Active');
-    expect(compiled.textContent).toContain('All Systems Go');
-  });
-
-  it('should render status breakdown chips', () => {
-    component.updateSummary(mockSummary);
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.textContent).toContain('4');  // active count
-    expect(compiled.textContent).toContain('1');   // idle count (multiple)
-    expect(compiled.textContent).toContain('Error');
-  });
-});

frontend/src/app/components/dashboard-summary/dashboard-summary.component.ts

@@ -1,80 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, signal, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { AgentSummary, SystemHealth } from '../../models/agent.model';
-
-@Component({
-  selector: 'app-dashboard-summary',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    MatChipsModule,
-    MatTooltipModule,
-  ],
-  templateUrl: './dashboard-summary.component.html',
-  styleUrls: ['./dashboard-summary.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DashboardSummaryComponent implements OnDestroy {
-  /** Agent summary data — reactive signal, updatable via updateSummary() */
-  readonly summary = signal<AgentSummary>({
-    total: 0,
-    active: 0,
-    idle: 0,
-    thinking: 0,
-    error: 0,
-  });
-
-  /** System health data — reactive signal, updatable via updateHealth() */
-  readonly health = signal<SystemHealth>({
-    connected: false,
-    status: 'down',
-  });
-
-  /** Computed signal: whether there are errors to highlight */
-  readonly hasErrors = computed(() => this.summary().error > 0);
-
-  /** Computed signal: whether system is degraded */
-  readonly isDegraded = computed(() => this.health().status === 'degraded');
-
-  /** Computed signal: whether system is down */
-  readonly isDown = computed(() => this.health().status === 'down');
-
-  /** Computed signal: connection indicator color */
-  readonly connectionColor = computed(() =>
-    this.health().connected ? 'connected' : 'disconnected'
-  );
-
-  /** Computed signal: overall status label */
-  readonly statusLabel = computed(() => {
-    const h = this.health();
-    if (h.status === 'healthy') return 'All Systems Go';
-    if (h.status === 'degraded') return 'Degraded';
-    return 'Offline';
-  });
-
-  /**
-   * Update the agent summary. Called by the parent or a service
-   * when new data arrives (e.g., via SignalR).
-   */
-  updateSummary(data: AgentSummary): void {
-    this.summary.set(data);
-  }
-
-  /**
-   * Update the system health. Called by the parent or a service
-   * when the connection state changes.
-   */
-  updateHealth(data: SystemHealth): void {
-    this.health.set(data);
-  }
-
-  ngOnDestroy(): void {
-    // Cleanup handled by signals — no manual subscription teardown needed
-  }
-}

frontend/src/app/components/delete-filament-dialog/delete-filament-dialog.component.html

@@ -1,78 +0,0 @@
-<!-- Delete Filament Confirmation Dialog -->
-<h2 mat-dialog-title>
-  <mat-icon aria-hidden="true">warning</mat-icon>
-  Delete Filament Spool?
-</h2>
-
-<mat-dialog-content>
-  <p class="dialog-description">
-    You are about to permanently remove this filament spool from inventory.
-  </p>
-
-  <!-- Spool details card -->
-  <div class="spool-details" role="list" aria-label="Spool details">
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Material</span>
-      <span class="detail-value">{{ filament.materialBaseName }}{{ filament.materialFinishName ? ' — ' + filament.materialFinishName : '' }}{{ filament.materialModifierName ? ' (' + filament.materialModifierName + ')' : '' }}</span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Brand</span>
-      <span class="detail-value">{{ filament.brand }}</span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Color</span>
-      <span class="detail-value color-value">
-        <span class="color-swatch-inline"
-              [style.background-color]="filament.colorHex"
-              [attr.aria-label]="filament.colorName">
-        </span>
-        {{ filament.colorName }}
-      </span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Serial</span>
-      <span class="detail-value serial-value">{{ filament.spoolSerial }}</span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Remaining</span>
-      <span class="detail-value">{{ formatWeight(filament.weightRemainingGrams) }} / {{ formatWeight(filament.weightTotalGrams) }}</span>
-    </div>
-
-    <div class="detail-row" role="listitem">
-      <span class="detail-label">Status</span>
-      <span class="detail-value">
-        <span class="status-badge"
-              [class.active]="filament.isActive"
-              [class.inactive]="!filament.isActive">
-          {{ filament.isActive ? 'Active' : 'Inactive' }}
-        </span>
-      </span>
-    </div>
-  </div>
-
-  <p class="dialog-warning">
-    <mat-icon aria-hidden="true">info</mat-icon>
-    This action cannot be undone.
-  </p>
-</mat-dialog-content>
-
-<mat-dialog-actions align="end">
-  <button mat-button
-          type="button"
-          (click)="onCancel()"
-          class="cancel-button">
-    Cancel
-  </button>
-  <button mat-flat-button
-          type="button"
-          color="warn"
-          (click)="onConfirm()"
-          class="confirm-button">
-    <mat-icon aria-hidden="true">delete</mat-icon>
-    Delete Spool
-  </button>
-</mat-dialog-actions>

frontend/src/app/components/delete-filament-dialog/delete-filament-dialog.component.scss

@@ -1,150 +0,0 @@
-/**
- * Delete Filament Dialog Styles
- * Touch-optimized confirmation dialog for spool removal
- */
-
-$spacing-unit: 8px;
-$color-critical: #ef4444;
-$color-inactive: #94a3b8;
-$color-active: #22c55e;
-
-// Dialog title
-h2[mat-dialog-title] {
-  display: flex;
-  align-items: center;
-  gap: $spacing-unit;
-  color: $color-critical;
-
-  mat-icon {
-    font-size: 24px !important;
-    width: 24px !important;
-    height: 24px !important;
-  }
-}
-
-// Description text
-.dialog-description {
-  margin: 0 0 $spacing-unit * 2;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--mat-sys-on-surface);
-}
-
-// Spool details card
-.spool-details {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-unit;
-  padding: $spacing-unit * 1.5;
-  background-color: var(--mat-sys-surface-container);
-  border-radius: 8px;
-  margin-bottom: $spacing-unit * 2;
-}
-
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $spacing-unit * 0.5 0;
-  font-size: 14px;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--mat-sys-outline-variant);
-    padding-bottom: $spacing-unit;
-  }
-}
-
-.detail-label {
-  font-weight: 500;
-  color: var(--mat-sys-on-surface-variant);
-  flex-shrink: 0;
-}
-
-.detail-value {
-  font-weight: 400;
-  color: var(--mat-sys-on-surface);
-  text-align: right;
-}
-
-// Color swatch inline
-.color-swatch-inline {
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 1.5px solid rgba(0, 0, 0, 0.12);
-  vertical-align: middle;
-  margin-right: 4px;
-}
-
-.color-value {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-}
-
-// Serial value — monospace
-.serial-value {
-  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
-  font-size: 13px;
-  letter-spacing: 0.02em;
-}
-
-// Status badge — matches filament table styling
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-
-  &.active {
-    background-color: rgba($color-active, 0.12);
-    color: $color-active;
-  }
-
-  &.inactive {
-    background-color: rgba($color-inactive, 0.12);
-    color: $color-inactive;
-  }
-}
-
-// Warning text
-.dialog-warning {
-  display: flex;
-  align-items: center;
-  gap: $spacing-unit;
-  margin: 0;
-  font-size: 13px;
-  color: $color-critical;
-
-  mat-icon {
-    font-size: 18px !important;
-    width: 18px !important;
-    height: 18px !important;
-  }
-}
-
-// Dialog action buttons
-mat-dialog-actions {
-  padding-top: $spacing-unit * 2;
-
-  .cancel-button {
-    min-width: 80px;
-  }
-
-  .confirm-button {
-    min-width: 120px;
-
-    mat-icon {
-      font-size: 18px !important;
-      width: 18px !important;
-      height: 18px !important;
-      margin-right: 4px;
-    }
-  }
-}

frontend/src/app/components/delete-filament-dialog/delete-filament-dialog.component.ts

@@ -1,68 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogModule,
-} from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatChipsModule } from '@angular/material/chips';
-
-import { Filament } from '../../models/filament.model';
-
-/**
- * Data passed into the delete confirmation dialog.
- */
-export interface DeleteFilamentDialogData {
-  filament: Filament;
-}
-
-/**
- * Delete confirmation dialog for filament spool removal.
- *
- * Displays spool details (material, brand, color, serial, remaining weight)
- * and requires the user to confirm before deletion proceeds.
- * Cancel dismisses the dialog with no action.
- */
-@Component({
-  selector: 'app-delete-filament-dialog',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatIconModule,
-    MatChipsModule,
-  ],
-  templateUrl: './delete-filament-dialog.component.html',
-  styleUrl: './delete-filament-dialog.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DeleteFilamentDialogComponent {
-  private readonly dialogRef = inject(
-    MatDialogRef<DeleteFilamentDialogComponent, boolean>
-  );
-  readonly data: DeleteFilamentDialogData = inject(MAT_DIALOG_DATA);
-
-  /** The filament spool being considered for deletion */
-  readonly filament = this.data.filament;
-
-  /** Format weight for display in dialog */
-  formatWeight(grams: number): string {
-    if (grams >= 1000) {
-      return `${(grams / 1000).toFixed(1)}kg`;
-    }
-    return `${Math.round(grams)}g`;
-  }
-
-  /** Cancel — close dialog with false (no deletion) */
-  onCancel(): void {
-    this.dialogRef.close(false);
-  }
-
-  /** Confirm — close dialog with true (proceed with deletion) */
-  onConfirm(): void {
-    this.dialogRef.close(true);
-  }
-}

frontend/src/app/components/filament-table/filament-table.component.html

@@ -1,145 +0,0 @@
-<!-- Filament Inventory Table — with low stock indicators and delete actions -->
-<div class="filament-table-container" role="region" aria-label="Filament inventory">
-
-  <!-- Low Stock Alert Banner — shown when critical or low stock spools exist -->
-  @if (criticalCount() > 0) {
-    <div class="alert-banner critical" role="alert">
-      <mat-icon aria-hidden="true">error</mat-icon>
-      <span>{{ criticalCount() }} spool{{ criticalCount() > 1 ? 's' : '' }} critically low (&le;10% remaining)</span>
-    </div>
-  } @else if (lowStockCount() > 0) {
-    <div class="alert-banner low" role="alert">
-      <mat-icon aria-hidden="true">warning</mat-icon>
-      <span>{{ lowStockCount() }} spool{{ lowStockCount() > 1 ? 's' : '' }} running low (&le;25% remaining)</span>
-    </div>
-  }
-
-  <!-- Filament Table -->
-  <table mat-table
-         [dataSource]="sortedFilaments()"
-         matSort
-         (matSortChange)="sortData($event)"
-         class="filament-table"
-         aria-label="Filament inventory table">
-
-    <!-- Color Column -->
-    <ng-container matColumnDef="color">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="color">Color</th>
-      <td mat-cell *matCellDef="let filament">
-        <span class="color-swatch"
-              [style.background-color]="filament.colorHex"
-              [matTooltip]="filament.colorName"
-              matTooltipPosition="after"
-              [attr.aria-label]="filament.colorName">
-        </span>
-      </td>
-    </ng-container>
-
-    <!-- Material Column -->
-    <ng-container matColumnDef="material">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="material">Material</th>
-      <td mat-cell *matCellDef="let filament">
-        <span class="material-name">{{ filament.materialBaseName }}</span>
-        @if (filament.materialModifierName) {
-          <span class="material-modifier"> {{ filament.materialModifierName }}</span>
-        }
-      </td>
-    </ng-container>
-
-    <!-- Brand Column -->
-    <ng-container matColumnDef="brand">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="brand">Brand</th>
-      <td mat-cell *matCellDef="let filament">{{ filament.brand }}</td>
-    </ng-container>
-
-    <!-- Serial Column -->
-    <ng-container matColumnDef="serial">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="serial">Serial</th>
-      <td mat-cell *matCellDef="let filament" class="serial-cell">{{ filament.spoolSerial }}</td>
-    </ng-container>
-
-    <!-- Remaining Weight Column -->
-    <ng-container matColumnDef="remaining">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="remaining">Remaining</th>
-      <td mat-cell *matCellDef="let filament">
-        <div class="remaining-cell">
-          <span class="remaining-text">
-            {{ formatWeight(filament.weightRemainingGrams) }} / {{ formatWeight(filament.weightTotalGrams) }}
-          </span>
-          <mat-progress-bar
-            mode="determinate"
-            [value]="getRemainingPercent(filament)"
-            [ngClass]="classifyStockLevel(filament)"
-            [matTooltip]="getRemainingPercent(filament).toFixed(0) + '% remaining'"
-            matTooltipPosition="below">
-          </mat-progress-bar>
-        </div>
-      </td>
-    </ng-container>
-
-    <!-- Stock Level Indicator Column -->
-    <ng-container matColumnDef="stockLevel">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="stockLevel">Stock</th>
-      <td mat-cell *matCellDef="let filament">
-        @let level = classifyStockLevel(filament);
-        <mat-chip-set aria-label="Stock level">
-          <mat-chip
-            [ngClass]="level"
-            [matTooltip]="stockLevelLabel(level) + ' — ' + getRemainingPercent(filament).toFixed(0) + '% remaining'"
-            matTooltipPosition="below">
-            <mat-icon matChipStart [ngClass]="level">{{ stockLevelIcon(level) }}</mat-icon>
-            <span>{{ stockLevelLabel(level) }}</span>
-          </mat-chip>
-        </mat-chip-set>
-      </td>
-    </ng-container>
-
-    <!-- Status Column -->
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="status">Status</th>
-      <td mat-cell *matCellDef="let filament">
-        <span class="status-badge"
-              [class.active]="filament.isActive"
-              [class.inactive]="!filament.isActive">
-          {{ filament.isActive ? 'Active' : 'Inactive' }}
-        </span>
-      </td>
-    </ng-container>
-
-    <!-- Actions Column — delete button -->
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef>Actions</th>
-      <td mat-cell *matCellDef="let filament">
-        <button mat-icon-button
-                type="button"
-                color="warn"
-                [attr.aria-label]="'Delete ' + filament.materialBaseName + ' — ' + filament.colorName"
-                matTooltip="Delete spool"
-                matTooltipPosition="above"
-                [disabled]="deleting() === filament.id"
-                (click)="onDeleteClick(filament)">
-          @if (deleting() === filament.id) {
-            <mat-icon aria-hidden="true">hourglass_empty</mat-icon>
-          } @else {
-            <mat-icon aria-hidden="true">delete</mat-icon>
-          }
-        </button>
-      </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="columns()"></tr>
-    <tr mat-row *matRowDef="let row; columns: columns();"
-        [class.row-critical]="classifyStockLevel(row) === 'critical'"
-        [class.row-low]="classifyStockLevel(row) === 'low'"
-        [class.row-deleting]="deleting() === row.id">
-    </tr>
-  </table>
-
-  <!-- Empty state -->
-  @if (filaments().length === 0) {
-    <div class="empty-state" role="status">
-      <mat-icon aria-hidden="true">inventory_2</mat-icon>
-      <p>No filament spools found</p>
-    </div>
-  }
-</div>

frontend/src/app/components/filament-table/filament-table.component.scss

@@ -1,273 +0,0 @@
-/**
- * Filament Table Component Styles
- * Touch-optimized for kiosk (Raspberry Pi 5) and mobile PWA
- * Low stock indicators use high-contrast colors for workshop visibility
- */
-
-// Touch-optimized sizing
-$touch-target-min: 48px;
-$spacing-unit: 8px;
-
-// Stock level colors — high contrast, accessible
-$color-critical: #ef4444;   // Red — critically low
-$color-low: #f59e0b;       // Amber — running low
-$color-moderate: #3b82f6;  // Blue — moderate
-$color-healthy: #22c55e;   // Green — healthy/OK
-$color-active: #22c55e;    // Green — active spool
-$color-inactive: #94a3b8;  // Gray — inactive spool
-
-.filament-table-container {
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-// Alert banner for low stock warnings
-.alert-banner {
-  display: flex;
-  align-items: center;
-  gap: $spacing-unit;
-  padding: $spacing-unit * 1.5 $spacing-unit * 2;
-  border-radius: 8px;
-  margin-bottom: $spacing-unit * 2;
-  font-size: 14px;
-  font-weight: 500;
-
-  mat-icon {
-    font-size: 20px !important;
-    width: 20px !important;
-    height: 20px !important;
-  }
-
-  &.critical {
-    background-color: rgba($color-critical, 0.12);
-    color: $color-critical;
-    border: 1px solid rgba($color-critical, 0.3);
-  }
-
-  &.low {
-    background-color: rgba($color-low, 0.12);
-    color: $color-low;
-    border: 1px solid rgba($color-low, 0.3);
-  }
-}
-
-// Table styling
-.filament-table {
-  width: 100%;
-  min-width: 700px;
-
-  th {
-    font-weight: 600;
-    font-size: 13px;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--mat-sys-on-surface-variant);
-  }
-
-  td {
-    font-size: 14px;
-    padding: 12px 16px !important;
-    min-height: $touch-target-min;
-
-    @media (max-width: 480px) {
-      padding: 8px 12px !important;
-      font-size: 13px;
-    }
-  }
-
-  // Row highlight for low stock
-  .mat-mdc-row {
-    transition: background-color 0.2s ease;
-  }
-
-  &.row-critical {
-    background-color: rgba($color-critical, 0.06) !important;
-
-    &:hover {
-      background-color: rgba($color-critical, 0.1) !important;
-    }
-  }
-
-  &.row-low {
-    background-color: rgba($color-low, 0.06) !important;
-
-    &:hover {
-      background-color: rgba($color-low, 0.1) !important;
-    }
-  }
-}
-
-// Color swatch
-.color-swatch {
-  display: inline-block;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  border: 2px solid rgba(0, 0, 0, 0.12);
-  vertical-align: middle;
-  cursor: default;
-
-  @media (max-width: 480px) {
-    width: 24px;
-    height: 24px;
-  }
-}
-
-// Material name
-.material-name {
-  font-weight: 500;
-}
-
-.material-modifier {
-  font-size: 12px;
-  color: var(--mat-sys-on-surface-variant);
-  margin-left: 4px;
-}
-
-// Serial cell — monospace
-.serial-cell {
-  font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
-  font-size: 13px;
-  letter-spacing: 0.02em;
-}
-
-// Remaining weight cell
-.remaining-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 120px;
-
-  .remaining-text {
-    font-size: 13px;
-    color: var(--mat-sys-on-surface-variant);
-  }
-}
-
-// Progress bar stock level variants
-mat-progress-bar {
-  &.critical {
-    --mat-progress-bar-active-indicator-color: #{$color-critical};
-  }
-
-  &.low {
-    --mat-progress-bar-active-indicator-color: #{$color-low};
-  }
-
-  &.moderate {
-    --mat-progress-bar-active-indicator-color: #{$color-moderate};
-  }
-
-  &.healthy {
-    --mat-progress-bar-active-indicator-color: #{$color-healthy};
-  }
-}
-
-// Stock level chip variants
-mat-chip {
-  min-height: 32px !important;
-  font-size: 12px !important;
-
-  &.critical {
-    background-color: rgba($color-critical, 0.15) !important;
-    color: $color-critical;
-
-    mat-icon {
-      color: $color-critical;
-    }
-  }
-
-  &.low {
-    background-color: rgba($color-low, 0.15) !important;
-    color: $color-low;
-
-    mat-icon {
-      color: $color-low;
-    }
-  }
-
-  &.moderate {
-    background-color: rgba($color-moderate, 0.1) !important;
-    color: $color-moderate;
-
-    mat-icon {
-      color: $color-moderate;
-    }
-  }
-
-  &.healthy {
-    background-color: rgba($color-healthy, 0.1) !important;
-    color: $color-healthy;
-
-    mat-icon {
-      color: $color-healthy;
-    }
-  }
-
-  mat-icon {
-    font-size: 16px !important;
-    width: 16px !important;
-    height: 16px !important;
-    margin-right: 4px;
-  }
-}
-
-// Status badge
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-
-  &.active {
-    background-color: rgba($color-active, 0.12);
-    color: $color-active;
-  }
-
-  &.inactive {
-    background-color: rgba($color-inactive, 0.12);
-    color: $color-inactive;
-  }
-}
-
-// Actions column
-.actions-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// Row being deleted — subtle fade
-:host ::ng-deep .row-deleting {
-  opacity: 0.5;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
-// Empty state
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px $spacing-unit * 2;
-  color: var(--mat-sys-on-surface-variant);
-
-  mat-icon {
-    font-size: 48px !important;
-    width: 48px !important;
-    height: 48px !important;
-    opacity: 0.4;
-    margin-bottom: $spacing-unit * 2;
-  }
-
-  p {
-    font-size: 16px;
-    margin: 0;
-  }
-}

frontend/src/app/components/filament-table/filament-table.component.spec.ts

@@ -1,88 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-  Filament,
-  StockLevel,
-  getRemainingPercent,
-  classifyStockLevel,
-} from '../../models/filament.model';
-
-/** Create a test filament with defaults — override specific fields */
-function createFilament(overrides: Partial<Filament> = {}): Filament {
-  return {
-    id: '00000000-0000-0000-0000-000000000001',
-    materialBaseId: '10000000-0000-0000-0000-000000000001',
-    materialBaseName: 'PLA',
-    materialFinishId: '20000000-0000-0000-0000-000000000001',
-    materialFinishName: 'Basic',
-    materialModifierId: null,
-    materialModifierName: null,
-    brand: 'Bambu Lab',
-    colorName: 'White',
-    colorHex: '#FFFFFF',
-    weightTotalGrams: 1000,
-    weightRemainingGrams: 750,
-    filamentDiameterMm: 1.75,
-    spoolSerial: 'SN-001',
-    purchasePrice: null,
-    purchaseDate: null,
-    isActive: true,
-    createdAt: '2026-01-01T00:00:00Z',
-    updatedAt: '2026-01-01T00:00:00Z',
-    qrCodeUrl: '',
-    ...overrides,
-  };
-}
-
-describe('getRemainingPercent', () => {
-  it('should return correct percentage', () => {
-    const filament = createFilament({ weightTotalGrams: 1000, weightRemainingGrams: 250 });
-    expect(getRemainingPercent(filament)).toBe(25);
-  });
-
-  it('should return 0 when total weight is 0', () => {
-    const filament = createFilament({ weightTotalGrams: 0, weightRemainingGrams: 0 });
-    expect(getRemainingPercent(filament)).toBe(0);
-  });
-
-  it('should cap at 100%', () => {
-    const filament = createFilament({ weightTotalGrams: 100, weightRemainingGrams: 200 });
-    expect(getRemainingPercent(filament)).toBe(100);
-  });
-
-  it('should floor at 0%', () => {
-    const filament = createFilament({ weightTotalGrams: 100, weightRemainingGrams: -10 });
-    expect(getRemainingPercent(filament)).toBe(0);
-  });
-});
-
-describe('classifyStockLevel', () => {
-  it('should classify as critical when ≤10%', () => {
-    const filament = createFilament({ weightTotalGrams: 1000, weightRemainingGrams: 50 });
-    expect(classifyStockLevel(filament)).toBe('critical');
-  });
-
-  it('should classify as critical at exactly 10%', () => {
-    const filament = createFilament({ weightTotalGrams: 1000, weightRemainingGrams: 100 });
-    expect(classifyStockLevel(filament)).toBe('critical');
-  });
-
-  it('should classify as low when ≤25%', () => {
-    const filament = createFilament({ weightTotalGrams: 1000, weightRemainingGrams: 200 });
-    expect(classifyStockLevel(filament)).toBe('low');
-  });
-
-  it('should classify as moderate when ≤50%', () => {
-    const filament = createFilament({ weightTotalGrams: 1000, weightRemainingGrams: 400 });
-    expect(classifyStockLevel(filament)).toBe('moderate');
-  });
-
-  it('should classify as healthy when >50%', () => {
-    const filament = createFilament({ weightTotalGrams: 1000, weightRemainingGrams: 750 });
-    expect(classifyStockLevel(filament)).toBe('healthy');
-  });
-
-  it('should classify 0 grams remaining as critical', () => {
-    const filament = createFilament({ weightTotalGrams: 1000, weightRemainingGrams: 0 });
-    expect(classifyStockLevel(filament)).toBe('critical');
-  });
-});

frontend/src/app/components/filament-table/filament-table.component.ts

@@ -1,383 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  computed,
-  inject,
-  signal,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatTableModule } from '@angular/material/table';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatSortModule, Sort } from '@angular/material/sort';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-
-import {
-  Filament,
-  StockLevel,
-  getRemainingPercent,
-  classifyStockLevel,
-} from '../../models/filament.model';
-import { FilamentService } from '../../services/filament.service';
-import {
-  DeleteFilamentDialogComponent,
-  DeleteFilamentDialogData,
-} from '../delete-filament-dialog/delete-filament-dialog.component';
-
-/** Display column definitions for the filament table */
-export type FilamentColumn =
-  | 'color'
-  | 'material'
-  | 'brand'
-  | 'serial'
-  | 'remaining'
-  | 'stockLevel'
-  | 'status'
-  | 'actions';
-
-@Component({
-  selector: 'app-filament-table',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatTableModule,
-    MatChipsModule,
-    MatIconModule,
-    MatProgressBarModule,
-    MatTooltipModule,
-    MatSortModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatSnackBarModule,
-  ],
-  templateUrl: './filament-table.component.html',
-  styleUrl: './filament-table.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FilamentTableComponent {
-  private readonly dialog = inject(MatDialog);
-  private readonly snackBar = inject(MatSnackBar);
-  private readonly filamentService = inject(FilamentService);
-
-  /** Filament data input — reactive signal for live updates */
-  readonly filaments = signal<Filament[]>([]);
-
-  /** Whether a delete operation is in progress */
-  readonly deleting = signal<string | null>(null);
-
-  /** Columns to display — defaults to all columns including actions */
-  @Input()
-  set displayedColumns(cols: FilamentColumn[]) {
-    this._displayedColumns.set(cols);
-  }
-  get displayedColumns(): FilamentColumn[] {
-    return this._displayedColumns();
-  }
-  private readonly _displayedColumns = signal<FilamentColumn[]>([
-    'color',
-    'material',
-    'brand',
-    'serial',
-    'remaining',
-    'stockLevel',
-    'status',
-    'actions',
-  ]);
-
-  /** Default columns for template binding */
-  readonly columns = this._displayedColumns;
-
-  /** Sorted filament data */
-  readonly sortedFilaments = signal<Filament[]>([]);
-
-  /** Computed: count of low/critical spools */
-  readonly lowStockCount = computed(() =>
-    this.filaments().filter(
-      (f) => classifyStockLevel(f) === 'low' || classifyStockLevel(f) === 'critical'
-    ).length
-  );
-
-  /** Computed: count of critical spools */
-  readonly criticalCount = computed(() =>
-    this.filaments().filter((f) => classifyStockLevel(f) === 'critical').length
-  );
-
-  constructor() {
-    // Initialize sorted data from filaments
-    // (MatSort handles sorting via sortChange; we start unsorted)
-
-    // Development: seed with sample data for visual testing
-    // TODO: Replace with service data from FilamentService / SignalR
-    this.updateFilaments([
-      {
-        id: '1',
-        materialBaseId: 'm1',
-        materialBaseName: 'PLA',
-        materialFinishId: 'f1',
-        materialFinishName: 'Basic',
-        materialModifierId: null,
-        materialModifierName: null,
-        brand: 'Bambu Lab',
-        colorName: 'White',
-        colorHex: '#F5F5F5',
-        weightTotalGrams: 1000,
-        weightRemainingGrams: 850,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-001',
-        purchasePrice: 25.00,
-        purchaseDate: '2026-01-15T00:00:00Z',
-        isActive: true,
-        createdAt: '2026-01-15T00:00:00Z',
-        updatedAt: '2026-04-20T00:00:00Z',
-        qrCodeUrl: '',
-      },
-      {
-        id: '2',
-        materialBaseId: 'm2',
-        materialBaseName: 'PETG',
-        materialFinishId: 'f2',
-        materialFinishName: 'Matte',
-        materialModifierId: 'mod1',
-        materialModifierName: 'Carbon Fiber',
-        brand: 'Polymaker',
-        colorName: 'Fire Engine Red',
-        colorHex: '#FF0000',
-        weightTotalGrams: 1000,
-        weightRemainingGrams: 80,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-002',
-        purchasePrice: 35.00,
-        purchaseDate: '2026-02-01T00:00:00Z',
-        isActive: true,
-        createdAt: '2026-02-01T00:00:00Z',
-        updatedAt: '2026-04-25T00:00:00Z',
-        qrCodeUrl: '',
-      },
-      {
-        id: '3',
-        materialBaseId: 'm1',
-        materialBaseName: 'PLA',
-        materialFinishId: 'f1',
-        materialFinishName: 'Basic',
-        materialModifierId: null,
-        materialModifierName: null,
-        brand: 'eSun',
-        colorName: 'Sky Blue',
-        colorHex: '#87CEEB',
-        weightTotalGrams: 1000,
-        weightRemainingGrams: 200,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-003',
-        purchasePrice: 20.00,
-        purchaseDate: '2026-03-10T00:00:00Z',
-        isActive: true,
-        createdAt: '2026-03-10T00:00:00Z',
-        updatedAt: '2026-04-26T00:00:00Z',
-        qrCodeUrl: '',
-      },
-      {
-        id: '4',
-        materialBaseId: 'm3',
-        materialBaseName: 'ABS',
-        materialFinishId: 'f1',
-        materialFinishName: 'Basic',
-        materialModifierId: null,
-        materialModifierName: null,
-        brand: 'Hatchbox',
-        colorName: 'Black',
-        colorHex: '#1A1A1A',
-        weightTotalGrams: 1000,
-        weightRemainingGrams: 450,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-004',
-        purchasePrice: 22.00,
-        purchaseDate: null,
-        isActive: true,
-        createdAt: '2026-01-20T00:00:00Z',
-        updatedAt: '2026-04-18T00:00:00Z',
-        qrCodeUrl: '',
-      },
-      {
-        id: '5',
-        materialBaseId: 'm1',
-        materialBaseName: 'PLA',
-        materialFinishId: 'f3',
-        materialFinishName: 'Silk',
-        materialModifierId: null,
-        materialModifierName: null,
-        brand: 'Overturn',
-        colorName: 'Gold',
-        colorHex: '#FFD700',
-        weightTotalGrams: 500,
-        weightRemainingGrams: 15,
-        filamentDiameterMm: 1.75,
-        spoolSerial: 'SN-005',
-        purchasePrice: 28.00,
-        purchaseDate: null,
-        isActive: false,
-        createdAt: '2025-12-01T00:00:00Z',
-        updatedAt: '2026-04-01T00:00:00Z',
-        qrCodeUrl: '',
-      },
-    ]);
-  }
-
-  /** Update filament data — called by parent or service */
-  updateFilaments(data: Filament[]): void {
-    this.filaments.set(data);
-    this.sortedFilaments.set([...data]);
-  }
-
-  /** Handle sort changes from MatSort */
-  sortData(sort: Sort): void {
-    const data = [...this.filaments()];
-    if (!sort.active || sort.direction === '') {
-      this.sortedFilaments.set(data);
-      return;
-    }
-    const sorted = data.sort((a, b) => {
-      const isAsc = sort.direction === 'asc';
-      switch (sort.active as FilamentColumn) {
-        case 'material':
-          return compare(a.materialBaseName, b.materialBaseName, isAsc);
-        case 'brand':
-          return compare(a.brand, b.brand, isAsc);
-        case 'serial':
-          return compare(a.spoolSerial, b.spoolSerial, isAsc);
-        case 'remaining':
-          return compare(
-            getRemainingPercent(a),
-            getRemainingPercent(b),
-            isAsc
-          );
-        case 'stockLevel':
-          return compare(
-            stockLevelOrder(classifyStockLevel(a)),
-            stockLevelOrder(classifyStockLevel(b)),
-            isAsc
-          );
-        case 'status':
-          return compare(
-            a.isActive ? 0 : 1,
-            b.isActive ? 0 : 1,
-            isAsc
-          );
-        default:
-          return 0;
-      }
-    });
-    this.sortedFilaments.set(sorted);
-  }
-
-  /**
-   * Open the delete confirmation dialog for a filament spool.
-   * On confirm: calls DELETE endpoint and removes the row on success.
-   * On cancel: dialog dismissed, no action taken.
-   */
-  onDeleteClick(filament: Filament): void {
-    const dialogData: DeleteFilamentDialogData = { filament };
-    const dialogRef = this.dialog.open(DeleteFilamentDialogComponent, {
-      data: dialogData,
-      width: '480px',
-      disableClose: true,
-    });
-
-    dialogRef.afterClosed().subscribe((confirmed: boolean | undefined) => {
-      if (!confirmed) {
-        return; // User cancelled — no action
-      }
-
-      // Mark as deleting for UI feedback
-      this.deleting.set(filament.id);
-
-      this.filamentService.deleteFilament(filament.id).subscribe({
-        next: () => {
-          // Remove the deleted filament from local data
-          const updated = this.filaments().filter((f) => f.id !== filament.id);
-          this.updateFilaments(updated);
-          this.deleting.set(null);
-
-          this.snackBar.open(
-            `Deleted ${filament.materialBaseName} — ${filament.colorName}`,
-            'Dismiss',
-            { duration: 4000 }
-          );
-        },
-        error: () => {
-          this.deleting.set(null);
-          this.snackBar.open(
-            `Failed to delete ${filament.materialBaseName} — ${filament.colorName}. Please try again.`,
-            'Dismiss',
-            { duration: 6000 }
-          );
-        },
-      });
-    });
-  }
-
-  /** Template helper: get remaining percent */
-  getRemainingPercent = getRemainingPercent;
-
-  /** Template helper: classify stock level */
-  classifyStockLevel = classifyStockLevel;
-
-  /** Template helper: stock level icon */
-  stockLevelIcon(level: StockLevel): string {
-    switch (level) {
-      case 'critical':
-        return 'error';
-      case 'low':
-        return 'warning';
-      case 'moderate':
-        return 'info';
-      case 'healthy':
-        return 'check_circle';
-    }
-  }
-
-  /** Template helper: stock level label */
-  stockLevelLabel(level: StockLevel): string {
-    switch (level) {
-      case 'critical':
-        return 'Critical';
-      case 'low':
-        return 'Low';
-      case 'moderate':
-        return 'Moderate';
-      case 'healthy':
-        return 'Healthy';
-    }
-  }
-
-  /** Template helper: format remaining weight */
-  formatWeight(grams: number): string {
-    if (grams >= 1000) {
-      return `${(grams / 1000).toFixed(1)}kg`;
-    }
-    return `${Math.round(grams)}g`;
-  }
-}
-
-/** Compare helper for sorting */
-function compare(a: number | string, b: number | string, isAsc: boolean): number {
-  return (a < b ? -1 : a > b ? 1 : 0) * (isAsc ? 1 : -1);
-}
-
-/** Stock level sort order (critical=0, healthy=3) */
-function stockLevelOrder(level: StockLevel): number {
-  switch (level) {
-    case 'critical':
-      return 0;
-    case 'low':
-      return 1;
-    case 'moderate':
-      return 2;
-    case 'healthy':
-      return 3;
-  }
-}

frontend/src/app/models/agent.model.ts

@@ -1,24 +0,0 @@
-/**
- * Represents the status of a single agent/printer in the system.
- */
-export type AgentStatus = 'active' | 'idle' | 'thinking' | 'error';
-
-export interface AgentSummary {
-  /** Total number of agents in the system */
-  total: number;
-  /** Number of currently active agents */
-  active: number;
-  /** Number of currently idle agents */
-  idle: number;
-  /** Number of currently thinking/processing agents */
-  thinking: number;
-  /** Number of agents in error state */
-  error: number;
-}
-
-export interface SystemHealth {
-  /** Whether the SignalR connection is live */
-  connected: boolean;
-  /** Overall system health: healthy, degraded, or down */
-  status: 'healthy' | 'degraded' | 'down';
-}

frontend/src/app/models/filament.model.ts

@@ -1,100 +0,0 @@
-/**
- * Filament model matching the Extrudex backend FilamentResponse DTO.
- * Used for displaying spool inventory in the filament table UI.
- */
-export interface Filament {
-  /** Unique identifier for the filament spool. */
-  id: string;
-
-  /** Foreign key to the base material. */
-  materialBaseId: string;
-
-  /** Name of the base material (e.g., "PLA", "PETG"). */
-  materialBaseName: string;
-
-  /** Foreign key to the material finish. */
-  materialFinishId: string;
-
-  /** Name of the material finish (e.g., "Basic", "Matte"). */
-  materialFinishName: string;
-
-  /** Foreign key to the optional material modifier. */
-  materialModifierId: string | null;
-
-  /** Name of the material modifier (e.g., "Carbon Fiber"). Null if none. */
-  materialModifierName: string | null;
-
-  /** Brand name (e.g., "Bambu Lab", "Polymaker"). */
-  brand: string;
-
-  /** Human-readable color name (e.g., "Fire Engine Red"). */
-  colorName: string;
-
-  /** Hex color code (e.g., "#FF0000"). */
-  colorHex: string;
-
-  /** Total spool weight in grams when full. */
-  weightTotalGrams: number;
-
-  /** Current remaining weight in grams. */
-  weightRemainingGrams: number;
-
-  /** Filament diameter in millimeters. Typically 1.75mm. */
-  filamentDiameterMm: number;
-
-  /** Manufacturer-assigned serial number. */
-  spoolSerial: string;
-
-  /** Purchase price per spool. Null if not tracked. */
-  purchasePrice: number | null;
-
-  /** Date the spool was purchased or received. */
-  purchaseDate: string | null;
-
-  /** Whether the spool is currently active and available. */
-  isActive: boolean;
-
-  /** Timestamp when this record was created (UTC). */
-  createdAt: string;
-
-  /** Timestamp when this record was last updated (UTC). */
-  updatedAt: string;
-
-  /** URL to the QR code image for this spool. */
-  qrCodeUrl: string;
-}
-
-/**
- * Stock level classification for low stock indicators.
- * - critical: ≤ 10% remaining
- * - low: ≤ 25% remaining
- * - moderate: ≤ 50% remaining
- * - healthy: > 50% remaining
- */
-export type StockLevel = 'critical' | 'low' | 'moderate' | 'healthy';
-
-/**
- * Compute the remaining weight percentage for a filament spool.
- * Returns a value from 0 to 100.
- */
-export function getRemainingPercent(filament: Filament): number {
-  if (filament.weightTotalGrams <= 0) return 0;
-  const pct = (filament.weightRemainingGrams / filament.weightTotalGrams) * 100;
-  return Math.min(Math.max(pct, 0), 100);
-}
-
-/**
- * Classify the stock level based on remaining percentage.
- * Thresholds:
- *   critical  — ≤ 10%  (nearly empty, red alert)
- *   low       — ≤ 25%  (getting low, amber warning)
- *   moderate  — ≤ 50%  (half or less, yellow info)
- *   healthy   — > 50%  (plenty left, green OK)
- */
-export function classifyStockLevel(filament: Filament): StockLevel {
-  const pct = getRemainingPercent(filament);
-  if (pct <= 10) return 'critical';
-  if (pct <= 25) return 'low';
-  if (pct <= 50) return 'moderate';
-  return 'healthy';
-}

frontend/src/app/services/filament.service.ts

@@ -1,37 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-import { Filament } from '../models/filament.model';
-
-/**
- * API base URL — matches the Extrudex backend default.
- * TODO: Move to environment config when multi-environment support is added.
- */
-const API_BASE_URL = '/api';
-
-/**
- * Service for CRUD operations on filament spools.
- * Communicates with the Extrudex backend SpoolsController.
- */
-@Injectable({ providedIn: 'root' })
-export class FilamentService {
-  private readonly http = inject(HttpClient);
-
-  /**
-   * Fetch all filament spools from the backend.
-   * GET /api/spools
-   */
-  getFilaments(): Observable<Filament[]> {
-    return this.http.get<Filament[]>(`${API_BASE_URL}/spools`);
-  }
-
-  /**
-   * Soft-delete a filament spool by ID.
-   * DELETE /api/spools/{id}
-   * Returns 204 No Content on success.
-   */
-  deleteFilament(id: string): Observable<void> {
-    return this.http.delete<void>(`${API_BASE_URL}/spools/${id}`);
-  }
-}

frontend/src/index.html

@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Frontend</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
-      rel="stylesheet"
-    />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-  </head>
-  <body>
-    <app-root></app-root>
-  </body>
-</html>

frontend/src/main.ts

@@ -1,6 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
-
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));

frontend/src/styles.scss

@@ -1,39 +0,0 @@
-// Include theming for Angular Material with `mat.theme()`.
-// This Sass mixin will define CSS variables that are used for styling Angular Material
-// components according to the Material 3 design spec.
-// Learn more about theming and how to use it for your application's
-// custom components at https://material.angular.dev/guide/theming
-@use '@angular/material' as mat;
-
-html {
-  height: 100%;
-  @include mat.theme(
-    (
-      color: (
-        primary: mat.$azure-palette,
-        tertiary: mat.$blue-palette,
-      ),
-      typography: Roboto,
-      density: 0,
-    )
-  );
-}
-
-body {
-  // Default the application to a light color theme. This can be changed to
-  // `dark` to enable the dark color theme, or to `light dark` to defer to the
-  // user's system settings.
-  color-scheme: light;
-
-  // Set a default background, font and text colors for the application using
-  // Angular Material's system-level CSS variables. Learn more about these
-  // variables at https://material.angular.dev/guide/system-variables
-  background-color: var(--mat-sys-surface);
-  color: var(--mat-sys-on-surface);
-  font: var(--mat-sys-body-medium);
-
-  // Reset the user agent margin.
-  margin: 0;
-  height: 100%;
-}
-/* You can add global styles to this file, and also import other style files */

frontend/tsconfig.app.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
-}

frontend/tsconfig.json

@@ -1,33 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "preserve"
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

frontend/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "vitest/globals"
-    ]
-  },
-  "include": [
-    "src/**/*.d.ts",
-    "src/**/*.spec.ts"
-  ]
-}