Compare commits
2 Commits
14b3dab88b
...
agent/hex/
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
040d4cb54d | ||
|
|
47cbeed456 |
@@ -8,11 +8,12 @@
|
|||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.14" />
|
<PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.14" />
|
||||||
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.4">
|
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.4">
|
||||||
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
|
||||||
<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,6 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// Task Progress Bar — Barrel Export
|
|
||||||
// CUB-44
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
export { TaskProgressBarComponent } from './task-progress-bar.component';
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
<!-- Task Progress Bar: determinate progress with optional elapsed time -->
|
|
||||||
<div class="task-progress-bar">
|
|
||||||
<!-- Info row: percentage + optional elapsed -->
|
|
||||||
<div class="task-progress-bar__info">
|
|
||||||
<span class="task-progress-bar__percent">{{ clampedProgress }}%</span>
|
|
||||||
<span *ngIf="showElapsed" class="task-progress-bar__elapsed">
|
|
||||||
{{ elapsedText }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Angular Material determinate progress bar -->
|
|
||||||
<mat-progress-bar
|
|
||||||
class="task-progress-bar__bar"
|
|
||||||
mode="determinate"
|
|
||||||
[value]="clampedProgress"
|
|
||||||
aria-label="Task progress"
|
|
||||||
></mat-progress-bar>
|
|
||||||
</div>
|
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// Task Progress Bar — Tactical Dark Theme Styling
|
|
||||||
// Per CUB-44: Uses --color-primary for bar fill and --color-surface-light
|
|
||||||
// for track background, mapped to the Control Center's M3 dark tokens.
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Container
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.task-progress-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Info row: percentage label + elapsed time
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
.task-progress-bar__info {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-progress-bar__percent {
|
|
||||||
font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--cc-on-surface, #E2E8F0);
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-progress-bar__elapsed {
|
|
||||||
font-family: var(--cc-font-mono, 'Roboto Mono', monospace);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--cc-on-surface-variant, #8A9BB0);
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Material Progress Bar Overrides
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Map the spec's --color-primary and --color-surface-light to the Control
|
|
||||||
// Center's actual theme tokens. This ensures the bar uses the tactical dark
|
|
||||||
// palette while respecting the spec's variable naming.
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
.task-progress-bar__bar {
|
|
||||||
// Override the track (background) to use the surface container
|
|
||||||
--mat-progress-bar-track-height: 6px;
|
|
||||||
--mat-progress-bar-active-indicator-height: 6px;
|
|
||||||
|
|
||||||
// Bar fill color: primary (cyan/sky blue per tactical dark theme)
|
|
||||||
--mat-progress-bar-active-indicator-color: var(--color-primary, var(--mat-sys-primary, #38BDF8));
|
|
||||||
|
|
||||||
// Track background: surface container (dark slate)
|
|
||||||
--mat-progress-bar-track-color: var(--color-surface-light, var(--cc-surface-container, #1C2027));
|
|
||||||
|
|
||||||
// Border radius for a softer bar
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
// Smooth transition on value changes
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rounded ends on the progress bar fill
|
|
||||||
:host ::ng-deep .mdc-linear-progress__bar-inner {
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rounded track background
|
|
||||||
:host ::ng-deep .mdc-linear-progress__track {
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// Task Progress Bar Component
|
|
||||||
// Per CUB-44: Determinate progress bar with optional elapsed time display.
|
|
||||||
// Uses Angular Material mat-progress-bar in determinate mode with tactical
|
|
||||||
// dark theme styling via CSS custom properties.
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
import {
|
|
||||||
ChangeDetectionStrategy,
|
|
||||||
ChangeDetectorRef,
|
|
||||||
Component,
|
|
||||||
Input,
|
|
||||||
OnDestroy,
|
|
||||||
OnInit,
|
|
||||||
} from '@angular/core';
|
|
||||||
import { CommonModule } from '@angular/common';
|
|
||||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Displays a determinate progress bar with an optional elapsed time indicator.
|
|
||||||
*
|
|
||||||
* Usage:
|
|
||||||
* ```html
|
|
||||||
* <app-task-progress-bar [progress]="65" />
|
|
||||||
* <app-task-progress-bar [progress]="42" [showElapsed]="true" />
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
selector: 'app-task-progress-bar',
|
|
||||||
standalone: true,
|
|
||||||
imports: [CommonModule, MatProgressBarModule],
|
|
||||||
templateUrl: './task-progress-bar.component.html',
|
|
||||||
styleUrl: './task-progress-bar.component.scss',
|
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
||||||
})
|
|
||||||
export class TaskProgressBarComponent implements OnInit, OnDestroy {
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Inputs
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/** Current progress percentage (0–100). Required. */
|
|
||||||
@Input({ required: true })
|
|
||||||
progress!: number;
|
|
||||||
|
|
||||||
/** Whether to show elapsed time next to the percentage. Defaults to false. */
|
|
||||||
@Input()
|
|
||||||
showElapsed = false;
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Internal state
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/** Timestamp when the component initialized — used for elapsed calculation. */
|
|
||||||
startTime = Date.now();
|
|
||||||
|
|
||||||
/** Formatted elapsed time string, e.g. "2m 15s ago". */
|
|
||||||
elapsedText = '';
|
|
||||||
|
|
||||||
/** Interval timer for updating the elapsed display. */
|
|
||||||
private timer: ReturnType<typeof setInterval> | null = null;
|
|
||||||
|
|
||||||
constructor(private cdr: ChangeDetectorRef) {}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Lifecycle
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
this.updateElapsed();
|
|
||||||
|
|
||||||
if (this.showElapsed) {
|
|
||||||
// Update elapsed time every second
|
|
||||||
this.timer = setInterval(() => {
|
|
||||||
this.updateElapsed();
|
|
||||||
this.cdr.markForCheck();
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
|
||||||
if (this.timer) {
|
|
||||||
clearInterval(this.timer);
|
|
||||||
this.timer = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
// Helpers
|
|
||||||
// ---------------------------------------------------------------------------
|
|
||||||
|
|
||||||
/** Clamp progress to 0–100 for safety. */
|
|
||||||
get clampedProgress(): number {
|
|
||||||
return Math.max(0, Math.min(100, this.progress ?? 0));
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Recalculate the elapsed time string. */
|
|
||||||
private updateElapsed(): void {
|
|
||||||
const elapsedMs = Date.now() - this.startTime;
|
|
||||||
const totalSeconds = Math.floor(elapsedMs / 1000);
|
|
||||||
const minutes = Math.floor(totalSeconds / 60);
|
|
||||||
const seconds = totalSeconds % 60;
|
|
||||||
|
|
||||||
if (minutes > 0) {
|
|
||||||
this.elapsedText = `${minutes}m ${seconds}s ago`;
|
|
||||||
} else {
|
|
||||||
this.elapsedText = `${seconds}s ago`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user