nntrivi2001
1b561c22d9
- Changes card beside lane detail with five modes: Files tree, overview, Review (whole diff, per-file collapse), single file, commit history. - LaneDiffView: unified / side-by-side with independent scroll on both axes and mirrored scrollLeft, expand/collapse context, intra-line emphasis. - Staged-only commit box; git actions (fetch/pull/push/stage/unstage/ discard/commit/switch/branch-create/branch-delete) guarded in git-ops.js. - Server: git-diff.js + git-ops.js behind GET /api/lanes/:id/git/* and POST /api/lanes/:id/git/:action; gitFacts gains upstream/ahead/behind. - Add lane: new/existing branch, current branch, worktree list, prefill from the git bar's "New lane here"; /api/run/cwds gains a repo kind. - GlobalTooltip upgrades every native title into a themed anchored bubble; chart/info popovers use theme tokens.
763 lines
31 KiB
TypeScript
763 lines
31 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. The user also picks which CLI drives the lane
|
||
* (Claude Code or Codex) — this choice is immutable after creation. 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 { AiRouter, CwdSuggestion } from "../../lib/api";
|
||
import type { Lane, LaneTool, LaneWorktree } from "../../lib/types";
|
||
|
||
/** Mirrors server/lib/worktree.js `slugify`, for the branch-name PREVIEW only.
|
||
* Nothing is sent from it: an empty branch field means "let the server name
|
||
* it", which is how `LANE_BRANCH_PREFIX` keeps working. */
|
||
function slugPreview(title: string) {
|
||
return title
|
||
.toLowerCase()
|
||
.normalize("NFKD")
|
||
.replace(/[^a-z0-9]+/g, "-")
|
||
.replace(/^-+|-+$/g, "")
|
||
.slice(0, 40);
|
||
}
|
||
|
||
/** 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,
|
||
prefill,
|
||
}: {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
/** Called with the newly created (possibly still-provisioning) lane. */
|
||
onAdded: (lane: Lane) => void;
|
||
/** Fields to open with, for "new lane from this repo" in a lane's git bar.
|
||
* A branch here means the sibling worktree checks out THAT branch, which
|
||
* is the existing-branch mode — the reason that mode exists (issue #34). */
|
||
prefill?: { sourceRepo?: string; branch?: string } | null;
|
||
/** 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 [worktrees, setWorktrees] = useState<LaneWorktree[]>([]);
|
||
// Two ways to start a worktree lane, and git's own rule decides which is
|
||
// possible: "new" forks a branch off `base`, "existing" checks out a branch
|
||
// that is already there — which git allows exactly once across all of a
|
||
// repo's worktrees, hence the busy markers below.
|
||
const [branchMode, setBranchMode] = useState<"new" | "existing">("new");
|
||
const [base, setBase] = useState("");
|
||
// "native" is the built-in profile, not a null state — see server/lib/ai-routers.js.
|
||
const [router, setRouter] = useState("native");
|
||
const [routers, setRouters] = useState<AiRouter[]>([]);
|
||
const [routersLoaded, setRoutersLoaded] = useState(false);
|
||
const [branchesError, setBranchesError] = useState<string | null>(null);
|
||
const [tool, setTool] = useState<LaneTool>("claude");
|
||
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";
|
||
router: "ok" | "skipped" | "failed";
|
||
} | null>(null);
|
||
|
||
const reset = () => {
|
||
setMode("worktree");
|
||
setSourceRepo("");
|
||
setTitle("");
|
||
setBranch("");
|
||
setBranches(null);
|
||
setWorktrees([]);
|
||
setBranchMode("new");
|
||
setBase("");
|
||
setRouter("native");
|
||
setRoutersLoaded(false);
|
||
setTool("claude");
|
||
setBranchesError(null);
|
||
setError(null);
|
||
setBusy(false);
|
||
setSetupResult(null);
|
||
};
|
||
|
||
// A prefill only ever seeds the fields ON OPEN: the user may then change
|
||
// anything, and re-applying it on every render would fight them for the box.
|
||
useEffect(() => {
|
||
if (!open || !prefill) return;
|
||
if (prefill.sourceRepo) setSourceRepo(prefill.sourceRepo);
|
||
if (prefill.branch) {
|
||
setBranch(prefill.branch);
|
||
setBranchMode("existing");
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [open]);
|
||
|
||
// A session that boots on the vendor's API keeps talking to it for its whole
|
||
// life, so the router has to be picked here, before the lane exists.
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
let cancelled = false;
|
||
api.aiRouters
|
||
.list()
|
||
.then((r) => {
|
||
if (cancelled) return;
|
||
setRouters(r.items);
|
||
// A profile deleted in another tab while this modal sat open would
|
||
// otherwise stay selected in state while the select showed no matching
|
||
// option — and submit would send a name the server no longer knows.
|
||
setRouter((current) =>
|
||
current === "native" || r.items.some((item) => item.name === current) ? current : "native"
|
||
);
|
||
})
|
||
.catch(() => {
|
||
// Quiet: with no list the radio simply offers Native, and the lane is
|
||
// still created — a router is an optional extra, never a precondition.
|
||
if (!cancelled) setRouters([]);
|
||
})
|
||
.finally(() => {
|
||
if (!cancelled) setRoutersLoaded(true);
|
||
});
|
||
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);
|
||
setWorktrees([]);
|
||
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);
|
||
setWorktrees(r.worktrees || []);
|
||
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);
|
||
setWorktrees([]);
|
||
setBase("");
|
||
setBranchesError(t("addLaneNotARepo"));
|
||
}
|
||
}, 300);
|
||
return () => window.clearTimeout(timer);
|
||
}, [mode, sourceRepo, t]);
|
||
|
||
// Native is the built-in profile, so this is one call either way — there is
|
||
// no "no router" branch to keep in step with the real one.
|
||
const applyRouter = (laneId: number) => api.lanes.routerApply(laneId, router);
|
||
|
||
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,
|
||
tool,
|
||
});
|
||
// Report the lane the INSTANT it exists server-side. Everything after
|
||
// this is post-creation setup that can fail on its own, and letting one
|
||
// of those failures skip `onAdded` would leave a real lane invisible in
|
||
// the list until some unrelated refetch happened to pick it up.
|
||
// Worktree mode below already works this way.
|
||
onAdded(result.lane);
|
||
|
||
// A session that booted on the vendor's API would keep talking to it
|
||
// for its whole life, so the router is applied before anything runs.
|
||
try {
|
||
await applyRouter(result.lane.id);
|
||
} catch (routerErr) {
|
||
// The lane exists and is already listed — name what did not finish
|
||
// instead of closing on a half-set-up lane.
|
||
setError(routerErr instanceof Error ? routerErr.message : String(routerErr));
|
||
setBusy(false);
|
||
return;
|
||
}
|
||
reset();
|
||
onClose();
|
||
} catch (err) {
|
||
setError(err instanceof Error ? err.message : String(err));
|
||
setBusy(false);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// A blank branch in "new" mode is legal and deliberate: the server names
|
||
// it `${LANE_BRANCH_PREFIX}${slug}`, which is what the placeholder previews.
|
||
if (!branches || !name || (branchMode === "existing" && !branch.trim())) return;
|
||
try {
|
||
const result = await api.lanes.worktree({
|
||
sourceRepo: repo,
|
||
title: name,
|
||
// An existing branch is checked out as it stands; `base` only means
|
||
// something when a branch is being forked.
|
||
base: branchMode === "new" ? base || undefined : undefined,
|
||
branch: branch.trim() || undefined,
|
||
tool,
|
||
});
|
||
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, routerOutcome] = await Promise.allSettled([
|
||
api.lanes.profileInit(result.lane.id),
|
||
api.lanes.agentsInstall(result.lane.id),
|
||
api.lanes.mcpSync(result.lane.id),
|
||
applyRouter(result.lane.id),
|
||
]);
|
||
const outcome = {
|
||
profile:
|
||
profileOutcome.status === "fulfilled"
|
||
? profileOutcome.value.scaffolded
|
||
? "scaffolded"
|
||
: "skipped"
|
||
: "failed",
|
||
agents: agentsOutcome.status === "fulfilled" ? "ok" : "failed",
|
||
mcp: mcpOutcome.status === "fulfilled" ? "ok" : "failed",
|
||
router:
|
||
routerOutcome.status !== "fulfilled" ? "failed" : router === "native" ? "skipped" : "ok",
|
||
} as const;
|
||
const anyFailed = Object.values(outcome).includes("failed");
|
||
setSetupResult(outcome);
|
||
|
||
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,
|
||
// Never the profile itself: it would put an endpoint and a lane id in
|
||
// the browser console. (The key is never sent here at all.)
|
||
router: routerOutcome.status,
|
||
});
|
||
}
|
||
|
||
// A clean setup has nothing to tell anyone, so the lane is made and the
|
||
// dialog is done — leaving it up read as "still working" (the confirm
|
||
// button is dead from here, since the lane already exists) with no
|
||
// obvious way out. A summary is kept on screen only when a step FAILED,
|
||
// and then the confirm button becomes a plain close, because that is the
|
||
// one case where the user has something to read before dismissing it.
|
||
setBusy(false);
|
||
if (!anyFailed) {
|
||
reset();
|
||
onClose();
|
||
}
|
||
} 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]);
|
||
|
||
// A summary on screen means the lane already exists and a step failed, so
|
||
// the confirm button has no second creation to run: it closes instead. That
|
||
// is the difference between a dialog that is finished and one that is stuck.
|
||
const done = !!setupResult;
|
||
const disabled =
|
||
!done &&
|
||
(!sourceRepo.trim() ||
|
||
(mode === "worktree" &&
|
||
(!title.trim() || !branches || (branchMode === "existing" && !branch.trim()))));
|
||
|
||
/** branch name -> the worktree directory already holding it. git allows one
|
||
* checkout per branch, so these are the branches this form cannot use. */
|
||
const busyBranches = new Map(
|
||
worktrees.filter((w) => w.branch).map((w) => [w.branch as string, w.path])
|
||
);
|
||
const freeBranches = (branches || []).filter((b) => !busyBranches.has(b));
|
||
|
||
return (
|
||
<ConfirmModal
|
||
open={open}
|
||
title={t("addLane")}
|
||
confirmLabel={done ? t("addLaneSetupClose") : t("add")}
|
||
cancelLabel={t("destructive.cancel")}
|
||
destructive={false}
|
||
busy={busy}
|
||
disabled={disabled}
|
||
onConfirm={done ? handleCancel : 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">{t("addLaneToolHint")}</label>
|
||
<div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
|
||
<Seg
|
||
active={tool === "claude"}
|
||
label={t("addLaneToolClaude")}
|
||
onClick={() => setTool("claude")}
|
||
/>
|
||
<Seg
|
||
active={tool === "codex"}
|
||
label={t("addLaneToolCodex")}
|
||
onClick={() => setTool("codex")}
|
||
/>
|
||
</div>
|
||
</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>
|
||
|
||
{/* What this repo already has checked out. Without it the form asked
|
||
for a branch in the dark: the one fact that decides whether a
|
||
branch can be used at all is which worktree is holding it. */}
|
||
{mode === "worktree" && worktrees.length > 0 && (
|
||
<div
|
||
data-testid="add-lane-worktrees"
|
||
className="rounded-md border border-border-light bg-surface-0 p-2"
|
||
>
|
||
<p className="mb-1 text-[10px] font-medium text-fg-secondary">
|
||
{t("addLaneWorktreesTitle", { count: worktrees.length })}
|
||
</p>
|
||
<ul className="space-y-0.5">
|
||
{worktrees.slice(0, 8).map((w) => (
|
||
<li key={w.path} className="flex items-baseline gap-1.5 text-[10px]">
|
||
<span className="shrink-0 font-mono text-fg-primary">
|
||
⑂ {w.branch || t("addLaneWorktreeDetached")}
|
||
</span>
|
||
<span className="truncate text-fg-muted" title={w.path}>
|
||
{w.path}
|
||
</span>
|
||
</li>
|
||
))}
|
||
{worktrees.length > 8 && (
|
||
<li className="text-[10px] text-fg-muted">
|
||
{t("addLaneWorktreesMore", { count: worktrees.length - 8 })}
|
||
</li>
|
||
)}
|
||
</ul>
|
||
</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-accent focus:outline-none"
|
||
/>
|
||
</div>
|
||
|
||
{mode === "worktree" && branchesError && !branches && (
|
||
<p className="text-[10px] text-status-warning">{branchesError}</p>
|
||
)}
|
||
|
||
{mode === "worktree" && branches && (
|
||
<div data-testid="add-lane-branch-section" className="space-y-2">
|
||
<div className="flex items-center rounded-md border border-border bg-surface-2 p-0.5">
|
||
<Seg
|
||
active={branchMode === "new"}
|
||
label={t("addLaneBranchModeNew")}
|
||
onClick={() => {
|
||
setBranchMode("new");
|
||
setBranch("");
|
||
}}
|
||
/>
|
||
<Seg
|
||
active={branchMode === "existing"}
|
||
label={t("addLaneBranchModeExisting")}
|
||
onClick={() => {
|
||
setBranchMode("existing");
|
||
// Land on something usable rather than on an empty select
|
||
// that looks like a choice was already made.
|
||
setBranch((current) =>
|
||
freeBranches.includes(current) ? current : freeBranches[0] || ""
|
||
);
|
||
}}
|
||
/>
|
||
{/* The third answer to "which branch": none. A small or personal
|
||
project usually wants the lane to BE the repo, working on
|
||
whatever is checked out (`main`) — which is exactly Repo
|
||
mode, so this jumps there rather than inventing a second way
|
||
to do it. git cannot check `main` out in a second worktree
|
||
while the repo itself holds it, so a worktree lane could not
|
||
offer this even if it wanted to. */}
|
||
<Seg
|
||
active={false}
|
||
label={t("addLaneBranchModeCurrent")}
|
||
title={t("addLaneBranchModeCurrentHint")}
|
||
onClick={() => setMode("repo")}
|
||
/>
|
||
</div>
|
||
|
||
{branchMode === "new" ? (
|
||
<>
|
||
<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-accent focus:outline-none"
|
||
>
|
||
{branches.map((b) => (
|
||
<option key={b} value={b}>
|
||
{b}
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
</div>
|
||
<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)}
|
||
// The placeholder is what the SERVER will name the branch
|
||
// if this is left empty, so the default is visible without
|
||
// the form having to duplicate LANE_BRANCH_PREFIX.
|
||
placeholder={
|
||
title.trim() ? `feat/${slugPreview(title)}` : 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-accent focus:outline-none"
|
||
/>
|
||
<p className="mt-1 text-[10px] text-fg-muted">{t("addLaneBranchHintAuto")}</p>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div>
|
||
<label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-existing">
|
||
{t("addLaneBranchExistingLabel")}
|
||
</label>
|
||
{freeBranches.length === 0 ? (
|
||
<p className="text-[10px] text-status-warning">{t("addLaneNoFreeBranches")}</p>
|
||
) : (
|
||
<select
|
||
id="add-lane-existing"
|
||
value={branch}
|
||
onChange={(e) => setBranch(e.target.value)}
|
||
className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 font-mono text-xs text-fg-primary focus:border-accent focus:outline-none"
|
||
>
|
||
{branches.map((b) => {
|
||
const busyAt = busyBranches.get(b);
|
||
return (
|
||
// Disabled rather than hidden: "why is my branch not
|
||
// in the list" is a worse question than seeing it
|
||
// greyed out with the worktree that holds it.
|
||
<option key={b} value={b} disabled={!!busyAt}>
|
||
{busyAt ? t("addLaneBranchBusy", { branch: b, path: busyAt }) : b}
|
||
</option>
|
||
);
|
||
})}
|
||
</select>
|
||
)}
|
||
<p className="mt-1 text-[10px] text-fg-muted">{t("addLaneBranchExistingHint")}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* The router is the one per-lane extra this form still asks for, so it
|
||
sits in the form itself — a disclosure around a single field only
|
||
hid it. The pipeline picker is gone entirely: every lane is created
|
||
on `default` (the server's own default) and the template is changed
|
||
from the lane's own header afterwards. */}
|
||
<div className="rounded-md border border-border-light bg-surface-0 p-2">
|
||
<div>
|
||
<fieldset>
|
||
<legend className="mb-1 text-xs text-fg-secondary">{t("addLaneRouterLabel")}</legend>
|
||
<div className="flex gap-2">
|
||
{(
|
||
[
|
||
{ value: "native", label: t("addLaneRouterNative") },
|
||
{ value: "router", label: t("addLaneRouterCustom") },
|
||
] as const
|
||
).map((option) => {
|
||
const active =
|
||
option.value === "native" ? router === "native" : router !== "native";
|
||
// Clicking "AI Router" before the list lands would resolve back to
|
||
// Native and read as a dead control.
|
||
const disabled = option.value === "router" && !routersLoaded;
|
||
return (
|
||
<label
|
||
key={option.value}
|
||
// No radio dot: the card itself lights up when selected. That
|
||
// leaves the DISABLED state with nothing to show it, since the
|
||
// greyed-out dot was carrying it — hence the explicit branch.
|
||
// The input only goes visually hidden, so keyboard and screen
|
||
// readers still get a real radio group, and the card carries
|
||
// its focus ring.
|
||
className={`block flex-1 rounded-lg border p-2.5 text-center text-xs shadow-sm transition-colors focus-within:ring-2 focus-within:ring-accent/50 ${
|
||
disabled
|
||
? "cursor-not-allowed border-border bg-surface-2 text-fg-muted opacity-60"
|
||
: active
|
||
? "cursor-pointer border-accent bg-accent/10 text-accent"
|
||
: "cursor-pointer border-border bg-surface-2 text-fg-secondary hover:border-border-light hover:bg-surface-3"
|
||
}`}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="add-lane-router"
|
||
className="sr-only"
|
||
disabled={disabled}
|
||
checked={active}
|
||
onChange={() =>
|
||
// Switching to "AI Router" lands on the first saved
|
||
// profile; with none saved the radio stays on native and
|
||
// the select below explains why.
|
||
setRouter(
|
||
option.value === "native"
|
||
? "native"
|
||
: routers.find((r) => !r.builtin)?.name || "native"
|
||
)
|
||
}
|
||
/>
|
||
{option.label}
|
||
</label>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{router !== "native" && (
|
||
<select
|
||
aria-label={t("addLaneRouterProfileLabel")}
|
||
value={router}
|
||
onChange={(e) => setRouter(e.target.value)}
|
||
className="mt-2 w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 text-xs text-fg-primary focus:border-accent focus:outline-none"
|
||
>
|
||
{routers
|
||
.filter((r) => !r.builtin)
|
||
.map((r) => (
|
||
<option key={r.name} value={r.name}>
|
||
{r.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
<p className="mt-1 text-[10px] text-fg-muted">
|
||
{!routersLoaded
|
||
? t("addLaneRouterLoading")
|
||
: routers.some((r) => !r.builtin)
|
||
? t("addLaneRouterHint")
|
||
: t("addLaneRouterEmptyHint")}
|
||
</p>
|
||
</fieldset>
|
||
</div>
|
||
</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" },
|
||
{
|
||
label: t("addLaneSetupRouter"),
|
||
ok: setupResult.router !== "failed",
|
||
skipped: setupResult.router === "skipped",
|
||
},
|
||
] 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>
|
||
);
|
||
}
|