improve dialog UX, show network address on startup, use PORT env var

- Move prompt field first and autofocus it in create worktree dialog
- Show LAN network address alongside localhost on backend startup
- Frontend uses PORT env var (default 5112) instead of DASHBOARD_PORT+1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: centdix

backend/src/server.ts

@@ -1,4 +1,5 @@
 import { join, resolve } from "node:path";
+import { networkInterfaces } from "node:os";
 import { ts } from "./lib/utils";
 import {
   listWorktrees,
@@ -461,3 +462,11 @@ cleanupStaleSessions();
 startPrMonitor(getWorktreePaths, config.linkedRepos, PROJECT_DIR);
 
 console.log(`Dev Dashboard API running at http://localhost:${PORT}`);
+const nets = networkInterfaces();
+for (const addrs of Object.values(nets)) {
+  for (const a of addrs ?? []) {
+    if (a.family === "IPv4" && !a.internal) {
+      console.log(`  Network: http://${a.address}:${PORT}`);
+    }
+  }
+}

frontend/src/lib/CreateWorktreeDialog.svelte

@@ -54,31 +54,32 @@
     }}
   >
     <h2 class="text-base mb-4">New Worktree</h2>
-    <div class="mb-4">
-      <label class="block text-xs text-muted mb-1.5" for="wt-name"
-        >Name <span class="opacity-60">(optional)</span></label
-      >
-      <input
-        id="wt-name"
-        type="text"
-        class="w-full px-2.5 py-1.5 rounded-md border border-edge bg-surface text-primary text-[13px] placeholder:text-muted/50 outline-none focus:border-accent"
-        placeholder="auto-generated if empty"
-        bind:value={name}
-      />
-    </div>
     <div class="mb-4">
       <label class="block text-xs text-muted mb-1.5" for="wt-prompt"
         >Prompt <span class="opacity-60">(optional)</span></label
       >
       <textarea
         id="wt-prompt"
         rows="3"
+        autofocus
         class="w-full px-2.5 py-1.5 rounded-md border border-edge bg-surface text-primary text-[13px] placeholder:text-muted/50 outline-none focus:border-accent resize-y"
         placeholder="Describe the task for the agent..."
         bind:value={prompt}
         onkeydown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); e.currentTarget.form?.requestSubmit(); } }}
       ></textarea>
     </div>
+    <div class="mb-4">
+      <label class="block text-xs text-muted mb-1.5" for="wt-name"
+        >Name <span class="opacity-60">(optional)</span></label
+      >
+      <input
+        id="wt-name"
+        type="text"
+        class="w-full px-2.5 py-1.5 rounded-md border border-edge bg-surface text-primary text-[13px] placeholder:text-muted/50 outline-none focus:border-accent"
+        placeholder="auto-generated if empty"
+        bind:value={name}
+      />
+    </div>
     <div class="flex gap-2 mb-4">
       {#each AGENTS as a}
         <label

frontend/vite.config.ts

@@ -5,11 +5,12 @@ import tailwindcss from "@tailwindcss/vite";
 const backendPort = process.env.DASHBOARD_PORT || "5111";
 const backendUrl = `http://localhost:${backendPort}`;
 const backendWs = `ws://localhost:${backendPort}`;
+const port = parseInt(process.env.PORT || "5112");
 
 export default defineConfig({
   plugins: [svelte(), tailwindcss()],
   server: {
-    port: parseInt(backendPort) + 1,
+    port,
     proxy: {
       "/api": backendUrl,
       "/ws": {