From b3ef2e543e2c5d43a0d6cf01fa32cebd0a50b72c Mon Sep 17 00:00:00 2001 From: naps62-yolo Date: Sat, 20 Jun 2026 21:22:25 +0000 Subject: [PATCH] =?UTF-8?q?feat(maestro):=20tile-first=20web=20spawn=20for?= =?UTF-8?q?m=20=E2=80=94=20host/command=20tiles,=20recents,=20worktree-by-?= =?UTF-8?q?branch,=20generated=20name=20(#27)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rework web/src/spawn.ts from raw text boxes into a low-friction, tile-first flow: pick host tile → pick command tile → pick recent dir → Spawn, name already filled. - Command tiles from the daemon's advertised presets (GET /api/web/info, #26), with built-in fallback; `custom` reveals the free-text command input. - Host tiles replace the - - - - +
+ Host +
+
+
+ Command +
+ +
+
+ Working directory +
+ +
+
+ + + + + +
+
+ Name +
+ + +
+
-
- - - - - - -
@@ -79,73 +108,343 @@ export function openSpawnModal( `; document.body.appendChild(host); - const select = host.querySelector("select[name=daemon_id]") as HTMLSelectElement; - if (daemons.size === 0) { - const opt = document.createElement("option"); - opt.value = ""; - opt.textContent = "(no daemons connected)"; - opt.disabled = true; - opt.selected = true; - select.appendChild(opt); - } else { - for (const d of daemons.values()) { - const opt = document.createElement("option"); - opt.value = d.daemon_id; - opt.textContent = `${d.daemon_id} (${d.hostname})`; - select.appendChild(opt); - } - } + const form = host.querySelector("#spawn-form") as HTMLFormElement; + const errEl = form.querySelector(".form-error") as HTMLElement; + const hostTiles = host.querySelector("#host-tiles") as HTMLElement; + const cmdTiles = host.querySelector("#cmd-tiles") as HTMLElement; + const cmdRaw = host.querySelector("#cmd-raw") as HTMLInputElement; + const recentsEl = host.querySelector("#recents") as HTMLElement; + const cwdRawWrap = host.querySelector("#cwd-raw-wrap") as HTMLElement; + const cwdRaw = host.querySelector("#cwd-raw") as HTMLInputElement; + const wtEnabled = host.querySelector("#wt-enabled") as HTMLInputElement; + const wtHint = host.querySelector("#wt-hint") as HTMLElement; + const wtBody = host.querySelector("#wt-body") as HTMLElement; + const wtRepo = host.querySelector("#wt-repo") as HTMLElement; + const branchInput = host.querySelector("input[name=worktree_branch]") as HTMLInputElement; + const nameInput = host.querySelector("input[name=name]") as HTMLInputElement; - // Prefill the working directory with the selected daemon's home dir, and keep - // it in sync when the daemon changes — unless the user has typed their own. - const cwdInput = host.querySelector("input[name=cwd]") as HTMLInputElement; - let cwdEdited = false; - cwdInput.addEventListener("input", () => { - cwdEdited = true; + // ---- form state ------------------------------------------------------ + let selectedHostId = ""; + let presets: SpawnPreset[] = FALLBACK_PRESETS; + let selectedPresetId = ""; + let command = ""; // resolved command (preset's, or the raw custom input) + let cwd = ""; // chosen working directory + let inferredBaseRepo: string | null = null; // from the gitroot probe + let probeToken = 0; // guards async gitroot probes against races + let showAllHosts = false; + // A clone's cwd, applied once the (async) recents load for the initial host + // settles — so the fetch can't race past and clobber the seeded directory. + let cloneCwd: string | null = prefill?.cwd ?? null; + + // ---- name ------------------------------------------------------------ + nameInput.value = prefill?.name ?? generateName(); + (host.querySelector("#reroll") as HTMLButtonElement).addEventListener("click", () => { + nameInput.value = generateName(); }); - const applyHomeDir = () => { - if (cwdEdited) return; - const home = daemons.get(select.value)?.home_dir; - if (home) cwdInput.value = home; - }; - select.addEventListener("change", applyHomeDir); - applyHomeDir(); - // Clone: seed the form from an existing session. cwd is marked edited so the - // home-dir sync won't clobber it on daemon change. - if (prefill) { - (host.querySelector("#spawn-title") as HTMLElement).textContent = - "Clone session"; - const set = (name: string, value: string | undefined) => { - if (value == null) return; - const field = host.querySelector( - `[name=${name}]`, - ) as HTMLInputElement | HTMLSelectElement | null; - if (field) field.value = value; - }; - if (prefill.daemon_id && daemons.has(prefill.daemon_id)) { - select.value = prefill.daemon_id; + // ---- command tiles --------------------------------------------------- + function selectPreset(id: string): void { + selectedPresetId = id; + const preset = presets.find((p) => p.id === id); + const isCustom = !preset || preset.command === ""; + cmdRaw.hidden = !isCustom; + if (isCustom) { + command = cmdRaw.value.trim(); + cmdRaw.focus(); + } else { + command = preset!.command; } - set("command", prefill.command); - set("name", prefill.name); - set("label", prefill.label); - if (prefill.cwd) { - cwdInput.value = prefill.cwd; - cwdEdited = true; + for (const tile of cmdTiles.querySelectorAll(".tile")) { + tile.classList.toggle("is-active", (tile as HTMLElement).dataset.id === id); } } - // Live directory autocomplete (NAP-329) on the path fields, scoped to the - // currently-selected daemon — re-reading `select.value` per query means it - // tracks host changes for free. - const baseRepoInput = host.querySelector( - "input[name=worktree_base_repo]", - ) as HTMLInputElement; - const autocompletes = [ - attachDirAutocomplete(cwdInput, () => select.value), - attachDirAutocomplete(baseRepoInput, () => select.value), + function renderCommandTiles(): void { + cmdTiles.replaceChildren(); + for (const p of presets) { + const tile = document.createElement("button"); + tile.type = "button"; + tile.className = "tile"; + tile.dataset.id = p.id; + tile.innerHTML = `${escapeHtml(p.label)}`; + tile.addEventListener("click", () => selectPreset(p.id)); + cmdTiles.appendChild(tile); + } + } + + cmdRaw.addEventListener("input", () => { + if (selectedPresetId === "custom" || presets.find((p) => p.id === selectedPresetId)?.command === "") { + command = cmdRaw.value.trim(); + } + }); + + // Presets ride `/api/web/info`; render fallbacks immediately, then refine. + renderCommandTiles(); + applyInitialCommand(); + getWebInfo() + .then((info) => { + if (info.presets?.length) { + presets = info.presets; + renderCommandTiles(); + applyInitialCommand(); + } + }) + .catch(() => { + /* keep fallbacks */ + }); + + // Pick a sensible starting command: a clone's command (matched to a preset or + // dropped into custom), else the first non-custom preset. + function applyInitialCommand(): void { + const wanted = prefill?.command; + if (wanted) { + const match = presets.find((p) => p.command === wanted && p.command !== ""); + if (match) { + selectPreset(match.id); + } else { + const custom = presets.find((p) => p.command === ""); + cmdRaw.value = wanted; + selectPreset(custom ? custom.id : "custom"); + command = wanted; + } + return; + } + const first = presets.find((p) => p.command !== ""); + if (first) selectPreset(first.id); + } + + // ---- working-directory picker --------------------------------------- + function showRawCwd(prefillValue?: string): void { + cwdRawWrap.hidden = false; + if (prefillValue != null) cwd = prefillValue; + cwdRaw.value = cwd; + markActiveRecent(null); + cwdRaw.focus(); + cwdRaw.select(); + } + + cwdRaw.addEventListener("input", () => { + cwd = cwdRaw.value.trim(); + if (wtEnabled.checked) probeGitRoot(); + }); + + function markActiveRecent(activeCwd: string | null): void { + for (const row of recentsEl.querySelectorAll(".recent-row")) { + row.classList.toggle( + "is-active", + (row as HTMLElement).dataset.cwd === activeCwd, + ); + } + } + + function selectRecent(dir: RecentDir): void { + cwd = dir.cwd; + cwdRawWrap.hidden = true; + markActiveRecent(dir.cwd); + // Picking a recent dir can pre-select the command it was last used with. + const match = presets.find((p) => p.command === dir.last_command && p.command !== ""); + if (match) selectPreset(match.id); + if (wtEnabled.checked) probeGitRoot(); + } + + async function loadRecents(): Promise { + recentsEl.replaceChildren(loadingRow()); + let dirs: RecentDir[] = []; + try { + dirs = (await recentDirs(selectedHostId)).dirs ?? []; + } catch { + dirs = []; + } + recentsEl.replaceChildren(); + for (const dir of dirs) { + recentsEl.appendChild(recentRow(dir)); + } + // Persistent escape hatch + empty-history fallback. + recentsEl.appendChild(otherDirRow()); + if (cloneCwd) { + // A clone seeds the directory verbatim into the raw input, regardless of + // this host's history. + showRawCwd(cloneCwd); + cloneCwd = null; + } else if (dirs.length === 0) { + // No history: default to raw input prefilled with the host's home dir. + const home = daemons.get(selectedHostId)?.home_dir ?? ""; + showRawCwd(home); + } else { + cwdRawWrap.hidden = true; + } + } + + function recentRow(dir: RecentDir): HTMLElement { + const row = document.createElement("button"); + row.type = "button"; + row.className = "recent-row"; + row.dataset.cwd = dir.cwd; + row.innerHTML = ` + ${escapeHtml(dir.cwd)} + ${escapeHtml(dir.last_command)}`; + row.addEventListener("click", () => selectRecent(dir)); + return row; + } + + function otherDirRow(): HTMLElement { + const row = document.createElement("button"); + row.type = "button"; + row.className = "recent-row recent-other"; + row.innerHTML = `Other directory…`; + row.addEventListener("click", () => { + const home = daemons.get(selectedHostId)?.home_dir ?? ""; + showRawCwd(cwd || home); + }); + return row; + } + + function loadingRow(): HTMLElement { + const p = document.createElement("p"); + p.className = "picker-loading"; + p.textContent = "Loading recent directories…"; + return p; + } + + // ---- worktree (branch-only; base_repo inferred via /gitroot) ---------- + async function probeGitRoot(): Promise { + const token = ++probeToken; + if (!cwd) { + inferredBaseRepo = null; + wtBody.hidden = true; + wtHint.hidden = false; + wtHint.textContent = "Choose a working directory first."; + return; + } + wtHint.hidden = false; + wtHint.textContent = "Checking for a git repository…"; + wtBody.hidden = true; + let root: string | undefined; + try { + root = (await gitRoot(selectedHostId, cwd)).root; + } catch { + root = undefined; + } + if (token !== probeToken) return; // a newer probe superseded us + if (root) { + inferredBaseRepo = root; + wtHint.hidden = true; + wtBody.hidden = false; + wtRepo.textContent = `repo: ${root} (inferred)`; + } else { + inferredBaseRepo = null; + wtEnabled.checked = false; + wtBody.hidden = true; + wtHint.hidden = false; + wtHint.textContent = "Not inside a git repository — pick a dir in a repo to use a worktree."; + } + } + + wtEnabled.addEventListener("change", () => { + if (wtEnabled.checked) { + probeGitRoot(); + } else { + inferredBaseRepo = null; + wtBody.hidden = true; + wtHint.hidden = true; + } + }); + + // ---- host tiles ------------------------------------------------------ + // Order hosts by most-recently-spawned-on first, so the common case is the + // pre-selected tile. + function orderedHosts(): DaemonInfo[] { + const list = [...daemons.values()]; + const lastUsed = new Map(); + for (const s of sessions?.values() ?? []) { + const t = Date.parse(s.created_at); + if (Number.isFinite(t)) { + lastUsed.set(s.daemon_id, Math.max(lastUsed.get(s.daemon_id) ?? 0, t)); + } + } + return list.sort((a, b) => (lastUsed.get(b.daemon_id) ?? 0) - (lastUsed.get(a.daemon_id) ?? 0)); + } + + function selectHost(id: string): void { + selectedHostId = id; + for (const tile of hostTiles.querySelectorAll(".tile")) { + tile.classList.toggle("is-active", (tile as HTMLElement).dataset.id === id); + } + // Recents + any worktree inference are host-scoped — refresh on change. + cwd = ""; + inferredBaseRepo = null; + if (wtEnabled.checked) { + wtEnabled.checked = false; + wtBody.hidden = true; + wtHint.hidden = true; + } + void loadRecents(); + } + + function renderHostTiles(): void { + hostTiles.replaceChildren(); + const ordered = orderedHosts(); + if (ordered.length === 0) { + const empty = document.createElement("p"); + empty.className = "picker-loading"; + empty.textContent = "(no daemons connected)"; + hostTiles.appendChild(empty); + return; + } + const visible = showAllHosts ? ordered : ordered.slice(0, MAX_HOST_TILES); + for (const d of visible) { + const tile = document.createElement("button"); + tile.type = "button"; + tile.className = "tile tile-host"; + tile.dataset.id = d.daemon_id; + tile.innerHTML = ` + ${escapeHtml(d.hostname)} + ${escapeHtml(d.daemon_id)}`; + tile.addEventListener("click", () => selectHost(d.daemon_id)); + hostTiles.appendChild(tile); + } + if (!showAllHosts && ordered.length > MAX_HOST_TILES) { + const more = document.createElement("button"); + more.type = "button"; + more.className = "tile tile-more"; + more.innerHTML = `More…`; + more.addEventListener("click", () => { + showAllHosts = true; + renderHostTiles(); + // Keep the current selection highlighted after re-render. + if (selectedHostId) { + hostTiles + .querySelector(`.tile[data-id="${cssEscape(selectedHostId)}"]`) + ?.classList.add("is-active"); + } + }); + hostTiles.appendChild(more); + } + } + + renderHostTiles(); + // Pre-select: a clone's host if present & connected, else the most-recent. + const ordered = orderedHosts(); + const initialHost = + prefill?.daemon_id && daemons.has(prefill.daemon_id) + ? prefill.daemon_id + : ordered[0]?.daemon_id; + if (initialHost) selectHost(initialHost); + + // ---- clone seed ------------------------------------------------------ + if (prefill) { + (host.querySelector("#spawn-title") as HTMLElement).textContent = "Clone session"; + (host.querySelector("input[name=label]") as HTMLInputElement).value = prefill.label ?? ""; + // The cwd itself is applied by loadRecents once the initial host's recents + // settle (see `cloneCwd`), so a slow fetch can't clobber it. + } + + // ---- live dir autocomplete on the raw cwd input (NAP-329) ------------ + const autocompletes: DirAutocompleteHandle[] = [ + attachDirAutocomplete(cwdRaw, () => selectedHostId), ]; + // ---- lifecycle ------------------------------------------------------- const close = () => { autocompletes.forEach((a) => a.destroy()); host.remove(); @@ -163,49 +462,56 @@ export function openSpawnModal( { once: true }, ); - const form = host.querySelector("#spawn-form") as HTMLFormElement; - const errEl = form.querySelector(".form-error") as HTMLElement; - + // ---- submit ---------------------------------------------------------- form.addEventListener("submit", async (e) => { e.preventDefault(); errEl.textContent = ""; - const data = new FormData(form); - const daemonId = String(data.get("daemon_id") ?? ""); - const cwd = String(data.get("cwd") ?? "").trim(); - const command = String(data.get("command") ?? "").trim(); - if (!daemonId || !cwd || !command) { - errEl.textContent = "Daemon, cwd, and command are required."; + if (!selectedHostId) { + errEl.textContent = "Pick a host."; return; } - const name = String(data.get("name") ?? "").trim(); - const label = String(data.get("label") ?? "").trim(); + if (!cwd) { + errEl.textContent = "Pick a working directory."; + return; + } + if (!command) { + errEl.textContent = "Pick a command (or fill the custom command)."; + return; + } + const metadata: Record = {}; + const name = nameInput.value.trim(); + const label = (host.querySelector("input[name=label]") as HTMLInputElement).value.trim(); if (name) metadata.name = name; if (label) metadata.label = label; const req: CreateSessionRequest = { - daemon_id: daemonId, + daemon_id: selectedHostId, cwd, command, metadata, }; - if (data.get("worktree_enabled")) { - const baseRepo = String(data.get("worktree_base_repo") ?? "").trim(); - const branch = String(data.get("worktree_branch") ?? "").trim(); - if (!baseRepo || !branch) { - errEl.textContent = "Worktree requires base repo and branch."; + + if (wtEnabled.checked) { + const branch = branchInput.value.trim(); + if (!inferredBaseRepo) { + errEl.textContent = "Worktree needs a directory inside a git repository."; + return; + } + if (!branch) { + errEl.textContent = "Worktree requires a branch name."; return; } req.worktree = { - base_repo: baseRepo, + base_repo: inferredBaseRepo, branch, - cleanup_on_kill: Boolean(data.get("worktree_cleanup_on_kill")), + cleanup_on_kill: Boolean( + (host.querySelector("input[name=worktree_cleanup_on_kill]") as HTMLInputElement).checked, + ), }; } - const submitBtn = form.querySelector( - "button[type=submit]", - ) as HTMLButtonElement; + const submitBtn = form.querySelector("button[type=submit]") as HTMLButtonElement; submitBtn.disabled = true; try { const session = await createSession(req); @@ -216,7 +522,20 @@ export function openSpawnModal( submitBtn.disabled = false; } }); - - const firstInput = form.querySelector("input, select") as HTMLElement | null; - firstInput?.focus(); +} + +function escapeHtml(s: string): string { + return s + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """); +} + +/** Escape a string for use inside a CSS attribute selector. Uses the native + * `CSS.escape` when available, with a conservative fallback. */ +function cssEscape(s: string): string { + const cssApi = (globalThis as { CSS?: { escape?: (v: string) => string } }).CSS; + if (cssApi?.escape) return cssApi.escape(s); + return s.replace(/["\\]/g, "\\$&"); } diff --git a/web/src/styles.css b/web/src/styles.css index 775e5b6..781e61a 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -1421,6 +1421,183 @@ textarea { border-radius: var(--r-2); } +/* ---------- spawn form: tiles + recents picker (#27) ---------- */ + +.spawn-modal .field { + display: flex; + flex-direction: column; + gap: var(--sp-2); +} + +.field-label { + font-size: var(--fs-13); + color: var(--ink); +} + +/* One-click tiles: host row + command row. */ +.tile-row { + display: flex; + flex-wrap: wrap; + gap: var(--sp-2); +} + +.tile { + flex: 1 1 auto; + min-width: 96px; + display: flex; + flex-direction: column; + gap: 2px; + align-items: flex-start; + padding: var(--sp-2) var(--sp-3); + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--r-2); + color: var(--ink); + font-family: inherit; + cursor: pointer; + text-align: left; + transition: + border-color var(--dur-fast) var(--ease-out), + background var(--dur-fast) var(--ease-out); +} + +.tile:hover { + border-color: var(--border-strong); +} + +.tile.is-active { + border-color: var(--accent); + background: var(--accent-tint); +} + +.tile-label { + font-size: var(--fs-14); + font-weight: 600; +} + +.tile-sub { + font-size: var(--fs-12); + color: var(--muted); + font-family: var(--font-mono); +} + +.tile-more { + flex: 0 0 auto; + min-width: 0; + justify-content: center; + align-items: center; + color: var(--muted); +} + +/* Recent-dirs picker rows. */ +.picker { + display: flex; + flex-direction: column; + gap: var(--sp-1); + max-height: 220px; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--border-strong) transparent; +} + +.recent-row { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: var(--sp-3); + padding: 6px var(--sp-3); + background: var(--surface-2); + border: 1px solid var(--border); + border-radius: var(--r-2); + color: var(--ink); + font-family: inherit; + cursor: pointer; + text-align: left; + transition: + border-color var(--dur-fast) var(--ease-out), + background var(--dur-fast) var(--ease-out); +} + +.recent-row:hover { + border-color: var(--border-strong); +} + +.recent-row.is-active { + border-color: var(--accent); + background: var(--accent-tint); +} + +.recent-dir { + font-family: var(--font-mono); + font-size: var(--fs-14); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.recent-cmd { + flex: 0 0 auto; + font-family: var(--font-mono); + font-size: var(--fs-12); + color: var(--muted); +} + +.recent-other .recent-dir { + color: var(--muted); + font-family: inherit; + font-style: italic; +} + +.picker-loading { + margin: 0; + padding: 6px var(--sp-3); + color: var(--faint); + font-size: var(--fs-13); +} + +.raw-wrap { + display: flex; +} + +.raw-input { + width: 100%; +} + +/* Worktree-by-branch: inferred repo line + inline hint. */ +.wt-hint { + margin: 0; + font-size: var(--fs-12); + color: var(--muted); +} + +.wt-body { + display: flex; + flex-direction: column; + gap: var(--sp-3); +} + +.wt-repo { + margin: 0; + font-family: var(--font-mono); + font-size: var(--fs-12); + color: var(--muted); +} + +/* Generated-name field with a reroll button. */ +.name-row { + display: flex; + gap: var(--sp-2); + align-items: center; +} + +.name-row input { + flex: 1 1 auto; +} + +.reroll { + flex: 0 0 auto; +} + /* ---------- directory autocomplete (NAP-329) ---------- */ .dir-ac { diff --git a/web/src/types.ts b/web/src/types.ts index b14560d..6f43503 100644 --- a/web/src/types.ts +++ b/web/src/types.ts @@ -37,6 +37,45 @@ export interface DirListing { truncated?: boolean; } +/** A spawn-form command preset advertised by the daemon (#22/#26). The `custom` + * preset has an empty `command` and reveals the free-text command input. */ +export interface SpawnPreset { + id: string; + label: string; + command: string; +} + +/** `GET /api/web/info` — the connected daemon's identity plus its spawn presets + * (#26). Mirrors the daemon-side `WebInfo`. */ +export interface WebInfo { + daemon_id: string; + hostname: string; + version: string; + daemon_url: string; + /** Command presets (claude/opencode/zsh + custom), config-resolved. */ + presets: SpawnPreset[]; +} + +/** One deduplicated recent working dir for the spawn form's recents picker + * (#24/#26). */ +export interface RecentDir { + cwd: string; + last_command: string; + last_used: IsoTimestamp; +} + +/** `GET /api/daemons/:id/recent-dirs` — a host's recent working dirs (#26). */ +export interface RecentDirs { + dirs: RecentDir[]; + truncated?: boolean; +} + +/** `GET /api/daemons/:id/gitroot?path=` — the enclosing repo toplevel of a path + * on a host, or absent when the path isn't inside a repo (#26). */ +export interface GitRoot { + root?: string; +} + export interface WorktreeSpec { base_repo: string; branch: string;