refactor(maestro): extract the spawn form so it can live outside the modal
This commit is contained in:
Miguel Palhas
@@ -0,0 +1,495 @@
|
||||
import { escapeHtml } from "./html.js";
|
||||
import { createSession, getDaemonInfo, recentDirs, gitRoot } from "./api.js";
|
||||
import { attachDirAutocomplete } from "./dirAutocomplete.js";
|
||||
import { generateName } from "./names.js";
|
||||
import type { CreateSessionRequest, RecentDir, Session, SpawnPreset } from "./types.js";
|
||||
import { abbreviateCwd, abbreviateFolderName } from "./types.js";
|
||||
|
||||
/** Seed values for the spawn form — used by "clone" to reopen with the same
|
||||
* cwd, command, and name as an existing session, and by draft panes to restore
|
||||
* their own half-filled state after a re-render. */
|
||||
export interface SpawnFormSeed {
|
||||
command?: string;
|
||||
cwd?: string;
|
||||
name?: string;
|
||||
worktreeEnabled?: boolean;
|
||||
worktreeBranch?: string;
|
||||
worktreeCleanup?: boolean;
|
||||
cwdRawVisible?: boolean;
|
||||
}
|
||||
|
||||
/** The form's current values, reported on every change so a caller (the draft
|
||||
* pane) can hang them off its layout leaf. */
|
||||
export interface SpawnFormValues {
|
||||
command: string;
|
||||
cwd: string;
|
||||
name: string;
|
||||
worktreeEnabled: boolean;
|
||||
worktreeBranch: string;
|
||||
worktreeCleanup: boolean;
|
||||
/** Whether the cwd lives in the raw text input (vs a picked recent row). */
|
||||
cwdRawVisible?: boolean;
|
||||
}
|
||||
|
||||
export function buildSpawnRequest(
|
||||
values: SpawnFormValues,
|
||||
baseRepo: string | null,
|
||||
): { req: CreateSessionRequest } | { error: string } {
|
||||
if (!values.cwd) return { error: "Pick a working directory." };
|
||||
if (!values.command) return { error: "Pick a command (or fill the custom command)." };
|
||||
|
||||
const metadata: Record<string, unknown> = {};
|
||||
const name = values.name.trim();
|
||||
if (name) metadata.name = name;
|
||||
|
||||
const req: CreateSessionRequest = {
|
||||
cwd: values.cwd,
|
||||
command: values.command,
|
||||
metadata,
|
||||
};
|
||||
|
||||
if (values.worktreeEnabled) {
|
||||
const branch = values.worktreeBranch.trim();
|
||||
if (!baseRepo) return { error: "Worktree needs a directory inside a git repository." };
|
||||
if (!branch) return { error: "Worktree requires a branch name." };
|
||||
req.worktree = {
|
||||
base_repo: baseRepo,
|
||||
branch,
|
||||
cleanup_on_kill: values.worktreeCleanup,
|
||||
};
|
||||
}
|
||||
|
||||
return { req };
|
||||
}
|
||||
|
||||
/** Built-ins used when the daemon's `/api/info` presets can't be fetched
|
||||
* (older daemon, transient error). Mirrors `maestro_config::builtin_presets`. */
|
||||
const FALLBACK_PRESETS: SpawnPreset[] = [
|
||||
{ id: "claude", label: "Claude", command: "claude" },
|
||||
{ id: "opencode", label: "opencode", command: "opencode" },
|
||||
{ id: "zsh", label: "Shell", command: "zsh" },
|
||||
{ id: "custom", label: "Custom…", command: "" },
|
||||
];
|
||||
|
||||
export interface SpawnFormHandle {
|
||||
el: HTMLFormElement;
|
||||
/** Remove global listeners (dir autocomplete) — call when unmounting. */
|
||||
destroy(): void;
|
||||
}
|
||||
|
||||
export interface SpawnFormOptions {
|
||||
seed?: SpawnFormSeed;
|
||||
/** Extra class(es) for the <form> root (e.g. `modal-body` in the modal). */
|
||||
class?: string;
|
||||
/** Fired whenever any value changes (input, tile pick, checkbox). */
|
||||
onChange?: (values: SpawnFormValues) => void;
|
||||
/** Called with the created session after a successful submit. */
|
||||
onSuccess: (session: Session) => void;
|
||||
}
|
||||
|
||||
/** The spawn form itself — preset tiles, recent-dirs picker, name, worktree.
|
||||
* Shared by the modal (`spawn.ts`) and inline draft panes (issue #57). */
|
||||
export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
|
||||
const prefill = opts.seed ?? {};
|
||||
|
||||
const form = document.createElement("form");
|
||||
form.className = `spawn-form${opts.class ? ` ${opts.class}` : ""}`;
|
||||
form.innerHTML = `
|
||||
<div class="field">
|
||||
<span class="field-label">Command</span>
|
||||
<div class="tile-row cmd-tiles"></div>
|
||||
<input class="raw-input cmd-raw" name="command_raw" type="text" hidden
|
||||
placeholder="bash -l" autocomplete="off" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<span class="field-label">Working directory</span>
|
||||
<div class="picker recents"></div>
|
||||
<div class="raw-wrap cwd-raw-wrap" hidden>
|
||||
<input class="raw-input cwd-raw" name="cwd_raw" type="text"
|
||||
placeholder="/home/user/project" inputmode="text" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<span class="field-label">Name</span>
|
||||
<div class="name-row">
|
||||
<input name="name" type="text" autocomplete="off" />
|
||||
<button type="button" class="btn btn-icon reroll" aria-label="Generate a new name" title="New name">↻</button>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="worktree">
|
||||
<legend>
|
||||
<label class="row-inline">
|
||||
<input type="checkbox" name="worktree_enabled" />
|
||||
Create git worktree
|
||||
</label>
|
||||
</legend>
|
||||
<p class="wt-hint" hidden></p>
|
||||
<div class="wt-body" hidden>
|
||||
<p class="wt-repo"></p>
|
||||
<label>
|
||||
Branch
|
||||
<input name="worktree_branch" type="text" placeholder="feat/foo" autocomplete="off" />
|
||||
</label>
|
||||
<label class="row-inline">
|
||||
<input type="checkbox" name="worktree_cleanup_on_kill" />
|
||||
Remove worktree when session is killed
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<p class="form-error" role="alert" aria-live="polite"></p>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Spawn</button>
|
||||
</div>
|
||||
`;
|
||||
// Field queries are scoped to this form instance — several forms can be
|
||||
// mounted at once (modal + draft panes), so ids would collide.
|
||||
|
||||
const errEl = form.querySelector(".form-error") as HTMLElement;
|
||||
const cmdTiles = form.querySelector(".cmd-tiles") as HTMLElement;
|
||||
const cmdRaw = form.querySelector(".cmd-raw") as HTMLInputElement;
|
||||
const recentsEl = form.querySelector(".recents") as HTMLElement;
|
||||
const cwdRawWrap = form.querySelector(".cwd-raw-wrap") as HTMLElement;
|
||||
const cwdRaw = form.querySelector(".cwd-raw") as HTMLInputElement;
|
||||
const wtEnabled = form.querySelector("input[name=worktree_enabled]") as HTMLInputElement;
|
||||
const wtHint = form.querySelector(".wt-hint") as HTMLElement;
|
||||
const wtBody = form.querySelector(".wt-body") as HTMLElement;
|
||||
const wtRepo = form.querySelector(".wt-repo") as HTMLElement;
|
||||
const branchInput = form.querySelector("input[name=worktree_branch]") as HTMLInputElement;
|
||||
const cleanupInput = form.querySelector(
|
||||
"input[name=worktree_cleanup_on_kill]",
|
||||
) as HTMLInputElement;
|
||||
const nameInput = form.querySelector("input[name=name]") as HTMLInputElement;
|
||||
|
||||
// ---- form state ------------------------------------------------------
|
||||
let homeDir = "";
|
||||
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
|
||||
// A seed'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 seedCwd: string | null = prefill.cwd ?? null;
|
||||
|
||||
const emit = () => {
|
||||
opts.onChange?.({
|
||||
command,
|
||||
cwd,
|
||||
name: nameInput.value,
|
||||
worktreeEnabled: wtEnabled.checked,
|
||||
worktreeBranch: branchInput.value,
|
||||
worktreeCleanup: cleanupInput.checked,
|
||||
cwdRawVisible: !cwdRawWrap.hidden,
|
||||
});
|
||||
};
|
||||
|
||||
// ---- name (also seeds the worktree branch) ---------------------------
|
||||
// The worktree branch defaults to the session name — including a clone's
|
||||
// prefilled name — and tracks it on reroll/edit until the user types their
|
||||
// own branch.
|
||||
let branchEdited = Boolean(prefill.worktreeBranch);
|
||||
const syncBranchToName = () => {
|
||||
if (!branchEdited) branchInput.value = nameInput.value;
|
||||
};
|
||||
nameInput.value = prefill.name ?? generateName();
|
||||
nameInput.addEventListener("input", () => {
|
||||
syncBranchToName();
|
||||
emit();
|
||||
});
|
||||
branchInput.addEventListener("input", () => {
|
||||
branchEdited = true;
|
||||
emit();
|
||||
});
|
||||
(form.querySelector(".reroll") as HTMLButtonElement).addEventListener("click", () => {
|
||||
nameInput.value = generateName();
|
||||
syncBranchToName();
|
||||
emit();
|
||||
});
|
||||
syncBranchToName(); // seed the branch from the initial name
|
||||
|
||||
// ---- 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;
|
||||
}
|
||||
for (const tile of cmdTiles.querySelectorAll(".tile")) {
|
||||
tile.classList.toggle("is-active", (tile as HTMLElement).dataset.id === id);
|
||||
}
|
||||
emit();
|
||||
}
|
||||
|
||||
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 = `<span class="tile-label">${escapeHtml(p.label)}</span>`;
|
||||
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();
|
||||
emit();
|
||||
}
|
||||
});
|
||||
|
||||
// Presets ride `/api/info`; render fallbacks immediately, then refine.
|
||||
renderCommandTiles();
|
||||
applyInitialCommand();
|
||||
|
||||
const infoLoad = getDaemonInfo()
|
||||
.then((info) => {
|
||||
homeDir = info.home_dir ?? "";
|
||||
if (info.presets?.length) {
|
||||
presets = info.presets;
|
||||
renderCommandTiles();
|
||||
applyInitialCommand();
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
/* keep fallbacks */
|
||||
});
|
||||
|
||||
// Pick a sensible starting command: a seed'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, focus = true): void {
|
||||
cwdRawWrap.hidden = false;
|
||||
if (prefillValue != null) cwd = prefillValue;
|
||||
cwdRaw.value = cwd;
|
||||
markActiveRecent(null);
|
||||
if (focus) {
|
||||
cwdRaw.focus();
|
||||
cwdRaw.select();
|
||||
}
|
||||
}
|
||||
|
||||
cwdRaw.addEventListener("input", () => {
|
||||
cwd = cwdRaw.value.trim();
|
||||
emit();
|
||||
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);
|
||||
emit();
|
||||
// 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<void> {
|
||||
recentsEl.replaceChildren(loadingRow());
|
||||
let dirs: RecentDir[] = [];
|
||||
try {
|
||||
dirs = (await recentDirs()).dirs ?? [];
|
||||
} catch {
|
||||
dirs = [];
|
||||
}
|
||||
recentsEl.replaceChildren();
|
||||
for (const dir of dirs) {
|
||||
recentsEl.appendChild(recentRow(dir));
|
||||
}
|
||||
// Persistent escape hatch + empty-history fallback.
|
||||
recentsEl.appendChild(otherDirRow());
|
||||
if (seedCwd) {
|
||||
// A seed sets the directory verbatim, regardless of recorded history.
|
||||
// `cwdRawVisible === false` marks a draft restore whose cwd came from a
|
||||
// picked recent row: keep the picker and don't steal focus. Otherwise
|
||||
// land focused in the raw input (clone / empty-history flows).
|
||||
if (prefill.cwdRawVisible === false) {
|
||||
cwd = seedCwd;
|
||||
cwdRaw.value = seedCwd;
|
||||
markActiveRecent(cwd);
|
||||
} else {
|
||||
showRawCwd(seedCwd);
|
||||
}
|
||||
seedCwd = null;
|
||||
} else if (dirs.length === 0) {
|
||||
// No history: default to raw input prefilled with the daemon's home dir.
|
||||
showRawCwd(homeDir);
|
||||
} else {
|
||||
cwdRawWrap.hidden = true;
|
||||
}
|
||||
// The seeded cwd is in place — a restored worktree can probe now.
|
||||
if (wtEnabled.checked) void probeGitRoot();
|
||||
}
|
||||
|
||||
function recentRow(dir: RecentDir): HTMLElement {
|
||||
const row = document.createElement("button");
|
||||
row.type = "button";
|
||||
row.className = "recent-row";
|
||||
row.dataset.cwd = dir.cwd;
|
||||
// Abbreviate exactly like the sidebar: home → `~`, then collapse leading
|
||||
// segments to initials (`~/g/n/maestro`). The full path stays in the tooltip
|
||||
// and `dataset.cwd` (what's actually submitted).
|
||||
const display = abbreviateFolderName(abbreviateCwd(dir.cwd, homeDir));
|
||||
row.innerHTML = `
|
||||
<span class="recent-dir" title="${escapeHtml(dir.cwd)}">${display}</span>
|
||||
<span class="recent-cmd">${escapeHtml(dir.last_command)}</span>`;
|
||||
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 = `<span class="recent-dir">Other directory…</span>`;
|
||||
row.addEventListener("click", () => showRawCwd(cwd || homeDir));
|
||||
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<void> {
|
||||
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(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", () => {
|
||||
emit();
|
||||
if (wtEnabled.checked) {
|
||||
probeGitRoot();
|
||||
} else {
|
||||
inferredBaseRepo = null;
|
||||
wtBody.hidden = true;
|
||||
wtHint.hidden = true;
|
||||
}
|
||||
});
|
||||
cleanupInput.addEventListener("change", emit);
|
||||
|
||||
// A seeded worktree restores its checkbox/body up front; its gitroot probe
|
||||
// waits for loadRecents to apply the seeded cwd.
|
||||
if (prefill.worktreeEnabled || prefill.worktreeBranch || prefill.worktreeCleanup) {
|
||||
wtEnabled.checked = Boolean(prefill.worktreeEnabled);
|
||||
if (prefill.worktreeBranch) branchInput.value = prefill.worktreeBranch;
|
||||
cleanupInput.checked = Boolean(prefill.worktreeCleanup);
|
||||
wtBody.hidden = !wtEnabled.checked;
|
||||
wtHint.hidden = true;
|
||||
emit();
|
||||
}
|
||||
|
||||
// Seed ordering: the raw-cwd application races the async info load (which
|
||||
// provides homeDir for the recents' abbreviations), so recents wait for it.
|
||||
void infoLoad.then(() => loadRecents());
|
||||
|
||||
// ---- live dir autocomplete on the raw cwd input (NAP-329) ------------
|
||||
const autocomplete = attachDirAutocomplete(cwdRaw);
|
||||
|
||||
// ---- submit ----------------------------------------------------------
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
errEl.textContent = "";
|
||||
const built = buildSpawnRequest(
|
||||
{
|
||||
command,
|
||||
cwd,
|
||||
name: nameInput.value,
|
||||
worktreeEnabled: wtEnabled.checked,
|
||||
worktreeBranch: branchInput.value,
|
||||
worktreeCleanup: cleanupInput.checked,
|
||||
},
|
||||
inferredBaseRepo,
|
||||
);
|
||||
if ("error" in built) {
|
||||
errEl.textContent = built.error;
|
||||
return;
|
||||
}
|
||||
|
||||
const submitBtn = form.querySelector("button[type=submit]") as HTMLButtonElement;
|
||||
submitBtn.disabled = true;
|
||||
try {
|
||||
const session = await createSession(built.req);
|
||||
opts.onSuccess(session);
|
||||
} catch (err) {
|
||||
errEl.textContent = (err as Error).message;
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
el: form,
|
||||
destroy() {
|
||||
autocomplete.destroy();
|
||||
form.remove();
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user