a nav down the left, whatever it selects beside it

two fixed panels could show two of NPM's seven sections and had nowhere to put
the other five. now the left column is the section list — proxy hosts,
redirections, streams, 404 hosts, access lists, certificates, connection — and
the right renders whichever is chosen.

NPM's own vocabulary, in NPM's own order. somebody who has used it should find
the same words, and somebody who has not will end up in NPM's UI eventually
anyway; better names would just mean learning both. "404 hosts" reads oddly and
is theirs, so the hint under it says what it means.

the two panels never speak. the nav writes ?section= and the detail pane reads
it — navigation-audit's rule, and it is what makes a section linkable and
survive a reload. changing section clears ?host=, which belonged to the list
that was open.

three things folded up while doing it. the unconfigured check moved to the
detail pane and happens once, so all seven sections say "no connection yet" the
same way instead of six saying it badly. the settings gear is gone: connection
is a nav row now. and the four list-only sections are one component, differing
only in what a row says — proxy hosts and certificates stay separate because
they have real behaviour, and folding them in would be a props bag that is a
worse version of both.

the counts in the nav are one request each. affordable against a local NPM, and
they answer "is this worth opening" without a click. a count that fails is
absent rather than zero — zero is a fact about NPM, a failure is a fact about
the request, and the detail pane reports that properly.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043

web/HostsPanel.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { AlertTriangle, Globe, Lock, LockOpen, Power, RefreshCw, Settings, ShieldCheck, Users } from "lucide-react";
+import { AlertTriangle, Globe, Lock, LockOpen, Power, RefreshCw, ShieldCheck, Users } from "lucide-react";
 import { useClient } from "hooks/useClient";
 import { useSearchParams } from "react-router";
-import { ConnectionPanel } from "./ConnectionPanel";
 import { readableError } from "./errors";
 import { useConnectionChanged } from "./channel";
 
@@ -64,9 +63,6 @@ export const HostsPanel = () => {
   const [busy, setBusy] = useState<number | null>(null);
   const [params, setParams] = useSearchParams();
   const selected = params.get("host");
-  // `?config=1` is the settings page; an unconfigured plugin shows it whether or not it was asked for.
-  // In the URL rather than in state, so it survives a refresh and can be linked to — `docs/navigation-audit.md`.
-  const configuring = params.get("config") === "1";
   // Re-read when the connection is saved or removed. Named as an effect dependency below — that IS the
   // subscription; there is nothing to unsubscribe from.
   const [connectionSignal] = useConnectionChanged();
@@ -97,9 +93,8 @@ export const HostsPanel = () => {
     }
   };
 
-  // Order matters: an explicit `?config=1` wins over everything, then "there is nothing to connect to"
-  // wins over the generic failure screen. Otherwise the first thing a new install shows is an error.
-  if (configuring || failure?.unconfigured) return <ConnectionPanel />;
+  // No `unconfigured` branch here any more: `DetailPanel` asks `/status` once and renders the connection
+  // form instead of any section, so all seven say the same thing rather than six of them saying it badly.
   if (failure) return <Failed failure={failure} onRetry={() => void load()} />;
   if (!hosts) return <Centred>Loading hosts…</Centred>;
 
@@ -110,21 +105,9 @@ export const HostsPanel = () => {
         <span className="text-sm font-medium">
           {hosts.length} host{hosts.length === 1 ? "" : "s"}
         </span>
-        <span className="flex items-center gap-2">
-          <button type="button" onClick={() => void load()} className="text-muted-foreground hover:text-foreground">
-            <RefreshCw className="size-4" />
-          </button>
-          {/* Not a Link: this panel lives inside a workspace and the target is a parameter on the page it
-              is already on. A button that sets the parameter is the same navigation without a full route. */}
-          <button
-            type="button"
-            title="Connection settings"
-            onClick={() => setParams((p) => { p.set("config", "1"); return p; })}
-            className="text-muted-foreground hover:text-foreground"
-          >
-            <Settings className="size-4" />
-          </button>
-        </span>
+        <button type="button" onClick={() => void load()} className="text-muted-foreground hover:text-foreground">
+          <RefreshCw className="size-4" />
+        </button>
       </header>
 
       {hosts.length === 0 ? (