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

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

@@ -0,0 +1,52 @@
+import { formatFullTimestamp, formatRelativeTime } from './relativeTime';
+
+const now = Date.parse('2026-06-19T12:00:00.000Z');
+
+describe('formatRelativeTime', () => {
+  it('returns just now for very recent times', () => {
+    expect(formatRelativeTime('2026-06-19T11:59:30.000Z', now)).toBe(
+      'just now',
+    );
+  });
+
+  it('returns minutes ago', () => {
+    expect(formatRelativeTime('2026-06-19T11:45:00.000Z', now)).toBe(
+      '15 minutes ago',
+    );
+  });
+
+  it('uses singular for one minute', () => {
+    expect(formatRelativeTime('2026-06-19T11:59:00.000Z', now)).toBe(
+      '1 minute ago',
+    );
+  });
+
+  it('returns hours ago', () => {
+    expect(formatRelativeTime('2026-06-19T09:00:00.000Z', now)).toBe(
+      '3 hours ago',
+    );
+  });
+
+  it('returns yesterday for one day', () => {
+    expect(formatRelativeTime('2026-06-18T12:00:00.000Z', now)).toBe(
+      'yesterday',
+    );
+  });
+
+  it('returns days ago for under a month', () => {
+    expect(formatRelativeTime('2026-06-09T12:00:00.000Z', now)).toBe(
+      '10 days ago',
+    );
+  });
+
+  it('returns an empty string for an invalid date', () => {
+    expect(formatRelativeTime('nonsense', now)).toBe('');
+  });
+});
+
+describe('formatFullTimestamp', () => {
+  it('formats a timestamp and returns empty for invalid input', () => {
+    expect(formatFullTimestamp('2026-06-19T12:00:00.000Z')).not.toBe('');
+    expect(formatFullTimestamp('nonsense')).toBe('');
+  });
+});

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

