every plugin route renders a workspace, and it is not a rule you can forget

an exclusionary rule, made structural. a plugin does not render a screen: it
contributes panels and says how they are arranged, and the shell renders
WorkspaceView around them.

    web/panels.ts   appRegistryMetas — at least one panel
    web/layout.ts   defaultLayout — how they are arranged

both required the moment web/ exists, and missing either is refused at discovery
by name and with the reason. tested:

    probeplug: has a web/ directory but is missing web/layout.ts.
    Every plugin route renders a Workspace: contribute panels and a layout,
    not a screen.

there is deliberately no way to export a component. one that could would be free
to render a bare div, a full-page form, or its own navigation, and the platform
would become a shell hosting strangers' layouts rather than one application.
non-compliance is not so much refused as unrepresentable — there is nowhere to
put a screen.

the shell registers <prefix> and <prefix>/:section, exactly as the core screens
do, so a plugin's sections stay addressable and cmd-clickable, and panels read
useParams independently rather than passing state between themselves.
appTypes.allowed is pinned to that plugin's own keys, so a persisted layout
naming something else falls back instead of rendering another plugin's panel
inside this screen.

the example plugin is rebuilt to model it — two panels, a layout, one of them
calling its own /api/example/ping through useClient — because the reference
implementation is what everyone copies.

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

src/apps/officer-web/App.tsx

@@ -72,9 +72,17 @@ export function App() {
             {/* Installed plugins. Core routes above stay hand-written; everything below is generated from
                 what is installed, because a bundler cannot follow a runtime import specifier. The wildcard
                 hands the whole subtree to the plugin's own router, which react-router nests natively. */}
-            {installedPlugins.map((plugin) => (
-              <Route key={plugin.appName} path={`${plugin.route}/*`} element={<plugin.Router />} />
-            ))}
+            {installedPlugins.flatMap((plugin) => [
+              <Route key={plugin.appName} path={plugin.route} element={<Dashboard.PluginScreen {...plugin} />} />,
+              // The section pair, exactly as the core screens do it (`/headscale/:section`): the plugin's
+              // panels read `useParams` themselves, so which section is open is the URL rather than state
+              // passed between them.
+              <Route
+                key={`${plugin.appName}-section`}
+                path={`${plugin.route}/:section`}
+                element={<Dashboard.PluginScreen {...plugin} />}
+              />,
+            ])}
             <Route path="/jellyfin" element={<Dashboard.JellyfinScreen />} />
             <Route path="/jellyfin/:section" element={<Dashboard.JellyfinScreen />} />
             <Route path="/transmission" element={<Dashboard.TransmissionScreen />} />