fix(desktop): Fleet is a tab, not a modal, and Run cannot scroll away (#18)

Fleet shipped in v0.2.8 as a dialog. It is the wrong container and it broke
the thing the view exists for: pick the `upgrade` recipe and its fifty-seven
lines of shell push the Run button off the bottom of the modal, where nothing
can scroll it back. The script itself was five textarea rows, so most of what
was about to run on every selected server was hidden too.

A modal is for a question you must answer before anything continues. This is
somewhere you sit for minutes with a long script in front of you while a dozen
servers report — the opposite.

So Fleet is now one of two tabs in the header, beside Transfer, and the layout
has exactly three scrolling regions: the server list, the script editor, and
the results. **The action bar sits outside all three**, pinned to the bottom of
the window. Run is on screen at the 960x600 minimum size just as it is
maximised. The editor is `clamp(120px, 26vh, 340px)`, resizable, with its own
scrollbar and a `57 lines - runs under sh -e` line under it, so the size of
what you are about to run is stated rather than discovered.

Modals are kept for modality: the destructive-command confirmation is now a
small dialog with Cancel / Run it anyway, which is a real blocking yes/no.

Also fixes a clipped field found in the screenshots: Timeout was 70px, and the
upgrade recipe's default of 3600 rendered as "360C".

Verified by screenshotting the built renderer rather than by reading it, per
the harness in [[diskpush-desktop-ui-preview]] — mock preload bridge served as
an external script, the app's real hashed CSP on the response, playwright-core
in headless Chromium. Eight shots: the tab empty, the upgrade recipe at
1360x860 and at the 960x600 minimum, a run in flight with a failure and an
unreachable host, the check sweep, the hazard dialog, light theme, and the
Transfer tab intact. No CSP violations.

One trap worth recording: `page.waitForFunction` compiles its predicate with
`eval`, which the real policy refuses, so hydration is polled with
`page.evaluate` instead. Bypassing CSP would have hidden exactly what the
harness is there to catch.


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

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

Author: ralyodio

README.md

@@ -20,8 +20,8 @@ diskpush ./data/ prod:/data/ -- --checksum # your own rsync flags
 - **Never deletes** destination-only files unless you explicitly enable Mirror,
   and Mirror always shows you the delete list first.
 - **One command, many servers.** Package upgrades, a health sweep, or a script
-  you already have — run across a whole tagged fleet, each server reported
-  separately.
+  you already have — run across a whole tagged fleet from the Fleet tab or the
+  CLI, each server reported separately.
 - **No cloud account, no relay.** For a server-to-server job the payload moves
   directly between the two servers; DiskPush only orchestrates.
 

apps/desktop/src/app/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import Image from 'next/image'
 import {
+  ArrowLeftRight,
   CircleAlert,
   CircleCheck,
   ExternalLink,
@@ -15,7 +16,7 @@ import {
   X,
 } from 'lucide-react'
 import { ConnectionDialog } from '@/components/connection-dialog'
-import { FleetDialog } from '@/components/fleet-dialog'
+import { FleetView } from '@/components/fleet-view'
 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'
@@ -38,6 +39,32 @@ function MenuItem({ icon, label, onClick }: { icon: React.ReactNode; label: stri
   )
 }
 
+/** One of the two top-level views. A segmented control, not a link. */
+function TabButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-current={active ? 'page' : undefined}
+      className={`focus-ring flex items-center gap-1.5 rounded-[7px] px-2.5 py-1 text-[12px] transition-colors ${
+        active
+          ? 'bg-background text-foreground shadow-sm'
+          : 'text-muted-foreground hover:text-foreground'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+
 const blankPane = (endpoint: PaneEndpoint, path: string): PaneState => ({
   endpoint,
   path,
@@ -62,7 +89,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 [showFleet, setShowFleet] = useState(false)
+  const [tab, setTab] = useState<'transfer' | 'fleet'>('transfer')
   const [outsideShell, setOutsideShell] = useState(false)
 
   const refreshConnections = useCallback(async () => {
@@ -278,20 +305,23 @@ export default function Workspace() {
             <span>No servers yet</span>
           )}
         </div>
-        <div className="ml-auto flex items-center gap-2">
-          {/*
-            Fleet sits beside "New server" rather than inside the menu: it is
-            the other half of what this app does with a list of servers, and
-            a feature nobody can find is a feature nobody has.
-          */}
-          <Button
-            variant="outline"
-            onClick={() => setShowFleet(true)}
-            className="h-[var(--control)] gap-2 border-line-strong text-[12px]"
-          >
+        {/*
+          Two views, not a dialog. Fleet is somewhere you work for minutes with
+          a long script in front of you, which is the opposite of what a modal
+          is for -- and as a modal its Run button ended up below the fold.
+        */}
+        <nav className="flex items-center gap-0.5 rounded-lg bg-secondary p-0.5">
+          <TabButton active={tab === 'transfer'} onClick={() => setTab('transfer')}>
+            <ArrowLeftRight className="size-3.5" />
+            Transfer
+          </TabButton>
+          <TabButton active={tab === 'fleet'} onClick={() => setTab('fleet')}>
             <Server className="size-3.5" />
             Fleet
-          </Button>
+          </TabButton>
+        </nav>
+
+        <div className="ml-auto flex items-center gap-2">
           <Button
             variant="outline"
             onClick={() => setShowConnection(true)}
@@ -356,83 +386,92 @@ export default function Workspace() {
         </div>
       ) : null}
 
-      <div className="flex min-h-0 flex-1 gap-0 p-3.5">
-        <Pane
-          role="Source"
-          state={left}
-          saved={saved}
-          sshConfig={sshConfig}
-          onRefreshHosts={refreshConnections}
-          active={active === 'left'}
-          onFocus={() => setActive('left')}
-          onChange={(patch) => setLeft((current) => ({ ...current, ...patch }))}
-          onNavigate={(path) => void navigate('left', left.endpoint, path)}
-          onEndpointChange={(endpoint) => setLeft(blankPane(endpoint, defaultPathFor(endpoint, allConnections)))}
-          onAddServer={() => setShowConnection(true)}
-        />
+      {/*
+        One view or the other, never both. The transfer side keeps its own
+        footer and status band; Fleet brings its own, pinned so the action
+        it exists for cannot scroll out of reach.
+      */}
+      {tab === 'transfer' ? (
+        <>
+        <div className="flex min-h-0 flex-1 gap-0 p-3.5">
+          <Pane
+            role="Source"
+            state={left}
+            saved={saved}
+            sshConfig={sshConfig}
+            onRefreshHosts={refreshConnections}
+            active={active === 'left'}
+            onFocus={() => setActive('left')}
+            onChange={(patch) => setLeft((current) => ({ ...current, ...patch }))}
+            onNavigate={(path) => void navigate('left', left.endpoint, path)}
+            onEndpointChange={(endpoint) => setLeft(blankPane(endpoint, defaultPathFor(endpoint, allConnections)))}
+            onAddServer={() => setShowConnection(true)}
+          />
+
+          <TransferRail
+            direction={direction}
+            mirror={mirror}
+            busy={job !== null && !job.finished}
+            leftLabel={railLabel(left.endpoint, allConnections)}
+            rightLabel={railLabel(right.endpoint, allConnections)}
+            onDirection={setDirection}
+            onToggleMirror={() => setMirror((value) => !value)}
+            onPreview={runPreview}
+            onRun={run}
+          />
+
+          <Pane
+            role="Destination"
+            state={right}
+            saved={saved}
+            sshConfig={sshConfig}
+            onRefreshHosts={refreshConnections}
+            active={active === 'right'}
+            onFocus={() => setActive('right')}
+            onChange={(patch) => setRight((current) => ({ ...current, ...patch }))}
+            onNavigate={(path) => void navigate('right', right.endpoint, path)}
+            onEndpointChange={(endpoint) => setRight(blankPane(endpoint, defaultPathFor(endpoint, allConnections)))}
+            onAddServer={() => setShowConnection(true)}
+          />
+        </div>
 
-        <TransferRail
-          direction={direction}
+        <TransferBand
+          job={job}
+          route={route}
           mirror={mirror}
-          busy={job !== null && !job.finished}
-          leftLabel={railLabel(left.endpoint, allConnections)}
-          rightLabel={railLabel(right.endpoint, allConnections)}
-          onDirection={setDirection}
-          onToggleMirror={() => setMirror((value) => !value)}
-          onPreview={runPreview}
-          onRun={run}
-        />
-
-        <Pane
-          role="Destination"
-          state={right}
-          saved={saved}
-          sshConfig={sshConfig}
-          onRefreshHosts={refreshConnections}
-          active={active === 'right'}
-          onFocus={() => setActive('right')}
-          onChange={(patch) => setRight((current) => ({ ...current, ...patch }))}
-          onNavigate={(path) => void navigate('right', right.endpoint, path)}
-          onEndpointChange={(endpoint) => setRight(blankPane(endpoint, defaultPathFor(endpoint, allConnections)))}
-          onAddServer={() => setShowConnection(true)}
+          onCancel={() => {
+            if (job) void api()?.transfers.cancel(job.jobId)
+          }}
         />
-      </div>
 
-      <TransferBand
-        job={job}
-        route={route}
-        mirror={mirror}
-        onCancel={() => {
-          if (job) void api()?.transfers.cancel(job.jobId)
-        }}
-      />
-
-      {/*
-        This line used to be a fixed string that read like the command being
-        run but could not change -- turn Mirror on and it still claimed no
-        deletes. A command line nobody can trust is worse than none, so it is
-        built from the same state the transfer is.
-      */}
-      <footer className="flex h-[28px] shrink-0 items-center gap-2.5 border-t border-line bg-background px-4 text-[11px] text-faint">
-        <span>Incremental</span>
-        <span className="text-line-strong">·</span>
-        <span>Archive metadata</span>
-        <span className="text-line-strong">·</span>
-        <span>Resume</span>
-        <span className="text-line-strong">·</span>
-        <span className={mirror ? 'font-medium text-destructive' : 'text-ok'}>Deletes {mirror ? 'ON' : 'off'}</span>
         {/*
-          The command used to run flush to the window edge and get sliced
-          mid-token by the truncation, so the last thing in the footer was
-          always half a word. It keeps a gutter now, and the full string is in
-          the tooltip.
+          This line used to be a fixed string that read like the command being
+          run but could not change -- turn Mirror on and it still claimed no
+          deletes. A command line nobody can trust is worse than none, so it is
+          built from the same state the transfer is.
         */}
-        <span className="selectable numeric ml-auto min-w-0 max-w-[54%] truncate pl-4 text-[10.5px]" title={rsyncFlags}>
-          {rsyncFlags}
-        </span>
-      </footer>
-
-      <FleetDialog open={showFleet} onClose={() => setShowFleet(false)} />
+        <footer className="flex h-[28px] shrink-0 items-center gap-2.5 border-t border-line bg-background px-4 text-[11px] text-faint">
+          <span>Incremental</span>
+          <span className="text-line-strong">·</span>
+          <span>Archive metadata</span>
+          <span className="text-line-strong">·</span>
+          <span>Resume</span>
+          <span className="text-line-strong">·</span>
+          <span className={mirror ? 'font-medium text-destructive' : 'text-ok'}>Deletes {mirror ? 'ON' : 'off'}</span>
+          {/*
+            The command used to run flush to the window edge and get sliced
+            mid-token by the truncation, so the last thing in the footer was
+            always half a word. It keeps a gutter now, and the full string is in
+            the tooltip.
+          */}
+          <span className="selectable numeric ml-auto min-w-0 max-w-[54%] truncate pl-4 text-[10.5px]" title={rsyncFlags}>
+            {rsyncFlags}
+          </span>
+        </footer>
+        </>
+      ) : (
+        <FleetView onAddServer={() => setShowConnection(true)} />
+      )}
 
       <ConnectionDialog open={showConnection} onClose={() => setShowConnection(false)} onSaved={() => void refreshConnections()} />