github-issue-tower-defence-management 1.193.0 → 1.194.0

package/src/adapter/entry-points/console/ui/e2e/consoleScenario.spec.ts

@@ -420,6 +420,51 @@ test('renders the stories tab with non-gray stories, their open item counts, and
   ).toHaveCount(0);
 });
 
+test('shows and hides gray stories with the Show archived toggle button on the stories tab', async ({
+  page,
+}) => {
+  await page.goto(harness.appRootUrl);
+
+  await tabByLabel(page, 'Stories').click();
+  await expect(activeTabLabel(page)).toHaveText('Stories');
+
+  await expect(
+    page.locator('.console-op-button', { hasText: 'Show archived' }),
+  ).toBeVisible();
+
+  await expect(
+    page.locator('.console-story-list-row', {
+      hasText: 'regular / workflow improvement',
+    }),
+  ).toHaveCount(0);
+
+  await page
+    .locator('.console-op-button', { hasText: 'Show archived' })
+    .click();
+
+  await expect(
+    page.locator('.console-story-list-row', {
+      hasText: 'regular / workflow improvement',
+    }),
+  ).toBeVisible();
+  await expect(
+    page.locator('.console-op-button', { hasText: 'Hide archived' }),
+  ).toBeVisible();
+
+  await page
+    .locator('.console-op-button', { hasText: 'Hide archived' })
+    .click();
+
+  await expect(
+    page.locator('.console-story-list-row', {
+      hasText: 'regular / workflow improvement',
+    }),
+  ).toHaveCount(0);
+  await expect(
+    page.locator('.console-op-button', { hasText: 'Show archived' }),
+  ).toBeVisible();
+});
+
 test('shows the agent label and value in the list row and the agent chip in the detail view', async ({
   page,
 }) => {

package/src/adapter/entry-points/console/ui/e2e/consoleTestHarness.ts

@@ -295,6 +295,13 @@ const CONSOLE_E2E_STORIES_SNAPSHOT = {
       storyViewUrl:
         'https://github.com/orgs/HiromiShikata/projects/6/views/1?sliceBy%5Bvalue%5D=TDPM%20Console%20port',
     },
+    {
+      storyName: 'regular / workflow improvement',
+      storyOptionId: '28415d6c',
+      color: 'GRAY',
+      openItemCount: 1,
+      storyViewUrl: null,
+    },
     {
       storyName: 'Publish product documentation site',
       storyOptionId: 'f7cd5cbc',

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

@@ -47,13 +47,26 @@ const storiesWithUrl = storiesWithoutUrl.map((s) => ({
   storyViewUrl: `${BASE_VIEW_URL}?sliceBy%5Bvalue%5D=${encodeURI(s.storyName).replace(/#/g, '%23').replace(/&/g, '%26')}`,
 }));
 
+const storiesWithArchived = [
+  ...storiesWithoutUrl,
+  {
+    storyName: 'regular / NO STORY; SET STORY FIELD',
+    storyOptionId: '28415d6c',
+    color: 'GRAY' as const,
+    openItemCount: 5,
+    storyViewUrl: null,
+  },
+];
+
 const meta: Meta<typeof ConsoleStoryList> = {
   title: 'Console/ConsoleStoryList',
   component: ConsoleStoryList,
   args: {
+    showGray: false,
     onCreateIssue: () => Promise.resolve(),
     onAddStory: () => Promise.resolve(),
     onSelectColor: () => undefined,
+    onToggleGray: () => undefined,
     optimisticColors: {},
     colorChangeInFlight: null,
     colorErrors: {},
@@ -103,3 +116,21 @@ export const ErrorState: Story = {
     error: 'HTTP 404',
   },
 };
+
+export const WithArchivedHidden: Story = {
+  args: {
+    stories: storiesWithArchived,
+    isLoading: false,
+    error: null,
+    showGray: false,
+  },
+};
+
+export const WithArchivedShown: Story = {
+  args: {
+    stories: storiesWithArchived,
+    isLoading: false,
+    error: null,
+    showGray: true,
+  },
+};

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

@@ -19,13 +19,25 @@ const storyEntries: ConsoleStoryEntry[] = [
   },
 ];
 
+const grayStoryEntry: ConsoleStoryEntry = {
+  storyName: 'Archived Story',
+  storyOptionId: 'gray-id',
+  color: 'GRAY',
+  openItemCount: 3,
+  storyViewUrl: null,
+};
+
+const entriesWithGray: ConsoleStoryEntry[] = [...storyEntries, grayStoryEntry];
+
 const defaultProps = {
   stories: storyEntries,
   isLoading: false,
   error: null,
+  showGray: false,
   onCreateIssue: () => Promise.resolve(),
   onAddStory: () => Promise.resolve(),
   onSelectColor: () => undefined,
+  onToggleGray: () => undefined,
   optimisticColors: {} as Record<string, ConsoleColor>,
   colorChangeInFlight: null as string | null,
   colorErrors: {} as Record<string, string>,
@@ -370,4 +382,88 @@ describe('ConsoleStoryList', () => {
     });
     expect(writeText).toHaveBeenCalledWith(storyEntries[0].storyName);
   });
+
+  describe('gray story toggle', () => {
+    it('hides gray stories when showGray is false', () => {
+      const { queryByText } = render(
+        <ConsoleStoryList
+          {...defaultProps}
+          stories={entriesWithGray}
+          showGray={false}
+        />,
+      );
+      expect(queryByText('Archived Story')).toBeNull();
+      expect(queryByText('TDPM Console port')).toBeInTheDocument();
+    });
+
+    it('shows gray stories when showGray is true', () => {
+      const { getByText } = render(
+        <ConsoleStoryList
+          {...defaultProps}
+          stories={entriesWithGray}
+          showGray={true}
+        />,
+      );
+      expect(getByText('Archived Story')).toBeInTheDocument();
+    });
+
+    it('shows the toggle button labeled Show archived when at least one gray story exists and showGray is false', () => {
+      const { getByRole } = render(
+        <ConsoleStoryList
+          {...defaultProps}
+          stories={entriesWithGray}
+          showGray={false}
+        />,
+      );
+      expect(
+        getByRole('button', { name: 'Show archived' }),
+      ).toBeInTheDocument();
+    });
+
+    it('shows the toggle button labeled Hide archived when showGray is true', () => {
+      const { getByRole } = render(
+        <ConsoleStoryList
+          {...defaultProps}
+          stories={entriesWithGray}
+          showGray={true}
+        />,
+      );
+      expect(
+        getByRole('button', { name: 'Hide archived' }),
+      ).toBeInTheDocument();
+    });
+
+    it('does not show the toggle button when no gray stories exist', () => {
+      const { queryByRole } = render(
+        <ConsoleStoryList {...defaultProps} stories={storyEntries} />,
+      );
+      expect(queryByRole('button', { name: 'Show archived' })).toBeNull();
+      expect(queryByRole('button', { name: 'Hide archived' })).toBeNull();
+    });
+
+    it('calls onToggleGray when the toggle button is clicked', () => {
+      const onToggleGray = jest.fn();
+      const { getByRole } = render(
+        <ConsoleStoryList
+          {...defaultProps}
+          stories={entriesWithGray}
+          showGray={false}
+          onToggleGray={onToggleGray}
+        />,
+      );
+      fireEvent.click(getByRole('button', { name: 'Show archived' }));
+      expect(onToggleGray).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows No active stories when all stories are gray and showGray is false', () => {
+      const { getByText } = render(
+        <ConsoleStoryList
+          {...defaultProps}
+          stories={[grayStoryEntry]}
+          showGray={false}
+        />,
+      );
+      expect(getByText('No active stories')).toBeInTheDocument();
+    });
+  });
 });

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

