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

package/src/adapter/entry-points/console/consoleOperationApi.ts

@@ -1,6 +1,7 @@
 import type { Issue } from '../../../domain/entities/Issue';
 import {
   buildStoryListWithNew,
+  FIELD_OPTION_COLORS,
   type FieldOption,
   type Project,
 } from '../../../domain/entities/Project';
@@ -52,6 +53,8 @@ export type ConsoleOperationContext = {
     | null;
   resolveProjectRepository: ConsoleProjectRepositoryResolver | null;
   invalidateProject: ((pjcode: string) => void) | null;
+  updateProjectCacheEntry:
+    ((pjcode: string, updatedProject: Project) => void) | null;
 };
 
 export type ConsoleOperationResponse = {
@@ -138,6 +141,7 @@ const projectItemReference = (
   author: '',
   closingIssueReferenceUrls: [],
   agent: null,
+  stateReason: null,
 });
 
 const recordDone = (
@@ -698,6 +702,67 @@ export const handleReviewComment = async (
   return ok();
 };
 
+const isStoryColor = (value: unknown): value is FieldOption['color'] =>
+  FIELD_OPTION_COLORS.some((c) => c === value);
+
+export const handleStoryColor = async (
+  context: ConsoleOperationContext,
+  body: Record<string, unknown>,
+): Promise<ConsoleOperationResponse> => {
+  const storyOptionId = body.storyOptionId;
+  const newColor = body.newColor;
+  const nameWithOwner = body.nameWithOwner;
+
+  if (!isNonEmptyString(storyOptionId)) {
+    return badRequest('storyOptionId is required');
+  }
+  if (!isStoryColor(newColor)) {
+    return badRequest(
+      'newColor must be one of GRAY, BLUE, GREEN, YELLOW, ORANGE, RED, PINK, PURPLE',
+    );
+  }
+  if (!isNonEmptyString(nameWithOwner)) {
+    return badRequest('nameWithOwner is required');
+  }
+
+  const binding = await resolveBinding(context, body);
+  if (isOperationResponse(binding)) {
+    return binding;
+  }
+  const { project, pjcode } = binding;
+
+  if (project.story === null) {
+    return badRequest('project does not have a story field');
+  }
+
+  const storyOption = project.story.stories.find((s) => s.id === storyOptionId);
+  if (storyOption === undefined) {
+    return badRequest(`story option "${storyOptionId}" not found in project`);
+  }
+
+  const proxyUrl = `https://github.com/${nameWithOwner}/issues/0`;
+  await context
+    .resolveIssueRepository(proxyUrl)
+    .updateStoryOptionColor(
+      { ...project, story: project.story },
+      storyOptionId,
+      newColor,
+    );
+
+  if (context.updateProjectCacheEntry !== null) {
+    const updatedStories = project.story.stories.map((s) =>
+      s.id === storyOptionId ? { ...s, color: newColor } : s,
+    );
+    const updatedProject: Project = {
+      ...project,
+      story: { ...project.story, stories: updatedStories },
+    };
+    context.updateProjectCacheEntry(pjcode, updatedProject);
+  }
+
+  return ok();
+};
+
 export const handleIntmux = async (
   context: ConsoleOperationContext,
   body: Record<string, unknown>,

package/src/adapter/entry-points/console/consoleProjectResolver.test.ts

@@ -127,6 +127,32 @@ describe('createConsoleProjectResolver', () => {
     });
     expect(loadProject).toHaveBeenCalledTimes(2);
   });
