github-issue-tower-defence-management 1.118.0 → 1.119.0

package/src/adapter/entry-points/console/ui/src/features/console/components/content/ConsoleMarkdownContent.tsx

@@ -5,6 +5,7 @@ import {
   rewriteGitHubImageSources,
 } from '../../lib/imageProxy';
 import {
+  type ConsoleRepoContext,
   renderMarkdownToSafeHtml,
   splitMarkdownSegments,
 } from '../../lib/markdown';
@@ -20,12 +21,14 @@ export type ConsoleMarkdownViewProps = {
   body: string;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
   renderReferenceLink?: ConsoleReferenceLinkRenderer;
+  repoContext?: ConsoleRepoContext;
 };
 
 type ConsoleMarkdownHtmlBlockProps = {
   source: string;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
   renderReferenceLink?: ConsoleReferenceLinkRenderer;
+  repoContext?: ConsoleRepoContext;
 };
 
 type ReferenceMount = {
@@ -56,14 +59,15 @@ const ConsoleMarkdownHtmlBlock = ({
   source,
   buildImageProxyUrl,
   renderReferenceLink,
+  repoContext,
 }: ConsoleMarkdownHtmlBlockProps) => {
   const html = useMemo(() => {
-    const safeHtml = renderMarkdownToSafeHtml(source);
+    const safeHtml = renderMarkdownToSafeHtml(source, repoContext);
     if (buildImageProxyUrl === undefined) {
       return safeHtml;
     }
     return rewriteGitHubImageSources(safeHtml, buildImageProxyUrl);
-  }, [source, buildImageProxyUrl]);
+  }, [source, buildImageProxyUrl, repoContext]);
   const containerRef = useRef<HTMLDivElement>(null);
   const [referenceMounts, setReferenceMounts] = useState<ReferenceMount[]>([]);
 
@@ -98,6 +102,7 @@ export const ConsoleMarkdownContent = ({
   body,
   buildImageProxyUrl,
   renderReferenceLink,
+  repoContext,
 }: ConsoleMarkdownViewProps) => {
   const segments = useMemo(() => splitMarkdownSegments(body), [body]);
 
@@ -116,6 +121,7 @@ export const ConsoleMarkdownContent = ({
             source={segment.source}
             buildImageProxyUrl={buildImageProxyUrl}
             renderReferenceLink={renderReferenceLink}
+            repoContext={repoContext}
           />
         ),
       )}

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

