make the appType allow-list a prop instead of fourteen copies

Every locked screen shipped the same recursive normaliser: an ALLOWED_APP_TYPES set, a
normalizeLayout, a useMemo to apply it before the wrong panel could render, and a useEffect to
persist the fix. Fourteen copies, character-for-character identical except the two names — so a
fifteenth screen was a copy-paste, and a bug in the shape was a bug in fourteen places.

It is now `<WorkspaceView appTypes={{ allowed, fallback }} />`. WorkspaceView normalises before it
renders and persists the diff itself, which is the same two effects the screens were writing by hand.

One deliberate behaviour change: the framework normaliser drops `config` when it replaces an app.
The fourteen copies did `{ ...node, appType: fallback }`, keeping the old app's config on the panel
the new app now owns. That is the opposite of what `setApp` does, and a config belongs to whoever
wrote it.

Headscale keeps a local useMemo. Its check is not "is this appType allowed" but "is the server
picker present at all" — a layout saved before that panel existed is discarded for the default
wholesale. That is about a panel being missing, which the allow-list cannot see.

QrTransfer gains a persist-back it never had: it normalised on read and threw the result away every
time.

Tests: normalizeLayout is pinned on reference-identity for a no-op, null always allowed, config
dropped on replacement, rebuilding only changed branches, and idempotence — because a normaliser
that does not normalise to itself makes the persist-back an infinite write loop.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Calendar/CalendarScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
 import { useDashboardState } from 'state/useDashboardState';
@@ -13,38 +12,16 @@ import { defaultLayout } from './defaultLayout';
 // resolves to the first collection inside the panels rather than by redirecting, because until the
 // collection list has loaded there is no canonical URL to redirect to.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['calendar-nav', 'calendar-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'calendar-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const CalendarScreen = () => {
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/calendar', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/calendar', defaultLayout);
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['calendar-nav', 'calendar-view'], fallback: 'calendar-view' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import type { LayoutNode, SelectedSession } from 'officerdev';
 import { WorkspaceView, chatListPath, cwdFromSplat } from 'officerdev';
@@ -11,28 +11,9 @@ import type { ClaudeSessionDetail } from 'state/useClaudeSessions';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import { defaultLayout } from './defaultLayout';
 
-// Allowed panel app types for the /chat screen
-const ALLOWED_APP_TYPES = new Set<string | null>(['chat-session-list', 'chat-detail', null]);
-
 // How many messages to render on first open (anchored to the bottom); scroll-up pages older ones in.
 const CHAT_TAIL = 20;
 
-/** Recursively fix any panel that uses a wrong app type (e.g. officerdev/chat) */
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    if (!ALLOWED_APP_TYPES.has(node.appType)) {
-      return { ...node, appType: 'chat-detail' };
-    }
-    return node;
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 type SessionListPageProps = {
   isNew?: boolean;
 };
@@ -45,25 +26,13 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
   const client = useClient();
   const selectedRef = useRef(selected);
   selectedRef.current = selected;
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/chat', defaultLayout);
+  // A layout persisted before the chat panels were renamed still names `officerdev/chat`, which no
+  // longer resolves; `appTypes` lands anything unknown on the detail panel.
+  const workspace = useDashboardState<LayoutNode>('screens/chat', defaultLayout);
   const isMobile = useIsMobile();
   const navigate = useNavigate();
   const mobilePanelId = isMobile && (sessionId || isNew) ? 'chat-detail' : undefined;
 
-  // Normalize synchronously so the wrong panel never renders
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  // Persist the fix to the backend
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
-
   // Retire a legacy `?cwd=`. Nothing reads it any more and nothing writes it, but a refresh re-requests
   // the address bar verbatim — so one left over from before the path-based groups sits there forever,
   // looking like it means something. On a bare /chat it still says which group you wanted, so upgrade
@@ -133,6 +102,7 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
       <WorkspaceView
         workspace={workspace}
         locked
