Deploy UX: honest port field, rocket on the ship chip, real deploy door

Field-found trap: nginx-served builds always listen on container port
80, but the wizard's Port field (default 3000) looked authoritative —
producing a mapping that targeted a port nothing listened on (502).
The preview now reports the container_port the deploy will actually
use, and the wizard says plainly when the App Port entry is ignored
and what the mapping will target.

Discoverability: the Source & Ship chip gains a rocket (it handles
deployments, not just commits) and its tooltip says so; the welcome
screen's Deploy card now opens the Source & Ship drawer instead of
sending a chat message pretending to deploy.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: jherforth

crates/harness-api/src/handlers.rs

@@ -3332,12 +3332,23 @@ pub async fn preview_deploy(
         }));
     }
 
+    // The port the deployed CONTAINER will actually listen on — same rule the Coolify deploy
+    // uses (generate_clone_dockerfile): nginx-served frameworks are always 80 regardless of the
+    // wizard's Port field; Node-server frameworks use the requested port. Surfacing this in the
+    // preview is what lets the wizard warn when the user's Port entry will be ignored — the
+    // field-found failure mode was a port mapping targeting :3000 while nginx served :80.
+    let container_port: u16 = match framework.as_str() {
+        "nextjs" | "express" | "fastify" | "node" => port,
+        _ => 80, // vite-react | vue | react | static | unknown → nginx
+    };
+
     Ok(Json(serde_json::json!({
         "framework": framework,
         "build_command": build_cmd,
         "output_dir": output_dir,
         "default_port": default_port,
         "port": port,
+        "container_port": container_port,
         "app_name": app_name,
         "files": files,
     })))

packages/web-ui/src/components/ChatPane.tsx

@@ -458,12 +458,14 @@ export function ChatPane({
                   <div className="font-medium text-monastery-text-primary mb-0.5">Testing</div>
                   Add tests to the existing module
                 </button>
-                <button 
-                  onClick={() => onSendMessage('Deploy this project to my homelab server')}
+                <button
+                  // Deploying is a real flow (Source & Ship → wizard), not a chat request —
+                  // point first-time users at the actual door.
+                  onClick={() => window.dispatchEvent(new CustomEvent('monastery:open-source-ship'))}
                   className="p-3 bg-monastery-dark-bg rounded-xl text-xs text-monastery-text-secondary hover:bg-monastery-dark-tertiary hover:text-monastery-text-primary transition-all border border-monastery-dark-border hover:border-monastery-pine text-left"
                 >
-                  <div className="font-medium text-monastery-text-primary mb-0.5">Deploy</div>
-                  Deploy this to my homelab
+                  <div className="font-medium text-monastery-text-primary mb-0.5">Deploy 🚀</div>
+                  Ship this to your homelab (Source & Ship)
                 </button>
               </div>
 

packages/web-ui/src/components/SelfHostWizard.tsx

@@ -305,9 +305,24 @@ export function SelfHostWizard({ isOpen, onClose, onFixBuildError }: SelfHostWiz
               <div className="flex-1"><label className="block text-xs font-medium text-monastery-text-secondary mb-1">Domain (optional)</label>
                 <input type="text" value={domain} onChange={e => setDomain(e.target.value)} placeholder="app.yourdomain.com"
                   className="w-full px-3 py-2 bg-monastery-dark-bg border border-monastery-dark-border rounded-lg text-monastery-text-primary text-sm placeholder-monastery-text-muted focus:border-monastery-pine focus:outline-none" /></div>
-              <div className="w-24"><label className="block text-xs font-medium text-monastery-text-secondary mb-1">Port</label>
+              <div className="w-24"><label className="block text-xs font-medium text-monastery-text-secondary mb-1">App Port</label>
                 <input type="number" value={port} onChange={e => setPort(e.target.value)}
                   className="w-full px-3 py-2 bg-monastery-dark-bg border border-monastery-dark-border rounded-lg text-monastery-text-primary text-sm focus:border-monastery-pine focus:outline-none" /></div></div>
+            {/* The Port field is a classic trap: nginx-served builds always listen on 80, so a
+                mismatched entry used to produce a port mapping pointing at nothing. Say which
+                port will really be used, up front. */}
+            {preview?.container_port !== undefined && (
+              String(preview.container_port) !== port ? (
+                <p className="text-xs text-amber-300 flex items-start gap-1 -mt-2">
+                  <AlertTriangle size={11} className="shrink-0 mt-0.5" />
+                  Detected <b>{preview.framework}</b> — the container serves on port <b>{preview.container_port}</b> (nginx serves the built site), so the App Port field is ignored and the published mapping targets {preview.container_port}.
+                </p>
+              ) : (
+                <p className="text-xs text-monastery-text-muted -mt-2">
+                  Container listens on port {preview.container_port}; it will be published on a stable high port on the server (shown after deploy).
+                </p>
+              )
+            )}
             {dokploy && coolify && (<div><label className="block text-xs font-medium text-monastery-text-secondary mb-1">Platform</label>
               <select value={selectedPlatform || (dokploy ? 'dokploy' : 'coolify')} onChange={e => setSelectedPlatform(e.target.value)}
                 className="w-full px-3 py-2 bg-monastery-dark-bg border border-monastery-dark-border rounded-lg text-monastery-text-primary text-sm focus:border-monastery-pine focus:outline-none">

packages/web-ui/src/components/TopBar.tsx

@@ -393,7 +393,7 @@ export function TopBar({ availableProjects = [], endpoints = [], availableModels
               <button
                 onClick={() => window.dispatchEvent(new CustomEvent('monastery:open-source-ship'))}
                 className="flex items-center gap-1.5 px-2.5 py-1.5 bg-monastery-dark-surface rounded-lg border border-monastery-dark-border hover:border-monastery-pine transition-colors"
-                title={`Source & Ship — branch ${gitStatus.branch}, ${gitStatus.changed_files.length} changed, ${gitStatus.ahead} ahead / ${gitStatus.behind} behind`}
+                title={`Source & Ship — pull, commit & push, snapshots, and DEPLOY. Branch ${gitStatus.branch}, ${gitStatus.changed_files.length} changed, ${gitStatus.ahead} ahead / ${gitStatus.behind} behind`}
               >
                 <GitBranch size={14} className={gitStatus.is_clean ? 'text-green-400' : 'text-amber-400'} />
                 <span className="text-xs text-monastery-text-secondary">
@@ -414,6 +414,9 @@ export function TopBar({ availableProjects = [], endpoints = [], availableModels
                     <ArrowDown size={10} />{gitStatus.behind}
                   </span>
                 )}
+                {/* Deployment lives behind this chip too — the rocket says so. */}
+                <span className="h-3.5 w-px bg-monastery-dark-border" aria-hidden />
+                <Rocket size={12} className="text-monastery-lantern" />
                 <ChevronDown size={12} className="text-monastery-text-muted" />
               </button>
             ) : (

packages/web-ui/src/hooks/useHostingServices.ts

@@ -75,6 +75,9 @@ export interface PreviewResult {
   output_dir: string;
   default_port: number;
   port: number;
+  /** The port the deployed container will ACTUALLY listen on (nginx-served frameworks are
+   *  always 80; the wizard's Port field only applies to Node-server frameworks). */
+  container_port?: number;
   app_name: string;
   files: Array<{
     name: string;