Administration is a section, not an overlay

the connection form — where fofos is, and the token — was reached through
`?config=1` and a link in the detail header, because it was not one of the nine
sections. it is now the tenth, called Administration, last in the nav.

that removes the overlay and the second route to it. the two could disagree: the
form covered whatever section was selected underneath, so the nav highlighted one
thing while the panel showed another, and an unconfigured plugin rendered the form
with no header at all — which reads as the selected section being broken rather
than as one setup step not done yet. unconfigured now goes to Administration and
the header says so.

`site` and `administration` are deliberately separate and the file says why. Site
settings is the CLIENT's — partners, social links, contact details, all of it
public copy. Administration is Officer's end: how this plugin reaches fofos, and
whatever else it will need to know. nothing in it ever appears on the site, and
the people who touch the two are not the same people.

`path: null`, alone among the sections: it reads nothing from fofos, which is why
it keeps working when fofos is unreachable and the others do not.

the header's settings link is replaced by the section's own hint, so the row still
says what it is once you are in it.

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

manifest.ts

@@ -35,7 +35,7 @@ import type { PluginManifest } from '@@/plugins/manifest';
  */
 export const manifest: PluginManifest = {
   publisher: 'officerdev',
-  version: '2026.08.29.01',
+  version: '2026.08.29.02',
   platform: '>=1.0.0',
 
   label: 'Fofos',

web/DetailPanel.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Link, useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router';
-import { Settings } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
 import { DEFAULT_SECTION, isSectionKey, sectionFor, type SectionKey } from './sections';
 import { ConnectionPanel } from './ConnectionPanel';
@@ -12,15 +11,21 @@ import { useFofosChanged } from './channel';
  * The right column: whichever section the nav has selected.
  *
  * It reads `?section=` from the URL rather than being handed it — the two panels are siblings in a
- * workspace and neither owns the other. `?config=1` renders the connection form over the top of
+ * workspace and neither owns the other.
- * whatever is selected, so settings are addressable too.
+ *
+ * ── There used to be a `?config=1` ──
+ *
+ * The connection form was an overlay reached from a link in this header, because it was not one of the
+ * sections. Now it IS one — Administration — so the overlay is gone and so is the link. A second route
+ * to the same screen is a second thing to keep correct, and the two disagreed the moment a section was
+ * selected underneath a form that covered it.
  *
  * ── The unconfigured check lives HERE, once ──
  *
- * Every section needs a connection, so every section would otherwise have to handle its absence and
+ * Every OTHER section needs a connection, so each would otherwise have to handle its absence and each
- * each would word it slightly differently. Asking `/status` once and rendering the connection form
+ * would word it slightly differently. Asking `/status` once and sending an unconfigured plugin to
- * instead of any section is one answer for all nine, and it makes "not connected yet" read as a setup
+ * Administration is one answer for all of them, and it makes "not connected yet" read as a setup step
- * step rather than as nine broken lists.
+ * rather than as nine broken lists.
  */
 
 type Status = { configured: boolean; lastProbeOk: boolean | null };
@@ -37,13 +42,13 @@ type Status = { configured: boolean; lastProbeOk: boolean | null };
  */
 const PANELS: Partial<Record<SectionKey, () => React.JSX.Element>> = {
   messages: MessagesPanel,
+  administration: ConnectionPanel,
 };
 
 export const DetailPanel = () => {
   const [params] = useSearchParams();
   const raw = params.get('section');
-  const section: SectionKey = isSectionKey(raw) ? raw : DEFAULT_SECTION;
+  const selected: SectionKey = isSectionKey(raw) ? raw : DEFAULT_SECTION;
-  const showingConfig = params.get('config') === '1';
 
   const client = useClient();
   const clientRef = useRef(client);
@@ -72,13 +77,12 @@ export const DetailPanel = () => {
     return <div className="flex size-full items-center justify-center p-6 text-sm text-muted-foreground">Loading…</div>;
   }
 
-  if (showingConfig || !configured) return <ConnectionPanel />;
+  /*
-
+    Unconfigured, so Administration regardless of what the nav says. The header then NAMES it, which is
-  const current = sectionFor(section);
+    the part the overlay could not do: the form used to appear under whichever row happened to be
-
+    highlighted, so it read as that section being broken rather than as one step not done yet.
-  // Everything but `config`, so the settings link keeps the section underneath it.
+  */
-  const configSearch = new URLSearchParams(params);
+  const current = sectionFor(configured ? selected : 'administration');
-  configSearch.set('config', '1');
 
   const Panel = current.built ? PANELS[current.key] : undefined;
 
@@ -86,14 +90,7 @@ export const DetailPanel = () => {
     <div className="flex size-full flex-col overflow-hidden">
       <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-2">
         <h2 className="truncate text-sm font-medium">{current.label}</h2>
-        {/* A real link, so the settings are addressable and cmd-clickable like anything else. */}
+        <span className="truncate text-xs text-muted-foreground">{current.hint}</span>
-        <Link
-          to={{ search: `?${configSearch.toString()}` }}
-          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground"
-        >
-          <Settings className="size-3.5" />
-          Connection
-        </Link>
       </div>
 
       <div className="min-h-0 flex-1">{Panel ? <Panel /> : <PlannedSection section={current} />}</div>

web/NavPanel.tsx

@@ -37,12 +37,10 @@ export const NavPanel = () => {
       {SECTIONS.map((section) => {
         const Icon = section.icon;
 
-        // Everything else in the URL is preserved. `?config=1` is the one that matters — opening the
+        // Everything else in the URL is preserved. This is one screen of a workspace, and the global
-        // settings and then clicking a section should leave the settings, not silently keep them open
+        // query string carries state that belongs to the shell rather than to this panel.
-        // underneath.
         const search = new URLSearchParams(params);
         search.set('section', section.key);
-        search.delete('config');
 
         return (
           <Link

web/sections.ts

@@ -1,13 +1,21 @@
 import type { LucideIcon } from 'lucide-react';
-import { Home, Info, Layers, Images, Handshake, Sparkles, Wrench, Settings, Mail } from 'lucide-react';
+import { Home, Info, Layers, Images, Handshake, Sparkles, Wrench, Settings, Mail, Cog } from 'lucide-react';
 
 /**
  * The sections of the fofos admin, in nav order.
  *
  * ── The order is the client's site, not the database's ──
  *
- * It follows the sitemap: the pages someone edits most, first. Site settings and Messages sit at the
+ * It follows the sitemap: the pages someone edits most, first. Site settings, Messages and
- * bottom because they are not pages — one is configuration and the other is an inbox.
+ * Administration sit at the bottom because they are not pages — the site's settings, an inbox, and the
+ * plugin's own machinery.
+ *
+ * ── `site` and `administration` are different things ──
+ *
+ * "Site settings" is the CLIENT's — partners, social links, contact details, all of it public copy that
+ * whoever edits the site edits. "Administration" is OFFICER's end: where fofos is, how to reach it, and
+ * whatever else this plugin needs to know to do its job. One is content, the other is plumbing, and the
+ * people who touch them are not the same people. Nothing in Administration ever appears on the site.
  *
  * ── `built` ──
  *
@@ -20,6 +28,7 @@ import { Home, Info, Layers, Images, Handshake, Sparkles, Wrench, Settings, Mail
  */
 
 export type SectionKey =
+  | 'administration'
   | 'messages'
   | 'site'
   | 'about'
@@ -114,6 +123,19 @@ export const SECTIONS: Section[] = [
     path: '/fofos-admin/messages',
     built: true,
   },
+  {
+    /*
+      Last, and `path: null` — it reads nothing from fofos. Every other section is a window onto the
+      client's site; this one is the window onto the connection itself, which is why it keeps working
+      when fofos is unreachable and the others do not.
+    */
+    key: 'administration',
+    label: 'Administration',
+    icon: Cog,
+    hint: 'Where fofos is, and the token to reach it',
+    path: null,
+    built: true,
+  },
 ];
 
 /** Where the detail panel goes when the URL says nothing, or says something it does not recognise. */