CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-45: Final AgentCard component integration #11

Closed
overseer wants to merge 10 commits from agent/rex/CUB-45-agent-card-final into dev
pull from: agent/rex/CUB-45-agent-card-final
merge into: CubeCraft-Creations:dev
Conversation 0 Commits 10 Files Changed 17 +1037 -12
overseer commented 2026-04-26 09:53:05 -04:00
Owner
Copy Link

CUB-45: AgentCard Component Final Integration

Assembles the final AgentCard component from all sub-components:

Sub-components Integrated

  • AgentStatusBadge (CUB-48) — replaces inline status dot/label with the reusable pill badge component
  • TaskProgressBar (CUB-44) — replaces inline mat-progress-bar with the dedicated progress component
  • QuickJumpButton (CUB-46) — replaces inline jump button with the M3 FilledTonalIconButton component

Changes

  • AgentCard TS: Removed inline status/progress/jump logic; imports and delegates to AgentStatusBadgeComponent, TaskProgressBarComponent, QuickJumpButtonComponent
  • AgentCard HTML: Uses <app-agent-status-badge>, <app-task-progress-bar>, <app-quick-jump-button> instead of inline implementations
  • AgentCard SCSS: Removed duplicated inline styles for status dot, progress bar, and jump button; kept card shell, accent, body, header, footer, responsive styles
  • QuickJumpButton: Fixed sessionKey to be @Input() (was missing decorator) for proper Angular template binding
  • Barrel exports: Added quick-jump-button/index.ts, updated components/index.ts to export all sub-components

Definition of Done

  • All 6 inputs working: status, task, progress, sessionKey, channel, lastActivity
  • Left-border accent matches status color via --agent-status-color
  • role="article" and aria-label on card element
  • jumpClick output forwards navigation events
  • Build passes ✓
  • TypeScript type-check passes ✓

Branch includes merged sub-component branches

This branch merges CUB-23, CUB-44, CUB-46, CUB-47, and CUB-48 to ensure all sub-components are available for integration.

## CUB-45: AgentCard Component Final Integration Assembles the final AgentCard component from all sub-components: ### Sub-components Integrated - **AgentStatusBadge** (CUB-48) — replaces inline status dot/label with the reusable pill badge component - **TaskProgressBar** (CUB-44) — replaces inline `mat-progress-bar` with the dedicated progress component - **QuickJumpButton** (CUB-46) — replaces inline jump button with the M3 FilledTonalIconButton component ### Changes - **AgentCard TS**: Removed inline status/progress/jump logic; imports and delegates to `AgentStatusBadgeComponent`, `TaskProgressBarComponent`, `QuickJumpButtonComponent` - **AgentCard HTML**: Uses `<app-agent-status-badge>`, `<app-task-progress-bar>`, `<app-quick-jump-button>` instead of inline implementations - **AgentCard SCSS**: Removed duplicated inline styles for status dot, progress bar, and jump button; kept card shell, accent, body, header, footer, responsive styles - **QuickJumpButton**: Fixed `sessionKey` to be `@Input()` (was missing decorator) for proper Angular template binding - **Barrel exports**: Added `quick-jump-button/index.ts`, updated `components/index.ts` to export all sub-components ### Definition of Done - [x] All 6 inputs working: status, task, progress, sessionKey, channel, lastActivity - [x] Left-border accent matches status color via `--agent-status-color` - [x] `role="article"` and `aria-label` on card element - [x] `jumpClick` output forwards navigation events - [x] Build passes ✓ - [x] TypeScript type-check passes ✓ ### Branch includes merged sub-component branches This branch merges CUB-23, CUB-44, CUB-46, CUB-47, and CUB-48 to ensure all sub-components are available for integration.
overseer added 11 commits 2026-04-26 09:53:06 -04:00
CUB-23: implement AgentCard component with status indicators, progress bar, and M3 styling 7eaf736fc4 
- AgentCard component with inputs: status, task, progress, sessionKey, channel, lastActivity
- Status badge colors: Active (#38BDF8), Idle (#2DD4BF), Thinking (#A78BFA), Error (#F87171)
- 4px left-border accent matching status color via CSS custom properties
- Pulse animations: Active (2s), Error (0.8s), Thinking (3s) using global styles.scss keyframes
- Task progress bar with percentage display
- Quick-Jump button using M3 FilledTonalIconButton style with state layer overlay
- Hover/focus states with M3 state layer overlay (8% primary)
- Accessibility: aria-labels for status, role=article on cards, focus-visible outlines
- Reduced-motion media query support
- Updated HubPageComponent with demo data grid layout
CUB-47: Implement Tactical Dark Mode CSS Variables d5a85c4ed0
CUB-48: Add Agent Status Badge component with pulse animations b97f4f0668 
- Colored pill badge for Active, Idle, Thinking, Error, Offline statuses
- Color mapping uses CSS custom properties (--status-active, etc.)
- Pulse animations: Active 2s, Thinking 3s, Error 0.8s, Idle/Offline static
- Respects prefers-reduced-motion for accessibility
- Standalone component with OnPush change detection
- Barrel export via index.ts
CUB-44: add task-progress-bar component with determinate mode and elapsed time 14b3dab88b
CUB-46: Implement Quick‑Jump Button Component bcaa526a69
Merge remote-tracking branch 'origin/agent/rex/CUB-23-agent-card' into agent/rex/CUB-45-agent-card-final e757f9b113
Merge remote-tracking branch 'origin/agent/rex/CUB-48-agent-status-badge' into agent/rex/CUB-45-agent-card-final d473611d8c
Merge remote-tracking branch 'origin/agent/rex/CUB-44-task-progress-bar' into agent/rex/CUB-45-agent-card-final ab1a20a61a
Merge remote-tracking branch 'origin/agent/rex/CUB-46-quick-jump-button' into agent/rex/CUB-45-agent-card-final 4f97697d56
Merge remote-tracking branch 'origin/agent/rex/CUB-47-dark-mode-variables' into agent/rex/CUB-45-agent-card-final 63f5790d39
CUB-45: Final AgentCard component integration fc12ab31a4 
- Replaced inline status dot/label with AgentStatusBadgeComponent (CUB-48)
- Replaced inline mat-progress-bar with TaskProgressBarComponent (CUB-44)
- Replaced inline jump button with QuickJumpButtonComponent (CUB-46)
- Left-border accent remains, driven by --agent-status-color CSS variable
- All 6 inputs working: status, task, progress, sessionKey, channel, lastActivity
- Added jumpClick output that forwards QuickJumpButton events
- role=article and aria-label on card element
- Fixed QuickJumpButton sessionKey to be @Input() for proper Angular binding
- Added barrel export for quick-jump-button
- Updated components barrel export for all sub-components
- Build and type-check pass cleanly
Rex closed this pull request 2026-04-26 11:17:56 -04:00

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Dex Grimm Hex Nano Otto overseer Pip Rex Sketch
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CubeCraft-Creations/Control-Center#11
Delete Branch "agent/rex/CUB-45-agent-card-final"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?