github-issue-tower-defence-management 2.7.0 → 2.8.0

package/src/adapter/entry-points/console/ui/src/features/console/components/layout/ConsoleAirplaneModeButton.test.tsx

@@ -0,0 +1,111 @@
+import { fireEvent, render } from '@testing-library/react';
+import {
+  ConsoleAirplaneModeButton,
+  type ConsoleAirplaneModeButtonProps,
+} from './ConsoleAirplaneModeButton';
+
+const baseProps: ConsoleAirplaneModeButtonProps = {
+  status: 'off',
+  progress: null,
+  capturedAt: null,
+  failures: [],
+  onStartSync: jest.fn(),
+  onTurnOff: jest.fn(),
+};
+
+describe('ConsoleAirplaneModeButton', () => {
+  it('renders a start button when status is off', () => {
+    const { getByRole } = render(<ConsoleAirplaneModeButton {...baseProps} />);
+    const button = getByRole('button', { name: /airplane mode/i });
+    expect(button).not.toBeNull();
+  });
+
+  it('calls onStartSync when the start button is clicked', () => {
+    const onStartSync = jest.fn();
+    const { getByRole } = render(
+      <ConsoleAirplaneModeButton
+        {...baseProps}
+        status="off"
+        onStartSync={onStartSync}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: /airplane mode/i }));
+    expect(onStartSync).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows progress text when status is syncing', () => {
+    const { getByRole } = render(
+      <ConsoleAirplaneModeButton
+        {...baseProps}
+        status="syncing"
+        progress={{ fetched: 10, total: 100 }}
+      />,
+    );
+    const status = getByRole('status');
+    expect(status.textContent).toContain('10/100');
+  });
+
+  it('shows Syncing… when progress total is zero', () => {
+    const { getByRole } = render(
+      <ConsoleAirplaneModeButton
+        {...baseProps}
+        status="syncing"
+        progress={{ fetched: 0, total: 0 }}
+      />,
+    );
+    expect(getByRole('status').textContent).toContain('Syncing');
+  });
+
+  it('does not show a done/on indicator while syncing', () => {
+    const { queryByText } = render(
+      <ConsoleAirplaneModeButton
+        {...baseProps}
+        status="syncing"
+        progress={{ fetched: 3, total: 10 }}
+      />,
+    );
+    expect(queryByText(/turn off/i)).toBeNull();
+  });
+
+  it('shows capturedAt and turn-off button when status is on', () => {
+    const { getByText } = render(
+      <ConsoleAirplaneModeButton
+        {...baseProps}
+        status="on"
+        capturedAt="2026-01-01T00:00:00Z"
+      />,
+    );
+    expect(getByText(/2026/)).not.toBeNull();
+    expect(getByText(/turn off/i)).not.toBeNull();
+  });
+
+  it('calls onTurnOff when turn-off button is clicked', () => {
+    const onTurnOff = jest.fn();
+    const { getByRole } = render(
+      <ConsoleAirplaneModeButton
+        {...baseProps}
+        status="on"
+        capturedAt="2026-01-01T00:00:00Z"
+        onTurnOff={onTurnOff}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: /turn off/i }));
+    expect(onTurnOff).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows error state with retry button when status is error', () => {
+    const onStartSync = jest.fn();
+    const { getByRole, getByText } = render(
+      <ConsoleAirplaneModeButton
+        {...baseProps}
+        status="error"
+        failures={['https://github.com/o/r/issues/1']}
+        onStartSync={onStartSync}
+      />,
+    );
+    expect(getByText(/sync failed/i)).not.toBeNull();
+    const retryBtn = getByRole('button', { name: /retry/i });
+    fireEvent.click(retryBtn);
+    expect(onStartSync).toHaveBeenCalledTimes(1);
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/components/layout/ConsoleAirplaneModeButton.tsx

