feat(CUB-56): Agent State Database Migration

backend/.gitignore

@@ -0,0 +1,21 @@
+## .NET
+bin/
+obj/
+*.user
+*.suo
+*.cache
+*.dll
+*.pdb
+
+## IDE
+.vs/
+.idea/
+*.swp
+*~
+
+## OS
+.DS_Store
+Thumbs.db
+
+## Environment
+.env

backend/Configurations/AgentConfiguration.cs

@@ -0,0 +1,88 @@
+using ControlCenter.Api.Entities;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Metadata.Builders;
+
+namespace ControlCenter.Api.Configurations;
+
+/// <summary>
+/// EF Core entity type configuration for the agents table.
+/// Enforces snake_case naming, required fields, and index design.
+/// </summary>
+public class AgentConfiguration : IEntityTypeConfiguration<Agent>
+{
+    public void Configure(EntityTypeBuilder<Agent> builder)
+    {
+        // Table name — snake_case
+        builder.ToTable("agents");
+
+        // Primary key
+        builder.HasKey(a => a.Id);
+        builder.Property(a => a.Id)
+            .HasColumnName("id")
+            .ValueGeneratedOnAdd();
+
+        // Status — stored as PostgreSQL enum via Npgsql
+        builder.Property(a => a.Status)
+            .HasColumnName("status")
+            .HasColumnType("agent_status")
+            .IsRequired();
+
+        // Task — nullable text
+        builder.Property(a => a.Task)
+            .HasColumnName("task")
+            .HasColumnType("text");
+
+        // Progress — nullable integer (0–100)
+        builder.Property(a => a.Progress)
+            .HasColumnName("progress");
+
+        // Session key — required, not null
+        builder.Property(a => a.SessionKey)
+            .HasColumnName("session_key")
+            .HasColumnType("text")
+            .IsRequired();
+
+        // Channel — required, not null
+        builder.Property(a => a.Channel)
+            .HasColumnName("channel")
+            .HasColumnType("text")
+            .IsRequired();
+
+        // Last activity — required, defaults to now()
+        builder.Property(a => a.LastActivity)
+            .HasColumnName("last_activity")
+            .HasColumnType("timestamptz")
+            .IsRequired();
+
+        // Created at — auto-set on insert
+        builder.Property(a => a.CreatedAt)
+            .HasColumnName("created_at")
+            .HasColumnType("timestamptz")
+            .IsRequired()
+            .HasDefaultValueSql("now()");
+
+        // Updated at — auto-set on insert and update
+        builder.Property(a => a.UpdatedAt)
+            .HasColumnName("updated_at")
+            .HasColumnType("timestamptz")
+            .IsRequired()
+            .HasDefaultValueSql("now()");
+
+        // Indexes
+        // Sessions are looked up by session_key frequently
+        builder.HasIndex(a => a.SessionKey)
+            .HasDatabaseName("ix_agents_session_key")
+            .IsUnique();
+
+        // Agents are filtered by channel for channel-specific queries
+        builder.HasIndex(a => a.Channel)
+            .HasDatabaseName("ix_agents_channel");
+
+        // Agents are filtered by status for fleet health monitoring
+        builder.HasIndex(a => a.Status)
+            .HasDatabaseName("ix_agents_status");
+
+        // Check constraint: progress must be 0–100 if present
+        builder.ToTable(t => t.HasCheckConstraint("ck_agents_progress_range", "progress IS NULL OR (progress >= 0 AND progress <= 100)"));
+    }
+}

backend/ControlCenter.Api.csproj

@@ -0,0 +1,18 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.14" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.4">
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+      <PrivateAssets>all</PrivateAssets>
+    </PackageReference>
+    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
+  </ItemGroup>
+
+</Project>

backend/ControlCenter.Api.http

@@ -0,0 +1,6 @@
+@ControlCenter.Api_HostAddress = http://localhost:5178
+
+GET {{ControlCenter.Api_HostAddress}}/weatherforecast/
+Accept: application/json
+
+###

backend/Data/AppDbContext.cs

@@ -0,0 +1,29 @@
+using ControlCenter.Api.Configurations;
+using ControlCenter.Api.Entities;
+using Microsoft.EntityFrameworkCore;
+
+namespace ControlCenter.Api.Data;
+
+/// <summary>
+/// EF Core DbContext for the Control Center database.
+/// All table and column names use snake_case via explicit HasColumnName configuration.
+/// </summary>
+public class AppDbContext : DbContext
+{
+    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
+
+    public DbSet<Agent> Agents => Set<Agent>();
+
+    protected override void OnModelCreating(ModelBuilder modelBuilder)
+    {
+        // Apply all entity type configurations from the Configurations namespace
+        modelBuilder.ApplyConfigurationsFromAssembly(typeof(AgentConfiguration).Assembly);
+
+        // Map the AgentStatus enum to a PostgreSQL enum type named "agent_status"
+        // This must be called after ApplyConfigurations to ensure the model is built
+        // before the enum mapping is applied.
+        modelBuilder.HasPostgresEnum<AgentStatus>();
+
+        base.OnModelCreating(modelBuilder);
+    }
+}

backend/Data/AppDbContextFactory.cs

@@ -0,0 +1,27 @@
+using Microsoft.EntityFrameworkCore;
+using ControlCenter.Api.Entities;
+
+namespace ControlCenter.Api.Data;
+
+/// <summary>
+/// Design-time factory for AppDbContext, used by EF Core tools (dotnet ef)
+/// to create migrations without requiring a running application.
+/// </summary>
+public class AppDbContextFactory : Microsoft.EntityFrameworkCore.Design.IDesignTimeDbContextFactory<AppDbContext>
+{
+    public AppDbContext CreateDbContext(string[] args)
+    {
+        var optionsBuilder = new DbContextOptionsBuilder<AppDbContext>();
+
+        // Connection string for design-time operations (migrations).
+        // In production, this comes from appsettings / environment variables.
+        var connectionString = "Host=localhost;Database=control_center;Username=postgres;Password=postgres";
+
+        optionsBuilder.UseNpgsql(connectionString, npgsqlOptions =>
+        {
+            npgsqlOptions.MigrationsAssembly(typeof(AppDbContext).Assembly.FullName);
+        });
+
+        return new AppDbContext(optionsBuilder.Options);
+    }
+}

backend/Entities/Agent.cs

