our order, not NPM's — and the two sections this is heading towards

the order is a claim about what people come here for: proxy hosts,
certificates, streams, then the rest. this file argued the opposite yesterday
— "NPM's words in NPM's order" — and half of that was wrong. the VOCABULARY is
worth keeping, because somebody will end up in NPM's UI eventually and better
names just mean learning both. the ORDER is an accident of how NPM grew, and
reproducing it gives up the one thing a plugin is for.

and two new entries, listed and not built: Domains, and DNS Providers. they sit
below a line, with Connection, because they are OFFICER's own rather than
things NPM owns — what it knows about your domains, and the registrar keys it
holds.

shown rather than hidden on purpose. a nav that shows them says what this is
FOR, including to whoever opens it in six months wondering what was decided.
the pane says plainly that it does not exist and then what it will be — "not
built" alone reads as an error, a description alone reads as something broken,
and together they read as a plan.

the planned check runs BEFORE the connection check: "you have not connected
NPM" is not why Domains is empty, and would be a misleading thing to be told.

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

web/PlannedSection.tsx

@@ -0,0 +1,43 @@
+import { Hammer } from 'lucide-react';
+import type { Section } from './sections';
+
+/**
+ * A section that is agreed and not built.
+ *
+ * It says so plainly, and then says what it will be. Both halves matter: "not built" alone reads as an
+ * error, and a description alone reads as a feature that is broken. Together they read as a plan, which is
+ * what they are.
+ *
+ * The alternative was to hide these until they exist, and that loses the thing the nav is good at — a
+ * person opening this plugin can see what it is FOR, not only what it currently does. `README.md` carries
+ * the full design; this is the two sentences that fit on a screen.
+ */
+
+const COPY: Partial<Record<Section['key'], { what: string; why: string }>> = {
+  domains: {
+    what: 'The domains you manage on this machine, and who each one is registered with.',
+    why: 'Right now that list lives in a document somebody edits by hand, which is right on the day it is written. Officer knowing it for real is what lets a certificate be issued without being told the same facts again.',
+  },
+  'dns-providers': {
+    what: 'An API key per registrar — Cloudflare, GoDaddy, whoever — kept in the secret store and never handed back out.',
+    why: 'This is what makes HTTPS possible on a hostname that only exists on your private network. Let’s Encrypt cannot visit a private address, so the only proof it accepts is a DNS record, and placing one needs the registrar’s API.',
+  },
+};
+
+export const PlannedSection = ({ section }: { section: Section }) => {
+  const copy = COPY[section.key];
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-3 p-8 text-center">
+      <Hammer className="size-8 text-muted-foreground" />
+      <p className="text-sm font-medium">{section.label} is not built yet.</p>
+      {copy && (
+        <>
+          <p className="max-w-md text-sm text-muted-foreground">{copy.what}</p>
+          <p className="max-w-md text-[11px] leading-relaxed text-muted-foreground">{copy.why}</p>
+        </>
+      )}
+      <p className="text-[11px] text-muted-foreground">The design is in this plugin’s README.</p>
+    </div>
+  );
+};