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/servers/plugins/generate.ts

@@ -65,32 +65,25 @@ export function generatePluginsModule(states: PluginState[]): string {
   withWeb.forEach((state, i) => {
     const { plugin } = state;
     const alias = `Plugin${i}`;
-    imports.push(`import ${alias}Router from '${specifier(plugin.web!.router)}';`);
-
-    let panels = '[]';
-    if (plugin.web!.panels) {
-      imports.push(`import { appRegistryMetas as ${alias}Panels } from '${specifier(plugin.web!.panels)}';`);
-      panels = `${alias}Panels`;
-    }
-
+    imports.push(`import { appRegistryMetas as ${alias}Panels } from '${specifier(plugin.web!.panels)}';`);
+    imports.push(`import { defaultLayout as ${alias}Layout } from '${specifier(plugin.web!.layout)}';`);
     entries.push(
-      `  { appName: '${plugin.appName}', route: '${mountPrefix(plugin)}', Router: ${alias}Router, panels: ${panels} },`,
+      `  { appName: '${plugin.appName}', route: '${mountPrefix(plugin)}', panels: ${alias}Panels, layout: ${alias}Layout },`,
     );
   });
 
   const body = `${HEADER}
-import type { ComponentType } from 'react';
-import type { AppRegistryMeta } from 'officerdev';
+import type { AppRegistryMeta, LayoutNode } from 'officerdev';
 ${imports.join('\n')}
 
 export type GeneratedPlugin = {
   appName: string;
   /** Where it mounts, from \`mountPrefix\` — \`/offscale\` for ours, \`/p/<publisher>/<name>\` for others. */
   route: string;
-  /** Mounted at \`\${route}/*\`, so the plugin's own router owns everything beneath it. */
-  Router: ComponentType;
-  /** Panel apps it contributes to the registry. */
+  /** The panels it contributes. At least one, or discovery refuses the plugin. */
   panels: AppRegistryMeta[];
+  /** How they are arranged. The shell renders \`WorkspaceView\` around them. */
+  layout: LayoutNode;
 };
 
 export const plugins: GeneratedPlugin[] = [
@@ -160,6 +153,17 @@ export async function rebuildFrontend(): Promise<BuildResult> {
       return { ok: false, ms: Date.now() - started, outputs: 0, error: `build produced no ${SHELL_FILE}` };
     }
 
+    // Make the shell's asset URLs ABSOLUTE.
+    //
+    // Bun emits `./chunk-….js` for an HTML entrypoint and `publicPath` does not change it. A relative URL
+    // resolves against the CURRENT path, so it is correct at `/` and wrong at `/example/deeper`, where the
+    // browser asks for `/example/chunk-….js`. Every deep link more than one segment deep would fail to
+    // boot. Rewritten here rather than worked around in the server, because the wrong URL is in the file.
+    const shellPath = join(STAGING_DIR, SHELL_FILE);
+    const shell = readFileSync(shellPath, 'utf-8');
+    const absolute = shell.replace(/(src|href)="\.\//g, '$1="/');
+    if (absolute !== shell) writeFileSync(shellPath, absolute);
+
     if (existsSync(BUILD_DIR)) rmSync(BUILD_DIR, { recursive: true, force: true });
     renameSync(STAGING_DIR, BUILD_DIR);