github-issue-tower-defence-management 1.165.0 → 1.166.0

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

@@ -0,0 +1,196 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import type { ConsoleStoryEntry } from '../../logic/types';
+import { ConsoleStoryList } from './ConsoleStoryList';
+
+const storyEntries: ConsoleStoryEntry[] = [
+  {
+    storyName: 'TDPM Console port',
+    storyOptionId: '1491051e',
+    color: 'BLUE',
+    openItemCount: 12,
+  },
+  {
+    storyName: 'Move to Okinawa',
+    storyOptionId: '564803ee',
+    color: 'PURPLE',
+    openItemCount: 0,
+  },
+];
+
+describe('ConsoleStoryList', () => {
+  it('renders each story name and its open item count', () => {
+    const { getByText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+      />,
+    );
+    expect(getByText('TDPM Console port')).toBeInTheDocument();
+    expect(getByText('12')).toBeInTheDocument();
+    expect(getByText('Move to Okinawa')).toBeInTheDocument();
+    expect(getByText('0')).toBeInTheDocument();
+  });
+
+  it('renders an Add task button for each story row', () => {
+    const { getAllByRole } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+      />,
+    );
+    const buttons = getAllByRole('button', { name: 'Add task' });
+    expect(buttons).toHaveLength(storyEntries.length);
+  });
+
+  it('shows the create form when Add task is clicked', () => {
+    const { getAllByRole, getByPlaceholderText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+      />,
+    );
+    const [firstButton] = getAllByRole('button', { name: 'Add task' });
+    fireEvent.click(firstButton);
+    expect(getByPlaceholderText('Issue title')).toBeInTheDocument();
+  });
+
+  it('hides the form when Add task is clicked again on the same row', () => {
+    const { getAllByRole, queryByPlaceholderText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+      />,
+    );
+    const [firstButton] = getAllByRole('button', { name: 'Add task' });
+    fireEvent.click(firstButton);
+    fireEvent.click(firstButton);
+    expect(queryByPlaceholderText('Issue title')).toBeNull();
+  });
+
+  it('calls onCreateIssue with the correct storyOptionId and title', async () => {
+    const onCreateIssue = jest.fn().mockResolvedValue(undefined);
+    const { getAllByRole, getByPlaceholderText, getByRole } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={onCreateIssue}
+      />,
+    );
+    fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
+    fireEvent.change(getByPlaceholderText('Issue title'), {
+      target: { value: 'New feature task' },
+    });
+    fireEvent.click(getByRole('button', { name: 'Create' }));
+    await waitFor(() =>
+      expect(onCreateIssue).toHaveBeenCalledWith(
+        '1491051e',
+        'New feature task',
+      ),
+    );
+  });
+
+  it('shows a validation error when Create is clicked with an empty title', () => {
+    const { getAllByRole, getByRole, getByText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+      />,
+    );
+    fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
+    fireEvent.click(getByRole('button', { name: 'Create' }));
+    expect(getByText('Title is required')).toBeInTheDocument();
+  });
+
+  it('closes the form and clears the input after a successful create', async () => {
+    const onCreateIssue = jest.fn().mockResolvedValue(undefined);
+    const {
+      getAllByRole,
+      getByPlaceholderText,
+      getByRole,
+      queryByPlaceholderText,
+    } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={onCreateIssue}
+      />,
+    );
+    fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
+    fireEvent.change(getByPlaceholderText('Issue title'), {
+      target: { value: 'My task' },
+    });
+    fireEvent.click(getByRole('button', { name: 'Create' }));
+    await waitFor(() =>
+      expect(queryByPlaceholderText('Issue title')).toBeNull(),
+    );
+  });
+
+  it('shows an API error when onCreateIssue rejects', async () => {
+    const onCreateIssue = jest
+      .fn()
+      .mockRejectedValue(new Error('Network error'));
+    const { getAllByRole, getByPlaceholderText, getByRole, getByText } = render(
+      <ConsoleStoryList
+        stories={storyEntries}
+        isLoading={false}
+        error={null}
+        onCreateIssue={onCreateIssue}
+      />,
+    );
+    fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
+    fireEvent.change(getByPlaceholderText('Issue title'), {
+      target: { value: 'My task' },
+    });
+    fireEvent.click(getByRole('button', { name: 'Create' }));
+    await waitFor(() => expect(getByText('Network error')).toBeInTheDocument());
+  });
+
+  it('shows a loading message when isLoading is true', () => {
+    const { getByText } = render(
+      <ConsoleStoryList
+        stories={[]}
+        isLoading={true}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+      />,
+    );
+    expect(getByText('Loading stories...')).toBeInTheDocument();
+  });
+
+  it('shows an empty message when there are no stories', () => {
+    const { getByText } = render(
+      <ConsoleStoryList
+        stories={[]}
+        isLoading={false}
+        error={null}
+        onCreateIssue={() => Promise.resolve()}
+      />,
+    );
+    expect(getByText('No active stories')).toBeInTheDocument();
+  });
+
+  it('shows an error message when error is set', () => {
+    const { getByRole, getByText } = render(
+      <ConsoleStoryList
+        stories={[]}
+        isLoading={false}
+        error="HTTP 503"
+        onCreateIssue={() => Promise.resolve()}
+      />,
+    );
+    expect(getByRole('alert')).toBeInTheDocument();
+    expect(getByText(/HTTP 503/)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,163 @@
+import { useEffect, useRef, useState } from 'react';
+import { colorFromEnum } from '../../logic/colors';
+import type { ConsoleStoryEntry } from '../../logic/types';
+
+type StoryCreateFormProps = {
+  storyOptionId: string;
+  onSubmit: (storyOptionId: string, title: string) => Promise<void>;
+  onCancel: () => void;
+};
+
+const StoryCreateForm = ({
+  storyOptionId,
+  onSubmit,
+  onCancel,
+}: StoryCreateFormProps) => {
+  const [titleInput, setTitleInput] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleSubmit = async (): Promise<void> => {
+    const trimmed = titleInput.trim();
+    if (trimmed.length === 0) {
+      setSubmitError('Title is required');
+      return;
+    }
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      await onSubmit(storyOptionId, trimmed);
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form
+      className="console-story-create-form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        void handleSubmit();
+      }}
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        className="console-story-create-input"
+        placeholder="Issue title"
+        value={titleInput}
+        onChange={(e) => setTitleInput(e.target.value)}
+        disabled={submitting}
+      />
+      <button type="submit" className="console-op-button" disabled={submitting}>
+        {submitting ? 'Creating…' : 'Create'}
+      </button>
+      <button
+        type="button"
+        className="console-op-button"
+        onClick={onCancel}
+        disabled={submitting}
+      >
+        Cancel
+      </button>
+      {submitError !== null && (
+        <p role="alert" className="console-list-error">
+          {submitError}
+        </p>
+      )}
+    </form>
+  );
+};
+
+export type ConsoleStoryListProps = {
+  stories: ConsoleStoryEntry[];
+  isLoading: boolean;
+  error: string | null;
+  onCreateIssue: (storyOptionId: string, title: string) => Promise<void>;
+};
+
+export const ConsoleStoryList = ({
+  stories,
+  isLoading,
+  error,
+  onCreateIssue,
+}: ConsoleStoryListProps) => {
+  const [expandedOptionId, setExpandedOptionId] = useState<string | null>(null);
+
+  if (error !== null) {
+    return (
+      <p role="alert" className="console-list-message console-list-error">
+        Failed to load stories: {error}
+      </p>
+    );
+  }
+
+  if (isLoading) {
+    return <p className="console-list-message">Loading stories...</p>;
+  }
+
+  if (stories.length === 0) {
+    return <p className="console-list-empty">No active stories</p>;
+  }
+
+  const handleAddClick = (storyOptionId: string): void => {
+    setExpandedOptionId(
+      expandedOptionId === storyOptionId ? null : storyOptionId,
+    );
+  };
+
+  const handleSubmit = async (
+    storyOptionId: string,
+    title: string,
+  ): Promise<void> => {
+    await onCreateIssue(storyOptionId, title);
+    setExpandedOptionId(null);
+  };
+
+  return (
+    <ul className="console-story-list">
+      {stories.map((entry) => {
+        const palette = colorFromEnum(entry.color);
+        const isExpanded = expandedOptionId === entry.storyOptionId;
+        return (
+          <li key={entry.storyOptionId} className="console-story-list-row">
+            <div className="console-story-list-row-main">
+              <span
+                className="console-storytag"
+                style={{ color: palette.fg, borderColor: palette.border }}
+              >
+                <span
+                  className="console-story-dot"
+                  style={{ backgroundColor: palette.dot }}
+                />
+                {entry.storyName}
+              </span>
+              <span className="console-story-count">{entry.openItemCount}</span>
+              <button
+                type="button"
+                className="console-op-button"
+                onClick={() => handleAddClick(entry.storyOptionId)}
+              >
+                Add task
+              </button>
+            </div>
+            {isExpanded && (
+              <StoryCreateForm
+                storyOptionId={entry.storyOptionId}
+                onSubmit={handleSubmit}
+                onCancel={() => setExpandedOptionId(null)}
+              />
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

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

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

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

@@ -3,6 +3,7 @@ import type {
   ConsoleFieldOption,
   ConsoleListItem,
   ConsoleStoryColorSource,
+  ConsoleStoryEntry,
   ConsoleTabName,
 } from '../logic/types';
 import { CONSOLE_TABS } from '../logic/types';
@@ -13,6 +14,8 @@ export type ConsoleTabSnapshot = {
   statusOptions: ConsoleFieldOption[];
   storyOptions: ConsoleFieldOption[];
   storyColors: ConsoleStoryColorSource;
+  stories: ConsoleStoryEntry[];
+  defaultNameWithOwner: string | null;
 };
 
 export type ConsoleTabDataState = {
@@ -51,6 +54,13 @@ const parseOptions = (value: unknown): ConsoleFieldOption[] => {
   return value.filter(isRecord) as unknown as ConsoleFieldOption[];
 };
 
+const parseStoryEntries = (value: unknown): ConsoleStoryEntry[] => {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter(isRecord) as unknown as ConsoleStoryEntry[];
+};
+
 const parseSnapshot = (payload: unknown): ConsoleTabSnapshot => ({
   items: parseItems(payload),
   generatedAt:
@@ -63,6 +73,11 @@ const parseSnapshot = (payload: unknown): ConsoleTabSnapshot => ({
     isRecord(payload) && isRecord(payload.storyColors)
       ? (payload.storyColors as ConsoleStoryColorSource)
       : {},
+  stories: isRecord(payload) ? parseStoryEntries(payload.stories) : [],
+  defaultNameWithOwner:
+    isRecord(payload) && typeof payload.defaultNameWithOwner === 'string'
+      ? payload.defaultNameWithOwner
+      : null,
 });
 
 const emptySnapshots = (): Record<

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

@@ -339,3 +339,32 @@ export const postConsoleReviewComment = async (
     throw new Error(await readOperationErrorReason(response));
   }
 };
+
+export const CREATE_ISSUE_OPERATION_PATH = '/api/createissue';
+
+export type ConsoleCreateIssueRequest = {
+  pjcode: string;
+  title: string;
+  storyOptionId: string;
+  nameWithOwner: string;
+};
+
+export const postConsoleCreateIssue = async (
+  request: ConsoleCreateIssueRequest,
+): Promise<string> => {
+  const response = await fetch(CREATE_ISSUE_OPERATION_PATH, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  });
+  if (!response.ok) {
+    throw new Error(await readOperationErrorReason(response));
+  }
+  const payload: unknown = await response.json();
+  const isRecord = (v: unknown): v is Record<string, unknown> =>
+    v !== null && typeof v === 'object' && !Array.isArray(v);
+  if (!isRecord(payload) || typeof payload.issueUrl !== 'string') {
+    throw new Error('issueUrl was not returned');
+  }
+  return payload.issueUrl;
+};

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

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

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

@@ -147,7 +147,15 @@ export type ConsoleTabName =
   | 'unread'
   | 'failed-preparation'
   | 'todo-by-human'
-  | 'todo-by-agent';
+  | 'todo-by-agent'
+  | 'stories';
+
+export type ConsoleStoryEntry = {
+  storyName: string;
+  storyOptionId: string;
+  color: ConsoleColor;
+  openItemCount: number;
+};
 
 export type ConsoleTab = {
   name: ConsoleTabName;
@@ -162,4 +170,5 @@ 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: 'stories', label: 'Stories' },
 ];

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

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ConsoleTabList } from '../components/layout/ConsoleTabList';
 import { ConsoleItemList } from '../components/list/ConsoleItemList';
+import { ConsoleStoryList } from '../components/list/ConsoleStoryList';
 import {
   ConsoleErrorToast,
   ConsoleUndoToast,
@@ -14,6 +15,7 @@ import { useConsoleOverlay } from '../hooks/useConsoleOverlay';
 import { useConsolePjcode } from '../hooks/useConsolePjcode';
 import { useConsoleSwipeNavigation } from '../hooks/useConsoleSwipeNavigation';
 import { useConsoleTabData } from '../hooks/useConsoleTabData';
+import { postConsoleCreateIssue } from '../lib/consoleApi';
 import {
   actionAdvances,
   actionToastColor,
@@ -67,13 +69,17 @@ export const ConsolePage = () => {
       if (snapshot === null) {
         continue;
       }
-      result[tab.name] = countPendingItems(
-        snapshot.items,
-        overlayEntriesActedSinceSnapshot(
-          overlayState.overlay,
-          snapshot.generatedAt,
-        ),
-      );
+      if (tab.name === 'stories') {
+        result[tab.name] = snapshot.stories.length;
+      } else {
+        result[tab.name] = countPendingItems(
+          snapshot.items,
+          overlayEntriesActedSinceSnapshot(
+            overlayState.overlay,
+            snapshot.generatedAt,
+          ),
+        );
+      }
     }
     return result;
   }, [snapshots, overlayState.overlay]);
@@ -224,6 +230,28 @@ export const ConsolePage = () => {
 
   const detailScreenRef = useConsoleSwipeNavigation(handleSwipe);
 
+  const storiesSnapshot = snapshots.stories;
+  const storyEntries = storiesSnapshot?.stories ?? [];
+  const defaultNameWithOwner = storiesSnapshot?.defaultNameWithOwner ?? null;
+
+  const handleCreateIssue = useCallback(
+    async (storyOptionId: string, title: string): Promise<void> => {
+      if (pjcode === null) {
+        throw new Error('No project specified in the URL path.');
+      }
+      if (defaultNameWithOwner === null) {
+        throw new Error('No repository configured for this project.');
+      }
+      await postConsoleCreateIssue({
+        pjcode,
+        title,
+        storyOptionId,
+        nameWithOwner: defaultNameWithOwner,
+      });
+    },
+    [pjcode, defaultNameWithOwner],
+  );
+
   return (
     <main className="console-app">
       {actionQueue.pending !== null && (
@@ -249,7 +277,14 @@ export const ConsolePage = () => {
         tabHref={navigation.tabHref}
         onSelectTab={navigation.selectTab}
       />
-      {selectedItem === null ? (
+      {activeTab === 'stories' ? (
+        <ConsoleStoryList
+          stories={storyEntries}
+          isLoading={isLoading}
+          error={error}
+          onCreateIssue={handleCreateIssue}
+        />
+      ) : selectedItem === null ? (
         <ConsoleItemList
           rows={rows}
           storyColors={storyColors}