github-issue-tower-defence-management 1.92.1 → 1.93.0

package/src/adapter/entry-points/console/ui/src/features/console/logic/navigation.ts

@@ -0,0 +1,33 @@
+export const nextPendingKeyAfter = (
+  orderedKeys: string[],
+  actedKey: string,
+): string | null => {
+  const actedIndex = orderedKeys.indexOf(actedKey);
+  if (actedIndex < 0) {
+    return orderedKeys.length > 0 ? orderedKeys[0] : null;
+  }
+  const nextIndex = actedIndex + 1;
+  return nextIndex < orderedKeys.length ? orderedKeys[nextIndex] : null;
+};
+
+export const nextPendingKeyBrowse = (
+  orderedKeys: string[],
+  currentKey: string,
+): string | null => {
+  const index = orderedKeys.indexOf(currentKey);
+  if (index < 0 || index >= orderedKeys.length - 1) {
+    return null;
+  }
+  return orderedKeys[index + 1];
+};
+
+export const previousPendingKeyBefore = (
+  orderedKeys: string[],
+  currentKey: string,
+): string | null => {
+  const index = orderedKeys.indexOf(currentKey);
+  if (index <= 0) {
+    return null;
+  }
+  return orderedKeys[index - 1];
+};

package/src/adapter/entry-points/console/ui/src/features/console/logic/swipe.test.ts

