nntrivi2001
8fcef5a10b
Creation is the only point the UI could ever set a lane's template, and it never offered the choice — so every lane added from "+ Add lane" was born on `default` and rendered an 8-node map for a 16-node workflow, with no screen able to change it afterwards. That is the defect that made the ship-feature template unreachable from the browser. The modal now shows a *Pipeline template* select fed by `GET /api/lanes/pipelines`, labelled with each template's node count so the consequence of the choice is visible. A failed fetch degrades to a `default` option rather than blocking lane creation. `pipeline` was already accepted by `POST /api/lanes` but silently dropped by `/ensure` and `/worktree`, which build their own createLane payloads; both now pass it through, and both map `EBADPIPELINE` to 400 like `EBADCWD`.
463 lines
17 KiB
TypeScript
463 lines
17 KiB
TypeScript
/**
|
||
* @file AddLaneModal.tsx
|
||
* @description The "+ Add lane" flow, in one of two modes chosen with a
|
||
* segmented toggle: "Repo" adopts an existing directory as-is via
|
||
* `POST /api/lanes/ensure` (no worktree, no branch — the right mode for a
|
||
* main repo you want stage detection on); "Worktree" provisions a
|
||
* dashboard-managed git worktree via `POST /api/lanes/worktree` with a
|
||
* manually-typed branch name. Either mode's path field can be filled by
|
||
* typing, by the CwdAutocomplete suggestions, or by browsing
|
||
* (`FolderBrowseModal`) — a native folder picker cannot hand a web page an
|
||
* absolute filesystem path, so browsing is server-backed instead. The
|
||
* worktree lane returned is `status: "provisioning"`: the route answers
|
||
* before the actual `git worktree add` runs, so this component polls
|
||
* `GET /api/lanes/:id` until that finishes before running the auto-setup
|
||
* calls against a cwd that must actually exist on disk first.
|
||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||
*/
|
||
|
||
import { useCallback, useEffect, useRef, useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { FolderOpen } from "lucide-react";
|
||
import { ConfirmModal } from "../ConfirmModal";
|
||
import { CwdAutocomplete } from "../run/RunSetup";
|
||
import { FolderBrowseModal } from "./FolderBrowseModal";
|
||
import { api } from "../../lib/api";
|
||
import type { CwdSuggestion } from "../../lib/api";
|
||
import type { Lane } from "../../lib/types";
|
||
|
||
/** Polls the lane until the background `git worktree add` finishes (status
|
||
* leaves "provisioning"), or gives up after `timeoutMs`. Returns the final
|
||
* lane record, or `null` on timeout. */
|
||
async function waitForProvisioned(
|
||
laneId: number,
|
||
{ intervalMs = 500, timeoutMs = 30000 } = {}
|
||
): Promise<Lane | null> {
|
||
const deadline = Date.now() + timeoutMs;
|
||
for (;;) {
|
||
const { lane } = await api.lanes.get(laneId);
|
||
if (lane.status !== "provisioning") return lane;
|
||
if (Date.now() >= deadline) return null;
|
||
await new Promise((r) => window.setTimeout(r, intervalMs));
|
||
}
|
||
}
|
||
|
||
/** One segment of a two-way inline choice, styled to match RunSetup's `Seg`. */
|
||
function Seg({
|
||
active,
|
||
label,
|
||
title,
|
||
onClick,
|
||
}: {
|
||
active: boolean;
|
||
label: string;
|
||
title?: string;
|
||
onClick: () => void;
|
||
}) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={onClick}
|
||
title={title}
|
||
aria-pressed={active}
|
||
className={`flex-1 rounded px-2 py-1 text-xs font-medium transition-colors ${
|
||
active
|
||
? "bg-accent text-white shadow-sm"
|
||
: "text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
|
||
}`}
|
||
>
|
||
{label}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
export function AddLaneModal({
|
||
open,
|
||
onClose,
|
||
onAdded,
|
||
cwdSuggestions,
|
||
}: {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
/** Called with the newly created (possibly still-provisioning) lane. */
|
||
onAdded: (lane: Lane) => void;
|
||
/** The same suggestion list the Run form already fetched (dashboard cwd,
|
||
* home, recently-used paths) — reused rather than fetched a second time. */
|
||
cwdSuggestions: CwdSuggestion[];
|
||
}) {
|
||
const { t } = useTranslation(["lanes"]);
|
||
const [mode, setMode] = useState<"repo" | "worktree">("worktree");
|
||
const [sourceRepo, setSourceRepo] = useState("");
|
||
const [title, setTitle] = useState("");
|
||
const [branch, setBranch] = useState("");
|
||
const [branches, setBranches] = useState<string[] | null>(null);
|
||
const [base, setBase] = useState("");
|
||
const [pipeline, setPipeline] = useState("default");
|
||
const [pipelines, setPipelines] = useState<{ id: string; name: string; nodes: unknown[] }[]>([]);
|
||
const [branchesError, setBranchesError] = useState<string | null>(null);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [browseOpen, setBrowseOpen] = useState(false);
|
||
const [setupResult, setSetupResult] = useState<{
|
||
profile: "scaffolded" | "skipped" | "failed";
|
||
agents: "ok" | "failed";
|
||
mcp: "ok" | "failed";
|
||
} | null>(null);
|
||
|
||
const reset = () => {
|
||
setMode("worktree");
|
||
setSourceRepo("");
|
||
setTitle("");
|
||
setBranch("");
|
||
setBranches(null);
|
||
setBase("");
|
||
setPipeline("default");
|
||
setBranchesError(null);
|
||
setError(null);
|
||
setBusy(false);
|
||
setSetupResult(null);
|
||
};
|
||
|
||
// The template a lane is created with is the ONLY chance to get it right
|
||
// from here: nothing else in the UI can change it afterwards, so a lane
|
||
// silently born on `default` renders an 8-node map for a 16-node workflow.
|
||
// Fetched on open (templates are file-backed and can change between opens).
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
let cancelled = false;
|
||
api.lanes
|
||
.pipelines()
|
||
.then((r) => {
|
||
if (!cancelled) setPipelines(r.pipelines);
|
||
})
|
||
.catch(() => {
|
||
// Quiet: the select just falls back to the single `default` option
|
||
// below, and the lane still gets created.
|
||
if (!cancelled) setPipelines([]);
|
||
});
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [open]);
|
||
|
||
// Look up the repo's branches once the path settles - debounced so every
|
||
// keystroke while typing a path doesn't fire a request against a path that
|
||
// isn't finished yet. Worktree mode only: "Repo" mode adopts as-is and
|
||
// never forks a branch.
|
||
const lookedUpFor = useRef<string>("");
|
||
useEffect(() => {
|
||
if (mode !== "worktree") return;
|
||
const path = sourceRepo.trim();
|
||
if (!path) {
|
||
setBranches(null);
|
||
setBase("");
|
||
setBranchesError(null);
|
||
return;
|
||
}
|
||
const timer = window.setTimeout(async () => {
|
||
lookedUpFor.current = path;
|
||
try {
|
||
const r = await api.lanes.branches(path);
|
||
if (lookedUpFor.current !== path) return; // a newer path superseded this one
|
||
setBranches(r.branches);
|
||
setBase(r.current || r.branches[0] || "");
|
||
setBranchesError(null);
|
||
} catch {
|
||
if (lookedUpFor.current !== path) return;
|
||
// Not yet a valid repo path (still being typed, or genuinely wrong) -
|
||
// quiet by design, the same way CwdAutocomplete never errors either.
|
||
setBranches(null);
|
||
setBase("");
|
||
setBranchesError(t("addLaneNotARepo"));
|
||
}
|
||
}, 300);
|
||
return () => window.clearTimeout(timer);
|
||
}, [mode, sourceRepo, t]);
|
||
|
||
const submit = async () => {
|
||
const repo = sourceRepo.trim();
|
||
const name = title.trim();
|
||
if (!repo) return;
|
||
setBusy(true);
|
||
setError(null);
|
||
|
||
if (mode === "repo") {
|
||
try {
|
||
const result = await api.lanes.ensure({
|
||
cwd: repo,
|
||
title: name || undefined,
|
||
pipeline,
|
||
});
|
||
onAdded(result.lane);
|
||
reset();
|
||
onClose();
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : String(err));
|
||
setBusy(false);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (!branches || !name || !branch.trim()) return;
|
||
try {
|
||
const result = await api.lanes.worktree({
|
||
sourceRepo: repo,
|
||
title: name,
|
||
base: base || undefined,
|
||
branch: branch.trim(),
|
||
pipeline,
|
||
});
|
||
onAdded(result.lane);
|
||
|
||
// POST /worktree returns as soon as the DB row exists (202) — the
|
||
// actual `git worktree add` runs afterward, in the background, on the
|
||
// server. Firing setup against the lane's cwd before that finishes
|
||
// means agents/mcp write into a directory that doesn't exist yet, so
|
||
// wait for provisioning to leave the "provisioning" status first.
|
||
const provisionedLane = await waitForProvisioned(result.lane.id);
|
||
if (!provisionedLane || provisionedLane.status === "failed") {
|
||
setBusy(false);
|
||
setError(t("addLaneProvisionFailed"));
|
||
return;
|
||
}
|
||
|
||
const [profileOutcome, agentsOutcome, mcpOutcome] = await Promise.allSettled([
|
||
api.lanes.profileInit(result.lane.id),
|
||
api.lanes.agentsInstall(result.lane.id),
|
||
api.lanes.mcpSync(result.lane.id),
|
||
]);
|
||
setSetupResult({
|
||
profile:
|
||
profileOutcome.status === "fulfilled"
|
||
? profileOutcome.value.scaffolded
|
||
? "scaffolded"
|
||
: "skipped"
|
||
: "failed",
|
||
agents: agentsOutcome.status === "fulfilled" ? "ok" : "failed",
|
||
mcp: mcpOutcome.status === "fulfilled" ? "ok" : "failed",
|
||
});
|
||
|
||
if (import.meta.env.DEV) {
|
||
console.info("[add-lane] auto-setup result:", {
|
||
profile:
|
||
profileOutcome.status === "fulfilled" ? profileOutcome.value : profileOutcome.reason,
|
||
agents: agentsOutcome.status === "fulfilled" ? agentsOutcome.value : agentsOutcome.reason,
|
||
mcp: mcpOutcome.status === "fulfilled" ? mcpOutcome.value : mcpOutcome.reason,
|
||
});
|
||
}
|
||
|
||
// Leave the modal open so the setup summary below stays on screen; the
|
||
// user dismisses it themselves (Cancel/X) once they've seen it, rather
|
||
// than racing a timer that can close before they've looked at it.
|
||
setBusy(false);
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : String(err));
|
||
setBusy(false);
|
||
}
|
||
};
|
||
|
||
// ConfirmModal re-focuses its Cancel button in an effect keyed on `onCancel`'s
|
||
// identity. Every keystroke in the fields below re-renders this component; an
|
||
// inline `() => {...}` handed to `onCancel` would get a new identity each
|
||
// time, re-running that effect and yanking focus off the field being typed
|
||
// into after the very first character. useCallback keeps the identity stable
|
||
// across renders so only mount/unmount (and a real onClose change) refocuses.
|
||
const handleCancel = useCallback(() => {
|
||
// ConfirmModal's own Escape/backdrop/X handling calls this directly.
|
||
// While the folder browser is open on top of it, that dismissal should
|
||
// close only the browser, not both modals at once.
|
||
if (browseOpen) {
|
||
setBrowseOpen(false);
|
||
return;
|
||
}
|
||
reset();
|
||
onClose();
|
||
}, [onClose, browseOpen]);
|
||
|
||
const disabled =
|
||
!!setupResult ||
|
||
!sourceRepo.trim() ||
|
||
(mode === "worktree" && (!title.trim() || !branches || !branch.trim()));
|
||
|
||
return (
|
||
<ConfirmModal
|
||
open={open}
|
||
title={t("addLane")}
|
||
confirmLabel={t("add")}
|
||
cancelLabel={t("destructive.cancel")}
|
||
destructive={false}
|
||
busy={busy}
|
||
disabled={disabled}
|
||
onConfirm={submit}
|
||
onCancel={handleCancel}
|
||
>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
|
||
<Seg
|
||
active={mode === "repo"}
|
||
label={t("mode.repo")}
|
||
title={t("mode.repoHint")}
|
||
onClick={() => setMode("repo")}
|
||
/>
|
||
<Seg
|
||
active={mode === "worktree"}
|
||
label={t("mode.worktree")}
|
||
title={t("mode.worktreeHint")}
|
||
onClick={() => setMode("worktree")}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-repo">
|
||
{mode === "repo" ? t("addLaneRepoLabelAdopt") : t("addLaneRepoLabel")}
|
||
</label>
|
||
<div className="flex gap-1.5">
|
||
<div className="min-w-0 flex-1">
|
||
<CwdAutocomplete
|
||
inputId="add-lane-repo"
|
||
value={sourceRepo}
|
||
onChange={setSourceRepo}
|
||
suggestions={cwdSuggestions}
|
||
/>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => setBrowseOpen(true)}
|
||
title={t("browse.title")}
|
||
className="flex items-center gap-1 rounded-md border border-border-light px-2 text-xs text-fg-secondary hover:bg-surface-2"
|
||
>
|
||
<FolderOpen className="h-3.5 w-3.5" />
|
||
{t("browse.button")}
|
||
</button>
|
||
</div>
|
||
<p className="mt-1 text-[10px] text-fg-muted">
|
||
{mode === "repo" ? t("addLaneRepoHintAdopt") : t("addLaneRepoHint")}
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-title">
|
||
{t("addLaneTitleLabel")}
|
||
</label>
|
||
<input
|
||
id="add-lane-title"
|
||
value={title}
|
||
onChange={(e) => setTitle(e.target.value)}
|
||
placeholder={t("addLaneTitlePlaceholder")}
|
||
className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary placeholder:text-fg-muted focus:border-blue-500 focus:outline-none"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-pipeline">
|
||
{t("addLanePipelineLabel")}
|
||
</label>
|
||
<select
|
||
id="add-lane-pipeline"
|
||
value={pipeline}
|
||
onChange={(e) => setPipeline(e.target.value)}
|
||
className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary focus:border-blue-500 focus:outline-none"
|
||
>
|
||
{(pipelines.length ? pipelines : [{ id: "default", name: "default", nodes: [] }]).map(
|
||
(p) => (
|
||
<option key={p.id} value={p.id}>
|
||
{p.nodes.length ? `${p.name} (${p.nodes.length})` : p.name}
|
||
</option>
|
||
)
|
||
)}
|
||
</select>
|
||
<p className="mt-1 text-[10px] text-fg-muted">{t("addLanePipelineHint")}</p>
|
||
</div>
|
||
|
||
{mode === "worktree" && branches && (
|
||
<div>
|
||
<label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-base">
|
||
{t("addLaneBaseLabel")}
|
||
</label>
|
||
{branches.length === 0 ? (
|
||
<p className="text-[10px] text-fg-muted">{t("addLaneNoBranches")}</p>
|
||
) : (
|
||
<select
|
||
id="add-lane-base"
|
||
value={base}
|
||
onChange={(e) => setBase(e.target.value)}
|
||
className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary focus:border-blue-500 focus:outline-none"
|
||
>
|
||
{branches.map((b) => (
|
||
<option key={b} value={b}>
|
||
{b}
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
</div>
|
||
)}
|
||
{mode === "worktree" && branchesError && !branches && (
|
||
<p className="text-[10px] text-status-warning">{branchesError}</p>
|
||
)}
|
||
|
||
{mode === "worktree" && branches && (
|
||
<div>
|
||
<label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-branch">
|
||
{t("addLaneBranchLabel")}
|
||
</label>
|
||
<input
|
||
id="add-lane-branch"
|
||
value={branch}
|
||
onChange={(e) => setBranch(e.target.value)}
|
||
placeholder={t("addLaneBranchPlaceholder")}
|
||
className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 font-mono text-xs text-fg-primary placeholder:text-fg-muted focus:border-blue-500 focus:outline-none"
|
||
/>
|
||
<p className="mt-1 text-[10px] text-fg-muted">{t("addLaneBranchHint")}</p>
|
||
</div>
|
||
)}
|
||
|
||
{setupResult && (
|
||
<div className="rounded-md border border-border-light bg-surface-0 p-2 space-y-1">
|
||
<p className="text-[10px] font-medium text-fg-secondary">{t("addLaneSetupTitle")}</p>
|
||
{(
|
||
[
|
||
{
|
||
label: t("addLaneSetupProfile"),
|
||
ok: setupResult.profile !== "failed",
|
||
skipped: setupResult.profile === "skipped",
|
||
},
|
||
{ label: t("addLaneSetupAgents"), ok: setupResult.agents === "ok" },
|
||
{ label: t("addLaneSetupMcp"), ok: setupResult.mcp === "ok" },
|
||
] as const
|
||
).map((row) => (
|
||
<p key={row.label} className="flex items-center gap-1.5 text-[11px] text-fg-primary">
|
||
<span
|
||
className={
|
||
"skipped" in row && row.skipped
|
||
? "text-fg-muted"
|
||
: row.ok
|
||
? "text-status-success"
|
||
: "text-status-danger"
|
||
}
|
||
>
|
||
{"skipped" in row && row.skipped ? "–" : row.ok ? "✓" : "✗"}
|
||
</span>
|
||
{row.label}
|
||
</p>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{error && (
|
||
<p role="alert" className="text-xs text-status-danger">
|
||
{error}
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<FolderBrowseModal
|
||
open={browseOpen}
|
||
initialPath={sourceRepo.trim() || undefined}
|
||
onSelect={setSourceRepo}
|
||
onClose={() => setBrowseOpen(false)}
|
||
/>
|
||
</ConfirmModal>
|
||
);
|
||
}
|