nntrivi2001
6c605849d8
- /api/workspaces and `agenthub workspace(s)` / `--workspace` as aliases of /api/lanes and `agenthub lanes` / `--lane`; old names print one stderr note. REPL `help lanes|workspace|workspaces` resolves through the aliases. - A workspace holds up to ten sessions (slots 0-9); every console tab is a group of 1-4 split panes (PaneGroups, agenthub.workspace.paneLayout); parseGroups keeps the stored active tab when an earlier one is dropped. - Browse button beside path fields: POST /api/lanes/pick-path opens the OS picker on the server's desktop — loopback only and no forwarding header (EREMOTE), a display failure is ENODIALOG not a Cancel, the dialog is killed when the request closes, a folder field falls back to the in-app browser on any failure. - Changes rail counts chip, image viewer (/git/raw), status bar session counts and per-day cost (`date=` on /api/pricing/cost). - /agenthub-open and /agenthub-doctor run from the INSTALLED build (supersededBy), doctor offers fixes behind two confirmations; plugin-open treats a locked bootstrap as non-fatal. - New-terminal shell waits for the first attach (issue #55). - repo-onboarding / debug-live-issue skills removed. - OpenAPI: pick-path, lane/date on /pricing/cost, tool on /run/history, /api/workspaces mount.
704 lines
28 KiB
TypeScript
704 lines
28 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 Browse (`PathPickButton`: the OS's own folder picker
|
||
* opened by the server, the in-app `FolderBrowseModal` where it cannot be).
|
||
* 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, useId, useRef, useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { ChevronDown, X } from "lucide-react";
|
||
import { useDialog } from "../../hooks/useDialog";
|
||
import { CwdAutocomplete } from "../run/RunSetup";
|
||
import { PathPickButton } from "../PathPickButton";
|
||
import { api } from "../../lib/api";
|
||
import type { CwdSuggestion } from "../../lib/api";
|
||
import type { Lane, LaneWorktree } from "../../lib/types";
|
||
import { useAiTools } from "../../hooks/useAiTools";
|
||
import { AiToolIcon } from "../AiToolIcon";
|
||
|
||
/** 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-solid 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("");
|
||
const [branchesError, setBranchesError] = useState<string | null>(null);
|
||
// null = the default AI tool (Settings → AI Tools), resolved at submit time.
|
||
const [pickedTool, setPickedTool] = useState<string | null>(null);
|
||
const aiTools = useAiTools();
|
||
const defaultTool = aiTools.defaultId ?? "claude";
|
||
const tool = pickedTool ?? defaultTool;
|
||
// Installed + enabled, the default first.
|
||
const toolChoices = aiTools.tools
|
||
.filter((x) => x.installed && x.enabled)
|
||
.sort((a, b) => Number(b.id === defaultTool) - Number(a.id === defaultTool));
|
||
const [toolListOpen, setToolListOpen] = useState(false);
|
||
const pickTool = (id: string) => {
|
||
setPickedTool(id === defaultTool ? null : id);
|
||
setToolListOpen(false);
|
||
};
|
||
const noTools = aiTools.loaded && aiTools.defaultId === null;
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [setupResult, setSetupResult] = useState<{
|
||
profile: "scaffolded" | "skipped" | "failed";
|
||
mcp: "ok" | "failed";
|
||
} | null>(null);
|
||
|
||
const reset = () => {
|
||
setMode("worktree");
|
||
setSourceRepo("");
|
||
setTitle("");
|
||
setBranch("");
|
||
setBranches(null);
|
||
setWorktrees([]);
|
||
setBranchMode("new");
|
||
setBase("");
|
||
setPickedTool(null);
|
||
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]);
|
||
|
||
// 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]);
|
||
|
||
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,
|
||
// THIS directory, not a lane on a parent of it (#42).
|
||
exact: true,
|
||
});
|
||
// 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);
|
||
// Nothing was created: closing now reads as success while no new card
|
||
// appears (#42). Say which lane already owns the folder instead.
|
||
if (!result.created) {
|
||
setError(
|
||
t("addLaneExists", {
|
||
id: result.lane.id,
|
||
title: result.lane.title || result.lane.cwd,
|
||
})
|
||
);
|
||
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 mcp writes 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, mcpOutcome] = await Promise.allSettled([
|
||
api.lanes.profileInit(result.lane.id),
|
||
api.lanes.mcpSync(result.lane.id),
|
||
]);
|
||
const outcome = {
|
||
profile:
|
||
profileOutcome.status === "fulfilled"
|
||
? profileOutcome.value.scaffolded
|
||
? "scaffolded"
|
||
: "skipped"
|
||
: "failed",
|
||
mcp: mcpOutcome.status === "fulfilled" ? "ok" : "failed",
|
||
} 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,
|
||
mcp: mcpOutcome.status === "fulfilled" ? mcpOutcome.value : mcpOutcome.reason,
|
||
});
|
||
}
|
||
|
||
// 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);
|
||
}
|
||
};
|
||
|
||
// Escape, the backdrop, the X and Cancel all land here. A folder browser
|
||
// open on top answers its own Escape and backdrop (PathPickButton).
|
||
const handleCancel = useCallback(() => {
|
||
reset();
|
||
onClose();
|
||
}, [onClose]);
|
||
|
||
// Cancel takes focus on open, the safer default.
|
||
const titleId = useId();
|
||
const panelRef = useRef<HTMLDivElement>(null);
|
||
const cancelRef = useRef<HTMLButtonElement>(null);
|
||
useDialog(open, panelRef, handleCancel, cancelRef);
|
||
|
||
// 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?.length || (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));
|
||
|
||
if (!open) return null;
|
||
|
||
// Its own shell, not ConfirmModal: that one lays its body beside the title in
|
||
// the X button's row, which left this form narrower than its own footer.
|
||
return (
|
||
<div
|
||
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 p-4"
|
||
onClick={handleCancel}
|
||
role="presentation"
|
||
>
|
||
<div
|
||
ref={panelRef}
|
||
className="relative flex max-h-[90vh] w-full max-w-lg flex-col rounded-xl border border-border bg-surface-1 shadow-xl shadow-black/40"
|
||
onClick={(e) => e.stopPropagation()}
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby={titleId}
|
||
>
|
||
<div className="flex items-center gap-3 border-b border-border px-5 py-3.5">
|
||
<h3 id={titleId} className="min-w-0 flex-1 text-sm font-semibold text-fg-primary">
|
||
{t("addLane")}
|
||
</h3>
|
||
<button
|
||
type="button"
|
||
onClick={handleCancel}
|
||
className="btn-icon -mr-1"
|
||
aria-label={t("destructive.cancel")}
|
||
>
|
||
<X className="h-4 w-4" aria-hidden />
|
||
</button>
|
||
</div>
|
||
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-4">
|
||
<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>
|
||
{noTools ? (
|
||
<p className="rounded-md border border-status-warning/40 bg-status-warning/10 px-2 py-1.5 text-xs text-status-warning">
|
||
{t("addLaneNoTools")}{" "}
|
||
<a href="/settings/agents" className="underline">
|
||
{t("addLaneNoToolsLink")}
|
||
</a>
|
||
</p>
|
||
) : (
|
||
<div>
|
||
<button
|
||
type="button"
|
||
aria-expanded={toolListOpen}
|
||
disabled={toolChoices.length < 2}
|
||
onClick={() => setToolListOpen((o) => !o)}
|
||
className="flex w-full items-center gap-2 rounded-md border border-border bg-surface-2 px-2.5 py-1.5 text-left text-sm text-fg-primary hover:bg-surface-3 disabled:cursor-default disabled:hover:bg-surface-2"
|
||
>
|
||
<AiToolIcon tool={{ id: tool, label: aiTools.label(tool) }} className="h-5 w-5" />
|
||
<span className="min-w-0 flex-1 truncate">{aiTools.label(tool)}</span>
|
||
{tool === defaultTool && (
|
||
<span className="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-medium text-accent">
|
||
{t("addLaneToolDefaultBadge")}
|
||
</span>
|
||
)}
|
||
{toolChoices.length > 1 && (
|
||
<ChevronDown
|
||
aria-hidden
|
||
className={`h-4 w-4 text-fg-muted transition-transform ${toolListOpen ? "rotate-180" : ""}`}
|
||
/>
|
||
)}
|
||
</button>
|
||
{toolListOpen && (
|
||
<div
|
||
role="group"
|
||
aria-label={t("addLaneToolHint")}
|
||
className="mt-1.5 grid grid-cols-2 gap-1.5 sm:grid-cols-3"
|
||
>
|
||
{toolChoices.map((x) => (
|
||
<button
|
||
key={x.id}
|
||
type="button"
|
||
aria-pressed={x.id === tool}
|
||
onClick={() => pickTool(x.id)}
|
||
className={`flex items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors ${
|
||
x.id === tool
|
||
? "border-accent bg-accent/10 text-accent"
|
||
: "border-border bg-surface-2 text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
|
||
}`}
|
||
>
|
||
<AiToolIcon tool={x} className="h-5 w-5" />
|
||
<span className="min-w-0 flex-1 truncate">{x.label}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</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>
|
||
<PathPickButton start={sourceRepo} onPick={setSourceRepo} showLabel />
|
||
</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 ? (
|
||
// No commit, nothing to fork: the server refuses this with
|
||
// EEMPTYREPO, so the one way forward is offered instead.
|
||
<div className="space-y-1">
|
||
<p className="text-[10px] text-fg-muted">{t("addLaneNoBranches")}</p>
|
||
<button
|
||
type="button"
|
||
onClick={() => setMode("repo")}
|
||
className="rounded-md border border-border-light px-2 py-0.5 text-xs text-fg-secondary hover:bg-surface-2"
|
||
>
|
||
{t("addLaneNoBranchesUseRepo")}
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<select
|
||
id="add-lane-base"
|
||
value={base}
|
||
onChange={(e) => setBase(e.target.value)}
|
||
className="select w-full !py-1.5 !text-xs"
|
||
>
|
||
{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)}
|
||
// Neutral on purpose: an empty field lets the SERVER name
|
||
// the branch, under a LANE_BRANCH_PREFIX this form cannot
|
||
// see, so any `feat/…` preview here could be wrong.
|
||
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-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="select w-full !py-1.5 font-mono !text-xs"
|
||
>
|
||
{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>
|
||
)}
|
||
|
||
{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("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>
|
||
|
||
<div className="flex items-center justify-end gap-2 border-t border-border px-5 py-3">
|
||
<button
|
||
ref={cancelRef}
|
||
type="button"
|
||
onClick={handleCancel}
|
||
className="btn-ghost border border-border text-xs"
|
||
>
|
||
{t("destructive.cancel")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={done ? handleCancel : submit}
|
||
disabled={busy || disabled}
|
||
className="btn-primary text-xs disabled:opacity-50"
|
||
>
|
||
{done ? t("addLaneSetupClose") : t("add")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|