From bcaa526a69681b5682ef91822a8d2ce787232c2a Mon Sep 17 00:00:00 2001
From: "cubecraft-agents[bot]"
 <3458173+cubecraft-agents[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 13:21:08 +0000
Subject: [PATCH] =?UTF-8?q?CUB-46:=20Implement=20Quick=E2=80=91Jump=20Butt?=
 =?UTF-8?q?on=20Component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/components/index.ts          |  1 +
 .../quick-jump-button.component.html          |  8 +++
 .../quick-jump-button.component.scss          | 68 +++++++++++++++++++
 .../quick-jump-button.component.ts            | 32 +++++++++
 4 files changed, 109 insertions(+)
 create mode 100644 frontend/src/app/components/index.ts
 create mode 100644 frontend/src/app/components/quick-jump-button/quick-jump-button.component.html
 create mode 100644 frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss
 create mode 100644 frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts

diff --git a/frontend/src/app/components/index.ts b/frontend/src/app/components/index.ts
new file mode 100644
index 0000000..7e48ebb
--- /dev/null
+++ b/frontend/src/app/components/index.ts
@@ -0,0 +1 @@
+export * from './quick-jump-button/quick-jump-button.component';
\ No newline at end of file
diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html
new file mode 100644
index 0000000..3aa3c3c
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.html
@@ -0,0 +1,8 @@
+<button
+  mat-icon-button
+  class="quick-jump-button"
+  [attr.aria-label]="'Jump to agent session'"
+  (click)="onJumpClick()"
+>
+  <mat-icon>arrow_forward</mat-icon>
+</button>
\ No newline at end of file
diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss
new file mode 100644
index 0000000..718b441
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.scss
@@ -0,0 +1,68 @@
+// ============================================================================
+// Quick-Jump Button — M3 FilledTonalIconButton
+// Per spec Section 7.3: Agent Card Quick-Jump action
+// M3 spec: FilledTonalIconButton uses secondary container color
+// with 8% state layer overlay for hover/focus.
+// ============================================================================
+
+.quick-jump-button {
+  // M3 FilledTonalIconButton: secondary-container background
+  // Angular Material mat-icon-button sets up the base shape (40x40, round).
+  // We override the color tokens to match FilledTonal style.
+  --mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
+  background-color: var(--mat-sys-secondary-container);
+  border-radius: 50%;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  // M3 State Layer: 8% overlay on hover
+  &:hover {
+    background-color: var(--mat-sys-secondary-container);
+    // State layer overlay using a pseudo-element for precise 8% opacity
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background-color: var(--mat-sys-on-secondary-container);
+      opacity: 0.08;
+      pointer-events: none;
+    }
+  }
+
+  // M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
+  &:focus-visible {
+    background-color: var(--mat-sys-secondary-container);
+    outline: 3px solid var(--status-active);
+    outline-offset: 2px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background-color: var(--mat-sys-on-secondary-container);
+      opacity: 0.12;
+      pointer-events: none;
+    }
+  }
+
+  // M3 State Layer: 12% overlay on active/pressed
+  &:active {
+    background-color: var(--mat-sys-secondary-container);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background-color: var(--mat-sys-on-secondary-container);
+      opacity: 0.12;
+      pointer-events: none;
+    }
+  }
+
+  // Icon color stays on-secondary-container across all states
+  .mat-icon {
+    color: var(--mat-sys-on-secondary-container);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts
new file mode 100644
index 0000000..899fc1d
--- /dev/null
+++ b/frontend/src/app/components/quick-jump-button/quick-jump-button.component.ts
@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, 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. */
+  sessionKey = '';
+
+  onJumpClick(): void {
+    this.jumpClick.emit(this.sessionKey);
+  }
+}
\ No newline at end of file