github-issue-tower-defence-management 2.11.0 → 2.12.1

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { buildConsoleListRows } from '../../logic/grouping';
+import {
+  consoleAgentOptionsFixture,
+  consoleListItemsFixture,
+  consoleStatusOptionsFixture,
+  consoleStoryColorsFixture,
+} from '../../testing/fixtures';
+import { ConsoleQueuedList } from './ConsoleQueuedList';
+
+const queuedItems = consoleListItemsFixture.filter(
+  (item) =>
+    (item.status === 'Awaiting Workspace' || item.status === 'Preparation') &&
+    item.dependedIssueUrls.length === 0,
+);
+
+const meta: Meta<typeof ConsoleQueuedList> = {
+  title: 'Console/ConsoleQueuedList',
+  component: ConsoleQueuedList,
+  args: {
+    storyColors: consoleStoryColorsFixture,
+    statusOptions: consoleStatusOptionsFixture,
+    agentOptions: consoleAgentOptionsFixture,
+    activeItemId: null,
+    isLoading: false,
+    error: null,
+    onSelectItem: () => {},
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleQueuedList>;
+
+export const WithQueuedItems: Story = {
+  args: {
+    rows: buildConsoleListRows(queuedItems, {}, []),
+  },
+};
+
+export const WithStoryGroups: Story = {
+  args: {
+    rows: buildConsoleListRows(
+      queuedItems,
+      {},
+      Object.keys(consoleStoryColorsFixture),
+    ),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    rows: [],
+    isLoading: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    rows: [],
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    rows: [],
+    error: 'HTTP 404',
+  },
+};

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

@@ -0,0 +1,101 @@
+import { fireEvent, render } from '@testing-library/react';
+import { buildConsoleListRows } from '../../logic/grouping';
+import {
+  consoleAgentOptionsFixture,
+  consoleListItemsFixture,
+  consoleStatusOptionsFixture,
+  consoleStoryColorsFixture,
+} from '../../testing/fixtures';
+import { ConsoleQueuedList } from './ConsoleQueuedList';
+
+const queuedItems = consoleListItemsFixture.filter(
+  (item) =>
+    (item.status === 'Awaiting Workspace' || item.status === 'Preparation') &&
+    item.dependedIssueUrls.length === 0,
+);
+const rows = buildConsoleListRows(queuedItems, {}, []);
+
+describe('ConsoleQueuedList', () => {
+  it('renders group headers and queued item rows', () => {
+    const { container } = render(
+      <ConsoleQueuedList
+        rows={rows}
+        storyColors={consoleStoryColorsFixture}
+        statusOptions={consoleStatusOptionsFixture}
+        agentOptions={consoleAgentOptionsFixture}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(queuedItems.length);
+  });
+
+  it('calls onSelectItem with the clicked item', () => {
+    const onSelectItem = jest.fn();
+    const { getByText } = render(
+      <ConsoleQueuedList
+        rows={rows}
+        storyColors={consoleStoryColorsFixture}
+        statusOptions={consoleStatusOptionsFixture}
+        agentOptions={consoleAgentOptionsFixture}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={onSelectItem}
+      />,
+    );
+    fireEvent.click(getByText(queuedItems[0].title));
+    expect(onSelectItem).toHaveBeenCalledWith(queuedItems[0]);
+  });
+
+  it('shows the loading state', () => {
+    const { getByText } = render(
+      <ConsoleQueuedList
+        rows={[]}
+        storyColors={{}}
+        statusOptions={[]}
+        agentOptions={[]}
+        activeItemId={null}
+        isLoading
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByText('Loading list...')).toBeInTheDocument();
+  });
+
+  it('shows the empty state', () => {
+    const { getByText } = render(
+      <ConsoleQueuedList
+        rows={[]}
+        storyColors={{}}
+        statusOptions={[]}
+        agentOptions={[]}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByText('No items')).toBeInTheDocument();
+  });
+
+  it('shows the error state', () => {
+    const { getByRole } = render(
+      <ConsoleQueuedList
+        rows={[]}
+        storyColors={{}}
+        statusOptions={[]}
+        agentOptions={[]}
+        activeItemId={null}
+        isLoading={false}
+        error="HTTP 503"
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByRole('alert')).toHaveTextContent('HTTP 503');
+  });
+});

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

@@ -0,0 +1,75 @@
+import {
+  type ConsoleListRow,
+  resolveStoryColorEnum,
+} from '../../logic/grouping';
+import type {
+  ConsoleFieldOption,
+  ConsoleListItem,
+  ConsoleStoryColorSource,
+} from '../../logic/types';
+import { ConsoleQueuedItemRow } from './ConsoleQueuedItemRow';
+import { ConsoleStorySummary } from './ConsoleStorySummary';
+
+export type ConsoleQueuedListProps = {
+  rows: ConsoleListRow[];
+  storyColors: ConsoleStoryColorSource;
+  statusOptions: ConsoleFieldOption[];
+  agentOptions: ConsoleFieldOption[];
+  activeItemId: string | null;
+  isLoading: boolean;
+  error: string | null;
+  onSelectItem: (item: ConsoleListItem) => void;
+};
+
+export const ConsoleQueuedList = ({
+  rows,
+  storyColors,
+  statusOptions,
+  agentOptions,
+  activeItemId,
+  isLoading,
+  error,
+  onSelectItem,
+}: ConsoleQueuedListProps) => {
+  if (error !== null) {
+    return (
+      <p role="alert" className="console-list-message console-list-error">
+        Failed to load list: {error}
+      </p>
+    );
+  }
+
+  if (isLoading) {
+    return <p className="console-list-message">Loading list...</p>;
+  }
+
+  if (rows.length === 0) {
+    return <p className="console-list-empty">No items</p>;
+  }
+
+  return (
+    <ul className="console-list">
+      {rows.map((row) =>
+        row.kind === 'group-header' ? (
+          <li key={`group:${row.story}`} className="console-list-group">
+            <ConsoleStorySummary
+              story={row.story}
+              count={row.count}
+              colorEnum={resolveStoryColorEnum(storyColors, row.story)}
+            />
+          </li>
+        ) : (
+          <li key={row.item.itemId} className="console-list-row">
+            <ConsoleQueuedItemRow
+              item={row.item}
+              isActive={row.item.itemId === activeItemId}
+              statusOptions={statusOptions}
+              agentOptions={agentOptions}
+              onSelect={onSelectItem}
+            />
+          </li>
+        ),
+      )}
+    </ul>
+  );
+};

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

@@ -34,6 +34,18 @@ describe('ConsoleOkAndAwaitingWorkspaceActions', () => {
     expect(container.firstChild).toBeNull();
   });
 
+  it('applies the approve green style class regardless of the status option color', () => {
+    const { getByRole } = render(
+      <ConsoleOkAndAwaitingWorkspaceActions
+        statusOptions={consoleStatusOptionsFixture}
+        onOkAndAwaitingWorkspace={() => {}}
+      />,
+    );
+    expect(
+      getByRole('button', { name: 'ok & Awaiting Workspace' }),
+    ).toHaveClass('console-op-button-approve');
+  });
+
   it('calls the callback with the awaiting workspace option on click', () => {
     const onOkAndAwaitingWorkspace = jest.fn();
     const { getByRole } = render(

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

@@ -1,4 +1,3 @@
-import { colorFromEnum } from '../../logic/colors';
 import type { ConsoleFieldOption } from '../../logic/types';
 
 export type ConsoleOkAndAwaitingWorkspaceActionsProps = {
@@ -20,18 +19,11 @@ export const ConsoleOkAndAwaitingWorkspaceActions = ({
     return null;
   }
 
-  const palette = colorFromEnum(option.color);
-
   return (
     <div className="console-op-group">
       <button
         type="button"
-        className="console-op-button"
-        style={{
-          color: palette.fg,
-          borderColor: palette.border,
-          backgroundColor: palette.bg,
-        }}
+        className="console-op-button console-op-button-approve"
         onClick={() => onOkAndAwaitingWorkspace(option)}
       >
         ok &amp; Awaiting Workspace

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

@@ -14,6 +14,7 @@ const counts = (
   'failed-preparation': 0,
   'todo-by-human': 0,
   'todo-by-agent': 0,
+  queued: 0,
   stories: 0,
   ...overrides,
 });

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

@@ -272,6 +272,7 @@ describe('useConsoleTabData', () => {
           prs: {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             stories: [],
@@ -303,6 +304,7 @@ describe('useConsoleTabData', () => {
           'workflow-blocker': {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -314,6 +316,7 @@ describe('useConsoleTabData', () => {
           'failed-preparation': {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -325,6 +328,7 @@ describe('useConsoleTabData', () => {
           'todo-by-human': {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -336,6 +340,19 @@ describe('useConsoleTabData', () => {
           'todo-by-agent': {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
+            storyOptions: [],
+            storyColors: {},
+            items: [],
+            stories: [],
+            defaultNameWithOwner: null,
+            fromCache: false,
+            storyOrder: [],
+          },
+          queued: {
+            generatedAt: '2026-08-01T10:00:00Z',
+            statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -347,6 +364,7 @@ describe('useConsoleTabData', () => {
           stories: {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -390,6 +408,7 @@ describe('useConsoleTabData', () => {
           prs: {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -401,6 +420,7 @@ describe('useConsoleTabData', () => {
           'workflow-blocker': {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -412,6 +432,7 @@ describe('useConsoleTabData', () => {
           'failed-preparation': {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -423,6 +444,7 @@ describe('useConsoleTabData', () => {
           'todo-by-human': {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -434,6 +456,19 @@ describe('useConsoleTabData', () => {
           'todo-by-agent': {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
+            storyOptions: [],
+            storyColors: {},
+            items: [],
+            stories: [],
+            defaultNameWithOwner: null,
+            fromCache: false,
+            storyOrder: [],
+          },
+          queued: {
+            generatedAt: '2026-08-01T10:00:00Z',
+            statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -445,6 +480,7 @@ describe('useConsoleTabData', () => {
           stories: {
             generatedAt: '2026-08-01T10:00:00Z',
             statusOptions: [],
+            agentOptions: [],
             storyOptions: [],
             storyColors: {},
             items: [],
@@ -472,4 +508,39 @@ describe('useConsoleTabData', () => {
     expect(fetchMock).not.toHaveBeenCalled();
     jest.useRealTimers();
   });
+
+  it('parses agentOptions from the snapshot payload', async () => {
+    const agentOptions = [
+      { id: 'ag1', name: 'developer', color: 'GRAY' },
+      { id: 'ag2', name: 'chore', color: 'GRAY' },
+    ];
+    const fetchMock = jest.fn(async (url: string) => ({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        pjcode: 'acme',
+        generatedAt: '2026-06-19T00:00:00.000Z',
+        statusOptions: [],
+        storyColors: {},
+        items: [],
+        agentOptions: url.includes('/queued/') ? agentOptions : [],
+      }),
+    }));
+    global.fetch = fetchMock as unknown as typeof fetch;
+
+    const { result } = renderHook(() => useConsoleTabData('acme'));
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+    expect(result.current.snapshots.queued?.agentOptions).toEqual(agentOptions);
+  });
+
+  it('defaults agentOptions to empty array when missing from payload', async () => {
+    installNetworkFetch();
+    const { result } = renderHook(() => useConsoleTabData('acme'));
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+    expect(result.current.snapshots.prs?.agentOptions).toEqual([]);
+  });
 });

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

@@ -13,6 +13,7 @@ export type ConsoleTabSnapshot = {
   items: ConsoleListItem[];
   generatedAt: string;
   statusOptions: ConsoleFieldOption[];
+  agentOptions: ConsoleFieldOption[];
   storyOptions: ConsoleFieldOption[];
   storyColors: ConsoleStoryColorSource;
   stories: ConsoleStoryEntry[];
@@ -73,6 +74,7 @@ const parseSnapshotData = (
       ? payload.generatedAt
       : '',
   statusOptions: isRecord(payload) ? parseOptions(payload.statusOptions) : [],
+  agentOptions: isRecord(payload) ? parseOptions(payload.agentOptions) : [],
   storyOptions: isRecord(payload) ? parseOptions(payload.storyOptions) : [],
   storyColors:
     isRecord(payload) && isRecord(payload.storyColors)

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

@@ -76,6 +76,32 @@ describe('airplaneSnapshot', () => {
       expect(result?.tabs.acme?.prs.statusOptions).toHaveLength(1);
       expect(result?.tabs.acme?.prs.fromCache).toBe(false);
       expect(result?.tabs.acme?.prs.storyOrder).toEqual([]);
+      expect(result?.tabs.acme?.prs.agentOptions).toEqual([]);
+    });
+
+    it('parses agentOptions from a tab snapshot', () => {
+      const raw = {
+        capturedAt: '2026-01-01T00:00:00Z',
+        tabs: {
+          acme: {
+            prs: {
+              generatedAt: '2026-01-01T00:00:00Z',
+              statusOptions: [],
+              agentOptions: [{ id: 'ag1', name: 'developer', color: 'GRAY' }],
+              storyOptions: [],
+              storyColors: {},
+              items: [],
+            },
+          },
+        },
+        items: {},
+        failures: [],
+      };
+
+      const result = parseAirplaneSnapshot(raw);
+      expect(result?.tabs.acme?.prs.agentOptions).toEqual([
+        { id: 'ag1', name: 'developer', color: 'GRAY' },
+      ]);
     });
 
     it('parses storyOrder and fromCache from a tab snapshot', () => {

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

@@ -16,6 +16,7 @@ export type AirplaneTabSnapshot = {
   items: ConsoleListItem[];
   generatedAt: string;
   statusOptions: ConsoleFieldOption[];
+  agentOptions: ConsoleFieldOption[];
   storyOptions: ConsoleFieldOption[];
   storyColors: ConsoleStoryColorSource;
   stories: ConsoleStoryEntry[];
@@ -170,6 +171,7 @@ const parseTabSnapshot = (payload: unknown): AirplaneTabSnapshot => {
       items: [],
       generatedAt: '',
       statusOptions: [],
+      agentOptions: [],
       storyOptions: [],
       storyColors: {},
       stories: [],
@@ -188,6 +190,9 @@ const parseTabSnapshot = (payload: unknown): AirplaneTabSnapshot => {
   )
     ? (payload.statusOptions.filter(isRecord) as ConsoleFieldOption[])
     : [];
+  const agentOptions: ConsoleFieldOption[] = Array.isArray(payload.agentOptions)
+    ? (payload.agentOptions.filter(isRecord) as ConsoleFieldOption[])
+    : [];
   const storyOptions: ConsoleFieldOption[] = Array.isArray(payload.storyOptions)
     ? (payload.storyOptions.filter(isRecord) as ConsoleFieldOption[])
     : [];
@@ -202,6 +207,7 @@ const parseTabSnapshot = (payload: unknown): AirplaneTabSnapshot => {
     generatedAt:
       typeof payload.generatedAt === 'string' ? payload.generatedAt : '',
     statusOptions,
+    agentOptions,
     storyOptions,
     storyColors: isRecord(payload.storyColors)
       ? (payload.storyColors as ConsoleStoryColorSource)

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

@@ -71,3 +71,15 @@ export const colorFromEnum = (
   }
   return CONSOLE_COLOR_PALETTE.GRAY;
 };
+
+export const badgeStyle = (colorEnum: string | null) => {
+  const palette = colorFromEnum(colorEnum);
+  return {
+    backgroundColor: palette.bg,
+    borderColor: palette.border,
+    color: palette.fg,
+    border: '1px solid' as const,
+    borderRadius: '6px',
+    padding: '0 6px',
+  };
+};

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

@@ -12,6 +12,7 @@ const counts = (
   'failed-preparation': 0,
   'todo-by-human': 0,
   'todo-by-agent': 0,
+  queued: 0,
   stories: 0,
   ...overrides,
 });

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

@@ -43,7 +43,15 @@ export type ConsoleStatusTab = {
   items: ConsoleListItem[];
 };
 
-export type ConsoleTabData = ConsoleStatusTab;
+export type ConsoleQueuedTab = {
+  pjcode: string;
+  generatedAt: string;
+  statusOptions: ConsoleFieldOption[];
+  agentOptions: ConsoleFieldOption[];
+  storyOrder: string[];
+  storyColors: Record<string, { color: ConsoleColor }>;
+  items: ConsoleListItem[];
+};
 
 export type ConsoleStoryColorSource = Record<
   string,
@@ -138,6 +146,7 @@ export type ConsoleTabName =
   | 'failed-preparation'
   | 'todo-by-human'
   | 'todo-by-agent'
+  | 'queued'
   | 'stories';
 
 export type ConsoleStoryEntry = {
@@ -159,5 +168,6 @@ export const CONSOLE_TABS: ConsoleTab[] = [
   { name: 'failed-preparation', label: 'Failed Preparation' },
   { name: 'todo-by-human', label: 'Todo by human' },
   { name: 'todo-by-agent', label: 'Todo by agent' },
+  { name: 'queued', label: 'Queued' },
   { name: 'stories', label: 'Stories' },
 ];

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

@@ -1083,6 +1083,64 @@ describe('ConsolePage auto-advance tab', () => {
     });
   });
 
+  it('shows the queued tab badge count when queued items are present', async () => {
+    const queuedItem = {
+      number: 900,
+      title: 'Queued task waiting',
+      url: 'https://github.com/o/r/issues/900',
+      repo: 'o/r',
+      nameWithOwner: 'o/r',
+      projectItemId: 'PVTI_900',
+      itemId: 'PVTI_900',
+      isPr: false,
+      relatedOpenPullRequestUrls: [],
+      story: 'TDPM Console port',
+      status: 'Awaiting Workspace',
+      nextActionDate: null,
+      nextActionHour: null,
+      dependedIssueUrls: [],
+      labels: [],
+      createdAt: '2026-06-17T00:00:00.000Z',
+    };
+    global.fetch = jest.fn(async (url: string) => {
+      const listMatch = url.match(/\/projects\/[^/]+\/([^/]+)\/list\.json/);
+      if (listMatch !== null) {
+        const tab = listMatch[1];
+        if (tab === 'queued') {
+          return {
+            ok: true,
+            status: 200,
+            json: async () => ({
+              ...listPayload(''),
+              agentOptions: [],
+              items: [queuedItem],
+            }),
+          };
+        }
+        return { ok: true, status: 200, json: async () => listPayload(tab) };
+      }
+      if (url === '/api/projects') {
+        return {
+          ok: true,
+          status: 200,
+          json: async () => ({ pjcodes: ['acme'] }),
+        };
+      }
+      return { ok: true, status: 200, json: async () => ({ body: '# body' }) };
+    }) as unknown as typeof fetch;
+
+    const { container } = render(<ConsolePage />);
+
+    await waitFor(() => {
+      const tabs = [...container.querySelectorAll('.console-tab')];
+      const queuedTab = tabs.find((el) => el.textContent?.includes('Queued'));
+      expect(queuedTab).toBeTruthy();
+      expect(queuedTab?.querySelector('.console-tab-badge')?.textContent).toBe(
+        '1',
+      );
+    });
+  });
+
   it('reads console-story-show-gray from localStorage and shows gray stories when true', async () => {
     localStorage.setItem('console-story-show-gray', 'true');
     window.history.replaceState({}, '', '/projects/acme/stories?k=token');