Compare commits
2 Commits
5375d11792
...
agent/hex/
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
040d4cb54d | ||
|
|
47cbeed456 |
@@ -13,6 +13,7 @@
|
|||||||
<PrivateAssets>all</PrivateAssets>
|
<PrivateAssets>all</PrivateAssets>
|
||||||
</PackageReference>
|
</PackageReference>
|
||||||
<PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
|
<PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
|
||||||
|
<PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@@ -1,8 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,146 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { AgentStatusBadgeComponent } from './agent-status-badge.component';
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { AgentStatusBadgeComponent } from './agent-status-badge/agent-status-badge.component';
|
|
||||||
Reference in New Issue
Block a user