github-issue-tower-defence-management 1.94.3 → 1.95.0

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { ImageProxyUrlBuilder } from '../../lib/imageProxy';
 import { colorFromEnum } from '../../logic/colors';
 import {
   formatFullTimestamp,
@@ -54,6 +55,7 @@ export type ConsoleItemDetailProps = {
   now: number;
   commentComposer: ReactNode;
   operationBar: ReactNode;
+  buildImageProxyUrl?: ImageProxyUrlBuilder;
 };
 
 export const ConsoleItemDetail = ({
@@ -78,6 +80,7 @@ export const ConsoleItemDetail = ({
   now,
   commentComposer,
   operationBar,
+  buildImageProxyUrl,
 }: ConsoleItemDetailProps) => {
   const resolvedState = state?.state ?? 'open';
   const merged = state?.merged ?? false;
@@ -192,7 +195,10 @@ export const ConsoleItemDetail = ({
         ) : bodyIsLoading ? (
           <p className="console-detail-body-loading">Loading description...</p>
         ) : (
-          <ConsoleMarkdownContent body={body} />
+          <ConsoleMarkdownContent
+            body={body}
+            buildImageProxyUrl={buildImageProxyUrl}
+          />
         )}
       </ConsolePanel>
 
@@ -216,6 +222,7 @@ export const ConsoleItemDetail = ({
           isLoading={commentsAreLoading}
           error={commentsError}
           now={now}
+          buildImageProxyUrl={buildImageProxyUrl}
         />
       </ConsolePanel>
 
@@ -244,6 +251,7 @@ export const ConsoleItemDetail = ({
             commitsAreLoading={related.commitsAreLoading}
             commitsError={related.commitsError}
             now={now}
+            buildImageProxyUrl={buildImageProxyUrl}
           />
         ))}
 

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

@@ -1,3 +1,4 @@
+import type { ImageProxyUrlBuilder } from '../../lib/imageProxy';
 import type {
   ConsoleChangedFile,
   ConsoleCommit,
@@ -19,6 +20,7 @@ export type ConsolePullRequestSectionProps = {
   commitsAreLoading: boolean;
   commitsError: string | null;
   now: number;
+  buildImageProxyUrl?: ImageProxyUrlBuilder;
 };
 
 export const ConsolePullRequestDetail = ({
@@ -32,6 +34,7 @@ export const ConsolePullRequestDetail = ({
   commitsAreLoading,
   commitsError,
   now,
+  buildImageProxyUrl,
 }: ConsolePullRequestSectionProps) => {
   const summary = pullRequest.summary;
   const filesCount =
@@ -71,7 +74,10 @@ export const ConsolePullRequestDetail = ({
         {bodyIsLoading ? (
           <p className="console-pr-body-loading">Loading description...</p>
         ) : (
-          <ConsoleMarkdownContent body={summary?.body ?? body} />
+          <ConsoleMarkdownContent
+            body={summary?.body ?? body}
+            buildImageProxyUrl={buildImageProxyUrl}
+          />
         )}
       </ConsolePanel>
       <ConsolePanel title="Changed files" count={filesCount}>

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

@@ -59,6 +59,20 @@ export const ZeroCountActiveTabStaysVisible: Story = {
   },
 };
 
+export const AfterAutoAdvanceToNextTab: Story = {
+  args: {
+    activeTab: 'unread',
+    counts: {
+      prs: 0,
+      triage: 0,
+      unread: 7,
+      'failed-preparation': 2,
+      'todo-by-human': 4,
+    },
+    onSelectTab: () => {},
+  },
+};
+
 export const Interactive: Story = {
   render: (args) => {
     const [activeTab, setActiveTab] = useState<ConsoleTabName>('prs');

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

@@ -0,0 +1,78 @@
+import {
+  buildImageProxyUrl,
+  isProxyableImageUrl,
+  rewriteGitHubImageSources,
+} from './imageProxy';
+
+describe('isProxyableImageUrl', () => {
+  it('matches github user-attachments urls', () => {
+    expect(
+      isProxyableImageUrl(
+        'https://github.com/user-attachments/assets/0a1b2c3d',
+      ),
+    ).toBe(true);
+  });
+
+  it('matches githubusercontent subdomain urls', () => {
+    expect(
+      isProxyableImageUrl(
+        'https://private-user-images.githubusercontent.com/1/2.png',
+      ),
+    ).toBe(true);
+  });
+
+  it('does not match arbitrary external hosts', () => {
+    expect(isProxyableImageUrl('https://example.com/avatar.png')).toBe(false);
+  });
+});
+
+describe('buildImageProxyUrl', () => {
+  it('encodes the source url and appends the token', () => {
+    const src = 'https://github.com/user-attachments/assets/abc?x=1';
+    expect(buildImageProxyUrl(src, 'tk')).toBe(
+      `/api/img?url=${encodeURIComponent(src)}&k=tk`,
+    );
+  });
+
+  it('omits the token when it is null', () => {
+    const src = 'https://github.com/user-attachments/assets/abc';
+    expect(buildImageProxyUrl(src, null)).toBe(
+      `/api/img?url=${encodeURIComponent(src)}`,
+    );
+  });
+});
+
+describe('rewriteGitHubImageSources', () => {
+  const buildProxyUrl = (src: string): string =>
+    buildImageProxyUrl(src, 'console-token');
+
+  it('rewrites an allow-listed github image src to the proxy url', () => {
+    const githubSrc = 'https://github.com/user-attachments/assets/abc';
+    const html = `<p><img src="${githubSrc}" alt="shot" /></p>`;
+    const result = rewriteGitHubImageSources(html, buildProxyUrl);
+    expect(result).toContain(`/api/img?url=${encodeURIComponent(githubSrc)}`);
+    expect(result).toContain('k=console-token');
+    expect(result).not.toContain(`src="${githubSrc}"`);
+  });
+
+  it('rewrites a githubusercontent image src to the proxy url', () => {
+    const githubSrc =
+      'https://private-user-images.githubusercontent.com/1/2.png';
+    const html = `<img src="${githubSrc}" />`;
+    const result = rewriteGitHubImageSources(html, buildProxyUrl);
+    expect(result).toContain(`/api/img?url=${encodeURIComponent(githubSrc)}`);
+  });
+
+  it('leaves a non-matching image src unchanged', () => {
+    const externalSrc = 'https://example.com/avatar.png';
+    const html = `<img src="${externalSrc}" />`;
+    const result = rewriteGitHubImageSources(html, buildProxyUrl);
+    expect(result).toContain(`src="${externalSrc}"`);
+    expect(result).not.toContain('/api/img');
+  });
+
+  it('returns the original html when there is no image to rewrite', () => {
+    const html = '<p>no images here</p>';
+    expect(rewriteGitHubImageSources(html, buildProxyUrl)).toBe(html);
+  });
+});

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

@@ -0,0 +1,41 @@
+const ALLOWED_IMAGE_URL =
+  /^https:\/\/github\.com\/user-attachments\/|^https:\/\/[a-z0-9][a-z0-9.-]*\.githubusercontent\.com\//;
+
+export const isProxyableImageUrl = (src: string): boolean =>
+  ALLOWED_IMAGE_URL.test(src);
+
+export type ImageProxyUrlBuilder = (src: string) => string;
+
+export const buildImageProxyUrl = (
+  src: string,
+  token: string | null,
+): string => {
+  if (token === null) {
+    return `/api/img?url=${encodeURIComponent(src)}`;
+  }
+  return `/api/img?url=${encodeURIComponent(src)}&k=${encodeURIComponent(token)}`;
+};
+
+export const rewriteGitHubImageSources = (
+  html: string,
+  buildProxyUrl: ImageProxyUrlBuilder,
+): string => {
+  if (typeof document === 'undefined') {
+    return html;
+  }
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  const images = template.content.querySelectorAll('img[src]');
+  let rewrote = false;
+  images.forEach((image) => {
+    const src = image.getAttribute('src') ?? '';
+    if (isProxyableImageUrl(src)) {
+      image.setAttribute('src', buildProxyUrl(src));
+      rewrote = true;
+    }
+  });
+  if (!rewrote) {
+    return html;
+  }
+  return template.innerHTML;
+};

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

@@ -0,0 +1,48 @@
+import { findNextNonEmptyTabToRight } from './tabAdvance';
+import type { ConsoleTabName } from './types';
+
+const counts = (
+  overrides: Partial<Record<ConsoleTabName, number>>,
+): Record<ConsoleTabName, number> => ({
+  prs: 0,
+  triage: 0,
+  unread: 0,
+  'failed-preparation': 0,
+  'todo-by-human': 0,
+  ...overrides,
+});
+
+describe('findNextNonEmptyTabToRight', () => {
+  it('returns the first non-empty tab to the right of the active tab', () => {
+    expect(findNextNonEmptyTabToRight('prs', counts({ unread: 7 }))).toBe(
+      'unread',
+    );
+  });
+
+  it('skips empty tabs and returns the next non-empty tab further right', () => {
+    expect(
+      findNextNonEmptyTabToRight(
+        'prs',
+        counts({ triage: 0, unread: 0, 'todo-by-human': 4 }),
+      ),
+    ).toBe('todo-by-human');
+  });
+
+  it('returns the immediately adjacent tab when it is non-empty', () => {
+    expect(
+      findNextNonEmptyTabToRight('prs', counts({ triage: 12, unread: 7 })),
+    ).toBe('triage');
+  });
+
+  it('returns null when no tab to the right has any items', () => {
+    expect(
+      findNextNonEmptyTabToRight('unread', counts({ prs: 35 })),
+    ).toBeNull();
+  });
+
+  it('returns null when the active tab is the last tab', () => {
+    expect(
+      findNextNonEmptyTabToRight('todo-by-human', counts({ prs: 35 })),
+    ).toBeNull();
+  });
+});

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

@@ -0,0 +1,19 @@
+import type { ConsoleTabName } from './types';
+import { CONSOLE_TABS } from './types';
+
+export const findNextNonEmptyTabToRight = (
+  activeTab: ConsoleTabName,
+  counts: Record<ConsoleTabName, number>,
+): ConsoleTabName | null => {
+  const activeIndex = CONSOLE_TABS.findIndex((tab) => tab.name === activeTab);
+  if (activeIndex === -1) {
+    return null;
+  }
+  for (let index = activeIndex + 1; index < CONSOLE_TABS.length; index += 1) {
+    const candidate = CONSOLE_TABS[index].name;
+    if ((counts[candidate] ?? 0) > 0) {
+      return candidate;
+    }
+  }
+  return null;
+};

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

@@ -1,9 +1,12 @@
+import { useCallback } from 'react';
 import { ConsoleCommentComposer } from '../components/detail/ConsoleCommentComposer';
 import { ConsoleItemDetail } from '../components/detail/ConsoleItemDetail';
 import { ConsoleOperationMenu } from '../components/operations/ConsoleOperationMenu';
 import type { ConsoleCaches } from '../hooks/useConsoleCaches';
 import { useConsoleItemDetailData } from '../hooks/useConsoleItemDetailData';
 import type { ConsoleOperationsApi } from '../hooks/useConsoleOperations';
+import { useConsoleToken } from '../hooks/useConsoleToken';
+import { buildImageProxyUrl } from '../lib/imageProxy';
 import type { ConsoleActionKind } from '../logic/actionToast';
 import { resolveStoryColorEnum } from '../logic/grouping';
 import type { ConsoleOperationHandlers } from '../logic/operations';
@@ -50,6 +53,11 @@ export const ConsoleItemDetailContainer = ({
   onQueueAction,
 }: ConsoleItemDetailContainerProps) => {
   const detail = useConsoleItemDetailData(caches, item);
+  const { token } = useConsoleToken();
+  const resolveImageProxyUrl = useCallback(
+    (src: string): string => buildImageProxyUrl(src, token),
+    [token],
+  );
   const hasPullRequest = item.isPr || detail.relatedPullRequests.length > 0;
 
   const handlers: ConsoleOperationHandlers = {
@@ -140,6 +148,7 @@ export const ConsoleItemDetailContainer = ({
       commitsError={detail.commitsError}
       relatedPullRequests={detail.relatedPullRequests}
       now={now}
+      buildImageProxyUrl={resolveImageProxyUrl}
       commentComposer={
         <ConsoleCommentComposer
           isPr={item.isPr}

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

@@ -128,10 +128,8 @@ describe('ConsolePage', () => {
 
       await waitFor(() => {
         expect(
-          getByText('Awaiting Quality Check')
-            .closest('a')
-            ?.querySelector('.console-tab-badge')?.textContent,
-        ).toBe('0');
+          getByText('Unread').closest('a')?.getAttribute('aria-current'),
+        ).toBe('page');
       });
     } finally {
       jest.useRealTimers();
@@ -397,3 +395,40 @@ describe('ConsolePage auto-advance', () => {
     }
   });
 });
+
+describe('ConsolePage auto-advance tab', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    window.history.replaceState({}, '', '/projects/umino/prs?k=token');
+    installFetch();
+  });
+
+  it('auto-advances to the next non-empty tab on the right after the active tab is driven to zero', 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('← Back to list')).toBeInTheDocument();
+      fireEvent.click(getByText('Approve'));
+
+      act(() => {
+        jest.advanceTimersByTime(5100);
+      });
+
+      await waitFor(() => {
+        expect(
+          getByText('Notify finished issue preparation'),
+        ).toBeInTheDocument();
+      });
+      expect(
+        getByText('Unread').closest('a')?.getAttribute('aria-current'),
+      ).toBe('page');
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+});

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ConsoleTabList } from '../components/layout/ConsoleTabList';
 import { ConsoleItemList } from '../components/list/ConsoleItemList';
 import { ConsoleUndoToast } from '../components/operations/ConsoleUndoToast';
@@ -27,6 +27,7 @@ import {
   overlayKeyForItem,
 } from '../logic/overlay';
 import type { ConsoleSwipeDirection } from '../logic/swipe';
+import { findNextNonEmptyTabToRight } from '../logic/tabAdvance';
 import type {
   ConsoleListItem,
   ConsoleOverlayStatus,
@@ -109,6 +110,26 @@ export const ConsolePage = () => {
     );
   }, [selectedItemKey, activeSnapshot]);
 
+  const activeCount = counts[activeTab];
+  const previousActiveTabCountRef = useRef<{
+    tab: ConsoleTabName;
+    count: number;
+  }>({ tab: activeTab, count: activeCount });
+  useEffect(() => {
+    const previous = previousActiveTabCountRef.current;
+    previousActiveTabCountRef.current = { tab: activeTab, count: activeCount };
+    if (previous.tab !== activeTab) {
+      return;
+    }
+    if (previous.count > 0 && activeCount === 0) {
+      const nextTab = findNextNonEmptyTabToRight(activeTab, counts);
+      if (nextTab !== null) {
+        navigation.selectTab(nextTab);
+        navigation.closeItem();
+      }
+    }
+  }, [activeTab, activeCount, counts, navigation]);
+
   const overlayStatusForSelected = ((): ConsoleOverlayStatus | null => {
     if (selectedItem === null) {
       return null;
@@ -202,6 +223,13 @@ export const ConsolePage = () => {
         />
       ) : (
         <div className="console-detail-screen" ref={detailScreenRef}>
+          <button
+            type="button"
+            className="console-back-button"
+            onClick={closeItem}
+          >
+            ← Back to list
+          </button>
           <ConsoleItemDetailContainer
             tab={activeTab}
             item={selectedItem}

package/src/adapter/entry-points/console/ui/src/features/console/testing/fixtures.ts

@@ -133,6 +133,17 @@ console bundle and the token-protected \`/api\` endpoints.
 - [x] Token validation via \`?k=\` and the \`x-pv-token\` header
 `;
 
+export const consoleMarkdownImageBodyFixture = `## Screenshot
+
+The failing screen is attached below.
+
+![console screenshot](https://github.com/user-attachments/assets/0a1b2c3d-4e5f-6789-abcd-ef0123456789)
+
+For reference, the avatar comes from an external host:
+
+![external avatar](https://example.com/avatar.png)
+`;
+
 export const consoleMermaidBodyFixture = `Here is the request flow:
 
 \`\`\`mermaid