+
+  it('updateEntry replaces the cached project so the next resolve returns the updated project', async () => {
+    const updatedProject: Project = { ...acmeProject, id: 'PVT_acme_updated' };
+    const loadProject = jest.fn(async () => acmeProject);
+    const { resolve, updateEntry } = createConsoleProjectResolver(
+      { acme: 'https://github.com/orgs/acme/projects/1' },
+      loadProject,
+    );
+    await resolve('acme');
+    updateEntry('acme', updatedProject);
+    const result = await resolve('acme');
+    expect(result?.project).toBe(updatedProject);
+    expect(loadProject).toHaveBeenCalledTimes(1);
+  });
+
+  it('updateEntry is a no-op for a pjcode that was never resolved', async () => {
+    const updatedProject: Project = { ...acmeProject, id: 'PVT_acme_updated' };
+    const loadProject = jest.fn(async () => acmeProject);
+    const { resolve, updateEntry } = createConsoleProjectResolver(
+      { acme: 'https://github.com/orgs/acme/projects/1' },
+      loadProject,
+    );
+    updateEntry('acme', updatedProject);
+    const result = await resolve('acme');
+    expect(result?.project).toBe(acmeProject);
+  });
 });
 
 describe('createConsoleProjectLoader', () => {

package/src/adapter/entry-points/console/consoleProjectResolver.ts

@@ -71,6 +71,7 @@ export const createPjcodeConfigChecker = (
 export type ConsoleProjectResolverBundle = {
   resolve: ConsoleProjectResolver;
   invalidate: (pjcode: string) => void;
+  updateEntry: (pjcode: string, updatedProject: Project) => void;
 };
 
 export const createConsoleProjectResolver = (
@@ -100,5 +101,11 @@ export const createConsoleProjectResolver = (
   const invalidate = (pjcode: string): void => {
     cache.delete(pjcode);
   };
-  return { resolve, invalidate };
+  const updateEntry = (pjcode: string, updatedProject: Project): void => {
+    const existing = cache.get(pjcode);
+    if (existing !== undefined) {
+      cache.set(pjcode, { ...existing, project: updatedProject });
+    }
+  };
+  return { resolve, invalidate, updateEntry };
 };

package/src/adapter/entry-points/console/dashboardEmitterComposerKey.test.ts

@@ -48,6 +48,7 @@ const makeIssue = (overrides: Partial<Issue>): Issue => {
     author: 'someone',
     closingIssueReferenceUrls: [],
     agent: null,
+    stateReason: null,
     ...overrides,
   };
 };

package/src/adapter/entry-points/console/ui/e2e/consoleScenario.spec.ts

@@ -514,6 +514,46 @@ test('creates a new story when the add-story button and form are used', async ({
   ).toHaveCount(0);
 });
 
+test('changes the color of a story row via the color palette in the stories tab', async ({
+  page,
+}) => {
+  await page.goto(harness.appRootUrl);
+
+  await tabByLabel(page, 'Stories').click();
+
+  const tdpmRow = page.locator('.console-story-list-row', {
+    hasText: 'TDPM Console port',
+  });
+  await expect(tdpmRow).toBeVisible();
+
+  const changeColorButton = tdpmRow.locator('.console-op-button', {
+    hasText: 'Change color',
+  });
+  await expect(changeColorButton).toBeVisible();
+
+  await changeColorButton.click();
+
+  const palette = tdpmRow.locator('.console-story-color-palette');
+  await expect(palette).toBeVisible();
+
+  const swatches = palette.locator('.console-story-color-swatch');
+  await expect(swatches).toHaveCount(8);
+
+  const graySwatch = swatches.filter({ hasText: 'disable' });
+  await expect(graySwatch).toHaveCount(1);
+
+  const greenSwatch = palette.locator('[aria-label="GREEN"]');
+  await greenSwatch.click();
+
+  await expect
+    .poll(() => harness.storyColorCalls.length, { timeout: 10000 })
+    .toBe(1);
+  expect(harness.storyColorCalls[0].storyOptionId).toBe('1491051e');
+  expect(harness.storyColorCalls[0].newColor).toBe('GREEN');
+
+  await expect(palette).toHaveCount(0);
+});
+
 test('reorders stories on the triage tab with up/down buttons', async ({
   page,
 }) => {

package/src/adapter/entry-points/console/ui/e2e/consoleTestHarness.ts

@@ -47,6 +47,11 @@ export type ConsoleE2eCreateIssueCall = {
   title: string;
 };
 
+export type ConsoleE2eStoryColorCall = {
+  storyOptionId: string;
+  newColor: string;
+};
+
 type ConsoleFixtureListItem = {
   number: number;
   title: string;
@@ -391,6 +396,7 @@ const buildIssueForUrl = (url: string): Issue => ({
   author: 'HiromiShikata',
   closingIssueReferenceUrls: [],
   agent: null,
+  stateReason: null,
 });
 
 const notImplemented = (method: string): never => {
@@ -453,6 +459,7 @@ const createStubIssueRepository = (
   reviewCommentCalls: ConsoleE2eReviewCommentCall[],
   requestChangesCalls: ConsoleE2eRequestChangesCall[],
   createIssueCalls: ConsoleE2eCreateIssueCall[],
+  storyColorCalls: ConsoleE2eStoryColorCall[],
 ): IssueRepository => ({
   getAllIssues: () => notImplemented('getAllIssues'),
   getIssueByUrl: async (url: string): Promise<Issue | null> =>
@@ -615,6 +622,13 @@ const createStubIssueRepository = (
         }
       : null,
   setIssueAgentField: async (): Promise<void> => undefined,
+  updateStoryOptionColor: async (
+    _project,
+    storyOptionId: string,
+    newColor: string,
+  ): Promise<void> => {
+    storyColorCalls.push({ storyOptionId, newColor });
+  },
 });
 
 export type ConsoleE2eReorderStoryCall = {
@@ -635,6 +649,7 @@ export type ConsoleE2eHarness = {
   createIssueCalls: ConsoleE2eCreateIssueCall[];
   reorderStoryCalls: ConsoleE2eReorderStoryCall[];
   addStoryCalls: ConsoleE2eAddStoryCall[];
+  storyColorCalls: ConsoleE2eStoryColorCall[];
   stop: () => Promise<void>;
 };
 
@@ -658,6 +673,7 @@ export const startConsoleE2eHarness = async (): Promise<ConsoleE2eHarness> => {
   const createIssueCalls: ConsoleE2eCreateIssueCall[] = [];
   const reorderStoryCalls: ConsoleE2eReorderStoryCall[] = [];
   const addStoryCalls: ConsoleE2eAddStoryCall[] = [];
+  const storyColorCalls: ConsoleE2eStoryColorCall[] = [];
 
   const server = await startWebServer({
     accessToken: CONSOLE_E2E_TOKEN,
@@ -667,6 +683,7 @@ export const startConsoleE2eHarness = async (): Promise<ConsoleE2eHarness> => {
       reviewCommentCalls,
       requestChangesCalls,
       createIssueCalls,
+      storyColorCalls,
     ),
     projectRepository: {
       updateStoryList: async (_updatedProject, stories) => {
@@ -726,6 +743,7 @@ export const startConsoleE2eHarness = async (): Promise<ConsoleE2eHarness> => {
     createIssueCalls,
     reorderStoryCalls,
     addStoryCalls,
+    storyColorCalls,
     stop: async (): Promise<void> => {
       await closeServer(server);
       fs.rmSync(tmpRoot, { recursive: true, force: true });

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

@@ -53,6 +53,10 @@ const meta: Meta<typeof ConsoleStoryList> = {
   args: {
     onCreateIssue: () => Promise.resolve(),
     onAddStory: () => Promise.resolve(),
+    onSelectColor: () => undefined,
+    optimisticColors: {},
+    colorChangeInFlight: null,
+    colorErrors: {},
   },
 };
 

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();
   });
 });