github-issue-tower-defence-management 1.90.0 → 1.91.0

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

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { formatRelativeTime } from '../relativeTime';
+import type { ConsoleComment } from '../types';
+import { ConsoleMarkdownView } from './ConsoleMarkdownView';
+
+export type ConsoleCommentListProps = {
+  comments: ConsoleComment[];
+  isLoading: boolean;
+  error: string | null;
+  now: number;
+};
+
+export const ConsoleCommentList = ({
+  comments,
+  isLoading,
+  error,
+  now,
+}: ConsoleCommentListProps) => {
+  const [showAll, setShowAll] = useState<boolean>(false);
+
+  if (error !== null) {
+    return (
+      <p role="alert" className="console-comment-error">
+        Failed to load comments: {error}
+      </p>
+    );
+  }
+
+  if (isLoading) {
+    return <p className="console-comment-loading">Loading comments...</p>;
+  }
+
+  if (comments.length === 0) {
+    return <p className="console-comment-empty">No comments.</p>;
+  }
+
+  const visible = showAll ? comments : comments.slice(-1);
+
+  return (
+    <div className="console-comment-list">
+      {!showAll && comments.length > 1 && (
+        <button
+          type="button"
+          className="console-comment-show-all"
+          onClick={() => setShowAll(true)}
+        >
+          Show all {comments.length}
+        </button>
+      )}
+      {visible.map((comment) => (
+        <article
+          key={`${comment.author}:${comment.createdAt}:${comment.body}`}
+          className="console-comment"
+        >
+          <header className="console-comment-header">
+            <span className="console-comment-author">{comment.author}</span>
+            <span className="console-comment-time">
+              {formatRelativeTime(comment.createdAt, now)}
+            </span>
+          </header>
+          <ConsoleMarkdownView body={comment.body} />
+        </article>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { consoleCommitsFixture } from '../fixtures';
+import { ConsoleCommitList } from './ConsoleCommitList';
+
+const meta: Meta<typeof ConsoleCommitList> = {
+  title: 'Console/ConsoleCommitList',
+  component: ConsoleCommitList,
+  args: { now: Date.parse('2026-06-19T12:00:00.000Z') },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleCommitList>;
+
+export const WithCommits: Story = {
+  args: { commits: consoleCommitsFixture, isLoading: false, error: null },
+};
+
+export const Loading: Story = {
+  args: { commits: [], isLoading: true, error: null },
+};
+
+export const Empty: Story = {
+  args: { commits: [], isLoading: false, error: null },
+};

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

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react';
+import { consoleCommitsFixture } from '../fixtures';
+import { ConsoleCommitList } from './ConsoleCommitList';
+
+const now = Date.parse('2026-06-19T12:00:00.000Z');
+
+describe('ConsoleCommitList', () => {
+  it('renders the first message line, short sha and author', () => {
+    const { getByText } = render(
+      <ConsoleCommitList
+        commits={consoleCommitsFixture}
+        isLoading={false}
+        error={null}
+        now={now}
+      />,
+    );
+    expect(
+      getByText('feat(console): add serveConsole subcommand and HTTP server'),
+    ).toBeInTheDocument();
+    expect(getByText('4f9c2a1')).toBeInTheDocument();
+  });
+
+  it('shows the loading state', () => {
+    const { getByText } = render(
+      <ConsoleCommitList commits={[]} isLoading error={null} now={now} />,
+    );
+    expect(getByText('Loading commits...')).toBeInTheDocument();
+  });
+
+  it('shows the empty state', () => {
+    const { getByText } = render(
+      <ConsoleCommitList
+        commits={[]}
+        isLoading={false}
+        error={null}
+        now={now}
+      />,
+    );
+    expect(getByText('No commits.')).toBeInTheDocument();
+  });
+
+  it('shows the error state', () => {
+    const { getByRole } = render(
+      <ConsoleCommitList
+        commits={[]}
+        isLoading={false}
+        error="HTTP 500"
+        now={now}
+      />,
+    );
+    expect(getByRole('alert')).toHaveTextContent('HTTP 500');
+  });
+});

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

@@ -0,0 +1,53 @@
+import { formatRelativeTime } from '../relativeTime';
+import type { ConsoleCommit } from '../types';
+
+export type ConsoleCommitListProps = {
+  commits: ConsoleCommit[];
+  isLoading: boolean;
+  error: string | null;
+  now: number;
+};
+
+const shortSha = (sha: string): string => sha.slice(0, 7);
+
+const firstLine = (message: string): string => message.split('\n')[0];
+
+export const ConsoleCommitList = ({
+  commits,
+  isLoading,
+  error,
+  now,
+}: ConsoleCommitListProps) => {
+  if (error !== null) {
+    return (
+      <p role="alert" className="console-commits-error">
+        Failed to load commits: {error}
+      </p>
+    );
+  }
+
+  if (isLoading) {
+    return <p className="console-commits-loading">Loading commits...</p>;
+  }
+
+  if (commits.length === 0) {
+    return <p className="console-commits-empty">No commits.</p>;
+  }
+
+  return (
+    <ul className="console-commits">
+      {commits.map((commit) => (
+        <li key={commit.sha} className="console-commit">
+          <span className="console-commit-message">
+            {firstLine(commit.message)}
+          </span>
+          <span className="console-commit-sha">{shortSha(commit.sha)}</span>
+          <span className="console-commit-author">{commit.author}</span>
+          <span className="console-commit-time">
+            {formatRelativeTime(commit.authoredAt, now)}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+};

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

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  consoleChangedFilesFixture,
+  consoleCommentsFixture,
+  consoleCommitsFixture,
+  consoleListItemsFixture,
+  consoleMermaidBodyFixture,
+  consoleRelatedPullRequestsFixture,
+} from '../fixtures';
+import { ConsoleItemDetail } from './ConsoleItemDetail';
+
+const meta: Meta<typeof ConsoleItemDetail> = {
+  title: 'Console/ConsoleItemDetail',
+  component: ConsoleItemDetail,
+  args: {
+    now: Date.parse('2026-06-19T12:00:00.000Z'),
+    operationBar: null,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleItemDetail>;
+
+export const PullRequestItem: Story = {
+  args: {
+    item: consoleListItemsFixture[0],
+    storyName: 'TDPM Console port',
+    storyColorEnum: 'BLUE',
+    overlayStatus: null,
+    state: { state: 'open', merged: false, isPullRequest: true },
+    body: consoleMermaidBodyFixture,
+    bodyIsLoading: false,
+    bodyError: null,
+    comments: consoleCommentsFixture,
+    commentsAreLoading: false,
+    commentsError: null,
+    files: consoleChangedFilesFixture,
+    filesAreLoading: false,
+    filesError: null,
+    commits: consoleCommitsFixture,
+    commitsAreLoading: false,
+    commitsError: null,
+    relatedPullRequests: [],
+  },
+};
+
+export const IssueWithLinkedPullRequest: Story = {
+  args: {
+    item: consoleListItemsFixture[2],
+    storyName: 'TDPM Console port',
+    storyColorEnum: 'BLUE',
+    overlayStatus: null,
+    state: { state: 'open', merged: false, isPullRequest: false },
+    body: '## Issue body\n\nThis issue has a linked pull request.',
+    bodyIsLoading: false,
+    bodyError: null,
+    comments: consoleCommentsFixture,
+    commentsAreLoading: false,
+    commentsError: null,
+    files: [],
+    filesAreLoading: false,
+    filesError: null,
+    commits: [],
+    commitsAreLoading: false,
+    commitsError: null,
+    relatedPullRequests: [
+      {
+        pullRequest: consoleRelatedPullRequestsFixture[0],
+        files: consoleChangedFilesFixture,
+        filesAreLoading: false,
+        filesError: null,
+        commits: consoleCommitsFixture,
+        commitsAreLoading: false,
+        commitsError: null,
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,81 @@
+import { render } from '@testing-library/react';
+import {
+  consoleChangedFilesFixture,
+  consoleCommentsFixture,
+  consoleCommitsFixture,
+  consoleListItemsFixture,
+} from '../fixtures';
+import { ConsoleItemDetail } from './ConsoleItemDetail';
+
+jest.mock('../lib/mermaidLoader', () => ({
+  renderMermaidToSvg: jest.fn(async () => '<svg></svg>'),
+}));
+
+const now = Date.parse('2026-06-19T12:00:00.000Z');
+const prItem = consoleListItemsFixture[0];
+const issueItem = consoleListItemsFixture[2];
+
+const baseProps = {
+  storyName: 'TDPM Console port',
+  storyColorEnum: 'BLUE' as const,
+  overlayStatus: null,
+  state: { state: 'open', merged: false, isPullRequest: true },
+  body: '## Body heading',
+  bodyIsLoading: false,
+  bodyError: null,
+  comments: consoleCommentsFixture,
+  commentsAreLoading: false,
+  commentsError: null,
+  files: consoleChangedFilesFixture,
+  filesAreLoading: false,
+  filesError: null,
+  commits: consoleCommitsFixture,
+  commitsAreLoading: false,
+  commitsError: null,
+  relatedPullRequests: [],
+  now,
+  operationBar: <div>operation-bar</div>,
+};
+
+describe('ConsoleItemDetail', () => {
+  it('renders the PR title with the PR number, sub bar and changed files panel', () => {
+    const { getByText, getAllByText } = render(
+      <ConsoleItemDetail item={prItem} {...baseProps} />,
+    );
+    expect(getAllByText(`PR #${prItem.number}`).length).toBeGreaterThan(0);
+    expect(getByText('Changed files')).toBeInTheDocument();
+    expect(getByText('Commits')).toBeInTheDocument();
+    expect(getByText('operation-bar')).toBeInTheDocument();
+  });
+
+  it('renders the story tag and opened relative time', () => {
+    const { getByText } = render(
+      <ConsoleItemDetail item={prItem} {...baseProps} />,
+    );
+    expect(getByText('TDPM Console port')).toBeInTheDocument();
+    expect(getByText(/opened/)).toBeInTheDocument();
+  });
+
+  it('renders an issue without the changed files or commits panels', () => {
+    const { queryByText } = render(
+      <ConsoleItemDetail
+        item={issueItem}
+        {...baseProps}
+        state={{ state: 'open', merged: false, isPullRequest: false }}
+      />,
+    );
+    expect(queryByText('Changed files')).toBeNull();
+    expect(queryByText('Commits')).toBeNull();
+  });
+
+  it('renders the overlay status chip when set', () => {
+    const { getByText } = render(
+      <ConsoleItemDetail
+        item={issueItem}
+        {...baseProps}
+        overlayStatus={{ name: 'Awaiting Workspace', color: 'BLUE' }}
+      />,
+    );
+    expect(getByText('Awaiting Workspace')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,226 @@
+import type { ReactNode } from 'react';
+import { colorFromEnum } from '../colors';
+import { formatFullTimestamp, formatRelativeTime } from '../relativeTime';
+import type {
+  ConsoleChangedFile,
+  ConsoleColor,
+  ConsoleComment,
+  ConsoleCommit,
+  ConsoleIssueState,
+  ConsoleListItem,
+  ConsoleOverlayStatus,
+  ConsoleRelatedPullRequest,
+} from '../types';
+import { ConsoleChangedFileList } from './ConsoleChangedFileList';
+import { ConsoleCommentList } from './ConsoleCommentList';
+import { ConsoleCommitList } from './ConsoleCommitList';
+import { ConsoleItemIcon } from './ConsoleItemIcon';
+import { ConsoleMarkdownView } from './ConsoleMarkdownView';
+import { ConsolePanel } from './ConsolePanel';
+import { ConsolePullRequestSection } from './ConsolePullRequestSection';
+
+export type ConsoleRelatedPullRequestView = {
+  pullRequest: ConsoleRelatedPullRequest;
+  files: ConsoleChangedFile[];
+  filesAreLoading: boolean;
+  filesError: string | null;
+  commits: ConsoleCommit[];
+  commitsAreLoading: boolean;
+  commitsError: string | null;
+};
+
+export type ConsoleItemDetailProps = {
+  item: ConsoleListItem;
+  storyName: string | null;
+  storyColorEnum: ConsoleColor | null;
+  overlayStatus: ConsoleOverlayStatus | null;
+  state: ConsoleIssueState | null;
+  body: string;
+  bodyIsLoading: boolean;
+  bodyError: string | null;
+  comments: ConsoleComment[];
+  commentsAreLoading: boolean;
+  commentsError: string | null;
+  files: ConsoleChangedFile[];
+  filesAreLoading: boolean;
+  filesError: string | null;
+  commits: ConsoleCommit[];
+  commitsAreLoading: boolean;
+  commitsError: string | null;
+  relatedPullRequests: ConsoleRelatedPullRequestView[];
+  now: number;
+  operationBar: ReactNode;
+};
+
+export const ConsoleItemDetail = ({
+  item,
+  storyName,
+  storyColorEnum,
+  overlayStatus,
+  state,
+  body,
+  bodyIsLoading,
+  bodyError,
+  comments,
+  commentsAreLoading,
+  commentsError,
+  files,
+  filesAreLoading,
+  filesError,
+  commits,
+  commitsAreLoading,
+  commitsError,
+  relatedPullRequests,
+  now,
+  operationBar,
+}: ConsoleItemDetailProps) => {
+  const resolvedState = state?.state ?? 'open';
+  const merged = state?.merged ?? false;
+  const closedStateLabel =
+    !item.isPr && resolvedState === 'closed' ? 'Closed' : null;
+  const storyPalette = colorFromEnum(storyColorEnum);
+  const statusPalette = overlayStatus
+    ? colorFromEnum(overlayStatus.color)
+    : null;
+
+  return (
+    <article className="console-detail">
+      {storyName !== null && (
+        <div className="console-detail-story">
+          <span className="console-storytag">
+            <span
+              className="console-story-dot"
+              style={{ backgroundColor: storyPalette.dot }}
+            />
+            {storyName}
+          </span>
+        </div>
+      )}
+
+      {overlayStatus !== null && statusPalette !== null && (
+        <span
+          className="console-detail-status-chip"
+          style={{
+            color: statusPalette.fg,
+            borderColor: statusPalette.border,
+            backgroundColor: statusPalette.bg,
+          }}
+        >
+          {overlayStatus.name}
+        </span>
+      )}
+
+      <h2 className="console-detail-title">
+        <ConsoleItemIcon
+          isPr={item.isPr}
+          state={resolvedState}
+          merged={merged}
+          isDraft={false}
+          stateReason=""
+        />
+        <span className="console-detail-title-text">{item.title}</span>
+        <span className="console-detail-number">
+          {item.isPr ? `PR #${item.number}` : `#${item.number}`}
+        </span>
+        {closedStateLabel !== null && (
+          <span className="console-detail-closed-label">
+            {closedStateLabel}
+          </span>
+        )}
+      </h2>
+
+      <div className="console-detail-subbar">
+        <a
+          href={item.url}
+          className="console-detail-link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {item.isPr ? `PR #${item.number}` : `Issue #${item.number}`}
+        </a>
+        <span className="console-detail-repo">{item.repo}</span>
+        <span className="console-detail-pill">
+          {item.isPr ? 'PR' : 'Issue'}
+        </span>
+      </div>
+
+      {item.labels.length > 0 && (
+        <div className="console-detail-labels">
+          {item.labels.map((label) => (
+            <span key={label} className="console-label-chip">
+              {label}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div
+        className="console-detail-createdat"
+        title={formatFullTimestamp(item.createdAt)}
+      >
+        opened {formatRelativeTime(item.createdAt, now)}
+      </div>
+
+      <ConsolePanel title="Description">
+        {bodyError !== null ? (
+          <p role="alert" className="console-detail-body-error">
+            Failed to load description: {bodyError}
+          </p>
+        ) : bodyIsLoading ? (
+          <p className="console-detail-body-loading">Loading description...</p>
+        ) : (
+          <ConsoleMarkdownView body={body} />
+        )}
+      </ConsolePanel>
+
+      {item.isPr && (
+        <ConsolePanel title="Changed files">
+          <ConsoleChangedFileList
+            files={files}
+            isLoading={filesAreLoading}
+            error={filesError}
+          />
+        </ConsolePanel>
+      )}
+
+      <ConsolePanel title="Comments" defaultCollapsed={item.isPr}>
+        <ConsoleCommentList
+          comments={comments}
+          isLoading={commentsAreLoading}
+          error={commentsError}
+          now={now}
+        />
+      </ConsolePanel>
+
+      {item.isPr && (
+        <ConsolePanel title="Commits" defaultCollapsed>
+          <ConsoleCommitList
+            commits={commits}
+            isLoading={commitsAreLoading}
+            error={commitsError}
+            now={now}
+          />
+        </ConsolePanel>
+      )}
+
+      {!item.isPr &&
+        relatedPullRequests.map((related) => (
+          <ConsolePullRequestSection
+            key={related.pullRequest.url}
+            pullRequest={related.pullRequest}
+            body={related.pullRequest.summary?.body ?? ''}
+            bodyIsLoading={false}
+            files={related.files}
+            filesAreLoading={related.filesAreLoading}
+            filesError={related.filesError}
+            commits={related.commits}
+            commitsAreLoading={related.commitsAreLoading}
+            commitsError={related.commitsError}
+            now={now}
+          />
+        ))}
+
+      <div className="console-detail-operations">{operationBar}</div>
+    </article>
+  );
+};

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConsoleItemIcon } from './ConsoleItemIcon';
+
+const meta: Meta<typeof ConsoleItemIcon> = {
+  title: 'Console/ConsoleItemIcon',
+  component: ConsoleItemIcon,
+  args: { size: 20 },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleItemIcon>;
+
+export const PullRequestOpen: Story = {
+  args: {
+    isPr: true,
+    state: 'open',
+    merged: false,
+    isDraft: false,
+    stateReason: '',
+  },
+};
+
+export const PullRequestMerged: Story = {
+  args: {
+    isPr: true,
+    state: 'closed',
+    merged: true,
+    isDraft: false,
+    stateReason: '',
+  },
+};
+
+export const PullRequestClosed: Story = {
+  args: {
+    isPr: true,
+    state: 'closed',
+    merged: false,
+    isDraft: false,
+    stateReason: '',
+  },
+};
+
+export const PullRequestDraft: Story = {
+  args: {
+    isPr: true,
+    state: 'open',
+    merged: false,
+    isDraft: true,
+    stateReason: '',
+  },
+};
+
+export const IssueOpen: Story = {
+  args: {
+    isPr: false,
+    state: 'open',
+    merged: false,
+    isDraft: false,
+    stateReason: '',
+  },
+};
+
+export const IssueClosedCompleted: Story = {
+  args: {
+    isPr: false,
+    state: 'closed',
+    merged: false,
+    isDraft: false,
+    stateReason: 'completed',
+  },
+};
+
+export const IssueClosedNotPlanned: Story = {
+  args: {
+    isPr: false,
+    state: 'closed',
+    merged: false,
+    isDraft: false,
+    stateReason: 'not_planned',
+  },
+};