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

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

@@ -0,0 +1,28 @@
+import { colorFromEnum } from '../colors';
+import type { ConsoleColor } from '../types';
+
+export type ConsoleStoryGroupHeaderProps = {
+  story: string;
+  count: number;
+  colorEnum: ConsoleColor | null;
+};
+
+export const ConsoleStoryGroupHeader = ({
+  story,
+  count,
+  colorEnum,
+}: ConsoleStoryGroupHeaderProps) => {
+  const palette = colorFromEnum(colorEnum);
+  return (
+    <div className="console-group-header">
+      <span className="console-storytag">
+        <span
+          className="console-story-dot"
+          style={{ backgroundColor: palette.dot }}
+        />
+        {story}
+      </span>
+      <span className="console-group-count">{count}</span>
+    </div>
+  );
+};

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

@@ -12,23 +12,59 @@ export default meta;
 
 type Story = StoryObj<typeof ConsoleTabBar>;
 
-export const PrsActive: Story = {
+const counts: Record<ConsoleTabName, number> = {
+  prs: 35,
+  triage: 12,
+  unread: 7,
+  'failed-preparation': 2,
+  'todo-by-human': 4,
+};
+
+export const AllTabsWithCounts: Story = {
+  args: {
+    activeTab: 'prs',
+    counts,
+    onSelectTab: () => {},
+  },
+};
+
+export const ZeroCountTabsHidden: Story = {
   args: {
     activeTab: 'prs',
-    onSelectTab: () => undefined,
+    counts: {
+      prs: 35,
+      triage: 0,
+      unread: 7,
+      'failed-preparation': 0,
+      'todo-by-human': 0,
+    },
+    onSelectTab: () => {},
   },
 };
 
-export const TriageActive: Story = {
+export const ActiveZeroCountTabStaysVisible: Story = {
   args: {
     activeTab: 'triage',
-    onSelectTab: () => undefined,
+    counts: {
+      prs: 35,
+      triage: 0,
+      unread: 7,
+      'failed-preparation': 0,
+      'todo-by-human': 0,
+    },
+    onSelectTab: () => {},
   },
 };
 
 export const Interactive: Story = {
   render: () => {
     const [activeTab, setActiveTab] = useState<ConsoleTabName>('prs');
-    return <ConsoleTabBar activeTab={activeTab} onSelectTab={setActiveTab} />;
+    return (
+      <ConsoleTabBar
+        activeTab={activeTab}
+        counts={counts}
+        onSelectTab={setActiveTab}
+      />
+    );
   },
 };

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

@@ -0,0 +1,59 @@
+import { fireEvent, render } from '@testing-library/react';
+import type { ConsoleTabName } from '../types';
+import { ConsoleTabBar } from './ConsoleTabBar';
+
+const counts: Record<ConsoleTabName, number> = {
+  prs: 3,
+  triage: 0,
+  unread: 5,
+  'failed-preparation': 0,
+  'todo-by-human': 2,
+};
+
+describe('ConsoleTabBar', () => {
+  it('hides zero-count tabs except the active tab', () => {
+    const { queryByText } = render(
+      <ConsoleTabBar activeTab="prs" counts={counts} onSelectTab={() => {}} />,
+    );
+    expect(queryByText('Awaiting Quality Check')).not.toBeNull();
+    expect(queryByText('Unread')).not.toBeNull();
+    expect(queryByText('Todo by human')).not.toBeNull();
+    expect(queryByText('Triage')).toBeNull();
+    expect(queryByText('Failed Preparation')).toBeNull();
+  });
+
+  it('keeps a zero-count active tab visible', () => {
+    const { queryByText } = render(
+      <ConsoleTabBar
+        activeTab="triage"
+        counts={counts}
+        onSelectTab={() => {}}
+      />,
+    );
+    expect(queryByText('Triage')).not.toBeNull();
+  });
+
+  it('uses the exact lowercase Todo by human label', () => {
+    const { getByText } = render(
+      <ConsoleTabBar
+        activeTab="todo-by-human"
+        counts={counts}
+        onSelectTab={() => {}}
+      />,
+    );
+    expect(getByText('Todo by human')).toBeInTheDocument();
+  });
+
+  it('reports the selected tab', () => {
+    const onSelectTab = jest.fn();
+    const { getByText } = render(
+      <ConsoleTabBar
+        activeTab="prs"
+        counts={counts}
+        onSelectTab={onSelectTab}
+      />,
+    );
+    fireEvent.click(getByText('Unread'));
+    expect(onSelectTab).toHaveBeenCalledWith('unread');
+  });
+});

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

@@ -1,32 +1,41 @@
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
 import { CONSOLE_TABS, type ConsoleTabName } from '../types';
 
 export type ConsoleTabBarProps = {
   activeTab: ConsoleTabName;
+  counts: Record<ConsoleTabName, number>;
   onSelectTab: (tab: ConsoleTabName) => void;
 };
 
 export const ConsoleTabBar = ({
   activeTab,
+  counts,
   onSelectTab,
 }: ConsoleTabBarProps) => (
-  <nav
-    aria-label="Console tabs"
-    className="flex flex-wrap gap-1 border-b border-border p-2"
-  >
-    {CONSOLE_TABS.map((tab) => (
-      <Button
-        key={tab.name}
-        type="button"
-        size="sm"
-        variant={tab.name === activeTab ? 'default' : 'ghost'}
-        aria-current={tab.name === activeTab ? 'page' : undefined}
-        className={cn(tab.name === activeTab && 'font-semibold')}
-        onClick={() => onSelectTab(tab.name)}
-      >
-        {tab.label}
-      </Button>
-    ))}
+  <nav aria-label="Console tabs" className="console-tabbar">
+    {CONSOLE_TABS.map((tab) => {
+      const count = counts[tab.name] ?? 0;
+      const isActive = tab.name === activeTab;
+      if (count === 0 && !isActive) {
+        return null;
+      }
+      return (
+        <button
+          key={tab.name}
+          type="button"
+          className="console-tab"
+          data-active={isActive ? 'true' : undefined}
+          aria-current={isActive ? 'page' : undefined}
+          onClick={() => onSelectTab(tab.name)}
+        >
+          <span className="console-tab-label">{tab.label}</span>
+          <span
+            className="console-tab-badge"
+            data-zero={count === 0 ? 'true' : undefined}
+          >
+            {count}
+          </span>
+        </button>
+      );
+    })}
   </nav>
 );

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

@@ -0,0 +1,35 @@
+import { fileStatusBadge } from './fileStatus';
+
+describe('fileStatusBadge', () => {
+  it('maps added to a green A badge', () => {
+    expect(fileStatusBadge('added')).toEqual({ label: 'A', color: '#3fb950' });
+  });
+
+  it('maps modified to a yellow M badge', () => {
+    expect(fileStatusBadge('modified')).toEqual({
+      label: 'M',
+      color: '#d29922',
+    });
+  });
+
+  it('maps removed to a red D badge', () => {
+    expect(fileStatusBadge('removed')).toEqual({
+      label: 'D',
+      color: '#f85149',
+    });
+  });
+
+  it('maps renamed to a purple R badge', () => {
+    expect(fileStatusBadge('renamed')).toEqual({
+      label: 'R',
+      color: '#a371f7',
+    });
+  });
+
+  it('maps an unknown status to a gray question badge', () => {
+    expect(fileStatusBadge('whatever')).toEqual({
+      label: '?',
+      color: '#8b949e',
+    });
+  });
+});

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

@@ -0,0 +1,21 @@
+export type ConsoleFileStatusBadge = {
+  label: string;
+  color: string;
+};
+
+export const fileStatusBadge = (status: string): ConsoleFileStatusBadge => {
+  switch (status) {
+    case 'added':
+      return { label: 'A', color: '#3fb950' };
+    case 'modified':
+      return { label: 'M', color: '#d29922' };
+    case 'removed':
+      return { label: 'D', color: '#f85149' };
+    case 'renamed':
+      return { label: 'R', color: '#a371f7' };
+    case 'changed':
+      return { label: 'M', color: '#d29922' };
+    default:
+      return { label: '?', color: '#8b949e' };
+  }
+};

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

@@ -1,9 +1,53 @@
-import type { ConsoleListItem } from './types';
+import type {
+  ConsoleChangedFile,
+  ConsoleComment,
+  ConsoleCommit,
+  ConsoleFieldOption,
+  ConsoleIssueState,
+  ConsoleListItem,
+  ConsoleRelatedPullRequest,
+  ConsoleStoryColorSource,
+} from './types';
+
+export const consoleStatusOptionsFixture: ConsoleFieldOption[] = [
+  { id: 'f75ad846', name: 'Unread', color: 'ORANGE' },
+  { id: 'd1c19cce', name: 'Awaiting Workspace', color: 'BLUE' },
+  { id: 'f57f1ce9', name: 'Preparation', color: 'YELLOW' },
+  { id: 'fd313492', name: 'Failed Preparation', color: 'RED' },
+  { id: 'e9931e57', name: 'Todo by human', color: 'PINK' },
+  { id: 'c2d278b2', name: 'In Tmux by human', color: 'RED' },
+  { id: 'e9f6a726', name: 'In Tmux by agent', color: 'YELLOW' },
+  { id: 'bd8358eb', name: 'Icebox', color: 'GRAY' },
+];
+
+export const consoleStoryOptionsFixture: ConsoleFieldOption[] = [
+  { id: '28415d6c', name: 'regular / workflow improvement', color: 'GRAY' },
+  { id: '1491051e', name: 'TDPM Console port', color: 'BLUE' },
+  { id: 'e35b3da2', name: 'regular / WORKFLOW BLOCKER', color: 'RED' },
+  {
+    id: 'd7cdcb61',
+    name: 'regular / regular payment invoice tax',
+    color: 'YELLOW',
+  },
+  {
+    id: 'f7cd5cbc',
+    name: 'Publish product documentation site',
+    color: 'GREEN',
+  },
+  { id: '564803ee', name: 'Move to Okinawa', color: 'PURPLE' },
+];
+
+export const consoleStoryColorsFixture: ConsoleStoryColorSource = {
+  'TDPM Console port': { color: 'BLUE' },
+  'regular / workflow improvement': { color: 'GRAY' },
+  'Publish product documentation site': { color: 'GREEN' },
+  'Move to Okinawa': { color: 'PURPLE' },
+};
 
 export const consoleListItemsFixture: ConsoleListItem[] = [
   {
-    number: 844,
-    title: 'Add serveConsole server skeleton under entry-points',
+    number: 851,
+    title: 'Add serveConsole subcommand under entry-points',
     url: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/851',
     repo: 'HiromiShikata/npm-cli-github-issue-tower-defence-management',
     nameWithOwner:
@@ -16,20 +60,34 @@ export const consoleListItemsFixture: ConsoleListItem[] = [
     createdAt: '2026-06-17T02:14:33.000Z',
   },
   {
-    number: 845,
+    number: 853,
     title:
-      'Scaffold React console UI under entry-points with build bundling and minimal tab view',
-    url: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/845',
+      'Add server-side console API handlers for read and operation endpoints',
+    url: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/853',
     repo: 'HiromiShikata/npm-cli-github-issue-tower-defence-management',
     nameWithOwner:
       'HiromiShikata/npm-cli-github-issue-tower-defence-management',
     projectItemId: 'PVTI_lADOABCD1234zgABCD02',
     itemId: 'PVTI_lADOABCD1234zgABCD02',
-    isPr: false,
+    isPr: true,
     story: 'TDPM Console port',
     labels: ['claude'],
     createdAt: '2026-06-17T05:48:09.000Z',
   },
+  {
+    number: 845,
+    title: 'Scaffold React console UI under entry-points with build bundling',
+    url: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/845',
+    repo: 'HiromiShikata/npm-cli-github-issue-tower-defence-management',
+    nameWithOwner:
+      'HiromiShikata/npm-cli-github-issue-tower-defence-management',
+    projectItemId: 'PVTI_lADOABCD1234zgABCD03',
+    itemId: 'PVTI_lADOABCD1234zgABCD03',
+    isPr: false,
+    story: 'TDPM Console port',
+    labels: [],
+    createdAt: '2026-06-16T22:01:55.000Z',
+  },
   {
     number: 778,
     title: 'Add Sonnet to Opus weekly-limit fallback routing per token',
@@ -37,11 +95,150 @@ export const consoleListItemsFixture: ConsoleListItem[] = [
     repo: 'HiromiShikata/npm-cli-github-issue-tower-defence-management',
     nameWithOwner:
       'HiromiShikata/npm-cli-github-issue-tower-defence-management',
-    projectItemId: 'PVTI_lADOABCD1234zgABCD03',
-    itemId: 'PVTI_lADOABCD1234zgABCD03',
+    projectItemId: 'PVTI_lADOABCD1234zgABCD04',
+    itemId: 'PVTI_lADOABCD1234zgABCD04',
     isPr: false,
     story: 'regular / workflow improvement',
     labels: [],
     createdAt: '2026-06-12T23:01:55.000Z',
   },
+  {
+    number: 692,
+    title: 'Publish the generated documentation site to GitHub Pages',
+    url: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/issues/692',
+    repo: 'HiromiShikata/npm-cli-github-issue-tower-defence-management',
+    nameWithOwner:
+      'HiromiShikata/npm-cli-github-issue-tower-defence-management',
+    projectItemId: 'PVTI_lADOABCD1234zgABCD05',
+    itemId: 'PVTI_lADOABCD1234zgABCD05',
+    isPr: false,
+    story: 'Publish product documentation site',
+    labels: ['documentation'],
+    createdAt: '2026-06-10T11:42:00.000Z',
+  },
 ];
+
+export const consoleMarkdownBodyFixture = `## Summary
+
+This pull request adds the \`serveConsole\` subcommand that serves the static
+console bundle and the token-protected \`/api\` endpoints.
+
+- Adds an HTTP server bound to port 9981 by default
+- Serves \`list.json\` per tab and the read APIs by \`url\`
+- Records acted-on items into a cross-tab done store
+
+### Checklist
+
+- [x] Unit tests for the data delivery routing
+- [x] Token validation via \`?k=\` and the \`x-pv-token\` header
+`;
+
+export const consoleMermaidBodyFixture = `Here is the request flow:
+
+\`\`\`mermaid
+sequenceDiagram
+  participant Browser
+  participant ConsoleServer
+  participant IssueRepository
+  Browser->>ConsoleServer: GET /api/itembody?url=...
+  ConsoleServer->>IssueRepository: getIssueOrPullRequestBody(url)
+  IssueRepository-->>ConsoleServer: body markdown
+  ConsoleServer-->>Browser: { body }
+\`\`\`
+
+The diagram above is rendered lazily.
+`;
+
+export const consoleMermaidCodeFixture = `sequenceDiagram
+  participant Browser
+  participant ConsoleServer
+  participant IssueRepository
+  Browser->>ConsoleServer: GET /api/itembody?url=...
+  ConsoleServer->>IssueRepository: getIssueOrPullRequestBody(url)
+  IssueRepository-->>ConsoleServer: body markdown
+  ConsoleServer-->>Browser: { body }`;
+
+export const consoleCommentsFixture: ConsoleComment[] = [
+  {
+    author: 'HiromiShikata',
+    body: 'Please split the token validation into its own tested function.',
+    createdAt: '2026-06-17T06:12:40.000Z',
+  },
+  {
+    author: 'github-actions',
+    body: 'All required checks have passed on this pull request.',
+    createdAt: '2026-06-17T07:48:11.000Z',
+  },
+  {
+    author: 'HiromiShikata',
+    body: 'Looks good now. Approving once the rebase is green.',
+    createdAt: '2026-06-17T09:03:27.000Z',
+  },
+];
+
+export const consoleChangedFilesFixture: ConsoleChangedFile[] = [
+  {
+    path: 'src/adapter/entry-points/console/consoleServer.ts',
+    additions: 312,
+    deletions: 4,
+    status: 'added',
+    patch: null,
+  },
+  {
+    path: 'src/adapter/entry-points/console/consoleServer.test.ts',
+    additions: 268,
+    deletions: 0,
+    status: 'added',
+    patch: null,
+  },
+  {
+    path: 'package.json',
+    additions: 6,
+    deletions: 1,
+    status: 'modified',
+    patch: null,
+  },
+];
+
+export const consoleCommitsFixture: ConsoleCommit[] = [
+  {
+    sha: '4f9c2a1b6d8e0f3a7c5b9d1e2f4a6c8b0d2e4f6a',
+    message: 'feat(console): add serveConsole subcommand and HTTP server',
+    author: 'HiromiShikata',
+    authoredAt: '2026-06-17T02:10:11.000Z',
+  },
+  {
+    sha: '8b1d3f5a7c9e1b3d5f7a9c1e3b5d7f9a1c3e5b7d',
+    message: 'test(console): cover token validation and data routing',
+    author: 'HiromiShikata',
+    authoredAt: '2026-06-17T05:41:52.000Z',
+  },
+];
+
+export const consoleRelatedPullRequestsFixture: ConsoleRelatedPullRequest[] = [
+  {
+    url: 'https://github.com/HiromiShikata/npm-cli-github-issue-tower-defence-management/pull/849',
+    branchName: 'feature/849-react-console-scaffold',
+    createdAt: '2026-06-16T22:30:00.000Z',
+    isDraft: false,
+    isConflicted: false,
+    isPassedAllCiJob: true,
+    isCiStateSuccess: true,
+    isResolvedAllReviewComments: true,
+    isBranchOutOfDate: false,
+    missingRequiredCheckNames: [],
+    summary: {
+      title: 'Scaffold React console UI under entry-points with build bundling',
+      body: 'Adds the React + Vite + Tailwind scaffold and the committed `ui-dist` single artifact.',
+      additions: 1184,
+      deletions: 12,
+      changedFiles: 27,
+    },
+  },
+];
+
+export const consoleIssueStateFixture: ConsoleIssueState = {
+  state: 'open',
+  merged: false,
+  isPullRequest: true,
+};

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

@@ -0,0 +1,91 @@
+import {
+  buildConsoleListRows,
+  CONSOLE_NO_STORY_LABEL,
+  resolveItemStory,
+  resolveStoryColorEnum,
+} from './grouping';
+import type { ConsoleListItem, ConsoleOverlay } from './types';
+
+const item = (
+  overrides: Partial<ConsoleListItem> &
+    Pick<ConsoleListItem, 'number' | 'story'>,
+): ConsoleListItem => ({
+  title: `Item ${overrides.number}`,
+  url: `https://github.com/o/r/issues/${overrides.number}`,
+  repo: 'o/r',
+  nameWithOwner: 'o/r',
+  projectItemId: `PVTI_${overrides.number}`,
+  itemId: `PVTI_${overrides.number}`,
+  isPr: false,
+  labels: [],
+  createdAt: '2026-06-10T00:00:00.000Z',
+  ...overrides,
+});
+
+describe('resolveStoryColorEnum', () => {
+  it('reads a wrapped color object shape', () => {
+    expect(resolveStoryColorEnum({ s: { color: 'BLUE' } }, 's')).toBe('BLUE');
+  });
+
+  it('reads a bare enum shape', () => {
+    expect(resolveStoryColorEnum({ s: 'RED' }, 's')).toBe('RED');
+  });
+
+  it('returns null for an unknown story', () => {
+    expect(resolveStoryColorEnum({}, 's')).toBeNull();
+  });
+});
+
+describe('resolveItemStory', () => {
+  it('prefers the overlay story name', () => {
+    const overlay: ConsoleOverlay = {
+      PVTI_1: {
+        ts: 1,
+        mode: 'triage',
+        story: { name: 'Overlay', color: 'BLUE' },
+      },
+    };
+    expect(
+      resolveItemStory(item({ number: 1, story: 'Original' }), overlay),
+    ).toBe('Overlay');
+  });
+
+  it('uses the trimmed item story when no overlay story exists', () => {
+    expect(resolveItemStory(item({ number: 2, story: '  Real  ' }), {})).toBe(
+      '  Real  ',
+    );
+  });
+
+  it('falls back to the no-story label when empty', () => {
+    expect(resolveItemStory(item({ number: 3, story: '   ' }), {})).toBe(
+      CONSOLE_NO_STORY_LABEL,
+    );
+  });
+});
+
+describe('buildConsoleListRows', () => {
+  it('inserts a group header whenever the story changes and keeps array order', () => {
+    const items = [
+      item({ number: 1, story: 'Alpha' }),
+      item({ number: 2, story: 'Alpha' }),
+      item({ number: 3, story: 'Beta' }),
+      item({ number: 4, story: 'Alpha' }),
+    ];
+    const rows = buildConsoleListRows(items, {});
+    expect(rows.map((row) => row.kind)).toEqual([
+      'group-header',
+      'item',
+      'item',
+      'group-header',
+      'item',
+      'group-header',
+      'item',
+    ]);
+    const firstHeader = rows[0];
+    expect(firstHeader.kind === 'group-header' && firstHeader.count).toBe(3);
+  });
+
+  it('returns no rows for an empty list', () => {
+    expect(buildConsoleListRows([], {})).toEqual([]);
+  });
+});

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

@@ -0,0 +1,79 @@
+import type {
+  ConsoleColor,
+  ConsoleListItem,
+  ConsoleOverlay,
+  ConsoleStoryColorSource,
+} from './types';
+
+export const CONSOLE_NO_STORY_LABEL = '(No story)';
+
+export const resolveStoryColorEnum = (
+  storyColors: ConsoleStoryColorSource,
+  storyName: string,
+): ConsoleColor | null => {
+  const entry = storyColors[storyName];
+  if (entry === undefined) {
+    return null;
+  }
+  if (typeof entry === 'string') {
+    return entry;
+  }
+  return entry.color;
+};
+
+export const resolveItemStory = (
+  item: ConsoleListItem,
+  overlay: ConsoleOverlay,
+): string => {
+  const overlayKey =
+    item.projectItemId !== '' ? item.projectItemId : item.itemId;
+  const overlayEntry = overlay[overlayKey];
+  if (
+    overlayEntry?.story?.name !== undefined &&
+    overlayEntry.story.name !== ''
+  ) {
+    return overlayEntry.story.name;
+  }
+  const trimmed = item.story.trim();
+  return trimmed !== '' ? item.story : CONSOLE_NO_STORY_LABEL;
+};
+
+export type ConsoleListGroupRow = {
+  kind: 'group-header';
+  story: string;
+  count: number;
+};
+
+export type ConsoleListItemRow = {
+  kind: 'item';
+  item: ConsoleListItem;
+};
+
+export type ConsoleListRow = ConsoleListGroupRow | ConsoleListItemRow;
+
+export const buildConsoleListRows = (
+  items: ConsoleListItem[],
+  overlay: ConsoleOverlay,
+): ConsoleListRow[] => {
+  const storyCounts = new Map<string, number>();
+  for (const item of items) {
+    const story = resolveItemStory(item, overlay);
+    storyCounts.set(story, (storyCounts.get(story) ?? 0) + 1);
+  }
+
+  const rows: ConsoleListRow[] = [];
+  let previousStory: string | null = null;
+  for (const item of items) {
+    const story = resolveItemStory(item, overlay);
+    if (story !== previousStory) {
+      rows.push({
+        kind: 'group-header',
+        story,
+        count: storyCounts.get(story) ?? 0,
+      });
+      previousStory = story;
+    }
+    rows.push({ kind: 'item', item });
+  }
+  return rows;
+};