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

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

@@ -0,0 +1,49 @@
+import { fireEvent, render } from '@testing-library/react';
+import { consoleStatusOptionsFixture } from '../fixtures';
+import { ConsoleStatusButtonGroup } from './ConsoleStatusButtonGroup';
+
+describe('ConsoleStatusButtonGroup', () => {
+  it('renders only the four routed status buttons that exist in the data', () => {
+    const { getByText, queryByText } = render(
+      <ConsoleStatusButtonGroup
+        statusOptions={consoleStatusOptionsFixture}
+        onSetStatus={() => {}}
+        onSetInTmuxByHuman={() => {}}
+      />,
+    );
+    expect(getByText('In Tmux by agent')).toBeInTheDocument();
+    expect(getByText('In Tmux by human')).toBeInTheDocument();
+    expect(getByText('Todo by human')).toBeInTheDocument();
+    expect(getByText('Awaiting Workspace')).toBeInTheDocument();
+    expect(queryByText('Preparation')).toBeNull();
+  });
+
+  it('routes In Tmux by human to the intmux handler and others to the status handler', () => {
+    const onSetStatus = jest.fn();
+    const onSetInTmuxByHuman = jest.fn();
+    const { getByText } = render(
+      <ConsoleStatusButtonGroup
+        statusOptions={consoleStatusOptionsFixture}
+        onSetStatus={onSetStatus}
+        onSetInTmuxByHuman={onSetInTmuxByHuman}
+      />,
+    );
+    fireEvent.click(getByText('In Tmux by human'));
+    fireEvent.click(getByText('In Tmux by agent'));
+    expect(onSetInTmuxByHuman).toHaveBeenCalledTimes(1);
+    expect(onSetInTmuxByHuman.mock.calls[0][0].name).toBe('In Tmux by human');
+    expect(onSetStatus).toHaveBeenCalledTimes(1);
+    expect(onSetStatus.mock.calls[0][0].name).toBe('In Tmux by agent');
+  });
+
+  it('renders nothing when no routed option exists', () => {
+    const { container } = render(
+      <ConsoleStatusButtonGroup
+        statusOptions={[{ id: 'x', name: 'Preparation', color: 'YELLOW' }]}
+        onSetStatus={() => {}}
+        onSetInTmuxByHuman={() => {}}
+      />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { colorFromEnum } from '../colors';
+import { IN_TMUX_BY_HUMAN_NAME, STATUS_BUTTON_NAMES } from '../operations';
+import type { ConsoleFieldOption } from '../types';
+
+export type ConsoleStatusButtonGroupProps = {
+  statusOptions: ConsoleFieldOption[];
+  onSetStatus: (option: ConsoleFieldOption) => void;
+  onSetInTmuxByHuman: (option: ConsoleFieldOption) => void;
+};
+
+const findStatusOption = (
+  statusOptions: ConsoleFieldOption[],
+  name: string,
+): ConsoleFieldOption | null => {
+  const lower = name.toLowerCase();
+  return (
+    statusOptions.find((option) => option.name.toLowerCase() === lower) ?? null
+  );
+};
+
+export const ConsoleStatusButtonGroup = ({
+  statusOptions,
+  onSetStatus,
+  onSetInTmuxByHuman,
+}: ConsoleStatusButtonGroupProps) => {
+  const buttons = STATUS_BUTTON_NAMES.map((name) => ({
+    name,
+    option: findStatusOption(statusOptions, name),
+  })).filter(
+    (entry): entry is { name: string; option: ConsoleFieldOption } =>
+      entry.option !== null,
+  );
+
+  if (buttons.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="console-op-group">
+      {buttons.map(({ name, option }) => {
+        const palette = colorFromEnum(option.color);
+        const isInTmuxByHuman = name === IN_TMUX_BY_HUMAN_NAME;
+        return (
+          <button
+            key={option.id}
+            type="button"
+            className="console-op-button"
+            style={{
+              color: palette.fg,
+              borderColor: palette.border,
+              backgroundColor: palette.bg,
+            }}
+            onClick={() =>
+              isInTmuxByHuman ? onSetInTmuxByHuman(option) : onSetStatus(option)
+            }
+          >
+            {option.name}
+          </button>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { consoleStoryOptionsFixture } from '../fixtures';
+import { ConsoleStoryButtonGroup } from './ConsoleStoryButtonGroup';
+
+const meta: Meta<typeof ConsoleStoryButtonGroup> = {
+  title: 'Console/ConsoleStoryButtonGroup',
+  component: ConsoleStoryButtonGroup,
+  args: { onSetStory: () => {} },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleStoryButtonGroup>;
+
+export const AssignableStories: Story = {
+  args: { storyOptions: consoleStoryOptionsFixture },
+};

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

@@ -0,0 +1,45 @@
+import { fireEvent, render } from '@testing-library/react';
+import { ConsoleStoryButtonGroup } from './ConsoleStoryButtonGroup';
+
+const options = [
+  { id: '1', name: 'TDPM Console port', color: 'BLUE' as const },
+  {
+    id: '2',
+    name: "regular / NO STORY; DON'T WORK ON THIS",
+    color: 'RED' as const,
+  },
+  { id: '3', name: 'Move to Okinawa', color: 'PURPLE' as const },
+];
+
+describe('ConsoleStoryButtonGroup', () => {
+  it('excludes no-story options', () => {
+    const { getByText, queryByText } = render(
+      <ConsoleStoryButtonGroup storyOptions={options} onSetStory={() => {}} />,
+    );
+    expect(getByText('TDPM Console port')).toBeInTheDocument();
+    expect(getByText('Move to Okinawa')).toBeInTheDocument();
+    expect(queryByText(/NO STORY/)).toBeNull();
+  });
+
+  it('reports the selected story option', () => {
+    const onSetStory = jest.fn();
+    const { getByText } = render(
+      <ConsoleStoryButtonGroup
+        storyOptions={options}
+        onSetStory={onSetStory}
+      />,
+    );
+    fireEvent.click(getByText('Move to Okinawa'));
+    expect(onSetStory).toHaveBeenCalledWith(options[2]);
+  });
+
+  it('renders nothing when only no-story options exist', () => {
+    const { container } = render(
+      <ConsoleStoryButtonGroup
+        storyOptions={[options[1]]}
+        onSetStory={() => {}}
+      />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

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

@@ -0,0 +1,42 @@
+import { colorFromEnum } from '../colors';
+import type { ConsoleFieldOption } from '../types';
+
+export type ConsoleStoryButtonGroupProps = {
+  storyOptions: ConsoleFieldOption[];
+  onSetStory: (option: ConsoleFieldOption) => void;
+};
+
+const isNoStoryOption = (option: ConsoleFieldOption): boolean =>
+  option.name.toLowerCase().includes('no story');
+
+export const ConsoleStoryButtonGroup = ({
+  storyOptions,
+  onSetStory,
+}: ConsoleStoryButtonGroupProps) => {
+  const assignable = storyOptions.filter((option) => !isNoStoryOption(option));
+  if (assignable.length === 0) {
+    return null;
+  }
+  return (
+    <div className="console-op-group console-op-group-stories">
+      {assignable.map((option) => {
+        const palette = colorFromEnum(option.color);
+        return (
+          <button
+            key={option.id}
+            type="button"
+            className="console-op-button"
+            style={{
+              color: palette.fg,
+              borderColor: palette.border,
+              backgroundColor: palette.bg,
+            }}
+            onClick={() => onSetStory(option)}
+          >
+            {option.name}
+          </button>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConsoleStoryGroupHeader } from './ConsoleStoryGroupHeader';
+
+const meta: Meta<typeof ConsoleStoryGroupHeader> = {
+  title: 'Console/ConsoleStoryGroupHeader',
+  component: ConsoleStoryGroupHeader,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsoleStoryGroupHeader>;
+
+export const ConsolePortStory: Story = {
+  args: { story: 'TDPM Console port', count: 4, colorEnum: 'BLUE' },
+};
+
+export const RegularWorkflowStory: Story = {
+  args: {
+    story: 'regular / workflow improvement',
+    count: 12,
+    colorEnum: 'GRAY',
+  },
+};
+
+export const NoStory: Story = {
+  args: { story: '(No story)', count: 3, colorEnum: null },
+};

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

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import { ConsoleStoryGroupHeader } from './ConsoleStoryGroupHeader';
+
+describe('ConsoleStoryGroupHeader', () => {
+  it('renders the story name and count', () => {
+    const { getByText } = render(
+      <ConsoleStoryGroupHeader
+        story="TDPM Console port"
+        count={4}
+        colorEnum="BLUE"
+      />,
+    );
+    expect(getByText('TDPM Console port')).toBeInTheDocument();
+    expect(getByText('4')).toBeInTheDocument();
+  });
+
+  it('applies the dot color from the enum', () => {
+    const { container } = render(
+      <ConsoleStoryGroupHeader story="s" count={1} colorEnum="GREEN" />,
+    );
+    const dot = container.querySelector('.console-story-dot');
+    expect(dot).toHaveStyle({ backgroundColor: '#3fb950' });
+  });
+});

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' };
+  }
+};