feat(lanes): reorder and rename lane cards, and show each file's line delta

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.

client/src/components/lanes/LaneCard.tsx

@@ -19,17 +19,18 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useState } from "react";
+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, LaneRuntime, NamedLock } from "../../lib/types";
+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 three git subprocesses server-side, and a branch name does not
+ *  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;
 
@@ -379,6 +380,141 @@ export function LaneToolsMenu({ lane }: { lane: Lane }) {
   );
 }
 
+/** 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,
@@ -399,6 +535,21 @@ export default function LaneCard({
   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);
@@ -530,31 +681,42 @@ export default function LaneCard({
             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
-            data-testid="lane-git"
-            className="mb-2 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) && (
-              <span
-                className="shrink-0 cursor-help text-status-warning/80"
-                /* Native title: the counts' own file list, capped server-side.
-                   A hover card would need a portal to escape this truncating
-                   row — the browser's tooltip already escapes it for free. */
-                title={
-                  git.files?.length
-                    ? git.files.join("\n") +
-                      (git.dirty + git.untracked > git.files.length
-                        ? `\n… +${git.dirty + git.untracked - git.files.length}`
-                        : "")
-                    : undefined
-                }
-              >
-                {t("git.uncommitted", { dirty: git.dirty, untracked: git.untracked })}
-              </span>
+          <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>
         )}

client/src/components/lanes/LaneStripCard.tsx

@@ -7,9 +7,15 @@
  * absent: the detail panel's pipeline map below shows the same thing with the
  * stage names attached. Keeping the tile small and fixed-width is what lets
  * many lanes stay scannable in one scrolling row.
+ *
+ * The tile is also the strip's reorder handle: native HTML5 drag-and-drop, no
+ * dependency. Ceiling: desktop pointers only — there is no touch drag and no
+ * auto-scroll when the strip overflows, so Alt+Arrow moves the focused tile as
+ * the keyboard (and touch-free) path.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { Lane } from "../../lib/types";
 
