github-issue-tower-defence-management 1.185.0 → 1.186.0

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

@@ -1,5 +1,5 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import type { ConsoleStoryEntry } from '../../logic/types';
+import type { ConsoleColor, ConsoleStoryEntry } from '../../logic/types';
 import { ConsoleStoryList } from './ConsoleStoryList';
 
 const storyEntries: ConsoleStoryEntry[] = [
@@ -20,20 +20,20 @@ const storyEntries: ConsoleStoryEntry[] = [
 ];
 
 const defaultProps = {
+  stories: storyEntries,
+  isLoading: false,
+  error: null,
   onCreateIssue: () => Promise.resolve(),
   onAddStory: () => Promise.resolve(),
+  onSelectColor: () => undefined,
+  optimisticColors: {} as Record<string, ConsoleColor>,
+  colorChangeInFlight: null as string | null,
+  colorErrors: {} as Record<string, string>,
 };
 
 describe('ConsoleStoryList', () => {
   it('renders each story name and its open item count', () => {
-    const { getByText } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        {...defaultProps}
-      />,
-    );
+    const { getByText } = render(<ConsoleStoryList {...defaultProps} />);
     expect(getByText('TDPM Console port')).toBeInTheDocument();
     expect(getByText('12')).toBeInTheDocument();
     expect(getByText('Move to Okinawa')).toBeInTheDocument();
@@ -41,26 +41,14 @@ describe('ConsoleStoryList', () => {
   });
 
   it('renders an Add task button for each story row', () => {
-    const { getAllByRole } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        {...defaultProps}
-      />,
-    );
+    const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
     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}
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} />,
     );
     const [firstButton] = getAllByRole('button', { name: 'Add task' });
     fireEvent.click(firstButton);
@@ -69,12 +57,7 @@ describe('ConsoleStoryList', () => {
 
   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}
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} />,
     );
     const [firstButton] = getAllByRole('button', { name: 'Add task' });
     fireEvent.click(firstButton);
@@ -85,13 +68,7 @@ describe('ConsoleStoryList', () => {
   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}
-        onAddStory={() => Promise.resolve()}
-      />,
+      <ConsoleStoryList {...defaultProps} onCreateIssue={onCreateIssue} />,
     );
     fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
     fireEvent.change(getByPlaceholderText('Issue title'), {
@@ -108,12 +85,7 @@ describe('ConsoleStoryList', () => {
 
   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}
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} />,
     );
     fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
     fireEvent.click(getByRole('button', { name: 'Create' }));
@@ -128,13 +100,7 @@ describe('ConsoleStoryList', () => {
       getByRole,
       queryByPlaceholderText,
     } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        onCreateIssue={onCreateIssue}
-        onAddStory={() => Promise.resolve()}
-      />,
+      <ConsoleStoryList {...defaultProps} onCreateIssue={onCreateIssue} />,
     );
     fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
     fireEvent.change(getByPlaceholderText('Issue title'), {
@@ -151,13 +117,7 @@ describe('ConsoleStoryList', () => {
       .fn()
       .mockRejectedValue(new Error('Network error'));
     const { getAllByRole, getByPlaceholderText, getByRole, getByText } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        onCreateIssue={onCreateIssue}
-        onAddStory={() => Promise.resolve()}
-      />,
+      <ConsoleStoryList {...defaultProps} onCreateIssue={onCreateIssue} />,
     );
     fireEvent.click(getAllByRole('button', { name: 'Add task' })[0]);
     fireEvent.change(getByPlaceholderText('Issue title'), {
@@ -169,36 +129,21 @@ describe('ConsoleStoryList', () => {
 
   it('shows a loading message when isLoading is true', () => {
     const { getByText } = render(
-      <ConsoleStoryList
-        stories={[]}
-        isLoading={true}
-        error={null}
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} stories={[]} isLoading={true} />,
     );
     expect(getByText('Loading stories...')).toBeInTheDocument();
   });
 
   it('shows an empty message when there are no stories', () => {
     const { getByText } = render(
-      <ConsoleStoryList
-        stories={[]}
-        isLoading={false}
-        error={null}
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} stories={[]} />,
     );
     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"
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} stories={[]} error="HTTP 503" />,
     );
     expect(getByRole('alert')).toBeInTheDocument();
     expect(getByText(/HTTP 503/)).toBeInTheDocument();
@@ -212,28 +157,14 @@ describe('ConsoleStoryList', () => {
       openItemCount: 4,
     } as unknown as ConsoleStoryEntry;
     const { getByText } = render(
-      <ConsoleStoryList
-        stories={[oldFormatEntry]}
-        isLoading={false}
-        error={null}
-        onCreateIssue={() => Promise.resolve()}
-        onAddStory={() => Promise.resolve()}
-      />,
+      <ConsoleStoryList {...defaultProps} stories={[oldFormatEntry]} />,
     );
     const nameEl = getByText('TDPM Console port');
     expect(nameEl.tagName).toBe('SPAN');
   });
 
   it('renders story name as a span when storyViewUrl is null', () => {
-    const { getByText } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        onCreateIssue={() => Promise.resolve()}
-        onAddStory={() => Promise.resolve()}
-      />,
-    );
+    const { getByText } = render(<ConsoleStoryList {...defaultProps} />);
     const nameEl = getByText('TDPM Console port');
     expect(nameEl.tagName).toBe('SPAN');
   });
@@ -247,13 +178,7 @@ describe('ConsoleStoryList', () => {
       },
     ];
     const { getByText } = render(
-      <ConsoleStoryList
-        stories={entriesWithUrl}
-        isLoading={false}
-        error={null}
-        onCreateIssue={() => Promise.resolve()}
-        onAddStory={() => Promise.resolve()}
-      />,
+      <ConsoleStoryList {...defaultProps} stories={entriesWithUrl} />,
     );
     const nameEl = getByText('TDPM Console port');
     expect(nameEl.tagName).toBe('A');
@@ -266,25 +191,13 @@ describe('ConsoleStoryList', () => {
   });
 
   it('renders an Add story button', () => {
-    const { getByRole } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        {...defaultProps}
-      />,
-    );
+    const { getByRole } = render(<ConsoleStoryList {...defaultProps} />);
     expect(getByRole('button', { name: 'Add story' })).toBeInTheDocument();
   });
 
   it('shows the Add story form when Add story button is clicked', () => {
     const { getByRole, getByPlaceholderText } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} />,
     );
     fireEvent.click(getByRole('button', { name: 'Add story' }));
     expect(getByPlaceholderText('Story name')).toBeInTheDocument();
@@ -292,12 +205,7 @@ describe('ConsoleStoryList', () => {
 
   it('hides the Add story form when Add story button is clicked again', () => {
     const { getByRole, queryByPlaceholderText } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} />,
     );
     fireEvent.click(getByRole('button', { name: 'Add story' }));
     fireEvent.click(getByRole('button', { name: 'Add story' }));
@@ -307,13 +215,7 @@ describe('ConsoleStoryList', () => {
   it('calls onAddStory with the story name and closes the form on success', async () => {
     const onAddStory = jest.fn().mockResolvedValue(undefined);
     const { getByRole, getByPlaceholderText, queryByPlaceholderText } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        onCreateIssue={() => Promise.resolve()}
-        onAddStory={onAddStory}
-      />,
+      <ConsoleStoryList {...defaultProps} onAddStory={onAddStory} />,
     );
     fireEvent.click(getByRole('button', { name: 'Add story' }));
     fireEvent.change(getByPlaceholderText('Story name'), {
@@ -330,12 +232,7 @@ describe('ConsoleStoryList', () => {
 
   it('shows a validation error when Add story Create is clicked with an empty name', () => {
     const { getByRole, getByText } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        {...defaultProps}
-      />,
+      <ConsoleStoryList {...defaultProps} />,
     );
     fireEvent.click(getByRole('button', { name: 'Add story' }));
     fireEvent.click(getByRole('button', { name: 'Create' }));
@@ -345,13 +242,7 @@ describe('ConsoleStoryList', () => {
   it('shows an API error when onAddStory rejects', async () => {
     const onAddStory = jest.fn().mockRejectedValue(new Error('API failure'));
     const { getByRole, getByPlaceholderText, getByText } = render(
-      <ConsoleStoryList
-        stories={storyEntries}
-        isLoading={false}
-        error={null}
-        onCreateIssue={() => Promise.resolve()}
-        onAddStory={onAddStory}
-      />,
+      <ConsoleStoryList {...defaultProps} onAddStory={onAddStory} />,
     );
     fireEvent.click(getByRole('button', { name: 'Add story' }));
     fireEvent.change(getByPlaceholderText('Story name'), {
@@ -363,13 +254,95 @@ describe('ConsoleStoryList', () => {
 
   it('renders Add story button even when there are no stories', () => {
     const { getByRole } = render(
+      <ConsoleStoryList {...defaultProps} stories={[]} />,
+    );
+    expect(getByRole('button', { name: 'Add story' })).toBeInTheDocument();
+  });
+
+  it('renders a Change color button for each story row', () => {
+    const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
+    const buttons = getAllByRole('button', { name: 'Change color' });
+    expect(buttons).toHaveLength(storyEntries.length);
+  });
+
+  it('shows the color palette when Change color is clicked', () => {
+    const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
+    const [firstColorButton] = getAllByRole('button', { name: 'Change color' });
+    fireEvent.click(firstColorButton);
+    expect(getAllByRole('button', { name: /GRAY \(disable\)/ })).toHaveLength(
+      1,
+    );
+  });
+
+  it('hides the palette when Change color is clicked again on the same row', () => {
+    const { getAllByRole, queryByRole } = render(
+      <ConsoleStoryList {...defaultProps} />,
+    );
+    const [firstColorButton] = getAllByRole('button', { name: 'Change color' });
+    fireEvent.click(firstColorButton);
+    fireEvent.click(firstColorButton);
+    expect(queryByRole('button', { name: /GRAY \(disable\)/ })).toBeNull();
+  });
+
+  it('calls onSelectColor with the correct storyOptionId and color when a swatch is clicked', () => {
+    const onSelectColor = jest.fn();
+    const { getAllByRole } = render(
+      <ConsoleStoryList {...defaultProps} onSelectColor={onSelectColor} />,
+    );
+    const [firstColorButton] = getAllByRole('button', { name: 'Change color' });
+    fireEvent.click(firstColorButton);
+    const greenSwatch = getAllByRole('button', { name: 'GREEN' })[0];
+    fireEvent.click(greenSwatch);
+    expect(onSelectColor).toHaveBeenCalledWith('1491051e', 'GREEN');
+  });
+
+  it('closes the palette after a swatch is clicked', () => {
+    const { getAllByRole, queryByRole } = render(
+      <ConsoleStoryList {...defaultProps} />,
+    );
+    const [firstColorButton] = getAllByRole('button', { name: 'Change color' });
+    fireEvent.click(firstColorButton);
+    const greenSwatch = getAllByRole('button', { name: 'GREEN' })[0];
+    fireEvent.click(greenSwatch);
+    expect(queryByRole('button', { name: /GRAY \(disable\)/ })).toBeNull();
+  });
+
+  it('GRAY swatch carries an accessible disable label', () => {
+    const { getAllByRole, getByRole } = render(
+      <ConsoleStoryList {...defaultProps} />,
+    );
+    const [firstColorButton] = getAllByRole('button', { name: 'Change color' });
+    fireEvent.click(firstColorButton);
+    expect(getByRole('button', { name: 'GRAY (disable)' })).toBeInTheDocument();
+  });
+
+  it('disables Change color button when colorChangeInFlight matches that storyOptionId', () => {
+    const { getAllByRole } = render(
+      <ConsoleStoryList {...defaultProps} colorChangeInFlight="1491051e" />,
+    );
+    const colorButtons = getAllByRole('button', { name: 'Change color' });
+    expect(colorButtons[0]).toBeDisabled();
+    expect(colorButtons[1]).not.toBeDisabled();
+  });
+
+  it('displays an optimistic color from optimisticColors prop', () => {
+    const { getAllByRole } = render(
       <ConsoleStoryList
-        stories={[]}
-        isLoading={false}
-        error={null}
         {...defaultProps}
+        optimisticColors={{ '1491051e': 'RED' }}
       />,
     );
-    expect(getByRole('button', { name: 'Add story' })).toBeInTheDocument();
+    const colorButtons = getAllByRole('button', { name: 'Change color' });
+    expect(colorButtons[0]).toBeInTheDocument();
+  });
+
+  it('shows a per-row error message from colorErrors prop', () => {
+    const { getByText } = render(
+      <ConsoleStoryList
+        {...defaultProps}
+        colorErrors={{ '1491051e': 'Color update failed' }}
+      />,
+    );
+    expect(getByText('Color update failed')).toBeInTheDocument();
   });
 });

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

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import { colorFromEnum } from '../../logic/colors';
-import type { ConsoleStoryEntry } from '../../logic/types';
+import { CONSOLE_COLOR_PALETTE, colorFromEnum } from '../../logic/colors';
+import type { ConsoleColor, ConsoleStoryEntry } from '../../logic/types';
+
+const ALL_COLORS = Object.keys(CONSOLE_COLOR_PALETTE) as ConsoleColor[];
 
 type InlineInputFormProps = {
   placeholder: string;
@@ -97,12 +99,44 @@ const StoryCreateForm = ({
   />
 );
 
+type ColorPaletteProps = {
+  onSelectColor: (color: ConsoleColor) => void;
+  disabled: boolean;
+};
+
+const ColorPalette = ({ onSelectColor, disabled }: ColorPaletteProps) => (
+  <div className="console-story-color-palette">
+    {ALL_COLORS.map((color) => {
+      const palette = CONSOLE_COLOR_PALETTE[color];
+      return (
+        <button
+          key={color}
+          type="button"
+          className="console-story-color-swatch"
+          aria-label={color === 'GRAY' ? `${color} (disable)` : color}
+          style={{ backgroundColor: palette.dot }}
+          onClick={() => onSelectColor(color)}
+          disabled={disabled}
+        >
+          {color === 'GRAY' && (
+            <span className="console-story-color-swatch-label">disable</span>
+          )}
+        </button>
+      );
+    })}
+  </div>
+);
+
 export type ConsoleStoryListProps = {
   stories: ConsoleStoryEntry[];
   isLoading: boolean;
   error: string | null;
   onCreateIssue: (storyOptionId: string, title: string) => Promise<void>;
   onAddStory: (storyName: string) => Promise<void>;
+  onSelectColor: (storyOptionId: string, newColor: ConsoleColor) => void;
+  optimisticColors: Record<string, ConsoleColor>;
+  colorChangeInFlight: string | null;
+  colorErrors: Record<string, string>;
 };
 
 export const ConsoleStoryList = ({
@@ -111,9 +145,16 @@ export const ConsoleStoryList = ({
   error,
   onCreateIssue,
   onAddStory,
+  onSelectColor,
+  optimisticColors,
+  colorChangeInFlight,
+  colorErrors,
 }: ConsoleStoryListProps) => {
   const [expandedOptionId, setExpandedOptionId] = useState<string | null>(null);
   const [addStoryExpanded, setAddStoryExpanded] = useState(false);
+  const [colorPickerOptionId, setColorPickerOptionId] = useState<string | null>(
+    null,
+  );
 
   if (error !== null) {
     return (
@@ -141,6 +182,20 @@ export const ConsoleStoryList = ({
     setExpandedOptionId(null);
   };
 
+  const handleColorButtonClick = (storyOptionId: string): void => {
+    setColorPickerOptionId(
+      colorPickerOptionId === storyOptionId ? null : storyOptionId,
+    );
+  };
+
+  const handleSwatchClick = (
+    storyOptionId: string,
+    newColor: ConsoleColor,
+  ): void => {
+    setColorPickerOptionId(null);
+    onSelectColor(storyOptionId, newColor);
+  };
+
   return (
     <div className="console-story-list-container">
       {stories.length === 0 ? (
@@ -148,8 +203,13 @@ export const ConsoleStoryList = ({
       ) : (
         <ul className="console-story-list">
           {stories.map((entry) => {
-            const palette = colorFromEnum(entry.color);
+            const displayColor: ConsoleColor =
+              optimisticColors[entry.storyOptionId] ?? entry.color;
+            const palette = colorFromEnum(displayColor);
             const isExpanded = expandedOptionId === entry.storyOptionId;
+            const isPickerOpen = colorPickerOptionId === entry.storyOptionId;
+            const isInFlight = colorChangeInFlight === entry.storyOptionId;
+            const colorError = colorErrors[entry.storyOptionId] ?? null;
             return (
               <li key={entry.storyOptionId} className="console-story-list-row">
                 <div className="console-story-list-row-main">
@@ -189,7 +249,28 @@ export const ConsoleStoryList = ({
                   >
                     Add task
                   </button>
+                  <button
+                    type="button"
+                    className="console-op-button"
+                    onClick={() => handleColorButtonClick(entry.storyOptionId)}
+                    disabled={isInFlight}
+                  >
+                    Change color
+                  </button>
                 </div>
+                {isPickerOpen && (
+                  <ColorPalette
+                    onSelectColor={(newColor) =>
+                      handleSwatchClick(entry.storyOptionId, newColor)
+                    }
+                    disabled={isInFlight}
+                  />
+                )}
+                {colorError !== null && (
+                  <p role="alert" className="console-list-error">
+                    {colorError}
+                  </p>
+                )}
                 {isExpanded && (
                   <StoryCreateForm
                     storyOptionId={entry.storyOptionId}

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

@@ -1,5 +1,6 @@
 import type {
   ConsoleChangedFile,
+  ConsoleColor,
   ConsoleComment,
   ConsoleCommit,
   ConsoleIssueState,
@@ -418,6 +419,28 @@ export type ConsoleCreateIssueRequest = {
   nameWithOwner: string;
 };
 
+export const STORY_COLOR_OPERATION_PATH = '/api/storycolor';
+
+export type ConsoleStoryColorRequest = {
+  pjcode: string;
+  storyOptionId: string;
+  newColor: ConsoleColor;
+  nameWithOwner: string;
+};
+
+export const postConsoleStoryColor = async (
+  request: ConsoleStoryColorRequest,
+): Promise<void> => {
+  const response = await fetch(STORY_COLOR_OPERATION_PATH, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  });
+  if (!response.ok) {
+    throw new Error(await readOperationErrorReason(response));
+  }
+};
+
 export const postConsoleCreateIssue = async (
   request: ConsoleCreateIssueRequest,
 ): Promise<string> => {

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

@@ -24,6 +24,7 @@ import {
   postConsoleAddStory,
   postConsoleCreateIssue,
   postConsoleReorderStory,
+  postConsoleStoryColor,
 } from '../lib/consoleApi';
 import { navigateAssign, navigateReplace } from '../lib/navigation';
 import {
@@ -48,6 +49,7 @@ import type { ConsoleSwipeDirection } from '../logic/swipe';
 import { findNextNonEmptyTabToRight } from '../logic/tabAdvance';
 import { findNextPjcodeWithMinutes } from '../logic/timerSettings';
 import type {
+  ConsoleColor,
   ConsoleListItem,
   ConsoleOverlayStatus,
   ConsoleTabName,
@@ -386,6 +388,73 @@ export const ConsolePage = () => {
     [pjcode],
   );
 
+  const [storyOptimisticColors, setStoryOptimisticColors] = useState<
+    Record<string, ConsoleColor>
+  >({});
+  const [storyColorChangeInFlight, setStoryColorChangeInFlight] = useState<
+    string | null
+  >(null);
+  const [storyColorErrors, setStoryColorErrors] = useState<
+    Record<string, string>
+  >({});
+
+  const handleSelectColor = useCallback(
+    (storyOptionId: string, newColor: ConsoleColor): void => {
+      const originalEntry = storyEntries.find(
+        (e) => e.storyOptionId === storyOptionId,
+      );
+      const originalColor = originalEntry?.color;
+      setStoryColorChangeInFlight(storyOptionId);
+      setStoryOptimisticColors((prev) => ({
+        ...prev,
+        [storyOptionId]: newColor,
+      }));
+      setStoryColorErrors((prev) => {
+        const next = { ...prev };
+        delete next[storyOptionId];
+        return next;
+      });
+      if (pjcode === null || defaultNameWithOwner === null) {
+        setStoryOptimisticColors((prev) =>
+          originalColor !== undefined
+            ? { ...prev, [storyOptionId]: originalColor }
+            : prev,
+        );
+        setStoryColorErrors((prev) => ({
+          ...prev,
+          [storyOptionId]: 'No project or repository configured.',
+        }));
+        setStoryColorChangeInFlight((current) =>
+          current === storyOptionId ? null : current,
+        );
+        return;
+      }
+      postConsoleStoryColor({
+        pjcode,
+        storyOptionId,
+        newColor,
+        nameWithOwner: defaultNameWithOwner,
+      })
+        .catch((err: unknown) => {
+          setStoryOptimisticColors((prev) =>
+            originalColor !== undefined
+              ? { ...prev, [storyOptionId]: originalColor }
+              : prev,
+          );
+          setStoryColorErrors((prev) => ({
+            ...prev,
+            [storyOptionId]: err instanceof Error ? err.message : String(err),
+          }));
+        })
+        .finally(() => {
+          setStoryColorChangeInFlight((current) =>
+            current === storyOptionId ? null : current,
+          );
+        });
+    },
+    [pjcode, defaultNameWithOwner, storyEntries],
+  );
+
   return (
     <main className="console-app">
       {actionQueue.pending !== null && (
@@ -433,6 +502,10 @@ export const ConsolePage = () => {
           error={error}
           onCreateIssue={handleCreateIssue}
           onAddStory={handleStoryAdd}
+          onSelectColor={handleSelectColor}
+          optimisticColors={storyOptimisticColors}
+          colorChangeInFlight={storyColorChangeInFlight}
+          colorErrors={storyColorErrors}
         />
       ) : selectedItem === null ? (
         <>