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/Screens/Dashboard/Browser/TabPreview.tsx

@@ -87,7 +87,13 @@ export const TabPreview = () => {
     <div className="flex h-full flex-col overflow-hidden">
       {/* URL bar */}
       <div className="flex items-center gap-2 border-b px-3 py-2">
-        <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0" onClick={() => void refetch()} disabled={isFetching}>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 w-7 p-0 shrink-0"
+          onClick={() => void refetch()}
+          disabled={isFetching}
+        >
           {isFetching ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
         </Button>
         <form
@@ -104,7 +110,13 @@ export const TabPreview = () => {
             placeholder="Navigate to URL..."
             className="flex-1 rounded-md border bg-transparent px-2 py-1 text-sm outline-none focus:border-cyan-500"
           />
-          <Button variant="ghost" size="sm" className="h-7 w-7 p-0 shrink-0" type="submit" disabled={isNavigating || !navUrl.trim()}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0 shrink-0"
+            type="submit"
+            disabled={isNavigating || !navUrl.trim()}
+          >
             <Send className="h-3.5 w-3.5" />
           </Button>
         </form>
@@ -143,7 +155,13 @@ export const TabPreview = () => {
             placeholder="Evaluate JavaScript..."
             className="flex-1 bg-transparent text-sm outline-none font-mono"
           />
-          <Button variant="ghost" size="sm" className="h-6 px-2 shrink-0" type="submit" disabled={isEvaluating || !evalExpr.trim()}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 px-2 shrink-0"
+            type="submit"
+            disabled={isEvaluating || !evalExpr.trim()}
+          >
             {isEvaluating ? <Loader2 className="h-3 w-3 animate-spin" /> : 'Run'}
           </Button>
         </form>