@@ -0,0 +1,92 @@
+import type {
+  AirplaneModeStatus,
+  AirplaneSyncProgress,
+} from '../../hooks/useAirplaneMode';
+
+export type ConsoleAirplaneModeButtonProps = {
+  status: AirplaneModeStatus;
+  progress: AirplaneSyncProgress | null;
+  capturedAt: string | null;
+  failures: string[];
+  onStartSync: () => void;
+  onTurnOff: () => void;
+};
+
+const progressLabel = (progress: AirplaneSyncProgress | null): string => {
+  if (progress === null || progress.total === 0) {
+    return 'Syncing…';
+  }
+  return `Syncing ${progress.fetched}/${progress.total}`;
+};
+
+export const ConsoleAirplaneModeButton = ({
+  status,
+  progress,
+  capturedAt,
+  failures,
+  onStartSync,
+  onTurnOff,
+}: ConsoleAirplaneModeButtonProps) => {
+  if (status === 'on') {
+    return (
+      <div className="console-airplane-mode console-airplane-mode--on">
+        <span className="console-airplane-mode-label">
+          ✈ Airplane mode
+          {capturedAt !== null
+            ? `: ${new Date(capturedAt).toLocaleString()}`
+            : ''}
+        </span>
+        <button
+          type="button"
+          className="console-airplane-mode-toggle"
+          onClick={onTurnOff}
+        >
+          Turn off
+        </button>
+      </div>
+    );
+  }
+
+  if (status === 'syncing') {
+    return (
+      <div className="console-airplane-mode console-airplane-mode--syncing">
+        <span
+          className="console-airplane-mode-progress"
+          role="status"
+          aria-live="polite"
+        >
+          {progressLabel(progress)}
+        </span>
+      </div>
+    );
+  }
+
+  if (status === 'error') {
+    return (
+      <div className="console-airplane-mode console-airplane-mode--error">
+        <span className="console-airplane-mode-error-label" role="alert">
+          Sync failed{failures.length > 0 ? `: ${failures.length} item(s)` : ''}
+        </span>
+        <button
+          type="button"
+          className="console-airplane-mode-toggle"
+          onClick={onStartSync}
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="console-airplane-mode console-airplane-mode--off">
+      <button
+        type="button"
+        className="console-airplane-mode-toggle"
+        onClick={onStartSync}
+      >
+        ✈ Airplane mode
+      </button>
+    </div>
+  );
+};

package/src/adapter/entry-points/console/ui/src/features/console/components/layout/ConsoleTabList.stories.tsx

@@ -16,6 +16,13 @@ const meta: Meta<typeof ConsoleTabList> = {
     tabHref: (tab: ConsoleTabName) => `/projects/acme/${tab}`,
     onSelectTab: () => {},
     onSelectProject: () => {},
+    airplaneModeEnabled: true,
+    airplaneModeStatus: 'off',
+    airplaneModeProgress: null,
+    airplaneModeCapturedAt: null,
+    airplaneModeFailures: [],
+    onAirplaneModeStartSync: () => {},
+    onAirplaneModeTurnOff: () => {},
   },
 };
 
@@ -39,6 +46,14 @@ export const AllTabsWithCounts: Story = {
   },
 };
 
