CUB-45: AgentCard final integration with sub-components
- 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
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user