feat(desktop): a server manager you can browse and edit (#27)

The app could **create** a connection and nothing else. No list, no edit, no
delete, no rename. "New server" was a one-way door: get a field wrong and your
only recourse was the CLI.

And every field beyond the six in that dialog was unreachable from the window
entirely — **tags** most consequentially, since fleet selection is built on
`--on tag:production` and there was nowhere in the app to set one. Same for
the jump host, a non-standard remote rsync path, notes and agent forwarding.

So: a manager, in the shape the job actually has. Every server on the left
with its tags, every field of the selected one on the right, and New /
Duplicate / Import / Save / Test / Delete. One list shared by both tabs,
because servers are shared — the same list backs the transfer panes and Fleet.

`~/.ssh/config` hosts are listed but not editable; that is somebody else's
file. "Save a copy" turns one into a connection of your own, which is the same
deliberate act the CLI's import performs, and leaves the file untouched.

Editing upserts on the connection id, so changing a name updates the row
rather than leaving a second copy behind.

Also fixes the smaller half of the same complaint. Saving a fleet command
under an existing name has always updated it — the store upserts — but the
control read "Save these settings" either way, so there was no way to tell an
edit from a new one. It now reads "Update <name>" when what is on screen is a
saved command, and prefills the name so one keypress is enough.

The renderer's `Connection` type carried only the eight fields the two-pane
view happened to need, which is why the rest were uneditable: they were absent
from the type, so nothing could render them. It now describes what a
connection actually holds.

517 tests. Verified by driving the built renderer: the list, the tags, the
full form, and selecting a different server loading it for editing.


Claude-Session: https://claude.ai/code/session_01UeSWg1Czsb2Lwxj8vHUnA4

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: ralyodio

apps/desktop/src/app/page.tsx

@@ -18,6 +18,7 @@ import {
 import { ConnectionDialog } from '@/components/connection-dialog'
 import { FleetView } from '@/components/fleet-view'
 import { ProfileBar } from '@/components/profile-bar'
+import { ServerManager } from '@/components/server-manager'
 import { endpointLabel, loadPane, Pane, type PaneEndpoint, type PaneState } from '@/components/pane'
 import { TransferRail } from '@/components/transfer-rail'
 import { MirrorPreviewDialog, TransferBand, type ActiveJob } from '@/components/transfer-panel'
@@ -90,6 +91,7 @@ export default function Workspace() {
   const [job, setJob] = useState<ActiveJob | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [showConnection, setShowConnection] = useState(false)
+  const [showServers, setShowServers] = useState(false)
   const [tab, setTab] = useState<'transfer' | 'fleet'>('transfer')
   const [profiles, setProfiles] = useState<SyncProfile[]>([])
   const [outsideShell, setOutsideShell] = useState(false)
@@ -380,11 +382,11 @@ export default function Workspace() {
         <div className="ml-auto flex items-center gap-2">
           <Button
             variant="outline"
-            onClick={() => setShowConnection(true)}
+            onClick={() => setShowServers(true)}
             className="h-[var(--control)] gap-2 border-line-strong text-[12px]"
           >
             <Users className="size-3.5" />
-            New server
+            Servers
           </Button>
 
           {/*
@@ -408,8 +410,8 @@ export default function Workspace() {
             <PopoverContent align="end" className="w-[236px] gap-0.5 p-1.5">
               <MenuItem
                 icon={<Plus className="size-3.5" />}
-                onClick={() => setShowConnection(true)}
-                label="Add a server…"
+                onClick={() => setShowServers(true)}
+                label="Servers…"
               />
               <MenuItem
                 icon={<FileDown className="size-3.5" />}
@@ -543,9 +545,15 @@ export default function Workspace() {
       </div>
 
       <div className={`flex min-h-0 flex-1 flex-col ${tab === 'fleet' ? '' : 'hidden'}`}>
-        <FleetView onAddServer={() => setShowConnection(true)} />
+        <FleetView onAddServer={() => setShowServers(true)} />
       </div>
 
+      <ServerManager
+        open={showServers}
+        onClose={() => setShowServers(false)}
+        onChanged={() => void refreshConnections()}
+      />
+
       <ConnectionDialog open={showConnection} onClose={() => setShowConnection(false)} onSaved={() => void refreshConnections()} />
 
       <MirrorPreviewDialog

apps/desktop/src/components/fleet-view.tsx

@@ -360,6 +360,15 @@ export function FleetView({ onAddServer }: { onAddServer: () => void }) {
 
   const canRun = selected.size > 0 && script.trim().length > 0 && !running
 
+  /**
+   * Is what is on screen a saved command you are changing?
+   *
+   * Saving under an existing name has always updated it — the store upserts —
+   * but the control said "Save these settings" either way, so there was no way
+   * to tell an edit from a new one.
+   */
+  const editingSaved = commands.some((command) => !command.builtin && command.name === label)
+
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       {error ? (
@@ -563,12 +572,18 @@ export function FleetView({ onAddServer }: { onAddServer: () => void }) {
               {script.trim() && !savingCommand ? (
                 <button
                   type="button"
-                  onClick={() => setSavingCommand(true)}
+                  onClick={() => {
+                    // Prefill with the loaded command's name so saving over it
+                    // is one keypress. Updating was always possible — saving
+                    // under the same name upserts — but nothing said so.
+                    setNewCommandName(editingSaved ? label : '')
+                    setSavingCommand(true)
+                  }}
                   disabled={running}
                   className="focus-ring inline-flex items-center gap-1 rounded-md border border-dashed border-line-strong px-2 py-0.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
                 >
                   <BookmarkPlus className="size-2.5" />
-                  Save these settings
+                  {editingSaved ? `Update ${label}` : 'Save these settings'}
                 </button>
               ) : null}