@@ -0,0 +1,34 @@
+import {
+  isVerticallyDominant,
+  resolveSwipeDirection,
+  SWIPE_MIN_DISTANCE,
+} from './swipe';
+
+describe('resolveSwipeDirection', () => {
+  it('reports next for a dominant left swipe', () => {
+    expect(resolveSwipeDirection(-120, 10)).toBe('next');
+  });
+
+  it('reports previous for a dominant right swipe', () => {
+    expect(resolveSwipeDirection(120, 10)).toBe('previous');
+  });
+
+  it('ignores a gesture shorter than the minimum distance', () => {
+    expect(resolveSwipeDirection(-(SWIPE_MIN_DISTANCE - 1), 0)).toBeNull();
+  });
+
+  it('ignores a gesture that is not horizontally dominant', () => {
+    expect(resolveSwipeDirection(-80, 70)).toBeNull();
+  });
+});
+
+describe('isVerticallyDominant', () => {
+  it('is true for a clearly vertical drag', () => {
+    expect(isVerticallyDominant(10, 80)).toBe(true);
+  });
+
+  it('is false for a small or horizontal drag', () => {
+    expect(isVerticallyDominant(80, 10)).toBe(false);
+    expect(isVerticallyDominant(5, 15)).toBe(false);
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/logic/swipe.ts

@@ -0,0 +1,28 @@
+export type ConsoleSwipeDirection = 'next' | 'previous' | null;
+
+export const SWIPE_MIN_DISTANCE = 60;
+export const SWIPE_HORIZONTAL_DOMINANCE = 1.5;
+
+export const resolveSwipeDirection = (
+  deltaX: number,
+  deltaY: number,
+): ConsoleSwipeDirection => {
+  const absDeltaX = Math.abs(deltaX);
+  const absDeltaY = Math.abs(deltaY);
+  if (absDeltaX < SWIPE_MIN_DISTANCE) {
+    return null;
+  }
+  if (absDeltaX <= absDeltaY * SWIPE_HORIZONTAL_DOMINANCE) {
+    return null;
+  }
+  return deltaX < 0 ? 'next' : 'previous';
+};
+
+export const isVerticallyDominant = (
+  deltaX: number,
+  deltaY: number,
+): boolean => {
+  const absDeltaX = Math.abs(deltaX);
+  const absDeltaY = Math.abs(deltaY);
+  return absDeltaY > absDeltaX * SWIPE_HORIZONTAL_DOMINANCE && absDeltaY > 20;
+};

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsoleItemDetailContainer.test.tsx

@@ -55,8 +55,9 @@ const buildOperations = (): ConsoleOperationsApi => ({
 });
 
 describe('ConsoleItemDetailContainer', () => {
-  it('wires the review action to the operations api for a PR item', async () => {
+  it('queues the review action and commits it through the operations api for a PR item', async () => {
     const operations = buildOperations();
+    const onQueueAction = jest.fn();
     const { getByText } = render(
       <ConsoleItemDetailContainer
         tab="prs"
@@ -69,12 +70,19 @@ describe('ConsoleItemDetailContainer', () => {
         storyName="TDPM Console port"
         overlayStatus={null}
         now={Date.parse('2026-06-19T12:00:00.000Z')}
+        onQueueAction={onQueueAction}
       />,
     );
     await waitFor(() => {
       expect(getByText('Approve')).toBeInTheDocument();
     });
     fireEvent.click(getByText('Approve'));
+    expect(onQueueAction).toHaveBeenCalledTimes(1);
+    const input = onQueueAction.mock.calls[0][0];
+    expect(input.kind).toEqual({ type: 'review', action: 'approve' });
+    expect(input.item).toBe(prItem);
+    expect(operations.reviewPullRequest).not.toHaveBeenCalled();
+    input.commit();
     expect(operations.reviewPullRequest).toHaveBeenCalledWith(
       prItem,
       prItem.url,

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsoleItemDetailContainer.tsx

@@ -4,6 +4,7 @@ import { ConsoleOperationMenu } from '../components/operations/ConsoleOperationM
 import type { ConsoleCaches } from '../hooks/useConsoleCaches';
 import { useConsoleItemDetailData } from '../hooks/useConsoleItemDetailData';
 import type { ConsoleOperationsApi } from '../hooks/useConsoleOperations';
+import type { ConsoleActionKind } from '../logic/actionToast';
 import { resolveStoryColorEnum } from '../logic/grouping';
 import type { ConsoleOperationHandlers } from '../logic/operations';
 import type {
@@ -15,6 +16,12 @@ import type {
   ConsoleTabName,
 } from '../logic/types';
 
+export type ConsoleQueueActionInput = {
+  kind: ConsoleActionKind;
+  item: ConsoleListItem;
+  commit: () => void;
+};
+
 export type ConsoleItemDetailContainerProps = {
   tab: ConsoleTabName;
   item: ConsoleListItem;
@@ -26,6 +33,7 @@ export type ConsoleItemDetailContainerProps = {
   storyName: string | null;
   overlayStatus: ConsoleOverlayStatus | null;
   now: number;
+  onQueueAction: (input: ConsoleQueueActionInput) => void;
 };
 
 export const ConsoleItemDetailContainer = ({
@@ -39,6 +47,7 @@ export const ConsoleItemDetailContainer = ({
   storyName,
   overlayStatus,
   now,
+  onQueueAction,
 }: ConsoleItemDetailContainerProps) => {
   const detail = useConsoleItemDetailData(caches, item);
   const hasPullRequest = item.isPr || detail.relatedPullRequests.length > 0;
@@ -48,22 +57,58 @@ export const ConsoleItemDetailContainer = ({
       const prUrl = item.isPr
         ? item.url
         : (detail.relatedPullRequests[0]?.pullRequest.url ?? item.url);
-      void operations.reviewPullRequest(item, prUrl, action);
+      onQueueAction({
+        kind: { type: 'review', action },
+        item,
+        commit: () => {
+          void operations.reviewPullRequest(item, prUrl, action);
+        },
+      });
     },
     onSetNextActionDate: (action) => {
-      void operations.setNextActionDate(item, action);
+      onQueueAction({
+        kind: { type: 'next_action_date', action },
+        item,
+        commit: () => {
+          void operations.setNextActionDate(item, action);
+        },
+      });
     },
     onSetStory: (option: ConsoleFieldOption) => {
-      void operations.setStory(item, option);
+      onQueueAction({
+        kind: { type: 'set_story', optionName: option.name },
+        item,
+        commit: () => {
+          void operations.setStory(item, option);
+        },
+      });
     },
     onSetStatus: (option: ConsoleFieldOption) => {
-      void operations.setStatus(item, option);
+      onQueueAction({
+        kind: { type: 'set_status', optionName: option.name },
+        item,
+        commit: () => {
+          void operations.setStatus(item, option);
+        },
+      });
     },
     onSetInTmuxByHuman: (option: ConsoleFieldOption) => {
-      void operations.setInTmuxByHuman(item, option);
+      onQueueAction({
+        kind: { type: 'set_in_tmux_by_human', optionName: option.name },
+        item,
+        commit: () => {
+          void operations.setInTmuxByHuman(item, option);
+        },
+      });
     },
     onClose: (action) => {
-      void operations.closeIssue(item, action);
+      onQueueAction({
+        kind: { type: 'close', action },
+        item,
+        commit: () => {
+          void operations.closeIssue(item, action);
+        },
+      });
     },
   };
 

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsolePage.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import { ConsolePage } from './ConsolePage';
 
 jest.mock('../lib/mermaidLoader', () => ({
@@ -97,27 +97,103 @@ describe('ConsolePage', () => {
     expect(getByText('snapshot: 2026-06-19T00:00:00.000Z')).toBeInTheDocument();
   });
 
-  it('keeps a tab driven to zero at zero and does not revive its badge after switching tabs', async () => {
-    const { getByText, queryByText, findByText } = render(<ConsolePage />);
-    await waitFor(() => {
-      expect(getByText('Add serveConsole subcommand')).toBeInTheDocument();
-    });
-    expect(
-      getByText('Awaiting Quality Check')
-        .closest('a')
-        ?.querySelector('.console-tab-badge')?.textContent,
-    ).toBe('1');
+  it('shows a cancellable toast and only drives the tab to zero after the five second window', async () => {
+    jest.useFakeTimers();
+    try {
+      const { getByText, findByText } = render(<ConsolePage />);
+      await waitFor(() => {
+        expect(getByText('Add serveConsole subcommand')).toBeInTheDocument();
+      });
+      expect(
+        getByText('Awaiting Quality Check')
+          .closest('a')
+          ?.querySelector('.console-tab-badge')?.textContent,
+      ).toBe('1');
 
-    fireEvent.click(getByText('Add serveConsole subcommand'));
-    expect(await findByText('Approve')).toBeInTheDocument();
-    fireEvent.click(getByText('Approve'));
+      fireEvent.click(getByText('Add serveConsole subcommand'));
+      expect(await findByText('Approve')).toBeInTheDocument();
+      fireEvent.click(getByText('Approve'));
 
-    await waitFor(() => {
+      expect(getByText('Approved — PR #851')).toBeInTheDocument();
+      expect(getByText('Undo')).toBeInTheDocument();
+      expect(
+        getByText('Awaiting Quality Check')
+          .closest('a')
+          ?.querySelector('.console-tab-badge')?.textContent,
+      ).toBe('1');
+
+      act(() => {
+        jest.advanceTimersByTime(5100);
+      });
+
+      await waitFor(() => {
+        expect(
+          getByText('Awaiting Quality Check')
+            .closest('a')
+            ?.querySelector('.console-tab-badge')?.textContent,
+        ).toBe('0');
+      });
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('cancels the command and keeps the item pending when Undo is clicked', async () => {
+    jest.useFakeTimers();
+    try {
+      const fetchMock = jest.fn(
+        async (_url: string, init?: { method?: string }) => {
+          const listMatch = _url.match(
+            /\/projects\/[^/]+\/([^/]+)\/list\.json/,
+          );
+          if (listMatch !== null) {
+            return {
+              ok: true,
+              status: 200,
+              json: async () => listPayload(listMatch[1]),
+            };
+          }
+          void init;
+          return {
+            ok: true,
+            status: 200,
+            json: async () => ({ body: '# body' }),
+          };
+        },
+      );
+      global.fetch = fetchMock as unknown as typeof fetch;
+
+      const { getByText, findByText } = render(<ConsolePage />);
+      await waitFor(() => {
+        expect(getByText('Add serveConsole subcommand')).toBeInTheDocument();
+      });
+      fireEvent.click(getByText('Add serveConsole subcommand'));
+      expect(await findByText('Approve')).toBeInTheDocument();
+      fireEvent.click(getByText('Approve'));
+
+      fireEvent.click(getByText('Undo'));
+      act(() => {
+        jest.advanceTimersByTime(6000);
+      });
+
+      const postCalls = fetchMock.mock.calls.filter(
+        (call) => call[1]?.method === 'POST',
+      );
+      expect(postCalls.length).toBe(0);
       expect(
         getByText('Awaiting Quality Check')
           .closest('a')
           ?.querySelector('.console-tab-badge')?.textContent,
-      ).toBe('0');
+      ).toBe('1');
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('does not revive a zeroed tab badge after switching tabs', async () => {
+    const { getByText, queryByText } = render(<ConsolePage />);
+    await waitFor(() => {
+      expect(getByText('Add serveConsole subcommand')).toBeInTheDocument();
     });
 
     fireEvent.click(getByText('Unread'));
@@ -127,7 +203,7 @@ describe('ConsolePage', () => {
       ).toBeInTheDocument();
     });
 
-    expect(queryByText('Awaiting Quality Check')).toBeNull();
+    expect(queryByText('Triage')).toBeNull();
   });
 
   it('hides zero-count tabs but keeps non-zero tabs', async () => {
@@ -151,3 +227,173 @@ describe('ConsolePage', () => {
     expect(queryByText('project: umino')).toBeNull();
   });
 });
+
+const twoItemPrPayload = () => ({
+  pjcode: 'umino',
+  generatedAt: '2026-06-19T00:00:00.000Z',
+  statusOptions: [{ id: 's1', name: 'Awaiting Workspace', color: 'BLUE' }],
+  storyOptions: [{ id: 'st1', name: 'TDPM Console port', color: 'BLUE' }],
+  storyColors: { 'TDPM Console port': { color: 'BLUE' } },
+  items: [
+    {
+      number: 851,
+      title: 'Add serveConsole subcommand',
+      url: 'https://github.com/o/r/pull/851',
+      repo: 'o/r',
+      nameWithOwner: 'o/r',
+      projectItemId: 'PVTI_1',
+      itemId: 'PVTI_1',
+      isPr: true,
+      story: 'TDPM Console port',
+      labels: [],
+      createdAt: '2026-06-17T00:00:00.000Z',
+    },
+    {
+      number: 852,
+      title: 'Add server-side console API handlers',
+      url: 'https://github.com/o/r/pull/852',
+      repo: 'o/r',
+      nameWithOwner: 'o/r',
+      projectItemId: 'PVTI_2',
+      itemId: 'PVTI_2',
+      isPr: true,
+      story: 'TDPM Console port',
+      labels: [],
+      createdAt: '2026-06-17T01:00:00.000Z',
+    },
+  ],
+});
+
+const touchEvent = (
+  type: string,
+  point: { clientX: number; clientY: number },
+  property: 'touches' | 'changedTouches',
+): TouchEvent => {
+  const event = new Event(type, { bubbles: true }) as TouchEvent;
+  Object.defineProperty(event, property, {
+    value: [point],
+    configurable: true,
+  });
+  return event;
+};
+
+const swipeDetailScreen = (
+  element: HTMLElement,
+  from: { clientX: number; clientY: number },
+  to: { clientX: number; clientY: number },
+): void => {
+  element.dispatchEvent(touchEvent('touchstart', from, 'touches'));
+  element.dispatchEvent(touchEvent('touchmove', to, 'touches'));
+  element.dispatchEvent(touchEvent('touchend', to, 'changedTouches'));
+};
+
+describe('ConsolePage swipe navigation', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    window.history.replaceState({}, '', '/projects/umino/prs?k=token');
+    const fetchMock = jest.fn(async (url: string) => {
+      const listMatch = url.match(/\/projects\/[^/]+\/([^/]+)\/list\.json/);
+      if (listMatch !== null) {
+        return {
+          ok: true,
+          status: 200,
+          json: async () =>
+            listMatch[1] === 'prs'
+              ? twoItemPrPayload()
+              : { ...twoItemPrPayload(), items: [] },
+        };
+      }
+      return { ok: true, status: 200, json: async () => ({ body: '# body' }) };
+    });
+    global.fetch = fetchMock as unknown as typeof fetch;
+  });
+
+  it('navigates to the next item on a left swipe of the opened detail screen', async () => {
+    const { container, getByText, findByText } = render(<ConsolePage />);
+    await waitFor(() => {
+      expect(getByText('Add serveConsole subcommand')).toBeInTheDocument();
+    });
+    fireEvent.click(getByText('Add serveConsole subcommand'));
+    expect(await findByText('Approve')).toBeInTheDocument();
+    expect(window.location.hash).toBe('#item/PVTI_1');
+
+    const detailScreen = container.querySelector('.console-detail-screen');
+    expect(detailScreen).not.toBeNull();
+    swipeDetailScreen(
+      detailScreen as HTMLElement,
+      { clientX: 240, clientY: 100 },
+      { clientX: 40, clientY: 110 },
+    );
+
+    await waitFor(() => {
+      expect(window.location.hash).toBe('#item/PVTI_2');
+    });
+  });
+
+  it('navigates to the previous item on a right swipe of the opened detail screen', async () => {
+    const { container, getByText, findByText } = render(<ConsolePage />);
+    await waitFor(() => {
+      expect(
+        getByText('Add server-side console API handlers'),
+      ).toBeInTheDocument();
+    });
+    fireEvent.click(getByText('Add server-side console API handlers'));
+    expect(await findByText('Approve')).toBeInTheDocument();
+    expect(window.location.hash).toBe('#item/PVTI_2');
+
+    const detailScreen = container.querySelector('.console-detail-screen');
+    expect(detailScreen).not.toBeNull();
+    swipeDetailScreen(
+      detailScreen as HTMLElement,
+      { clientX: 40, clientY: 100 },
+      { clientX: 240, clientY: 110 },
+    );
+
+    await waitFor(() => {
+      expect(window.location.hash).toBe('#item/PVTI_1');
+    });
+  });
+});
+
+describe('ConsolePage auto-advance', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    window.history.replaceState({}, '', '/projects/umino/prs?k=token');
+    const fetchMock = jest.fn(async (url: string) => {
+      const listMatch = url.match(/\/projects\/[^/]+\/([^/]+)\/list\.json/);
+      if (listMatch !== null) {
+        return {
+          ok: true,
+          status: 200,
+          json: async () =>
+            listMatch[1] === 'prs'
+              ? twoItemPrPayload()
+              : { ...twoItemPrPayload(), items: [] },
+        };
+      }
+      return { ok: true, status: 200, json: async () => ({ body: '# body' }) };
+    });
+    global.fetch = fetchMock as unknown as typeof fetch;
+  });
+
+  it('advances the detail view to the next pending item after an action', async () => {
+    jest.useFakeTimers();
+    try {
+      const { getByText, findByText } = render(<ConsolePage />);
+      await waitFor(() => {
+        expect(getByText('Add serveConsole subcommand')).toBeInTheDocument();
+      });
+      fireEvent.click(getByText('Add serveConsole subcommand'));
+      expect(await findByText('Approve')).toBeInTheDocument();
+      expect(window.location.hash).toBe('#item/PVTI_1');
+
+      fireEvent.click(getByText('Approve'));
+
+      await waitFor(() => {
+        expect(window.location.hash).toBe('#item/PVTI_2');
+      });
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsolePage.tsx

@@ -1,25 +1,42 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { ConsoleTabList } from '../components/layout/ConsoleTabList';
 import { ConsoleItemList } from '../components/list/ConsoleItemList';
+import { ConsoleUndoToast } from '../components/operations/ConsoleUndoToast';
+import { useConsoleActionQueue } from '../hooks/useConsoleActionQueue';
 import { useConsoleCaches } from '../hooks/useConsoleCaches';
 import { useConsoleNavigation } from '../hooks/useConsoleNavigation';
 import { useConsoleOperations } from '../hooks/useConsoleOperations';
 import { useConsoleOverlay } from '../hooks/useConsoleOverlay';
 import { useConsolePjcode } from '../hooks/useConsolePjcode';
+import { useConsoleSwipeNavigation } from '../hooks/useConsoleSwipeNavigation';
 import { useConsoleTabData } from '../hooks/useConsoleTabData';
+import {
+  actionAdvances,
+  actionToastColor,
+  formatActionToast,
+} from '../logic/actionToast';
 import { buildConsoleListRows, resolveItemStory } from '../logic/grouping';
+import {
+  nextPendingKeyAfter,
+  nextPendingKeyBrowse,
+  previousPendingKeyBefore,
+} from '../logic/navigation';
 import {
   countPendingItems,
   filterPendingItems,
   overlayKeyForItem,
 } from '../logic/overlay';
+import type { ConsoleSwipeDirection } from '../logic/swipe';
 import type {
   ConsoleListItem,
   ConsoleOverlayStatus,
   ConsoleTabName,
 } from '../logic/types';
 import { CONSOLE_TABS } from '../logic/types';
-import { ConsoleItemDetailContainer } from './ConsoleItemDetailContainer';
+import {
+  ConsoleItemDetailContainer,
+  type ConsoleQueueActionInput,
+} from './ConsoleItemDetailContainer';
 
 const emptyCounts = (): Record<ConsoleTabName, number> => {
   const result = {} as Record<ConsoleTabName, number>;
@@ -40,6 +57,7 @@ export const ConsolePage = () => {
   const overlayState = useConsoleOverlay(pjcode ?? OVERLAY_NAMESPACE_FALLBACK);
   const caches = useConsoleCaches();
   const operations = useConsoleOperations(pjcode, activeTab, overlayState);
+  const actionQueue = useConsoleActionQueue();
   const now = Date.now();
 
   const counts = useMemo(() => {
@@ -65,6 +83,11 @@ export const ConsolePage = () => {
     return filterPendingItems(activeSnapshot.items, overlayState.overlay);
   }, [activeSnapshot, overlayState.overlay]);
 
+  const orderedPendingKeys = useMemo(
+    () => pendingItems.map((item) => overlayKeyForItem(item)),
+    [pendingItems],
+  );
+
   const rows = useMemo(
     () => buildConsoleListRows(pendingItems, overlayState.overlay),
     [pendingItems, overlayState.overlay],
@@ -99,8 +122,66 @@ export const ConsolePage = () => {
       ? resolveItemStory(selectedItem, overlayState.overlay)
       : null;
 
+  const { openItem, closeItem } = navigation;
+
+  const advanceToNext = useCallback(
+    (actedKey: string): void => {
+      const nextKey = nextPendingKeyAfter(orderedPendingKeys, actedKey);
+      if (nextKey !== null) {
+        openItem(nextKey);
+      } else {
+        closeItem();
+      }
+    },
+    [orderedPendingKeys, openItem, closeItem],
+  );
+
+  const handleQueueAction = useCallback(
+    (input: ConsoleQueueActionInput): void => {
+      const actedKey = overlayKeyForItem(input.item);
+      actionQueue.enqueue({
+        message: formatActionToast(input.kind, input.item, activeTab),
+        color: actionToastColor(input.kind),
+        commit: input.commit,
+        advance: () => {
+          if (actionAdvances(input.kind, activeTab)) {
+            advanceToNext(actedKey);
+          }
+        },
+      });
+    },
+    [actionQueue, activeTab, advanceToNext],
+  );
+
+  const handleSwipe = useCallback(
+    (direction: ConsoleSwipeDirection): void => {
+      if (selectedItemKey === null || direction === null) {
+        return;
+      }
+      const targetKey =
+        direction === 'next'
+          ? nextPendingKeyBrowse(orderedPendingKeys, selectedItemKey)
+          : previousPendingKeyBefore(orderedPendingKeys, selectedItemKey);
+      if (targetKey !== null) {
+        openItem(targetKey);
+      }
+    },
+    [selectedItemKey, orderedPendingKeys, openItem],
+  );
+
+  const detailScreenRef = useConsoleSwipeNavigation(handleSwipe);
+
   return (
     <main className="console-app">
+      {actionQueue.pending !== null && (
+        <ConsoleUndoToast
+          message={actionQueue.pending.message}
+          color={actionQueue.pending.color}
+          remainingSeconds={actionQueue.pending.remainingSeconds}
+          progress={actionQueue.pending.progress}
+          onUndo={actionQueue.undo}
+        />
+      )}
       <ConsoleTabList
         activeTab={activeTab}
         counts={counts}
@@ -120,7 +201,7 @@ export const ConsolePage = () => {
           onSelectItem={(item) => navigation.openItem(item.projectItemId)}
         />
       ) : (
-        <div className="console-detail-screen">
+        <div className="console-detail-screen" ref={detailScreenRef}>
           <ConsoleItemDetailContainer
             tab={activeTab}
             item={selectedItem}
@@ -132,6 +213,7 @@ export const ConsolePage = () => {
             storyName={storyNameForSelected}
             overlayStatus={overlayStatusForSelected}
             now={now}
+            onQueueAction={handleQueueAction}
           />
         </div>
       )}