nntrivi2001
5bd1c0323f
The lane strip's tiles are now drag-reorderable (Alt+←/→ is the keyboard
path), and a lane's name can be set in place from the detail header. The
"Lane 23 ·" prefix is gone from both — the bare `#23` stays on the tile,
because that number is how the CLI addresses a lane.
Card order is a per-viewer preference, not a lane fact: it lives in
localStorage (`agenthub.workspace.laneOrder`) beside the split-view layout
and writes nothing server-side, so `GET /api/lanes` and `agenthub lanes`
keep answering in id order. Renaming is the opposite — it is PATCH
/api/lanes/:id with {title}, the one lane column a user now types into
directly.
That made a patch value reachable by hand for the first time, so
`bindable` now rejects any non-scalar for every PATCHABLE column with
EBADFIELD, and the route answers 400 for that and for the
SQLITE_CONSTRAINT family, rather than handing better-sqlite3 a datatype
throw and reporting 500 on plain bad input.
The uncommitted-files tooltip became a real panel. `GET /api/lanes/:id/git`
now returns `files` as {path, status, added, deleted} records — deltas from
one `git diff --numstat HEAD`, null where git has none to report (untracked,
binary, renamed) — and the card renders them portalled to the body, so the
Workspace's own scroll box cannot clip the list.
818 lines
31 KiB
TypeScript
818 lines
31 KiB
TypeScript
/**
|
||
* @file One lane's card: branch/CI/PR facts, the "needs you"
|
||
* banner sourced from Claude Code's Notification hook, and (for managed
|
||
* lanes only) a ⋯ menu holding the rare `reset worktree` action behind
|
||
* DestructiveLaneModal. A dead lane (its driving session went silent while
|
||
* it should have been working) is called out loudly — that is the failure
|
||
* this view exists to catch. Stage, kind, and the "auto: <stage>" chip are
|
||
* NOT repeated here — this card only ever renders inside the Workspace
|
||
* lane-detail section, whose header above it already shows them. Neither is
|
||
* progress: the pipeline map directly below this card draws the same number
|
||
* as named, coloured nodes, so a bar and a percent beside it were a worse
|
||
* second telling of it. The repo
|
||
* card also carries the lane's AI Router picker — the Add-lane modal is the
|
||
* only other place one is chosen, and a lane outlives its creation. The repo
|
||
* tooling dropdown (`LaneToolsMenu`, exported from this file) and the
|
||
* remove-lane button live in Workspace's page header / pipeline-picker row
|
||
* instead of here, so they stay reachable and un-clipped regardless of this
|
||
* card's own scroll area.
|
||
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
||
*/
|
||
|
||
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||
import { createPortal } from "react-dom";
|
||
import { useTranslation } from "react-i18next";
|
||
import { DestructiveLaneModal } from "./DestructiveLaneModal";
|
||
import { api } from "../../lib/api";
|
||
import { eventBus } from "../../lib/eventBus";
|
||
import { keepIfSame } from "../../lib/keepIfSame";
|
||
import type { AiRouter } from "../../lib/api";
|
||
import type { Lane, LaneGitFacts, LaneGitFile, LaneRuntime, NamedLock } from "../../lib/types";
|
||
|
||
/** How often a mounted card re-reads its working-copy facts. Slow on purpose:
|
||
* each call is five git subprocesses server-side, and a branch name does not
|
||
* change on the timescale the lane list is polled at. */
|
||
const GIT_REFRESH_MS = 30_000;
|
||
|
||
/** How often a mounted card re-probes its stack. Faster than the git refresh
|
||
* because a stack dying is exactly what the user needs to see, and slower than
|
||
* the lane poll because each call opens a socket per declared port. */
|
||
const RUNTIME_REFRESH_MS = 10_000;
|
||
|
||
/** How often a mounted card re-reads locks held by this lane. Same refresh rate
|
||
* as the git facts (slow, since lock state changes infrequently). */
|
||
const LOCKS_REFRESH_MS = 30_000;
|
||
|
||
/**
|
||
* The lane's own working copy, fetched per card rather than folded into the
|
||
* polled lane list. Absent facts are not an error state: a lane may point at a
|
||
* plain directory, and it renders as a card without a git row.
|
||
*/
|
||
function useLaneGitFacts(laneId: number): LaneGitFacts | null {
|
||
const [facts, setFacts] = useState<LaneGitFacts | null>(null);
|
||
|
||
useEffect(() => {
|
||
let alive = true;
|
||
const read = () => {
|
||
api.lanes
|
||
.git(laneId)
|
||
.then((f) => {
|
||
if (alive) setFacts(keepIfSame(f));
|
||
})
|
||
.catch(() => {
|
||
// Silent: a card that cannot read git shows the rest of itself. An
|
||
// error banner here would fire on every lane on every server blip.
|
||
if (alive) setFacts(keepIfSame<LaneGitFacts>({ available: false }));
|
||
});
|
||
};
|
||
read();
|
||
const timer = setInterval(read, GIT_REFRESH_MS);
|
||
return () => {
|
||
alive = false;
|
||
clearInterval(timer);
|
||
};
|
||
}, [laneId]);
|
||
|
||
return facts;
|
||
}
|
||
|
||
/**
|
||
* The lane's own application stack. Same shape and same silence as the git
|
||
* facts above: a lane without a `.agenthub/profile` simply has no runtime row, which
|
||
* is the common case and not an error worth a banner.
|
||
*
|
||
* `bump` lets an up/down action re-read immediately instead of waiting out the
|
||
* poll interval.
|
||
*/
|
||
export function useLaneRuntime(laneId: number, bump: number): LaneRuntime | null {
|
||
const [runtime, setRuntime] = useState<LaneRuntime | null>(null);
|
||
|
||
useEffect(() => {
|
||
let alive = true;
|
||
const read = () => {
|
||
api.lanes
|
||
.runtime(laneId)
|
||
.then((r) => {
|
||
if (alive) setRuntime(keepIfSame(r));
|
||
})
|
||
.catch(() => {
|
||
if (alive) setRuntime(keepIfSame<LaneRuntime>({ available: false }));
|
||
});
|
||
};
|
||
read();
|
||
const timer = setInterval(read, RUNTIME_REFRESH_MS);
|
||
return () => {
|
||
alive = false;
|
||
clearInterval(timer);
|
||
};
|
||
}, [laneId, bump]);
|
||
|
||
return runtime;
|
||
}
|
||
|
||
/**
|
||
* Locks held by THIS lane, polled the same way runtime/git facts are.
|
||
*/
|
||
function useLaneLocks(laneSlot: number | null): NamedLock[] {
|
||
const [locks, setLocks] = useState<NamedLock[]>([]);
|
||
|
||
useEffect(() => {
|
||
if (!laneSlot) return;
|
||
let alive = true;
|
||
const holder = `lane${laneSlot}`;
|
||
const read = () => {
|
||
api.locks
|
||
.list()
|
||
.then((data) => {
|
||
if (alive) setLocks(keepIfSame(data.locks.filter((l) => l.holder === holder)));
|
||
})
|
||
.catch(() => {
|
||
/* fails silently, same contract as the git/runtime pollers */
|
||
});
|
||
};
|
||
read();
|
||
const timer = setInterval(read, LOCKS_REFRESH_MS);
|
||
return () => {
|
||
alive = false;
|
||
clearInterval(timer);
|
||
};
|
||
}, [laneSlot]);
|
||
|
||
return locks;
|
||
}
|
||
|
||
/**
|
||
* Which AI Router this lane runs against, and the one place it can be changed
|
||
* after the lane exists — the Add-lane modal is the only other one, and a lane
|
||
* outlives the moment it was created.
|
||
*
|
||
* Applying writes the lane's own config on disk as well as the DB column, so it
|
||
* goes through `POST /lanes/:id/router/apply` and never a PATCH. A failure puts
|
||
* the select back: the row must not claim a router the lane did not get.
|
||
*
|
||
* Rendered only when there is something to choose. A user who has never opened
|
||
* the AI Router tab has exactly the built-in `native` profile, and a select
|
||
* with one option is a control that cannot do anything.
|
||
*/
|
||
export function LaneRouterRow({ lane }: { lane: Lane }) {
|
||
const { t } = useTranslation(["lanes"]);
|
||
const [routers, setRouters] = useState<AiRouter[] | null>(null);
|
||
const [current, setCurrent] = useState(lane.router_profile || "native");
|
||
const [busy, setBusy] = useState(false);
|
||
const [note, setNote] = useState<{ ok: boolean; text: string } | null>(null);
|
||
|
||
// The polled lane list is the source of truth; a switch elsewhere (the lane
|
||
// was reset to native by a profile delete, say) has to land here too.
|
||
useEffect(() => {
|
||
setCurrent(lane.router_profile || "native");
|
||
setNote(null);
|
||
}, [lane.id, lane.router_profile]);
|
||
|
||
useEffect(() => {
|
||
let alive = true;
|
||
api.aiRouters
|
||
.list()
|
||
.then((r) => {
|
||
if (alive) setRouters(r.items);
|
||
})
|
||
.catch(() => {
|
||
// Silent, same contract as the git/runtime pollers above: a card that
|
||
// cannot list routers simply shows no router row.
|
||
if (alive) setRouters([]);
|
||
});
|
||
return () => {
|
||
alive = false;
|
||
};
|
||
}, []);
|
||
|
||
if (!routers || routers.length <= 1) return null;
|
||
|
||
const change = async (name: string) => {
|
||
const previous = current;
|
||
setCurrent(name);
|
||
setBusy(true);
|
||
setNote(null);
|
||
try {
|
||
await api.lanes.routerApply(lane.id, name);
|
||
setNote({ ok: true, text: t("router.applied") });
|
||
} catch (err) {
|
||
setCurrent(previous);
|
||
setNote({ ok: false, text: err instanceof Error ? err.message : String(err) });
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<label
|
||
className="flex items-center gap-1.5 text-xs text-fg-muted"
|
||
data-testid={`lane-router-${lane.id}`}
|
||
>
|
||
{t("router.label")}
|
||
<select
|
||
value={current}
|
||
disabled={busy}
|
||
onChange={(e) => void change(e.target.value)}
|
||
className="max-w-40 truncate rounded border border-border bg-surface-1 px-2 py-0.5 text-fg-secondary disabled:opacity-50"
|
||
>
|
||
{routers.map((r) => (
|
||
<option key={r.name} value={r.name}>
|
||
{r.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
{/* The applied-note is a tooltip, not a line of its own: it fires on a
|
||
click the user just made, and a wrapped sentence under the control
|
||
would push every row below it down for the life of the selection.
|
||
A failure still gets visible colour, because that one is not
|
||
self-evident from the select. */}
|
||
{note && (
|
||
<span className={note.ok ? "text-fg-muted" : "text-status-danger"} title={note.text}>
|
||
{note.ok ? "✓" : "⚠"}
|
||
</span>
|
||
)}
|
||
</label>
|
||
);
|
||
}
|
||
|
||
export const LIVENESS_DOT: Record<Lane["liveness"], string> = {
|
||
active: "bg-status-success",
|
||
idle: "bg-surface-4",
|
||
dead: "bg-status-danger",
|
||
};
|
||
|
||
export function since(sec: number | null): string {
|
||
if (sec === null) return "—";
|
||
if (sec < 60) return `${sec}s`;
|
||
if (sec < 3600) return `${Math.floor(sec / 60)}m ${sec % 60}s`;
|
||
return `${Math.floor(sec / 3600)}h ${Math.floor((sec % 3600) / 60)}m`;
|
||
}
|
||
|
||
/**
|
||
* Repo tooling (agents install / MCP sync / dev-sync check) for one lane,
|
||
* collapsed into a single dropdown. Lives outside LaneCard so it can be
|
||
* placed in the Workspace page header, next to "Add lane" — it polls its
|
||
* own runtime state independently of LaneCard's, same pattern as the
|
||
* separately-polled git/locks facts elsewhere on this page.
|
||
*/
|
||
export function LaneToolsMenu({ lane }: { lane: Lane }) {
|
||
const { t } = useTranslation(["lanes"]);
|
||
const [toolsMenuOpen, setToolsMenuOpen] = useState(false);
|
||
const [laneActionBusy, setLaneActionBusy] = useState<"agents" | "mcp" | "sync-check" | null>(
|
||
null
|
||
);
|
||
const [laneActionResult, setLaneActionResult] = useState<string | null>(null);
|
||
const runtime = useLaneRuntime(lane.id, 0);
|
||
|
||
const runLaneAction = async (
|
||
which: "agents" | "mcp" | "sync-check",
|
||
fn: () => Promise<string>
|
||
) => {
|
||
setLaneActionBusy(which);
|
||
setLaneActionResult(null);
|
||
try {
|
||
setLaneActionResult(await fn());
|
||
} catch (err) {
|
||
setLaneActionResult(err instanceof Error ? err.message : String(err));
|
||
} finally {
|
||
setLaneActionBusy(null);
|
||
}
|
||
};
|
||
|
||
const handleAgentsInstall = () =>
|
||
runLaneAction("agents", async () => {
|
||
const result = await api.lanes.agentsInstall(lane.id);
|
||
return t("actions.agentsInstallResult", { files: result.installed.join(", ") });
|
||
});
|
||
|
||
const handleMcpSync = () =>
|
||
runLaneAction("mcp", async () => {
|
||
const result = await api.lanes.mcpSync(lane.id);
|
||
return t("actions.mcpSyncResult", { servers: result.servers.join(", ") || "none" });
|
||
});
|
||
|
||
const handleSyncCheck = () =>
|
||
runLaneAction("sync-check", async () => {
|
||
const result = await api.lanes.syncBaseCheck(lane.id);
|
||
if (result.code === 5 && result.collisions && result.collisions.length > 0) {
|
||
const c = result.collisions[0]!;
|
||
return t("actions.syncCheckCollision", { file: c.file, suggestion: c.suggestion });
|
||
}
|
||
return t("actions.syncCheckClean", {
|
||
count: result.devDelta?.length ?? 0,
|
||
overlap: result.overlap?.length ? result.overlap.join(", ") : "none",
|
||
});
|
||
});
|
||
|
||
if (!runtime?.available) return null;
|
||
|
||
return (
|
||
<div className="relative">
|
||
<button
|
||
type="button"
|
||
data-testid="lane-tools-menu"
|
||
aria-haspopup="menu"
|
||
aria-expanded={toolsMenuOpen}
|
||
disabled={laneActionBusy !== null}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setToolsMenuOpen((v) => !v);
|
||
}}
|
||
className="rounded border border-border-light px-2 py-1 text-xs text-fg-secondary transition-colors hover:text-fg-primary disabled:opacity-50"
|
||
>
|
||
{laneActionBusy ? t("actions.busy") : t("actions.tools")}
|
||
</button>
|
||
{toolsMenuOpen && (
|
||
<div
|
||
role="menu"
|
||
className="absolute right-0 z-10 mt-1 min-w-44 overflow-hidden rounded-md border border-border-light bg-surface-0 py-1 shadow-lg shadow-black/40"
|
||
>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
data-testid="lane-agents-install"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setToolsMenuOpen(false);
|
||
void handleAgentsInstall();
|
||
}}
|
||
className="block w-full px-3 py-1.5 text-left text-fg-secondary hover:bg-surface-2"
|
||
>
|
||
{t("actions.agentsInstall")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
data-testid="lane-mcp-sync"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setToolsMenuOpen(false);
|
||
void handleMcpSync();
|
||
}}
|
||
className="block w-full px-3 py-1.5 text-left text-fg-secondary hover:bg-surface-2"
|
||
>
|
||
{t("actions.mcpSync")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
data-testid="lane-sync-check"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setToolsMenuOpen(false);
|
||
void handleSyncCheck();
|
||
}}
|
||
className="block w-full px-3 py-1.5 text-left text-fg-secondary hover:bg-surface-2"
|
||
>
|
||
{t("actions.syncCheck")}
|
||
</button>
|
||
</div>
|
||
)}
|
||
{laneActionResult && (
|
||
<p
|
||
data-testid="lane-action-result"
|
||
className="absolute right-0 top-full mt-1 w-max max-w-xs truncate rounded border border-border-light bg-surface-0 px-2 py-1 text-[11px] text-fg-secondary shadow-lg shadow-black/40"
|
||
>
|
||
{laneActionResult}
|
||
</p>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Porcelain status code -> the letter shown and the colour it is shown in.
|
||
* Keyed on the code's first meaningful character, so an index-side change
|
||
* (`M `), a worktree-side one (` M`) and both (`MM`) read the same. */
|
||
const GIT_STATUS_STYLE: Record<string, string> = {
|
||
M: "text-status-warning",
|
||
A: "text-status-success",
|
||
D: "text-status-danger",
|
||
R: "text-accent",
|
||
C: "text-accent",
|
||
U: "text-status-danger",
|
||
"?": "text-fg-muted",
|
||
};
|
||
|
||
/**
|
||
* The file list behind a lane's uncommitted counts: which files, what happened
|
||
* to each, and how many lines it gained and lost.
|
||
*
|
||
* It replaced a native `title` tooltip, which could show the same paths but
|
||
* neither colour them nor align the deltas — and a plain porcelain dump is not
|
||
* something you read at a glance.
|
||
*
|
||
* PORTALLED to `document.body` and `position: fixed`, for the same reason this
|
||
* file's own header says the tools dropdown was moved out of the card: a lane
|
||
* card renders inside the Workspace's `max-h-[45vh] overflow-y-auto` box, and
|
||
* an absolutely positioned panel would be clipped by it for every card that is
|
||
* not at the very top. It flips above its anchor rather than off the bottom of
|
||
* the window, and clamps to the right edge.
|
||
*/
|
||
function LaneGitFilesPanel({
|
||
files,
|
||
hidden,
|
||
anchor,
|
||
onPointerEnter,
|
||
onPointerLeave,
|
||
}: {
|
||
files: LaneGitFile[];
|
||
hidden: number;
|
||
/** The counts button this panel hangs off. */
|
||
anchor: HTMLElement | null;
|
||
onPointerEnter: () => void;
|
||
onPointerLeave: () => void;
|
||
}) {
|
||
const { t } = useTranslation(["lanes"]);
|
||
const panelRef = useRef<HTMLDivElement>(null);
|
||
const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
|
||
|
||
// After the first paint, when the panel's real height is known: place it
|
||
// under the anchor, or above it when that would run off the bottom.
|
||
useLayoutEffect(() => {
|
||
if (!anchor || !panelRef.current) return;
|
||
const a = anchor.getBoundingClientRect();
|
||
const p = panelRef.current.getBoundingClientRect();
|
||
const gap = 4;
|
||
const top =
|
||
a.bottom + gap + p.height > window.innerHeight ? a.top - p.height - gap : a.bottom + gap;
|
||
setPos({
|
||
top: Math.max(8, top),
|
||
left: Math.max(8, Math.min(a.left, document.documentElement.clientWidth - p.width - 8)),
|
||
});
|
||
}, [anchor, files]);
|
||
// Totals are over the LISTED files only — the cap means the rest are unknown,
|
||
// and a total that silently omits them would be a wrong number rather than a
|
||
// partial one. `hidden` says how many are missing.
|
||
const added = files.reduce((n, f) => n + (f.added ?? 0), 0);
|
||
const deleted = files.reduce((n, f) => n + (f.deleted ?? 0), 0);
|
||
|
||
return createPortal(
|
||
<div
|
||
ref={panelRef}
|
||
data-testid="lane-git-files"
|
||
role="group"
|
||
aria-label={t("git.filesHeading", { count: files.length })}
|
||
// The pointer has to be able to travel INTO the panel to scroll it, so
|
||
// the panel answers the same enter/leave pair the trigger does.
|
||
onMouseEnter={onPointerEnter}
|
||
onMouseLeave={onPointerLeave}
|
||
style={{
|
||
position: "fixed",
|
||
zIndex: 60,
|
||
top: pos?.top ?? 0,
|
||
left: pos?.left ?? 0,
|
||
// Hidden for the one frame before it has been measured, so it never
|
||
// flashes at the top-left corner.
|
||
visibility: pos ? "visible" : "hidden",
|
||
}}
|
||
className="max-h-72 w-[22rem] max-w-[calc(100vw-1rem)] overflow-y-auto rounded-md border border-border bg-surface-1 p-2 shadow-lg"
|
||
>
|
||
<div className="mb-1.5 flex items-baseline gap-2 border-b border-border pb-1.5 text-[11px]">
|
||
<span className="text-fg-secondary">{t("git.filesHeading", { count: files.length })}</span>
|
||
<span className="ml-auto shrink-0 font-mono tabular-nums">
|
||
<span className="text-status-success">+{added}</span>{" "}
|
||
<span className="text-status-danger">−{deleted}</span>
|
||
</span>
|
||
</div>
|
||
<ul className="space-y-0.5 font-mono text-[11px]">
|
||
{files.map((f) => {
|
||
const code = f.status.trim()[0] || "?";
|
||
return (
|
||
<li key={f.path} className="flex items-baseline gap-2">
|
||
<span
|
||
className={`w-3 shrink-0 font-semibold ${GIT_STATUS_STYLE[code] || "text-fg-muted"}`}
|
||
title={f.status}
|
||
>
|
||
{code}
|
||
</span>
|
||
{/* The DIRECTORY truncates, never the filename: the name is what
|
||
you scan for, the path is only there to disambiguate it. */}
|
||
<span className="flex min-w-0 flex-1 items-baseline" title={f.path}>
|
||
<span className="truncate text-fg-muted">{f.path.replace(/[^/]+$/, "")}</span>
|
||
<span className="shrink-0 text-fg-primary">{f.path.split("/").pop()}</span>
|
||
</span>
|
||
<span className="shrink-0 tabular-nums">
|
||
{f.added === null && f.deleted === null ? (
|
||
<span className="text-fg-muted">{t("git.noDelta")}</span>
|
||
) : (
|
||
<>
|
||
<span className="text-status-success">+{f.added ?? 0}</span>{" "}
|
||
<span className="text-status-danger">−{f.deleted ?? 0}</span>
|
||
</>
|
||
)}
|
||
</span>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
{hidden > 0 && (
|
||
<p className="mt-1.5 border-t border-border pt-1.5 text-[10px] text-fg-muted">
|
||
{t("git.filesMore", { count: hidden })}
|
||
</p>
|
||
)}
|
||
</div>,
|
||
document.body
|
||
);
|
||
}
|
||
|
||
export default function LaneCard({
|
||
lane,
|
||
onAction,
|
||
childWorktrees,
|
||
onSelectLane,
|
||
}: {
|
||
lane: Lane;
|
||
onAction: (action: string, body?: Record<string, unknown>) => void;
|
||
/** Other lanes whose `source_repo` is this lane's `cwd` — populated only
|
||
* when this lane is itself a source repo (typically an adopted one) that
|
||
* other lanes were provisioned as worktrees from. */
|
||
childWorktrees?: Lane[];
|
||
/** Jumps the Workspace page's selection to another lane's card. */
|
||
onSelectLane?: (id: number) => void;
|
||
}) {
|
||
const { t } = useTranslation(["lanes"]);
|
||
const [destructiveAction, setDestructiveAction] = useState<"reset" | null>(null);
|
||
const [menuOpen, setMenuOpen] = useState(false);
|
||
const [runtimeBump, setRuntimeBump] = useState(0);
|
||
const [bootLine, setBootLine] = useState<string | null>(null);
|
||
const [filesOpen, setFilesOpen] = useState(false);
|
||
const [countsAnchor, setCountsAnchor] = useState<HTMLButtonElement | null>(null);
|
||
// Closing is DELAYED: the panel is portalled away from the trigger, so the
|
||
// pointer leaves the trigger before it can land on the panel it is heading
|
||
// for. Any enter — trigger or panel — cancels the pending close.
|
||
const filesCloseTimer = useRef<number | undefined>(undefined);
|
||
const openFiles = useCallback(() => {
|
||
window.clearTimeout(filesCloseTimer.current);
|
||
setFilesOpen(true);
|
||
}, []);
|
||
const closeFiles = useCallback(() => {
|
||
window.clearTimeout(filesCloseTimer.current);
|
||
filesCloseTimer.current = window.setTimeout(() => setFilesOpen(false), 150);
|
||
}, []);
|
||
useEffect(() => () => window.clearTimeout(filesCloseTimer.current), []);
|
||
const git = useLaneGitFacts(lane.id);
|
||
const runtime = useLaneRuntime(lane.id, runtimeBump);
|
||
const locks = useLaneLocks(lane.slot);
|
||
|
||
/**
|
||
* Live boot feedback. A build can run for minutes, and a card showing only a
|
||
* disabled button through all of it reads as a hang. The hook's own output
|
||
* lines are the honest progress indicator.
|
||
*/
|
||
useEffect(
|
||
() =>
|
||
eventBus.subscribe((msg) => {
|
||
const data = msg.data as { laneId?: number; line?: string } | undefined;
|
||
if (!data || data.laneId !== lane.id) return;
|
||
if (msg.type === "lane_hook_output" && typeof data.line === "string") {
|
||
setBootLine(data.line);
|
||
}
|
||
if (msg.type === "lane_runtime") {
|
||
setBootLine(null);
|
||
setRuntimeBump((n) => n + 1);
|
||
}
|
||
}),
|
||
[lane.id]
|
||
);
|
||
|
||
return (
|
||
<>
|
||
<div
|
||
data-testid={`lane-card-${lane.id}`}
|
||
className="flex flex-col rounded-lg border border-border bg-surface-4 p-2.5 transition-colors hover:border-border-light"
|
||
>
|
||
{(lane.ci_status || lane.tool === "codex") && (
|
||
<div className="mb-2 flex flex-wrap items-center gap-1.5 text-[11px]">
|
||
{lane.ci_status && (
|
||
<span className="rounded bg-surface-2 px-1.5 py-0.5 text-fg-secondary">
|
||
CI {lane.ci_status}
|
||
</span>
|
||
)}
|
||
{lane.tool === "codex" && (
|
||
<span className="rounded border border-border bg-surface-2 px-1.5 py-0.5 text-[10px] text-fg-muted">
|
||
Codex
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{lane.needs_action && (
|
||
<div className="mb-2 rounded border border-status-warning/50 bg-status-warning/10 px-2 py-1 text-xs text-status-warning">
|
||
⚠ {lane.needs_action}
|
||
</div>
|
||
)}
|
||
|
||
{/* Runtime strip: the lane's own app stack, shown only for lanes that
|
||
declare a profile. A port that drifted from `base + slot` is called
|
||
out — the number is otherwise predictable from the slot, and silently
|
||
serving on a different one is exactly the surprise worth flagging. */}
|
||
{runtime?.available && runtime.provisioned && (
|
||
<div
|
||
data-testid={`lane-runtime-${lane.id}`}
|
||
className="mb-2 rounded border border-border bg-surface-2/50 px-2 py-1 font-mono text-[11px]"
|
||
>
|
||
<div className="mb-1 flex items-center justify-between">
|
||
<span className="text-fg-muted">{t("runtime.slot", { slot: runtime.slot })}</span>
|
||
<span
|
||
className={runtime.healthy ? "text-status-success" : "text-fg-muted"}
|
||
data-testid="lane-runtime-state"
|
||
>
|
||
{runtime.healthy
|
||
? t("runtime.healthy")
|
||
: runtime.up
|
||
? t("runtime.partial")
|
||
: t("runtime.down")}
|
||
</span>
|
||
</div>
|
||
{Object.entries(runtime.ports).map(([name, info]) => (
|
||
<div key={name} className="flex items-center gap-1.5 truncate">
|
||
<span
|
||
className={`h-1.5 w-1.5 shrink-0 rounded-full ${
|
||
info.listening ? "bg-status-success" : "bg-surface-4"
|
||
}`}
|
||
/>
|
||
<span className="text-fg-secondary">{name}</span>
|
||
<span className="text-fg-muted">:{info.port ?? "—"}</span>
|
||
{info.port !== null && info.port !== info.expected && (
|
||
<span
|
||
className="truncate text-status-warning/80"
|
||
title={t("runtime.steppedAsideTitle", { expected: info.expected })}
|
||
>
|
||
⚠ {info.expected}
|
||
</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
{/* While a boot is in flight the hook's own latest line IS the
|
||
progress bar — a build can take minutes, and a disabled button
|
||
with nothing moving reads as a hang. */}
|
||
{bootLine !== null && (
|
||
<div
|
||
data-testid="lane-runtime-bootline"
|
||
className="mt-1 truncate text-fg-muted"
|
||
title={bootLine}
|
||
>
|
||
{bootLine}
|
||
</div>
|
||
)}
|
||
{bootLine === null && runtime.lastError && (
|
||
<div
|
||
className="mt-1 truncate text-status-danger/90"
|
||
title={runtime.lastError.message}
|
||
>
|
||
{runtime.lastError.code || "error"}: {runtime.lastError.message}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{locks.length > 0 && (
|
||
<div
|
||
className="mb-2 flex items-center gap-1 text-xs text-status-warning"
|
||
data-testid={`lane-locks-${lane.id}`}
|
||
title={locks.map((l) => `${l.name} (${Math.floor(l.ageSec / 60)}m)`).join(", ")}
|
||
>
|
||
🔒 {t("locks.held", { count: locks.length })}
|
||
</div>
|
||
)}
|
||
|
||
{/* One line, because every part of it is short and the panel is
|
||
narrow: branch, head, subject, and the uncommitted counts read as a
|
||
sentence rather than a four-row block. The cwd is NOT here — the
|
||
lane-detail header above this card already spells it out. */}
|
||
{git?.available && (
|
||
<div className="mb-2">
|
||
<div
|
||
data-testid="lane-git"
|
||
className="flex items-baseline gap-2 truncate font-mono text-[11px] text-fg-secondary"
|
||
title={git.subject}
|
||
>
|
||
<span className="shrink-0">⑂ {git.branch}</span>
|
||
<span className="shrink-0 text-fg-muted">{git.head}</span>
|
||
<span className="truncate text-fg-muted">{git.subject}</span>
|
||
{(git.dirty > 0 || git.untracked > 0) && (
|
||
<button
|
||
type="button"
|
||
ref={setCountsAnchor}
|
||
data-testid="lane-git-counts"
|
||
aria-expanded={filesOpen}
|
||
onMouseEnter={openFiles}
|
||
onMouseLeave={closeFiles}
|
||
// Focus and click open it too: hover is not a gesture a
|
||
// keyboard or a touchscreen has.
|
||
onFocus={openFiles}
|
||
onBlur={closeFiles}
|
||
onClick={() => setFilesOpen((v) => !v)}
|
||
className="shrink-0 cursor-help text-status-warning/80 underline decoration-dotted underline-offset-2"
|
||
>
|
||
{t("git.uncommitted", { dirty: git.dirty, untracked: git.untracked })}
|
||
</button>
|
||
)}
|
||
</div>
|
||
{filesOpen && git.files?.length > 0 && (
|
||
<LaneGitFilesPanel
|
||
files={git.files}
|
||
hidden={git.dirty + git.untracked - git.files.length}
|
||
anchor={countsAnchor}
|
||
onPointerEnter={openFiles}
|
||
onPointerLeave={closeFiles}
|
||
/>
|
||
)}
|
||
</div>
|
||
)}
|
||
{/* The lane's own recorded branch, shown only when git could not be
|
||
read — otherwise it duplicates the live branch above. */}
|
||
{!git?.available && lane.branch && (
|
||
<div className="mb-2 truncate font-mono text-[11px] text-fg-secondary">
|
||
⑂ {lane.branch}
|
||
</div>
|
||
)}
|
||
|
||
{childWorktrees && childWorktrees.length > 0 && (
|
||
<div
|
||
data-testid="lane-child-worktrees"
|
||
className="mb-2 space-y-1 text-[11px] text-fg-secondary"
|
||
>
|
||
<div className="text-fg-muted">
|
||
{t("worktrees.heading", { count: childWorktrees.length })}
|
||
</div>
|
||
<ul className="space-y-0.5">
|
||
{childWorktrees.map((w) => (
|
||
<li key={w.id}>
|
||
<button
|
||
type="button"
|
||
onClick={() => onSelectLane?.(w.id)}
|
||
className="truncate text-left text-blue-400 hover:underline"
|
||
title={w.cwd}
|
||
>
|
||
#{w.id} {w.title || w.cwd} · {w.status}
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
{/* mt-auto pins the controls to the bottom so cards of differing height
|
||
in one grid row still line their buttons up. Repo tooling and the
|
||
remove button live in the Workspace page header/pipeline row now —
|
||
`reset` is the one destructive action left here, since it only
|
||
applies to managed lanes and is rare enough to stay behind ⋯. */}
|
||
{lane.kind === "managed" && (
|
||
<div className="mt-auto flex items-center justify-end gap-1 border-t border-border pt-2 text-xs">
|
||
<div className="relative">
|
||
<button
|
||
type="button"
|
||
data-testid="lane-more"
|
||
aria-haspopup="menu"
|
||
aria-expanded={menuOpen}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setMenuOpen((v) => !v);
|
||
}}
|
||
className="rounded px-2 py-1 text-fg-muted hover:bg-surface-2 hover:text-fg-secondary"
|
||
title={t("moreActions")}
|
||
>
|
||
⋯
|
||
</button>
|
||
{menuOpen && (
|
||
<div
|
||
role="menu"
|
||
className="absolute right-0 z-10 mt-1 min-w-40 overflow-hidden rounded-md border border-border-light bg-surface-0 py-1 shadow-lg shadow-black/40"
|
||
>
|
||
<button
|
||
type="button"
|
||
role="menuitem"
|
||
data-testid="lane-action-reset"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setMenuOpen(false);
|
||
setDestructiveAction("reset");
|
||
}}
|
||
className="block w-full px-3 py-1.5 text-left text-status-warning hover:bg-status-warning/10"
|
||
>
|
||
{t("action.reset")}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{destructiveAction && (
|
||
<DestructiveLaneModal
|
||
lane={lane}
|
||
action={destructiveAction}
|
||
open
|
||
onClose={() => setDestructiveAction(null)}
|
||
onConfirm={(body) => {
|
||
setDestructiveAction(null);
|
||
onAction(destructiveAction, body);
|
||
}}
|
||
/>
|
||
)}
|
||
</>
|
||
);
|
||
}
|