+
+
+
+
+ {{ statusLabel() }}
+
+
+
+
+ smart_toy
+ {{ summary().active }} / {{ summary().total }}
+ Active
+
+
+
+
+
+ 0"
+ matTooltip="Active agents">
+ check_circle
+ {{ summary().active }}
+ Active
+
+
+ 0"
+ matTooltip="Idle agents">
+ pause_circle
+ {{ summary().idle }}
+ Idle
+
+
+ 0"
+ matTooltip="Thinking agents">
+ psychology
+ {{ summary().thinking }}
+ Thinking
+
+
+
+ error
+ {{ summary().error }}
+ Error
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/app/components/dashboard-summary/dashboard-summary.component.scss b/frontend/src/app/components/dashboard-summary/dashboard-summary.component.scss
new file mode 100644
index 0000000..3bd2f64
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/dashboard-summary/dashboard-summary.component.spec.ts b/frontend/src/app/components/dashboard-summary/dashboard-summary.component.spec.ts
new file mode 100644
index 0000000..1632d56
--- /dev/null
+++ b/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