Merge branch 'dev' into agent/dex/CUB-54-agent-state-repository

Reviewed-on: #24

backend/ControlCenter/Hubs/AgentStatusHub.cs

@@ -37,6 +37,33 @@ public class AgentStatusHub : Hub<IAgentStatusClient>
         _logger = logger;
     }
 
+    /// <summary>
+    /// Broadcasts an agent status update to all connected clients.
+    ///
+    /// <para>
+    /// Any connected client (or server-side caller) can invoke this method
+    /// to push a status update to every subscriber. The DTO is converted to
+    /// an <see cref="AgentStatusUpdate"/> record and relayed through the
+    /// <see cref="IAgentStatusClient.AgentStatusChanged"/> callback.
+    /// </para>
+    /// </summary>
+    /// <param name="update">The agent status update DTO to broadcast.</param>
+    public async Task SendStatusUpdate(AgentStatusUpdateDto update)
+    {
+        _logger.LogInformation(
+            "Broadcasting status update for agent {AgentId}: {Status}",
+            update.AgentId, update.Status);
+
+        var agentUpdate = update.ToUpdate();
+
+        // Broadcast to all connected clients
+        await Clients.All.AgentStatusChanged(agentUpdate);
+
+        // Also push to the specific agent's group
+        var agentGroup = AgentGroupName(update.AgentId);
+        await Clients.Group(agentGroup).AgentStatusChanged(agentUpdate);
+    }
+
     /// <summary>
     /// Adds the calling connection to the fleet group.
     /// Once joined, the client will receive all agent status changes

backend/ControlCenter/Hubs/Models/AgentStatusModels.cs

@@ -72,6 +72,80 @@ public record TaskProgressUpdate(
     string? Elapsed
 );
 
