a way to actually connect it

Deleting the old UI took its connection panel with it, so the plugin installed,
opened, and had nowhere to type a URL. The frame would have loaded and answered
503 on every request inside it — which reads as Gitea being down rather than as
nobody having said where Gitea is.

The panel now asks for the connection FIRST and shows the form when there is
none.

Two halves, and which one you get depends on who you are: the URL is the
owner's, one instance per server, and everyone else supplies only a token and
inherits it. Not a UI choice — service_connections stores a member's row with a
null URL for exactly this reason, so "members never see the instance URL" is a
property of the schema rather than a filter somebody has to remember.

Defaults to http://localhost:3000 and says why in the field: the sidecar
fetches SERVER-side, so localhost means the machine Officer runs on. It needs
no TLS and never leaves the box, where the public URL takes the same traffic
out and back.

web/GiteaFrame.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { ExternalLink, Loader2, TriangleAlert } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
 import { Button } from '@/components/ui/button';
+import { GiteaConnection, type ConnectionState } from './GiteaConnection';
 
 // Gitea's own web interface, rendered in place.
 //
@@ -24,16 +25,27 @@ import { Button } from '@/components/ui/button';
 const FRAME_SRC = '/api/gitea/_web/';
 
 export const GiteaFrame = () => {
-  const { post } = useClient();
+  const { get, post } = useClient();
   const [state, setState] = useState<'opening' | 'ready' | 'failed'>('opening');
+  const [connection, setConnection] = useState<ConnectionState | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
 
   useEffect(() => {
     let cancelled = false;
-    // Not in a dependency array: `useClient()` returns a new object every render, so depending on `post`
-    // would re-mint on every keystroke elsewhere in the app. Mount-only is what is meant.
+    // Not in a dependency array: `useClient()` returns a new object every render, so depending on `get`
+    // or `post` would re-run this on every keystroke elsewhere in the app.
     void (async () => {
       try {
+        // The connection FIRST. Without it the frame loads and every request inside it answers 503,
+        // which reads as Gitea being down rather than as nobody having said where Gitea is.
+        const conn = await get<ConnectionState>('/gitea/_config');
+        if (cancelled) return;
+        setConnection(conn);
+        if (!conn.configured) {
+          setState('ready');
+          return;
+        }
         await post('/gitea/session', {});
         if (!cancelled) setState('ready');
       } catch (err) {
@@ -46,7 +58,7 @@ export const GiteaFrame = () => {
       cancelled = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [attempt]);
 
   if (state === 'opening') {
     return (
@@ -71,6 +83,10 @@ export const GiteaFrame = () => {
     );
   }
 
+  if (connection && !connection.configured) {
+    return <GiteaConnection state={connection} onSaved={() => setAttempt((n) => n + 1)} />;
+  }
+
   return (
     <div className="relative h-full w-full">
       {/* The escape hatch, and it is not an admission of defeat: the whole point of proxying an app that