fix: montage edit-mode reset and remaining all-mode nits (refs #337)

Montage: isEditMode was not scoped to isAllMode. Switching into All
mode with it left on from single mode stranded the grid in edit mode
with no way to turn it off (the toggle disables in All mode), so
drag/resize handlers stayed live but no-op. Reset during render
(React's "adjusting state when a prop changes" pattern, same idiom as
LiveActivitySettingsDialog's useClampedNumberField) rather than in an
Effect, which would paint one extra frame with the stale edit-mode UI.

Montage: the kebab menu's hidden-monitors list regressed from the full
monitor list to the group-filtered one. A monitor hidden while outside
the active group filter became permanently un-hideable. Restored a
separate, never-group-filtered `enabledMonitors` for the kebab.

MonitorWidget: SingleMonitor built LiveMonitorPlayer without its
profileId prop, so the go2rtc failure cache / MJPEG token resolution
fell back to the globally-selected profile instead of the tile's
owning one in All mode. One line per LiveMonitorPlayer call site (both
branches - the test caught the first fix only covering one).

EventsWidget: isAllMode was inferred from profiles.length > 1, which
silently flips to single-mode behavior (no chips, no /all deep links)
once a delete brings the All-mode scope down to one profile while mode
is still 'all'. Uses scope?.mode === 'all' instead.

Author: pliablepixels

app/src/components/dashboard/widgets/EventsWidget.tsx

@@ -64,10 +64,11 @@ export const EventsWidget = memo(function EventsWidget({
     const bandwidth = useBandwidthSettings();
     const scope = useProfileScope();
     const profiles = scope?.profiles ?? [];
-    // profiles.length > 1 only happens in All mode (useProfileScope's single
-    // mode always returns exactly one profile) - a chip-worthy signal with
-    // no separate isAllMode branch needed.
-    const isAllMode = profiles.length > 1;
+    // scope.mode, not profiles.length > 1: a single remaining profile after
+    // deleting down to one WHILE still in All mode must keep chips/deep-links
+    // (profiles.length > 1 collapses to the single-mode branch there, refs
+    // #337).
+    const isAllMode = scope?.mode === 'all';
     const monitorIdFilter = monitorIds?.length ? monitorIds.join(',') : undefined;
     const refetchMs = refreshInterval ?? bandwidth.eventsWidgetInterval;
 

app/src/components/dashboard/widgets/MonitorWidget.tsx

@@ -91,6 +91,7 @@ function SingleMonitor({ monitorId, objectFit, profileId }: { monitorId: string;
                     <LiveMonitorPlayer
                         monitor={monitor.Monitor}
                         profile={currentProfile}
+                        profileId={profileId}
                         className="w-full h-full"
                         objectFit={objectFit}
                         onProtocolChange={setProtocol}
@@ -100,6 +101,7 @@ function SingleMonitor({ monitorId, objectFit, profileId }: { monitorId: string;
                 <LiveMonitorPlayer
                     monitor={monitor.Monitor}
                     profile={currentProfile}
+                    profileId={profileId}
                     className="w-full h-full"
                     objectFit={objectFit}
                     onProtocolChange={setProtocol}

app/src/components/dashboard/widgets/__tests__/EventsWidget.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { EventsWidget } from '../EventsWidget';
 import { useProfileScope } from '../../../../hooks/useProfileScope';
@@ -55,11 +55,11 @@ function clientFor(id: string) {
   return { profile: id } as unknown as import('../../../../api/client').ApiClient;
 }
 
-function mockScope(profiles: Array<typeof profileA>) {
-  const mode = profiles.length > 1 ? 'all' : 'single';
+function mockScope(profiles: Array<typeof profileA>, mode?: 'single' | 'all') {
+  const resolvedMode = mode ?? (profiles.length > 1 ? 'all' : 'single');
   vi.mocked(useProfileScope).mockReturnValue({
-    mode,
-    profile: mode === 'single' ? profiles[0] : null,
+    mode: resolvedMode,
+    profile: resolvedMode === 'single' ? profiles[0] : null,
     profiles,
     settings: {},
   } as never);
@@ -87,6 +87,35 @@ describe('EventsWidget', () => {
     }));
   });
 
+  // profiles.length > 1 as the All-mode signal breaks the moment a delete
+  // brings the scope down to one profile while still IN All mode (mode
+  // stays 'all', but the count-based heuristic silently flips to single-mode
+  // behavior): chips disappear and links stop deep-linking through /all
+  // (refs #337, final fix wave).
+  it('a single remaining profile in All mode still chips and deep-links via /all (refs #337)', async () => {
+    mockScope([profileA], 'all');
+    vi.mocked(getEvents).mockResolvedValue({
+      events: [event('1', 'Front Door A', '2026-08-03 10:00:00')],
+    } as never);
+
+    render(
+      <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+        <MemoryRouter initialEntries={['/dashboard']}>
+          <Routes>
+            <Route path="/dashboard" element={<EventsWidget />} />
+            <Route path="/all/events/:profileId/:eventId" element={<div data-testid="landed-all-route" />} />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => expect(screen.getByText('Front Door A')).toBeInTheDocument());
+    expect(screen.getByTestId('widget-profile-chip')).toHaveTextContent('Home');
+
+    fireEvent.click(screen.getByText('Front Door A'));
+    expect(screen.getByTestId('landed-all-route')).toBeInTheDocument();
+  });
+
   it('All mode: aggregates both profiles\' events with a profile chip per row (refs #337)', async () => {
     mockScope([profileA, profileB]);
     vi.mocked(getEvents).mockImplementation(async (client) => {

app/src/components/dashboard/widgets/__tests__/MonitorWidget.test.tsx

@@ -22,7 +22,9 @@ vi.mock('../../../../api/monitors', () => ({
   getMonitors: vi.fn(),
 }));
 vi.mock('../../../monitors/LiveMonitorPlayer', () => ({
-  LiveMonitorPlayer: () => <div data-testid="live-player" />,
+  LiveMonitorPlayer: ({ profileId }: { profileId?: string }) => (
+    <div data-testid="live-player" data-profile-id={profileId ?? ''} />
+  ),
 }));
 vi.mock('../../../monitors/MonitorHoverPreview', () => ({
   MonitorHoverPreview: ({ children }: { children: React.ReactNode }) => <>{children}</>,
@@ -92,5 +94,9 @@ describe('MonitorWidget', () => {
     expect((client as unknown as { profile: string }).profile).toBe(profileB.id);
 
     await waitFor(() => expect(screen.getByTestId('widget-profile-chip')).toHaveTextContent('Work'));
+    // LiveMonitorPlayer's own profileId prop (distinct from `profile`) scopes
+    // its go2rtc failure cache / MJPEG token resolution to the OWNING
+    // profile, not whichever profile is globally selected (refs #337).
+    expect(screen.getByTestId('live-player')).toHaveAttribute('data-profile-id', profileB.id);
   });
 });

app/src/pages/Montage.tsx

@@ -124,6 +124,16 @@ export default function Montage() {
     return counts;
   }, [scopedMonitors]);
 
+  // The full monitor list, NEVER group-filtered: the kebab menu's hidden-
+  // monitors list must be able to un-hide any monitor regardless of which
+  // group filter is currently active, or a monitor hidden while outside the
+  // active group becomes permanently un-hideable (refs #337 single-mode
+  // regression - `monitors` below is group-filtered).
+  const enabledMonitors = useMemo(
+    (): MonitorData[] => scopedMonitors.map((s) => ({ Monitor: s.item.Monitor, Monitor_Status: s.item.Monitor_Status })),
+    [scopedMonitors]
+  );
+
   const monitors = useMemo((): MontageTileItem[] => {
     if (isAllMode) {
       // Group filter is current-profile-scoped (Monitors.tsx precedent) - All
@@ -187,6 +197,21 @@ export default function Montage() {
   // Edit mode state lifted to page level
   const [isEditMode, setIsEditMode] = useState(false);
 
+  // Editing is single-mode-only (the toggle is disabled in All mode below),
+  // but isEditMode itself is not scoped to isAllMode - switching into All
+  // mode with it left on from single mode stranded the grid in edit mode
+  // with no way to turn it off (the toggle stays disabled), so drag/resize
+  // handlers were live but no-op (refs #337). Reset during render rather
+  // than in an Effect (React's documented "adjusting state when a prop
+  // changes" pattern - see LiveActivitySettingsDialog's useClampedNumberField
+  // for the same idiom): an Effect would paint one extra frame with the
+  // stale edit-mode UI before correcting it.
+  const [lastIsAllMode, setLastIsAllMode] = useState(isAllMode);
+  if (isAllMode !== lastIsAllMode) {
+    setLastIsAllMode(isAllMode);
+    if (isAllMode) setIsEditMode(false);
+  }
+
   // Active saved layout name (persisted in settings)
   const activeLayoutName = bucket.activeLayoutName;
 
@@ -583,7 +608,7 @@ export default function Montage() {
               </Button>
               <RefreshButton size="sm" className="h-8 sm:h-9" data-testid="montage-refresh-button" />
               <MontageKebabMenu
-                monitors={monitors.map((m) => m.Monitor)}
+                monitors={enabledMonitors.map((m) => m.Monitor)}
                 hiddenMonitorIds={bucket.hiddenMonitorIds}
                 onToggleVisibility={handleToggleMonitorVisibility}
               />

app/src/pages/__tests__/Montage.test.tsx

@@ -8,13 +8,14 @@
  * strips. Single-mode assertions guard the byte-identical requirement.
  */
 import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import Montage from '../Montage';
 
 const useScopedMonitorsMock = vi.fn();
 const useCurrentProfileMock = vi.fn();
 const useProfileScopeMock = vi.fn();
 const useMontageGridMock = vi.fn();
+const useGroupFilterMock = vi.fn();
 
 vi.mock('../../hooks/useScopedMonitors', () => ({
   useScopedMonitors: () => useScopedMonitorsMock(),
@@ -29,7 +30,7 @@ vi.mock('../../hooks/useProfileScope', () => ({
 }));
 
 vi.mock('../../hooks/useGroupFilter', () => ({
-  useGroupFilter: () => ({ isFilterActive: false, filteredMonitorIds: [], isFilterReady: true }),
+  useGroupFilter: () => useGroupFilterMock(),
 }));
 
 vi.mock('../../hooks/useMontageGroupState', () => ({
@@ -70,7 +71,9 @@ vi.mock('../../components/montage', async (importOriginal) => {
     ...actual,
     GridLayoutControls: () => <div data-testid="grid-layout-controls-stub" />,
     FullscreenControls: () => <div data-testid="fullscreen-controls-stub" />,
-    MontageKebabMenu: () => <div data-testid="montage-kebab-stub" />,
+    MontageKebabMenu: ({ monitors }: { monitors: Array<{ Id: string; Name: string }> }) => (
+      <div data-testid="montage-kebab-stub">{monitors.map((m) => m.Name).join(',')}</div>
+    ),
     MontageTileErrorBoundary: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
     MontageScrollPad: () => null,
     useMontageGrid: () => useMontageGridMock(),
@@ -166,6 +169,8 @@ describe('Montage Page', () => {
     useCurrentProfileMock.mockReset();
     useProfileScopeMock.mockReset();
     useMontageGridMock.mockReset();
+    useGroupFilterMock.mockReset();
+    useGroupFilterMock.mockReturnValue({ isFilterActive: false, filteredMonitorIds: [], isFilterReady: true });
     useMontageGridMock.mockReturnValue({
       layout: [],
       gridCols: 2,
@@ -239,6 +244,63 @@ describe('Montage Page', () => {
     expect(toggle).toHaveAttribute('title', 'montage.edit_disabled_all_mode');
   });
 
+  // Stale edit mode from single mode left the All-mode grid in a
+  // draggable-but-inert state (the toggle disables so it can never be turned
+  // off): entering All mode must reset it (refs #337, final fix wave).
+  it('resets edit mode when switching into All mode', () => {
+    singleProfile();
+    useScopedMonitorsMock.mockReturnValue({
+      monitors: [{ profileId: 'profile-1', profileName: 'Home', item: monitor('1', 'Front Door') }],
+      errors: [],
+      isLoading: false,
+      refetchProfile: vi.fn(),
+    });
+
+    const { rerender } = render(<Montage />);
+    fireEvent.click(screen.getByTestId('montage-edit-toggle'));
+    expect(screen.getByTestId('montage-edit-toggle')).toHaveTextContent('montage.done_editing');
+
+    allMode([{ id: 'profile-1', name: 'Home' }, { id: 'profile-2', name: 'Office' }]);
+    useScopedMonitorsMock.mockReturnValue({
+      monitors: [{ profileId: 'profile-1', profileName: 'Home', item: monitor('1', 'Front Door') }],
+      errors: [],
+      isLoading: false,
+      refetchProfile: vi.fn(),
+    });
+    rerender(<Montage />);
+
+    const toggle = screen.getByTestId('montage-edit-toggle');
+    expect(toggle).toHaveTextContent('montage.edit_layout');
+    expect(toggle).toBeDisabled();
+  });
+
+  // A hidden monitor must stay un-hideable regardless of the active group
+  // filter: the kebab's own list is a DIFFERENT list than the grid's (the
+  // grid is group-filtered, the kebab must not be), else a monitor hidden
+  // while outside the active group becomes permanently stuck (refs #337,
+  // single-mode regression in the final fix wave).
+  it('kebab lists every monitor even when the grid is narrowed by an active group filter', () => {
+    singleProfile();
+    useScopedMonitorsMock.mockReturnValue({
+      monitors: [
+        { profileId: 'profile-1', profileName: 'Home', item: monitor('1', 'Front Door') },
+        { profileId: 'profile-1', profileName: 'Home', item: monitor('2', 'Back Door') },
+      ],
+      errors: [],
+      isLoading: false,
+      refetchProfile: vi.fn(),
+    });
+    useGroupFilterMock.mockReturnValue({ isFilterActive: true, filteredMonitorIds: ['1'], isFilterReady: true });
+
+    render(<Montage />);
+
+    // Grid: narrowed to the active group (monitor 2 excluded).
+    expect(screen.getByTestId('montage-monitor-1')).toBeInTheDocument();
+    expect(screen.queryByTestId('montage-monitor-2')).not.toBeInTheDocument();
+    // Kebab: still lists both, so the excluded one stays toggleable.
+    expect(screen.getByTestId('montage-kebab-stub')).toHaveTextContent('Front Door,Back Door');
+  });
+
   it('All mode renders both profiles\' tiles with a profile chip each, composite-keyed', () => {
     allMode([{ id: 'profile-1', name: 'Home' }, { id: 'profile-2', name: 'Office' }]);
     useScopedMonitorsMock.mockReturnValue({