@@ -132,9 +132,11 @@ export type ConsoleStoryListProps = {
   stories: ConsoleStoryEntry[];
   isLoading: boolean;
   error: string | null;
+  showGray: boolean;
   onCreateIssue: (storyOptionId: string, title: string) => Promise<void>;
   onAddStory: (storyName: string) => Promise<void>;
   onSelectColor: (storyOptionId: string, newColor: ConsoleColor) => void;
+  onToggleGray: () => void;
   optimisticColors: Record<string, ConsoleColor>;
   colorChangeInFlight: string | null;
   colorErrors: Record<string, string>;
@@ -144,9 +146,11 @@ export const ConsoleStoryList = ({
   stories,
   isLoading,
   error,
+  showGray,
   onCreateIssue,
   onAddStory,
   onSelectColor,
+  onToggleGray,
   optimisticColors,
   colorChangeInFlight,
   colorErrors,
@@ -197,13 +201,18 @@ export const ConsoleStoryList = ({
     onSelectColor(storyOptionId, newColor);
   };
 
+  const visibleStories = showGray
+    ? stories
+    : stories.filter((s) => s.color !== 'GRAY');
+  const hasGrayStories = stories.some((s) => s.color === 'GRAY');
+
   return (
     <div className="console-story-list-container">
-      {stories.length === 0 ? (
+      {visibleStories.length === 0 ? (
         <p className="console-list-empty">No active stories</p>
       ) : (
         <ul className="console-story-list">
-          {stories.map((entry) => {
+          {visibleStories.map((entry) => {
             const displayColor: ConsoleColor =
               optimisticColors[entry.storyOptionId] ?? entry.color;
             const palette = colorFromEnum(displayColor);
@@ -285,6 +294,15 @@ export const ConsoleStoryList = ({
           })}
         </ul>
       )}
+      {hasGrayStories && (
+        <button
+          type="button"
+          className="console-op-button"
+          onClick={onToggleGray}
+        >
+          {showGray ? 'Hide archived' : 'Show archived'}
+        </button>
+      )}
       <div className="console-add-story-section">
         <button
           type="button"

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

@@ -994,6 +994,165 @@ describe('ConsolePage auto-advance tab', () => {
     });
   });
 
+  it('shows the stories tab badge count as the number of non-GRAY stories', async () => {
+    global.fetch = jest.fn(async (url: string) => {
+      const listMatch = url.match(/\/projects\/[^/]+\/([^/]+)\/list\.json/);
+      if (listMatch !== null) {
+        const tab = listMatch[1];
+        if (tab === 'stories') {
+          return {
+            ok: true,
+            status: 200,
+            json: async () => ({
+              generatedAt: '2026-06-19T00:00:00.000Z',
+              stories: [
+                {
+                  storyName: 'TDPM Console port',
+                  storyOptionId: 'st1',
+                  color: 'BLUE',
+                  openItemCount: 3,
+                  storyViewUrl: null,
+                },
+                {
+                  storyName: 'regular / workflow improvement',
+                  storyOptionId: 'st2',
+                  color: 'GRAY',
+                  openItemCount: 2,
+                  storyViewUrl: null,
+                },
+              ],
+              defaultNameWithOwner: null,
+              storyOrder: [],
+            }),
+          };
+        }
+        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 storiesTab = tabs.find((el) => el.textContent?.includes('Stories'));
+      expect(storiesTab).toBeTruthy();
+      expect(storiesTab?.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');
+    global.fetch = jest.fn(async (url: string) => {
+      const listMatch = url.match(/\/projects\/[^/]+\/([^/]+)\/list\.json/);
+      if (listMatch !== null) {
+        const tab = listMatch[1];
+        if (tab === 'stories') {
+          return {
+            ok: true,
+            status: 200,
+            json: async () => ({
+              generatedAt: '2026-06-19T00:00:00.000Z',
+              stories: [
+                {
+                  storyName: 'TDPM Console port',
+                  storyOptionId: 'st1',
+                  color: 'BLUE',
+                  openItemCount: 3,
+                  storyViewUrl: null,
+                },
+                {
+                  storyName: 'regular / workflow improvement',
+                  storyOptionId: 'st2',
+                  color: 'GRAY',
+                  openItemCount: 2,
+                  storyViewUrl: null,
+                },
+              ],
+              defaultNameWithOwner: null,
+              storyOrder: [],
+            }),
+          };
+        }
+        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 { findByText } = render(<ConsolePage />);
+    expect(
+      await findByText('regular / workflow improvement'),
+    ).toBeInTheDocument();
+  });
+
+  it('writes true to console-story-show-gray in localStorage when the toggle button is clicked', async () => {
+    window.history.replaceState({}, '', '/projects/acme/stories?k=token');
+    global.fetch = jest.fn(async (url: string) => {
+      const listMatch = url.match(/\/projects\/[^/]+\/([^/]+)\/list\.json/);
+      if (listMatch !== null) {
+        const tab = listMatch[1];
+        if (tab === 'stories') {
+          return {
+            ok: true,
+            status: 200,
+            json: async () => ({
+              generatedAt: '2026-06-19T00:00:00.000Z',
+              stories: [
+                {
+                  storyName: 'TDPM Console port',
+                  storyOptionId: 'st1',
+                  color: 'BLUE',
+                  openItemCount: 3,
+                  storyViewUrl: null,
+                },
+                {
+                  storyName: 'regular / workflow improvement',
+                  storyOptionId: 'st2',
+                  color: 'GRAY',
+                  openItemCount: 2,
+                  storyViewUrl: null,
+                },
+              ],
+              defaultNameWithOwner: null,
+              storyOrder: [],
+            }),
+          };
+        }
+        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 { findByRole } = render(<ConsolePage />);
+    const toggleBtn = await findByRole('button', { name: 'Show archived' });
+    fireEvent.click(toggleBtn);
+    expect(localStorage.getItem('console-story-show-gray')).toBe('true');
+  });
+
   it('navigates to the next project when a completing action fires after the project timer elapses', async () => {
     localStorage.setItem(
       'tdpm-timer-settings',

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

@@ -97,7 +97,9 @@ export const ConsolePage = () => {
         continue;
       }
       if (tab.name === 'stories') {
-        result[tab.name] = snapshot.stories.length;
+        result[tab.name] = snapshot.stories.filter(
+          (s) => s.color !== 'GRAY',
+        ).length;
       } else {
         result[tab.name] = countPendingItems(
           snapshot.items,
@@ -330,6 +332,18 @@ export const ConsolePage = () => {
 
   const detailScreenRef = useConsoleSwipeNavigation(handleSwipe);
 
+  const [showGray, setShowGray] = useState(
+    () => localStorage.getItem('console-story-show-gray') === 'true',
+  );
+
+  const handleToggleGray = useCallback((): void => {
+    setShowGray((prev) => {
+      const next = !prev;
+      localStorage.setItem('console-story-show-gray', String(next));
+      return next;
+    });
+  }, []);
+
   const storiesSnapshot = snapshots.stories;
   const storyEntries = storiesSnapshot?.stories ?? [];
   const defaultNameWithOwner = storiesSnapshot?.defaultNameWithOwner ?? null;
@@ -502,9 +516,11 @@ export const ConsolePage = () => {
           stories={storyEntries}
           isLoading={isLoading}
           error={error}
+          showGray={showGray}
           onCreateIssue={handleCreateIssue}
           onAddStory={handleStoryAdd}
           onSelectColor={handleSelectColor}
+          onToggleGray={handleToggleGray}
           optimisticColors={storyOptimisticColors}
           colorChangeInFlight={storyColorChangeInFlight}
           colorErrors={storyColorErrors}