a /plugins screen to install, enable, disable and uninstall

the management surface for what the last commit made possible. two panels either
side of a selection that lives in ?selected= and is read by both independently,
so neither can be telling the other something stale — rows are real Links, not
buttons holding the name in a closure.

the detail panel shows what the tree declared (api, schema, sidecar, web),
because "installed and nothing happened" is otherwise a mystery, and it names
what uninstall does NOT do: neither disable nor uninstall deletes anything the
plugin stored, and the screen says so rather than leaving someone to guess
whether a button destroys their data.

a directory whose manifest will not parse is listed with its error rather than
skipped. a malformed plugin that simply does not appear is indistinguishable
from one nobody wrote.

`outdated` is surfaced as an Update button: the version on disk moving after an
install is the normal state on a developer's machine, and it should be visible
rather than inferred.

the four mutations are written out rather than generated in a loop — useMutation
is a hook, and a hook called from inside a helper is a rules-of-hooks violation
even when the call order happens to be stable. caught before it shipped.

verified against a running server: the spa builds (19.8 MB bundle containing the
new screen), / serves 200, /api/plugins answers authenticated and 401s without a
token. full suite 719 pass, same 10 pre-existing failures. live server and
plugin_installs left untouched.

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

src/apps/officer-web/App.tsx

@@ -64,6 +64,7 @@ export function App() {
             <Route path="/photos" element={<Dashboard.PhotosScreen />} />
             <Route path="/photos/:section" element={<Dashboard.PhotosScreen />} />
             <Route path="/app-store" element={<Dashboard.AppStoreScreen />} />
+            <Route path="/plugins" element={<Dashboard.PluginsScreen />} />
             <Route path="/jellyfin" element={<Dashboard.JellyfinScreen />} />
             <Route path="/jellyfin/:section" element={<Dashboard.JellyfinScreen />} />
             <Route path="/transmission" element={<Dashboard.TransmissionScreen />} />

src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

@@ -149,6 +149,7 @@ import {
   Clapperboard,
   GitBranch,
   Store,
+  Puzzle,
 } from 'lucide-react';
 
 /**
@@ -181,6 +182,8 @@ export const CORE_DOCK_ITEMS: DockItem[] = [
   // Core by necessity: the store is how every other feature arrives, so it can never be one of the
   // things that disappears when uninstalled.
   { label: 'App store', to: '/app-store', icon: Store, color: '#64748b' },
+  // Core, not contributed by a plugin: this is the screen that installs them, so it cannot arrive with one.
+  { label: 'Plugins', to: '/plugins', icon: Puzzle, color: '#94a3b8' },
 ];
 
 /**

src/apps/officer-web/Screens/Dashboard/Plugins/PluginsScreen.tsx

@@ -0,0 +1,25 @@
+import type { LayoutNode } from 'officerdev';
+import { WorkspaceView } from 'officerdev';
+import { useDashboardState } from 'state/useDashboardState';
+import { defaultLayout } from './defaultLayout';
+
+// /plugins — what is in the tree, what is installed, and the four verbs that change it.
+//
+// Owner-only, and gated server-side: every route under /api/plugins refuses a non-owner before reaching a
+// handler. This screen is the courtesy half of that.
+//
+// Not the app store. That installs sidecars from a catalogue, provisioning containers and asking
+// questions; this installs plugins from `platform/plugins/`, and asks nothing.
+export const PluginsScreen = () => {
+  const workspace = useDashboardState<LayoutNode>('screens/plugins', defaultLayout);
+
+  return (
+    <div className="h-full w-full pt-2">
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{ allowed: ['plugins-list', 'plugin-detail'], fallback: 'plugin-detail' }}
+      />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Plugins/defaultLayout.ts

@@ -0,0 +1,14 @@
+import type { LayoutNode } from 'officerdev';
+
+// List left, detail right — a master list with a live preview, which is why the selection is `?selected=`
+// rather than a `/plugins/:appName` route: linking rows to the detail route would make it the whole page
+// and destroy the side-by-side. See docs/navigation-audit.md.
+export const defaultLayout: LayoutNode = {
+  type: 'group',
+  id: 'plugins-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'plugins-list', appType: 'plugins-list' }, size: 32 },
+    { node: { type: 'panel', id: 'plugin-detail', appType: 'plugin-detail' }, size: 68 },
+  ],
+};

src/apps/officer-web/Screens/Dashboard/Plugins/index.tsx

@@ -0,0 +1 @@
+export * from './PluginsScreen';

src/apps/officer-web/Screens/Dashboard/index.tsx

@@ -1,4 +1,5 @@
 export * from './AppStore';
+export * from './Plugins';
 export * from './Layout';
 export * from './Home';
 export * from './PasskeyGate';

src/apps/officer-web/state/usePageTitle.ts

@@ -23,6 +23,7 @@ const RULES: TitleRule[] = [
   { match: (p) => p.startsWith('/contacts'), title: 'Contacts' },
   { match: (p) => p.startsWith('/music'), title: 'Music' },
   { match: (p) => p.startsWith('/app-store'), title: 'App store' },
+  { match: (p) => p.startsWith('/plugins'), title: 'Plugins' },
   { match: (p) => p.startsWith('/photos'), title: 'Photos' },
   { match: (p) => p.startsWith('/jellyfin'), title: 'Video' },
   { match: (p) => p.startsWith('/soulseek'), title: 'Soulseek' },