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/Settings/SettingsPanel.tsx

@@ -37,13 +37,17 @@ const SectionLink = ({ section, to }: { section: SettingsSection; to: string })
     to={to}
     className={({ isActive }) =>
       `flex items-start gap-2.5 py-2 px-3 rounded-lg text-left cursor-pointer transition-colors ${
-        isActive ? 'bg-duck-teal/10 text-duck-dark dark:text-foreground' : 'text-duck-dark/70 dark:text-foreground/70 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 hover:text-duck-dark dark:hover:text-foreground'
+        isActive
+          ? 'bg-duck-teal/10 text-duck-dark dark:text-foreground'
+          : 'text-duck-dark/70 dark:text-foreground/70 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 hover:text-duck-dark dark:hover:text-foreground'
       }`
     }
   >
     {({ isActive }) => (
       <>
-        <section.icon className={`h-3.5 w-3.5 shrink-0 mt-0.5 ${isActive ? 'text-duck-teal' : 'text-duck-dark/40 dark:text-foreground/40'}`} />
+        <section.icon
+          className={`h-3.5 w-3.5 shrink-0 mt-0.5 ${isActive ? 'text-duck-teal' : 'text-duck-dark/40 dark:text-foreground/40'}`}
+        />
         <div className="min-w-0 flex-1">
           <div className="text-sm font-medium truncate">{section.title}</div>
           <div className="text-xs text-duck-dark/40 dark:text-foreground/40 truncate">{section.description}</div>
@@ -53,7 +57,14 @@ const SectionLink = ({ section, to }: { section: SettingsSection; to: string })
   </NavLink>
 );
 
-export const SettingsSidebar = ({ basePath, icon: Icon, label, sections, groups, hideHeader }: SettingsSidebarProps) => {
+export const SettingsSidebar = ({
+  basePath,
+  icon: Icon,
+  label,
+  sections,
+  groups,
+  hideHeader,
+}: SettingsSidebarProps) => {
   const [search, setSearch] = useState('');
 
   const query = search.toLowerCase();
@@ -71,7 +82,12 @@ export const SettingsSidebar = ({ basePath, icon: Icon, label, sections, groups,
         </div>
       )}
       <div className="px-3 pb-2">
-        <Input placeholder="Search..." value={search} onChange={(ev) => setSearch(ev.target.value)} className="h-8 text-xs" />
+        <Input
+          placeholder="Search..."
+          value={search}
+          onChange={(ev) => setSearch(ev.target.value)}
+          className="h-8 text-xs"
+        />
       </div>
       <div className="flex flex-col gap-0.5 px-3 overflow-y-auto flex-1">
         {groups
@@ -92,9 +108,9 @@ export const SettingsSidebar = ({ basePath, icon: Icon, label, sections, groups,
                 </div>
               );
             })
-          : sections.filter(matchesSearch).map((s) => (
-              <SectionLink key={s.key} section={s} to={`${basePath}/${s.key}`} />
-            ))}
+          : sections
+              .filter(matchesSearch)
+              .map((s) => <SectionLink key={s.key} section={s} to={`${basePath}/${s.key}`} />)}
       </div>
     </div>
   );
@@ -155,10 +171,22 @@ type CreateSettingsPanelParams = {
   groups?: SettingsSectionGroup[];
 };
 
-export const createSettingsPanelComponents = ({ basePath, sidebarIcon, sidebarLabel, sections = [], groups }: CreateSettingsPanelParams) => {
+export const createSettingsPanelComponents = ({
+  basePath,
+  sidebarIcon,
+  sidebarLabel,
+  sections = [],
+  groups,
+}: CreateSettingsPanelParams) => {
   const allSections = groups ? groups.flatMap((g) => g.sections) : sections;
   const Sidebar: ComponentType = () => (
-    <SettingsSidebar basePath={basePath} icon={sidebarIcon} label={sidebarLabel} sections={allSections} groups={groups} />
+    <SettingsSidebar
+      basePath={basePath}
+      icon={sidebarIcon}
+      label={sidebarLabel}
+      sections={allSections}
+      groups={groups}
+    />
   );
   const Content: ComponentType = () => <SettingsContent sections={allSections} />;
   return { Sidebar, Content, allSections };