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

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

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/react';
+import { CONSOLE_ITEM_ICONS } from '../itemIcons';
+import { ConsoleItemIcon } from './ConsoleItemIcon';
+
+describe('ConsoleItemIcon', () => {
+  it('renders the green open pull-request icon for an open PR', () => {
+    const { getByRole } = render(
+      <ConsoleItemIcon
+        isPr
+        state="open"
+        merged={false}
+        isDraft={false}
+        stateReason=""
+      />,
+    );
+    const svg = getByRole('img');
+    expect(svg).toHaveAttribute('fill', CONSOLE_ITEM_ICONS.prOpen.color);
+    expect(svg).toHaveAttribute('aria-label', 'prOpen');
+  });
+
+  it('renders the red closed pull-request icon for a closed PR', () => {
+    const { getByRole } = render(
+      <ConsoleItemIcon
+        isPr
+        state="closed"
+        merged={false}
+        isDraft={false}
+        stateReason=""
+      />,
+    );
+    expect(getByRole('img')).toHaveAttribute(
+      'fill',
+      CONSOLE_ITEM_ICONS.prClosed.color,
+    );
+  });
+
+  it('renders the gray not-planned icon for a closed unplanned issue', () => {
+    const { getByRole } = render(
+      <ConsoleItemIcon
+        isPr={false}
+        state="closed"
+        merged={false}
+        isDraft={false}
+        stateReason="not_planned"
+      />,
+    );
+    expect(getByRole('img')).toHaveAttribute(
+      'fill',
+      CONSOLE_ITEM_ICONS.issueClosedNotPlanned.color,
+    );
+  });
+});

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

