github-issue-tower-defence-management 1.102.0 → 1.103.0

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

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { consoleChangedFilesFixture } from '../../testing/fixtures';
 import { ConsoleFileDiff } from './ConsoleFileDiff';
 
@@ -21,4 +21,91 @@ describe('ConsoleFileDiff', () => {
     const { getByText } = render(<ConsoleFileDiff patch={null} />);
     expect(getByText('(no diff / binary or too large)')).toBeInTheDocument();
   });
+
+  it('does not render any comment affordance without an onAddInlineComment handler', () => {
+    const { container } = render(
+      <ConsoleFileDiff
+        patch={consoleChangedFilesFixture[0].patch}
+        path="src/adapter/entry-points/console/consoleServer.ts"
+      />,
+    );
+    expect(
+      container.querySelectorAll('.console-diff-comment-button').length,
+    ).toBe(0);
+  });
+
+  it('anchors an added line comment to its new line on the RIGHT side', async () => {
+    const onAddInlineComment = jest.fn().mockResolvedValue(undefined);
+    const { getByLabelText, getByPlaceholderText, getByText } = render(
+      <ConsoleFileDiff
+        patch={consoleChangedFilesFixture[0].patch}
+        path="src/adapter/entry-points/console/consoleServer.ts"
+        onAddInlineComment={onAddInlineComment}
+      />,
+    );
+    fireEvent.click(getByLabelText('Comment on line 57 (RIGHT)'));
+    fireEvent.change(
+      getByPlaceholderText('Leave a review comment on this line…'),
+      { target: { value: 'Why npm ci here?' } },
+    );
+    fireEvent.click(getByText('Comment'));
+    await waitFor(() =>
+      expect(onAddInlineComment).toHaveBeenCalledWith(
+        'src/adapter/entry-points/console/consoleServer.ts',
+        57,
+        'RIGHT',
+        'Why npm ci here?',
+      ),
+    );
+  });
+
+  it('anchors a removed line comment to its old line on the LEFT side', async () => {
+    const onAddInlineComment = jest.fn().mockResolvedValue(undefined);
+    const { getByLabelText, getByPlaceholderText, getByText } = render(
+      <ConsoleFileDiff
+        patch={consoleChangedFilesFixture[0].patch}
+        path="src/adapter/entry-points/console/consoleServer.ts"
+        onAddInlineComment={onAddInlineComment}
+      />,
+    );
+    fireEvent.click(getByLabelText('Comment on line 57 (LEFT)'));
+    fireEvent.change(
+      getByPlaceholderText('Leave a review comment on this line…'),
+      { target: { value: 'Keep npm install?' } },
+    );
+    fireEvent.click(getByText('Comment'));
+    await waitFor(() =>
+      expect(onAddInlineComment).toHaveBeenCalledWith(
+        'src/adapter/entry-points/console/consoleServer.ts',
+        57,
+        'LEFT',
+        'Keep npm install?',
+      ),
+    );
+  });
+
+  it('shows the surfaced error when posting an inline comment fails', async () => {
+    const onAddInlineComment = jest
+      .fn()
+      .mockRejectedValue(new Error('line must be part of the diff'));
+    const { getByLabelText, getByPlaceholderText, getByText, getByRole } =
+      render(
+        <ConsoleFileDiff
+          patch={consoleChangedFilesFixture[0].patch}
+          path="src/adapter/entry-points/console/consoleServer.ts"
+          onAddInlineComment={onAddInlineComment}
+        />,
+      );
+    fireEvent.click(getByLabelText('Comment on line 58 (RIGHT)'));
+    fireEvent.change(
+      getByPlaceholderText('Leave a review comment on this line…'),
+      { target: { value: 'A comment that will fail.' } },
+    );
+    fireEvent.click(getByText('Comment'));
+    await waitFor(() =>
+      expect(getByRole('alert')).toHaveTextContent(
+        'line must be part of the diff',
+      ),
+    );
+  });
 });

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