@@ -45,33 +51,69 @@ function detectionLeads(lane: Lane): boolean {
 
 export default function LaneStripCard({
   lane,
+  index,
   selected,
   onSelect,
+  onReorder,
 }: {
   lane: Lane;
+  /** Position in the lane array — the unit both reorder paths speak in. */
+  index: number;
   selected: boolean;
   onSelect: () => void;
+  onReorder: (from: number, to: number) => void;
 }) {
   const { t } = useTranslation(["lanes"]);
+  const [dropTarget, setDropTarget] = useState(false);
 
   return (
     <button
       type="button"
       data-testid={`lane-tile-${lane.id}`}
       data-selected={selected ? "true" : undefined}
+      data-drop-target={dropTarget ? "true" : undefined}
       aria-pressed={selected}
       onClick={onSelect}
-      title={lane.cwd}
-      className={`w-56 shrink-0 rounded-lg border p-3 text-left shadow-sm transition-colors ${
-        selected
-          ? "border-accent bg-accent/10"
-          : "border-border bg-surface-2 hover:border-border-light hover:bg-surface-3"
+      draggable
+      onDragStart={(e) => {
+        // Firefox starts no drag at all without a setData call.
+        e.dataTransfer.setData("text/plain", String(index));
+        e.dataTransfer.effectAllowed = "move";
+      }}
+      onDragOver={(e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setDropTarget(true);
+      }}
+      onDragLeave={() => setDropTarget(false)}
+      onDragEnd={() => setDropTarget(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setDropTarget(false);
+        const from = Number(e.dataTransfer.getData("text/plain"));
+        if (Number.isInteger(from)) onReorder(from, index);
+      }}
+      onKeyDown={(e) => {
+        if (!e.altKey || (e.key !== "ArrowLeft" && e.key !== "ArrowRight")) return;
+        e.preventDefault();
+        onReorder(index, index + (e.key === "ArrowLeft" ? -1 : 1));
+      }}
+      title={`${lane.cwd}\n${t("reorderHint")}`}
+      className={`w-56 shrink-0 cursor-grab rounded-lg border p-3 text-left shadow-sm transition-colors active:cursor-grabbing ${
+        dropTarget
+          ? "border-accent bg-accent/20"
+          : selected
+            ? "border-accent bg-accent/10"
+            : "border-border bg-surface-2 hover:border-border-light hover:bg-surface-3"
       }`}
     >
       <div className="mb-1.5 flex items-center gap-1.5 text-[11px]">
         <span className={`h-2 w-2 shrink-0 rounded-full ${LIVENESS_DOT[lane.liveness]}`} />
-        <span className="shrink-0 text-[10px] font-semibold uppercase tracking-widest text-fg-muted">
-          {t("cardId", { id: lane.id })}
+        {/* The bare id, not "Lane 23": the word cost a third of the row's
+            width and said nothing, but the number itself is how the CLI
+            addresses a lane (`agenthub stage --lane 23`), so it stays. */}
+        <span className="shrink-0 text-[10px] font-semibold tracking-widest text-fg-muted">
+          #{lane.id}
         </span>
         <span className="truncate rounded bg-surface-4 px-1.5 py-0.5 text-fg-secondary">
           {lane.stage}

client/src/components/lanes/__tests__/LaneCard.test.tsx

@@ -9,7 +9,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import LaneCard, { LaneToolsMenu, LaneRouterRow } from "../LaneCard";
 import type { Lane, LaneRuntime } from "../../../lib/types";
@@ -207,7 +207,11 @@ describe("LaneCard git block", () => {
     subject: "free-text rule mode in the form",
     dirty: 2,
     untracked: 1,
-    files: [" M server/lib/alerts.js", " M client/src/lib/api.ts", "?? scratch.txt"],
+    files: [
+      { path: "server/lib/alerts.js", status: " M", added: 12, deleted: 3 },
+      { path: "client/src/lib/api.ts", status: "M ", added: 1, deleted: 0 },
+      { path: "scratch.txt", status: "??", added: null, deleted: null },
+    ],
   };
 
   it("renders the live branch, head, subject and uncommitted counts", async () => {
@@ -219,14 +223,61 @@ describe("LaneCard git block", () => {
     expect(block.textContent).toContain("9b3e74a");
     expect(block.textContent).toContain("free-text rule mode in the form");
     expect(block.textContent).toContain("2");
-    // Hovering the counts names the files behind them.
-    expect(screen.getByText(/modified/).title).toBe(
-      " M server/lib/alerts.js\n M client/src/lib/api.ts\n?? scratch.txt"
-    );
     // The live branch replaces the lane's recorded one rather than doubling it.
     expect(screen.queryByText(/stale\/recorded/)).toBeNull();
   });
 
+  it("names the files behind the counts on hover, with each one's line delta", async () => {
+    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts);
+    render(<LaneCard lane={makeLane()} onAction={vi.fn()} />);
+
+    const counts = await screen.findByTestId("lane-git-counts");
+    // Hidden until asked for: the row is a one-line summary until you hover.
+    expect(screen.queryByTestId("lane-git-files")).toBeNull();
+
+    fireEvent.mouseEnter(counts);
+    const panel = screen.getByTestId("lane-git-files");
+    expect(panel.textContent).toContain("alerts.js");
+    expect(panel.textContent).toContain("+12");
+    expect(panel.textContent).toContain("−3");
+    // Totals across the listed files.
+    expect(panel.textContent).toContain("+13");
+    // An untracked file has no delta to report and says so rather than "+0".
+    expect(panel.textContent).toContain("new");
+    expect(panel.textContent).toContain("3 files changed");
+
+    // Closing is delayed so the pointer can travel into the panel and scroll
+    // it — the panel is portalled to the body, away from its trigger.
+    fireEvent.mouseLeave(counts);
+    expect(screen.queryByTestId("lane-git-files")).not.toBeNull();
+    await waitFor(() => expect(screen.queryByTestId("lane-git-files")).toBeNull());
+  });
+
+  it("stays open while the pointer is inside the panel", async () => {
+    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts);
+    render(<LaneCard lane={makeLane()} onAction={vi.fn()} />);
+
+    const counts = await screen.findByTestId("lane-git-counts");
+    fireEvent.mouseEnter(counts);
+    fireEvent.mouseLeave(counts);
+    // The pointer landed on the panel before the pending close fired.
+    fireEvent.mouseEnter(screen.getByTestId("lane-git-files"));
+    await new Promise((r) => setTimeout(r, 200));
+    expect(screen.queryByTestId("lane-git-files")).not.toBeNull();
+
+    fireEvent.mouseLeave(screen.getByTestId("lane-git-files"));
+    await waitFor(() => expect(screen.queryByTestId("lane-git-files")).toBeNull());
+  });
+
+  it("says how many files the server-side cap left out", async () => {
+    // 40 uncommitted files, 3 listed: the counts are exact, the listing is not.
+    vi.mocked(api.lanes.git).mockResolvedValueOnce({ ...facts, dirty: 39, untracked: 1 });
+    render(<LaneCard lane={makeLane()} onAction={vi.fn()} />);
+
+    fireEvent.mouseEnter(await screen.findByTestId("lane-git-counts"));
+    expect(screen.getByTestId("lane-git-files").textContent).toContain("37 more");
+  });
+
   it("omits the uncommitted line when the tree is clean", async () => {
     vi.mocked(api.lanes.git).mockResolvedValueOnce({ ...facts, dirty: 0, untracked: 0 });
     render(<LaneCard lane={makeLane()} onAction={vi.fn()} />);

client/src/components/lanes/__tests__/LaneStripCard.test.tsx

@@ -1,13 +1,13 @@
 /**
- * @file Rendering tests for the Workspace lane tile, focused on the amber
- * "detected" badge: it may only appear when the inferred stage is genuinely
- * AHEAD of the declared one, including when the declaration used a node alias
- * (which is most of what the ship-feature skill declares).
+ * @file Rendering tests for the Workspace lane tile: the amber "detected"
+ * badge (it may only appear when the inferred stage is genuinely AHEAD of the
+ * declared one, including when the declaration used a node alias — which is
+ * most of what the ship-feature skill declares), and the reorder handles.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
 import LaneStripCard from "../LaneStripCard";
 import type { Lane, LaneNode } from "../../../lib/types";
 
@@ -63,8 +63,10 @@ describe("LaneStripCard detected badge", () => {
     render(
       <LaneStripCard
         lane={lane({ detected_stage: "review" })}
+        index={0}
         selected={false}
         onSelect={() => {}}
+        onReorder={() => {}}
       />
     );
     expect(screen.getByTestId("lane-tile-auto-1")).toHaveTextContent("review");
@@ -77,8 +79,10 @@ describe("LaneStripCard detected badge", () => {
     render(
       <LaneStripCard
         lane={lane({ stage: "tests", detected_stage: "implementing" })}
+        index={0}
         selected={false}
         onSelect={() => {}}
+        onReorder={() => {}}
       />
     );
     expect(screen.queryByTestId("lane-tile-auto-1")).toBeNull();
@@ -88,10 +92,104 @@ describe("LaneStripCard detected badge", () => {
     render(
       <LaneStripCard
         lane={lane({ stage: "tests", detected_stage: "review" })}
+        index={0}
         selected={false}
         onSelect={() => {}}
+        onReorder={() => {}}
       />
     );
     expect(screen.getByTestId("lane-tile-auto-1")).toHaveTextContent("review");
   });
 });
+
+describe("LaneStripCard reorder", () => {
+  /** jsdom ships no DataTransfer, so the drag events carry a stub store. */
+  function dataTransfer(initial = "") {
+    let payload = initial;
+    return {
+      setData: (_type: string, v: string) => {
+        payload = v;
+      },
+      getData: () => payload,
+      effectAllowed: "",
+      dropEffect: "",
+    };
+  }
+
+  it("reports the dragged tile's index and the drop target's", () => {
+    const onReorder = vi.fn();
+    const dt = dataTransfer();
+    render(
+      <>
+        <LaneStripCard
+          lane={lane({ id: 1 })}
+          index={0}
+          selected={false}
+          onSelect={() => {}}
+          onReorder={onReorder}
+        />
+        <LaneStripCard
+          lane={lane({ id: 2 })}
+          index={2}
+          selected={false}
+          onSelect={() => {}}
+          onReorder={onReorder}
+        />
+      </>
+    );
+    fireEvent.dragStart(screen.getByTestId("lane-tile-1"), { dataTransfer: dt });
+    fireEvent.drop(screen.getByTestId("lane-tile-2"), { dataTransfer: dt });
+    expect(onReorder).toHaveBeenCalledWith(0, 2);
+  });
+
+  it("ignores a drop carrying no tile index", () => {
+    const onReorder = vi.fn();
+    render(
+      <LaneStripCard
+        lane={lane({})}
+        index={0}
+        selected={false}
+        onSelect={() => {}}
+        onReorder={onReorder}
+      />
+    );
+    fireEvent.drop(screen.getByTestId("lane-tile-1"), { dataTransfer: dataTransfer("nonsense") });
+    expect(onReorder).not.toHaveBeenCalled();
+  });
+
+  it("moves the focused tile with Alt+Arrow, the keyboard path for reordering", () => {
+    const onReorder = vi.fn();
+    render(
+      <LaneStripCard
+        lane={lane({})}
+        index={2}
+        selected={false}
+        onSelect={() => {}}
+        onReorder={onReorder}
+      />
+    );
+    const tile = screen.getByTestId("lane-tile-1");
+    fireEvent.keyDown(tile, { key: "ArrowLeft", altKey: true });
+    expect(onReorder).toHaveBeenCalledWith(2, 1);
+    fireEvent.keyDown(tile, { key: "ArrowRight", altKey: true });
+    expect(onReorder).toHaveBeenCalledWith(2, 3);
+    // A bare arrow is the strip's own scroll/focus movement, not a reorder.
+    fireEvent.keyDown(tile, { key: "ArrowLeft" });
+    expect(onReorder).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows the id without the 'Lane' prefix", () => {
+    render(
+      <LaneStripCard
+        lane={lane({ id: 7, title: "checkout flow" })}
+        index={0}
+        selected={false}
+        onSelect={() => {}}
+        onReorder={() => {}}
+      />
+    );
+    const tile = screen.getByTestId("lane-tile-7");
+    expect(tile).toHaveTextContent("#7");
+    expect(tile.textContent).not.toMatch(/Lane/i);
+  });
+});

client/src/i18n/locales/en/lanes.json

@@ -54,7 +54,7 @@
   "worktrees.heading_other": "{{count}} worktrees",
   "addLaneTitlePlaceholder": "Optional",
   "autoStage": "auto: {{stage}}",
-  "cardId": "Lane {{id}}",
+  "reorderHint": "Drag to reorder · Alt+←/→",
   "confirmRemoveCancel": "Cancel",
   "confirmRemoveConfirm": "Remove",
   "confirmRemoveMessage": "This action cannot be undone.",
@@ -93,12 +93,17 @@
   "destructive.reset.title": "Reset managed worktree?",
   "destructive.warning.no-remote": "No Git remote is configured, so nothing here is backed up remotely. You can still proceed.",
   "emptyState": "No lanes yet. Create one from a working directory:",
+  "git.filesHeading_one": "{{count}} file changed",
+  "git.filesHeading_other": "{{count}} files changed",
+  "git.filesMore_one": "… and {{count}} more file",
+  "git.filesMore_other": "… and {{count}} more files",
+  "git.noDelta": "new",
   "git.uncommitted": "{{dirty}} modified · {{untracked}} untracked",
   "kind.adopted": "adopted",
   "kind.managed": "managed",
   "laneDetail.hide": "Hide details",
   "laneDetail.show": "Lane details",
-  "laneHeader": "Lane {{id}} · {{title}}",
+  "renameLabel": "Rename this lane",
   "locks.held_one": "{{count}} lock held",
   "locks.held_other": "{{count}} locks held",
   "moreActions": "More actions",

client/src/i18n/locales/vi/lanes.json

@@ -54,7 +54,7 @@
   "worktrees.heading_other": "{{count}} worktree",
   "addLaneTitlePlaceholder": "Không bắt buộc",
   "autoStage": "tự động: {{stage}}",
-  "cardId": "Làn đường {{id}}",
+  "reorderHint": "Kéo để sắp xếp · Alt+←/→",
   "confirmRemoveCancel": "Hủy",
   "confirmRemoveConfirm": "Xóa",
   "confirmRemoveMessage": "Hành động này không thể hoàn tác.",
@@ -93,12 +93,17 @@
   "destructive.reset.title": "Đặt lại worktree được quản lý?",
   "destructive.warning.no-remote": "Chưa cấu hình Git remote, nên không có bản sao lưu ở xa. Bạn vẫn có thể tiếp tục.",
   "emptyState": "Chưa có làn đường nào. Tạo một từ thư mục làm việc:",
+  "git.filesHeading_one": "{{count}} tệp thay đổi",
+  "git.filesHeading_other": "{{count}} tệp thay đổi",
+  "git.filesMore_one": "… và {{count}} tệp nữa",
+  "git.filesMore_other": "… và {{count}} tệp nữa",
+  "git.noDelta": "mới",
   "git.uncommitted": "{{dirty}} đã sửa · {{untracked}} chưa theo dõi",
   "kind.adopted": "đã nhận",
   "kind.managed": "được quản lý",
   "laneDetail.hide": "Ẩn chi tiết",
   "laneDetail.show": "Chi tiết lane",
-  "laneHeader": "Làn đường {{id}} · {{title}}",
+  "renameLabel": "Đổi tên làn đường này",
   "locks.held_one": "Đang giữ {{count}} khóa",
   "locks.held_other": "Đang giữ {{count}} khóa",
   "moreActions": "Thêm hành động",

client/src/lib/__tests__/laneOrderStorage.test.ts

@@ -0,0 +1,75 @@
+/**
+ * @file laneOrderStorage.test.ts
+ * @description Tests for the Workspace lane strip's stored card order: the
+ * storage round-trip, and the two rules that keep a stale stored order from
+ * losing a lane — unknown ids land at the end, vanished ids are skipped.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { readLaneOrder, writeLaneOrder, sortByStoredOrder, moveLane } from "../laneOrderStorage";
+
+const lanes = (...ids: number[]) => ids.map((id) => ({ id }));
+
+describe("laneOrderStorage", () => {
+  beforeEach(() => localStorage.clear());
+
+  it("returns an empty order when nothing is stored", () => {
+    expect(readLaneOrder()).toEqual([]);
+  });
+
+  it("round-trips a written order", () => {
+    writeLaneOrder([3, 1, 2]);
+    expect(readLaneOrder()).toEqual([3, 1, 2]);
+  });
+
+  it("falls back to an empty order when stored JSON is malformed", () => {
+    localStorage.setItem("agenthub.workspace.laneOrder", "{not json");
+    expect(readLaneOrder()).toEqual([]);
+  });
+
+  it("drops non-numeric entries from a stored order", () => {
+    localStorage.setItem("agenthub.workspace.laneOrder", JSON.stringify([1, "2", null, 3]));
+    expect(readLaneOrder()).toEqual([1, 3]);
+  });
+});
+
+describe("sortByStoredOrder", () => {
+  it("keeps server order when nothing is stored", () => {
+    expect(sortByStoredOrder(lanes(1, 2, 3), [])).toEqual(lanes(1, 2, 3));
+  });
+
+  it("applies the stored order", () => {
+    expect(sortByStoredOrder(lanes(1, 2, 3), [3, 1, 2])).toEqual(lanes(3, 1, 2));
+  });
+
+  it("appends lanes the stored order has never seen, in server order", () => {
+    expect(sortByStoredOrder(lanes(1, 2, 3, 4), [3, 1])).toEqual(lanes(3, 1, 2, 4));
+  });
+
+  it("skips stored ids whose lane no longer exists", () => {
+    expect(sortByStoredOrder(lanes(1, 3), [3, 2, 1])).toEqual(lanes(3, 1));
+  });
+
+  it("does not mutate the input", () => {
+    const input = lanes(1, 2, 3);
+    sortByStoredOrder(input, [3, 2, 1]);
+    expect(input.map((l) => l.id)).toEqual([1, 2, 3]);
+  });
+});
+
+describe("moveLane", () => {
+  it("moves a card forward", () => {
+    expect(moveLane([1, 2, 3], 0, 2)).toEqual([2, 3, 1]);
+  });
+
+  it("moves a card backward", () => {
+    expect(moveLane([1, 2, 3], 2, 0)).toEqual([3, 1, 2]);
+  });
+
+  it("returns the order unchanged for a no-op or out-of-range move", () => {
+    expect(moveLane([1, 2, 3], 1, 1)).toEqual([1, 2, 3]);
+    expect(moveLane([1, 2, 3], 0, 3)).toEqual([1, 2, 3]);
+    expect(moveLane([1, 2, 3], -1, 0)).toEqual([1, 2, 3]);
+  });
+});

client/src/lib/laneOrderStorage.ts

@@ -0,0 +1,69 @@
+/**
+ * @file laneOrderStorage.ts
+ * @description Persists the Workspace lane strip's user-chosen card order to
+ * localStorage, the same read/validate/fallback convention as
+ * splitViewStorage.ts.
+ *
+ * The order lives in the browser rather than the lanes table on purpose: it is
+ * a per-viewer preference, like the split-pane layout beside it, and nothing
+ * server-side (the CLI's `agenthub lanes`, the pipeline-stats picker) has an
+ * opinion about it. Ceiling: the order does not follow the user to another
+ * browser or to the CLI — move it to a `lanes.sort_order` column if it ever
+ * must.
+ *
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+const STORAGE_KEY = "agenthub.workspace.laneOrder";
+
+export function readLaneOrder(): number[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((id): id is number => typeof id === "number");
+  } catch {
+    return [];
+  }
+}
+
+export function writeLaneOrder(ids: number[]): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
+  } catch {
+    /* ignore quota / disabled storage */
+  }
+}
+
+/**
+ * Applies a stored id order to a freshly fetched lane list.
+ *
+ * Ids the stored order never saw — a lane created since, or created in another
+ * tab — keep their server order (id ascending) and land at the END, so a new
+ * lane appears predictably rather than wherever a stale index puts it. Stored
+ * ids naming a lane that no longer exists are simply skipped.
+ *
+ * @param lanes Lanes in server order.
+ * @param order Stored id order.
+ * @returns A new array; the input is never mutated.
+ */
+export function sortByStoredOrder<T extends { id: number }>(lanes: T[], order: number[]): T[] {
+  const rank = new Map(order.map((id, i) => [id, i]));
+  const known = lanes
+    .filter((l) => rank.has(l.id))
+    .sort((a, b) => rank.get(a.id)! - rank.get(b.id)!);
+  const fresh = lanes.filter((l) => !rank.has(l.id));
+  return [...known, ...fresh];
+}
+
+/**
+ * Moves the lane at `from` to index `to`, returning the resulting id order.
+ * Out-of-range indices yield the unchanged order rather than a hole.
+ */
+export function moveLane(ids: number[], from: number, to: number): number[] {
+  if (from === to || from < 0 || to < 0 || from >= ids.length || to >= ids.length) return ids;
+  const next = [...ids];
+  next.splice(to, 0, ...next.splice(from, 1));
+  return next;
+}

client/src/lib/types.ts

@@ -2592,11 +2592,23 @@ export type LaneGitFacts =
       dirty: number;
       /** Files git has never seen. */
       untracked: number;
-      /** Raw `git status --porcelain` lines, capped; the counts stay exact. */
-      files: string[];
+      /** The files behind the counts, capped; the counts themselves stay exact. */
+      files: LaneGitFile[];
     }
   | { available: false };
 
+/** One uncommitted file, as `GET /api/lanes/:id/git` reports it. */
+export interface LaneGitFile {
+  /** Path relative to the repo root; for a rename, the new path. */
+  path: string;
+  /** The two-character `git status --porcelain` code, e.g. ` M`, `??`, `A `. */
+  status: string;
+  /** Lines added, or null when git has no delta for it (untracked, binary). */
+  added: number | null;
+  /** Lines removed, or null for the same reasons. */
+  deleted: number | null;
+}
+
 /** Aggregate counts across all lanes. */
 export interface LaneCounts {
   total: number;

client/src/pages/Workspace.tsx

@@ -42,12 +42,18 @@
 
 import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { useTranslation } from "react-i18next";
-import { Plus, Square, Columns2, Grid2x2 } from "lucide-react";
+import { Plus, Square, Columns2, Grid2x2, Pencil } from "lucide-react";
 import { api } from "../lib/api";
 import type { CwdSuggestion, RunListResponse } from "../lib/api";
 import type { Lane, LaneFeature, ProofFeature, Session, WSMessage, LaneTool } from "../lib/types";
 import { eventBus } from "../lib/eventBus";
 import { keepIfSame } from "../lib/keepIfSame";
+import {
+  readLaneOrder,
+  writeLaneOrder,
+  sortByStoredOrder,
+  moveLane,
+} from "../lib/laneOrderStorage";
 import { LaneConsolePane } from "../components/run/LaneConsolePane";
 import PipelineMap from "../components/lanes/PipelineMap";
 import LaneCard, {
@@ -206,6 +212,9 @@ export function Workspace() {
   const [viewedFeature, setViewedFeature] = useState<LaneFeature | null>(null);
   const [proofFeatures, setProofFeatures] = useState<ProofFeature[]>([]);
   const [removeConfirmOpen, setRemoveConfirmOpen] = useState(false);
+  // Inline rename of the selected lane's title, in the detail header.
+  const [renamingLaneId, setRenamingLaneId] = useState<number | null>(null);
+  const [renameDraft, setRenameDraft] = useState("");
 
   // Run state kept at page level: shared across every pane, or drives the
   // lane strip itself rather than any one pane's form.
@@ -253,7 +262,10 @@ export function Workspace() {
   const refreshLanes = useCallback(async () => {
     try {
       const r = await api.lanes.list();
-      setLanes(keepIfSame(r.lanes));
+      // The `lanes` state IS the display order: the server answers in id order,
+      // the viewer's stored strip order is applied once here, and the in-place
+      // lane_update merge below preserves whatever order this produced.
+      setLanes(keepIfSame(sortByStoredOrder(r.lanes, readLaneOrder())));
       setSelectedLaneId((cur) =>
         cur !== null && r.lanes.some((l) => l.id === cur) ? cur : (r.lanes[0]?.id ?? null)
       );
@@ -472,6 +484,37 @@ export function Workspace() {
     }
   };
 
+  /**
+   * Move a lane card within the strip. Purely a viewer preference — it writes
+   * localStorage, never the lane row, so nothing the CLI or another session
+   * reads changes.
+   */
+  const handleLaneReorder = (from: number, to: number) => {
+    if (from === to || from < 0 || to < 0 || from >= lanes.length || to >= lanes.length) return;
+    const ids = moveLane(
+      lanes.map((l) => l.id),
+      from,
+      to
+    );
+    writeLaneOrder(ids);
+    setLanes(sortByStoredOrder(lanes, ids));
+  };
+
+  /** Commit an inline lane rename. An empty name clears the title, which puts
+   *  the cwd back in its place (`lane.title || lane.cwd` everywhere). */
+  const commitRename = async (id: number) => {
+    const title = renameDraft.trim();
+    setRenamingLaneId(null);
+    const lane = lanes.find((l) => l.id === id);
+    if (!lane || title === (lane.title || "")) return;
+    try {
+      await api.lanes.update(id, { title });
+      await refreshLanes();
+    } catch (err) {
+      setLaneActionError(err instanceof Error ? err.message : tLanes("actionErrorUnknown"));
+    }
+  };
+
   // Mirrors `agenthub lanes pipeline <template> <id>`: same PATCH, same
   // stage-mismatch warning when the current declared stage matches no node
   // in the newly chosen template.
@@ -524,12 +567,14 @@ export function Workspace() {
             <Plus className="h-4 w-4" />
             {tLanes("add")}
           </button>
-          {lanes.map((l) => (
+          {lanes.map((l, i) => (
             <LaneStripCard
               key={l.id}
               lane={l}
+              index={i}
               selected={selectedLaneId === l.id}
               onSelect={() => setSelectedLaneId(l.id)}
+              onReorder={handleLaneReorder}
             />
           ))}
           {!lanes.length && (
@@ -568,15 +613,47 @@ export function Workspace() {
                   ? tLanes("statusDead")
                   : tLanes(`status.${currentLane.status}`, { defaultValue: currentLane.status })}
               </span>
-              <span
-                className="min-w-0 truncate text-sm font-semibold text-fg-primary"
-                title={currentLane.cwd}
-              >
-                {tLanes("laneHeader", {
-                  id: currentLane.id,
-                  title: currentLane.title || currentLane.cwd,
-                })}
-              </span>
+              {/* The lane's name, and the one place it can be set. No "Lane 23 ·"
+                  prefix any more: the id is on the strip tile, where the CLI's
+                  `--lane` reader looks for it, and repeating it here only ate
+                  the width the name needed. Submitting an empty name clears
+                  `title`, which puts the cwd back in its place. */}
+              {renamingLaneId === currentLane.id ? (
+                <input
+                  data-testid="lane-rename-input"
+                  aria-label={tLanes("renameLabel")}
+                  autoFocus
+                  value={renameDraft}
+                  onChange={(e) => setRenameDraft(e.target.value)}
+                  // Blur CANCELS, it does not save — same convention as the
+                  // rename field in CcConfig. Committing here too would fire
+                  // the PATCH twice for one Enter: the commit unmounts the
+                  // focused input, and removing a focused element raises a
+                  // native blur before the refetch has moved `lanes`, so the
+                  // "unchanged title" guard would not catch the second call.
+                  onBlur={() => setRenamingLaneId(null)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") void commitRename(currentLane.id);
+                    if (e.key === "Escape") setRenamingLaneId(null);
+                  }}
+                  maxLength={200}
+                  className="min-w-0 flex-1 rounded border border-accent bg-surface-1 px-2 py-0.5 text-sm font-semibold text-fg-primary"
+                />
+              ) : (
+                <button
+                  type="button"
+                  data-testid="lane-rename"
+                  onClick={() => {
+                    setRenameDraft(currentLane.title || "");
+                    setRenamingLaneId(currentLane.id);
+                  }}
+                  title={`${currentLane.cwd}\n${tLanes("renameLabel")}`}
+                  className="group flex min-w-0 items-center gap-1 text-sm font-semibold text-fg-primary"
+                >
+                  <span className="min-w-0 truncate">{currentLane.title || currentLane.cwd}</span>
+                  <Pencil className="h-3 w-3 shrink-0 text-fg-muted opacity-0 transition-opacity group-hover:opacity-100" />
+                </button>
+              )}
               <span className="shrink-0 tabular-nums text-xs text-fg-muted">
                 {since(currentLane.stage_seconds)}
               </span>

client/src/pages/__tests__/Workspace.laneReorderRename.test.tsx

@@ -0,0 +1,614 @@
+/**
+ * @file Workspace.laneReorderRename.test.tsx
+ * @description Integration tests for lane strip reordering, persistence to
+ * localStorage, and inline lane rename functionality. Covers the three paths
+ * to reorder (drag, Alt+Arrow, and refetch with stored order), and rename
+ * commit/cancel/error paths.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, act, screen, waitFor, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+
+const recordedCalls: Array<{ method: string; path: string; payload?: unknown }> = [];
+
+type LaneFixture = {
+  id: number;
+  cwd: string;
+  title: string;
+  pipeline_name: string;
+  pipeline_nodes: never[];
+  detected_signal: string | null;
+  run_id: string | null;
+};
+
+let lanesToReturn: LaneFixture[] = [
+  {
+    id: 1,
+    cwd: "/workspace/a",
+    title: "Lane A",
+    pipeline_name: "default",
+    pipeline_nodes: [],
+    detected_signal: null,
+    run_id: null,
+  },
+  {
+    id: 2,
+    cwd: "/workspace/b",
+    title: "Lane B",
+    pipeline_name: "default",
+    pipeline_nodes: [],
+    detected_signal: null,
+    run_id: null,
+  },
+  {
+    id: 3,
+    cwd: "/workspace/c",
+    title: "Lane C",
+    pipeline_name: "default",
+    pipeline_nodes: [],
+    detected_signal: null,
+    run_id: null,
+  },
+];
+
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  const recordCall = (method: string, path: string, payload?: unknown) => {
+    recordedCalls.push({ method, path, payload });
+  };
+  return {
+    ...actual,
+    api: {
+      lanes: {
+        list: vi.fn().mockImplementation(async () => {
+          recordCall("GET", "/api/lanes");
+          return {
+            lanes: lanesToReturn,
+            counts: { total: lanesToReturn.length, running: 0, needs_you: 0, dead: 0 },
+          };
+        }),
+        ensure: vi.fn(),
+        action: vi.fn(),
+        git: vi.fn().mockImplementation(async (id: number) => {
+          recordCall("GET", `/api/lanes/${id}/git`);
+          return { available: false };
+        }),
+        runtime: vi.fn().mockImplementation(async (id: number) => {
+          recordCall("GET", `/api/lanes/${id}/runtime`);
+          return { available: false };
+        }),
+        stage: vi.fn(),
+        pipelines: vi.fn().mockImplementation(async () => {
+          recordCall("GET", "/api/lanes/pipelines");
+          return { pipelines: [{ id: "default", name: "default", nodes: [] }] };
+        }),
+        update: vi.fn().mockImplementation(async (id: number, patch: Record<string, unknown>) => {
+          recordCall("PATCH", `/api/lanes/${id}`, patch);
+          const lane = lanesToReturn.find((l) => l.id === id);
+          const updated = { ...lane, ...patch } as LaneFixture;
+          // Update in place for subsequent reads
+          const idx = lanesToReturn.findIndex((l) => l.id === id);
+          if (idx >= 0) lanesToReturn[idx] = updated;
+          return { lane: updated };
+        }),
+        features: {
+          list: vi.fn().mockImplementation(async (id: number) => {
+            recordCall("GET", `/api/lanes/${id}/features`);
+            return { features: [] };
+          }),
+          show: vi.fn(),
+        },
+        proof: {
+          list: vi.fn().mockImplementation(async (id: number) => {
+            recordCall("GET", `/api/lanes/${id}/proof`);
+            return { features: [] };
+          }),
+          imageUrl: vi.fn(),
+          delete: vi.fn(),
+        },
+      },
+      aiRouters: {
+        list: vi.fn().mockImplementation(async () => {
+          recordCall("GET", "/api/ai-routers");
+          return { items: [] };
+        }),
+      },
+      run: {
+        list: vi.fn().mockImplementation(async () => {
+          recordCall("GET", "/api/run/list");
+          return { runs: [], items: [] };
+        }),
+        history: vi.fn().mockResolvedValue({ items: [] }),
+        binary: vi.fn().mockResolvedValue({ found: true, path: "/usr/bin/claude" }),
+        cwds: vi.fn().mockResolvedValue({ items: [] }),
+        files: vi.fn().mockResolvedValue({ items: [] }),
+        start: vi.fn(),
+        get: vi.fn(),
+        send: vi.fn(),
+        kill: vi.fn(),
+      },
+      ccConfig: {
+        commands: vi.fn().mockResolvedValue({ items: [] }),
+        plugins: vi.fn().mockResolvedValue({ plugins: [] }),
+        file: vi.fn().mockResolvedValue({ text: "", content: "" }),
+      },
+      sessions: {
+        list: vi.fn().mockResolvedValue({ sessions: [], total: 0, limit: 50, offset: 0 }),
+        transcript: vi.fn().mockResolvedValue({ messages: [] }),
+      },
+    },
+  };
+});
+
+vi.mock("../../lib/eventBus", () => ({
+  eventBus: {
+    subscribe: () => () => {},
+    publish: () => {},
+    onConnection: () => () => {},
+    connected: true,
+    setConnected: () => {},
+  },
+}));
+
+vi.mock("../../components/run/TerminalView", () => ({
+  TerminalView: ({ runId }: { runId: string }) => (
+    <div data-testid="terminal-view" data-run-id={runId} />
+  ),
+}));
+
+import { Workspace } from "../Workspace";
+
+class ObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return [];
+  }
+}
+
+if (typeof globalThis !== "undefined") {
+  globalThis.ResizeObserver =
+    globalThis.ResizeObserver || (ObserverStub as unknown as typeof ResizeObserver);
+  if (typeof Element !== "undefined") {
+    for (const fn of ["scrollIntoView", "scrollBy", "scrollTo"] as const) {
+      if (!(Element.prototype as unknown as Record<string, unknown>)[fn]) {
+        (Element.prototype as unknown as Record<string, unknown>)[fn] = function () {};
+      }
+    }
+  }
+}
+
+async function settle() {
+  await act(async () => {
+    await new Promise((r) => setTimeout(r, 0));
+    await new Promise((r) => setTimeout(r, 0));
+  });
+}
+
+async function renderWorkspace() {
+  const utils = render(
+    <MemoryRouter initialEntries={["/run"]}>
+      <Workspace />
+    </MemoryRouter>
+  );
+  await settle();
+  await settle();
+  await settle();
+  return utils;
+}
+
+beforeEach(() => {
+  recordedCalls.length = 0;
+  lanesToReturn = [
+    {
+      id: 1,
+      cwd: "/workspace/a",
+      title: "Lane A",
+      pipeline_name: "default",
+      pipeline_nodes: [],
+      detected_signal: null,
+      run_id: null,
+    },
+    {
+      id: 2,
+      cwd: "/workspace/b",
+      title: "Lane B",
+      pipeline_name: "default",
+      pipeline_nodes: [],
+      detected_signal: null,
+      run_id: null,
+    },
+    {
+      id: 3,
+      cwd: "/workspace/c",
+      title: "Lane C",
+      pipeline_name: "default",
+      pipeline_nodes: [],
+      detected_signal: null,
+      run_id: null,
+    },
+  ];
+  localStorage.clear();
+  vi.clearAllMocks();
+});
+
+afterEach(() => {
+  recordedCalls.length = 0;
+  localStorage.clear();
+  vi.clearAllMocks();
+});
+
+describe("Workspace — lane reordering", () => {
+  it("persists lane order to localStorage when dragging a tile", async () => {
+    await renderWorkspace();
+
+    // Verify initial order is A, B, C (strip includes "Add lane" prefix and ids)
+    expect(screen.getByTestId("lane-strip").textContent).toMatch(/Lane A.*Lane B.*Lane C/);
+
+    // Drag tile 3 (Lane C) to position 0
+    const tile1 = screen.getByTestId("lane-tile-1");
+    const tile3 = screen.getByTestId("lane-tile-3");
+
+    fireEvent.dragStart(tile3, { dataTransfer: { setData: vi.fn(), effectAllowed: "" } });
+    fireEvent.dragOver(tile1, { dataTransfer: { dropEffect: "", preventDefault: () => {} } });
+    fireEvent.drop(tile1, {
+      dataTransfer: { getData: vi.fn(() => "2"), preventDefault: () => {} },
+    });
+
+    await settle();
+
+    // Check localStorage has the new order
+    const stored = localStorage.getItem("agenthub.workspace.laneOrder");
+    expect(stored).toBeDefined();
+    const order = JSON.parse(stored!);
+    expect(order).toEqual([3, 1, 2]);
+  });
+
+  it("applies stored order when lanes are fetched", async () => {
+    // Pre-populate localStorage with a custom order
+    localStorage.setItem("agenthub.workspace.laneOrder", JSON.stringify([2, 3, 1]));
+
+    await renderWorkspace();
+
+    // The lane strip should reflect the stored order: B, C, A
+    const strip = screen.getByTestId("lane-strip");
+    const tiles = Array.from(strip.querySelectorAll("[data-testid^='lane-tile-']"));
+    const laneIds = tiles
+      .map((el) => el.getAttribute("data-testid"))
+      .filter((id) => id && id.match(/lane-tile-\d+/))
+      .map((id) => id!.replace("lane-tile-", ""));
+
+    expect(laneIds).toEqual(["2", "3", "1"]);
+  });
+
+  it("appends new lanes to the end, preserving user order", async () => {
+    // Start with a custom order
+    localStorage.setItem("agenthub.workspace.laneOrder", JSON.stringify([2, 1]));
+
+    await renderWorkspace();
+    let strip = screen.getByTestId("lane-strip");
+    let tiles = Array.from(strip.querySelectorAll("[data-testid^='lane-tile-']"));
+    let laneIds = tiles
+      .map((el) => el.getAttribute("data-testid"))
+      .filter((id) => id && id.match(/lane-tile-\d+/))
+      .map((id) => id!.replace("lane-tile-", ""));
+    expect(laneIds).toEqual(["2", "1", "3"]); // 3 is new, appended at end
+  });
+
+  it("ignores stored ids for lanes that no longer exist", async () => {
+    // Store an order that includes a lane ID that will be removed
+    localStorage.setItem("agenthub.workspace.laneOrder", JSON.stringify([2, 999, 1]));
+
+    // Remove lane 2 from the server response
+    lanesToReturn = lanesToReturn.filter((l) => l.id !== 2);
+
+    await renderWorkspace();
+
+    // The strip should show lane 1 and 3 in stored order, skipping 999
+    const strip = screen.getByTestId("lane-strip");
+    const tiles = Array.from(strip.querySelectorAll("[data-testid^='lane-tile-']"));
+    const laneIds = tiles
+      .map((el) => el.getAttribute("data-testid"))
+      .filter((id) => id && id.match(/lane-tile-\d+/))
+      .map((id) => id!.replace("lane-tile-", ""));
+
+    // Expected: skip 999 and 2, show 1, then 3 (the remaining fresh lane)
+    expect(laneIds).toEqual(["1", "3"]);
+  });
+
+  it("reorders with Alt+Arrow keyboard shortcut", async () => {
+    await renderWorkspace();
+
+    // Get tile 2 (Lane B) and move it right to position 2
+    const tile2 = screen.getByTestId("lane-tile-2");
+    fireEvent.keyDown(tile2, { key: "ArrowRight", altKey: true });
+
+    await settle();
+
+    // Check localStorage
+    const stored = localStorage.getItem("agenthub.workspace.laneOrder");
+    const order = JSON.parse(stored!);
+    // Tile 2 was at index 1, moving right puts it at index 2
+    expect(order).toEqual([1, 3, 2]);
+  });
+});
+
+describe("Workspace — lane rename", () => {
+  it("enters rename mode when the pencil icon is clicked", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    // Click the first lane to select it (so its detail panel shows)
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    // Find the rename button (displays the lane title with a pencil icon)
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    // The input should appear with the current title
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    expect(input.value).toBe("Lane A");
+  });
+
+  it("commits a rename when Enter is pressed", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    // Select lane 1 and open rename
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    await user.clear(input);
+    await user.type(input, "New Lane Name");
+    fireEvent.keyDown(input, { key: "Enter" });
+    await settle();
+
+    // Should have called update with trimmed title
+    await waitFor(() => {
+      const updateCall = recordedCalls.find(
+        (c) => c.path === "/api/lanes/1" && c.method === "PATCH"
+      );
+      expect(updateCall).toBeDefined();
+      expect(updateCall?.payload).toEqual({ title: "New Lane Name" });
+    });
+
+    // Input should be gone, button should be back
+    expect(screen.queryByTestId("lane-rename-input")).toBeNull();
+    expect(screen.getByTestId("lane-rename")).toBeInTheDocument();
+  });
+
+  it("cancels rename when Escape is pressed", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    await user.type(input, "should not save");
+    fireEvent.keyDown(input, { key: "Escape" });
+    await settle();
+
+    // Input should be gone
+    expect(screen.queryByTestId("lane-rename-input")).toBeNull();
+    // No API call should have been made
+    const updateCalls = recordedCalls.filter(
+      (c) => c.path === "/api/lanes/1" && c.method === "PATCH"
+    );
+    expect(updateCalls).toHaveLength(0);
+  });
+
+  it("exits rename mode when focus leaves (blur/tab away), attempting to commit", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+
+    // Move focus away (tab)
+    await user.tab();
+    await settle();
+
+    // Input should be gone (rename mode exited)
+    expect(screen.queryByTestId("lane-rename-input")).toBeNull();
+    // The rename button should be back
+    expect(screen.getByTestId("lane-rename")).toBeInTheDocument();
+  });
+
+  it("trims whitespace from the renamed title", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    await user.clear(input);
+    await user.type(input, "   Trimmed   ");
+    fireEvent.keyDown(input, { key: "Enter" });
+    await settle();
+
+    // Should send trimmed title
+    await waitFor(() => {
+      const updateCall = recordedCalls.find(
+        (c) => c.path === "/api/lanes/1" && c.method === "PATCH"
+      );
+      expect(updateCall?.payload).toEqual({ title: "Trimmed" });
+    });
+  });
+
+  it("clears the title (puts cwd in its place) when empty name is submitted", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    await user.clear(input);
+    // Leave it empty (or with just whitespace)
+    await user.type(input, "   ");
+    fireEvent.keyDown(input, { key: "Enter" });
+    await settle();
+
+    // Should send empty string
+    await waitFor(() => {
+      const updateCall = recordedCalls.find(
+        (c) => c.path === "/api/lanes/1" && c.method === "PATCH"
+      );
+      expect(updateCall?.payload).toEqual({ title: "" });
+    });
+  });
+
+  it("does not call the API if the title has not changed", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    // Don't change the title, just press Enter
+    fireEvent.keyDown(input, { key: "Enter" });
+    await settle();
+
+    // Should NOT have called update (or at least not with a changed value)
+    const updateCalls = recordedCalls.filter(
+      (c) => c.path === "/api/lanes/1" && c.method === "PATCH"
+    );
+    expect(updateCalls).toHaveLength(0);
+  });
+
+  it("allows the user to retry after an error, starting fresh", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    // Enter and exit rename mode twice to verify the state resets
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    let input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    expect(input.value).toBe("Lane A");
+
+    fireEvent.keyDown(input, { key: "Escape" });
+    await settle();
+
+    // Enter again to verify we can re-enter
+    await user.click(screen.getByTestId("lane-rename"));
+    await settle();
+    input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    expect(input.value).toBe("Lane A");
+  });
+
+  it("respects max length of 200 characters (enforced by server)", async () => {
+    const user = userEvent.setup();
+    await renderWorkspace();
+
+    const tile1 = screen.getByTestId("lane-tile-1");
+    await user.click(tile1);
+    await settle();
+
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    // HTML input has maxLength=200, so typing more should be capped
+    expect(input.maxLength).toBe(200);
+  });
+});
+
+describe("Workspace — lane order and rename interaction", () => {
+  it("preserves custom order after renaming a lane", async () => {
+    const user = userEvent.setup();
+    // Set custom order
+    localStorage.setItem("agenthub.workspace.laneOrder", JSON.stringify([3, 2, 1]));
+
+    await renderWorkspace();
+
+    // Verify order is C, B, A
+    let strip = screen.getByTestId("lane-strip");
+    let tiles = Array.from(strip.querySelectorAll("[data-testid^='lane-tile-']"));
+    let laneIds = tiles
+      .map((el) => el.getAttribute("data-testid"))
+      .filter((id) => id && id.match(/lane-tile-\d+/))
+      .map((id) => id!.replace("lane-tile-", ""));
+    expect(laneIds).toEqual(["3", "2", "1"]);
+
+    // Click lane 2 (which is now at position 1)
+    const tile2 = screen.getByTestId("lane-tile-2");
+    await user.click(tile2);
+    await settle();
+
+    // Rename it
+    const renameButton = screen.getByTestId("lane-rename");
+    await user.click(renameButton);
+    await settle();
+
+    const input = screen.getByTestId("lane-rename-input") as HTMLInputElement;
+    await user.clear(input);
+    await user.type(input, "Renamed B");
+    fireEvent.keyDown(input, { key: "Enter" });
+    await settle();
+
+    // Wait for the refresh
+    await waitFor(() => {
+      const updateCall = recordedCalls.find(
+        (c) => c.path === "/api/lanes/2" && c.method === "PATCH"
+      );
+      expect(updateCall).toBeDefined();
+    });
+
+    // Order should still be preserved
+    const stored = localStorage.getItem("agenthub.workspace.laneOrder");
+    const order = JSON.parse(stored!);
+    expect(order).toEqual([3, 2, 1]);
+  });
+});