Miguel Palhas
6173c86694
The name field starts empty and the reroll is gone; the worktree branch keeps a default by borrowing one handle from /api/names. A card whose name the daemon generated renders dimmed until a first prompt settles it. Refs #131
921 lines
35 KiB
TypeScript
921 lines
35 KiB
TypeScript
import { escapeHtml } from "./html.js";
|
|
import {
|
|
createSession,
|
|
fetchBranches,
|
|
fetchNames,
|
|
getDaemonInfo,
|
|
projects as fetchProjects,
|
|
gitRoot,
|
|
} from "./api.js";
|
|
import { attachDirAutocomplete } from "./dirAutocomplete.js";
|
|
import { parentDir } from "./paths.js";
|
|
import { filterProjects, groupProjects, isStale, sortProjects } from "./projectList.js";
|
|
import type { ProjectGroup } from "./projectList.js";
|
|
import { abbreviateCwd } from "./types.js";
|
|
import type { BranchInfo, CreateSessionRequest, Project, Session, SpawnPreset } from "./types.js";
|
|
|
|
/** Where a worktree's branch comes from: freshly created (default) or picked
|
|
* from the repository's existing branches (#61). */
|
|
export type WorktreeBranchMode = "new" | "existing";
|
|
|
|
/** Seed values for the spawn form — used by "Spawn similar" to open the modal
|
|
* with the same cwd, command, and name as an existing session, and by the
|
|
* fast-forward fallback to pre-fill whatever it did resolve. */
|
|
export interface SpawnFormSeed {
|
|
command?: string;
|
|
cwd?: string;
|
|
name?: string;
|
|
worktreeEnabled?: boolean;
|
|
worktreeBranch?: string;
|
|
/** Whether the operator typed the branch themselves, rather than it having
|
|
* been auto-synced from the session name. Carried separately because the
|
|
* value alone cannot distinguish the two. */
|
|
worktreeBranchEdited?: boolean;
|
|
worktreeBranchMode?: WorktreeBranchMode;
|
|
cwdRawVisible?: boolean;
|
|
}
|
|
|
|
/** The form's current values, reported on every change. */
|
|
export interface SpawnFormValues {
|
|
command: string;
|
|
cwd: string;
|
|
name: string;
|
|
worktreeEnabled: boolean;
|
|
worktreeBranch: string;
|
|
worktreeBranchEdited: boolean;
|
|
/** "new" creates the branch; "existing" checks out a picked one (#61). */
|
|
worktreeBranchMode: WorktreeBranchMode;
|
|
/** 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 mode = values.worktreeBranchMode ?? "new";
|
|
const branch = values.worktreeBranch.trim();
|
|
if (!baseRepo) return { error: "Worktree needs a directory inside a git repository." };
|
|
if (!branch) {
|
|
return { error: mode === "existing" ? "Pick an existing branch." : "Worktree requires a branch name." };
|
|
}
|
|
req.worktree = {
|
|
base_repo: baseRepo,
|
|
branch,
|
|
// Existing-mode picks must check out as-is; the daemon creates
|
|
// anything else with `worktree add -b` (#56/#61).
|
|
create_branch: mode !== "existing",
|
|
};
|
|
}
|
|
|
|
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`.
|
|
* Exported for the fast-forward spawn's preset fallback (#67). */
|
|
export 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: "" },
|
|
];
|
|
|
|
/** Quiet period after raw-path typing before `/api/gitroot` fires (#74).
|
|
* Must stay equal to `GITROOT_PROBE_DEBOUNCE_MS` in
|
|
* crates/maestro-tui/src/draft.rs so both clients debounce alike. */
|
|
const GITROOT_PROBE_DEBOUNCE_MS = 250;
|
|
|
|
export interface SpawnFormHandle {
|
|
el: HTMLFormElement;
|
|
/** Remove global listeners (dir autocomplete) — call when unmounting. */
|
|
destroy(): void;
|
|
}
|
|
|
|
export interface SpawnFormOptions {
|
|
seed?: SpawnFormSeed;
|
|
/** 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, project picker, name, worktree.
|
|
* Mounted inside the spawn modal (spawnModal.ts). */
|
|
export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
|
|
const prefill = opts.seed ?? {};
|
|
|
|
const form = document.createElement("form");
|
|
form.className = "spawn-form";
|
|
form.innerHTML = `
|
|
<div class="field">
|
|
<span class="field-label">Project</span>
|
|
<input class="raw-input project-filter" type="text" placeholder="Filter projects…"
|
|
autocomplete="off" />
|
|
<div class="picker projects"></div>
|
|
<button type="button" class="project-other">Other directory…</button>
|
|
<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">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">Name</span>
|
|
<div class="name-row">
|
|
<input name="name" type="text" autocomplete="off"
|
|
placeholder="named after your first prompt" />
|
|
</div>
|
|
</div>
|
|
<fieldset class="worktree">
|
|
<button type="button" class="tree-folder-header wt-toggle" aria-expanded="false">
|
|
<span class="chevron">▾</span>
|
|
<span class="folder-name">Advanced options</span>
|
|
<span class="wt-summary"></span>
|
|
</button>
|
|
<div class="wt-collapsible" hidden>
|
|
<div class="field wt-step" hidden>
|
|
<span class="field-label">Worktree</span>
|
|
<div class="picker wt-choices"></div>
|
|
</div>
|
|
<label class="row-inline">
|
|
<input type="checkbox" name="worktree_enabled" />
|
|
Create git worktree
|
|
</label>
|
|
<p class="wt-hint" hidden></p>
|
|
<div class="wt-body" hidden>
|
|
<p class="wt-repo"></p>
|
|
<div class="wt-mode" role="radiogroup" aria-label="Branch source">
|
|
<label class="row-inline">
|
|
<input type="radio" name="worktree_branch_mode" value="new" />
|
|
New branch
|
|
</label>
|
|
<label class="row-inline">
|
|
<input type="radio" name="worktree_branch_mode" value="existing" />
|
|
Existing branch
|
|
</label>
|
|
</div>
|
|
<label class="wt-new-wrap">
|
|
New branch name
|
|
<input name="worktree_branch" type="text" placeholder="feat/foo" autocomplete="off" />
|
|
</label>
|
|
<label class="wt-exist-wrap" hidden>
|
|
Pick a branch
|
|
<select class="branch-select"></select>
|
|
</label>
|
|
</div>
|
|
</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 rather than by id, so a
|
|
// second form mounted before the first is torn down cannot collide with it.
|
|
|
|
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 projectsEl = form.querySelector(".projects") as HTMLElement;
|
|
const filterInput = form.querySelector(".project-filter") as HTMLInputElement;
|
|
const otherBtn = form.querySelector(".project-other") as HTMLButtonElement;
|
|
const wtStep = form.querySelector(".wt-step") as HTMLElement;
|
|
const wtChoices = form.querySelector(".wt-choices") 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 wtToggle = form.querySelector(".wt-toggle") as HTMLButtonElement;
|
|
const wtCollapsible = form.querySelector(".wt-collapsible") as HTMLElement;
|
|
const wtSummary = form.querySelector(".wt-summary") as HTMLElement;
|
|
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 modeRadios = [
|
|
...form.querySelectorAll<HTMLInputElement>("input[name=worktree_branch_mode]"),
|
|
];
|
|
const newWrap = form.querySelector(".wt-new-wrap") as HTMLElement;
|
|
const existWrap = form.querySelector(".wt-exist-wrap") as HTMLElement;
|
|
const branchInput = form.querySelector("input[name=worktree_branch]") as HTMLInputElement;
|
|
const branchSelect = form.querySelector(".branch-select") as HTMLSelectElement;
|
|
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 or the project scan
|
|
let probeToken = 0; // guards async gitroot probes against races
|
|
// A seed's cwd, applied once the (async) projects 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;
|
|
let branchMode: WorktreeBranchMode = prefill.worktreeBranchMode ?? "new";
|
|
let branchToken = 0; // guards async branch-list loads against races
|
|
// Branch list for the current cwd — refetched whenever the target changes.
|
|
let branchCache: { cwd: string; branches: BranchInfo[] } | null = null;
|
|
|
|
// `emit` stays silent until the initial load settles and goes silent again
|
|
// once the form is destroyed. Construction runs with `cwd === ""` and the
|
|
// seed is only restored two fetches later, so emitting in between would
|
|
// report blank values as if the operator had cleared the form.
|
|
let ready = false;
|
|
let destroyed = false;
|
|
const branchValue = () => (branchMode === "existing" ? branchSelect.value : branchInput.value);
|
|
const emit = () => {
|
|
if (!ready || destroyed) return;
|
|
opts.onChange?.({
|
|
command,
|
|
cwd,
|
|
name: nameInput.value,
|
|
worktreeEnabled: wtEnabled.checked,
|
|
worktreeBranch: branchValue(),
|
|
worktreeBranchEdited: branchEdited,
|
|
worktreeBranchMode: branchMode,
|
|
cwdRawVisible: !cwdRawWrap.hidden,
|
|
});
|
|
};
|
|
|
|
// ---- name (also seeds the worktree branch) ---------------------------
|
|
// The field starts empty (#131): a session the operator does not name is
|
|
// named by the daemon — a provisional handle at spawn, replaced by one
|
|
// derived from the first prompt. Typing here opts out of all of that, and
|
|
// still seeds the worktree branch as it always did.
|
|
// True only once the operator types their own branch. It cannot be inferred
|
|
// from the seed: in "new" mode `emit()` publishes the auto-synced session
|
|
// name, so seeding from it froze the branch after any form rebuild
|
|
// (#67 review). `worktreeBranchEdited` is carried explicitly instead.
|
|
let branchEdited = Boolean(prefill.worktreeBranchEdited);
|
|
// A cleared name leaves the branch on its last value rather than blanking
|
|
// it: the branch still has to be something, and the session name no longer
|
|
// has to be anything.
|
|
const syncBranchToName = () => {
|
|
if (!branchEdited && branchMode === "new" && nameInput.value) {
|
|
branchInput.value = nameInput.value;
|
|
}
|
|
};
|
|
|
|
nameInput.value = prefill.name ?? "";
|
|
nameInput.addEventListener("input", () => {
|
|
syncBranchToName();
|
|
emit();
|
|
});
|
|
branchInput.addEventListener("input", () => {
|
|
branchEdited = true;
|
|
emit();
|
|
});
|
|
syncBranchToName(); // seed the branch from a clone's prefilled name
|
|
// The branch field still needs a default, and the name field no longer
|
|
// provides one, so an unnamed spawn borrows one handle from `GET /api/names`
|
|
// (#53) for the branch alone.
|
|
if (!branchInput.value && !branchEdited && branchMode === "new") {
|
|
void fetchNames(1)
|
|
.then((batch) => {
|
|
const handle = batch.names[0];
|
|
if (destroyed || !handle) return;
|
|
if (branchInput.value || branchEdited || branchMode !== "new") return;
|
|
branchInput.value = handle;
|
|
emit();
|
|
})
|
|
.catch(() => {
|
|
/* the operator types their own branch */
|
|
});
|
|
}
|
|
|
|
// ---- command tiles ---------------------------------------------------
|
|
// `focus` is false for the two initial applications (construction, and again
|
|
// when `/api/info` resolves): the form must not grab the caret out from
|
|
// under the operator seconds after it mounts.
|
|
function selectPreset(id: string, focus = true): 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();
|
|
if (focus) 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();
|
|
}
|
|
|
|
/** Re-highlight the operator's already-picked tile after `renderCommandTiles`
|
|
* rebuilds the row from scratch (new tiles carry no `is-active` class) —
|
|
* without touching `command`, since that was already settled. */
|
|
function reapplyActiveTile(): void {
|
|
for (const tile of cmdTiles.querySelectorAll(".tile")) {
|
|
tile.classList.toggle("is-active", (tile as HTMLElement).dataset.id === selectedPresetId);
|
|
}
|
|
}
|
|
|
|
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", () => {
|
|
commandTouched = true;
|
|
selectPreset(p.id);
|
|
});
|
|
cmdTiles.appendChild(tile);
|
|
}
|
|
}
|
|
|
|
// Set once the operator picks a tile or types a custom command — guards
|
|
// `applyInitialCommand()` the same way `nameTouched` guards a late name
|
|
// batch: a late `/api/info` resolution must never overwrite a field the
|
|
// operator has already touched (#76).
|
|
let commandTouched = false;
|
|
|
|
cmdRaw.addEventListener("input", () => {
|
|
if (selectedPresetId === "custom" || presets.find((p) => p.id === selectedPresetId)?.command === "") {
|
|
commandTouched = true;
|
|
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();
|
|
if (commandTouched) {
|
|
reapplyActiveTile();
|
|
} else {
|
|
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, false);
|
|
} else {
|
|
const custom = presets.find((p) => p.command === "");
|
|
cmdRaw.value = wanted;
|
|
selectPreset(custom ? custom.id : "custom", false);
|
|
command = wanted;
|
|
}
|
|
return;
|
|
}
|
|
const first = presets.find((p) => p.command !== "");
|
|
if (first) selectPreset(first.id, false);
|
|
}
|
|
|
|
// ---- working-directory picker (#95) ----------------------------------
|
|
// Two steps, and the TUI mirror (#96) must match these rules verbatim:
|
|
// 1. Step one is one box per repository (name, then its parent directory).
|
|
// A worktree is a box only when its main checkout is missing from the
|
|
// scan.
|
|
// 2. The filter keeps a repository when the query matches it or any of its
|
|
// worktrees, so a worktree name still finds its box.
|
|
// 3. Picking a box reveals step two: "+ new", then that repository's
|
|
// worktrees newest-first. "Other directory…" clears both steps.
|
|
// 4. "+ new" is the default selection — except on a box that is itself a
|
|
// linked worktree, which defaults to that worktree.
|
|
// 5. "+ new" means create: cwd is the repository, create-worktree on.
|
|
// An existing worktree means run in it: cwd is that worktree,
|
|
// create-worktree OFF. The daemon never adopts (docs/WORKTREES.md), so
|
|
// these are separate acts — #91's rule, now an explicit choice.
|
|
// 6. Neither step probes /api/gitroot; the scan already reports repository
|
|
// membership. Only the free-text hatch pays for a probe.
|
|
// 7. Neither step touches the command: the directory and what runs in it
|
|
// are independent choices.
|
|
|
|
/** "new" (create a worktree) or the path of an existing worktree to run in. */
|
|
type WorktreeChoice = "new" | string;
|
|
|
|
let discovered: Project[] = []; // daemon snapshot, daemon-sorted
|
|
let groups: ProjectGroup[] = []; // rebuilt on every render
|
|
let selectedGroup: ProjectGroup | null = null;
|
|
let worktreeChoice: WorktreeChoice = "new";
|
|
|
|
function showRawCwd(prefillValue?: string, focus = true): void {
|
|
cwdRawWrap.hidden = false;
|
|
if (prefillValue != null) cwd = prefillValue;
|
|
cwdRaw.value = cwd;
|
|
clearProjectSelection();
|
|
if (focus) {
|
|
cwdRaw.focus();
|
|
cwdRaw.select();
|
|
}
|
|
// Both the visibility and the directory are draft state: without this a
|
|
// render before the operator types snaps back to the project picker.
|
|
emit();
|
|
}
|
|
|
|
cwdRaw.addEventListener("input", () => {
|
|
cwd = cwdRaw.value.trim();
|
|
branchCache = null;
|
|
emit();
|
|
if (wtEnabled.checked) scheduleGitRootProbe();
|
|
});
|
|
|
|
/** Every worktree of a group, including the group's own box when the scan
|
|
* found no main checkout to nest it under. */
|
|
function worktreesOf(group: ProjectGroup): Project[] {
|
|
return [group.main, ...group.worktrees].filter((p) => p.is_worktree);
|
|
}
|
|
|
|
function markActiveBox(): void {
|
|
const active = selectedGroup?.main.path ?? null;
|
|
for (const box of projectsEl.querySelectorAll(".project-box")) {
|
|
box.classList.toggle("is-active", (box as HTMLElement).dataset.cwd === active);
|
|
}
|
|
}
|
|
|
|
function markActiveChoice(): void {
|
|
for (const btn of wtChoices.querySelectorAll(".wt-choice")) {
|
|
const el = btn as HTMLElement;
|
|
const value = el.dataset.kind === "new" ? "new" : (el.dataset.cwd ?? "");
|
|
el.classList.toggle("is-active", value === worktreeChoice);
|
|
}
|
|
}
|
|
|
|
function clearProjectSelection(): void {
|
|
selectedGroup = null;
|
|
worktreeChoice = "new";
|
|
wtChoices.replaceChildren();
|
|
wtStep.hidden = true;
|
|
markActiveBox();
|
|
}
|
|
|
|
function selectProject(group: ProjectGroup): void {
|
|
selectedGroup = group;
|
|
cwdRawWrap.hidden = true;
|
|
renderWorktreeChoices(group);
|
|
markActiveBox();
|
|
// Rule 4: a box that is itself a linked worktree defaults to running there.
|
|
applyWorktreeChoice(group.main.is_worktree ? group.main.path : "new");
|
|
}
|
|
|
|
function applyWorktreeChoice(choice: WorktreeChoice): void {
|
|
const group = selectedGroup;
|
|
if (!group) return;
|
|
const target =
|
|
choice === "new" ? group.main : worktreesOf(group).find((p) => p.path === choice);
|
|
if (!target) return;
|
|
worktreeChoice = choice;
|
|
cwd = target.path;
|
|
branchCache = null;
|
|
markActiveChoice();
|
|
if (choice === "new") {
|
|
wtEnabled.checked = true;
|
|
updateWtSummary();
|
|
applyProjectRepo(group.main.base_repo ?? group.main.path);
|
|
} else {
|
|
wtEnabled.checked = false;
|
|
updateWtSummary();
|
|
inferredBaseRepo = null;
|
|
wtBody.hidden = true;
|
|
wtHint.hidden = true;
|
|
}
|
|
emit();
|
|
}
|
|
|
|
/** Groups with at least one member (itself or a worktree) matching `query`. */
|
|
function visibleGroups(query: string): ProjectGroup[] {
|
|
return groups.filter((g) => filterProjects([g.main, ...g.worktrees], query).length > 0);
|
|
}
|
|
|
|
function renderProjects(): void {
|
|
projectsEl.replaceChildren();
|
|
groups = groupProjects(sortProjects(discovered, new Date()));
|
|
const visible = visibleGroups(filterInput.value);
|
|
for (const group of visible) projectsEl.appendChild(projectBox(group));
|
|
if (discovered.length > 0 && visible.length === 0) {
|
|
const empty = document.createElement("p");
|
|
empty.className = "picker-empty";
|
|
empty.textContent = "No projects match.";
|
|
projectsEl.appendChild(empty);
|
|
}
|
|
markActiveBox();
|
|
}
|
|
|
|
filterInput.addEventListener("input", renderProjects);
|
|
otherBtn.addEventListener("click", () => showRawCwd(cwd || homeDir));
|
|
|
|
async function loadProjects(): Promise<void> {
|
|
projectsEl.replaceChildren(loadingRow());
|
|
try {
|
|
discovered = await fetchProjects();
|
|
} catch {
|
|
discovered = [];
|
|
}
|
|
if (destroyed) return;
|
|
renderProjects();
|
|
if (seedCwd) {
|
|
// A seed sets the directory verbatim, regardless of what the scan found.
|
|
// `cwdRawVisible === false` marks a draft restore whose cwd came from a
|
|
// picked box: keep the picker and don't steal focus. Otherwise land
|
|
// focused in the raw input (clone / no-match flows).
|
|
if (prefill.cwdRawVisible === false) {
|
|
cwd = seedCwd;
|
|
cwdRaw.value = seedCwd;
|
|
// Restoring must not touch the worktree toggle — the seed carries it.
|
|
// A path no box matches (the project is gone, or the scan never saw
|
|
// it) falls back to the raw input showing that path: an empty picker
|
|
// with an invisible cwd reads as a form that lost the directory.
|
|
if (!restoreSelection(seedCwd)) showRawCwd(seedCwd, false);
|
|
} else {
|
|
showRawCwd(seedCwd, false);
|
|
}
|
|
seedCwd = null;
|
|
} else if (discovered.length === 0) {
|
|
// Nothing discovered yet: default to raw input prefilled with home.
|
|
showRawCwd(homeDir, false);
|
|
} else {
|
|
cwdRawWrap.hidden = true;
|
|
}
|
|
// Everything seeded: the form may publish from here on.
|
|
ready = true;
|
|
resolveBaseRepo();
|
|
emit();
|
|
}
|
|
|
|
/** Put the two steps back on a restored draft's cwd, without re-running the
|
|
* side effects of a fresh pick. */
|
|
function restoreSelection(path: string): boolean {
|
|
for (const group of groups) {
|
|
const wt = worktreesOf(group).find((p) => p.path === path);
|
|
const choice: WorktreeChoice | null =
|
|
wt ? wt.path : group.main.path === path ? "new" : null;
|
|
if (choice === null) continue;
|
|
selectedGroup = group;
|
|
worktreeChoice = choice;
|
|
renderWorktreeChoices(group);
|
|
markActiveChoice();
|
|
markActiveBox();
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function projectBox(group: ProjectGroup): HTMLElement {
|
|
const project = group.main;
|
|
const box = document.createElement("button");
|
|
box.type = "button";
|
|
box.className = `project-box${isStale(project, new Date()) ? " is-stale" : ""}`;
|
|
box.dataset.cwd = project.path;
|
|
const trees = worktreesOf(group).length;
|
|
// The parent directory only — the last segment is the name line above it.
|
|
// Unabbreviated beyond `~`, since the stem is what tells two projects
|
|
// sharing a basename apart (#95).
|
|
const parent = abbreviateCwd(parentDir(project.path), homeDir);
|
|
const meta = trees > 0 ? `${trees} worktree${trees === 1 ? "" : "s"}` : "";
|
|
box.innerHTML = `
|
|
<span class="project-name">${escapeHtml(project.name)}</span>
|
|
<span class="project-path">${escapeHtml(parent)}</span>
|
|
<span class="project-meta">${escapeHtml(meta)}</span>`;
|
|
box.addEventListener("click", () => selectProject(group));
|
|
return box;
|
|
}
|
|
|
|
function renderWorktreeChoices(group: ProjectGroup): void {
|
|
wtChoices.replaceChildren();
|
|
wtChoices.appendChild(
|
|
choiceButton("new", "+ new", `new worktree of ${group.main.name}`),
|
|
);
|
|
for (const wt of worktreesOf(group)) {
|
|
wtChoices.appendChild(choiceButton(wt.path, wt.name, wt.path));
|
|
}
|
|
wtStep.hidden = false;
|
|
}
|
|
|
|
function choiceButton(choice: WorktreeChoice, label: string, sub: string): HTMLElement {
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = `wt-choice${choice === "new" ? " wt-choice-new" : ""}`;
|
|
btn.dataset.kind = choice === "new" ? "new" : "existing";
|
|
if (choice !== "new") btn.dataset.cwd = choice;
|
|
btn.innerHTML = `
|
|
<span class="wt-choice-name">${escapeHtml(label)}</span>
|
|
<span class="wt-choice-sub">${escapeHtml(sub)}</span>`;
|
|
btn.addEventListener("click", () => applyWorktreeChoice(choice));
|
|
return btn;
|
|
}
|
|
|
|
function loadingRow(): HTMLElement {
|
|
const p = document.createElement("p");
|
|
p.className = "picker-loading";
|
|
p.textContent = "Loading projects…";
|
|
return p;
|
|
}
|
|
|
|
// ---- worktree: disclosure (#93), reuses the sidebar's folder-header ---
|
|
let advancedCollapsed = true;
|
|
function setAdvancedCollapsed(collapsed: boolean): void {
|
|
advancedCollapsed = collapsed;
|
|
wtToggle.setAttribute("aria-expanded", String(!collapsed));
|
|
wtCollapsible.hidden = collapsed;
|
|
}
|
|
function updateWtSummary(): void {
|
|
wtSummary.textContent = wtEnabled.checked ? "creates a worktree" : "no worktree";
|
|
}
|
|
wtToggle.addEventListener("click", () => setAdvancedCollapsed(!advancedCollapsed));
|
|
|
|
// ---- worktree (branch-only; base_repo inferred via scan or /gitroot) --
|
|
// The project scan already reports repo membership, so a picked project
|
|
// resolves its base repo locally (#61); only the free-text escape hatch
|
|
// pays for a /api/gitroot probe.
|
|
function applyProjectRepo(repo: string): void {
|
|
inferredBaseRepo = repo;
|
|
branchCache = null;
|
|
wtHint.hidden = true;
|
|
wtBody.hidden = false;
|
|
wtRepo.textContent = `repo: ${repo}`;
|
|
if (branchMode === "existing") void loadBranches();
|
|
}
|
|
|
|
/** Decide how the worktree section describes the current target. Called
|
|
* once the initial load has settled `cwd`. */
|
|
function resolveBaseRepo(): void {
|
|
// Nothing to resolve when the operator turned the worktree off — the
|
|
// section would otherwise rebuild expanded under an unchecked box, and
|
|
// fire a `/api/gitroot` probe for a worktree nobody asked for
|
|
// (#67 review).
|
|
if (!wtEnabled.checked) {
|
|
wtBody.hidden = true;
|
|
wtHint.hidden = true;
|
|
inferredBaseRepo = null;
|
|
return;
|
|
}
|
|
if (!cwd) {
|
|
inferredBaseRepo = null;
|
|
wtBody.hidden = true;
|
|
wtHint.hidden = false;
|
|
wtHint.textContent = "Choose a working directory first.";
|
|
return;
|
|
}
|
|
const project = discovered.find((p) => p.path === cwd);
|
|
if (project) {
|
|
applyProjectRepo(project.base_repo ?? project.path);
|
|
return;
|
|
}
|
|
scheduleGitRootProbe();
|
|
}
|
|
|
|
// Every keystroke resets this timer, so a burst of typing issues one
|
|
// request once the operator pauses. `probeToken` inside probeGitRoot still
|
|
// owns ordering: a scheduled probe that fires after a newer one started
|
|
// loses the token race and is dropped.
|
|
let probeTimer: number | undefined;
|
|
function scheduleGitRootProbe(): void {
|
|
window.clearTimeout(probeTimer);
|
|
probeTimer = window.setTimeout(() => {
|
|
probeTimer = undefined;
|
|
void probeGitRoot();
|
|
}, GITROOT_PROBE_DEBOUNCE_MS);
|
|
}
|
|
|
|
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) {
|
|
applyProjectRepo(root);
|
|
} else {
|
|
inferredBaseRepo = null;
|
|
// Publish the untick too, or the next render seeds the box checked with
|
|
// no inferred repo and submitting fails.
|
|
wtEnabled.checked = false;
|
|
updateWtSummary();
|
|
emit();
|
|
wtBody.hidden = true;
|
|
wtHint.hidden = false;
|
|
wtHint.textContent = "Not inside a git repository — pick a dir in a repo to use a worktree.";
|
|
}
|
|
}
|
|
|
|
// ---- existing-branch picker (#61) -------------------------------------
|
|
function setBranchMode(mode: WorktreeBranchMode): void {
|
|
branchMode = mode;
|
|
for (const radio of modeRadios) radio.checked = radio.value === mode;
|
|
newWrap.hidden = mode !== "new";
|
|
existWrap.hidden = mode !== "existing";
|
|
if (mode === "existing") void loadBranches();
|
|
emit();
|
|
}
|
|
|
|
/** Fetch the target repo's branches once per cwd. Like every async load in
|
|
* this form: token-guarded, and nothing touches the DOM (or emits) after
|
|
* destroy() — a late response into a closed modal would throw. */
|
|
async function loadBranches(): Promise<void> {
|
|
if (!cwd || !inferredBaseRepo) return;
|
|
const token = ++branchToken;
|
|
if (branchCache?.cwd !== cwd) {
|
|
const target = cwd;
|
|
let branches: BranchInfo[];
|
|
try {
|
|
branches = await fetchBranches(target);
|
|
} catch {
|
|
return; // picker just stays empty; "new" mode still works
|
|
}
|
|
if (destroyed || token !== branchToken || cwd !== target) return;
|
|
branchCache = { cwd: target, branches };
|
|
}
|
|
renderBranchOptions();
|
|
}
|
|
|
|
function renderBranchOptions(): void {
|
|
if (destroyed) return;
|
|
const branches = branchCache?.cwd === cwd ? branchCache.branches : [];
|
|
branchSelect.replaceChildren();
|
|
const opt = (label: string, value: string) => {
|
|
const o = document.createElement("option");
|
|
o.textContent = label;
|
|
o.value = value;
|
|
return o;
|
|
};
|
|
if (branches.length === 0) {
|
|
branchSelect.appendChild(opt("No local branches found.", ""));
|
|
return;
|
|
}
|
|
for (const b of branches) {
|
|
// A branch that is already checked out anywhere stays visible but
|
|
// unpickable — git refuses a second checkout. That includes the main
|
|
// checkout's own HEAD, which is commonly `main` and would otherwise be
|
|
// the default pick, making every existing-branch spawn fail (#54 review).
|
|
const held = b.worktree ?? (b.is_head ? "the main checkout" : null);
|
|
const o = opt(held ? `${b.name} — held by ${held}` : b.name, b.name);
|
|
o.disabled = held !== null;
|
|
o.title = held ?? "";
|
|
branchSelect.appendChild(o);
|
|
}
|
|
}
|
|
|
|
for (const radio of modeRadios) {
|
|
radio.addEventListener("change", () => {
|
|
if (radio.checked) setBranchMode(radio.value as WorktreeBranchMode);
|
|
});
|
|
}
|
|
branchSelect.addEventListener("change", () => emit());
|
|
|
|
wtEnabled.addEventListener("change", () => {
|
|
updateWtSummary();
|
|
emit();
|
|
if (wtEnabled.checked) {
|
|
resolveBaseRepo();
|
|
} else {
|
|
inferredBaseRepo = null;
|
|
wtBody.hidden = true;
|
|
wtHint.hidden = true;
|
|
}
|
|
});
|
|
|
|
// The toggle defaults ON (#61): the operator almost always wants a
|
|
// worktree, and every non-repo target unticks it via the gitroot probe.
|
|
wtEnabled.checked = prefill.worktreeEnabled ?? true;
|
|
updateWtSummary();
|
|
if (prefill.worktreeBranch) branchInput.value = prefill.worktreeBranch;
|
|
setBranchMode(branchMode);
|
|
|
|
// Seed ordering: the raw-cwd application races the async info load (which
|
|
// provides homeDir for the projects' abbreviations), so projects wait for it.
|
|
void infoLoad.then(() => loadProjects());
|
|
|
|
// ---- live dir autocomplete on the raw cwd input (NAP-329) ------------
|
|
const autocomplete = attachDirAutocomplete(cwdRaw);
|
|
|
|
// ---- Enter submits from anywhere (#97) --------------------------------
|
|
// A project-box/wt-choice that isn't yet the active pick takes the Enter to
|
|
// choose it instead; the next Enter, now that it's active, submits.
|
|
// dirAutocomplete's own Enter (accept the highlight) already preventDefaults
|
|
// when it handles the key, which the `e.defaultPrevented` guard defers to.
|
|
// The worktree checkbox keeps Enter as a toggle (TUI parity: `WorktreeToggle`
|
|
// does the same) rather than folding it into the blanket-submit rule below.
|
|
form.addEventListener("keydown", (e) => {
|
|
if (e.key !== "Enter" || e.defaultPrevented) return;
|
|
const target = e.target as HTMLElement;
|
|
|
|
if (target === wtEnabled) {
|
|
e.preventDefault();
|
|
wtEnabled.checked = !wtEnabled.checked;
|
|
wtEnabled.dispatchEvent(new Event("change"));
|
|
return;
|
|
}
|
|
|
|
if (target instanceof HTMLButtonElement) {
|
|
if (!target.classList.contains("project-box") && !target.classList.contains("wt-choice")) return;
|
|
e.preventDefault();
|
|
if (!target.classList.contains("is-active")) {
|
|
target.click();
|
|
return;
|
|
}
|
|
form.requestSubmit();
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
if (target === filterInput) {
|
|
// Resolve the filter to a project only when the current pick isn't one
|
|
// of the matches: a filter typed past it means the operator moved on,
|
|
// while a pick that still matches (including the seeded one the form
|
|
// opens with) keeps its worktree choice.
|
|
const visible = visibleGroups(filterInput.value);
|
|
const stillMatches =
|
|
selectedGroup != null && visible.some((g) => g.main.path === selectedGroup?.main.path);
|
|
if (!stillMatches && visible[0]) selectProject(visible[0]);
|
|
}
|
|
form.requestSubmit();
|
|
});
|
|
|
|
// ---- submit ----------------------------------------------------------
|
|
form.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
errEl.textContent = "";
|
|
const built = buildSpawnRequest(
|
|
{
|
|
command,
|
|
cwd,
|
|
name: nameInput.value,
|
|
worktreeEnabled: wtEnabled.checked,
|
|
worktreeBranch: branchValue(),
|
|
worktreeBranchEdited: branchEdited,
|
|
worktreeBranchMode: branchMode,
|
|
},
|
|
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() {
|
|
destroyed = true;
|
|
window.clearTimeout(probeTimer);
|
|
autocomplete.destroy();
|
|
form.remove();
|
|
},
|
|
};
|
|
}
|