@@ -1,29 +1,214 @@
-import { parseUnifiedDiff } from '../../logic/diff';
+import { Fragment, useState } from 'react';
+import type { ConsoleReviewCommentSide } from '../../lib/consoleApi';
+import { type ConsoleDiffLine, parseUnifiedDiff } from '../../logic/diff';
+
+export type ConsoleInlineCommentTarget = {
+  path: string;
+  line: number;
+  side: ConsoleReviewCommentSide;
+};
+
+export type ConsoleAddInlineComment = (
+  path: string,
+  line: number,
+  side: ConsoleReviewCommentSide,
+  body: string,
+) => Promise<void>;
 
 export type ConsoleFileDiffProps = {
   patch: string | null;
+  path?: string;
+  onAddInlineComment?: ConsoleAddInlineComment;
+};
+
+type ComposerStatus =
+  | { kind: 'idle' }
+  | { kind: 'posting' }
+  | { kind: 'error'; message: string }
+  | { kind: 'posted' };
+
+const commentTargetForRow = (
+  row: ConsoleDiffLine,
+): { line: number; side: ConsoleReviewCommentSide } | null => {
+  if (row.kind === 'add' || row.kind === 'ctx') {
+    if (row.newLineNumber === null) {
+      return null;
+    }
+    return { line: row.newLineNumber, side: 'RIGHT' };
+  }
+  if (row.kind === 'del') {
+    if (row.oldLineNumber === null) {
+      return null;
+    }
+    return { line: row.oldLineNumber, side: 'LEFT' };
+  }
+  return null;
 };
 
