Merge branch 'dev' into agent/hex/CUB-31-filament-usage-tracking-model

backend/API/Filters/FluentValidationFilter.cs

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,108 @@
+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/Program.cs

@@ -1,4 +1,5 @@
 using System.Reflection;
+using Extrudex.API.Filters;
 using Extrudex.API.Hubs;
 using Extrudex.Domain.Interfaces;
 using Extrudex.Infrastructure.Data;
@@ -23,7 +24,10 @@ builder.Services.AddDbContext<ExtrudexDbContext>(options =>
     options.UseNpgsql(connectionString));
 
 // ── API Services ───────────────────────────────────────────
-builder.Services.AddControllers();
+builder.Services.AddControllers(options =>
+{
+    options.Filters.AddService<FluentValidationFilter>();
+});
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen(c =>
 {
@@ -50,6 +54,10 @@ 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

frontend/.editorconfig

@@ -0,0 +1,17 @@
+# 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

@@ -0,0 +1,44 @@
+# 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

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

frontend/.vscode/extensions.json

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

frontend/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // 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

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

frontend/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // 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

@@ -0,0 +1,59 @@
+# 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

@@ -0,0 +1,78 @@
+{
+  "$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

@@ -0,0 +1,35 @@
+{
+  "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/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

@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes)
+  ]
+};

frontend/src/app/app.html

@@ -0,0 +1,10 @@
+<!-- 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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,27 @@
+: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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,63 @@
+<!-- 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

@@ -0,0 +1,174 @@
+/**
+ * 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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,80 @@
+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/filament-table/filament-table.component.html

@@ -0,0 +1,123 @@
+<!-- Filament Inventory Table — with low stock indicators -->
+<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>
+
+    <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'">
+    </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

@@ -0,0 +1,259 @@
+/**
+ * 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;
+  }
+}
+
+// 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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,315 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  computed,
+  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 {
+  Filament,
+  StockLevel,
+  getRemainingPercent,
+  classifyStockLevel,
+} from '../../models/filament.model';
+
+/** Display column definitions for the filament table */
+export type FilamentColumn =
+  | 'color'
+  | 'material'
+  | 'brand'
+  | 'serial'
+  | 'remaining'
+  | 'stockLevel'
+  | 'status';
+
+@Component({
+  selector: 'app-filament-table',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatTableModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressBarModule,
+    MatTooltipModule,
+    MatSortModule,
+  ],
+  templateUrl: './filament-table.component.html',
+  styleUrl: './filament-table.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilamentTableComponent {
+  /** Filament data input — reactive signal for live updates */
+  readonly filaments = signal<Filament[]>([]);
+
+  /** Columns to display — defaults to all columns */
+  @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',
+  ]);
+
+  /** 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);
+  }
+
+  /** 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

@@ -0,0 +1,24 @@
+/**
+ * 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

@@ -0,0 +1,100 @@
+/**
+ * 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/index.html

@@ -0,0 +1,20 @@
+<!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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,39 @@
+// 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

@@ -0,0 +1,15 @@
+/* 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

@@ -0,0 +1,33 @@
+/* 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

@@ -0,0 +1,15 @@
+/* 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"
+  ]
+}