@@ -0,0 +1,51 @@
+const MS_PER_SECOND = 1000;
+const MS_PER_MINUTE = 60 * MS_PER_SECOND;
+const MS_PER_HOUR = 60 * MS_PER_MINUTE;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+
+export const formatRelativeTime = (iso: string, now: number): string => {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) {
+    return '';
+  }
+  const diff = now - then;
+  if (diff < 45 * MS_PER_SECOND) {
+    return 'just now';
+  }
+  if (diff < MS_PER_HOUR) {
+    const minutes = Math.round(diff / MS_PER_MINUTE);
+    return `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
+  }
+  if (diff < MS_PER_DAY) {
+    const hours = Math.round(diff / MS_PER_HOUR);
+    return `${hours} hour${hours === 1 ? '' : 's'} ago`;
+  }
+  const days = Math.round(diff / MS_PER_DAY);
+  if (days === 1) {
+    return 'yesterday';
+  }
+  if (days < 30) {
+    return `${days} days ago`;
+  }
+  const date = new Date(then);
+  const sameYear = date.getFullYear() === new Date(now).getFullYear();
+  return date.toLocaleDateString('en-US', {
+    year: sameYear ? undefined : 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+};
+
+export const formatFullTimestamp = (iso: string): string => {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) {
+    return '';
+  }
+  return new Date(then).toLocaleString('ja-JP', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};

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

@@ -0,0 +1,141 @@
+export type ConsoleColor =
+  | 'GRAY'
+  | 'BLUE'
+  | 'GREEN'
+  | 'YELLOW'
+  | 'ORANGE'
+  | 'RED'
+  | 'PINK'
+  | 'PURPLE';
+
+export type ConsoleListItem = {
+  number: number;
+  title: string;
+  url: string;
+  repo: string;
+  nameWithOwner: string;
+  projectItemId: string;
+  itemId: string;
+  isPr: boolean;
+  story: string;
+  labels: string[];
+  createdAt: string;
+};
+
+export type ConsoleFieldOption = {
+  id: string;
+  name: string;
+  color: ConsoleColor;
+};
+
+export type ConsoleStatusTab = {
+  pjcode: string;
+  generatedAt: string;
+  statusOptions: ConsoleFieldOption[];
+  storyOrder: string[];
+  storyColors: Record<string, { color: ConsoleColor }>;
+  items: ConsoleListItem[];
+};
+
+export type ConsoleTriageTab = {
+  pjcode: string;
+  generatedAt: string;
+  storyOptions: ConsoleFieldOption[];
+  storyOrder: string[];
+  storyColors: Record<string, ConsoleColor>;
+  items: ConsoleListItem[];
+};
+
+export type ConsoleTabData = ConsoleStatusTab | ConsoleTriageTab;
+
+export type ConsoleStoryColorSource = Record<
+  string,
+  ConsoleColor | { color: ConsoleColor }
+>;
+
+export type ConsoleIssueState = {
+  state: string;
+  merged: boolean;
+  isPullRequest: boolean;
+};
+
+export type ConsoleComment = {
+  author: string;
+  body: string;
+  createdAt: string;
+};
+
+export type ConsoleChangedFile = {
+  path: string;
+  additions: number;
+  deletions: number;
+  status: string;
+  patch: string | null;
+};
+
+export type ConsoleCommit = {
+  sha: string;
+  message: string;
+  author: string;
+  authoredAt: string;
+};
+
+export type ConsoleRelatedPullRequest = {
+  url: string;
+  branchName: string | null;
+  createdAt: string;
+  isDraft: boolean;
+  isConflicted: boolean;
+  isPassedAllCiJob: boolean;
+  isCiStateSuccess: boolean;
+  isResolvedAllReviewComments: boolean;
+  isBranchOutOfDate: boolean;
+  missingRequiredCheckNames: string[];
+  summary: {
+    title: string;
+    body: string;
+    additions: number;
+    deletions: number;
+    changedFiles: number;
+  } | null;
+};
+
+export type ConsoleOverlayStatus = {
+  name: string;
+  color: ConsoleColor;
+};
+
+export type ConsoleOverlayStory = {
+  name: string;
+  color: ConsoleColor;
+};
+
+export type ConsoleOverlayEntry = {
+  done?: boolean;
+  status?: ConsoleOverlayStatus;
+  story?: ConsoleOverlayStory;
+  ts: number;
+  mode: ConsoleTabName;
+};
+
+export type ConsoleOverlay = Record<string, ConsoleOverlayEntry>;
+
+export type ConsoleTabName =
+  | 'prs'
+  | 'triage'
+  | 'unread'
+  | 'failed-preparation'
+  | 'todo-by-human';
+
+export type ConsoleTab = {
+  name: ConsoleTabName;
+  label: string;
+};
+
+export const CONSOLE_TABS: ConsoleTab[] = [
+  { name: 'prs', label: 'Awaiting Quality Check' },
+  { name: 'triage', label: 'Triage' },
+  { name: 'unread', label: 'Unread' },
+  { name: 'failed-preparation', label: 'Failed Preparation' },
+  { name: 'todo-by-human', label: 'Todo by human' },
+];

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

@@ -0,0 +1,79 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import type { ConsoleCaches } from '../hooks/useConsoleCaches';
+import type { ConsoleOperationsApi } from '../hooks/useConsoleOperations';
+import { ResourceCache } from '../lib/resourceCache';
+import {
+  consoleListItemsFixture,
+  consoleStatusOptionsFixture,
+  consoleStoryColorsFixture,
+  consoleStoryOptionsFixture,
+} from '../testing/fixtures';
+import { ConsoleItemDetailContainer } from './ConsoleItemDetailContainer';
+
+jest.mock('../lib/mermaidLoader', () => ({
+  renderMermaidToSvg: jest.fn(async () => '<svg></svg>'),
+}));
+
+const prItem = consoleListItemsFixture[0];
+
+const buildCaches = (): ConsoleCaches => {
+  const client = {
+    fetchItemBody: async () => '# body',
+    fetchComments: async () => [],
+    fetchPrFiles: async () => [],
+    fetchPrCommits: async () => [],
+    fetchRelatedPrs: async () => [],
+    fetchIssueState: async () => ({
+      state: 'open',
+      merged: false,
+      isPullRequest: true,
+    }),
+  };
+  return {
+    client,
+    body: new ResourceCache(client.fetchItemBody),
+    comments: new ResourceCache(client.fetchComments),
+    files: new ResourceCache(client.fetchPrFiles),
+    commits: new ResourceCache(client.fetchPrCommits),
+    relatedPrs: new ResourceCache(client.fetchRelatedPrs),
+    state: new ResourceCache(client.fetchIssueState),
+  };
+};
+
+const buildOperations = (): ConsoleOperationsApi => ({
+  reviewPullRequest: jest.fn(async () => {}),
+  setNextActionDate: jest.fn(async () => {}),
+  setStory: jest.fn(async () => {}),
+  setStatus: jest.fn(async () => {}),
+  setInTmuxByHuman: jest.fn(async () => {}),
+  closeIssue: jest.fn(async () => {}),
+});
+
+describe('ConsoleItemDetailContainer', () => {
+  it('wires the review action to the operations api for a PR item', async () => {
+    const operations = buildOperations();
+    const { getByText } = render(
+      <ConsoleItemDetailContainer
+        tab="prs"
+        item={prItem}
+        caches={buildCaches()}
+        operations={operations}
+        statusOptions={consoleStatusOptionsFixture}
+        storyOptions={consoleStoryOptionsFixture}
+        storyColors={consoleStoryColorsFixture}
+        storyName="TDPM Console port"
+        overlayStatus={null}
+        now={Date.parse('2026-06-19T12:00:00.000Z')}
+      />,
+    );
+    await waitFor(() => {
+      expect(getByText('Approve')).toBeInTheDocument();
+    });
+    fireEvent.click(getByText('Approve'));
+    expect(operations.reviewPullRequest).toHaveBeenCalledWith(
+      prItem,
+      prItem.url,
+      'approve',
+    );
+  });
+});

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

@@ -0,0 +1,109 @@
+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 { resolveStoryColorEnum } from '../logic/grouping';
+import type { ConsoleOperationHandlers } from '../logic/operations';
+import type {
+  ConsoleColor,
+  ConsoleFieldOption,
+  ConsoleListItem,
+  ConsoleOverlayStatus,
+  ConsoleStoryColorSource,
+  ConsoleTabName,
+} from '../logic/types';
+
+export type ConsoleItemDetailContainerProps = {
+  tab: ConsoleTabName;
+  item: ConsoleListItem;
+  caches: ConsoleCaches;
+  operations: ConsoleOperationsApi;
+  statusOptions: ConsoleFieldOption[];
+  storyOptions: ConsoleFieldOption[];
+  storyColors: ConsoleStoryColorSource;
+  storyName: string | null;
+  overlayStatus: ConsoleOverlayStatus | null;
+  now: number;
+};
+
+export const ConsoleItemDetailContainer = ({
+  tab,
+  item,
+  caches,
+  operations,
+  statusOptions,
+  storyOptions,
+  storyColors,
+  storyName,
+  overlayStatus,
+  now,
+}: ConsoleItemDetailContainerProps) => {
+  const detail = useConsoleItemDetailData(caches, item);
+  const hasPullRequest = item.isPr || detail.relatedPullRequests.length > 0;
+
+  const handlers: ConsoleOperationHandlers = {
+    onReview: (action) => {
+      const prUrl = item.isPr
+        ? item.url
+        : (detail.relatedPullRequests[0]?.pullRequest.url ?? item.url);
+      void operations.reviewPullRequest(item, prUrl, action);
+    },
+    onSetNextActionDate: (action) => {
+      void operations.setNextActionDate(item, action);
+    },
+    onSetStory: (option: ConsoleFieldOption) => {
+      void operations.setStory(item, option);
+    },
+    onSetStatus: (option: ConsoleFieldOption) => {
+      void operations.setStatus(item, option);
+    },
+    onSetInTmuxByHuman: (option: ConsoleFieldOption) => {
+      void operations.setInTmuxByHuman(item, option);
+    },
+    onClose: (action) => {
+      void operations.closeIssue(item, action);
+    },
+  };
+
+  const resolvedStoryName =
+    storyName ?? (item.story.trim() !== '' ? item.story : null);
+  const storyColorEnum: ConsoleColor | null =
+    resolvedStoryName !== null
+      ? resolveStoryColorEnum(storyColors, resolvedStoryName)
+      : null;
+
+  return (
+    <ConsoleItemDetail
+      item={item}
+      storyName={resolvedStoryName}
+      storyColorEnum={storyColorEnum}
+      overlayStatus={overlayStatus}
+      state={detail.state}
+      body={detail.body}
+      bodyIsLoading={detail.bodyIsLoading}
+      bodyError={detail.bodyError}
+      comments={detail.comments}
+      commentsAreLoading={detail.commentsAreLoading}
+      commentsError={detail.commentsError}
+      files={detail.files}
+      filesAreLoading={detail.filesAreLoading}
+      filesError={detail.filesError}
+      commits={detail.commits}
+      commitsAreLoading={detail.commitsAreLoading}
+      commitsError={detail.commitsError}
+      relatedPullRequests={detail.relatedPullRequests}
+      now={now}
+      operationBar={
+        <ConsoleOperationMenu
+          tab={tab}
+          item={item}
+          hasPullRequest={hasPullRequest}
+          statusOptions={statusOptions}
+          storyOptions={storyOptions}
+          handlers={handlers}
+        />
+      }
+    />
+  );
+};

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

@@ -0,0 +1,74 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { ConsolePage } from './ConsolePage';
+
+jest.mock('../lib/mermaidLoader', () => ({
+  renderMermaidToSvg: jest.fn(async () => '<svg></svg>'),
+}));
+
+const listPayload = (tab: string) => ({
+  pjcode: 'umino',
+  generatedAt: '2026-06-19T00:00:00.000Z',
+  statusOptions: [{ id: 's1', name: 'Awaiting Workspace', color: 'BLUE' }],
+  storyOptions: [{ id: 'st1', name: 'TDPM Console port', color: 'BLUE' }],
+  storyColors: { 'TDPM Console port': { color: 'BLUE' } },
+  items:
+    tab === 'prs'
+      ? [
+          {
+            number: 851,
+            title: 'Add serveConsole subcommand',
+            url: 'https://github.com/o/r/pull/851',
+            repo: 'o/r',
+            nameWithOwner: 'o/r',
+            projectItemId: 'PVTI_1',
+            itemId: 'PVTI_1',
+            isPr: true,
+            story: 'TDPM Console port',
+            labels: [],
+            createdAt: '2026-06-17T00:00:00.000Z',
+          },
+        ]
+      : [],
+});
+
+const installFetch = (): void => {
+  const fetchMock = jest.fn(async (url: string) => {
+    const listMatch = url.match(/\/projects\/[^/]+\/([^/]+)\/list\.json/);
+    if (listMatch !== null) {
+      return {
+        ok: true,
+        status: 200,
+        json: async () => listPayload(listMatch[1]),
+      };
+    }
+    return { ok: true, status: 200, json: async () => ({ body: '# body' }) };
+  });
+  global.fetch = fetchMock as unknown as typeof fetch;
+};
+
+describe('ConsolePage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    window.history.replaceState({}, '', '/projects/umino/prs?k=token');
+    installFetch();
+  });
+
+  it('renders the tab bar with the active tab and the story-grouped list', async () => {
+    const { getByText } = render(<ConsolePage />);
+    await waitFor(() => {
+      expect(getByText('Add serveConsole subcommand')).toBeInTheDocument();
+    });
+    expect(getByText('Awaiting Quality Check')).toBeInTheDocument();
+    expect(getByText('TDPM Console port')).toBeInTheDocument();
+  });
+
+  it('opens the detail view when an item is selected', async () => {
+    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();
+    expect(getByText('Approve')).toBeInTheDocument();
+  });
+});

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

@@ -1,23 +1,149 @@
-import { useState } from 'react';
-import { ConsoleListView } from '../components/ConsoleListView';
-import { ConsoleProjectHeader } from '../components/ConsoleProjectHeader';
-import { ConsoleTabBar } from '../components/ConsoleTabBar';
-import { useConsoleList } from '../hooks/useConsoleList';
+import { useMemo, useState } from 'react';
+import { ConsoleProjectSummary } from '../components/layout/ConsoleProjectSummary';
+import { ConsoleTabList } from '../components/layout/ConsoleTabList';
+import { ConsoleItemList } from '../components/list/ConsoleItemList';
+import { useConsoleCaches } from '../hooks/useConsoleCaches';
+import { useConsoleOperations } from '../hooks/useConsoleOperations';
+import { useConsoleOverlay } from '../hooks/useConsoleOverlay';
 import { useConsolePjcode } from '../hooks/useConsolePjcode';
-import { CONSOLE_TABS, type ConsoleTabName } from '../types';
+import { useConsoleTabData } from '../hooks/useConsoleTabData';
+import { buildConsoleListRows, resolveItemStory } from '../logic/grouping';
+import {
+  countPendingItems,
+  filterPendingItems,
+  overlayKeyForItem,
+  parseGeneratedAtMs,
+} from '../logic/overlay';
+import type {
+  ConsoleListItem,
+  ConsoleOverlayStatus,
+  ConsoleTabName,
+} from '../logic/types';
+import { CONSOLE_TABS } from '../logic/types';
+import { ConsoleItemDetailContainer } from './ConsoleItemDetailContainer';
+
+const emptyCounts = (): Record<ConsoleTabName, number> => {
+  const result = {} as Record<ConsoleTabName, number>;
+  for (const tab of CONSOLE_TABS) {
+    result[tab.name] = 0;
+  }
+  return result;
+};
+
+const OVERLAY_NAMESPACE_FALLBACK = 'console';
 
 export const ConsolePage = () => {
   const pjcode = useConsolePjcode();
+  const { snapshots, isLoading, error } = useConsoleTabData(pjcode);
   const [activeTab, setActiveTab] = useState<ConsoleTabName>(
     CONSOLE_TABS[0].name,
   );
-  const { items, isLoading, error } = useConsoleList(pjcode, activeTab);
+  const [selectedItem, setSelectedItem] = useState<ConsoleListItem | null>(
+    null,
+  );
+
+  const overlayState = useConsoleOverlay(pjcode ?? OVERLAY_NAMESPACE_FALLBACK);
+  const caches = useConsoleCaches();
+  const operations = useConsoleOperations(pjcode, activeTab, overlayState);
+  const now = Date.now();
+
+  const counts = useMemo(() => {
+    const result = emptyCounts();
+    for (const tab of CONSOLE_TABS) {
+      const snapshot = snapshots[tab.name];
+      if (snapshot === null) {
+        continue;
+      }
+      result[tab.name] = countPendingItems(
+        snapshot.items,
+        overlayState.overlay,
+        parseGeneratedAtMs(snapshot.generatedAt),
+        tab.name,
+      );
+    }
+    return result;
+  }, [snapshots, overlayState.overlay]);
+
+  const activeSnapshot = snapshots[activeTab];
+  const pendingItems = useMemo(() => {
+    if (activeSnapshot === null) {
+      return [];
+    }
+    return filterPendingItems(
+      activeSnapshot.items,
+      overlayState.overlay,
+      parseGeneratedAtMs(activeSnapshot.generatedAt),
+      activeTab,
+    );
+  }, [activeSnapshot, overlayState.overlay, activeTab]);
+
+  const rows = useMemo(
+    () => buildConsoleListRows(pendingItems, overlayState.overlay),
+    [pendingItems, overlayState.overlay],
+  );
+
+  const storyColors = activeSnapshot?.storyColors ?? {};
+  const statusOptions = activeSnapshot?.statusOptions ?? [];
+  const storyOptions = activeSnapshot?.storyOptions ?? [];
+
+  const selectTab = (tab: ConsoleTabName): void => {
+    setActiveTab(tab);
+    setSelectedItem(null);
+  };
+
+  const overlayStatusForSelected = ((): ConsoleOverlayStatus | null => {
+    if (selectedItem === null) {
+      return null;
+    }
+    const entry = overlayState.overlay[overlayKeyForItem(selectedItem)];
+    return entry?.status ?? null;
+  })();
+
+  const storyNameForSelected =
+    selectedItem !== null
+      ? resolveItemStory(selectedItem, overlayState.overlay)
+      : null;
 
   return (
-    <main className="mx-auto flex max-w-3xl flex-col">
-      <ConsoleProjectHeader pjcode={pjcode} />
-      <ConsoleTabBar activeTab={activeTab} onSelectTab={setActiveTab} />
-      <ConsoleListView items={items} isLoading={isLoading} error={error} />
+    <main className="console-app">
+      <ConsoleProjectSummary pjcode={pjcode} />
+      <ConsoleTabList
+        activeTab={activeTab}
+        counts={counts}
+        onSelectTab={selectTab}
+      />
+      {selectedItem === null ? (
+        <ConsoleItemList
+          rows={rows}
+          storyColors={storyColors}
+          activeItemId={null}
+          isLoading={isLoading}
+          error={error}
+          onSelectItem={setSelectedItem}
+        />
+      ) : (
+        <div className="console-detail-screen">
+          <button
+            type="button"
+            className="console-back-button"
+            onClick={() => setSelectedItem(null)}
+          >
+            ← Back to list
+          </button>
+          <ConsoleItemDetailContainer
+            tab={activeTab}
+            item={selectedItem}
+            caches={caches}
+            operations={operations}
+            statusOptions={statusOptions}
+            storyOptions={storyOptions}
+            storyColors={storyColors}
+            storyName={storyNameForSelected}
+            overlayStatus={overlayStatusForSelected}
+            now={now}
+          />
+        </div>
+      )}
     </main>
   );
 };