@@ -0,0 +1,59 @@
+namespace ControlCenter.Api.Entities;
+
+/// <summary>
+/// Represents an agent's current state in the Control Center.
+/// Each row tracks one agent session's status, task, and activity.
+/// </summary>
+public class Agent
+{
+    /// <summary>
+    /// Primary key — UUID generated on insert.
+    /// </summary>
+    public Guid Id { get; set; }
+
+    /// <summary>
+    /// Current operational status of the agent.
+    /// Stored as an enum in PostgreSQL via Npgsql.
+    /// </summary>
+    public AgentStatus Status { get; set; } = AgentStatus.Idle;
+
+    /// <summary>
+    /// Description of the agent's current task, if any.
+    /// Nullable — not all agents have an active task.
+    /// </summary>
+    public string? Task { get; set; }
+
+    /// <summary>
+    /// Task progress percentage (0–100).
+    /// Nullable — progress is only meaningful when an agent has a trackable task.
+    /// </summary>
+    public int? Progress { get; set; }
+
+    /// <summary>
+    /// Full session key, e.g. "agent:otto:telegram:direct:8787451565".
+    /// Not null — every agent row must be associated with a session.
+    /// </summary>
+    public string SessionKey { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Communication channel the agent is operating on, e.g. "telegram", "discord", "slack".
+    /// Not null — every agent session operates on exactly one channel.
+    /// </summary>
+    public string Channel { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Timestamp of the agent's last activity.
+    /// Default: current UTC timestamp on insert.
+    /// </summary>
+    public DateTime LastActivity { get; set; } = DateTime.UtcNow;
+
+    /// <summary>
+    /// Row creation timestamp. Set automatically on insert.
+    /// </summary>
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+
+    /// <summary>
+    /// Row last-update timestamp. Updated automatically on any modification.
+    /// </summary>
+    public DateTime UpdatedAt { get; set; } = DateTime.UtcNow;
+}

backend/Entities/AgentStatus.cs

@@ -0,0 +1,13 @@
+namespace ControlCenter.Api.Entities;
+
+/// <summary>
+/// Agent operational status enum.
+/// Maps to the agent_status enum type in PostgreSQL.
+/// </summary>
+public enum AgentStatus
+{
+    Active = 0,
+    Idle = 1,
+    Thinking = 2,
+    Error = 3
+}

backend/Migrations/20260426101703_CreateAgentsTable.Designer.cs

@@ -0,0 +1,94 @@
+// <auto-generated />
+using System;
+using ControlCenter.Api.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace ControlCenter.Api.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20260426101703_CreateAgentsTable")]
+    partial class CreateAgentsTable
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.4")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.HasPostgresEnum(modelBuilder, "agent_status", new[] { "active", "idle", "thinking", "error" });
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("ControlCenter.Api.Entities.Agent", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid")
+                        .HasColumnName("id");
+
+                    b.Property<string>("Channel")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("channel");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("created_at")
+                        .HasDefaultValueSql("now()");
+
+                    b.Property<DateTime>("LastActivity")
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("last_activity");
+
+                    b.Property<int?>("Progress")
+                        .HasColumnType("integer")
+                        .HasColumnName("progress");
+
+                    b.Property<string>("SessionKey")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("session_key");
+
+                    b.Property<int>("Status")
+                        .HasColumnType("agent_status")
+                        .HasColumnName("status");
+
+                    b.Property<string>("Task")
+                        .HasColumnType("text")
+                        .HasColumnName("task");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("updated_at")
+                        .HasDefaultValueSql("now()");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Channel")
+                        .HasDatabaseName("ix_agents_channel");
+
+                    b.HasIndex("SessionKey")
+                        .IsUnique()
+                        .HasDatabaseName("ix_agents_session_key");
+
+                    b.HasIndex("Status")
+                        .HasDatabaseName("ix_agents_status");
+
+                    b.ToTable("agents", null, t =>
+                        {
+                            t.HasCheckConstraint("ck_agents_progress_range", "progress IS NULL OR (progress >= 0 AND progress <= 100)");
+                        });
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

backend/Migrations/20260426101703_CreateAgentsTable.cs

@@ -0,0 +1,61 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace ControlCenter.Api.Migrations
+{
+    /// <inheritdoc />
+    public partial class CreateAgentsTable : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AlterDatabase()
+                .Annotation("Npgsql:Enum:agent_status", "active,idle,thinking,error");
+
+            migrationBuilder.CreateTable(
+                name: "agents",
+                columns: table => new
+                {
+                    id = table.Column<Guid>(type: "uuid", nullable: false),
+                    status = table.Column<int>(type: "agent_status", nullable: false),
+                    task = table.Column<string>(type: "text", nullable: true),
+                    progress = table.Column<int>(type: "integer", nullable: true),
+                    session_key = table.Column<string>(type: "text", nullable: false),
+                    channel = table.Column<string>(type: "text", nullable: false),
+                    last_activity = table.Column<DateTime>(type: "timestamptz", nullable: false),
+                    created_at = table.Column<DateTime>(type: "timestamptz", nullable: false, defaultValueSql: "now()"),
+                    updated_at = table.Column<DateTime>(type: "timestamptz", nullable: false, defaultValueSql: "now()")
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_agents", x => x.id);
+                    table.CheckConstraint("ck_agents_progress_range", "progress IS NULL OR (progress >= 0 AND progress <= 100)");
+                });
+
+            migrationBuilder.CreateIndex(
+                name: "ix_agents_channel",
+                table: "agents",
+                column: "channel");
+
+            migrationBuilder.CreateIndex(
+                name: "ix_agents_session_key",
+                table: "agents",
+                column: "session_key",
+                unique: true);
+
+            migrationBuilder.CreateIndex(
+                name: "ix_agents_status",
+                table: "agents",
+                column: "status");
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "agents");
+        }
+    }
+}

backend/Migrations/AppDbContextModelSnapshot.cs

