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

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.93.0](https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/compare/v1.92.1...v1.93.0) (2026-06-22)
+
+
+### Features
+
+* **console:** cancellable action toast, auto-advance, file diff, and swipe navigation for reference parity ([#893](https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/893)) ([9f983af](https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/commit/9f983af0dfff353ff22c9d126b18aff31bbcb082)), closes [#891](https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/891)
+
 ## [1.92.1](https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/compare/v1.92.0...v1.92.1) (2026-06-21)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "github-issue-tower-defence-management",
-  "version": "1.92.1",
+  "version": "1.93.0",
   "description": "",
   "main": "bin/index.js",
   "scripts": {

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleChangedFileList.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { consoleChangedFilesFixture } from '../../testing/fixtures';
 import { ConsoleChangedFileList } from './ConsoleChangedFileList';
 
@@ -19,6 +19,54 @@ describe('ConsoleChangedFileList', () => {
     expect(getByText('M')).toBeInTheDocument();
   });
 
+  it('keeps the diff hidden until the file row is clicked', () => {
+    const { container, getByText } = render(
+      <ConsoleChangedFileList
+        files={consoleChangedFilesFixture}
+        isLoading={false}
+        error={null}
+      />,
+    );
+    expect(container.querySelector('.console-file-diff')).toBeNull();
+    fireEvent.click(
+      getByText('src/adapter/entry-points/console/consoleServer.ts'),
+    );
+    expect(container.querySelector('.console-file-diff')).toBeInTheDocument();
+    const codeText = [...container.querySelectorAll('.console-diff-code')].map(
+      (cell) => cell.textContent,
+    );
+    expect(codeText).toContain('+          npm ci');
+  });
+
+  it('collapses the diff again when the file row is clicked twice', () => {
+    const { container, getByText } = render(
+      <ConsoleChangedFileList
+        files={consoleChangedFilesFixture}
+        isLoading={false}
+        error={null}
+      />,
+    );
+    const path = getByText('src/adapter/entry-points/console/consoleServer.ts');
+    fireEvent.click(path);
+    expect(container.querySelector('.console-file-diff')).toBeInTheDocument();
+    fireEvent.click(path);
+    expect(container.querySelector('.console-file-diff')).toBeNull();
+  });
+
+  it('marks the expanded file row via aria-expanded', () => {
+    const { getAllByRole } = render(
+      <ConsoleChangedFileList
+        files={consoleChangedFilesFixture}
+        isLoading={false}
+        error={null}
+      />,
+    );
+    const firstRow = getAllByRole('button')[0];
+    expect(firstRow).toHaveAttribute('aria-expanded', 'false');
+    fireEvent.click(firstRow);
+    expect(firstRow).toHaveAttribute('aria-expanded', 'true');
+  });
+
   it('shows the loading state', () => {
     const { getByText } = render(
       <ConsoleChangedFileList files={[]} isLoading error={null} />,

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleChangedFileList.tsx

@@ -1,5 +1,7 @@
+import { useState } from 'react';
 import { fileStatusBadge } from '../../logic/fileStatus';
 import type { ConsoleChangedFile } from '../../logic/types';
+import { ConsoleFileDiff } from './ConsoleFileDiff';
 
 export type ConsoleChangedFileListProps = {
   files: ConsoleChangedFile[];
@@ -7,6 +9,37 @@ export type ConsoleChangedFileListProps = {
   error: string | null;
 };
 
+const ConsoleChangedFileRow = ({ file }: { file: ConsoleChangedFile }) => {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const badge = fileStatusBadge(file.status);
+  return (
+    <li className="console-file">
+      <button
+        type="button"
+        className="console-file-row"
+        aria-expanded={expanded}
+        onClick={() => setExpanded((value) => !value)}
+      >
+        <span className="console-file-caret">{expanded ? '▾' : '▸'}</span>
+        <span
+          className="console-file-badge"
+          style={{ color: badge.color, borderColor: badge.color }}
+        >
+          {badge.label}
+        </span>
+        <span className="console-file-path">{file.path}</span>
+        <span className="console-file-stat console-file-add">
+          +{file.additions}
+        </span>
+        <span className="console-file-stat console-file-del">
+          -{file.deletions}
+        </span>
+      </button>
+      {expanded && <ConsoleFileDiff patch={file.patch} />}
+    </li>
+  );
+};
+
 export const ConsoleChangedFileList = ({
   files,
   isLoading,
@@ -30,26 +63,9 @@ export const ConsoleChangedFileList = ({
 
   return (
     <ul className="console-files">
-      {files.map((file) => {
-        const badge = fileStatusBadge(file.status);
-        return (
-          <li key={file.path} className="console-file">
-            <span
-              className="console-file-badge"
-              style={{ color: badge.color, borderColor: badge.color }}
-            >
-              {badge.label}
-            </span>
-            <span className="console-file-path">{file.path}</span>
-            <span className="console-file-stat console-file-add">
-              +{file.additions}
-            </span>
-            <span className="console-file-stat console-file-del">
-              -{file.deletions}
-            </span>
-          </li>
-        );
-      })}
+      {files.map((file) => (
+        <ConsoleChangedFileRow key={file.path} file={file} />
+      ))}
     </ul>
   );
 };

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleFileDiff.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { consoleChangedFilesFixture } from '../../testing/fixtures';
+import { ConsoleFileDiff } from './ConsoleFileDiff';
+
+const meta: Meta<typeof ConsoleFileDiff> = {
+  title: 'Console/ConsoleFileDiff',
+  component: ConsoleFileDiff,
+  args: { patch: consoleChangedFilesFixture[0].patch },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleFileDiff>;
+
+export const WithPatch: Story = {};
+
+export const NoPatch: Story = {
+  args: { patch: null },
+};

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleFileDiff.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import { consoleChangedFilesFixture } from '../../testing/fixtures';
+import { ConsoleFileDiff } from './ConsoleFileDiff';
+
+describe('ConsoleFileDiff', () => {
+  it('renders added, removed and context lines from the patch', () => {
+    const { container } = render(
+      <ConsoleFileDiff patch={consoleChangedFilesFixture[0].patch} />,
+    );
+    const codeText = [...container.querySelectorAll('.console-diff-code')].map(
+      (cell) => cell.textContent,
+    );
+    expect(codeText).toContain('+          npm ci');
+    expect(codeText).toContain('-          npm install');
+    expect(container.querySelectorAll('.console-diff-add').length).toBe(2);
+    expect(container.querySelectorAll('.console-diff-del').length).toBe(1);
+    expect(container.querySelectorAll('.console-diff-hunk').length).toBe(1);
+  });
+
+  it('shows a placeholder when there is no patch', () => {
+    const { getByText } = render(<ConsoleFileDiff patch={null} />);
+    expect(getByText('(no diff / binary or too large)')).toBeInTheDocument();
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsoleFileDiff.tsx

@@ -0,0 +1,30 @@
+import { parseUnifiedDiff } from '../../logic/diff';
+
+export type ConsoleFileDiffProps = {
+  patch: string | null;
+};
+
+export const ConsoleFileDiff = ({ patch }: ConsoleFileDiffProps) => {
+  if (patch === null || patch === '') {
+    return (
+      <p className="console-file-diff-empty">(no diff / binary or too large)</p>
+    );
+  }
+  const rows = parseUnifiedDiff(patch);
+  return (
+    <table className="console-file-diff">
+      <tbody>
+        {rows.map((row) => (
+          <tr
+            key={`${row.kind}:${row.oldLineNumber ?? 'x'}:${row.newLineNumber ?? 'x'}:${row.content}`}
+            className={`console-diff-row console-diff-${row.kind}`}
+          >
+            <td className="console-diff-ln">{row.oldLineNumber ?? ''}</td>
+            <td className="console-diff-ln">{row.newLineNumber ?? ''}</td>
+            <td className="console-diff-code">{row.content}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

package/src/adapter/entry-points/console/ui/src/features/console/components/detail/ConsolePullRequestDetail.tsx

@@ -34,9 +34,13 @@ export const ConsolePullRequestDetail = ({
   now,
 }: ConsolePullRequestSectionProps) => {
   const summary = pullRequest.summary;
+  const filesCount =
+    filesAreLoading || filesError !== null ? null : files.length;
+  const commitsCount =
+    commitsAreLoading || commitsError !== null ? null : commits.length;
   return (
-    <section className="console-pr-section">
-      <header className="console-pr-section-header">
+    <>
+      <div className="console-pr-header">
         <a
           href={pullRequest.url}
           className="console-pr-section-title"
@@ -48,34 +52,36 @@ export const ConsolePullRequestDetail = ({
         {pullRequest.isDraft && (
           <span className="console-pr-section-state">draft</span>
         )}
-      </header>
-      <div className="console-pr-statbar">
-        {pullRequest.branchName !== null && (
-          <span className="console-pr-branch">{pullRequest.branchName}</span>
-        )}
-        {summary !== null && (
-          <>
-            <span className="console-pr-add">+{summary.additions}</span>
-            <span className="console-pr-del">-{summary.deletions}</span>
-            <span className="console-pr-files-count">
-              {summary.changedFiles} files
-            </span>
-          </>
-        )}
+        <div className="console-pr-statbar">
+          {pullRequest.branchName !== null && (
+            <span className="console-pr-branch">{pullRequest.branchName}</span>
+          )}
+          {summary !== null && (
+            <>
+              <span className="console-pr-add">+{summary.additions}</span>
+              <span className="console-pr-del">-{summary.deletions}</span>
+              <span className="console-pr-files-count">
+                {summary.changedFiles} files
+              </span>
+            </>
+          )}
+        </div>
       </div>
-      {bodyIsLoading ? (
-        <p className="console-pr-body-loading">Loading description...</p>
-      ) : (
-        <ConsoleMarkdownContent body={summary?.body ?? body} />
-      )}
-      <ConsolePanel title="Changed files">
+      <ConsolePanel title="Description" defaultCollapsed>
+        {bodyIsLoading ? (
+          <p className="console-pr-body-loading">Loading description...</p>
+        ) : (
+          <ConsoleMarkdownContent body={summary?.body ?? body} />
+        )}
+      </ConsolePanel>
+      <ConsolePanel title="Changed files" count={filesCount}>
         <ConsoleChangedFileList
           files={files}
           isLoading={filesAreLoading}
           error={filesError}
         />
       </ConsolePanel>
-      <ConsolePanel title="Commits" defaultCollapsed>
+      <ConsolePanel title="Commits" count={commitsCount} defaultCollapsed>
         <ConsoleCommitList
           commits={commits}
           isLoading={commitsAreLoading}
@@ -83,6 +89,6 @@ export const ConsolePullRequestDetail = ({
           now={now}
         />
       </ConsolePanel>
-    </section>
+    </>
   );
 };

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConsoleUndoToast } from './ConsoleUndoToast';
+
+const meta: Meta<typeof ConsoleUndoToast> = {
+  title: 'Console/ConsoleUndoToast',
+  component: ConsoleUndoToast,
+  args: {
+    message: 'Approved — PR #851',
+    color: 'green',
+    remainingSeconds: 5,
+    progress: 1,
+    onUndo: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleUndoToast>;
+
+export const Approve: Story = {};
+
+export const Reject: Story = {
+  args: {
+    message: 'Rejected — PR #853',
+    color: 'amber',
+    remainingSeconds: 3,
+    progress: 0.6,
+  },
+};
+
+export const StatusChange: Story = {
+  args: {
+    message: 'Status → Awaiting Workspace — #845',
+    color: 'blue',
+    remainingSeconds: 2,
+    progress: 0.4,
+  },
+};
+
+export const CloseIssue: Story = {
+  args: {
+    message: 'Closed — #845',
+    color: 'red',
+    remainingSeconds: 1,
+    progress: 0.2,
+  },
+};

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

@@ -0,0 +1,54 @@
+import { fireEvent, render } from '@testing-library/react';
+import { ConsoleUndoToast } from './ConsoleUndoToast';
+
+describe('ConsoleUndoToast', () => {
+  const baseProps = {
+    message: 'Approved — PR #851',
+    color: 'green' as const,
+    remainingSeconds: 5,
+    progress: 1,
+    onUndo: () => {},
+  };
+
+  it('shows the action message and the countdown', () => {
+    const { getByText } = render(<ConsoleUndoToast {...baseProps} />);
+    expect(getByText('Approved — PR #851')).toBeInTheDocument();
+    expect(getByText('5s')).toBeInTheDocument();
+  });
+
+  it('renders the color modifier class', () => {
+    const { container } = render(<ConsoleUndoToast {...baseProps} />);
+    expect(
+      container.querySelector('.console-undo-toast-green'),
+    ).toBeInTheDocument();
+  });
+
+  it('shrinks the progress bar with the remaining fraction', () => {
+    const { container } = render(
+      <ConsoleUndoToast {...baseProps} progress={0.4} />,
+    );
+    const bar = container.querySelector(
+      '.console-undo-toast-bar',
+    ) as HTMLElement;
+    expect(bar.style.width).toBe('40%');
+  });
+
+  it('clamps the progress bar width within 0 and 100 percent', () => {
+    const { container } = render(
+      <ConsoleUndoToast {...baseProps} progress={1.4} />,
+    );
+    const bar = container.querySelector(
+      '.console-undo-toast-bar',
+    ) as HTMLElement;
+    expect(bar.style.width).toBe('100%');
+  });
+
+  it('invokes onUndo when the Undo control is clicked', () => {
+    const onUndo = jest.fn();
+    const { getByText } = render(
+      <ConsoleUndoToast {...baseProps} onUndo={onUndo} />,
+    );
+    fireEvent.click(getByText('Undo'));
+    expect(onUndo).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,36 @@
+import type { ConsoleToastColor } from '../../logic/actionToast';
+
+export type ConsoleUndoToastProps = {
+  message: string;
+  color: ConsoleToastColor;
+  remainingSeconds: number;
+  progress: number;
+  onUndo: () => void;
+};
+
+export const ConsoleUndoToast = ({
+  message,
+  color,
+  remainingSeconds,
+  progress,
+  onUndo,
+}: ConsoleUndoToastProps) => (
+  <div
+    className={`console-undo-toast console-undo-toast-${color}`}
+    role="status"
+    aria-live="polite"
+  >
+    <span className="console-undo-toast-message">{message}</span>
+    <button type="button" className="console-undo-toast-undo" onClick={onUndo}>
+      Undo
+    </button>
+    <span className="console-undo-toast-countdown" aria-hidden="true">
+      {remainingSeconds}s
+    </span>
+    <span
+      className="console-undo-toast-bar"
+      aria-hidden="true"
+      style={{ width: `${Math.max(0, Math.min(100, progress * 100))}%` }}
+    />
+  </div>
+);

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 };
+};