github-issue-tower-defence-management 1.94.2 → 1.94.4

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

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import type { ImageProxyUrlBuilder } from '../../lib/imageProxy';
 import { formatRelativeTime } from '../../logic/relativeTime';
 import type { ConsoleComment } from '../../logic/types';
 import { ConsoleMarkdownContent } from '../content/ConsoleMarkdownContent';
@@ -8,6 +9,7 @@ export type ConsoleCommentListProps = {
   isLoading: boolean;
   error: string | null;
   now: number;
+  buildImageProxyUrl?: ImageProxyUrlBuilder;
 };
 
 export const ConsoleCommentList = ({
@@ -15,6 +17,7 @@ export const ConsoleCommentList = ({
   isLoading,
   error,
   now,
+  buildImageProxyUrl,
 }: ConsoleCommentListProps) => {
   const [showAll, setShowAll] = useState<boolean>(false);
 
@@ -58,7 +61,10 @@ export const ConsoleCommentList = ({
               {formatRelativeTime(comment.createdAt, now)}
             </span>
           </header>
-          <ConsoleMarkdownContent body={comment.body} />
+          <ConsoleMarkdownContent
+            body={comment.body}
+            buildImageProxyUrl={buildImageProxyUrl}
+          />
         </article>
       ))}
     </div>

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/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/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/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