+        appTypes={{ allowed: ['chat-session-list', 'chat-detail'], fallback: 'chat-detail' }}
         mobilePanelId={mobilePanelId}
         onMobilePanelChange={(id) => {
           // Back goes to the group's list, not the default one. On /chat/g/* that group is in the URL;

src/apps/officer-web/Screens/Dashboard/Contacts/ContactsScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
 import { useDashboardState } from 'state/useDashboardState';
@@ -7,38 +6,16 @@ import { defaultLayout } from './defaultLayout';
 // /contacts — the CardDAV half of the same sidecar as /calendar; see CalendarScreen for why the selected
 // collection is a query param rather than a route segment.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['contacts-nav', 'contacts-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'contacts-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const ContactsScreen = () => {
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/contacts', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/contacts', defaultLayout);
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['contacts-nav', 'contacts-view'], fallback: 'contacts-view' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Gitea/GiteaScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import { Navigate, useParams } from 'react-router';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView, DEFAULT_GITEA_SECTION, giteaSectionPath, isGiteaSection } from 'officerdev';
@@ -13,35 +12,9 @@ import { defaultLayout } from './defaultLayout';
 // between themselves over a channel. This screen backs both /gitea and /gitea/:section and is the single
 // place that decides what an absent or bogus section means.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['gitea-nav', 'gitea-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'gitea-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const GiteaScreen = () => {
   const { section, owner, name } = useParams();
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/gitea', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/gitea', defaultLayout);
 
   // Bare /gitea, or a section that doesn't exist, resolves to a canonical URL rather than rendering a default
   // while the address bar says something else — the nav highlight is derived from the URL.
@@ -55,7 +28,11 @@ export const GiteaScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['gitea-nav', 'gitea-view'], fallback: 'gitea-view' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Headscale/HeadscaleScreen.tsx

@@ -15,20 +15,6 @@ import { defaultLayout } from './defaultLayout';
 // between themselves over a channel. This screen backs both /headscale and /headscale/:section and is the
 // single place that decides what an absent or bogus section means.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['headscale-servers', 'headscale-nav', 'headscale-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'headscale-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 function hasAppType(node: LayoutNode, appType: string): boolean {
   if (node.type === 'panel') return node.appType === appType;
   return node.children.some((c) => hasAppType(c.node, appType));
@@ -38,15 +24,13 @@ export const HeadscaleScreen = () => {
   const { section } = useParams();
   const rawWorkspace = useDashboardState<LayoutNode>('screens/headscale', defaultLayout);
 
+  // A layout saved before the server picker existed has no panel for it, and nothing else would ever add
+  // one — so it is rebuilt from the default. That costs a one-time reset of any manual sizing, which is
+  // cheaper than a screen permanently missing a panel. Pinning the app types is `appTypes` below; this is
+  // the part the framework can't do, because it is about a panel that is *missing* rather than wrong.
   const workspace = useMemo(() => {
-    // A layout saved before the server picker existed has no panel for it, and nothing else would ever add
-    // one — so it is rebuilt from the default. That costs a one-time reset of any manual sizing, which is
-    // cheaper than a screen permanently missing a panel.
-    const fixed = hasAppType(rawWorkspace.value, 'headscale-servers')
-      ? normalizeLayout(rawWorkspace.value)
-      : defaultLayout;
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
+    if (hasAppType(rawWorkspace.value, 'headscale-servers')) return rawWorkspace;
+    return { ...rawWorkspace, value: defaultLayout };
   }, [rawWorkspace]);
 
   useEffect(() => {
@@ -64,7 +48,14 @@ export const HeadscaleScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{
+          allowed: ['headscale-servers', 'headscale-nav', 'headscale-view'],
+          fallback: 'headscale-view',
+        }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Invoices/InvoicesScreen.tsx

@@ -1,5 +1,4 @@
 import type { LayoutNode } from 'officerdev';
-import { useEffect, useMemo } from 'react';
 import { Navigate, useParams } from 'react-router';
 import { DEFAULT_INVOICES_SECTION, invoicesSectionPath, isInvoicesSection, WorkspaceView } from 'officerdev';
 import { useDashboardState } from 'state/useDashboardState';
@@ -14,35 +13,9 @@ import { defaultLayout } from './defaultLayout';
 // params. So the panels read the URL rather than passing state to each other, and this screen is the single
 // place that decides what an absent or bogus section means.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['invoices-nav', 'invoices-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'invoices-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const InvoicesScreen = () => {
   const { section } = useParams();
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/invoices', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/invoices', defaultLayout);
 
   // Bare /invoices, or a section that doesn't exist, resolves to a canonical URL rather than rendering a
   // default while the address bar says something else — the nav highlight is derived from the URL.
@@ -52,7 +25,11 @@ export const InvoicesScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['invoices-nav', 'invoices-view'], fallback: 'invoices-view' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Jellyfin/JellyfinScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import { Navigate, useParams } from 'react-router';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView, DEFAULT_JELLYFIN_SECTION, jellyfinSectionPath, isJellyfinSection } from 'officerdev';
@@ -16,35 +15,9 @@ import { defaultLayout } from './defaultLayout';
 // The open section is :section in the URL; which library, which item and what is playing are in the query
 // string. Nothing about "what is open" lives in a panel channel.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['jellyfin-nav', 'jellyfin-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'jellyfin-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const JellyfinScreen = () => {
   const { section } = useParams();
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/jellyfin', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/jellyfin', defaultLayout);
 
   // Bare /jellyfin, or a section that doesn't exist, canonicalises rather than rendering a default behind a
   // URL that names something else — the nav highlight comes from the router, so a bogus URL highlights nothing.