-export const ConsoleFileDiff = ({ patch }: ConsoleFileDiffProps) => {
+const rowKey = (row: ConsoleDiffLine): string =>
+  `${row.kind}:${row.oldLineNumber ?? 'x'}:${row.newLineNumber ?? 'x'}:${row.content}`;
+
+type ConsoleInlineCommentComposerProps = {
+  target: ConsoleInlineCommentTarget;
+  onSubmit: ConsoleAddInlineComment;
+  onClose: () => void;
+};
+
+const ConsoleInlineCommentComposer = ({
+  target,
+  onSubmit,
+  onClose,
+}: ConsoleInlineCommentComposerProps) => {
+  const [draft, setDraft] = useState<string>('');
+  const [status, setStatus] = useState<ComposerStatus>({ kind: 'idle' });
+
+  const submit = async (): Promise<void> => {
+    const body = draft.trim();
+    if (body.length === 0 || status.kind === 'posting') {
+      return;
+    }
+    setStatus({ kind: 'posting' });
+    try {
+      await onSubmit(target.path, target.line, target.side, body);
+      setDraft('');
+      setStatus({ kind: 'posted' });
+    } catch (error) {
+      setStatus({
+        kind: 'error',
+        message: error instanceof Error ? error.message : 'failed to post',
+      });
+    }
+  };
+
+  return (
+    <div className="console-diff-composer">
+      <div className="console-diff-composer-anchor">
+        commenting on line {target.line} ({target.side})
+      </div>
+      {status.kind === 'posted' ? (
+        <p className="console-diff-composer-posted">Comment posted.</p>
+      ) : (
+        <>
+          <textarea
+            className="console-diff-composer-input"
+            rows={3}
+            placeholder="Leave a review comment on this line…"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+          />
+          <div className="console-diff-composer-controls">
+            <button
+              type="button"
+              className="console-diff-composer-submit"
+              disabled={status.kind === 'posting'}
+              onClick={() => {
+                void submit();
+              }}
+            >
+              Comment
+            </button>
+            <button
+              type="button"
+              className="console-diff-composer-cancel"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            {status.kind === 'posting' && (
+              <span className="console-diff-composer-status">Posting…</span>
+            )}
+            {status.kind === 'error' && (
+              <span
+                role="alert"
+                className="console-diff-composer-status console-diff-composer-error"
+              >
+                Failed: {status.message}
+              </span>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export const ConsoleFileDiff = ({
+  patch,
+  path,
+  onAddInlineComment,
+}: ConsoleFileDiffProps) => {
+  const [activeTarget, setActiveTarget] =
+    useState<ConsoleInlineCommentTarget | null>(null);
+
   if (patch === null || patch === '') {
     return (
       <p className="console-file-diff-empty">(no diff / binary or too large)</p>
     );
   }
   const rows = parseUnifiedDiff(patch);
+  const canComment =
+    onAddInlineComment !== undefined && path !== undefined && path.length > 0;
+  const columnCount = canComment ? 4 : 3;
+
   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>
-        ))}
+        {rows.map((row) => {
+          const key = rowKey(row);
+          const target = canComment ? commentTargetForRow(row) : null;
+          const isActive =
+            activeTarget !== null &&
+            target !== null &&
+            activeTarget.line === target.line &&
+            activeTarget.side === target.side;
+          return (
+            <Fragment key={key}>
+              <tr className={`console-diff-row console-diff-${row.kind}`}>
+                {canComment && (
+                  <td className="console-diff-comment-cell">
+                    {target !== null && path !== undefined && (
+                      <button
+                        type="button"
+                        className="console-diff-comment-button"
+                        aria-label={`Comment on line ${target.line} (${target.side})`}
+                        aria-expanded={isActive}
+                        onClick={() =>
+                          setActiveTarget(
+                            isActive
+                              ? null
+                              : {
+                                  path,
+                                  line: target.line,
+                                  side: target.side,
+                                },
+                          )
+                        }
+                      >
+                        +
+                      </button>
+                    )}
+                  </td>
+                )}
+                <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>
+              {isActive &&
+                onAddInlineComment !== undefined &&
+                activeTarget !== null && (
+                  <tr className="console-diff-composer-row">
+                    <td colSpan={columnCount}>
+                      <ConsoleInlineCommentComposer
+                        target={activeTarget}
+                        onSubmit={onAddInlineComment}
+                        onClose={() => setActiveTarget(null)}
+                      />
+                    </td>
+                  </tr>
+                )}
+            </Fragment>
+          );
+        })}
       </tbody>
     </table>
   );

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

@@ -20,6 +20,7 @@ import { ConsolePanel } from '../layout/ConsolePanel';
 import { ConsoleChangedFileList } from './ConsoleChangedFileList';
 import { ConsoleCommentList } from './ConsoleCommentList';
 import { ConsoleCommitList } from './ConsoleCommitList';
+import type { ConsoleAddInlineComment } from './ConsoleFileDiff';
 import { ConsoleItemIcon } from './ConsoleItemIcon';
 import { ConsolePullRequestDetail } from './ConsolePullRequestDetail';
 
@@ -56,6 +57,7 @@ export type ConsoleItemDetailProps = {
   commentComposer: ReactNode;
   operationBar: ReactNode;
   buildImageProxyUrl?: ImageProxyUrlBuilder;
+  onAddInlineComment?: ConsoleAddInlineComment;
 };
 
 export const ConsoleItemDetail = ({
@@ -81,6 +83,7 @@ export const ConsoleItemDetail = ({
   commentComposer,
   operationBar,
   buildImageProxyUrl,
+  onAddInlineComment,
 }: ConsoleItemDetailProps) => {
   const resolvedState = state?.state ?? 'open';
   const merged = state?.merged ?? false;
@@ -208,6 +211,7 @@ export const ConsoleItemDetail = ({
             files={files}
             isLoading={filesAreLoading}
             error={filesError}
+            onAddInlineComment={onAddInlineComment}
           />
         </ConsolePanel>
       )}

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

@@ -214,6 +214,29 @@ describe('useConsoleOperations', () => {
     });
   });
 
+  it('posts a line-anchored inline review comment to the reviewcomment endpoint', async () => {
+    const fetchMock = captureFetch();
+    const { result } = setup();
+    await act(async () => {
+      await result.current.operations.addInlineReviewComment(
+        prItem.url,
+        'src/index.ts',
+        42,
+        'RIGHT',
+        'Consider extracting this into a helper.',
+      );
+    });
+    expect(fetchMock.mock.calls[0][0]).toBe('/api/reviewcomment?k=token');
+    expect(lastBody(fetchMock)).toEqual({
+      pjcode: 'umino',
+      url: prItem.url,
+      path: 'src/index.ts',
+      line: 42,
+      side: 'RIGHT',
+      body: 'Consider extracting this into a helper.',
+    });
+  });
+
   it('rejects an operation and posts nothing when no pjcode is available', async () => {
     const fetchMock = captureFetch();
     localStorage.clear();

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

@@ -1,10 +1,12 @@
 import { useCallback } from 'react';
 import {
   type ConsoleIntmuxRequest,
+  type ConsoleReviewCommentSide,
   type ConsoleReviewRequest,
   type ConsoleTriageRequest,
   postConsoleComment,
   postConsoleOperation,
+  postConsoleReviewComment,
 } from '../lib/consoleApi';
 import {
   type ConsoleCloseAction,
@@ -54,6 +56,13 @@ export type ConsoleOperationsApi = {
     action: ConsoleCloseAction,
   ) => Promise<void>;
   addComment: (item: ConsoleListItem, body: string) => Promise<ConsoleComment>;
+  addInlineReviewComment: (
+    prUrl: string,
+    path: string,
+    line: number,
+    side: ConsoleReviewCommentSide,
+    body: string,
+  ) => Promise<void>;
 };
 
 const reviewRequest = (
@@ -247,6 +256,29 @@ export const useConsoleOperations = (
     [pjcode, appendToken],
   );
 
+  const addInlineReviewComment = useCallback(
+    async (
+      prUrl: string,
+      path: string,
+      line: number,
+      side: ConsoleReviewCommentSide,
+      body: string,
+    ) => {
+      if (pjcode === null) {
+        throw missingPjcodeError();
+      }
+      await postConsoleReviewComment(appendToken, {
+        pjcode,
+        url: prUrl,
+        path,
+        line,
+        side,
+        body,
+      });
+    },
+    [pjcode, appendToken],
+  );
+
   return {
     reviewPullRequest,
     setNextActionDate,
@@ -255,5 +287,6 @@ export const useConsoleOperations = (
     setInTmuxByHuman,
     closeIssue,
     addComment,
+    addInlineReviewComment,
   };
 };

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

@@ -1,4 +1,8 @@
-import { createConsoleApiClient, postConsoleOperation } from './consoleApi';
+import {
+  createConsoleApiClient,
+  postConsoleOperation,
+  postConsoleReviewComment,
+} from './consoleApi';
 
 const appendToken = (url: string): string =>
   url.includes('?') ? `${url}&k=token` : `${url}?k=token`;
@@ -208,3 +212,48 @@ describe('postConsoleOperation', () => {
     await expect(failingReview()).rejects.toThrow('HTTP 500');
   });
 });
+
+describe('postConsoleReviewComment', () => {
+  it('posts the inline review comment body to the reviewcomment endpoint', async () => {
+    const fetchMock = mockFetchOnce({ ok: true });
+    await postConsoleReviewComment(appendToken, {
+      pjcode: 'umino',
+      url: 'https://github.com/o/r/pull/1',
+      path: 'src/index.ts',
+      line: 42,
+      side: 'RIGHT',
+      body: 'Consider extracting this into a helper.',
+    });
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(url).toBe('/api/reviewcomment?k=token');
+    expect(init).toMatchObject({ method: 'POST' });
+    expect(JSON.parse((init as { body: string }).body)).toEqual({
+      pjcode: 'umino',
+      url: 'https://github.com/o/r/pull/1',
+      path: 'src/index.ts',
+      line: 42,
+      side: 'RIGHT',
+      body: 'Consider extracting this into a helper.',
+    });
+  });
+
+  it('throws the GitHub error reason surfaced by the server', async () => {
+    mockFetchFailureOnce(
+      502,
+      JSON.stringify({
+        error:
+          'Failed to create review comment on PR https://github.com/o/r/pull/1: line must be part of the diff',
+      }),
+    );
+    await expect(
+      postConsoleReviewComment(appendToken, {
+        pjcode: 'umino',
+        url: 'https://github.com/o/r/pull/1',
+        path: 'src/index.ts',
+        line: 42,
+        side: 'RIGHT',
+        body: 'Consider extracting this into a helper.',
+      }),
+    ).rejects.toThrow('line must be part of the diff');
+  });
+});

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

@@ -41,6 +41,17 @@ export type ConsoleIntmuxRequest = {
   projectItemId: string;
 };
 
+export type ConsoleReviewCommentSide = 'LEFT' | 'RIGHT';
+
+export type ConsoleReviewCommentRequest = {
+  pjcode: string;
+  url: string;
+  path: string;
+  line: number;
+  side: ConsoleReviewCommentSide;
+  body: string;
+};
+
 type AppendToken = (url: string) => string;
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
@@ -237,3 +248,19 @@ export const postConsoleComment = async (
   }
   return parsePostedComment(await response.json());
 };
+
+export const REVIEW_COMMENT_OPERATION_PATH = '/api/reviewcomment';
+
+export const postConsoleReviewComment = async (
+  appendToken: AppendToken,
+  request: ConsoleReviewCommentRequest,
+): Promise<void> => {
+  const response = await fetch(appendToken(REVIEW_COMMENT_OPERATION_PATH), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  });
+  if (!response.ok) {
+    throw new Error(await readOperationErrorReason(response));
+  }
+};

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

@@ -52,6 +52,7 @@ const buildOperations = (): ConsoleOperationsApi => ({
     body: 'comment body',
     createdAt: '2026-06-19T11:58:00.000Z',
   })),
+  addInlineReviewComment: jest.fn(async () => {}),
 });
 
 describe('ConsoleItemDetailContainer', () => {

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

@@ -6,6 +6,7 @@ import type { ConsoleCaches } from '../hooks/useConsoleCaches';
 import { useConsoleItemDetailData } from '../hooks/useConsoleItemDetailData';
 import type { ConsoleOperationsApi } from '../hooks/useConsoleOperations';
 import { useConsoleToken } from '../hooks/useConsoleToken';
+import type { ConsoleReviewCommentSide } from '../lib/consoleApi';
 import { buildImageProxyUrl } from '../lib/imageProxy';
 import type { ConsoleActionKind } from '../logic/actionToast';
 import { resolveStoryColorEnum } from '../logic/grouping';
@@ -59,6 +60,15 @@ export const ConsoleItemDetailContainer = ({
     [token],
   );
   const hasPullRequest = item.isPr || detail.relatedPullRequests.length > 0;
+  const addInlineComment = useCallback(
+    (
+      path: string,
+      line: number,
+      side: ConsoleReviewCommentSide,
+      body: string,
+    ) => operations.addInlineReviewComment(item.url, path, line, side, body),
+    [operations, item.url],
+  );
 
   const handlers: ConsoleOperationHandlers = {
     onReview: (action) => {
@@ -137,6 +147,7 @@ export const ConsoleItemDetailContainer = ({
       relatedPullRequests={detail.relatedPullRequests}
       now={now}
       buildImageProxyUrl={resolveImageProxyUrl}
+      onAddInlineComment={item.isPr ? addInlineComment : undefined}
       commentComposer={
         <ConsoleCommentComposer
           isPr={item.isPr}

package/src/adapter/entry-points/console/ui/src/index.css

@@ -826,6 +826,110 @@ body {
   font-size: 12px;
 }
 
+.console-diff-comment-cell {
+  width: 1%;
+  padding: 0 2px;
+  text-align: center;
+  user-select: none;
+}
+
+.console-diff-comment-button {
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  line-height: 16px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: #6e7681;
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.console-diff-row:hover .console-diff-comment-button,
+.console-diff-comment-button[aria-expanded="true"] {
+  opacity: 1;
+  border-color: #2f81f7;
+  background: #1f6feb;
+  color: #ffffff;
+}
+
+.console-diff-composer-row td {
+  padding: 6px 10px;
+  background: #0d1117;
+}
+
+.console-diff-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  padding: 8px;
+  background: #161b22;
+}
+
+.console-diff-composer-anchor {
+  font-size: 11px;
+  color: #8b949e;
+}
+
+.console-diff-composer-input {
+  width: 100%;
+  resize: vertical;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  background: #0d1117;
+  color: #c9d1d9;
+  padding: 6px 8px;
+  font: inherit;
+}
+
+.console-diff-composer-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.console-diff-composer-submit {
+  border: 1px solid #238636;
+  border-radius: 6px;
+  background: #238636;
+  color: #ffffff;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+
+.console-diff-composer-submit:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.console-diff-composer-cancel {
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  background: transparent;
+  color: #c9d1d9;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+
+.console-diff-composer-status {
+  font-size: 12px;
+  color: #8b949e;
+}
+
+.console-diff-composer-error {
+  color: #ff7b72;
+}
+
+.console-diff-composer-posted {
+  margin: 0;
+  font-size: 12px;
+  color: #3fb950;
+}
+
 .console-pr-header {
   display: flex;
   flex-wrap: wrap;