- Assemble AgentCard from AgentStatusBadge, TaskProgressBar, QuickJumpButton - All 6 inputs functional: status, task, progress, sessionKey, channel, lastActivity - Left-border accent matches status color (Active: #38BDF8, Idle: #2DD4BF, Thinking: #A78BFA, Error: #F87171) - Accessibility: role="article" on card, aria-labels on all sections - Uses tactical dark mode CSS variables from CUB-47 - Added @Input() to QuickJumpButton sessionKey for parent binding - JumpClick output forwarded from AgentCard - Build passes, type checking passes
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
import { MatIconButton } from '@angular/material/button';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
|
|
/**
|
|
* Quick-Jump Button — M3 FilledTonalIconButton
|
|
*
|
|
* An icon button that emits a navigation event for jumping to an agent session.
|
|
* Uses the Material Design 3 FilledTonalIconButton style with 8% state layer
|
|
* overlay on hover and focus.
|
|
*
|
|
* Per spec Section 7.3: Agent Card Component Interface
|
|
*/
|
|
@Component({
|
|
selector: 'app-quick-jump-button',
|
|
standalone: true,
|
|
imports: [MatIconButton, MatIcon],
|
|
templateUrl: './quick-jump-button.component.html',
|
|
styleUrl: './quick-jump-button.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class QuickJumpButtonComponent {
|
|
/** Emitted when the button is clicked, carrying the session key for navigation. */
|
|
@Output() jumpClick = new EventEmitter<string>();
|
|
|
|
/** The session key to navigate to. Set by the parent agent card. */
|
|
@Input()
|
|
sessionKey = '';
|
|
|
|
onJumpClick(): void {
|
|
this.jumpClick.emit(this.sessionKey);
|
|
}
|
|
} |