@@ -3,7 +3,7 @@ import { consoleChangedFilesFixture } from '../../testing/fixtures';
 import { ConsoleChangedFileList } from './ConsoleChangedFileList';
 
 describe('ConsoleChangedFileList', () => {
-  it('renders each file path, status badge and additions/deletions', () => {
+  it('renders each file basename, status badge and additions/deletions', () => {
     const { getByText, getAllByText } = render(
       <ConsoleChangedFileList
         files={consoleChangedFilesFixture}
@@ -11,14 +11,29 @@ describe('ConsoleChangedFileList', () => {
         error={null}
       />,
     );
-    expect(
-      getByText('src/adapter/entry-points/console/consoleServer.ts'),
-    ).toBeInTheDocument();
+    expect(getByText('consoleServer.ts')).toBeInTheDocument();
     expect(getByText('+312')).toBeInTheDocument();
     expect(getAllByText('A').length).toBe(2);
     expect(getByText('M')).toBeInTheDocument();
   });
 
+  it('nests files under their directory nodes as a tree', () => {
+    const { container, getByText } = render(
+      <ConsoleChangedFileList
+        files={consoleChangedFilesFixture}
+        isLoading={false}
+        error={null}
+      />,
+    );
+    expect(getByText('adapter')).toBeInTheDocument();
+    expect(getByText('console')).toBeInTheDocument();
+    expect(getByText('package.json')).toBeInTheDocument();
+    const directoryNames = [
+      ...container.querySelectorAll('.console-file-tree-dir-name'),
+    ].map((node) => node.textContent);
+    expect(directoryNames).toContain('📁src');
+  });
+
   it('keeps the diff hidden until the file row is clicked', () => {
     const { container, getByText } = render(
       <ConsoleChangedFileList
@@ -28,9 +43,7 @@ describe('ConsoleChangedFileList', () => {
       />,
     );
     expect(container.querySelector('.console-file-diff')).toBeNull();
-    fireEvent.click(
-      getByText('src/adapter/entry-points/console/consoleServer.ts'),
-    );
+    fireEvent.click(getByText('consoleServer.ts'));
     expect(container.querySelector('.console-file-diff')).toBeInTheDocument();
     const codeText = [...container.querySelectorAll('.console-diff-code')].map(
       (cell) => cell.textContent,
@@ -46,7 +59,7 @@ describe('ConsoleChangedFileList', () => {
         error={null}
       />,
     );
-    const path = getByText('src/adapter/entry-points/console/consoleServer.ts');
+    const path = getByText('consoleServer.ts');
     fireEvent.click(path);
     expect(container.querySelector('.console-file-diff')).toBeInTheDocument();
     fireEvent.click(path);

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

@@ -1,5 +1,9 @@
 import { useState } from 'react';
 import { fileStatusBadge } from '../../logic/fileStatus';
+import {
+  buildConsoleFileTree,
+  type ConsoleFileTreeNode,
+} from '../../logic/fileTree';
 import type { ConsoleChangedFile } from '../../logic/types';
 import {
   type ConsoleAddInlineComment,
@@ -13,11 +17,19 @@ export type ConsoleChangedFileListProps = {
   onAddInlineComment?: ConsoleAddInlineComment;
 };
 
+const indentStyle = (depth: number): { paddingLeft: string } => ({
+  paddingLeft: `${depth * 16}px`,
+});
+
 const ConsoleChangedFileRow = ({
   file,
+  depth,
+  name,
   onAddInlineComment,
 }: {
   file: ConsoleChangedFile;
+  depth: number;
+  name: string;
   onAddInlineComment?: ConsoleAddInlineComment;
 }) => {
   const [expanded, setExpanded] = useState<boolean>(false);
@@ -27,6 +39,7 @@ const ConsoleChangedFileRow = ({
       <button
         type="button"
         className="console-file-row"
+        style={indentStyle(depth)}
         aria-expanded={expanded}
         onClick={() => setExpanded((value) => !value)}
       >
@@ -37,7 +50,7 @@ const ConsoleChangedFileRow = ({
         >
           {badge.label}
         </span>
-        <span className="console-file-path">{file.path}</span>
+        <span className="console-file-path">{name}</span>
         <span className="console-file-stat console-file-add">
           +{file.additions}
         </span>
@@ -56,6 +69,47 @@ const ConsoleChangedFileRow = ({
   );
 };
 
+const ConsoleChangedFileTreeNode = ({
+  node,
+  depth,
+  onAddInlineComment,
+}: {
+  node: ConsoleFileTreeNode;
+  depth: number;
+  onAddInlineComment?: ConsoleAddInlineComment;
+}) => {
+  if (node.kind === 'file') {
+    return (
+      <ConsoleChangedFileRow
+        file={node.file}
+        depth={depth}
+        name={node.name}
+        onAddInlineComment={onAddInlineComment}
+      />
+    );
+  }
+  return (
+    <li className="console-file-tree-dir">
+      <div className="console-file-tree-dir-name" style={indentStyle(depth)}>
+        <span className="console-file-tree-dir-icon" aria-hidden="true">
+          📁
+        </span>
+        {node.name}
+      </div>
+      <ul className="console-file-tree-children">
+        {node.children.map((child) => (
+          <ConsoleChangedFileTreeNode
+            key={child.path}
+            node={child}
+            depth={depth + 1}
+            onAddInlineComment={onAddInlineComment}
+          />
+        ))}
+      </ul>
+    </li>
+  );
+};
+
 export const ConsoleChangedFileList = ({
   files,
   isLoading,
@@ -78,12 +132,15 @@ export const ConsoleChangedFileList = ({
     return <p className="console-files-empty">No changed files.</p>;
   }
 
+  const tree = buildConsoleFileTree(files);
+
   return (
-    <ul className="console-files">
-      {files.map((file) => (
-        <ConsoleChangedFileRow
-          key={file.path}
-          file={file}
+    <ul className="console-files console-file-tree">
+      {tree.map((node) => (
+        <ConsoleChangedFileTreeNode
+          key={node.path}
+          node={node}
+          depth={0}
           onAddInlineComment={onAddInlineComment}
         />
       ))}

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

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { ImageProxyUrlBuilder } from '../../lib/imageProxy';
+import type { ConsoleRepoContext } from '../../logic/references';
 import { formatRelativeTime } from '../../logic/relativeTime';
 import type { ConsoleComment } from '../../logic/types';
 import type { ConsoleReferenceLinkRenderer } from '../content/ConsoleMarkdownContent';
@@ -12,6 +13,7 @@ export type ConsoleCommentListProps = {
   now: number;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
   renderReferenceLink?: ConsoleReferenceLinkRenderer;
+  repoContext?: ConsoleRepoContext;
 };
 
 export const ConsoleCommentList = ({
@@ -21,6 +23,7 @@ export const ConsoleCommentList = ({
   now,
   buildImageProxyUrl,
   renderReferenceLink,
+  repoContext,
 }: ConsoleCommentListProps) => {
   const [showAll, setShowAll] = useState<boolean>(false);
 
@@ -68,6 +71,7 @@ export const ConsoleCommentList = ({
             body={comment.body}
             buildImageProxyUrl={buildImageProxyUrl}
             renderReferenceLink={renderReferenceLink}
+            repoContext={repoContext}
           />
         </article>
       ))}

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ImageProxyUrlBuilder } from '../../lib/imageProxy';
 import { colorFromEnum } from '../../logic/colors';
+import { parseNameWithOwner } from '../../logic/references';
 import {
   formatFullTimestamp,
   formatRelativeTime,
@@ -97,6 +98,7 @@ export const ConsoleItemDetail = ({
   const merged = state?.merged ?? false;
   const closedStateLabel =
     !item.isPr && resolvedState === 'closed' ? 'Closed' : null;
+  const repoContext = parseNameWithOwner(item.nameWithOwner) ?? undefined;
   const storyPalette = colorFromEnum(storyColorEnum);
   const statusPalette = overlayStatus
     ? colorFromEnum(overlayStatus.color)
@@ -224,6 +226,7 @@ export const ConsoleItemDetail = ({
             body={body}
             buildImageProxyUrl={buildImageProxyUrl}
             renderReferenceLink={renderReferenceLink}
+            repoContext={repoContext}
           />
         )}
       </ConsolePanel>
@@ -251,6 +254,7 @@ export const ConsoleItemDetail = ({
           now={now}
           buildImageProxyUrl={buildImageProxyUrl}
           renderReferenceLink={renderReferenceLink}
+          repoContext={repoContext}
         />
       </ConsolePanel>
 

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

@@ -54,6 +54,43 @@ describe('renderMarkdownToSafeHtml', () => {
     expect(html).not.toContain(':sparkles:');
     expect(html).not.toContain(':rocket:');
   });
+
+  it('links a bare #N reference to the provided repo issues path', () => {
+    const html = renderMarkdownToSafeHtml('close #127', {
+      owner: 'HiromiShikata',
+      repo: 'npm-cli-github-issue-tower-defence-management',
+    });
+    expect(html).toContain(
+      '<a href="https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/127">#127</a>',
+    );
+  });
+
+  it('keeps a bare #N reference as plain text when no repo context is given', () => {
+    const html = renderMarkdownToSafeHtml('close #127');
+    expect(html).toContain('#127');
+    expect(html).not.toContain('<a ');
+  });
+
+  it('keeps a full GitHub URL as a rendered link', () => {
+    const html = renderMarkdownToSafeHtml(
+      'see https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/42',
+      {
+        owner: 'HiromiShikata',
+        repo: 'npm-cli-github-issue-tower-defence-management',
+      },
+    );
+    expect(html).toContain(
+      'href="https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/42"',
+    );
+  });
+
+  it('preserves the href attribute on issue reference anchors after sanitization', () => {
+    const html = renderMarkdownToSafeHtml('resolves #9', {
+      owner: 'owner',
+      repo: 'repo',
+    });
+    expect(html).toContain('href="https://github.com/owner/repo/issues/9"');
+  });
 });
 
 describe('splitMarkdownSegments', () => {

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

@@ -1,7 +1,28 @@
 import DOMPurify from 'dompurify';
 import { nameToEmoji } from 'gemoji';
-import { marked } from 'marked';
+import { marked, type Tokens } from 'marked';
 import { markedEmoji } from 'marked-emoji';
+import type { ConsoleRepoContext } from '../logic/references';
+
+export type { ConsoleRepoContext } from '../logic/references';
+
+type IssueReferenceToken = Tokens.Generic & {
+  type: 'consoleIssueReference';
+  raw: string;
+  numberText: string;
+};
+
+const ISSUE_REFERENCE_PATTERN = /^#(\d+)\b/;
+
+let activeRepoContext: ConsoleRepoContext | null = null;
+
+const issueReferenceHref = (numberText: string): string | null => {
+  if (activeRepoContext === null) {
+    return null;
+  }
+  const { owner, repo } = activeRepoContext;
+  return `https://github.com/${owner}/${repo}/issues/${numberText}`;
+};
 
 marked.use(
   markedEmoji({
@@ -10,15 +31,58 @@ marked.use(
   }),
 );
 
-export const renderMarkdownToSafeHtml = (source: string): string => {
+marked.use({
+  extensions: [
+    {
+      name: 'consoleIssueReference',
+      level: 'inline',
+      start(src: string) {
+        const index = src.indexOf('#');
+        return index === -1 ? undefined : index;
+      },
+      tokenizer(src: string): IssueReferenceToken | undefined {
+        if (activeRepoContext === null) {
+          return undefined;
+        }
+        const match = ISSUE_REFERENCE_PATTERN.exec(src);
+        if (match === null) {
+          return undefined;
+        }
+        return {
+          type: 'consoleIssueReference',
+          raw: match[0],
+          numberText: match[1],
+        };
+      },
+      renderer(token: Tokens.Generic): string {
+        const reference = token as IssueReferenceToken;
+        const href = issueReferenceHref(reference.numberText);
+        if (href === null) {
+          return reference.raw;
+        }
+        return `<a href="${href}">#${reference.numberText}</a>`;
+      },
+    },
+  ],
+});
+
+export const renderMarkdownToSafeHtml = (
+  source: string,
+  repoContext?: ConsoleRepoContext,
+): string => {
   const trimmed = source.trim();
   if (trimmed === '') {
     return '';
   }
+  activeRepoContext = repoContext ?? null;
   marked.setOptions({ gfm: true, breaks: true });
-  const parsed = marked.parse(source, { async: false });
-  const rawHtml = typeof parsed === 'string' ? parsed : '';
-  return DOMPurify.sanitize(rawHtml);
+  try {
+    const parsed = marked.parse(source, { async: false });
+    const rawHtml = typeof parsed === 'string' ? parsed : '';
+    return DOMPurify.sanitize(rawHtml);
+  } finally {
+    activeRepoContext = null;
+  }
 };
 
 export type ConsoleMarkdownSegment =

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

@@ -0,0 +1,95 @@
+import { buildConsoleFileTree } from './fileTree';
+import type { ConsoleChangedFile } from './types';
+
+const changedFile = (path: string): ConsoleChangedFile => ({
+  path,
+  additions: 1,
+  deletions: 0,
+  status: 'modified',
+  patch: null,
+});
+
+describe('buildConsoleFileTree', () => {
+  it('nests files under their directory segments', () => {
+    const tree = buildConsoleFileTree([
+      changedFile('src/features/console/markdown.ts'),
+    ]);
+    expect(tree).toEqual([
+      {
+        kind: 'directory',
+        name: 'src',
+        path: 'src',
+        children: [
+          {
+            kind: 'directory',
+            name: 'features',
+            path: 'src/features',
+            children: [
+              {
+                kind: 'directory',
+                name: 'console',
+                path: 'src/features/console',
+                children: [
+                  {
+                    kind: 'file',
+                    name: 'markdown.ts',
+                    path: 'src/features/console/markdown.ts',
+                    file: changedFile('src/features/console/markdown.ts'),
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('groups multiple files that share a directory under a single directory node', () => {
+    const tree = buildConsoleFileTree([
+      changedFile('src/one.ts'),
+      changedFile('src/two.ts'),
+    ]);
+    expect(tree).toHaveLength(1);
+    const [directory] = tree;
+    expect(directory.kind).toBe('directory');
+    if (directory.kind !== 'directory') {
+      throw new Error('expected a directory node');
+    }
+    expect(directory.children.map((child) => child.name)).toEqual([
+      'one.ts',
+      'two.ts',
+    ]);
+  });
+
+  it('sorts directories before files and both alphabetically', () => {
+    const tree = buildConsoleFileTree([
+      changedFile('zeta.ts'),
+      changedFile('alpha.ts'),
+      changedFile('lib/util.ts'),
+      changedFile('components/view.ts'),
+    ]);
+    expect(tree.map((node) => node.name)).toEqual([
+      'components',
+      'lib',
+      'alpha.ts',
+      'zeta.ts',
+    ]);
+  });
+
+  it('places a root-level file as a leaf at the top level', () => {
+    const tree = buildConsoleFileTree([changedFile('package.json')]);
+    expect(tree).toEqual([
+      {
+        kind: 'file',
+        name: 'package.json',
+        path: 'package.json',
+        file: changedFile('package.json'),
+      },
+    ]);
+  });
+
+  it('returns an empty tree for no files', () => {
+    expect(buildConsoleFileTree([])).toEqual([]);
+  });
+});

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

@@ -0,0 +1,93 @@
+import type { ConsoleChangedFile } from './types';
+
+export type ConsoleFileTreeFileNode = {
+  kind: 'file';
+  name: string;
+  path: string;
+  file: ConsoleChangedFile;
+};
+
+export type ConsoleFileTreeDirectoryNode = {
+  kind: 'directory';
+  name: string;
+  path: string;
+  children: ConsoleFileTreeNode[];
+};
+
+export type ConsoleFileTreeNode =
+  | ConsoleFileTreeDirectoryNode
+  | ConsoleFileTreeFileNode;
+
+type DirectoryBuilder = {
+  directories: Map<string, DirectoryBuilder>;
+  files: ConsoleChangedFile[];
+};
+
+const createDirectoryBuilder = (): DirectoryBuilder => ({
+  directories: new Map(),
+  files: [],
+});
+
+const splitPathSegments = (path: string): string[] =>
+  path.split('/').filter((segment) => segment !== '');
+
+const compareByName = (
+  left: { name: string },
+  right: { name: string },
+): number => left.name.localeCompare(right.name);
+
+const buildNodes = (
+  builder: DirectoryBuilder,
+  parentPath: string,
+): ConsoleFileTreeNode[] => {
+  const directoryNodes: ConsoleFileTreeDirectoryNode[] = [];
+  builder.directories.forEach((childBuilder, name) => {
+    const path = parentPath === '' ? name : `${parentPath}/${name}`;
+    directoryNodes.push({
+      kind: 'directory',
+      name,
+      path,
+      children: buildNodes(childBuilder, path),
+    });
+  });
+  directoryNodes.sort(compareByName);
+
+  const fileNodes: ConsoleFileTreeFileNode[] = builder.files.map((file) => ({
+    kind: 'file',
+    name: splitPathSegments(file.path).at(-1) ?? file.path,
+    path: file.path,
+    file,
+  }));
+  fileNodes.sort(compareByName);
+
+  return [...directoryNodes, ...fileNodes];
+};
+
+export const buildConsoleFileTree = (
+  files: ConsoleChangedFile[],
+): ConsoleFileTreeNode[] => {
+  const root = createDirectoryBuilder();
+
+  for (const file of files) {
+    const segments = splitPathSegments(file.path);
+    if (segments.length === 0) {
+      root.files.push(file);
+      continue;
+    }
+    const directorySegments = segments.slice(0, -1);
+    let cursor = root;
+    for (const segment of directorySegments) {
+      const existing = cursor.directories.get(segment);
+      if (existing === undefined) {
+        const created = createDirectoryBuilder();
+        cursor.directories.set(segment, created);
+        cursor = created;
+        continue;
+      }
+      cursor = existing;
+    }
+    cursor.files.push(file);
+  }
+
+  return buildNodes(root, '');
+};

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

@@ -1,8 +1,31 @@
 import {
   parseGitHubReferenceUrl,
+  parseNameWithOwner,
   referenceStateToIconInput,
 } from './references';
 
+describe('parseNameWithOwner', () => {
+  it('splits owner and repo on the first slash', () => {
+    expect(parseNameWithOwner('HiromiShikata/repo-name')).toEqual({
+      owner: 'HiromiShikata',
+      repo: 'repo-name',
+    });
+  });
+
+  it('returns null when there is no slash', () => {
+    expect(parseNameWithOwner('repo-name')).toBeNull();
+  });
+
+  it('returns null when owner or repo is empty', () => {
+    expect(parseNameWithOwner('/repo')).toBeNull();
+    expect(parseNameWithOwner('owner/')).toBeNull();
+  });
+
+  it('returns null when the value contains extra path segments', () => {
+    expect(parseNameWithOwner('owner/repo/extra')).toBeNull();
+  });
+});
+
 describe('parseGitHubReferenceUrl', () => {
   it('parses an issue url', () => {
     expect(

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

@@ -33,6 +33,26 @@ export const parseGitHubReferenceUrl = (
   };
 };
 
+export type ConsoleRepoContext = {
+  owner: string;
+  repo: string;
+};
+
+export const parseNameWithOwner = (
+  nameWithOwner: string,
+): ConsoleRepoContext | null => {
+  const separatorIndex = nameWithOwner.indexOf('/');
+  if (separatorIndex <= 0) {
+    return null;
+  }
+  const owner = nameWithOwner.slice(0, separatorIndex);
+  const repo = nameWithOwner.slice(separatorIndex + 1);
+  if (owner === '' || repo === '' || repo.includes('/')) {
+    return null;
+  }
+  return { owner, repo };
+};
+
 export const referenceStateToIconInput = (
   state: ConsoleIssueState,
 ): ConsoleItemIconInput => ({