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

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" />;
+};

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConsoleNextActionDateGroup } from './ConsoleNextActionDateGroup';
+
+const meta: Meta<typeof ConsoleNextActionDateGroup> = {
+  title: 'Console/ConsoleNextActionDateGroup',
+  component: ConsoleNextActionDateGroup,
+  args: { onSetNextActionDate: () => {} },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleNextActionDateGroup>;
+
+export const StandardTab: Story = {
+  args: { isTodoByHuman: false },
+};
+
+export const TodoByHumanTab: Story = {
+  args: { isTodoByHuman: true },
+};

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

@@ -0,0 +1,42 @@
+import { fireEvent, render } from '@testing-library/react';
+import { ConsoleNextActionDateGroup } from './ConsoleNextActionDateGroup';
+
+describe('ConsoleNextActionDateGroup', () => {
+  it('shows +1 day and +1 week outside the todo-by-human tab', () => {
+    const { getByText, queryByText } = render(
+      <ConsoleNextActionDateGroup
+        isTodoByHuman={false}
+        onSetNextActionDate={() => {}}
+      />,
+    );
+    expect(getByText('+1 day')).toBeInTheDocument();
+    expect(getByText('+1 week')).toBeInTheDocument();
+    expect(queryByText('+1 week and skip')).toBeNull();
+  });
+
+  it('shows +1 week and skip on the todo-by-human tab', () => {
+    const { getByText } = render(
+      <ConsoleNextActionDateGroup
+        isTodoByHuman
+        onSetNextActionDate={() => {}}
+      />,
+    );
+    expect(getByText('+1 week and skip')).toBeInTheDocument();
+  });
+
+  it('reports the snooze actions', () => {
+    const onSetNextActionDate = jest.fn();
+    const { getByText } = render(
+      <ConsoleNextActionDateGroup
+        isTodoByHuman={false}
+        onSetNextActionDate={onSetNextActionDate}
+      />,
+    );
+    fireEvent.click(getByText('+1 day'));
+    fireEvent.click(getByText('+1 week'));
+    expect(onSetNextActionDate.mock.calls.map((call) => call[0])).toEqual([
+      'snooze_1day',
+      'snooze_1week',
+    ]);
+  });
+});

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

@@ -0,0 +1,28 @@
+import type { ConsoleNextActionDateAction } from '../operations';
+
+export type ConsoleNextActionDateGroupProps = {
+  isTodoByHuman: boolean;
+  onSetNextActionDate: (action: ConsoleNextActionDateAction) => void;
+};
+
+export const ConsoleNextActionDateGroup = ({
+  isTodoByHuman,
+  onSetNextActionDate,
+}: ConsoleNextActionDateGroupProps) => (
+  <div className="console-op-group">
+    <button
+      type="button"
+      className="console-op-button"
+      onClick={() => onSetNextActionDate('snooze_1day')}
+    >
+      +1 day
+    </button>
+    <button
+      type="button"
+      className="console-op-button"
+      onClick={() => onSetNextActionDate('snooze_1week')}
+    >
+      {isTodoByHuman ? '+1 week and skip' : '+1 week'}
+    </button>
+  </div>
+);

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  consoleListItemsFixture,
+  consoleStatusOptionsFixture,
+  consoleStoryOptionsFixture,
+} from '../fixtures';
+import type { ConsoleOperationHandlers } from '../operations';
+import { ConsoleOperationBar } from './ConsoleOperationBar';
+
+const handlers: ConsoleOperationHandlers = {
+  onReview: () => {},
+  onSetNextActionDate: () => {},
+  onSetStory: () => {},
+  onSetStatus: () => {},
+  onSetInTmuxByHuman: () => {},
+  onClose: () => {},
+};
+
+const meta: Meta<typeof ConsoleOperationBar> = {
+  title: 'Console/ConsoleOperationBar',
+  component: ConsoleOperationBar,
+  args: {
+    statusOptions: consoleStatusOptionsFixture,
+    storyOptions: consoleStoryOptionsFixture,
+    handlers,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleOperationBar>;
+
+export const PrsTabPullRequest: Story = {
+  args: {
+    tab: 'prs',
+    item: consoleListItemsFixture[0],
+    hasPullRequest: true,
+  },
+};
+
+export const TriageTabIssueWithStoryGroup: Story = {
+  args: {
+    tab: 'triage',
+    item: consoleListItemsFixture[2],
+    hasPullRequest: false,
+  },
+};
+
+export const TodoByHumanTabIssue: Story = {
+  args: {
+    tab: 'todo-by-human',
+    item: consoleListItemsFixture[2],
+    hasPullRequest: false,
+  },
+};

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

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react';
+import {
+  consoleListItemsFixture,
+  consoleStatusOptionsFixture,
+  consoleStoryOptionsFixture,
+} from '../fixtures';
+import type { ConsoleOperationHandlers } from '../operations';
+import { ConsoleOperationBar } from './ConsoleOperationBar';
+
+const handlers: ConsoleOperationHandlers = {
+  onReview: jest.fn(),
+  onSetNextActionDate: jest.fn(),
+  onSetStory: jest.fn(),
+  onSetStatus: jest.fn(),
+  onSetInTmuxByHuman: jest.fn(),
+  onClose: jest.fn(),
+};
+
+const prItem = consoleListItemsFixture[0];
+const issueItem = consoleListItemsFixture[2];
+
+describe('ConsoleOperationBar', () => {
+  it('shows the review group for a PR and hides story and close groups outside triage', () => {
+    const { getByText, queryByText } = render(
+      <ConsoleOperationBar
+        tab="prs"
+        item={prItem}
+        hasPullRequest
+        statusOptions={consoleStatusOptionsFixture}
+        storyOptions={consoleStoryOptionsFixture}
+        handlers={handlers}
+      />,
+    );
+    expect(getByText('Approve')).toBeInTheDocument();
+    expect(getByText('+1 day')).toBeInTheDocument();
+    expect(getByText('Awaiting Workspace')).toBeInTheDocument();
+    expect(queryByText('Close')).toBeNull();
+    expect(queryByText('TDPM Console port')).toBeNull();
+  });
+
+  it('shows the story group on the triage tab and the close group for an issue', () => {
+    const { getByText } = render(
+      <ConsoleOperationBar
+        tab="triage"
+        item={issueItem}
+        hasPullRequest={false}
+        statusOptions={consoleStatusOptionsFixture}
+        storyOptions={consoleStoryOptionsFixture}
+        handlers={handlers}
+      />,
+    );
+    expect(getByText('Move to Okinawa')).toBeInTheDocument();
+    expect(getByText('Close')).toBeInTheDocument();
+    expect(getByText('Close as not planned')).toBeInTheDocument();
+  });
+
+  it('shows +1 week and skip on the todo-by-human tab', () => {
+    const { getByText } = render(
+      <ConsoleOperationBar
+        tab="todo-by-human"
+        item={issueItem}
+        hasPullRequest={false}
+        statusOptions={consoleStatusOptionsFixture}
+        storyOptions={consoleStoryOptionsFixture}
+        handlers={handlers}
+      />,
+    );
+    expect(getByText('+1 week and skip')).toBeInTheDocument();
+  });
+
+  it('hides the review group when there is no pull request', () => {
+    const { queryByText } = render(
+      <ConsoleOperationBar
+        tab="unread"
+        item={issueItem}
+        hasPullRequest={false}
+        statusOptions={consoleStatusOptionsFixture}
+        storyOptions={consoleStoryOptionsFixture}
+        handlers={handlers}
+      />,
+    );
+    expect(queryByText('Approve')).toBeNull();
+    expect(queryByText('Close')).not.toBeNull();
+  });
+});

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

@@ -0,0 +1,55 @@
+import { type ConsoleOperationHandlers, isTodoByHumanTab } from '../operations';
+import type {
+  ConsoleFieldOption,
+  ConsoleListItem,
+  ConsoleTabName,
+} from '../types';
+import { ConsoleCloseButtonGroup } from './ConsoleCloseButtonGroup';
+import { ConsoleNextActionDateGroup } from './ConsoleNextActionDateGroup';
+import { ConsolePullRequestReviewGroup } from './ConsolePullRequestReviewGroup';
+import { ConsoleStatusButtonGroup } from './ConsoleStatusButtonGroup';
+import { ConsoleStoryButtonGroup } from './ConsoleStoryButtonGroup';
+
+export type ConsoleOperationBarProps = {
+  tab: ConsoleTabName;
+  item: ConsoleListItem;
+  hasPullRequest: boolean;
+  statusOptions: ConsoleFieldOption[];
+  storyOptions: ConsoleFieldOption[];
+  handlers: ConsoleOperationHandlers;
+};
+
+export const ConsoleOperationBar = ({
+  tab,
+  item,
+  hasPullRequest,
+  statusOptions,
+  storyOptions,
+  handlers,
+}: ConsoleOperationBarProps) => {
+  const showStory = tab === 'triage';
+  const showClose = !item.isPr;
+  return (
+    <div className="console-operation-bar">
+      {hasPullRequest && (
+        <ConsolePullRequestReviewGroup onReview={handlers.onReview} />
+      )}
+      <ConsoleNextActionDateGroup
+        isTodoByHuman={isTodoByHumanTab(tab)}
+        onSetNextActionDate={handlers.onSetNextActionDate}
+      />
+      {showStory && (
+        <ConsoleStoryButtonGroup
+          storyOptions={storyOptions}
+          onSetStory={handlers.onSetStory}
+        />
+      )}
+      <ConsoleStatusButtonGroup
+        statusOptions={statusOptions}
+        onSetStatus={handlers.onSetStatus}
+        onSetInTmuxByHuman={handlers.onSetInTmuxByHuman}
+      />
+      {showClose && <ConsoleCloseButtonGroup onClose={handlers.onClose} />}
+    </div>
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConsolePanel } from './ConsolePanel';
+
+const meta: Meta<typeof ConsolePanel> = {
+  title: 'Console/ConsolePanel',
+  component: ConsolePanel,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsolePanel>;
+
+export const Expanded: Story = {
+  args: {
+    title: 'Description',
+    children: <p style={{ padding: 12 }}>Panel body content</p>,
+  },
+};
+
+export const Collapsed: Story = {
+  args: {
+    title: 'Commits',
+    defaultCollapsed: true,
+    children: <p style={{ padding: 12 }}>Panel body content</p>,
+  },
+};