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/ServerSettings/TTSSection.tsx

@@ -5,7 +5,15 @@ import { RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { useClient } from 'hooks/useClient';
 
 type Provider = 'openai' | 'elevenlabs';
@@ -47,7 +55,11 @@ export const TTSSection = () => {
   const fetchVoices = async (p: Provider, u: string, key: string, m?: string) => {
     setVoicesLoading(true);
     try {
-      const res = await client.post<{ voices?: string[]; groups?: { label: string; voices: string[] }[]; error?: string }>('/server-settings/tts/voices', {
+      const res = await client.post<{
+        voices?: string[];
+        groups?: { label: string; voices: string[] }[];
+        error?: string;
+      }>('/server-settings/tts/voices', {
         provider: p,
         url: u,
         apiKey: key || undefined,
@@ -167,7 +179,9 @@ export const TTSSection = () => {
       )}
 
       <Label className="grid gap-2">
-        <span className="text-duck-dark/70 dark:text-foreground/70">API Key {provider === 'openai' ? '(optional)' : ''}</span>
+        <span className="text-duck-dark/70 dark:text-foreground/70">
+          API Key {provider === 'openai' ? '(optional)' : ''}
+        </span>
         <Input
           type="password"
           className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark dark:text-foreground placeholder:text-duck-dark/40"
@@ -197,7 +211,9 @@ export const TTSSection = () => {
               className="p-0.5 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors disabled:opacity-40"
               title="Refresh voices"
             >
-              <RefreshCw className={`h-3 w-3 text-duck-dark/50 dark:text-foreground/50 ${voicesLoading ? 'animate-spin' : ''}`} />
+              <RefreshCw
+                className={`h-3 w-3 text-duck-dark/50 dark:text-foreground/50 ${voicesLoading ? 'animate-spin' : ''}`}
+              />
             </button>
           </div>
           {voices.length > 0 ? (
@@ -209,16 +225,21 @@ export const TTSSection = () => {
                 {voiceGroups.length > 0
                   ? voiceGroups.map((g) => (
                       <SelectGroup key={g.label}>
-                        <SelectLabel className="text-xs font-semibold text-duck-dark/50 dark:text-foreground/50">{g.label}</SelectLabel>
+                        <SelectLabel className="text-xs font-semibold text-duck-dark/50 dark:text-foreground/50">
+                          {g.label}
+                        </SelectLabel>
                         {g.voices.map((v) => (
-                          <SelectItem key={v} value={v}>{v.replace(/^[a-z]{2}_/, '').replace(/^\w/, (c) => c.toUpperCase())}</SelectItem>
+                          <SelectItem key={v} value={v}>
+                            {v.replace(/^[a-z]{2}_/, '').replace(/^\w/, (c) => c.toUpperCase())}
+                          </SelectItem>
                         ))}
                       </SelectGroup>
                     ))
                   : voices.map((v) => (
-                      <SelectItem key={v} value={v}>{v}</SelectItem>
-                    ))
-                }
+                      <SelectItem key={v} value={v}>
+                        {v}
+                      </SelectItem>
+                    ))}
               </SelectContent>
             </Select>
           ) : (