+/// <summary>
+/// Data transfer object for broadcasting agent status updates
+/// to all connected SignalR clients via the hub's SendStatusUpdate method.
+///
+/// <para>This DTO provides a mutable, serialization-friendly alternative to
+/// <see cref="AgentStatusUpdate"/> for callers that construct updates
+/// from external data sources (e.g., HTTP API payloads).</para>
+/// </summary>
+public class AgentStatusUpdateDto
+{
+    /// <summary>
+    /// Agent identifier, e.g. "otto", "dex", "rex".
+    /// </summary>
+    public string AgentId { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Human-readable display name, e.g. "Otto", "Dex".
+    /// </summary>
+    public string DisplayName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Role description, e.g. "Orchestrator Agent", "Backend Specialist".
+    /// </summary>
+    public string Role { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Current operational status of the agent as lowercase string:
+    /// "active", "idle", "thinking", "error".
+    /// </summary>
+    public string Status { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Description of the agent's current task, if any.
+    /// </summary>
+    public string? CurrentTask { get; set; }
+
+    /// <summary>
+    /// Full session key, e.g. "agent:otto:telegram:direct:8787451565".
+    /// </summary>
+    public string SessionKey { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Communication channel, e.g. "telegram", "discord", "slack".
+    /// </summary>
+    public string Channel { get; set; } = string.Empty;
+
+    /// <summary>
+    /// ISO 8601 timestamp of the agent's last activity.
+    /// </summary>
+    public string LastActivity { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Error message when the agent status is "error".
+    /// </summary>
+    public string? ErrorMessage { get; set; }
+
+    /// <summary>
+    /// Converts this DTO to an immutable <see cref="AgentStatusUpdate"/> record
+    /// for use with the typed SignalR client interface.
+    /// </summary>
+    /// <returns>An <see cref="AgentStatusUpdate"/> with equivalent field values.</returns>
+    public AgentStatusUpdate ToUpdate() => new(
+        AgentId,
+        DisplayName,
+        Role,
+        Status,
+        CurrentTask,
+        SessionKey,
+        Channel,
+        LastActivity,
+        ErrorMessage
+    );
+}
+
 /// <summary>
 /// Snapshot of an agent's full card data, sent on initial connection
 /// or when the fleet state is requested.

backend/ControlCenter/Models/AgentMinionMapping.cs

@@ -0,0 +1,72 @@
+namespace ControlCenter.Models;
+
+/// <summary>
+/// Defines which side of the Control Center dashboard a minion occupies.
+/// </summary>
+public enum MinionSide
+{
+    /// <summary>Development side — Rex, Dex, Hex.</summary>
+    Dev,
+
+    /// <summary>Business side — Larry, Mel, Buzz.</summary>
+    Business
+}
+
+/// <summary>
+/// Visual state of a minion sprite, derived from the agent's
+/// <see cref="AgentStatus"/>. Maps Active/Idle/Thinking/Error
+/// to frontend animation states.
+/// </summary>
+public enum MinionState
+{
+    /// <summary>Agent is actively processing — minion shows working animation.</summary>
+    Active,
+
+    /// <summary>Agent is idle — minion shows idle/patrolling animation.</summary>
+    Idle,
+
+    /// <summary>Agent is thinking (LLM call in flight) — minion shows thinking animation.</summary>
+    Thinking,
+
+    /// <summary>Agent encountered an error — minion shows error/distress animation.</summary>
+    Error
+}
+
+/// <summary>
+/// Static mapping entry that associates an agent ID with a minion's
+/// display side and position index within that side.
+///
+/// <para>Position indices are zero-based within each side. The dev side
+/// has Rex at 0, Dex at 1, and Hex at 2. The business side has
+/// Larry at 0, Mel at 1, and Buzz at 2.</para>
+/// </summary>
+/// <param name="AgentId">Agent identifier, e.g. "rex", "dex".</param>
+/// <param name="Side">Which side of the dashboard the minion occupies.</param>
+/// <param name="PositionIndex">Zero-based position index within the side.</param>
+/// <param name="DisplayName">Human-readable name, e.g. "Rex".</param>
+public record AgentMinionMapping(
+    string AgentId,
+    MinionSide Side,
+    int PositionIndex,
+    string DisplayName
+);
+
+/// <summary>
+/// Real-time minion state update pushed to SignalR clients
+/// when an agent's status changes. Combines the static mapping
+/// (who/where) with the dynamic state (what the minion is doing).
+/// </summary>
+/// <param name="AgentId">Agent identifier, e.g. "rex".</param>
+/// <param name="DisplayName">Human-readable minion name, e.g. "Rex".</param>
+/// <param name="Side">Which side of the dashboard — Dev or Business.</param>
+/// <param name="PositionIndex">Position within the side (0-based).</param>
+/// <param name="State">Current minion animation state.</param>
+/// <param name="Timestamp">ISO 8601 timestamp of the state change.</param>
+public record MinionStateUpdate(
+    string AgentId,
+    string DisplayName,
+    MinionSide Side,
+    int PositionIndex,
+    MinionState State,
+    string Timestamp
+);

backend/ControlCenter/Program.cs

@@ -52,6 +52,11 @@ builder.Services.AddSignalR();
 builder.Services.AddSingleton<GatewayEventBridgeService>();
 builder.Services.AddHostedService(sp => sp.GetRequiredService<GatewayEventBridgeService>());
 
+// ── Agent-Minion Mapper Service ────────────────────────────
+// Maps agents to minion sprites/positions and publishes state
+// updates through SignalR.
+builder.Services.AddSingleton<AgentMinionMapperService>();
+
 var app = builder.Build();
 
 // ── Middleware ──────────────────────────────────────────────

backend/ControlCenter/Services/AgentMinionMapperService.cs

@@ -0,0 +1,193 @@
+using ControlCenter.Hubs;
+using ControlCenter.Models;
+using Microsoft.AspNetCore.SignalR;
+
+namespace ControlCenter.Services;
+
+/// <summary>
+/// Service that maps Linear agents to minion sprites and positions
+/// in the Control Center dashboard.
+///
+/// <para>Static mappings define where each minion appears:</para>
+/// <list type="bullet">
+///   <item>Dev side: Rex (0), Dex (1), Hex (2)</item>
+///   <item>Business side: Larry (0), Mel (1), Buzz (2)</item>
+/// </list>
+///
+/// <para>Dynamic state is derived from the agent's <see cref="AgentStatus"/>:</para>
+/// <list type="bullet">
+///   <item><c>Active</c> → <see cref="MinionState.Active"/></item>
+///   <item><c>Idle</c> → <see cref="MinionState.Idle"/></item>
+///   <item><c>Thinking</c> → <see cref="MinionState.Thinking"/></item>
+///   <item><c>Error</c> → <see cref="MinionState.Error"/></item>
+/// </list>
+///
+/// <para>State updates are published through the <see cref="AgentStatusHub"/>
+/// SignalR hub so that connected clients can animate minion sprites
+/// in real time.</para>
+/// </summary>
+public class AgentMinionMapperService
+{
+    private readonly ILogger<AgentMinionMapperService> _logger;
+    private readonly IHubContext<AgentStatusHub, IAgentStatusClient> _hubContext;
+
+    /// <summary>
+    /// Static agent-to-minion mapping table. Defines which side and position
+    /// each agent's minion occupies on the dashboard.
+    /// </summary>
+    private static readonly Dictionary<string, AgentMinionMapping> Mappings = new()
+    {
+        // ── Dev Side ──────────────────────────────────
+        ["rex"] = new AgentMinionMapping("rex", MinionSide.Dev, 0, "Rex"),
+        ["dex"] = new AgentMinionMapping("dex", MinionSide.Dev, 1, "Dex"),
+        ["hex"] = new AgentMinionMapping("hex", MinionSide.Dev, 2, "Hex"),
+
+        // ── Business Side ─────────────────────────────
+        ["larry"] = new AgentMinionMapping("larry", MinionSide.Business, 0, "Larry"),
+        ["mel"]   = new AgentMinionMapping("mel",   MinionSide.Business, 1, "Mel"),
+        ["buzz"]  = new AgentMinionMapping("buzz",  MinionSide.Business, 2, "Buzz"),
+    };
+
+    /// <summary>
+    /// Maps <see cref="AgentStatus"/> string values to <see cref="MinionState"/>.
+    /// </summary>
+    private static readonly Dictionary<string, MinionState> StatusToMinionState = new()
+    {
+        ["active"]   = MinionState.Active,
+        ["idle"]     = MinionState.Idle,
+        ["thinking"] = MinionState.Thinking,
+        ["error"]    = MinionState.Error,
+    };
+
+    public AgentMinionMapperService(
+        ILogger<AgentMinionMapperService> logger,
+        IHubContext<AgentStatusHub, IAgentStatusClient> hubContext)
+    {
+        _logger = logger;
+        _hubContext = hubContext;
+    }
+
+    /// <summary>
+    /// Gets the minion mapping for a given agent ID.
+    /// Returns null if the agent is not mapped to a minion position.
+    /// </summary>
+    /// <param name="agentId">The agent identifier, e.g. "rex", "dex".</param>
+    /// <returns>The mapping record, or null if unmapped.</returns>
+    public AgentMinionMapping? GetMapping(string agentId)
+    {
+        return Mappings.GetValueOrDefault(agentId?.ToLowerInvariant() ?? string.Empty);
+    }
+
+    /// <summary>
+    /// Gets all minion mappings, ordered by side then position index.
+    /// </summary>
+    /// <returns>All mappings, sorted for consistent display order.</returns>
+    public IReadOnlyList<AgentMinionMapping> GetAllMappings()
+    {
+        return Mappings.Values
+            .OrderBy(m => m.Side)
+            .ThenBy(m => m.PositionIndex)
+            .ToList();
+    }
+
+    /// <summary>
+    /// Converts an agent status string to a <see cref="MinionState"/>.
+    /// Falls back to <see cref="MinionState.Idle"/> for unrecognized statuses.
+    /// </summary>
+    /// <param name="status">Agent status string: "active", "idle", "thinking", or "error".</param>
+    /// <returns>The corresponding minion state.</returns>
+    public MinionState StatusToState(string status)
+    {
+        return StatusToMinionState.GetValueOrDefault(
+            status?.ToLowerInvariant() ?? string.Empty,
+            MinionState.Idle);
+    }
+
+    /// <summary>
+    /// Publishes a minion state update through SignalR when an agent's
+    /// status changes. Only publishes for agents that have a minion mapping.
+    ///
+    /// <para>This is the primary integration point: the
+    /// <see cref="GatewayEventBridgeService"/> calls this method
+    /// whenever it detects a status change from the OpenClaw Gateway.</para>
+    /// </summary>
+    /// <param name="agentId">The agent whose status changed, e.g. "dex".</param>
+    /// <param name="status">The new status string: "active", "idle", "thinking", or "error".</param>
+    /// <returns>A task that completes when the SignalR message has been sent.</returns>
+    public async Task PublishMinionStateUpdateAsync(string agentId, string status)
+    {
+        var mapping = GetMapping(agentId);
+        if (mapping is null)
+        {
+            _logger.LogDebug("No minion mapping for agent {AgentId}; skipping state update", agentId);
+            return;
+        }
+
+        var minionState = StatusToState(status);
+        var update = new MinionStateUpdate(
+            AgentId: mapping.AgentId,
+            DisplayName: mapping.DisplayName,
+            Side: mapping.Side,
+            PositionIndex: mapping.PositionIndex,
+            State: minionState,
+            Timestamp: DateTime.UtcNow.ToString("o")
+        );
+
+        // Broadcast to the fleet group (all subscribers)
+        await _hubContext.Clients.Group(AgentStatusHub.FleetGroupName)
+            .AgentStatusChanged(ToAgentStatusUpdate(agentId, status));
+
+        // Also push to the specific agent's group
+        var agentGroup = AgentStatusHub.AgentGroupName(agentId);
+        await _hubContext.Clients.Group(agentGroup)
+            .AgentStatusChanged(ToAgentStatusUpdate(agentId, status));
+
+        _logger.LogInformation(
+            "Minion state update: {AgentId} → {State} (Side: {Side}, Position: {Index})",
+            agentId, minionState, mapping.Side, mapping.PositionIndex);
+    }
+
+    /// <summary>
+    /// Gets the current minion state for all mapped agents, suitable
+    /// for building an initial fleet snapshot.
+    /// </summary>
+    /// <returns>All minion mappings with their current (idle) state.</returns>
+    public IReadOnlyList<MinionStateUpdate> GetFullMinionState()
+    {
+        return Mappings.Values
+            .OrderBy(m => m.Side)
+            .ThenBy(m => m.PositionIndex)
+            .Select(m => new MinionStateUpdate(
+                AgentId: m.AgentId,
+                DisplayName: m.DisplayName,
+                Side: m.Side,
+                PositionIndex: m.PositionIndex,
+                State: MinionState.Idle,
+                Timestamp: DateTime.UtcNow.ToString("o")))
+            .ToList();
+    }
+
+    /// <summary>
+    /// Converts a status string to an <see cref="AgentStatusUpdate"/>
+    /// for SignalR push. Uses the mapping table for display names and roles.
+    /// </summary>
+    private AgentStatusUpdate ToAgentStatusUpdate(string agentId, string status)
+    {
+        var mapping = GetMapping(agentId);
+        var displayName = mapping?.DisplayName ?? char.ToUpperInvariant(agentId[0]) + agentId[1..];
+
+        return new AgentStatusUpdate(
+            AgentId: agentId,
+            DisplayName: displayName,
+            Role: mapping is not null
+                ? $"{mapping.Side} Agent"
+                : "Agent",
+            Status: status,
+            CurrentTask: null,
+            SessionKey: string.Empty,
+            Channel: string.Empty,
+            LastActivity: DateTime.UtcNow.ToString("o"),
+            ErrorMessage: status == "error" ? "Agent encountered an error" : null
+        );
+    }
+}

frontend/src/app/components/agent-status-badge/agent-status-badge.component.html

@@ -0,0 +1,8 @@
+<span class="badge"
+      [class]="statusClass"
+      [class.badge--pulse]="hasPulse"
+      [attr.aria-label]="'Agent status: ' + displayLabel"
+      role="status">
+  <span class="badge__dot"></span>
+  <span class="badge__label">{{ displayLabel }}</span>
+</span>

frontend/src/app/components/agent-status-badge/agent-status-badge.component.scss

@@ -0,0 +1,146 @@
+// ============================================================================
+// Agent Status Badge — per spec Section 7.3
+// Colored pill with dot indicator and optional pulse animation.
+// ============================================================================
+
+$badge-height: 24px;
+$dot-size: 8px;
+$border-radius: 12px;
+$font-size: 12px;
+$font-weight: 500;
+$padding-x: 8px;
+$gap: 6px;
+
+@use 'sass:color';
+
+// Status color palette
+$color-active: #22c55e;   // green-500
+$color-idle: #9ca3af;     // gray-400
+$color-thinking: #3b82f6; // blue-500
+$color-error: #ef4444;    // red-500
+$color-offline: #9ca3af;  // gray-400
+
+// Background tints (12% opacity for soft pill background)
+$bg-active: rgba($color-active, 0.12);
+$bg-idle: rgba($color-idle, 0.12);
+$bg-thinking: rgba($color-thinking, 0.12);
+$bg-error: rgba($color-error, 0.12);
+$bg-offline: rgba($color-offline, 0.12);
+
+// ---------------------------------------------------------------------------
+// Base pill
+// ---------------------------------------------------------------------------
+.badge {
+  display: inline-flex;
+  align-items: center;
+  height: $badge-height;
+  padding: 0 $padding-x;
+  border-radius: $border-radius;
+  gap: $gap;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+
+// ---------------------------------------------------------------------------
+// Dot indicator
+// ---------------------------------------------------------------------------
+.badge__dot {
+  width: $dot-size;
+  height: $dot-size;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Label text
+// ---------------------------------------------------------------------------
+.badge__label {
+  line-height: 1;
+}
+
+// ---------------------------------------------------------------------------
+// Status color variants
+// ---------------------------------------------------------------------------
+.badge--active {
+  background: $bg-active;
+  color: color.adjust($color-active, $lightness: -10%);
+
+  .badge__dot {
+    background: $color-active;
+  }
+}
+
+.badge--idle {
+  background: $bg-idle;
+  color: color.adjust($color-idle, $lightness: -15%);
+
+  .badge__dot {
+    background: $color-idle;
+  }
+}
+
+.badge--thinking {
+  background: $bg-thinking;
+  color: color.adjust($color-thinking, $lightness: -10%);
+
+  .badge__dot {
+    background: $color-thinking;
+  }
+}
+
+.badge--error {
+  background: $bg-error;
+  color: color.adjust($color-error, $lightness: -10%);
+
+  .badge__dot {
+    background: $color-error;
+  }
+}
+
+.badge--offline {
+  background: $bg-offline;
+  color: color.adjust($color-offline, $lightness: -15%);
+
+  .badge__dot {
+    background: $color-offline;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Pulse animation — applied when status is active, thinking, or error
+// ---------------------------------------------------------------------------
+.badge--pulse {
+  .badge__dot {
+    animation: pulse-dot 2s ease-in-out infinite;
+  }
+}
+
+// Active: 2s pulse
+.badge--active.badge--pulse .badge__dot {
+  animation-duration: 2s;
+}
+
+// Thinking: 3s pulse
+.badge--thinking.badge--pulse .badge__dot {
+  animation-duration: 3s;
+}
+
+// Error: 0.8s pulse (fast, urgent)
+.badge--error.badge--pulse .badge__dot {
+  animation-duration: 0.8s;
+}
+
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(1.5);
+  }
+}

frontend/src/app/components/agent-status-badge/agent-status-badge.component.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { AgentStatus } from '../../models/agent.model';
+
+/**
+ * Agent Status Badge component.
+ * Displays a colored pill with a pulse animation indicating the agent's current status.
+ * Per spec Section 7.3: Agent Card Component Interface — status indicator.
+ *
+ * Color mapping:
+ * - Active → green
+ * - Idle → gray
+ * - Thinking → blue
+ * - Error → red
+ * - Offline → gray (no pulse)
+ *
+ * Pulse animations:
+ * - Active → 2s
+ * - Error → 0.8s
+ * - Thinking → 3s
+ * - Idle / Offline → no pulse
+ */
+@Component({
+  selector: 'app-agent-status-badge',
+  standalone: true,
+  imports: [],
+  templateUrl: './agent-status-badge.component.html',
+  styleUrl: './agent-status-badge.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AgentStatusBadgeComponent {
+  /** Current agent status — binds to the AgentStatus type from the model. */
+  readonly status = input.required<AgentStatus>();
+
+  /** Label text shown inside the badge. Defaults to title-cased status. */
+  readonly label = input<string>();
+
+  get displayLabel(): string {
+    return this.label() ?? this.titleCase(this.status());
+  }
+
+  /** CSS class driven by the current status value. */
+  get statusClass(): string {
+    return `badge--${this.status()}`;
+  }
+
+  /** Whether the pulse animation should be active for the current status. */
+  get hasPulse(): boolean {
+    return this.status() === 'active' || this.status() === 'thinking' || this.status() === 'error';
+  }
+
+  private titleCase(value: string): string {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+}

frontend/src/app/components/agent-status-badge/index.ts

@@ -0,0 +1 @@
+export { AgentStatusBadgeComponent } from './agent-status-badge.component';

frontend/src/app/components/index.ts

@@ -0,0 +1 @@
+export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';

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

@@ -0,0 +1,28 @@
+// ============================================================================
+// Hub Page — Responsive AgentCard Grid
+// Desktop (≥1024px): 2×2 grid
+// Mobile (<1024px): single-column stack
+// ============================================================================
+
+.hub-page {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: var(--cc-section-padding, 16px);
+  min-height: 400px;
+  overflow-x: hidden;
+}
+
+.hub-page__placeholder {
+  color: var(--cc-on-surface-variant);
+  font-size: 16px;
+  text-align: center;
+  padding: 24px 0;
+}
+
+// Desktop / kiosk breakpoint — 2-column grid
+@media (min-width: 1024px) {
+  .hub-page {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

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

@@ -9,18 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
     </div>
   `,
-  styles: [`
-    .hub-page {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 400px;
-    }
-    .hub-page__placeholder {
-      color: var(--cc-on-surface-variant);
-      font-size: 16px;
-    }
-  `],
+  styleUrl: './hub-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HubPageComponent {}

frontend/src/styles.scss

@@ -48,6 +48,17 @@ html {
 // These are NOT part of the M3 tonal palette; they are semantic overrides.
 // ---------------------------------------------------------------------------
 :root {
+  // --- Tactical Dark Mode color palette (CUB-47) ---
+  --color-surface: #0F172A;
+  --color-surface-light: #1E293B;
+  --color-primary: #38BDF8;
+  --color-secondary: #2DD4BF;
+  --color-accent: #A78BFA;
+  --color-danger: #F87171;
+  --color-text-primary: #FFFFFF;
+  --color-text-secondary: #94A3B8;
+  --color-border: #334155;
+
   // --- Status colors ---
   --status-active: #38BDF8;
   --status-idle: #2DD4BF;
@@ -90,7 +101,7 @@ html {
 // Global Body Styles
 // ---------------------------------------------------------------------------
 body {
-  background-color: var(--cc-background);
+  background-color: var(--color-surface);
   color: var(--cc-on-surface);
   font-family: 'Inter', 'Roboto', sans-serif;
   margin: 0;