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

package/src/adapter/entry-points/console/ui/src/features/console/hooks/useConsoleActionQueue.test.ts

@@ -0,0 +1,117 @@
+import { act, renderHook } from '@testing-library/react';
+import { useConsoleActionQueue } from './useConsoleActionQueue';
+
+const makeAction = (
+  overrides: Partial<
+    Parameters<ReturnType<typeof useConsoleActionQueue>['enqueue']>[0]
+  > = {},
+) => ({
+  message: 'Approved — PR #851',
+  color: 'green' as const,
+  commit: jest.fn(),
+  advance: jest.fn(),
+  ...overrides,
+});
+
+describe('useConsoleActionQueue', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('advances immediately but only commits after the five second window', () => {
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction();
+    act(() => {
+      result.current.enqueue(action);
+    });
+    expect(action.advance).toHaveBeenCalledTimes(1);
+    expect(action.commit).not.toHaveBeenCalled();
+    expect(result.current.pending?.message).toBe('Approved — PR #851');
+    expect(result.current.pending?.remainingSeconds).toBe(5);
+
+    act(() => {
+      jest.advanceTimersByTime(4900);
+    });
+    expect(action.commit).not.toHaveBeenCalled();
+
+    act(() => {
+      jest.advanceTimersByTime(200);
+    });
+    expect(action.commit).toHaveBeenCalledTimes(1);
+    expect(result.current.pending).toBeNull();
+  });
+
+  it('counts the remaining seconds down during the window', () => {
+    const { result } = renderHook(() => useConsoleActionQueue());
+    act(() => {
+      result.current.enqueue(makeAction());
+    });
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    expect(result.current.pending?.remainingSeconds).toBe(3);
+    expect(result.current.pending?.progress).toBeCloseTo(0.6, 1);
+  });
+
+  it('cancels the command when undo is called within the window', () => {
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const action = makeAction();
+    act(() => {
+      result.current.enqueue(action);
+    });
+    act(() => {
+      jest.advanceTimersByTime(2000);
+      result.current.undo();
+    });
+    expect(result.current.pending).toBeNull();
+    act(() => {
+      jest.advanceTimersByTime(5000);
+    });
+    expect(action.commit).not.toHaveBeenCalled();
+  });
+
+  it('flushes the previous pending action when a new one is enqueued', () => {
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const first = makeAction({ message: 'Approved — PR #851' });
+    const second = makeAction({
+      message: 'Rejected — PR #853',
+      color: 'amber',
+    });
+    act(() => {
+      result.current.enqueue(first);
+    });
+    act(() => {
+      jest.advanceTimersByTime(1000);
+      result.current.enqueue(second);
+    });
+    expect(first.commit).toHaveBeenCalledTimes(1);
+    expect(second.commit).not.toHaveBeenCalled();
+    expect(result.current.pending?.message).toBe('Rejected — PR #853');
+    act(() => {
+      jest.advanceTimersByTime(5000);
+    });
+    expect(second.commit).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not commit twice if the window elapses after a manual flush', () => {
+    const { result } = renderHook(() => useConsoleActionQueue());
+    const first = makeAction();
+    const second = makeAction({ message: 'Closed — #845', color: 'red' });
+    act(() => {
+      result.current.enqueue(first);
+    });
+    act(() => {
+      result.current.enqueue(second);
+    });
+    expect(first.commit).toHaveBeenCalledTimes(1);
+    act(() => {
+      jest.advanceTimersByTime(6000);
+    });
+    expect(first.commit).toHaveBeenCalledTimes(1);
+    expect(second.commit).toHaveBeenCalledTimes(1);
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/hooks/useConsoleActionQueue.ts

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ACTION_TOAST_DELAY_MS,
+  type ConsoleToastColor,
+} from '../logic/actionToast';
+
+export type ConsoleQueuedAction = {
+  message: string;
+  color: ConsoleToastColor;
+  commit: () => void;
+  advance: () => void;
+};
+
+export type ConsolePendingActionView = {
+  message: string;
+  color: ConsoleToastColor;
+  remainingSeconds: number;
+  progress: number;
+};
+
+const COUNTDOWN_TICK_MS = 100;
+
+const computeRemainingSeconds = (elapsedMs: number): number =>
+  Math.max(0, Math.ceil((ACTION_TOAST_DELAY_MS - elapsedMs) / 1000));
+
+const computeProgress = (elapsedMs: number): number =>
+  Math.max(0, 1 - elapsedMs / ACTION_TOAST_DELAY_MS);
+
+export type ConsoleActionQueue = {
+  pending: ConsolePendingActionView | null;
+  enqueue: (action: ConsoleQueuedAction) => void;
+  undo: () => void;
+};
+
+export const useConsoleActionQueue = (): ConsoleActionQueue => {
+  const [pending, setPending] = useState<ConsolePendingActionView | null>(null);
+  const actionRef = useRef<ConsoleQueuedAction | null>(null);
+  const startRef = useRef<number>(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const committedRef = useRef<boolean>(false);
+
+  const clearTimer = useCallback((): void => {
+    if (timerRef.current !== null) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const commitPending = useCallback((): void => {
+    const action = actionRef.current;
+    clearTimer();
+    actionRef.current = null;
+    setPending(null);
+    if (action !== null && !committedRef.current) {
+      committedRef.current = true;
+      action.commit();
+    }
+  }, [clearTimer]);
+
+  const undo = useCallback((): void => {
+    clearTimer();
+    actionRef.current = null;
+    committedRef.current = true;
+    setPending(null);
+  }, [clearTimer]);
+
+  const enqueue = useCallback(
+    (action: ConsoleQueuedAction): void => {
+      if (actionRef.current !== null && !committedRef.current) {
+        const previous = actionRef.current;
+        clearTimer();
+        committedRef.current = true;
+        previous.commit();
+      }
+      committedRef.current = false;
+      actionRef.current = action;
+      startRef.current = Date.now();
+      setPending({
+        message: action.message,
+        color: action.color,
+        remainingSeconds: computeRemainingSeconds(0),
+        progress: computeProgress(0),
+      });
+      action.advance();
+      timerRef.current = setInterval(() => {
+        const elapsed = Date.now() - startRef.current;
+        if (elapsed >= ACTION_TOAST_DELAY_MS) {
+          commitPending();
+          return;
+        }
+        setPending({
+          message: action.message,
+          color: action.color,
+          remainingSeconds: computeRemainingSeconds(elapsed),
+          progress: computeProgress(elapsed),
+        });
+      }, COUNTDOWN_TICK_MS);
+    },
+    [clearTimer, commitPending],
+  );
+
+  useEffect(() => clearTimer, [clearTimer]);
+
+  return { pending, enqueue, undo };
+};

package/src/adapter/entry-points/console/ui/src/features/console/hooks/useConsoleSwipeNavigation.test.ts

@@ -0,0 +1,115 @@
+import { renderHook } from '@testing-library/react';
+import { useConsoleSwipeNavigation } from './useConsoleSwipeNavigation';
+
+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 swipe = (
+  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('useConsoleSwipeNavigation', () => {
+  it('reports next for a dominant left swipe', () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const onSwipe = jest.fn();
+    const { result } = renderHook(() => useConsoleSwipeNavigation(onSwipe));
+    result.current(element);
+    swipe(
+      element,
+      { clientX: 200, clientY: 100 },
+      { clientX: 60, clientY: 110 },
+    );
+    expect(onSwipe).toHaveBeenCalledWith('next');
+    document.body.removeChild(element);
+  });
+
+  it('reports previous for a dominant right swipe', () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const onSwipe = jest.fn();
+    const { result } = renderHook(() => useConsoleSwipeNavigation(onSwipe));
+    result.current(element);
+    swipe(
+      element,
+      { clientX: 60, clientY: 100 },
+      { clientX: 200, clientY: 110 },
+    );
+    expect(onSwipe).toHaveBeenCalledWith('previous');
+    document.body.removeChild(element);
+  });
+
+  it('ignores a mostly vertical drag', () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const onSwipe = jest.fn();
+    const { result } = renderHook(() => useConsoleSwipeNavigation(onSwipe));
+    result.current(element);
+    swipe(
+      element,
+      { clientX: 100, clientY: 50 },
+      { clientX: 110, clientY: 200 },
+    );
+    expect(onSwipe).not.toHaveBeenCalled();
+    document.body.removeChild(element);
+  });
+
+  it('does not navigate when the gesture starts in a horizontally scrollable element', () => {
+    const element = document.createElement('div');
+    const scroller = document.createElement('div');
+    Object.defineProperty(scroller, 'scrollWidth', {
+      value: 500,
+      configurable: true,
+    });
+    Object.defineProperty(scroller, 'clientWidth', {
+      value: 100,
+      configurable: true,
+    });
+    scroller.style.overflowX = 'auto';
+    element.appendChild(scroller);
+    document.body.appendChild(element);
+    const onSwipe = jest.fn();
+    const { result } = renderHook(() => useConsoleSwipeNavigation(onSwipe));
+    result.current(element);
+    scroller.dispatchEvent(
+      touchEvent('touchstart', { clientX: 200, clientY: 100 }, 'touches'),
+    );
+    scroller.dispatchEvent(
+      touchEvent('touchend', { clientX: 60, clientY: 100 }, 'changedTouches'),
+    );
+    expect(onSwipe).not.toHaveBeenCalled();
+    document.body.removeChild(element);
+  });
+
+  it('detaches listeners when the element is unmounted', () => {
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const onSwipe = jest.fn();
+    const { result } = renderHook(() => useConsoleSwipeNavigation(onSwipe));
+    result.current(element);
+    result.current(null);
+    swipe(
+      element,
+      { clientX: 200, clientY: 100 },
+      { clientX: 60, clientY: 110 },
+    );
+    expect(onSwipe).not.toHaveBeenCalled();
+    document.body.removeChild(element);
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/hooks/useConsoleSwipeNavigation.ts

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  type ConsoleSwipeDirection,
+  isVerticallyDominant,
+  resolveSwipeDirection,
+} from '../logic/swipe';
+
+const isHorizontallyScrollable = (start: EventTarget | null): boolean => {
+  let node = start instanceof Element ? start : null;
+  while (node !== null && node !== document.body) {
+    const style = window.getComputedStyle(node);
+    const overflowX = style.overflowX;
+    if (
+      (overflowX === 'auto' || overflowX === 'scroll') &&
+      node.scrollWidth > node.clientWidth
+    ) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+};
+
+export const useConsoleSwipeNavigation = (
+  onSwipe: (direction: ConsoleSwipeDirection) => void,
+): ((element: HTMLElement | null) => void) => {
+  const onSwipeRef = useRef(onSwipe);
+  onSwipeRef.current = onSwipe;
+
+  const detachRef = useRef<(() => void) | null>(null);
+
+  const attach = useCallback((element: HTMLElement): (() => void) => {
+    let startX = 0;
+    let startY = 0;
+    let tracking = false;
+
+    const onTouchStart = (event: TouchEvent): void => {
+      if (event.touches.length !== 1) {
+        tracking = false;
+        return;
+      }
+      if (isHorizontallyScrollable(event.target)) {
+        tracking = false;
+        return;
+      }
+      const touch = event.touches[0];
+      startX = touch.clientX;
+      startY = touch.clientY;
+      tracking = true;
+    };
+
+    const onTouchMove = (event: TouchEvent): void => {
+      if (!tracking) {
+        return;
+      }
+      const touch = event.touches[0];
+      if (
+        isVerticallyDominant(touch.clientX - startX, touch.clientY - startY)
+      ) {
+        tracking = false;
+      }
+    };
+
+    const onTouchEnd = (event: TouchEvent): void => {
+      if (!tracking) {
+        return;
+      }
+      tracking = false;
+      if (event.changedTouches.length !== 1) {
+        return;
+      }
+      const touch = event.changedTouches[0];
+      const direction = resolveSwipeDirection(
+        touch.clientX - startX,
+        touch.clientY - startY,
+      );
+      if (direction !== null) {
+        onSwipeRef.current(direction);
+      }
+    };
+
+    element.addEventListener('touchstart', onTouchStart, { passive: true });
+    element.addEventListener('touchmove', onTouchMove, { passive: true });
+    element.addEventListener('touchend', onTouchEnd, { passive: true });
+    return () => {
+      element.removeEventListener('touchstart', onTouchStart);
+      element.removeEventListener('touchmove', onTouchMove);
+      element.removeEventListener('touchend', onTouchEnd);
+    };
+  }, []);
+
+  const swipeRef = useCallback(
+    (element: HTMLElement | null): void => {
+      if (detachRef.current !== null) {
+        detachRef.current();
+        detachRef.current = null;
+      }
+      if (element !== null) {
+        detachRef.current = attach(element);
+      }
+    },
+    [attach],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (detachRef.current !== null) {
+        detachRef.current();
+        detachRef.current = null;
+      }
+    };
+  }, []);
+
+  return swipeRef;
+};

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

@@ -0,0 +1,153 @@
+import { consoleListItemsFixture } from '../testing/fixtures';
+import {
+  ACTION_TOAST_DELAY_MS,
+  actionAdvances,
+  actionToastColor,
+  actionToastMessage,
+  type ConsoleActionKind,
+  formatActionToast,
+  itemToastLabel,
+} from './actionToast';
+
+const prItem = consoleListItemsFixture[0];
+const issueItem = consoleListItemsFixture[2];
+
+describe('ACTION_TOAST_DELAY_MS', () => {
+  it('is the five second cancellable window', () => {
+    expect(ACTION_TOAST_DELAY_MS).toBe(5000);
+  });
+});
+
+describe('itemToastLabel', () => {
+  it('prefixes pull requests with PR #', () => {
+    expect(itemToastLabel(prItem)).toBe(`PR #${prItem.number}`);
+  });
+
+  it('prefixes issues with #', () => {
+    expect(itemToastLabel(issueItem)).toBe(`#${issueItem.number}`);
+  });
+});
+
+describe('actionToastMessage', () => {
+  it('labels review actions', () => {
+    expect(
+      actionToastMessage({ type: 'review', action: 'approve' }, 'prs'),
+    ).toBe('Approved');
+    expect(
+      actionToastMessage({ type: 'review', action: 'request_changes' }, 'prs'),
+    ).toBe('Rejected');
+    expect(
+      actionToastMessage({ type: 'review', action: 'totally_wrong' }, 'prs'),
+    ).toBe('Marked totally wrong');
+    expect(
+      actionToastMessage({ type: 'review', action: 'unnecessary' }, 'prs'),
+    ).toBe('Marked unnecessary');
+  });
+
+  it('labels the +1 week snooze differently on the todo-by-human tab', () => {
+    const kind: ConsoleActionKind = {
+      type: 'next_action_date',
+      action: 'snooze_1week',
+    };
+    expect(actionToastMessage(kind, 'prs')).toBe('Next Action Date +1 week');
+    expect(actionToastMessage(kind, 'todo-by-human')).toBe(
+      'Next Action Date +1 week and skip',
+    );
+  });
+
+  it('labels the +1 day snooze the same on every tab', () => {
+    const kind: ConsoleActionKind = {
+      type: 'next_action_date',
+      action: 'snooze_1day',
+    };
+    expect(actionToastMessage(kind, 'prs')).toBe('Next Action Date +1 day');
+    expect(actionToastMessage(kind, 'todo-by-human')).toBe(
+      'Next Action Date +1 day',
+    );
+  });
+
+  it('labels close actions', () => {
+    expect(actionToastMessage({ type: 'close', action: 'close' }, 'prs')).toBe(
+      'Closed',
+    );
+    expect(
+      actionToastMessage({ type: 'close', action: 'close_not_planned' }, 'prs'),
+    ).toBe('Closed as not planned');
+  });
+
+  it('labels the in-tmux-by-human action', () => {
+    expect(
+      actionToastMessage(
+        { type: 'set_in_tmux_by_human', optionName: 'In Tmux by human' },
+        'prs',
+      ),
+    ).toBe('Added to In Tmux by human');
+  });
+
+  it('labels field updates with the chosen option name', () => {
+    expect(
+      actionToastMessage(
+        { type: 'set_status', optionName: 'Awaiting Workspace' },
+        'prs',
+      ),
+    ).toBe('Status → Awaiting Workspace');
+    expect(
+      actionToastMessage(
+        { type: 'set_story', optionName: 'Move to Okinawa' },
+        'triage',
+      ),
+    ).toBe('Story → Move to Okinawa');
+  });
+});
+
+describe('actionToastColor', () => {
+  it('colors each action group like the reference', () => {
+    expect(actionToastColor({ type: 'review', action: 'approve' })).toBe(
+      'green',
+    );
+    expect(
+      actionToastColor({ type: 'review', action: 'request_changes' }),
+    ).toBe('amber');
+    expect(actionToastColor({ type: 'review', action: 'totally_wrong' })).toBe(
+      'red',
+    );
+    expect(actionToastColor({ type: 'review', action: 'unnecessary' })).toBe(
+      'gray',
+    );
+    expect(
+      actionToastColor({ type: 'set_status', optionName: 'Todo by human' }),
+    ).toBe('blue');
+    expect(
+      actionToastColor({ type: 'next_action_date', action: 'snooze_1day' }),
+    ).toBe('amber');
+    expect(actionToastColor({ type: 'close', action: 'close' })).toBe('red');
+  });
+});
+
+describe('actionAdvances', () => {
+  it('advances every non-snooze action in every tab', () => {
+    expect(actionAdvances({ type: 'review', action: 'approve' }, 'prs')).toBe(
+      true,
+    );
+    expect(actionAdvances({ type: 'set_status', optionName: 'x' }, 'prs')).toBe(
+      true,
+    );
+  });
+
+  it('does not advance a snooze except on the todo-by-human tab', () => {
+    const kind: ConsoleActionKind = {
+      type: 'next_action_date',
+      action: 'snooze_1week',
+    };
+    expect(actionAdvances(kind, 'prs')).toBe(false);
+    expect(actionAdvances(kind, 'todo-by-human')).toBe(true);
+  });
+});
+
+describe('formatActionToast', () => {
+  it('combines the message and the item label', () => {
+    expect(
+      formatActionToast({ type: 'review', action: 'approve' }, prItem, 'prs'),
+    ).toBe(`Approved — PR #${prItem.number}`);
+  });
+});

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

@@ -0,0 +1,103 @@
+import type {
+  ConsoleCloseAction,
+  ConsoleNextActionDateAction,
+  ConsoleReviewAction,
+} from './operations';
+import type { ConsoleListItem, ConsoleTabName } from './types';
+
+export type ConsoleToastColor =
+  | 'green'
+  | 'amber'
+  | 'red'
+  | 'gray'
+  | 'blue'
+  | 'error';
+
+export type ConsoleActionKind =
+  | { type: 'review'; action: ConsoleReviewAction }
+  | { type: 'next_action_date'; action: ConsoleNextActionDateAction }
+  | { type: 'set_story'; optionName: string }
+  | { type: 'set_status'; optionName: string }
+  | { type: 'set_in_tmux_by_human'; optionName: string }
+  | { type: 'close'; action: ConsoleCloseAction };
+
+export const ACTION_TOAST_DELAY_MS = 5000;
+
+export const itemToastLabel = (item: ConsoleListItem): string =>
+  `${item.isPr ? 'PR #' : '#'}${item.number}`;
+
+export const actionToastMessage = (
+  kind: ConsoleActionKind,
+  tab: ConsoleTabName,
+): string => {
+  switch (kind.type) {
+    case 'review':
+      if (kind.action === 'approve') {
+        return 'Approved';
+      }
+      if (kind.action === 'request_changes') {
+        return 'Rejected';
+      }
+      if (kind.action === 'totally_wrong') {
+        return 'Marked totally wrong';
+      }
+      return 'Marked unnecessary';
+    case 'next_action_date':
+      if (kind.action === 'snooze_1day') {
+        return 'Next Action Date +1 day';
+      }
+      return tab === 'todo-by-human'
+        ? 'Next Action Date +1 week and skip'
+        : 'Next Action Date +1 week';
+    case 'set_story':
+      return `Story → ${kind.optionName}`;
+    case 'set_status':
+      return `Status → ${kind.optionName}`;
+    case 'set_in_tmux_by_human':
+      return 'Added to In Tmux by human';
+    case 'close':
+      return kind.action === 'close' ? 'Closed' : 'Closed as not planned';
+  }
+};
+
+export const actionToastColor = (
+  kind: ConsoleActionKind,
+): ConsoleToastColor => {
+  switch (kind.type) {
+    case 'review':
+      if (kind.action === 'approve') {
+        return 'green';
+      }
+      if (kind.action === 'request_changes') {
+        return 'amber';
+      }
+      if (kind.action === 'totally_wrong') {
+        return 'red';
+      }
+      return 'gray';
+    case 'next_action_date':
+      return 'amber';
+    case 'set_story':
+    case 'set_status':
+    case 'set_in_tmux_by_human':
+      return 'blue';
+    case 'close':
+      return 'red';
+  }
+};
+
+export const actionAdvances = (
+  kind: ConsoleActionKind,
+  tab: ConsoleTabName,
+): boolean => {
+  if (kind.type === 'next_action_date') {
+    return tab === 'todo-by-human';
+  }
+  return true;
+};
+
+export const formatActionToast = (
+  kind: ConsoleActionKind,
+  item: ConsoleListItem,
+  tab: ConsoleTabName,
+): string => `${actionToastMessage(kind, tab)} — ${itemToastLabel(item)}`;