@@ -54,7 +27,11 @@ export const JellyfinScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['jellyfin-nav', 'jellyfin-view'], fallback: 'jellyfin-view' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Music/MusicScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
 import { useDashboardState } from 'state/useDashboardState';
@@ -7,38 +6,16 @@ import { defaultLayout } from './defaultLayout';
 // /music uses the Workspace/Panel system (like /chat): two vertical panels — the library browser
 // (music-browser) and the content/detail (music-detail) — coordinating via the 'music:cwd' channel.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['music-browser', 'music-detail', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'music-detail' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const MusicScreen = () => {
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/music', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/music', defaultLayout);
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['music-browser', 'music-detail'], fallback: 'music-detail' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Photos/PhotosScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import { Navigate, useParams } from 'react-router';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView, DEFAULT_PHOTOS_SECTION, photosSectionPath, isPhotosSection } from 'officerdev';
@@ -12,35 +11,9 @@ import { defaultLayout } from './defaultLayout';
 // The open section is :section in the URL; deeper selection (which asset, album, person, search) is in the
 // query string. Nothing about "what is open" lives in a panel channel.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['photos-nav', 'photos-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'photos-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const PhotosScreen = () => {
   const { section } = useParams();
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/photos', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/photos', defaultLayout);
 
   // Bare /photos, or a section that doesn't exist, canonicalises rather than rendering a default behind a URL
   // that names something else — the nav highlight comes from the router, so a bogus URL highlights nothing.
@@ -50,7 +23,11 @@ export const PhotosScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['photos-nav', 'photos-view'], fallback: 'photos-view' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/QrTransfer/QrTransferScreen.tsx

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
 import { useDashboardState } from 'state/useDashboardState';
@@ -14,27 +13,14 @@ import { defaultLayout } from './defaultLayout';
 // Both panels are pure client-side: nothing about a transfer reaches the server, which is the point.
 // The receiver needs a secure origin for camera access — over the tailnet with HTTPS that is satisfied.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['qr-send', 'qr-receive', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'qr-send' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  return children.some((c, i) => c !== node.children[i]) ? { ...node, children } : node;
-}
-
 export const QrTransferScreen = () => {
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/qr-transfer', defaultLayout);
+  const workspace = useDashboardState<LayoutNode>('screens/qr-transfer', defaultLayout);
 
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  return <WorkspaceView workspace={workspace} locked />;
+  return (
+    <WorkspaceView
+      workspace={workspace}
+      locked
+      appTypes={{ allowed: ['qr-send', 'qr-receive'], fallback: 'qr-send' }}
+    />
+  );
 };