@@ -0,0 +1,32 @@
+import {
+  CONSOLE_ITEM_ICONS,
+  type ConsoleItemIconInput,
+  resolveConsoleItemIconKind,
+} from '../itemIcons';
+
+export type ConsoleItemIconProps = ConsoleItemIconInput & {
+  size?: number;
+};
+
+export const ConsoleItemIcon = ({
+  size = 12,
+  ...input
+}: ConsoleItemIconProps) => {
+  const kind = resolveConsoleItemIconKind(input);
+  const definition = CONSOLE_ITEM_ICONS[kind];
+  return (
+    <svg
+      className="console-item-icon"
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}
+      fill={definition.color}
+      role="img"
+      aria-label={kind}
+    >
+      {definition.paths.map((d) => (
+        <path key={d} d={d} />
+      ))}
+    </svg>
+  );
+};

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { consoleListItemsFixture } from '../fixtures';
+import { ConsoleListItemRow } from './ConsoleListItemRow';
+
+const meta: Meta<typeof ConsoleListItemRow> = {
+  title: 'Console/ConsoleListItemRow',
+  component: ConsoleListItemRow,
+  args: { onSelect: () => {} },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleListItemRow>;
+
+export const PullRequestRow: Story = {
+  args: { item: consoleListItemsFixture[0], isActive: false },
+};
+
+export const IssueRow: Story = {
+  args: { item: consoleListItemsFixture[2], isActive: false },
+};
+
+export const ActiveRow: Story = {
+  args: { item: consoleListItemsFixture[0], isActive: true },
+};

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

@@ -0,0 +1,43 @@
+import { fireEvent, render } from '@testing-library/react';
+import { consoleListItemsFixture } from '../fixtures';
+import { ConsoleListItemRow } from './ConsoleListItemRow';
+
+const prItem = consoleListItemsFixture[0];
+const issueItem = consoleListItemsFixture[2];
+
+describe('ConsoleListItemRow', () => {
+  it('renders a PR number with the PR prefix', () => {
+    const { getByText } = render(
+      <ConsoleListItemRow item={prItem} isActive={false} onSelect={() => {}} />,
+    );
+    expect(getByText(`PR #${prItem.number}`)).toBeInTheDocument();
+    expect(getByText(prItem.title)).toBeInTheDocument();
+  });
+
+  it('renders an issue number with the hash prefix', () => {
+    const { getByText } = render(
+      <ConsoleListItemRow
+        item={issueItem}
+        isActive={false}
+        onSelect={() => {}}
+      />,
+    );
+    expect(getByText(`#${issueItem.number}`)).toBeInTheDocument();
+  });
+
+  it('reports the item on click', () => {
+    const onSelect = jest.fn();
+    const { getByRole } = render(
+      <ConsoleListItemRow item={prItem} isActive={false} onSelect={onSelect} />,
+    );
+    fireEvent.click(getByRole('button'));
+    expect(onSelect).toHaveBeenCalledWith(prItem);
+  });
+
+  it('marks the active row', () => {
+    const { getByRole } = render(
+      <ConsoleListItemRow item={prItem} isActive onSelect={() => {}} />,
+    );
+    expect(getByRole('button')).toHaveAttribute('data-active', 'true');
+  });
+});

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

@@ -0,0 +1,34 @@
+import type { ConsoleListItem } from '../types';
+import { ConsoleItemIcon } from './ConsoleItemIcon';
+
+export type ConsoleListItemRowProps = {
+  item: ConsoleListItem;
+  isActive: boolean;
+  onSelect: (item: ConsoleListItem) => void;
+};
+
+export const ConsoleListItemRow = ({
+  item,
+  isActive,
+  onSelect,
+}: ConsoleListItemRowProps) => (
+  <button
+    type="button"
+    className="console-item-row"
+    aria-current={isActive ? 'true' : undefined}
+    data-active={isActive ? 'true' : undefined}
+    onClick={() => onSelect(item)}
+  >
+    <ConsoleItemIcon
+      isPr={item.isPr}
+      state="open"
+      merged={false}
+      isDraft={false}
+      stateReason=""
+    />
+    <span className="console-item-title">{item.title}</span>
+    <span className="console-item-number">
+      {item.isPr ? `PR #${item.number}` : `#${item.number}`}
+    </span>
+  </button>
+);

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

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { consoleListItemsFixture } from '../fixtures';
+import {
+  consoleListItemsFixture,
+  consoleStoryColorsFixture,
+} from '../fixtures';
+import { buildConsoleListRows } from '../grouping';
 import { ConsoleListView } from './ConsoleListView';
 
 const meta: Meta<typeof ConsoleListView> = {
@@ -11,34 +15,46 @@ export default meta;
 
 type Story = StoryObj<typeof ConsoleListView>;
 
-export const WithItems: Story = {
+export const WithStoryGroups: Story = {
   args: {
-    items: consoleListItemsFixture,
+    rows: buildConsoleListRows(consoleListItemsFixture, {}),
+    storyColors: consoleStoryColorsFixture,
+    activeItemId: null,
     isLoading: false,
     error: null,
+    onSelectItem: () => {},
   },
 };
 
 export const Loading: Story = {
   args: {
-    items: [],
+    rows: [],
+    storyColors: {},
+    activeItemId: null,
     isLoading: true,
     error: null,
+    onSelectItem: () => {},
   },
 };
 
 export const Empty: Story = {
   args: {
-    items: [],
+    rows: [],
+    storyColors: {},
+    activeItemId: null,
     isLoading: false,
     error: null,
+    onSelectItem: () => {},
   },
 };
 
 export const ErrorState: Story = {
   args: {
-    items: [],
+    rows: [],
+    storyColors: {},
+    activeItemId: null,
     isLoading: false,
     error: 'HTTP 404',
+    onSelectItem: () => {},
   },
 };

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

@@ -0,0 +1,87 @@
+import { fireEvent, render } from '@testing-library/react';
+import {
+  consoleListItemsFixture,
+  consoleStoryColorsFixture,
+} from '../fixtures';
+import { buildConsoleListRows } from '../grouping';
+import { ConsoleListView } from './ConsoleListView';
+
+const rows = buildConsoleListRows(consoleListItemsFixture, {});
+
+describe('ConsoleListView', () => {
+  it('renders group headers and items in array order', () => {
+    const { getAllByRole, getByText } = render(
+      <ConsoleListView
+        rows={rows}
+        storyColors={consoleStoryColorsFixture}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByText('TDPM Console port')).toBeInTheDocument();
+    expect(getByText('regular / workflow improvement')).toBeInTheDocument();
+    expect(getAllByRole('button').length).toBe(consoleListItemsFixture.length);
+  });
+
+  it('reports the selected item', () => {
+    const onSelectItem = jest.fn();
+    const { getByText } = render(
+      <ConsoleListView
+        rows={rows}
+        storyColors={consoleStoryColorsFixture}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={onSelectItem}
+      />,
+    );
+    fireEvent.click(
+      getByText('Add serveConsole subcommand under entry-points'),
+    );
+    expect(onSelectItem).toHaveBeenCalledWith(consoleListItemsFixture[0]);
+  });
+
+  it('shows the loading state', () => {
+    const { getByText } = render(
+      <ConsoleListView
+        rows={[]}
+        storyColors={{}}
+        activeItemId={null}
+        isLoading
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByText('Loading list...')).toBeInTheDocument();
+  });
+
+  it('shows the empty state', () => {
+    const { getByText } = render(
+      <ConsoleListView
+        rows={[]}
+        storyColors={{}}
+        activeItemId={null}
+        isLoading={false}
+        error={null}
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByText('No items.')).toBeInTheDocument();
+  });
+
+  it('shows the error state', () => {
+    const { getByRole } = render(
+      <ConsoleListView
+        rows={[]}
+        storyColors={{}}
+        activeItemId={null}
+        isLoading={false}
+        error="HTTP 404"
+        onSelectItem={() => {}}
+      />,
+    );
+    expect(getByRole('alert')).toHaveTextContent('HTTP 404');
+  });
+});

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

@@ -1,58 +1,62 @@
-import { Badge } from '@/components/ui/badge';
-import type { ConsoleListItem } from '../types';
+import { type ConsoleListRow, resolveStoryColorEnum } from '../grouping';
+import type { ConsoleListItem, ConsoleStoryColorSource } from '../types';
+import { ConsoleListItemRow } from './ConsoleListItemRow';
+import { ConsoleStoryGroupHeader } from './ConsoleStoryGroupHeader';
 
 export type ConsoleListViewProps = {
-  items: ConsoleListItem[];
+  rows: ConsoleListRow[];
+  storyColors: ConsoleStoryColorSource;
+  activeItemId: string | null;
   isLoading: boolean;
   error: string | null;
+  onSelectItem: (item: ConsoleListItem) => void;
 };
 
 export const ConsoleListView = ({
-  items,
+  rows,
+  storyColors,
+  activeItemId,
   isLoading,
   error,
+  onSelectItem,
 }: ConsoleListViewProps) => {
   if (error !== null) {
     return (
-      <p role="alert" className="p-4 text-sm text-destructive">
+      <p role="alert" className="console-list-message console-list-error">
         Failed to load list: {error}
       </p>
     );
   }
 
   if (isLoading) {
-    return <p className="p-4 text-sm text-muted-foreground">Loading list...</p>;
+    return <p className="console-list-message">Loading list...</p>;
   }
 
-  if (items.length === 0) {
-    return <p className="p-4 text-sm text-muted-foreground">No items.</p>;
+  if (rows.length === 0) {
+    return <p className="console-list-message">No items.</p>;
   }
 
   return (
-    <ul className="divide-y divide-border">
-      {items.map((item) => (
-        <li key={item.itemId} className="flex flex-col gap-1 p-3">
-          <div className="flex items-center gap-2">
-            <Badge variant={item.isPr ? 'default' : 'secondary'}>
-              {item.isPr ? 'PR' : 'Issue'}
-            </Badge>
-            <a
-              href={item.url}
-              className="font-medium underline-offset-2 hover:underline"
-            >
-              {item.title}
-            </a>
-            <span className="text-sm text-muted-foreground">
-              #{item.number}
-            </span>
-          </div>
-          <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-            <span>{item.repo}</span>
-            {item.story !== '' && <span>story: {item.story}</span>}
-            <span>{new Date(item.createdAt).toISOString()}</span>
-          </div>
-        </li>
-      ))}
+    <ul className="console-list">
+      {rows.map((row) =>
+        row.kind === 'group-header' ? (
+          <li key={`group:${row.story}`} className="console-list-group">
+            <ConsoleStoryGroupHeader
+              story={row.story}
+              count={row.count}
+              colorEnum={resolveStoryColorEnum(storyColors, row.story)}
+            />
+          </li>
+        ) : (
+          <li key={row.item.itemId} className="console-list-row">
+            <ConsoleListItemRow
+              item={row.item}
+              isActive={row.item.itemId === activeItemId}
+              onSelect={onSelectItem}
+            />
+          </li>
+        ),
+      )}
     </ul>
   );
 };

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  consoleMarkdownBodyFixture,
+  consoleMermaidBodyFixture,
+} from '../fixtures';
+import { ConsoleMarkdownView } from './ConsoleMarkdownView';
+
+const meta: Meta<typeof ConsoleMarkdownView> = {
+  title: 'Console/ConsoleMarkdownView',
+  component: ConsoleMarkdownView,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleMarkdownView>;
+
+export const RichMarkdown: Story = {
+  args: { body: consoleMarkdownBodyFixture },
+};
+
+export const WithMermaidFence: Story = {
+  args: { body: consoleMermaidBodyFixture },
+};
+
+export const Empty: Story = {
+  args: { body: '' },
+};

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

@@ -0,0 +1,36 @@
+import { render, waitFor } from '@testing-library/react';
+import { ConsoleMarkdownView } from './ConsoleMarkdownView';
+
+jest.mock('../lib/mermaidLoader', () => ({
+  renderMermaidToSvg: jest.fn(
+    async () => '<svg data-testid="mermaid-svg"></svg>',
+  ),
+}));
+
+describe('ConsoleMarkdownView', () => {
+  it('renders markdown body content', () => {
+    const { container } = render(
+      <ConsoleMarkdownView body={'## Heading\n\n- bullet'} />,
+    );
+    expect(container.querySelector('h2')).not.toBeNull();
+    expect(container.querySelector('li')).not.toBeNull();
+  });
+
+  it('shows the empty message for a blank body', () => {
+    const { getByText } = render(<ConsoleMarkdownView body="   " />);
+    expect(getByText('No description provided.')).toBeInTheDocument();
+  });
+
+  it('renders a mermaid fence via the diagram component', async () => {
+    const { container } = render(
+      <ConsoleMarkdownView
+        body={'intro\n\n```mermaid\ngraph TD; A-->B;\n```'}
+      />,
+    );
+    await waitFor(() => {
+      expect(
+        container.querySelector('.console-mermaid-rendered'),
+      ).not.toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,50 @@
+import { useEffect, useMemo, useRef } from 'react';
+import {
+  renderMarkdownToSafeHtml,
+  splitMarkdownSegments,
+} from '../lib/markdown';
+import { ConsoleMermaidDiagram } from './ConsoleMermaidDiagram';
+
+export type ConsoleMarkdownViewProps = {
+  body: string;
+};
+
+type ConsoleMarkdownHtmlBlockProps = {
+  source: string;
+};
+
+const ConsoleMarkdownHtmlBlock = ({
+  source,
+}: ConsoleMarkdownHtmlBlockProps) => {
+  const html = useMemo(() => renderMarkdownToSafeHtml(source), [source]);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container !== null) {
+      container.innerHTML = html;
+    }
+  }, [html]);
+
+  return <div ref={containerRef} className="console-markdown" />;
+};
+
+export const ConsoleMarkdownView = ({ body }: ConsoleMarkdownViewProps) => {
+  const segments = useMemo(() => splitMarkdownSegments(body), [body]);
+
+  if (body.trim() === '') {
+    return <p className="console-markdown-empty">No description provided.</p>;
+  }
+
+  return (
+    <div className="console-markdown-view">
+      {segments.map((segment) =>
+        segment.kind === 'mermaid' ? (
+          <ConsoleMermaidDiagram key={segment.key} code={segment.code} />
+        ) : (
+          <ConsoleMarkdownHtmlBlock key={segment.key} source={segment.source} />
+        ),
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { consoleMermaidCodeFixture } from '../fixtures';
+import { ConsoleMermaidDiagram } from './ConsoleMermaidDiagram';
+
+const meta: Meta<typeof ConsoleMermaidDiagram> = {
+  title: 'Console/ConsoleMermaidDiagram',
+  component: ConsoleMermaidDiagram,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleMermaidDiagram>;
+
+export const SequenceDiagram: Story = {
+  args: { code: consoleMermaidCodeFixture },
+};
+
+export const FlowDiagram: Story = {
+  args: {
+    code: 'graph TD;\n  Start-->Fetch;\n  Fetch-->Render;\n  Render-->Done;',
+  },
+};

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

@@ -0,0 +1,38 @@
+import { render, waitFor } from '@testing-library/react';
+import { renderMermaidToSvg } from '../lib/mermaidLoader';
+import { ConsoleMermaidDiagram } from './ConsoleMermaidDiagram';
+
+jest.mock('../lib/mermaidLoader', () => ({
+  renderMermaidToSvg: jest.fn(),
+}));
+
+const mockedRender = renderMermaidToSvg as jest.MockedFunction<
+  typeof renderMermaidToSvg
+>;
+
+describe('ConsoleMermaidDiagram', () => {
+  beforeEach(() => {
+    mockedRender.mockReset();
+  });
+
+  it('renders the sanitized svg once ready', async () => {
+    mockedRender.mockResolvedValue('<svg id="ok"></svg>');
+    const { container } = render(
+      <ConsoleMermaidDiagram code="graph TD; A-->B;" />,
+    );
+    await waitFor(() => {
+      expect(container.querySelector('svg#ok')).not.toBeNull();
+    });
+  });
+
+  it('shows the source and an error note when rendering fails', async () => {
+    mockedRender.mockRejectedValue(new Error('parse error'));
+    const { getByText } = render(<ConsoleMermaidDiagram code="bad diagram" />);
+    await waitFor(() => {
+      expect(
+        getByText(/Mermaid render error: parse error/),
+      ).toBeInTheDocument();
+    });
+    expect(getByText('bad diagram')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+import { renderMermaidToSvg } from '../lib/mermaidLoader';
+
+export type ConsoleMermaidDiagramProps = {
+  code: string;
+};
+
+type MermaidRenderState =
+  | { status: 'loading' }
+  | { status: 'ready'; svg: string }
+  | { status: 'error'; message: string };
+
+export const ConsoleMermaidDiagram = ({ code }: ConsoleMermaidDiagramProps) => {
+  const [state, setState] = useState<MermaidRenderState>({ status: 'loading' });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setState({ status: 'loading' });
+    renderMermaidToSvg(code)
+      .then((svg) => {
+        if (!cancelled) {
+          setState({ status: 'ready', svg });
+        }
+      })
+      .catch((cause: unknown) => {
+        if (!cancelled) {
+          setState({
+            status: 'error',
+            message: cause instanceof Error ? cause.message : String(cause),
+          });
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null) {
+      return;
+    }
+    container.innerHTML = state.status === 'ready' ? state.svg : '';
+  }, [state]);
+
+  if (state.status === 'loading') {
+    return <div className="console-mermaid-loading">Rendering diagram...</div>;
+  }
+
+  if (state.status === 'error') {
+    return (
+      <div className="console-mermaid">
+        <div className="console-mermaid-error">
+          Mermaid render error: {state.message}
+        </div>
+        <pre className="console-mermaid-source">
+          <code>{code}</code>
+        </pre>
+      </div>
+    );
+  }
+
+  return <div ref={containerRef} className="console-mermaid-rendered" />;
+};