+export const AirplaneModeDisabled: Story = {
+  args: {
+    activeTab: 'prs',
+    counts,
+    airplaneModeEnabled: false,
+  },
+};
+
 export const ZeroCountTabsHidden: Story = {
   args: {
     activeTab: 'prs',

package/src/adapter/entry-points/console/ui/src/features/console/components/layout/ConsoleTabList.test.tsx

@@ -19,6 +19,13 @@ const baseProps = {
   tabHref: (tab: ConsoleTabName) => `/projects/acme/${tab}`,
   onSelectTab: () => {},
   onSelectProject: () => {},
+  airplaneModeEnabled: true,
+  airplaneModeStatus: 'off' as const,
+  airplaneModeProgress: null,
+  airplaneModeCapturedAt: null,
+  airplaneModeFailures: [],
+  onAirplaneModeStartSync: () => {},
+  onAirplaneModeTurnOff: () => {},
 };
 
 describe('ConsoleTabList', () => {
@@ -230,4 +237,16 @@ describe('ConsoleTabList', () => {
       baseElement.querySelector('.console-tab-pjname-dropdown'),
     ).toBeNull();
   });
+
+  it('does not render the airplane mode button when airplaneModeEnabled is false', () => {
+    const { baseElement } = render(
+      <ConsoleTabList
+        {...baseProps}
+        activeTab="prs"
+        counts={counts}
+        airplaneModeEnabled={false}
+      />,
+    );
+    expect(baseElement.querySelector('.console-airplane-mode')).toBeNull();
+  });
 });

package/src/adapter/entry-points/console/ui/src/features/console/components/layout/ConsoleTabList.tsx

@@ -1,6 +1,11 @@
 import { type ReactNode, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import type {
+  AirplaneModeStatus,
+  AirplaneSyncProgress,
+} from '../../hooks/useAirplaneMode';
 import { CONSOLE_TABS, type ConsoleTabName } from '../../logic/types';
+import { ConsoleAirplaneModeButton } from './ConsoleAirplaneModeButton';
 
 export type ConsoleTabBarProps = {
   activeTab: ConsoleTabName;
@@ -13,6 +18,13 @@ export type ConsoleTabBarProps = {
   onSelectTab: (tab: ConsoleTabName) => void;
   onSelectProject: (pjcode: string) => void;
   settingsButton?: ReactNode;
+  airplaneModeEnabled: boolean;
+  airplaneModeStatus: AirplaneModeStatus;
+  airplaneModeProgress: AirplaneSyncProgress | null;
+  airplaneModeCapturedAt: string | null;
+  airplaneModeFailures: string[];
+  onAirplaneModeStartSync: () => void;
+  onAirplaneModeTurnOff: () => void;
 };
 
 export const ConsoleTabList = ({
@@ -26,6 +38,13 @@ export const ConsoleTabList = ({
   onSelectTab,
   onSelectProject,
   settingsButton,
+  airplaneModeEnabled,
+  airplaneModeStatus,
+  airplaneModeProgress,
+  airplaneModeCapturedAt,
+  airplaneModeFailures,
+  onAirplaneModeStartSync,
+  onAirplaneModeTurnOff,
 }: ConsoleTabBarProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [dropdownPos, setDropdownPos] = useState<{
@@ -153,7 +172,7 @@ export const ConsoleTabList = ({
             )}
         </div>
       )}
-      {generatedAt !== null && (
+      {generatedAt !== null && airplaneModeStatus !== 'on' && (
         <span
           className="console-tab-geninfo"
           data-from-cache={fromCache ? 'true' : undefined}
@@ -164,6 +183,16 @@ export const ConsoleTabList = ({
       {settingsButton !== undefined && (
         <span className="console-tab-settings">{settingsButton}</span>
       )}
+      {airplaneModeEnabled && (
+        <ConsoleAirplaneModeButton
+          status={airplaneModeStatus}
+          progress={airplaneModeProgress}
+          capturedAt={airplaneModeCapturedAt}
+          failures={airplaneModeFailures}
+          onStartSync={onAirplaneModeStartSync}
+          onTurnOff={onAirplaneModeTurnOff}
+        />
+      )}
     </nav>
   );
 };

package/src/adapter/entry-points/console/ui/src/features/console/components/operations/ConsoleErrorToast.stories.tsx

@@ -5,6 +5,7 @@ const meta: Meta<typeof ConsoleErrorToast> = {
   title: 'Console/ConsoleErrorToast',
   component: ConsoleErrorToast,
   args: {
+    title: 'Approved — PR #851',
     message: 'Operation failed: HTTP 422 Review cannot be requested',
     onDismiss: () => {},
   },
@@ -18,6 +19,15 @@ export const ReviewRejectedByGitHub: Story = {};
 
 export const NetworkFailure: Story = {
   args: {
+    title: 'Approved — PR #851',
     message: 'Operation failed: network down',
   },
 };
+
+export const AirplaneModeGuard: Story = {
+  args: {
+    title: 'Airplane mode',
+    message:
+      'Operation failed: This action requires a network connection. Turn off airplane mode and try again.',
+  },
+};

package/src/adapter/entry-points/console/ui/src/features/console/components/operations/ConsoleUndoToast.test.tsx

@@ -62,9 +62,7 @@ describe('ConsoleErrorToast', () => {
       />,
     );
     expect(getByText('Operation failed: HTTP 422')).toBeInTheDocument();
-    expect(
-      container.querySelector('.console-undo-toast-error'),
-    ).toBeInTheDocument();
+    expect(container.querySelector('.console-error-toast')).toBeInTheDocument();
     expect(getByRole('alert')).toBeInTheDocument();
   });
 

package/src/adapter/entry-points/console/ui/src/features/console/components/operations/ConsoleUndoToast.tsx

@@ -36,23 +36,24 @@ export const ConsoleUndoToast = ({
 );
 
 export type ConsoleErrorToastProps = {
+  title?: string;
   message: string;
   onDismiss: () => void;
 };
 
 export const ConsoleErrorToast = ({
+  title,
   message,
   onDismiss,
 }: ConsoleErrorToastProps) => (
-  <div
-    className="console-undo-toast console-undo-toast-error"
-    role="alert"
-    aria-live="assertive"
-  >
-    <span className="console-undo-toast-message">{message}</span>
+  <div className="console-error-toast" role="alert" aria-live="assertive">
+    {title !== undefined && (
+      <span className="console-error-toast-title">{title}</span>
+    )}
+    <span className="console-error-toast-message">{message}</span>
     <button
       type="button"
-      className="console-undo-toast-undo"
+      className="console-error-toast-dismiss"
       onClick={onDismiss}
     >
       Dismiss

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

@@ -0,0 +1,304 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import {
+  type AirplaneSnapshot,
+  readAirplaneModeFlag,
+  writeAirplaneModeFlag,
+} from '../lib/airplaneSnapshot';
+import { useAirplaneMode } from './useAirplaneMode';
+
+const makeMinimalSnapshot = (
+  overrides: Partial<AirplaneSnapshot> = {},
+): AirplaneSnapshot => ({
+  capturedAt: '2026-01-01T00:00:00Z',
+  tabs: {},
+  items: {},
+  failures: [],
+  ...overrides,
+});
+
+const encodeSseEvent = (data: unknown): string =>
+  `data: ${JSON.stringify(data)}\n\n`;
+
+const buildSseBody = (events: unknown[]): ReadableStream<Uint8Array> => {
+  const encoder = new TextEncoder();
+  const chunks = events.map((e) => encoder.encode(encodeSseEvent(e)));
+  return new ReadableStream<Uint8Array>({
+    start(controller) {
+      for (const chunk of chunks) {
+        controller.enqueue(chunk);
+      }
+      controller.close();
+    },
+  });
+};
+
+const mockFetchSse = (events: unknown[]): void => {
+  global.fetch = jest.fn().mockResolvedValue({
+    ok: true,
+    status: 200,
+    body: buildSseBody(events),
+  });
+};
+
+const mockCacheApi = (): {
+  stored: AirplaneSnapshot | null;
+  cacheStore: Map<string, string>;
+} => {
+  let stored: AirplaneSnapshot | null = null;
+  const cacheStore = new Map<string, string>();
+
+  const mockCache = {
+    put: jest.fn(async (_key: string, response: Response) => {
+      const text = await response.text();
+      cacheStore.set('snapshot', text);
+      stored = JSON.parse(text) as AirplaneSnapshot;
+    }),
+    match: jest.fn(async () => {
+      if (!cacheStore.has('snapshot')) {
+        return undefined;
+      }
+      return new Response(cacheStore.get('snapshot'), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }),
+    delete: jest.fn(),
+  };
+
+  Object.defineProperty(global, 'caches', {
+    writable: true,
+    value: {
+      open: jest.fn().mockResolvedValue(mockCache),
+      delete: jest.fn().mockResolvedValue(true),
+    },
+  });
+
+  return { stored: stored, cacheStore };
+};
+
+describe('useAirplaneMode', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    mockCacheApi();
+  });
+
+  it('starts in off status', () => {
+    const { result } = renderHook(() => useAirplaneMode());
+    expect(result.current.status).toBe('off');
+    expect(result.current.snapshot).toBeNull();
+    expect(result.current.progress).toBeNull();
+    expect(result.current.failures).toEqual([]);
+  });
+
+  it('does not report on while a fetch is outstanding', async () => {
+    let resolveStream!: () => void;
+    const streamBlocked = new Promise<void>((res) => {
+      resolveStream = res;
+    });
+
+    const encoder = new TextEncoder();
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      body: new ReadableStream<Uint8Array>({
+        start(controller) {
+          controller.enqueue(
+            encoder.encode(
+              encodeSseEvent({ type: 'progress', fetched: 0, total: 5 }),
+            ),
+          );
+          streamBlocked
+            .then(() => {
+              controller.close();
+            })
+            .catch(() => {});
+        },
+      }),
+    });
+
+    const { result } = renderHook(() => useAirplaneMode());
+
+    act(() => {
+      result.current.startSync();
+    });
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('syncing');
+    });
+
+    expect(result.current.status).not.toBe('on');
+
+    resolveStream();
+  });
+
+  it('transitions to on only after the done event with no failures', async () => {
+    const snapshot = makeMinimalSnapshot();
+    mockFetchSse([
+      { type: 'progress', fetched: 0, total: 1 },
+      { type: 'progress', fetched: 1, total: 1 },
+      { type: 'done', snapshot },
+    ]);
+
+    const { result } = renderHook(() => useAirplaneMode());
+
+    act(() => {
+      result.current.startSync();
+    });
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('on');
+    });
+
+    expect(result.current.snapshot).not.toBeNull();
+    expect(result.current.snapshot?.capturedAt).toBe('2026-01-01T00:00:00Z');
+    expect(result.current.failures).toEqual([]);
+  });
+
+  it('sets status to error and does not turn on when the done event has failures', async () => {
+    const snapshot = makeMinimalSnapshot({
+      failures: ['https://github.com/o/r/issues/99'],
+    });
+    mockFetchSse([
+      { type: 'progress', fetched: 0, total: 1 },
+      { type: 'done', snapshot },
+    ]);
+
+    const { result } = renderHook(() => useAirplaneMode());
+
+    act(() => {
+      result.current.startSync();
+    });
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('error');
+    });
+
+    expect(result.current.status).toBe('error');
+    expect(result.current.failures).toContain(
+      'https://github.com/o/r/issues/99',
+    );
+    expect(result.current.snapshot).toBeNull();
+  });
+
+  it('sets status to error when fetch fails', async () => {
+    global.fetch = jest.fn().mockRejectedValue(new Error('network down'));
+
+    const { result } = renderHook(() => useAirplaneMode());
+
+    act(() => {
+      result.current.startSync();
+    });
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('error');
+    });
+
+    expect(result.current.failures).toContain('network down');
+  });
+
+  it('turnOff resets to off and clears snapshot', async () => {
+    const snapshot = makeMinimalSnapshot();
+    mockFetchSse([
+      { type: 'progress', fetched: 0, total: 0 },
+      { type: 'done', snapshot },
+    ]);
+
+    const { result } = renderHook(() => useAirplaneMode());
+
+    act(() => {
+      result.current.startSync();
+    });
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('on');
+    });
+
+    act(() => {
+      result.current.turnOff();
+    });
+
+    expect(result.current.status).toBe('off');
+    expect(result.current.snapshot).toBeNull();
+    expect(result.current.failures).toEqual([]);
+  });
+
+  it('loads stored snapshot from Cache API when flag is on at mount', async () => {
+    const snapshot = makeMinimalSnapshot({
+      capturedAt: '2025-06-01T00:00:00Z',
+    });
+    writeAirplaneModeFlag(true);
+
+    const cacheStore = new Map<string, string>();
+    cacheStore.set('snapshot', JSON.stringify(snapshot));
+
+    const mockCache = {
+      put: jest.fn(),
+      match: jest.fn().mockResolvedValue(
+        new Response(cacheStore.get('snapshot'), {
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      ),
+    };
+    Object.defineProperty(global, 'caches', {
+      writable: true,
+      value: {
+        open: jest.fn().mockResolvedValue(mockCache),
+        delete: jest.fn().mockResolvedValue(true),
+      },
+    });
+
+    const { result } = renderHook(() => useAirplaneMode());
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('on');
+    });
+
+    expect(result.current.snapshot?.capturedAt).toBe('2025-06-01T00:00:00Z');
+  });
+
+  it('advances progress events during sync', async () => {
+    mockFetchSse([
+      { type: 'progress', fetched: 0, total: 2 },
+      { type: 'progress', fetched: 1, total: 2 },
+      { type: 'progress', fetched: 2, total: 2 },
+      { type: 'done', snapshot: makeMinimalSnapshot() },
+    ]);
+
+    const { result } = renderHook(() => useAirplaneMode());
+
+    act(() => {
+      result.current.startSync();
+    });
+
+    await waitFor(() => {
+      expect(result.current.progress?.total).toBe(2);
+    });
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('on');
+    });
+  });
+
+  it('sets status to error and does not write the flag when storeAirplaneSnapshot rejects', async () => {
+    Object.defineProperty(global, 'caches', {
+      writable: true,
+      value: {
+        open: jest.fn().mockRejectedValue(new Error('Cache API unavailable')),
+        delete: jest.fn().mockResolvedValue(true),
+      },
+    });
+    mockFetchSse([{ type: 'done', snapshot: makeMinimalSnapshot() }]);
+
+    const { result } = renderHook(() => useAirplaneMode());
+
+    act(() => {
+      result.current.startSync();
+    });
+
+    await waitFor(() => {
+      expect(result.current.status).toBe('error');
+    });
+
+    expect(readAirplaneModeFlag()).toBe(false);
+    expect(result.current.snapshot).toBeNull();
+  });
+});