@@ -0,0 +1,91 @@
+// <auto-generated />
+using System;
+using ControlCenter.Api.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace ControlCenter.Api.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    partial class AppDbContextModelSnapshot : ModelSnapshot
+    {
+        protected override void BuildModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.4")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.HasPostgresEnum(modelBuilder, "agent_status", new[] { "active", "idle", "thinking", "error" });
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("ControlCenter.Api.Entities.Agent", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid")
+                        .HasColumnName("id");
+
+                    b.Property<string>("Channel")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("channel");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("created_at")
+                        .HasDefaultValueSql("now()");
+
+                    b.Property<DateTime>("LastActivity")
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("last_activity");
+
+                    b.Property<int?>("Progress")
+                        .HasColumnType("integer")
+                        .HasColumnName("progress");
+
+                    b.Property<string>("SessionKey")
+                        .IsRequired()
+                        .HasColumnType("text")
+                        .HasColumnName("session_key");
+
+                    b.Property<int>("Status")
+                        .HasColumnType("agent_status")
+                        .HasColumnName("status");
+
+                    b.Property<string>("Task")
+                        .HasColumnType("text")
+                        .HasColumnName("task");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("timestamptz")
+                        .HasColumnName("updated_at")
+                        .HasDefaultValueSql("now()");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Channel")
+                        .HasDatabaseName("ix_agents_channel");
+
+                    b.HasIndex("SessionKey")
+                        .IsUnique()
+                        .HasDatabaseName("ix_agents_session_key");
+
+                    b.HasIndex("Status")
+                        .HasDatabaseName("ix_agents_status");
+
+                    b.ToTable("agents", null, t =>
+                        {
+                            t.HasCheckConstraint("ck_agents_progress_range", "progress IS NULL OR (progress >= 0 AND progress <= 100)");
+                        });
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

backend/Program.cs

@@ -0,0 +1,31 @@
+using ControlCenter.Api.Data;
+using Microsoft.EntityFrameworkCore;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddOpenApi();
+
+// Register DbContext with PostgreSQL
+builder.Services.AddDbContext<AppDbContext>(options =>
+{
+    var connectionString = builder.Configuration.GetConnectionString("DefaultConnection")
+        ?? "Host=localhost;Database=control_center;Username=postgres;Password=postgres";
+
+    options.UseNpgsql(connectionString, npgsqlOptions =>
+    {
+        npgsqlOptions.MigrationsAssembly(typeof(AppDbContext).Assembly.FullName);
+    });
+});
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (app.Environment.IsDevelopment())
+{
+    app.MapOpenApi();
+}
+
+app.UseHttpsRedirection();
+
+app.Run();

backend/Properties/launchSettings.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "http://localhost:5178",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "applicationUrl": "https://localhost:7041;http://localhost:5178",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

backend/appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

backend/appsettings.json

@@ -0,0 +1,12 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "ConnectionStrings": {
+    "DefaultConnection": "Host=localhost;Database=control_center;Username=postgres;Password=postgres"
+  }
+}

frontend/src/app/app.routes.ts

@@ -5,7 +5,6 @@ import { ProjectsPageComponent } from './pages/projects/projects-page.component'
 import { SessionsPageComponent } from './pages/sessions/sessions-page.component';
 import { LogsPageComponent } from './pages/logs/logs-page.component';
 import { SettingsPageComponent } from './pages/settings/settings-page.component';
-import { BreakroomPageComponent } from './pages/breakroom/breakroom-page.component';
 
 export const routes: Routes = [
   {
@@ -18,7 +17,6 @@ export const routes: Routes = [
       { path: 'sessions', component: SessionsPageComponent },
       { path: 'logs', component: LogsPageComponent },
       { path: 'settings', component: SettingsPageComponent },
-      { path: 'breakroom', component: BreakroomPageComponent },
     ],
   },
 ];

frontend/src/app/components/minion/minion.component.html

@@ -1,120 +0,0 @@
-<!-- ============================================================================
-  Minion Component Template — 16-bit Breakroom Minion
-  Per CUB-60: Minion State & Animation System
-  ============================================================================ -->
-
-<div
-  class="minion"
-  [ngClass]="[stateClass(), sideClass()]"
-  [style.--desk-index]="deskPosition()"
-  [attr.aria-label]="displayLabel() + ' — ' + stateLabel()"
-  role="img"
->
-  <!-- Progress bar (only shown when working) -->
-  @if (showProgress()) {
-    <div class="minion__progress-bar">
-      <mat-progress-bar
-        mode="determinate"
-        [value]="currentProgress()"
-        [attr.aria-label]="'Task progress: ' + currentProgress() + '%'"
-      ></mat-progress-bar>
-    </div>
-  }
-
-  <!-- Name label above the minion -->
-  <div class="minion__label">{{ displayLabel() }}</div>
-
-  <!-- Minion sprite container -->
-  <div
-    class="minion__sprite"
-    (animationend)="onAnimationEnd($event)"
-  >
-    <!-- Idle state: banana-eating / TV-watching minion -->
-    @if (currentState() === 'idle') {
-      <div class="minion__character minion__character--idle">
-        <div class="minion__body">
-          <div class="minion__head">
-            <div class="minion__eye minion__eye--left"></div>
-            <div class="minion__eye minion__eye--right"></div>
-            <div class="minion__mouth minion__mouth--smile"></div>
-          </div>
-          <div class="minion__torso"></div>
-          <div class="minion__arm minion__arm--left minion__arm--eating"></div>
-          <div class="minion__arm minion__arm--right"></div>
-          <div class="minion__leg minion__leg--left"></div>
-          <div class="minion__leg minion__leg--right"></div>
-        </div>
-        <!-- Banana in hand -->
-        <div class="minion__banana minion__banana--idle"></div>
-      </div>
-    }
-
-    <!-- Walking state: minion walking to desk -->
-    @if (currentState() === 'walking') {
-      <div class="minion__character minion__character--walking">
-        <div class="minion__body">
-          <div class="minion__head">
-            <div class="minion__eye minion__eye--left"></div>
-            <div class="minion__eye minion__eye--right"></div>
-            <div class="minion__mouth minion__mouth--determined"></div>
-          </div>
-          <div class="minion__torso"></div>
-          <div class="minion__arm minion__arm--left minion__arm--swing"></div>
-          <div class="minion__arm minion__arm--right minion__arm--swing minion__arm--swing-alt"></div>
-          <div class="minion__leg minion__leg--left minion__leg--walk"></div>
-          <div class="minion__leg minion__leg--right minion__leg--walk minion__leg--walk-alt"></div>
-        </div>
-      </div>
-    }
-
-    <!-- Working state: minion at desk typing -->
-    @if (currentState() === 'working') {
-      <div class="minion__character minion__character--working">
-        <div class="minion__body">
-          <div class="minion__head">
-            <div class="minion__eye minion__eye--left minion__eye--focused"></div>
-            <div class="minion__eye minion__eye--right minion__eye--focused"></div>
-            <div class="minion__mouth minion__mouth--focused"></div>
-          </div>
-          <div class="minion__torso"></div>
-          <div class="minion__arm minion__arm--left minion__arm--typing"></div>
-          <div class="minion__arm minion__arm--right minion__arm--typing minion__arm--typing-alt"></div>
-        </div>
-        <!-- Laptop -->
-        <div class="minion__laptop">
-          <div class="minion__laptop-screen">
-            <div class="minion__laptop-code minion__laptop-code--1"></div>
-            <div class="minion__laptop-code minion__laptop-code--2"></div>
-            <div class="minion__laptop-code minion__laptop-code--3"></div>
-          </div>
-          <div class="minion__laptop-base"></div>
-        </div>
-      </div>
-    }
-
-    <!-- Returning state: minion walking back to breakroom -->
-    @if (currentState() === 'returning') {
-      <div class="minion__character minion__character--returning">
-        <div class="minion__body">
-          <div class="minion__head">
-            <div class="minion__eye minion__eye--left"></div>
-            <div class="minion__eye minion__eye--right"></div>
-            <div class="minion__mouth minion__mouth--happy"></div>
-          </div>
-          <div class="minion__torso"></div>
-          <div class="minion__arm minion__arm--left minion__arm--swing minion__arm--swing-alt"></div>
-          <div class="minion__arm minion__arm--right minion__arm--swing"></div>
-          <div class="minion__leg minion__leg--left minion__leg--walk minion__leg--walk-alt"></div>
-          <div class="minion__leg minion__leg--right minion__leg--walk"></div>
-        </div>
-        <!-- Banana (excited to be back!) -->
-        <div class="minion__banana minion__banana--carried"></div>
-      </div>
-    }
-  </div>
-
-  <!-- Task description (shown when working) -->
-  @if (currentState() === 'working' && currentTaskLabel()) {
-    <div class="minion__task-label">{{ currentTaskLabel() }}</div>
-  }
-</div>

frontend/src/app/components/minion/minion.component.scss

@@ -1,747 +0,0 @@
-// ============================================================================
-// Minion Component Styles — 16-bit Breakroom Animation System
-// Per CUB-60: Minion State & Animation System
-// ============================================================================
-
-// ---------------------------------------------------------------------------
-// Pixel Art Scale & Dimensions
-// ---------------------------------------------------------------------------
-$pixel: 4px; // Base pixel unit for 16-bit aesthetic
-$minion-width: 48px;
-$minion-height: 64px;
-$head-size: 24px;
-$body-width: 32px;
-$body-height: 24px;
-$leg-width: 8px;
-$leg-height: 16px;
-$arm-width: 6px;
-$arm-height: 16px;
-
-// ---------------------------------------------------------------------------
-// Colors — Retro Palette
-// ---------------------------------------------------------------------------
-$minion-skin: #FFD93D;
-$minion-skin-shadow: #E6B800;
-$minion-overalls: #4169E1;
-$minion-overalls-shadow: #2E4FA0;
-$minion-goggle: #C0C0C0;
-$minion-goggle-strap: #333333;
-$minion-eye: #FFFFFF;
-$minion-pupil: #1A1A1A;
-$minion-mouth: #8B0000;
-$minion-banana: #FFE135;
-$minion-banana-shadow: #DAA520;
-$minion-laptop: #2D2D2D;
-$minion-laptop-screen: #0A1628;
-$minion-laptop-code: #38BDF8;
-
-$walk-duration: 2s;
-$type-duration: 0.4s;
-$eat-duration: 1.2s;
-$return-duration: 2s;
-
-// ---------------------------------------------------------------------------
-// Keyframe Animations
-// ---------------------------------------------------------------------------
-
-// Walking animation — bounce + translate right
-@keyframes minionWalkRight {
-  0% {
-    transform: translateX(0) translateY(0);
-  }
-  12.5% {
-    transform: translateX(12.5%) translateY(-3px);
-  }
-  25% {
-    transform: translateX(25%) translateY(0);
-  }
-  37.5% {
-    transform: translateX(37.5%) translateY(-3px);
-  }
-  50% {
-    transform: translateX(50%) translateY(0);
-  }
-  62.5% {
-    transform: translateX(62.5%) translateY(-3px);
-  }
-  75% {
-    transform: translateX(75%) translateY(0);
-  }
-  87.5% {
-    transform: translateX(87.5%) translateY(-3px);
-  }
-  100% {
-    transform: translateX(100%) translateY(0);
-  }
-}
-
-// Returning animation — bounce + translate left
-@keyframes minionWalkLeft {
-  0% {
-    transform: translateX(0) translateY(0);
-  }
-  12.5% {
-    transform: translateX(-12.5%) translateY(-3px);
-  }
-  25% {
-    transform: translateX(-25%) translateY(0);
-  }
-  37.5% {
-    transform: translateX(-37.5%) translateY(-3px);
-  }
-  50% {
-    transform: translateX(-50%) translateY(0);
-  }
-  62.5% {
-    transform: translateX(-62.5%) translateY(-3px);
-  }
-  75% {
-    transform: translateX(-75%) translateY(0);
-  }
-  87.5% {
-    transform: translateX(-87.5%) translateY(-3px);
-  }
-  100% {
-    transform: translateX(-100%) translateY(0);
-  }
-}
-
-// Typing animation — alternate arm bob
-@keyframes minionType {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-2px);
-  }
-}
-
-// Arm swing during walking
-@keyframes armSwing {
-  0%, 100% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(25deg);
-  }
-  75% {
-    transform: rotate(-25deg);
-  }
-}
-
-// Alternate arm swing (opposite phase)
-@keyframes armSwingAlt {
-  0%, 100% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(-25deg);
-  }
-  75% {
-    transform: rotate(25deg);
-  }
-}
-
-// Leg walk cycle
-@keyframes legWalk {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-4px);
-  }
-}
-
-// Alternate leg walk cycle
-@keyframes legWalkAlt {
-  0%, 100% {
-    transform: translateY(-4px);
-  }
-  50% {
-    transform: translateY(0);
-  }
-}
-
-// Banana eating — arm to mouth bob
-@keyframes bananaEat {
-  0%, 100% {
-    transform: rotate(-15deg) translateY(0);
-  }
-  50% {
-    transform: rotate(-15deg) translateY(-4px);
-  }
-}
-
-// Mouth chewing
-@keyframes mouthChew {
-  0%, 40%, 100% {
-    transform: scaleY(1);
-  }
-  20% {
-    transform: scaleY(0.6);
-  }
-}
-
-// Happy mouth (returning)
-@keyframes mouthHappy {
-  0%, 100% {
-    transform: scaleY(1);
-  }
-  50% {
-    transform: scaleY(1.15);
-  }
-}
-
-// Laptop code blink
-@keyframes codeBlink {
-  0%, 40%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-  }
-}
-
-// Determined face blink
-@keyframes eyeBlink {
-  0%, 90%, 100% {
-    transform: scaleY(1);
-  }
-  95% {
-    transform: scaleY(0.1);
-  }
-}
-
-// Idle float (subtle bounce)
-@keyframes idleFloat {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-2px);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Minion Root Container
-// ---------------------------------------------------------------------------
-.minion {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  width: 80px;
-  image-rendering: pixelated;
-}
-
-// ---------------------------------------------------------------------------
-// Progress Bar (above head)
-// ---------------------------------------------------------------------------
-.minion__progress-bar {
-  width: 60px;
-  margin-bottom: 4px;
-
-  .mat-mdc-progress-bar {
-    --mdc-linear-progress-active-indicator-color: var(--status-active);
-    --mdc-linear-progress-track-color: var(--cc-surface-container-high);
-    height: 4px;
-    border-radius: 2px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Name Label
-// ---------------------------------------------------------------------------
-.minion__label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 2px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: 80px;
-  text-align: center;
-}
-
-// ---------------------------------------------------------------------------
-// Sprite Container
-// ---------------------------------------------------------------------------
-.minion__sprite {
-  position: relative;
-  width: $minion-width;
-  height: $minion-height;
-  overflow: visible;
-}
-
-// ---------------------------------------------------------------------------
-// Character Base
-// ---------------------------------------------------------------------------
-.minion__character {
-  position: absolute;
-  width: $minion-width;
-  height: $minion-height;
-}
-
-// ---------------------------------------------------------------------------
-// Idle State — Banana eating, gentle bounce
-// ---------------------------------------------------------------------------
-.minion__character--idle {
-  animation: idleFloat 3s ease-in-out infinite;
-
-  .minion__body {
-    animation: idleFloat 3s ease-in-out infinite;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Walking State — Move right to desk
-// ---------------------------------------------------------------------------
-.minion__character--walking {
-  animation: minionWalkRight $walk-duration ease-in-out forwards;
-}
-
-// ---------------------------------------------------------------------------
-// Working State — At desk, typing
-// ---------------------------------------------------------------------------
-.minion__character--working {
-  // No movement animation — static at desk
-}
-
-// ---------------------------------------------------------------------------
-// Returning State — Move left back to breakroom
-// ---------------------------------------------------------------------------
-.minion__character--returning {
-  animation: minionWalkLeft $return-duration ease-in-out forwards;
-}
-
-// ---------------------------------------------------------------------------
-// Body Parts — 16-bit Pixel Art
-// ---------------------------------------------------------------------------
-.minion__body {
-  position: relative;
-  width: $minion-width;
-  height: $minion-height;
-}
-
-// Head — yellow capsule with goggles
-.minion__head {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: $head-size;
-  height: $head-size;
-  background-color: $minion-skin;
-  border-radius: 50% 50% 40% 40%;
-  border: 2px solid $minion-skin-shadow;
-  overflow: hidden;
-  z-index: 2;
-
-  // Goggle strap
-  &::before {
-    content: '';
-    position: absolute;
-    top: 30%;
-    left: -2px;
-    right: -2px;
-    height: 10px;
-    background-color: $minion-goggle-strap;
-    border-radius: 2px;
-  }
-}
-
-// Eyes (inside goggle area)
-.minion__eye {
-  position: absolute;
-  top: 35%;
-  width: 8px;
-  height: 8px;
-  background-color: $minion-eye;
-  border-radius: 50%;
-  border: 1px solid #666;
-  z-index: 3;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 4px;
-    height: 4px;
-    background-color: $minion-pupil;
-    border-radius: 50%;
-  }
-
-  &--left {
-    left: 3px;
-  }
-
-  &--right {
-    right: 3px;
-  }
-
-  // Focused eyes (squint) for working state
-  &--focused {
-    height: 6px;
-    animation: eyeBlink 4s step-end infinite;
-  }
-}
-
-// Mouth expressions
-.minion__mouth {
-  position: absolute;
-  bottom: 4px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 8px;
-  height: 4px;
-  border-radius: 0 0 4px 4px;
-  z-index: 3;
-
-  &--smile {
-    background-color: $minion-mouth;
-    border-radius: 0 0 50% 50%;
-    animation: mouthChew $eat-duration ease-in-out infinite;
-  }
-
-  &--determined {
-    background-color: $minion-mouth;
-    width: 10px;
-    height: 3px;
-    border-radius: 0;
-  }
-
-  &--focused {
-    background-color: $minion-mouth;
-    width: 6px;
-    height: 3px;
-    border-radius: 0;
-  }
-
-  &--happy {
-    background-color: $minion-mouth;
-    width: 10px;
-    height: 5px;
-    border-radius: 0 0 50% 50%;
-    animation: mouthHappy 1.5s ease-in-out infinite;
-  }
-}
-
-// Torso / Overalls
-.minion__torso {
-  position: absolute;
-  top: $head-size - 4px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: $body-width;
-  height: $body-height;
-  background-color: $minion-overalls;
-  border: 2px solid $minion-overalls-shadow;
-  border-radius: 4px 4px 2px 2px;
-  z-index: 1;
-
-  // Overall strap left
-  &::before {
-    content: '';
-    position: absolute;
-    top: -4px;
-    left: 6px;
-    width: 3px;
-    height: 8px;
-    background-color: $minion-overalls;
-    border-radius: 1px;
-  }
-
-  // Overall strap right
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4px;
-    right: 6px;
-    width: 3px;
-    height: 8px;
-    background-color: $minion-overalls;
-    border-radius: 1px;
-  }
-}
-
-// Arms
-.minion__arm {
-  position: absolute;
-  top: $head-size;
-  width: $arm-width;
-  height: $arm-height;
-  background-color: $minion-skin;
-  border: 1px solid $minion-skin-shadow;
-  border-radius: 3px;
-  z-index: 0;
-  transform-origin: top center;
-
-  &--left {
-    left: 2px;
-  }
-
-  &--right {
-    right: 2px;
-  }
-
-  // Arm swing during walking
-  &--swing {
-    animation: armSwing $walk-duration * 0.5 ease-in-out infinite;
-  }
-
-  &--swing-alt {
-    animation: armSwingAlt $walk-duration * 0.5 ease-in-out infinite;
-  }
-
-  // Arm raised for eating banana
-  &--eating {
-    transform: rotate(-15deg);
-    animation: bananaEat $eat-duration ease-in-out infinite;
-  }
-
-  // Arms typing on laptop
-  &--typing {
-    transform: rotate(10deg) translateY(2px);
-
-    &.minion__arm--typing-alt {
-      transform: rotate(-10deg) translateY(2px);
-      animation: minionType $type-duration ease-in-out infinite;
-    }
-  }
-}
-
-// Legs
-.minion__leg {
-  position: absolute;
-  bottom: 0;
-  width: $leg-width;
-  height: $leg-height;
-  background-color: $minion-overalls;
-  border: 1px solid $minion-overalls-shadow;
-  border-radius: 2px 2px 3px 3px;
-  z-index: 0;
-
-  &--left {
-    left: calc(50% - #{$leg-width} - 2px);
-  }
-
-  &--right {
-    right: calc(50% - #{$leg-width} - 2px);
-  }
-
-  // Walking cycle
-  &--walk {
-    animation: legWalk $walk-duration * 0.25 ease-in-out infinite;
-
-    &.minion__leg--walk-alt {
-      animation: legWalkAlt $walk-duration * 0.25 ease-in-out infinite;
-    }
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Banana
-// ---------------------------------------------------------------------------
-.minion__banana {
-  position: absolute;
-  width: 8px;
-  height: 5px;
-  z-index: 4;
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 8px;
-    height: 5px;
-    background-color: $minion-banana;
-    border: 1px solid $minion-banana-shadow;
-    border-radius: 50% 50% 20% 20%;
-  }
-
-  // Banana in hand during idle
-  &--idle {
-    top: $head-size - 2px;
-    right: 0;
-  }
-
-  // Banana carried while returning
-  &--carried {
-    top: 8px;
-    left: -2px;
-    transform: rotate(20deg);
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Laptop (working state)
-// ---------------------------------------------------------------------------
-.minion__laptop {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 40px;
-  z-index: 2;
-}
-
-.minion__laptop-screen {
-  width: 36px;
-  height: 20px;
-  background-color: $minion-laptop-screen;
-  border: 2px solid $minion-laptop;
-  border-radius: 3px 3px 0 0;
-  margin: 0 auto;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2px;
-  padding: 3px;
-}
-
-.minion__laptop-code {
-  height: 2px;
-  background-color: $minion-laptop-code;
-  border-radius: 1px;
-  opacity: 0.8;
-
-  &--1 {
-    width: 80%;
-    animation: codeBlink 2s ease-in-out infinite;
-  }
-
-  &--2 {
-    width: 60%;
-    animation: codeBlink 2s ease-in-out infinite 0.3s;
-  }
-
-  &--3 {
-    width: 70%;
-    animation: codeBlink 2s ease-in-out infinite 0.6s;
-  }
-}
-
-.minion__laptop-base {
-  width: 40px;
-  height: 3px;
-  background-color: $minion-laptop;
-  border-radius: 0 0 2px 2px;
-  margin: 0 auto;
-}
-
-// ---------------------------------------------------------------------------
-// Task Label (below minion)
-// ---------------------------------------------------------------------------
-.minion__task-label {
-  font-size: 9px;
-  color: var(--cc-on-surface-variant);
-  text-align: center;
-  max-width: 80px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-top: 2px;
-  font-family: var(--cc-font-mono);
-}
-
-// ---------------------------------------------------------------------------
-// Side-specific adjustments
-// ---------------------------------------------------------------------------
-// Dev minions face right (walk right to desk)
-.minion--dev .minion__character--walking {
-  animation-name: minionWalkRight;
-}
-
-// Business minions face left (walk left to desk)
-.minion--business .minion__character--walking {
-  animation-name: minionWalkRight;
-  transform: scaleX(-1);
-}
-
-// Returning always walks back toward breakroom
-.minion--dev .minion__character--returning {
-  animation-name: minionWalkLeft;
-}
-
-.minion--business .minion__character--returning {
-  animation-name: minionWalkLeft;
-  transform: scaleX(-1);
-}
-
-// ---------------------------------------------------------------------------
-// Walking sprite shows walking animation
-// ---------------------------------------------------------------------------
-.minion--walking .minion__sprite {
-  animation: minionWalkRight $walk-duration ease-in-out forwards;
-}
-
-.minion--returning .minion__sprite {
-  animation: minionWalkLeft $return-duration ease-in-out forwards;
-}
-
-// ---------------------------------------------------------------------------
-// Accessibility: Reduced Motion
-// ---------------------------------------------------------------------------
-@media (prefers-reduced-motion: reduce) {
-  .minion__character--idle,
-  .minion__character--walking,
-  .minion__character--returning,
-  .minion--walking .minion__sprite,
-  .minion--returning .minion__sprite {
-    animation: none;
-  }
-
-  .minion__arm--swing,
-  .minion__arm--swing-alt,
-  .minion__arm--eating,
-  .minion__arm--typing.minion__arm--typing-alt,
-  .minion__leg--walk,
-  .minion__leg--walk-alt,
-  .minion__mouth--smile,
-  .minion__mouth--happy,
-  .minion__eye--focused,
-  .minion__laptop-code--1,
-  .minion__laptop-code--2,
-  .minion__laptop-code--3 {
-    animation: none;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Touch-friendly sizing
-// ---------------------------------------------------------------------------
-.minion {
-  min-width: 80px;
-  min-height: 100px;
-
-  // Ensure touch targets are at least 48px
-  .minion__sprite {
-    min-width: 48px;
-    min-height: 48px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive: Smaller on mobile
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  $mobile-scale: 0.85;
-
-  .minion {
-    width: 68px;
-  }
-
-  .minion__sprite {
-    transform: scale($mobile-scale);
-    transform-origin: top center;
-  }
-
-  .minion__label {
-    font-size: 10px;
-  }
-}

frontend/src/app/components/minion/minion.component.ts

@@ -1,182 +0,0 @@
-// ============================================================================
-// Minion Component — 16-bit Breakroom Minion with State Animations
-// Per CUB-60: Minion State & Animation System
-// ============================================================================
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnDestroy,
-  OnInit,
-  input,
-  output,
-  signal,
-  computed,
-  effect,
-  inject,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MinionState, MinionSide } from '../../models/minion.model';
-import { MinionStateService } from '../../services/minion-state.service';
-
-/**
- * MinionComponent renders a single 16-bit minion character with four visual states:
- * - idle:      In breakroom — eating bananas, watching TV
- * - walking:   Moving from breakroom to desk (2s animation, then auto → working)
- * - working:   At desk — typing on laptop, progress bar overhead
- * - returning: Walking back to breakroom (2s animation, then auto → idle)
- *
- * The component reads its state from MinionStateService and emits events
- * when animations complete so the service can advance the state machine.
- */
-@Component({
-  selector: 'app-minion',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatIconModule,
-    MatProgressBarModule,
-    MatTooltipModule,
-  ],
-  templateUrl: './minion.component.html',
-  styleUrl: './minion.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MinionComponent implements OnInit, OnDestroy {
-  /** Agent name — used to look up state from MinionStateService */
-  readonly agentName = input.required<string>();
-
-  /** Which side of the office: dev or business */
-  readonly side = input<MinionSide>('dev');
-
-  /** Desk index on the assigned side (0-based) */
-  readonly deskIndex = input<number>(0);
-
-  /** Override state (for standalone demo use, otherwise read from service) */
-  readonly state = input<MinionState>('idle');
-
-  /** Override progress (for standalone demo use) */
-  readonly progress = input<number>(0);
-
-  /** Override display name (for standalone demo use) */
-  readonly displayName = input<string>('');
-
-  /** Override task description (for standalone demo use) */
-  readonly currentTask = input<string>('');
-
-  /** Emits when the walking animation completes */
-  readonly walkingComplete = output<string>();
-
-  /** Emits when the returning animation completes */
-  readonly returningComplete = output<string>();
-
-  private readonly minionStateService = inject(MinionStateService);
-
-  /** Track whether to use service data or input data */
-  private readonly useServiceData = signal(false);
-
-  /** Animation state — tracks which animation is active */
-  readonly animationState = signal<MinionState | 'none'>('none');
-
-  /** Computed: current state (from service if available, otherwise input) */
-  readonly currentState = computed<MinionState>(() => {
-    if (this.useServiceData()) {
-      const minion = this.minionStateService.getMinion(this.agentName());
-      return minion?.state ?? this.state();
-    }
-    return this.state();
-  });
-
-  /** Computed: current progress */
-  readonly currentProgress = computed(() => {
-    if (this.useServiceData()) {
-      const minion = this.minionStateService.getMinion(this.agentName());
-      return minion?.progress ?? this.progress();
-    }
-    return this.progress();
-  });
-
-  /** Computed: display name */
-  readonly displayLabel = computed(() => {
-    if (this.useServiceData()) {
-      const minion = this.minionStateService.getMinion(this.agentName());
-      return minion?.displayName ?? this.displayName() ?? this.agentName();
-    }
-    return this.displayName() || this.agentName();
-  });
-
-  /** Computed: current task */
-  readonly currentTaskLabel = computed(() => {
-    if (this.useServiceData()) {
-      const minion = this.minionStateService.getMinion(this.agentName());
-      return minion?.currentTask ?? this.currentTask() ?? '';
-    }
-    return this.currentTask();
-  });
-
-  /** Computed: CSS class based on current state */
-  readonly stateClass = computed(() => `minion--${this.currentState()}`);
-
-  /** Computed: whether to show the progress bar */
-  readonly showProgress = computed(() => this.currentState() === 'working' && this.currentProgress() > 0);
-
-  /** Computed: side class */
-  readonly sideClass = computed(() => `minion--${this.side()}`);
-
-  /** Computed: position style for desk assignment */
-  readonly deskPosition = computed(() => this.deskIndex());
-
-  /** Computed: human-readable state label */
-  readonly stateLabel = computed(() => {
-    const labels: Record<MinionState, string> = {
-      idle: 'On Break',
-      walking: 'Heading to Desk',
-      working: 'Working',
-      returning: 'Returning to Breakroom',
-    };
-    return labels[this.currentState()];
-  });
-
-  ngOnInit(): void {
-    // If the service has data for this agent, use it
-    const minion = this.minionStateService.getMinion(this.agentName());
-    if (minion) {
-      this.useServiceData.set(true);
-    }
-
-    // Sync animation state with current state
-    this.animationState.set(this.currentState());
-  }
-
-  /**
-   * Handle animation end events from CSS animations.
-   * Only fires for walking/returning which have finite durations.
-   */
-  onAnimationEnd(event: AnimationEvent): void {
-    const state = this.currentState();
-
-    if (state === 'walking' && event.animationName === 'minionWalkRight') {
-      this.walkingComplete.emit(this.agentName());
-      // Auto-transition walking → working via service
-      if (this.useServiceData()) {
-        this.minionStateService.onWalkingComplete(this.agentName());
-      }
-      this.animationState.set('working');
-    }
-
-    if (state === 'returning' && event.animationName === 'minionWalkLeft') {
-      this.returningComplete.emit(this.agentName());
-      // Auto-transition returning → idle via service
-      if (this.useServiceData()) {
-        this.minionStateService.onReturningComplete(this.agentName());
-      }
-      this.animationState.set('idle');
-    }
-  }
-
-  ngOnDestroy(): void {
-    // Cleanup handled by service if needed
-  }
-}

frontend/src/app/models/index.ts

@@ -1,3 +1,2 @@
 export * from './agent.model';
-export * from './minion.model';
 export * from './nav.model';

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

@@ -1,81 +0,0 @@
-// ============================================================================
-// Minion State & Animation Types
-// Per CUB-60: Minion State & Animation System
-// ============================================================================
-
-/**
- * The four minion states in the breakroom UI state machine.
- *
- * State transitions:
- *   idle → walking → working → returning → idle
- *
- * idle:     In breakroom — eating bananas, watching TV
- * walking:  Moving from breakroom to desk
- * working:  At desk — typing on laptop, progress bar overhead
- * returning: Walking back to breakroom after task completion
- */
-export type MinionState = 'idle' | 'walking' | 'working' | 'returning';
-
-/**
- * Which side of the office the minion belongs to.
- * Dev minions walk to dev desks, Business minions to business desks.
- */
-export type MinionSide = 'dev' | 'business';
-
-/**
- * Event types that trigger state transitions in the MinionStateService.
- */
-export type MinionEvent = 'spawn' | 'task_complete' | 'task_error' | 'reset';
-
-/**
- * Represents the full state of a single minion in the breakroom.
- */
-export interface MinionData {
-  /** Unique agent name, e.g., "otto", "rex" */
-  agentName: string;
-
-  /** Current minion state */
-  state: MinionState;
-
-  /** Task progress percentage (0–100), only meaningful when state === 'working' */
-  progress: number;
-
-  /** Which side of the office: dev or business */
-  side: MinionSide;
-
-  /** Desk index on the assigned side (0-based) */
-  deskIndex: number;
-
-  /** Display name for the minion, e.g., "Otto" */
-  displayName: string;
-
-  /** Current task description */
-  currentTask?: string;
-
-  /** Timestamp of last state transition */
-  lastTransition: Date;
-}
-
-/**
- * State machine transition map.
- * Defines valid transitions: current state → event → next state.
- */
-export const MINION_TRANSITIONS: Record<MinionState, Partial<Record<MinionEvent, MinionState>>> = {
-  idle: {
-    spawn: 'walking',
-  },
-  walking: {
-    // walking → working happens automatically via animation end
-    task_error: 'idle',
-    reset: 'idle',
-  },
-  working: {
-    task_complete: 'returning',
-    task_error: 'returning',
-    reset: 'idle',
-  },
-  returning: {
-    // returning → idle happens automatically via animation end
-    reset: 'idle',
-  },
-};

frontend/src/app/pages/breakroom/breakroom-page.component.html

@@ -1,136 +0,0 @@
-<!-- ============================================================================
-  Breakroom Page — Demo/Test for Minion State & Animation
-  Per CUB-60: Validation page with spawn/transition/reset controls
-  ============================================================================ -->
-<div class="breakroom">
-  <!-- Breakroom area (idle minions) -->
-  <section class="breakroom__zone breakroom__zone--breakroom">
-    <h2 class="breakroom__zone-title">
-      <mat-icon>weekend</mat-icon>
-      Breakroom
-    </h2>
-    <div class="breakroom__minions breakroom__minions--idle">
-      @for (minion of minions(); track minion.agentName) {
-        @if (minion.state === 'idle') {
-          <app-minion
-            [agentName]="minion.agentName"
-            [side]="minion.side"
-            [deskIndex]="minion.deskIndex"
-            [state]="minion.state"
-            [progress]="minion.progress"
-            [displayName]="minion.displayName"
-          />
-        }
-      }
-    </div>
-  </section>
-
-  <!-- Office area (working desks) -->
-  <section class="breakroom__zone breakroom__zone--office">
-    <div class="breakroom__office-header">
-      <h2 class="breakroom__zone-title">
-        <mat-icon>computer</mat-icon>
-        Office
-      </h2>
-    </div>
-
-    <!-- Dev side -->
-    <div class="breakroom__desk-row">
-      <h3 class="breakroom__desk-label">Dev Desks</h3>
-      <div class="breakroom__desks">
-        @for (minion of minions(); track minion.agentName) {
-          @if (minion.side === 'dev' && (minion.state === 'working' || minion.state === 'walking')) {
-            <div class="breakroom__desk" [style.--desk-index]="minion.deskIndex">
-              <app-minion
-                [agentName]="minion.agentName"
-                [side]="minion.side"
-                [deskIndex]="minion.deskIndex"
-                [state]="minion.state"
-                [progress]="minion.progress"
-                [displayName]="minion.displayName"
-                [currentTask]="minion.currentTask ?? ''"
-              />
-            </div>
-          }
-        }
-      </div>
-    </div>
-
-    <!-- Business side -->
-    <div class="breakroom__desk-row">
-      <h3 class="breakroom__desk-label">Business Desks</h3>
-      <div class="breakroom__desks">
-        @for (minion of minions(); track minion.agentName) {
-          @if (minion.side === 'business' && (minion.state === 'working' || minion.state === 'walking')) {
-            <div class="breakroom__desk" [style.--desk-index]="minion.deskIndex">
-              <app-minion
-                [agentName]="minion.agentName"
-                [side]="minion.side"
-                [deskIndex]="minion.deskIndex"
-                [state]="minion.state"
-                [progress]="minion.progress"
-                [displayName]="minion.displayName"
-              />
-            </div>
-          }
-        }
-      </div>
-    </div>
-  </section>
-
-  <!-- Control panel for testing -->
-  <section class="breakroom__controls">
-    <h2 class="breakroom__zone-title">
-      <mat-icon>gamepad</mat-icon>
-      Controls
-    </h2>
-    <p class="breakroom__controls-hint">Spawn minions and control their state transitions</p>
-
-    <div class="breakroom__button-grid">
-      @for (demo of demoMinions; track demo.agentName) {
-        <div class="breakroom__control-row">
-          <span class="breakroom__agent-name">{{ demo.displayName }}</span>
-
-          @if (!isSpawned(demo.agentName)) {
-            <button mat-raised-button color="primary" (click)="spawnMinion(demo)">
-              <mat-icon>play_arrow</mat-icon>
-              Spawn
-            </button>
-          } @else {
-            <span class="breakroom__state-chip">{{ getStateLabel(demo.agentName) }}</span>
-
-            <button mat-stroked-button
-              [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-              (click)="completeTask(demo.agentName)">
-              <mat-icon>check_circle</mat-icon>
-              Complete
-            </button>
-
-            <button mat-stroked-button
-              [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-              (click)="taskError(demo.agentName)">
-              <mat-icon>error</mat-icon>
-              Error
-            </button>
-
-            <button mat-stroked-button
-              [disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
-              (click)="bumpProgress(demo.agentName)">
-              <mat-icon>trending_up</mat-icon>
-              +15%
-            </button>
-
-            <button mat-stroked-button color="warn" (click)="resetMinion(demo.agentName)">
-              <mat-icon>replay</mat-icon>
-              Reset
-            </button>
-
-            <button mat-icon-button color="warn" (click)="removeMinion(demo.agentName)">
-              <mat-icon>close</mat-icon>
-            </button>
-          }
-        </div>
-      }
-    </div>
-  </section>
-</div>

frontend/src/app/pages/breakroom/breakroom-page.component.scss

@@ -1,209 +0,0 @@
-// ============================================================================
-// Breakroom Page Styles
-// Per CUB-60: Demo/test page for minion state & animation
-// ============================================================================
-
-.breakroom {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: var(--cc-section-padding, 24px);
-  min-height: 100%;
-}
-
-// ---------------------------------------------------------------------------
-// Zone (breakroom or office area)
-// ---------------------------------------------------------------------------
-.breakroom__zone {
-  background-color: var(--cc-surface-container);
-  border-radius: var(--cc-card-border-radius, 16px);
-  padding: var(--cc-card-padding, 20px);
-}
-
-.breakroom__zone-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 16px;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--cc-on-surface);
-
-  .mat-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Breakroom zone (idle minions)
-// ---------------------------------------------------------------------------
-.breakroom__zone--breakroom {
-  background: linear-gradient(
-    135deg,
-    var(--cc-surface-container) 0%,
-    rgba(45, 212, 191, 0.06) 100%
-  );
-  min-height: 120px;
-}
-
-.breakroom__minions--idle {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  justify-content: center;
-  min-height: 80px;
-  align-items: flex-end;
-
-  &:empty::after {
-    content: 'No minions on break 🍌';
-    color: var(--cc-on-surface-variant);
-    font-size: 14px;
-    text-align: center;
-    padding: 20px;
-    display: block;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Office zone (working minions)
-// ---------------------------------------------------------------------------
-.breakroom__zone--office {
-  background: linear-gradient(
-    135deg,
-    var(--cc-surface-container) 0%,
-    rgba(56, 189, 248, 0.06) 100%
-  );
-}
-
-.breakroom__desk-row {
-  margin-bottom: 16px;
-}
-
-.breakroom__desk-label {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--cc-on-surface-variant);
-  margin: 0 0 8px;
-}
-
-.breakroom__desks {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  min-height: 100px;
-  padding: 12px;
-  border: 2px dashed var(--cc-outline);
-  border-radius: 12px;
-  background-color: rgba(0, 0, 0, 0.1);
-  align-items: flex-end;
-
-  &:empty::after {
-    content: 'No minions at their desks 💻';
-    color: var(--cc-on-surface-variant);
-    font-size: 14px;
-    text-align: center;
-    padding: 20px;
-    display: block;
-    width: 100%;
-  }
-}
-
-.breakroom__desk {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  min-width: 90px;
-  min-height: 110px;
-  background-color: var(--cc-surface-container-high);
-  border-radius: 8px;
-  padding: 8px 4px 4px;
-  border: 1px solid var(--cc-outline);
-}
-
-// ---------------------------------------------------------------------------
-// Controls section
-// ---------------------------------------------------------------------------
-.breakroom__controls {
-  background-color: var(--cc-surface-container);
-  border-radius: var(--cc-card-border-radius, 16px);
-  padding: var(--cc-card-padding, 20px);
-}
-
-.breakroom__controls-hint {
-  font-size: 13px;
-  color: var(--cc-on-surface-variant);
-  margin: 0 0 16px;
-}
-
-.breakroom__button-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.breakroom__control-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  padding: 8px 12px;
-  background-color: var(--cc-surface);
-  border-radius: 8px;
-  min-height: 48px;
-}
-
-.breakroom__agent-name {
-  font-weight: 600;
-  font-size: 14px;
-  min-width: 60px;
-  color: var(--cc-on-surface);
-}
-
-.breakroom__state-chip {
-  font-size: 12px;
-  font-family: var(--cc-font-mono);
-  padding: 4px 10px;
-  border-radius: 12px;
-  background-color: var(--cc-surface-container-high);
-  color: var(--cc-on-surface-variant);
-  border: 1px solid var(--cc-outline);
-}
-
-// Button sizing for touch
-.breakroom__control-row .mat-mdc-raised-button,
-.breakroom__control-row .mat-mdc-outlined-button {
-  min-height: 40px;
-  min-width: 48px;
-  font-size: 13px;
-
-  .mat-icon {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    margin-right: 4px;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Responsive
-// ---------------------------------------------------------------------------
-@media (max-width: 599px) {
-  .breakroom {
-    padding: 16px;
-    gap: 16px;
-  }
-
-  .breakroom__control-row {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .breakroom__agent-name {
-    min-width: 50px;
-  }
-}

frontend/src/app/pages/breakroom/breakroom-page.component.ts

@@ -1,102 +0,0 @@
-// ============================================================================
-// Breakroom Page — Demo/Test Page for Minion State & Animation
-// Per CUB-60: Validation page with spawn/transition/reset controls
-// ============================================================================
-import { ChangeDetectionStrategy, Component, inject } 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 { MinionComponent } from '../../components/minion/minion.component';
-import { MinionStateService } from '../../services/minion-state.service';
-import { MinionData } from '../../models/minion.model';
-
-interface DemoMinion {
-  agentName: string;
-  displayName: string;
-  side: 'dev' | 'business';
-  deskIndex: number;
-}
-
-@Component({
-  selector: 'app-breakroom-page',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    MatChipsModule,
-    MinionComponent,
-  ],
-  templateUrl: './breakroom-page.component.html',
-  styleUrl: './breakroom-page.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class BreakroomPageComponent {
-  protected readonly minionStateService = inject(MinionStateService);
-
-  /** Predefined demo minions */
-  readonly demoMinions: DemoMinion[] = [
-    { agentName: 'otto', displayName: 'Otto', side: 'dev', deskIndex: 0 },
-    { agentName: 'rex', displayName: 'Rex', side: 'dev', deskIndex: 1 },
-    { agentName: 'dex', displayName: 'Dex', side: 'dev', deskIndex: 2 },
-    { agentName: 'hex', displayName: 'Hex', side: 'dev', deskIndex: 3 },
-    { agentName: 'pip', displayName: 'Pip', side: 'business', deskIndex: 0 },
-    { agentName: 'nano', displayName: 'Nano', side: 'business', deskIndex: 1 },
-    { agentName: 'flip', displayName: 'Flip', side: 'business', deskIndex: 2 },
-  ];
-
-  /** All minions currently in the state service */
-  readonly minions = this.minionStateService.minionList;
-
-  /** Spawn a demo minion (idle → walking → working) */
-  spawnMinion(demo: DemoMinion): void {
-    this.minionStateService.spawn(demo.agentName, demo.displayName, demo.side, demo.deskIndex);
-  }
-
-  /** Complete a minion's task (working → returning → idle) */
-  completeTask(agentName: string): void {
-    this.minionStateService.completeTask(agentName);
-  }
-
-  /** Simulate a task error (working → returning → idle) */
-  taskError(agentName: string): void {
-    this.minionStateService.taskError(agentName);
-  }
-
-  /** Reset a minion to idle */
-  resetMinion(agentName: string): void {
-    this.minionStateService.resetMinion(agentName);
-  }
-
-  /** Remove a minion entirely */
-  removeMinion(agentName: string): void {
-    this.minionStateService.removeMinion(agentName);
-  }
-
-  /** Update progress (simulate for testing) */
-  bumpProgress(agentName: string): void {
-    const minion = this.minionStateService.getMinion(agentName);
-    if (minion) {
-      this.minionStateService.updateProgress(agentName, Math.min(100, minion.progress + 15));
-    }
-  }
-
-  /** Get state label for a minion */
-  getStateLabel(agentName: string): string {
-    const minion = this.minionStateService.getMinion(agentName);
-    if (!minion) return '—';
-    const labels: Record<string, string> = {
-      idle: '🍌 Idle',
-      walking: '🚶 Walking',
-      working: '💻 Working',
-      returning: '🔙 Returning',
-    };
-    return labels[minion.state] ?? minion.state;
-  }
-
-  /** Check if a minion is spawned */
-  isSpawned(agentName: string): boolean {
-    return !!this.minionStateService.getMinion(agentName);
-  }
-}

frontend/src/app/services/minion-state.service.ts

@@ -1,213 +0,0 @@
-// ============================================================================
-// Minion State Service
-// Per CUB-60: State machine managing minion transitions
-// idle → walking → working → returning → idle
-// ============================================================================
-import { Injectable, signal, computed } from '@angular/core';
-import {
-  MinionData,
-  MinionEvent,
-  MinionState,
-  MINION_TRANSITIONS,
-} from '../models/minion.model';
-
-/**
- * Manages the state machine for all minions in the breakroom.
- *
- * Each minion follows: idle → walking → working → returning → idle
- * Transitions are triggered by events (spawn, task_complete, task_error, reset)
- * or automatically when walking/returning animations complete.
- *
- * Usage:
- *   service.spawn('otto', 'Otto', 'dev', 0);          // idle → walking → working
- *   service.completeTask('otto');                        // working → returning → idle
- *   service.dispatch('otto', 'reset');                   // any → idle
- */
-@Injectable({ providedIn: 'root' })
-export class MinionStateService {
-  /** Internal map of agent name → minion data */
-  private readonly _minions = signal<Map<string, MinionData>>(new Map());
-
-  /** Readonly map of all minions */
-  readonly minions = this._minions.asReadonly();
-
-  /** Computed array of minions sorted by desk position */
-  readonly minionList = computed(() => {
-    const map = this._minions();
-    return Array.from(map.values()).sort((a, b) => {
-      if (a.side !== b.side) return a.side.localeCompare(b.side);
-      return a.deskIndex - b.deskIndex;
-    });
-  });
-
-  /** Get a single minion by agent name */
-  getMinion(agentName: string): MinionData | undefined {
-    return this._minions().get(agentName);
-  }
-
-  /**
-   * Spawn a minion: creates entry in 'idle' state, then immediately
-   * transitions to 'walking' (which auto-transitions to 'working').
-   */
-  spawn(agentName: string, displayName: string, side: 'dev' | 'business', deskIndex: number): void {
-    const minion: MinionData = {
-      agentName,
-      displayName,
-      state: 'idle',
-      progress: 0,
-      side,
-      deskIndex,
-      lastTransition: new Date(),
-    };
-    this._minions.update(map => {
-      const next = new Map(map);
-      next.set(agentName, minion);
-      return next;
-    });
-    // Immediately transition idle → walking
-    this.dispatch(agentName, 'spawn');
-  }
-
-  /**
-   * Dispatch an event to transition a minion's state.
-   * Follows the MINION_TRANSITIONS map. Invalid transitions are ignored.
-   */
-  dispatch(agentName: string, event: MinionEvent): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion) return map;
-
-      const validTransitions = MINION_TRANSITIONS[minion.state];
-      const nextState = validTransitions[event];
-      if (!nextState) return map; // Invalid transition — ignore
-
-      const updated: MinionData = {
-        ...minion,
-        state: nextState,
-        lastTransition: new Date(),
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Complete a task: transitions working → returning.
-   * After returning animation, the minion auto-transitions to idle.
-   */
-  completeTask(agentName: string): void {
-    this.dispatch(agentName, 'task_complete');
-  }
-
-  /**
-   * Report a task error: transitions working → returning (same visual, different reason).
-   * After returning animation, the minion auto-transitions to idle.
-   */
-  taskError(agentName: string): void {
-    this.dispatch(agentName, 'task_error');
-  }
-
-  /**
-   * Called by the MinionComponent when the walking animation completes.
-   * Transitions walking → working and sets initial progress to 0.
-   */
-  onWalkingComplete(agentName: string): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion || minion.state !== 'walking') return map;
-
-      const updated: MinionData = {
-        ...minion,
-        state: 'working',
-        progress: 0,
-        lastTransition: new Date(),
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Called by the MinionComponent when the returning animation completes.
-   * Transitions returning → idle.
-   */
-  onReturningComplete(agentName: string): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion || minion.state !== 'returning') return map;
-
-      const updated: MinionData = {
-        ...minion,
-        state: 'idle',
-        progress: 0,
-        currentTask: undefined,
-        lastTransition: new Date(),
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Update task progress for a working minion.
-   */
-  updateProgress(agentName: string, progress: number): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion || minion.state !== 'working') return map;
-
-      const updated: MinionData = {
-        ...minion,
-        progress: Math.min(100, Math.max(0, progress)),
-        lastTransition: new Date(),
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Update the current task description for a minion.
-   */
-  updateTask(agentName: string, taskDescription: string): void {
-    this._minions.update(map => {
-      const minion = map.get(agentName);
-      if (!minion) return map;
-
-      const updated: MinionData = {
-        ...minion,
-        currentTask: taskDescription,
-      };
-
-      const next = new Map(map);
-      next.set(agentName, updated);
-      return next;
-    });
-  }
-
-  /**
-   * Remove a minion entirely from the state map.
-   */
-  removeMinion(agentName: string): void {
-    this._minions.update(map => {
-      const next = new Map(map);
-      next.delete(agentName);
-      return next;
-    });
-  }
-
-  /**
-   * Reset a minion back to idle state.
-   */
-  resetMinion(agentName: string): void {
-    this.dispatch(agentName, 'reset');
-  }
-}