github-issue-tower-defence-management 2.1.1 → 2.2.0

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

@@ -114,7 +114,6 @@ describe('consoleOperationApi', () => {
       isPjcodeConfigured: (pjcode: string) => pjcode === 'acme',
       consoleDataOutputDir: baseDir,
       issueAttachmentRepository: null,
-      updateStoryList: null,
       resolveProjectRepository: null,
       invalidateProject: null,
       updateProjectCacheEntry: null,
@@ -130,7 +129,6 @@ describe('consoleOperationApi', () => {
     isPjcodeConfigured: (pjcode: string) => pjcode === 'acme',
     consoleDataOutputDir: baseDir,
     issueAttachmentRepository: null,
-    updateStoryList: null,
     resolveProjectRepository: null,
     invalidateProject: null,
     updateProjectCacheEntry: null,
@@ -917,7 +915,6 @@ describe('consoleOperationApi', () => {
         isPjcodeConfigured: (pjcode: string) => pjcode === 'acme',
         consoleDataOutputDir: baseDir,
         issueAttachmentRepository: null,
-        updateStoryList: null,
         resolveProjectRepository: null,
         invalidateProject: null,
         updateProjectCacheEntry: null,
@@ -1166,7 +1163,6 @@ describe('consoleOperationApi', () => {
           pjcode === 'acme' || pjcode === 'globex',
         consoleDataOutputDir: baseDir,
         issueAttachmentRepository: null,
-        updateStoryList: null,
         resolveProjectRepository: null,
         invalidateProject: null,
         updateProjectCacheEntry: null,
@@ -1755,12 +1751,12 @@ describe('consoleOperationApi', () => {
       },
     });
 
-    const contextWithUpdateStoryList = (
-      updateStoryList: ConsoleOperationContext['updateStoryList'],
+    const contextWithProjectRepository = (
+      resolveProjectRepository: ConsoleOperationContext['resolveProjectRepository'],
       baseProject: Project = projectWithOrderedStories(),
     ): ConsoleOperationContext => ({
       ...contextForProject(baseProject),
-      updateStoryList,
+      resolveProjectRepository,
     });
 
     it('returns 400 when pjcode is missing', async () => {
@@ -1797,9 +1793,25 @@ describe('consoleOperationApi', () => {
       });
     });
 
+    it('returns 502 when resolveProjectRepository is null', async () => {
+      const response = await handleReorderStory(
+        contextWithProjectRepository(null),
+        {
+          pjcode: 'acme',
+          storyOptionId: 'opt_b',
+          direction: 'up',
+        },
+      );
+      expect(response).toEqual({
+        statusCode: 502,
+        body: { error: 'project repository is not configured' },
+      });
+    });
+
     it('returns 400 when project is not found', async () => {
+      const updateStoryList = jest.fn().mockResolvedValue([]);
       const response = await handleReorderStory(
-        contextWithUpdateStoryList(jest.fn()),
+        contextWithProjectRepository(() => ({ updateStoryList })),
         {
           pjcode: 'unknown',
           storyOptionId: 'opt_b',
@@ -1813,8 +1825,9 @@ describe('consoleOperationApi', () => {
     });
 
     it('returns 400 when story option is not found', async () => {
+      const updateStoryList = jest.fn().mockResolvedValue([]);
       const response = await handleReorderStory(
-        contextWithUpdateStoryList(jest.fn()),
+        contextWithProjectRepository(() => ({ updateStoryList })),
         {
           pjcode: 'acme',
           storyOptionId: 'opt_nonexistent',
@@ -1828,8 +1841,9 @@ describe('consoleOperationApi', () => {
     });
 
     it('returns 400 when direction is "up" and the option is already first', async () => {
+      const updateStoryList = jest.fn().mockResolvedValue([]);
       const response = await handleReorderStory(
-        contextWithUpdateStoryList(jest.fn()),
+        contextWithProjectRepository(() => ({ updateStoryList })),
         {
           pjcode: 'acme',
           storyOptionId: 'opt_a',
@@ -1843,8 +1857,9 @@ describe('consoleOperationApi', () => {
     });
 
     it('returns 400 when direction is "down" and the option is already last', async () => {
+      const updateStoryList = jest.fn().mockResolvedValue([]);
       const response = await handleReorderStory(
-        contextWithUpdateStoryList(jest.fn()),
+        contextWithProjectRepository(() => ({ updateStoryList })),
         {
           pjcode: 'acme',
           storyOptionId: 'opt_c',
@@ -1857,25 +1872,11 @@ describe('consoleOperationApi', () => {
       });
     });
 
-    it('returns 400 when updateStoryList is not configured', async () => {
-      const response = await handleReorderStory(
-        contextWithUpdateStoryList(null),
-        {
-          pjcode: 'acme',
-          storyOptionId: 'opt_b',
-          direction: 'up',
-        },
-      );
-      expect(response).toEqual({
-        statusCode: 400,
-        body: { error: 'updateStoryList is not configured' },
-      });
-    });
-
-    it('swaps the target option with its neighbor, calls updateStoryList with reordered list, and returns 200', async () => {
+    it('swaps the target option with its neighbor, calls resolveProjectRepository updateStoryList with reordered list, and returns 200', async () => {
       const updateStoryList = jest.fn().mockResolvedValue([]);
+      const resolveProjectRepository = jest.fn(() => ({ updateStoryList }));
       const response = await handleReorderStory(
-        contextWithUpdateStoryList(updateStoryList),
+        contextWithProjectRepository(resolveProjectRepository),
         {
           pjcode: 'acme',
           storyOptionId: 'opt_b',
@@ -1883,6 +1884,9 @@ describe('consoleOperationApi', () => {
         },
       );
       expect(response).toEqual({ statusCode: 200, body: { ok: true } });
+      expect(resolveProjectRepository).toHaveBeenCalledWith(
+        projectWithOrderedStories().url,
+      );
       expect(updateStoryList).toHaveBeenCalledTimes(1);
       expect(updateStoryList).toHaveBeenCalledWith(
         expect.objectContaining({ id: projectWithOrderedStories().id }),
@@ -1894,13 +1898,35 @@ describe('consoleOperationApi', () => {
       );
     });
 
+    it('calls invalidateProject with pjcode after successful reorder', async () => {
+      const updateStoryList = jest.fn().mockResolvedValue([]);
+      const invalidateProject = jest.fn();
+      const response = await handleReorderStory(
+        {
+          ...contextWithProjectRepository(() => ({ updateStoryList })),
+          invalidateProject,
+        },
+        {
+          pjcode: 'acme',
+          storyOptionId: 'opt_b',
+          direction: 'up',
+        },
+      );
+      expect(response).toEqual({ statusCode: 200, body: { ok: true } });
+      expect(invalidateProject).toHaveBeenCalledWith('acme');
+    });
+
     it('returns 400 when project does not have a story field', async () => {
       const projectWithoutStory = {
         ...projectWithOrderedStories(),
         story: null,
       };
+      const updateStoryList = jest.fn().mockResolvedValue([]);
       const response = await handleReorderStory(
-        contextWithUpdateStoryList(jest.fn(), projectWithoutStory),
+        contextWithProjectRepository(
+          () => ({ updateStoryList }),
+          projectWithoutStory,
+        ),
         {
           pjcode: 'acme',
           storyOptionId: 'opt_b',
@@ -1913,7 +1939,7 @@ describe('consoleOperationApi', () => {
       });
     });
 
-    it('passes the full story list including GRAY options to updateStoryList', async () => {
+    it('passes the full story list including GRAY options to resolveProjectRepository updateStoryList', async () => {
       const projectWithGray = {
         ...projectWithOrderedStories(),
         story: {
@@ -1945,7 +1971,10 @@ describe('consoleOperationApi', () => {
       };
       const updateStoryList = jest.fn().mockResolvedValue([]);
       const response = await handleReorderStory(
-        contextWithUpdateStoryList(updateStoryList, projectWithGray),
+        contextWithProjectRepository(
+          () => ({ updateStoryList }),
+          projectWithGray,
+        ),
         {
           pjcode: 'acme',
           storyOptionId: 'opt_b',
@@ -2156,7 +2185,6 @@ describe('consoleOperationApi', () => {
         isPjcodeConfigured: (pjcode: string) => pjcode === 'acme',
         consoleDataOutputDir: baseDir,
         issueAttachmentRepository: null,
-        updateStoryList: null,
         resolveProjectRepository: jest.fn(() => ({
           updateStoryList: consecutiveUpdateStoryList,
         })),

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

@@ -50,9 +50,6 @@ export type ConsoleOperationContext = {
   isPjcodeConfigured: ConsolePjcodeValidator;
   consoleDataOutputDir: string | null;
   issueAttachmentRepository: IssueAttachmentRepository | null;
-  updateStoryList:
-    | ((project: Project, stories: FieldOption[]) => Promise<FieldOption[]>)
-    | null;
   resolveProjectRepository: ConsoleProjectRepositoryResolver | null;
   invalidateProject: ((pjcode: string) => void) | null;
   updateProjectCacheEntry:
@@ -851,6 +848,9 @@ export const handleReorderStory = async (
   if (direction !== 'up' && direction !== 'down') {
     return badRequest('direction must be "up" or "down"');
   }
+  if (context.resolveProjectRepository === null) {
+    return badGateway('project repository is not configured');
+  }
   const binding = await context.resolveProject(pjcode);
   if (binding === null) {
     return badRequest(`no project configured for pjcode "${pjcode}"`);
@@ -859,9 +859,6 @@ export const handleReorderStory = async (
   if (project.story === null) {
     return badRequest('project does not have a story field');
   }
-  if (context.updateStoryList === null) {
-    return badRequest('updateStoryList is not configured');
-  }
   const stories = project.story.stories;
   const index = stories.findIndex((s) => s.id === storyOptionId);
   if (index === -1) {
@@ -875,7 +872,9 @@ export const handleReorderStory = async (
   const temp = reordered[index];
   reordered[index] = reordered[swapIndex];
   reordered[swapIndex] = temp;
-  await context.updateStoryList(project, reordered);
+  const projectRepository = context.resolveProjectRepository(project.url);
+  await projectRepository.updateStoryList(project, reordered);
+  context.invalidateProject?.(pjcode);
   return ok();
 };
 

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

@@ -703,25 +703,20 @@ export const startConsoleE2eHarness = async (): Promise<ConsoleE2eHarness> => {
       storyColorCalls,
       commentCalls,
     ),
-    projectRepository: {
-      updateStoryList: async (_updatedProject, stories) => {
-        reorderStoryCalls.push({
-          storyOptionIds: stories
-            .map((s) => s.id)
-            .filter((id): id is string => id !== null),
-        });
-        const result = stories as FieldOption[];
-        if (project.story !== null) {
-          project.story.stories = result;
-        }
-        return result;
-      },
-    },
     resolveProjectRepository: (_projectUrl) => ({
       updateStoryList: async (_updatedProject, stories) => {
-        const newStory = stories.find((s) => s.id === null);
-        if (newStory !== undefined) {
-          addStoryCalls.push({ storyName: newStory.name });
+        const currentCount = project.story?.stories.length ?? 0;
+        if (stories.length > currentCount) {
+          const newStory = stories.find((s) => s.id === null);
+          if (newStory !== undefined) {
+            addStoryCalls.push({ storyName: newStory.name });
+          }
+        } else {
+          reorderStoryCalls.push({
+            storyOptionIds: stories
+              .map((s) => s.id)
+              .filter((id): id is string => id !== null),
+          });
         }
         const result = stories as FieldOption[];
         if (project.story !== null) {

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

@@ -67,6 +67,7 @@ const meta: Meta<typeof ConsoleStoryList> = {
     onAddStory: () => Promise.resolve(),
     onSelectColor: () => undefined,
     onToggleGray: () => undefined,
+    onReorderStory: () => Promise.resolve(),
     optimisticColors: {},
     colorChangeInFlight: null,
     colorErrors: {},

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

@@ -38,6 +38,7 @@ const defaultProps = {
   onAddStory: () => Promise.resolve(),
   onSelectColor: () => undefined,
   onToggleGray: () => undefined,
+  onReorderStory: () => Promise.resolve(),
   optimisticColors: {} as Record<string, ConsoleColor>,
   colorChangeInFlight: null as string | null,
   colorErrors: {} as Record<string, string>,
@@ -466,4 +467,88 @@ describe('ConsoleStoryList', () => {
       expect(getByText('No active stories')).toBeInTheDocument();
     });
   });
+
+  describe('reorder buttons', () => {
+    it('renders Move up and Move down buttons for each visible story', () => {
+      const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
+      const upButtons = getAllByRole('button', { name: 'Move up' });
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      expect(upButtons).toHaveLength(storyEntries.length);
+      expect(downButtons).toHaveLength(storyEntries.length);
+    });
+
+    it('disables the Move up button for the first story', () => {
+      const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
+      const upButtons = getAllByRole('button', { name: 'Move up' });
+      expect(upButtons[0]).toBeDisabled();
+      expect(upButtons[1]).not.toBeDisabled();
+    });
+
+    it('disables the Move down button for the last story', () => {
+      const { getAllByRole } = render(<ConsoleStoryList {...defaultProps} />);
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      expect(downButtons[0]).not.toBeDisabled();
+      expect(downButtons[1]).toBeDisabled();
+    });
+
+    it('calls onReorderStory with storyOptionId and up when Move up is clicked', async () => {
+      const onReorderStory = jest.fn().mockResolvedValue(undefined);
+      const { getAllByRole } = render(
+        <ConsoleStoryList {...defaultProps} onReorderStory={onReorderStory} />,
+      );
+      const upButtons = getAllByRole('button', { name: 'Move up' });
+      await act(async () => {
+        fireEvent.click(upButtons[1]);
+      });
+      expect(onReorderStory).toHaveBeenCalledWith('564803ee', 'up');
+    });
+
+    it('calls onReorderStory with storyOptionId and down when Move down is clicked', async () => {
+      const onReorderStory = jest.fn().mockResolvedValue(undefined);
+      const { getAllByRole } = render(
+        <ConsoleStoryList {...defaultProps} onReorderStory={onReorderStory} />,
+      );
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      await act(async () => {
+        fireEvent.click(downButtons[0]);
+      });
+      expect(onReorderStory).toHaveBeenCalledWith('1491051e', 'down');
+    });
+
+    it('disables Move up and Move down buttons while reorder is in progress', async () => {
+      let resolveReorder: () => void;
+      const reorderPromise = new Promise<void>((resolve) => {
+        resolveReorder = resolve;
+      });
+      const onReorderStory = jest.fn().mockReturnValue(reorderPromise);
+      const { getAllByRole } = render(
+        <ConsoleStoryList {...defaultProps} onReorderStory={onReorderStory} />,
+      );
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      fireEvent.click(downButtons[0]);
+      await waitFor(() => {
+        const upButtons = getAllByRole('button', { name: 'Move up' });
+        expect(upButtons[0]).toBeDisabled();
+        expect(downButtons[0]).toBeDisabled();
+      });
+      await act(async () => {
+        resolveReorder!();
+      });
+    });
+
+    it('shows an error message when onReorderStory throws', async () => {
+      const onReorderStory = jest
+        .fn()
+        .mockRejectedValue(new Error('Reorder failed'));
+      const { getAllByRole, findByRole } = render(
+        <ConsoleStoryList {...defaultProps} onReorderStory={onReorderStory} />,
+      );
+      const downButtons = getAllByRole('button', { name: 'Move down' });
+      await act(async () => {
+        fireEvent.click(downButtons[0]);
+      });
+      const alert = await findByRole('alert');
+      expect(alert).toHaveTextContent('Reorder failed');
+    });
+  });
 });

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

@@ -3,6 +3,11 @@ import { CONSOLE_COLOR_PALETTE, colorFromEnum } from '../../logic/colors';
 import type { ConsoleColor, ConsoleStoryEntry } from '../../logic/types';
 import { ConsoleCopyStoryNameButton } from './ConsoleCopyStoryNameButton';
 
+type RowReorderState = {
+  inProgress: boolean;
+  error: string | null;
+};
+
 const ALL_COLORS = Object.keys(CONSOLE_COLOR_PALETTE) as ConsoleColor[];
 
 type InlineInputFormProps = {
@@ -137,6 +142,10 @@ export type ConsoleStoryListProps = {
   onAddStory: (storyName: string) => Promise<void>;
   onSelectColor: (storyOptionId: string, newColor: ConsoleColor) => void;
   onToggleGray: () => void;
+  onReorderStory: (
+    storyOptionId: string,
+    direction: 'up' | 'down',
+  ) => Promise<void>;
   optimisticColors: Record<string, ConsoleColor>;
   colorChangeInFlight: string | null;
   colorErrors: Record<string, string>;
@@ -151,6 +160,7 @@ export const ConsoleStoryList = ({
   onAddStory,
   onSelectColor,
   onToggleGray,
+  onReorderStory,
   optimisticColors,
   colorChangeInFlight,
   colorErrors,
@@ -160,6 +170,37 @@ export const ConsoleStoryList = ({
   const [colorPickerOptionId, setColorPickerOptionId] = useState<string | null>(
     null,
   );
+  const [rowReorderStates, setRowReorderStates] = useState<
+    Record<string, RowReorderState>
+  >({});
+
+  const getRowReorderState = (id: string): RowReorderState =>
+    rowReorderStates[id] ?? { inProgress: false, error: null };
+
+  const handleReorder = async (
+    storyOptionId: string,
+    direction: 'up' | 'down',
+  ): Promise<void> => {
+    setRowReorderStates((prev) => ({
+      ...prev,
+      [storyOptionId]: { inProgress: true, error: null },
+    }));
+    try {
+      await onReorderStory(storyOptionId, direction);
+      setRowReorderStates((prev) => ({
+        ...prev,
+        [storyOptionId]: { inProgress: false, error: null },
+      }));
+    } catch (err) {
+      setRowReorderStates((prev) => ({
+        ...prev,
+        [storyOptionId]: {
+          inProgress: false,
+          error: err instanceof Error ? err.message : String(err),
+        },
+      }));
+    }
+  };
 
   if (error !== null) {
     return (
@@ -212,7 +253,7 @@ export const ConsoleStoryList = ({
         <p className="console-list-empty">No active stories</p>
       ) : (
         <ul className="console-story-list">
-          {visibleStories.map((entry) => {
+          {visibleStories.map((entry, index) => {
             const displayColor: ConsoleColor =
               optimisticColors[entry.storyOptionId] ?? entry.color;
             const palette = colorFromEnum(displayColor);
@@ -220,6 +261,10 @@ export const ConsoleStoryList = ({
             const isPickerOpen = colorPickerOptionId === entry.storyOptionId;
             const isInFlight = colorChangeInFlight === entry.storyOptionId;
             const colorError = colorErrors[entry.storyOptionId] ?? null;
+            const { inProgress: reorderInProgress, error: reorderError } =
+              getRowReorderState(entry.storyOptionId);
+            const isFirst = index === 0;
+            const isLast = index === visibleStories.length - 1;
             return (
               <li key={entry.storyOptionId} className="console-story-list-row">
                 <div className="console-story-list-row-main">
@@ -268,7 +313,34 @@ export const ConsoleStoryList = ({
                   >
                     Change color
                   </button>
+                  <button
+                    type="button"
+                    className="console-op-button"
+                    aria-label="Move up"
+                    disabled={isFirst || reorderInProgress}
+                    onClick={() =>
+                      void handleReorder(entry.storyOptionId, 'up')
+                    }
+                  >
+                    ↑
+                  </button>
+                  <button
+                    type="button"
+                    className="console-op-button"
+                    aria-label="Move down"
+                    disabled={isLast || reorderInProgress}
+                    onClick={() =>
+                      void handleReorder(entry.storyOptionId, 'down')
+                    }
+                  >
+                    ↓
+                  </button>
                 </div>
+                {reorderError !== null && (
+                  <p role="alert" className="console-list-error">
+                    {reorderError}
+                  </p>
+                )}
                 {isPickerOpen && (
                   <ColorPalette
                     onSelectColor={(newColor) =>

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

@@ -52,6 +52,7 @@ import type {
   ConsoleColor,
   ConsoleListItem,
   ConsoleOverlayStatus,
+  ConsoleStoryEntry,
   ConsoleTabName,
 } from '../logic/types';
 import { CONSOLE_TABS } from '../logic/types';
@@ -185,6 +186,11 @@ export const ConsolePage = () => {
     stories: typeof storyOptions;
   } | null>(null);
 
+  const [localStoryEntriesOverride, setLocalStoryEntriesOverride] = useState<{
+    generatedAt: string | undefined;
+    stories: ConsoleStoryEntry[];
+  } | null>(null);
+
   const triageStoryOptions =
     localStoryOptionsOverride !== null &&
     localStoryOptionsOverride.generatedAt === activeSnapshot?.generatedAt
@@ -347,7 +353,12 @@ export const ConsolePage = () => {
   }, []);
 
   const storiesSnapshot = snapshots.stories;
-  const storyEntries = storiesSnapshot?.stories ?? [];
+  const rawStoryEntries = storiesSnapshot?.stories ?? [];
+  const storyEntries =
+    localStoryEntriesOverride !== null &&
+    localStoryEntriesOverride.generatedAt === storiesSnapshot?.generatedAt
+      ? localStoryEntriesOverride.stories
+      : rawStoryEntries;
   const defaultNameWithOwner = storiesSnapshot?.defaultNameWithOwner ?? null;
 
   const handleCreateIssue = useCallback(
@@ -374,24 +385,49 @@ export const ConsolePage = () => {
         throw new Error('No project specified in the URL path.');
       }
       await postConsoleReorderStory({ pjcode, storyOptionId, direction });
-      const index = triageStoryOptions.findIndex((o) => o.id === storyOptionId);
-      if (index === -1) {
-        return;
+      const triageIndex = triageStoryOptions.findIndex(
+        (o) => o.id === storyOptionId,
+      );
+      if (triageIndex !== -1) {
+        const triageSwapIndex = triageIndex + (direction === 'up' ? -1 : 1);
+        if (
+          triageSwapIndex >= 0 &&
+          triageSwapIndex < triageStoryOptions.length
+        ) {
+          const nextTriage = [...triageStoryOptions];
+          const triageTemp = nextTriage[triageIndex];
+          nextTriage[triageIndex] = nextTriage[triageSwapIndex];
+          nextTriage[triageSwapIndex] = triageTemp;
+          setLocalStoryOptionsOverride({
+            generatedAt: activeSnapshot?.generatedAt,
+            stories: nextTriage,
+          });
+        }
       }
-      const swapIndex = index + (direction === 'up' ? -1 : 1);
-      if (swapIndex < 0 || swapIndex >= triageStoryOptions.length) {
-        return;
+      const entryIndex = storyEntries.findIndex(
+        (e) => e.storyOptionId === storyOptionId,
+      );
+      if (entryIndex !== -1) {
+        const entrySwapIndex = entryIndex + (direction === 'up' ? -1 : 1);
+        if (entrySwapIndex >= 0 && entrySwapIndex < storyEntries.length) {
+          const nextEntries = [...storyEntries];
+          const entryTemp = nextEntries[entryIndex];
+          nextEntries[entryIndex] = nextEntries[entrySwapIndex];
+          nextEntries[entrySwapIndex] = entryTemp;
+          setLocalStoryEntriesOverride({
+            generatedAt: storiesSnapshot?.generatedAt,
+            stories: nextEntries,
+          });
+        }
       }
-      const next = [...triageStoryOptions];
-      const temp = next[index];
-      next[index] = next[swapIndex];
-      next[swapIndex] = temp;
-      setLocalStoryOptionsOverride({
-        generatedAt: activeSnapshot?.generatedAt,
-        stories: next,
-      });
     },
-    [pjcode, triageStoryOptions, activeSnapshot?.generatedAt],
+    [
+      pjcode,
+      triageStoryOptions,
+      storyEntries,
+      activeSnapshot?.generatedAt,
+      storiesSnapshot?.generatedAt,
+    ],
   );
 
   const handleStoryAdd = useCallback(
@@ -523,6 +559,7 @@ export const ConsolePage = () => {
           onAddStory={handleStoryAdd}
           onSelectColor={handleSelectColor}
           onToggleGray={handleToggleGray}
+          onReorderStory={handleReorderStory}
           optimisticColors={storyOptimisticColors}
           colorChangeInFlight={storyColorChangeInFlight}
           colorErrors={storyColorErrors}