src/apps/officer-web/Screens/Dashboard/Soulseek/SoulseekScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
 import { useDashboardState } from 'state/useDashboardState';
@@ -8,40 +7,18 @@ import { defaultLayout } from './defaultLayout';
 // the left and a section view (soulseek-view) on the right, coordinating via the 'soulseek:section'
 // channel. Both talk to slskd through the /api/slskd auth proxy.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['soulseek-nav', 'soulseek-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'soulseek-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const SoulseekScreen = () => {
   // v2: nav + view (replaced the earlier search + transfers split) — new key so the old persisted
   // layout doesn't resurrect as two mismatched panels.
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/soulseek-v2', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/soulseek-v2', defaultLayout);
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['soulseek-nav', 'soulseek-view'], fallback: 'soulseek-view' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/SystemMonitor/SystemMonitorScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
 import { useDashboardState } from 'state/useDashboardState';
@@ -7,38 +6,16 @@ import { defaultLayout } from './defaultLayout';
 // /system-monitor uses the Workspace/Panel system (like /music): a horizontal split with an (empty for
 // now) left panel and the system snapshot on the right.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['monitor-side', 'monitor-main', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'monitor-main' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const SystemMonitorScreen = () => {
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/system-monitor', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/system-monitor', defaultLayout);
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['monitor-side', 'monitor-main'], fallback: 'monitor-main' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Transmission/TransmissionScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import { Navigate, useParams } from 'react-router';
 import type { LayoutNode } from 'officerdev';
 import {
@@ -19,35 +18,9 @@ import { defaultLayout } from './defaultLayout';
 // backs both /transmission and /transmission/:section and is the single place that decides what an absent or
 // bogus section means.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['transmission-nav', 'transmission-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'transmission-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const TransmissionScreen = () => {
   const { section } = useParams();
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/transmission', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/transmission', defaultLayout);
 
   // Bare /transmission, or a section that doesn't exist, resolves to a canonical URL rather than rendering a
   // default while the address bar says something else — the nav highlight is derived from the URL.
@@ -57,7 +30,11 @@ export const TransmissionScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['transmission-nav', 'transmission-view'], fallback: 'transmission-view' }}
+      />
     </div>
   );
 };

src/apps/officer-web/Screens/Dashboard/Wallet/WalletScreen.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useMemo } from 'react';
 import { Navigate, useLocation, useParams } from 'react-router';
 import type { LayoutNode } from 'officerdev';
 import { WorkspaceView, DEFAULT_WALLET_SECTION, walletSectionPath, isWalletSection } from 'officerdev';
@@ -15,36 +14,10 @@ import { defaultLayout } from './defaultLayout';
 // themselves over a channel. This screen backs both /wallet and /wallet/:section and is the single place
 // that decides what an absent or bogus section means.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['wallet-nav', 'wallet-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'wallet-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 export const WalletScreen = () => {
   const { section } = useParams();
   const { search } = useLocation();
-  const rawWorkspace = useDashboardState<LayoutNode>('screens/wallet', defaultLayout);
-
-  const workspace = useMemo(() => {
-    const fixed = normalizeLayout(rawWorkspace.value);
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
-  }, [rawWorkspace]);
-
-  useEffect(() => {
-    if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
-      rawWorkspace.setValue(workspace.value);
-    }
-  }, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
+  const workspace = useDashboardState<LayoutNode>('screens/wallet', defaultLayout);
 
   // Bare /wallet, or a section that doesn't exist, resolves to a canonical URL rather than rendering a
   // default while the address bar says something else — the nav highlight is derived from the URL. The
@@ -56,7 +29,11 @@ export const WalletScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['wallet-nav', 'wallet-view'], fallback: 'wallet-view' }}
+      />
     </div>
   );
 };