github-issue-tower-defence-management 2.12.1 → 2.14.0

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

@@ -1,14 +1,33 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { postConsoleOperation } from '../lib/consoleApi';
 import {
   ACTION_TOAST_DELAY_MS,
   type ConsoleToastColor,
 } from '../logic/actionToast';
 
+export type ConsoleOfflinePayload = {
+  itemUrl: string;
+  projectItemId: string;
+  itemNumber: number;
+  repo: string;
+  isPr: boolean;
+  apiPath: string;
+  requestBody: Record<string, unknown>;
+};
+
+export type ConsoleOfflineQueuedAction = {
+  id: string;
+  message: string;
+  color: ConsoleToastColor;
+  enqueuedAt: number;
+} & ConsoleOfflinePayload;
+
 export type ConsoleQueuedAction = {
   message: string;
   color: ConsoleToastColor;
   commit: () => Promise<void>;
   advance: () => void;
+  offline?: ConsoleOfflinePayload;
 };
 
 export type ConsolePendingActionView = {
@@ -23,6 +42,57 @@ export type ConsoleActionError = {
   reason: string;
 };
 
+const OFFLINE_QUEUE_STORAGE_KEY = 'console-offline-action-queue';
+
+const isConsoleOfflineQueuedAction = (
+  item: unknown,
+): item is ConsoleOfflineQueuedAction => {
+  if (typeof item !== 'object' || item === null) return false;
+  const a = item as Record<string, unknown>;
+  return (
+    typeof a.id === 'string' &&
+    typeof a.message === 'string' &&
+    typeof a.color === 'string' &&
+    typeof a.enqueuedAt === 'number' &&
+    typeof a.itemUrl === 'string' &&
+    typeof a.projectItemId === 'string' &&
+    typeof a.itemNumber === 'number' &&
+    typeof a.repo === 'string' &&
+    typeof a.isPr === 'boolean' &&
+    typeof a.apiPath === 'string' &&
+    typeof a.requestBody === 'object' &&
+    a.requestBody !== null
+  );
+};
+
+const loadOfflineQueue = (): ConsoleOfflineQueuedAction[] => {
+  try {
+    const raw = localStorage.getItem(OFFLINE_QUEUE_STORAGE_KEY);
+    if (raw === null) return [];
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(isConsoleOfflineQueuedAction);
+  } catch {
+    return [];
+  }
+};
+
+const saveOfflineQueue = (actions: ConsoleOfflineQueuedAction[]): void => {
+  localStorage.setItem(OFFLINE_QUEUE_STORAGE_KEY, JSON.stringify(actions));
+};
+
+const generateId = (): string => {
+  if (
+    typeof crypto !== 'undefined' &&
+    typeof crypto.randomUUID === 'function'
+  ) {
+    return crypto.randomUUID();
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
+};
+
+const isNetworkError = (error: unknown): boolean => error instanceof TypeError;
+
 const errorReason = (error: unknown): string => {
   if (error instanceof Error && error.message.length > 0) {
     return error.message;
@@ -41,15 +111,24 @@ const computeProgress = (elapsedMs: number): number =>
 export type ConsoleActionQueue = {
   pending: ConsolePendingActionView | null;
   error: ConsoleActionError | null;
+  offlineActions: ConsoleOfflineQueuedAction[];
   enqueue: (action: ConsoleQueuedAction) => void;
   showError: (message: string, reason: string) => void;
   undo: () => void;
   dismissError: () => void;
+  confirmOfflineAction: (id: string) => Promise<void>;
+  discardOfflineAction: (id: string) => void;
 };
 
 export const useConsoleActionQueue = (): ConsoleActionQueue => {
   const [pending, setPending] = useState<ConsolePendingActionView | null>(null);
   const [error, setError] = useState<ConsoleActionError | null>(null);
+  const [offlineActions, setOfflineActions] =
+    useState<ConsoleOfflineQueuedAction[]>(loadOfflineQueue);
+  const offlineActionsRef =
+    useRef<ConsoleOfflineQueuedAction[]>(offlineActions);
+  offlineActionsRef.current = offlineActions;
+
   const actionRef = useRef<ConsoleQueuedAction | null>(null);
   const startRef = useRef<number>(0);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -62,12 +141,35 @@ export const useConsoleActionQueue = (): ConsoleActionQueue => {
     }
   }, []);
 
-  const runCommit = useCallback((action: ConsoleQueuedAction): void => {
-    action.commit().catch((cause: unknown) => {
-      setError({ message: action.message, reason: errorReason(cause) });
+  const addToOfflineQueue = useCallback((action: ConsoleQueuedAction): void => {
+    if (action.offline === undefined) return;
+    const offlineAction: ConsoleOfflineQueuedAction = {
+      id: generateId(),
+      message: action.message,
+      color: action.color,
+      enqueuedAt: Date.now(),
+      ...action.offline,
+    };
+    setOfflineActions((prev) => {
+      const next = [...prev, offlineAction];
+      saveOfflineQueue(next);
+      return next;
     });
   }, []);
 
+  const runCommit = useCallback(
+    (action: ConsoleQueuedAction): void => {
+      action.commit().catch((cause: unknown) => {
+        if (isNetworkError(cause) && action.offline !== undefined) {
+          addToOfflineQueue(action);
+        } else {
+          setError({ message: action.message, reason: errorReason(cause) });
+        }
+      });
+    },
+    [addToOfflineQueue],
+  );
+
   const commitPending = useCallback((): void => {
     const action = actionRef.current;
     clearTimer();
@@ -94,6 +196,36 @@ export const useConsoleActionQueue = (): ConsoleActionQueue => {
     setError({ message, reason });
   }, []);
 
+  const discardOfflineAction = useCallback((id: string): void => {
+    setOfflineActions((prev) => {
+      const next = prev.filter((a) => a.id !== id);
+      saveOfflineQueue(next);
+      return next;
+    });
+  }, []);
+
+  const confirmOfflineAction = useCallback(
+    async (id: string): Promise<void> => {
+      const action = offlineActionsRef.current.find((a) => a.id === id);
+      if (action === undefined) return;
+      try {
+        await postConsoleOperation(action.apiPath, action.requestBody);
+        discardOfflineAction(id);
+      } catch (cause: unknown) {
+        if (isNetworkError(cause)) {
+          setError({
+            message: action.message,
+            reason: 'Still offline — action is still held in the queue',
+          });
+        } else {
+          setError({ message: action.message, reason: errorReason(cause) });
+          discardOfflineAction(id);
+        }
+      }
+    },
+    [discardOfflineAction],
+  );
+
   const enqueue = useCallback(
     (action: ConsoleQueuedAction): void => {
       if (actionRef.current !== null && !committedRef.current) {
@@ -131,5 +263,15 @@ export const useConsoleActionQueue = (): ConsoleActionQueue => {
 
   useEffect(() => clearTimer, [clearTimer]);
 
-  return { pending, error, enqueue, showError, undo, dismissError };
+  return {
+    pending,
+    error,
+    offlineActions,
+    enqueue,
+    showError,
+    undo,
+    dismissError,
+    confirmOfflineAction,
+    discardOfflineAction,
+  };
 };

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

@@ -76,7 +76,7 @@ export type ConsoleOperationsApi = {
   ) => Promise<void>;
 };
 
-const reviewRequest = (
+export const reviewRequest = (
   pjcode: string,
   item: ConsoleListItem,
   prUrl: string,
@@ -129,6 +129,33 @@ const reviewRequest = (
   };
 };
 
+export const buildTriageRequest = (
+  pjcode: string,
+  item: ConsoleListItem,
+  action:
+    | ConsoleNextActionDateAction
+    | ConsoleCloseAction
+    | 'set_story'
+    | 'set_status',
+  extra?: { statusName?: string; storyOptionId?: string },
+): ConsoleTriageRequest => ({
+  pjcode,
+  action,
+  issueUrl: item.url,
+  projectItemId: item.projectItemId,
+  ...(extra ?? {}),
+});
+
+export const buildIntmuxRequest = (
+  pjcode: string,
+  item: ConsoleListItem,
+): ConsoleIntmuxRequest => ({
+  pjcode,
+  action: 'set_intmux',
+  issueUrl: item.url,
+  projectItemId: item.projectItemId,
+});
+
 const missingPjcodeError = (): Error =>
   new Error('No project specified in the URL path.');
 

package/src/adapter/entry-points/console/ui/src/features/console/lib/consoleApi.ts

@@ -293,9 +293,9 @@ const readOperationErrorReason = async (
   return raw;
 };
 
-export const postConsoleOperation = async (
+export const postConsoleOperation = async <T extends Record<string, unknown>>(
   apiPath: string,
-  body: ConsoleReviewRequest | ConsoleTriageRequest | ConsoleIntmuxRequest,
+  body: T,
 ): Promise<void> => {
   const response = await fetch(apiPath, {
     method: 'POST',

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

@@ -3,16 +3,28 @@ import { ConsoleCommentComposer } from '../components/detail/ConsoleCommentCompo
 import type { ConsoleAddInlineComment } from '../components/detail/ConsoleFileDiff';
 import { ConsoleItemDetail } from '../components/detail/ConsoleItemDetail';
 import { ConsoleOperationMenu } from '../components/operations/ConsoleOperationMenu';
+import type { ConsoleOfflinePayload } from '../hooks/useConsoleActionQueue';
 import type { ConsoleCaches } from '../hooks/useConsoleCaches';
 import { useConsoleItemDetailData } from '../hooks/useConsoleItemDetailData';
-import type { ConsoleOperationsApi } from '../hooks/useConsoleOperations';
+import {
+  buildIntmuxRequest,
+  buildTriageRequest,
+  type ConsoleOperationsApi,
+  INTMUX_OPERATION_PATH,
+  REVIEW_OPERATION_PATH,
+  reviewRequest,
+  TRIAGE_OPERATION_PATH,
+} from '../hooks/useConsoleOperations';
 import { buildImageProxyUrl } from '../lib/imageProxy';
 import type { ConsoleActionKind } from '../logic/actionToast';
 import { resolveStoryColorEnum } from '../logic/grouping';
 import {
   AWAITING_WORKSPACE_NAME,
+  type ConsoleCloseAction,
+  type ConsoleNextActionDateAction,
   type ConsoleOperationHandlers,
   type ConsolePendingReviewComment,
+  type ConsoleReviewAction,
 } from '../logic/operations';
 import { mergePostedComments } from '../logic/postedComments';
 import type {
@@ -30,13 +42,70 @@ export type ConsoleQueueActionInput = {
   kind: ConsoleActionKind;
   item: ConsoleListItem;
   commit: () => Promise<void>;
+  offline?: ConsoleOfflinePayload;
 };
 
+const itemOfflineBase = (item: ConsoleListItem) => ({
+  itemUrl: item.url,
+  projectItemId: item.projectItemId,
+  itemNumber: item.number,
+  repo: item.repo,
+  isPr: item.isPr,
+});
+
+const buildReviewOfflinePayload = (
+  pjcode: string,
+  item: ConsoleListItem,
+  prUrl: string,
+  action: ConsoleReviewAction,
+  pendingComments: ConsolePendingReviewComment[],
+): ConsoleOfflinePayload => ({
+  ...itemOfflineBase(item),
+  apiPath: REVIEW_OPERATION_PATH,
+  requestBody: reviewRequest(
+    pjcode,
+    item,
+    prUrl,
+    action,
+    pendingComments,
+  ) as unknown as Record<string, unknown>,
+});
+
+const buildTriageOfflinePayload = (
+  pjcode: string,
+  item: ConsoleListItem,
+  action:
+    | ConsoleNextActionDateAction
+    | ConsoleCloseAction
+    | 'set_story'
+    | 'set_status',
+  extra?: { statusName?: string; storyOptionId?: string },
+): ConsoleOfflinePayload => ({
+  ...itemOfflineBase(item),
+  apiPath: TRIAGE_OPERATION_PATH,
+  requestBody: buildTriageRequest(
+    pjcode,
+    item,
+    action,
+    extra,
+  ) as unknown as Record<string, unknown>,
+});
+
+const buildIntmuxOfflinePayload = (
+  pjcode: string,
+  item: ConsoleListItem,
+): ConsoleOfflinePayload => ({
+  ...itemOfflineBase(item),
+  apiPath: INTMUX_OPERATION_PATH,
+  requestBody: buildIntmuxRequest(pjcode, item),
+});
+
 export type ConsoleItemDetailContainerProps = {
   tab: ConsoleTabName;
   item: ConsoleListItem;
   caches: ConsoleCaches;
   operations: ConsoleOperationsApi;
+  pjcode?: string | null;
   statusOptions: ConsoleFieldOption[];
   storyColors: ConsoleStoryColorSource;
   storyName: string | null;
@@ -52,6 +121,7 @@ export const ConsoleItemDetailContainer = ({
   item,
   caches,
   operations,
+  pjcode,
   statusOptions,
   storyColors,
   storyName,
@@ -116,6 +186,16 @@ export const ConsoleItemDetailContainer = ({
         item,
         commit: () =>
           operations.reviewPullRequest(item, prUrl, action, reviewComments),
+        offline:
+          pjcode != null
+            ? buildReviewOfflinePayload(
+                pjcode,
+                item,
+                prUrl,
+                action,
+                reviewComments,
+              )
+            : undefined,
       });
     },
     onSetNextActionDate: (action) => {
@@ -123,6 +203,10 @@ export const ConsoleItemDetailContainer = ({
         kind: { type: 'next_action_date', action },
         item,
         commit: () => operations.setNextActionDate(item, action),
+        offline:
+          pjcode != null
+            ? buildTriageOfflinePayload(pjcode, item, action)
+            : undefined,
       });
     },
     onSetStory: (option: ConsoleFieldOption) => {
@@ -130,6 +214,12 @@ export const ConsoleItemDetailContainer = ({
         kind: { type: 'set_story', optionName: option.name },
         item,
         commit: () => operations.setStory(item, option),
+        offline:
+          pjcode != null
+            ? buildTriageOfflinePayload(pjcode, item, 'set_story', {
+                storyOptionId: option.id,
+              })
+            : undefined,
       });
     },
     onSetStatus: (option: ConsoleFieldOption) => {
@@ -137,6 +227,12 @@ export const ConsoleItemDetailContainer = ({
         kind: { type: 'set_status', optionName: option.name },
         item,
         commit: () => operations.setStatus(item, option),
+        offline:
+          pjcode != null
+            ? buildTriageOfflinePayload(pjcode, item, 'set_status', {
+                statusName: option.name,
+              })
+            : undefined,
       });
     },
     onSetInTmuxByHuman: (option: ConsoleFieldOption) => {
@@ -144,6 +240,8 @@ export const ConsoleItemDetailContainer = ({
         kind: { type: 'set_in_tmux_by_human', optionName: option.name },
         item,
         commit: () => operations.setInTmuxByHuman(item, option),
+        offline:
+          pjcode != null ? buildIntmuxOfflinePayload(pjcode, item) : undefined,
       });
     },
     onClose: (action) => {
@@ -151,6 +249,10 @@ export const ConsoleItemDetailContainer = ({
         kind: { type: 'close', action },
         item,
         commit: () => operations.closeIssue(item, action),
+        offline:
+          pjcode != null
+            ? buildTriageOfflinePayload(pjcode, item, action)
+            : undefined,
       });
     },
     onOkAndAwaitingWorkspace: (option: ConsoleFieldOption) => {

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

@@ -4,6 +4,10 @@ import { ConsoleTimerSettingsModalDialog } from '../components/layout/ConsoleTim
 import { ConsoleItemList } from '../components/list/ConsoleItemList';
 import { ConsoleQueuedList } from '../components/list/ConsoleQueuedList';
 import { ConsoleStoryList } from '../components/list/ConsoleStoryList';
+import {
+  type ConsoleOfflinePendingActionItem,
+  ConsoleOfflinePendingActionsPanel,
+} from '../components/operations/ConsoleOfflinePendingActionsPanel';
 import {
   ConsoleErrorToast,
   ConsoleUndoToast,
@@ -52,8 +56,10 @@ import { findNextNonEmptyTabToRight } from '../logic/tabAdvance';
 import { findNextPjcodeWithMinutes } from '../logic/timerSettings';
 import type {
   ConsoleColor,
+  ConsoleIssueState,
   ConsoleListItem,
   ConsoleOverlayStatus,
+  ConsolePullRequestStatus,
   ConsoleStoryEntry,
   ConsoleTabName,
 } from '../logic/types';
@@ -151,6 +157,119 @@ export const ConsolePage = () => {
   const actionQueue = useConsoleActionQueue();
   const now = Date.now();
 
+  const [isOnline, setIsOnline] = useState(() => navigator.onLine);
+  useEffect(() => {
+    const handleOnline = (): void => setIsOnline(true);
+    const handleOffline = (): void => setIsOnline(false);
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  const [offlineItemStates, setOfflineItemStates] = useState<
+    Map<string, ConsoleIssueState | null>
+  >(new Map());
+
+  const [offlinePrStatuses, setOfflinePrStatuses] = useState<
+    Map<string, ConsolePullRequestStatus | null>
+  >(new Map());
+
+  const [offlineFetchErrors, setOfflineFetchErrors] = useState<Set<string>>(
+    new Set(),
+  );
+
+  useEffect(() => {
+    if (!isOnline || actionQueue.offlineActions.length === 0) return;
+    for (const action of actionQueue.offlineActions) {
+      if (offlineItemStates.has(action.id) || offlineFetchErrors.has(action.id))
+        continue;
+      setOfflineItemStates((prev) => new Map(prev).set(action.id, null));
+      caches.client
+        .fetchIssueState(action.itemUrl)
+        .then((state) => {
+          setOfflineItemStates((prev) => new Map(prev).set(action.id, state));
+          if (action.isPr) {
+            setOfflinePrStatuses((prev) => new Map(prev).set(action.id, null));
+            caches.client
+              .fetchPullRequestStatus(action.itemUrl)
+              .then((prStatus) => {
+                setOfflinePrStatuses((prev) =>
+                  new Map(prev).set(action.id, prStatus),
+                );
+              })
+              .catch((fetchError: unknown) => {
+                console.warn(
+                  'Failed to fetch PR status for offline action:',
+                  fetchError,
+                );
+              });
+          }
+        })
+        .catch((fetchError: unknown) => {
+          console.warn(
+            'Failed to fetch current state for offline action:',
+            fetchError,
+          );
+          setOfflineFetchErrors((prev) => new Set(prev).add(action.id));
+        });
+    }
+  }, [
+    isOnline,
+    actionQueue.offlineActions,
+    caches.client,
+    offlineItemStates,
+    offlineFetchErrors,
+  ]);
+
+  const [isConfirmingOffline, setIsConfirmingOffline] = useState(false);
+
+  const handleConfirmOffline = useCallback(
+    async (id: string): Promise<void> => {
+      setIsConfirmingOffline(true);
+      try {
+        await actionQueue.confirmOfflineAction(id);
+      } finally {
+        setIsConfirmingOffline(false);
+      }
+    },
+    [actionQueue],
+  );
+
+  const offlinePanelActions = useMemo(
+    (): ConsoleOfflinePendingActionItem[] =>
+      actionQueue.offlineActions.map((a) => {
+        const state = offlineItemStates.get(a.id) ?? null;
+        const prStatus = offlinePrStatuses.get(a.id) ?? null;
+        const fetchError = offlineFetchErrors.has(a.id);
+        return {
+          id: a.id,
+          message: a.message,
+          color: a.color,
+          itemNumber: a.itemNumber,
+          isPr: a.isPr,
+          currentTitle: fetchError ? null : (state?.title ?? null),
+          currentState: fetchError
+            ? null
+            : state === null
+              ? null
+              : state.merged
+                ? 'closed'
+                : (state.state as 'open' | 'closed'),
+          currentPrStatus: prStatus,
+          fetchError,
+        };
+      }),
+    [
+      actionQueue.offlineActions,
+      offlineItemStates,
+      offlinePrStatuses,
+      offlineFetchErrors,
+    ],
+  );
+
   const activeSnapshot = snapshots[activeTab];
   const pendingItems = useMemo(() => {
     if (activeSnapshot === null) {
@@ -294,6 +413,7 @@ export const ConsolePage = () => {
         message: formatActionToast(input.kind, input.item, activeTab),
         color: actionToastColor(input.kind),
         commit: input.commit,
+        offline: input.offline,
         advance: () => {
           if (actionAdvances(input.kind, activeTab)) {
             if (
@@ -506,6 +626,13 @@ export const ConsolePage = () => {
           onDismiss={actionQueue.dismissError}
         />
       )}
+      <ConsoleOfflinePendingActionsPanel
+        actions={offlinePanelActions}
+        isOnline={isOnline}
+        isConfirming={isConfirmingOffline}
+        onConfirm={handleConfirmOffline}
+        onDiscard={actionQueue.discardOfflineAction}
+      />
       <ConsoleTabList
         activeTab={activeTab}
         counts={counts}
@@ -585,6 +712,7 @@ export const ConsolePage = () => {
             item={selectedItem}
             caches={caches}
             operations={operations}
+            pjcode={pjcode}
             statusOptions={statusOptions}
             storyColors={storyColors}
             storyName={storyNameForSelected}