/**
 * @file Workspace.tsx
 * @description Merged workspace page combining lanes (agent work units) and runs
 * (CLI spawns: Claude Code or Codex, determined per lane). Displays a horizontal
 * lane strip at the top (its first tile creates a lane), the selected lane's
 * pipeline map, and run configuration/console/history below. Runs are tied to lanes: starting a run
 * posts to POST /api/lanes/:id/start with tool-appropriate fields. When a cwd
 * isn't owned by any lane, calls POST /api/lanes/ensure first. Polls GET
 * /api/sessions?status=active alongside the run list so Claude Code sessions
 * started outside the dashboard also appear in the active-runs list.
 *
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
/* =============================================================================
 * MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
 * =============================================================================
 * ## Design constraints
 * - Local-first: no telemetry leaves the machine unless the user configures webhooks.
 * - Fail-safe hooks path on the server must never block Claude Code; UI mirrors that
 *   philosophy by degrading gracefully (empty states, stale badges, reconnect loops).
 * - Destructive flows stay behind explicit confirmation modals and server-side gates.
 * - Internationalization: user-visible strings belong in i18n JSON, not literals here.
 * - The console never writes a lane's stage: no POST /api/lanes/:id/stage calls.
 *
 * ## Internal dependencies
 * - `../lib/api` — REST client including lanes and run endpoints.
 * - `../lib/types` — Lane, Lane Counts, run handles, etc.
 * - `../lib/eventBus` — WebSocket subscription.
 * - `../components/lanes/` — LaneCard, PipelineMap, DestructiveLaneModal.
 * - `../components/run/` — RunConsole, RunSetup, RunHistory, ActiveRunsSwitcher.
 *
 * ## Public surface
 * - `Workspace` — merged page; see TSDoc on the symbol for behavior.
 *
 * ============================================================================= */
/* -----------------------------------------------------------------------------
 * EXPORT CATALOG
 * **Workspace**
 *   The main exported page component. Merges lanes and runs into one workspace.
 *
 * ----------------------------------------------------------------------------- */

import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
import { useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import {
  Plus,
  Square,
  Columns2,
  Grid2x2,
  Pencil,
  Layers,
  PanelLeftClose,
  PanelRightClose,
  Maximize2,
} from "lucide-react";
import { api } from "../lib/api";
import type { CwdSuggestion, RunListResponse } from "../lib/api";
import type { Lane, LaneFeature, ProofFeature, Session, WSMessage } 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, {
  since,
  LIVENESS_DOT,
  LaneToolsMenu,
  LaneRouterRow,
} from "../components/lanes/LaneCard";
import LaneStripCard from "../components/lanes/LaneStripCard";
import { AddLaneModal } from "../components/lanes/AddLaneModal";
import { LaneChangesPanel } from "../components/lanes/LaneChangesPanel";
import { DestructiveLaneModal } from "../components/lanes/DestructiveLaneModal";
import { readSplitViewState, writeSplitViewState } from "../lib/splitViewStorage";
import type { SplitViewState, SplitLayout } from "../lib/splitViewStorage";

/** localStorage key for the Changes panel's open/closed state. */
const CHANGES_OPEN_KEY = "agenthub.workspace.changesOpen";
/** localStorage key for how wide the Changes panel is. */
const CHANGES_SIZE_KEY = "agenthub.workspace.changesSize";

/** The three widths the Changes panel cycles through, then closed. Reading a
 *  diff and watching a console want opposite amounts of room, and which one is
 *  "work" changes several times an hour — hence ONE control that steps
 *  30/70 → 50/50 → full → closed, rather than a width button beside a
 *  collapse button that both live in the panel's tightest corner. */
const CHANGES_SIZES = ["compact", "half", "full"] as const;
type ChangesSize = (typeof CHANGES_SIZES)[number];
const CHANGES_WIDTH: Record<ChangesSize, string> = {
  compact: "w-[30%]",
  half: "w-1/2",
  // The console beside it is HIDDEN, not unmounted: a live run's terminal
  // and a half-typed prompt must survive a round trip through full width.
  full: "w-full",
};
/** The icon the one resize control shows AT each size: what the next click
 *  gives you — an even split, the full width, then closed. */
const CHANGES_NEXT_ICON: Record<ChangesSize, typeof Columns2> = {
  compact: Columns2,
  half: Maximize2,
  full: PanelRightClose,
};

// ── Page ──────────────────────────────────────────────────────────────

/** One pane, two side by side, four in a grid — the conventional icons for
 *  each, so the toggle reads at a glance without spending three words on it. */
const LAYOUT_CHOICES = [
  { n: 1 as const, Icon: Square },
  { n: 2 as const, Icon: Columns2 },
  { n: 4 as const, Icon: Grid2x2 },
];

function SplitLayoutToggle({
  splitView,
  setLayout,
}: {
  splitView: SplitViewState;
  setLayout: (layout: SplitLayout) => void;
}) {
  const { t: tLanes } = useTranslation("lanes");

  return (
    <div className="flex items-center gap-1.5">
      {LAYOUT_CHOICES.map(({ n, Icon }) => {
        // The count still reaches assistive tech and the tooltip — only the
        // rendered word is gone, and the icon says the same thing in the
        // shape every other app uses for it.
        const label = tLanes("splitView.paneCount", { count: n });
        return (
          <button
            key={n}
            type="button"
            aria-pressed={splitView.layout === n}
            aria-label={label}
            title={label}
            onClick={() => setLayout(n)}
            className={`rounded border p-1.5 ${
              splitView.layout === n
                ? "border-accent bg-accent/15 text-accent"
                : "border-border text-fg-secondary hover:border-border-light"
            }`}
          >
            <Icon className="h-3.5 w-3.5" />
          </button>
        );
      })}
    </div>
  );
}

function ConsoleArea({
  lanes,
  selectedLaneId,
  splitView,
  setLayout,
  binaryStatus,
  cwdSuggestions,
  activeRuns,
  externalSessions,
  wsConnected,
  defaultCwd,
  onHasActiveRunChange,
  onLaneCreated,
  onLaneIdChange,
  showToggle = true,
}: {
  lanes: Lane[];
  selectedLaneId: number | null;
  splitView: SplitViewState;
  setLayout: (layout: SplitLayout) => void;
  binaryStatus: Record<string, { found: boolean; path: string | null }> | null;
  cwdSuggestions: CwdSuggestion[];
  activeRuns: RunListResponse | null;
  externalSessions: Session[];
  wsConnected: boolean;
  defaultCwd: string;
  onHasActiveRunChange: (val: boolean) => void;
  onLaneCreated: (lane: Lane) => void;
  onLaneIdChange: (id: number | null) => void;
  showToggle?: boolean;
}) {
  // Every split pane shows the SELECTED lane, each in its own tmux session
  // (slot = pane index). Tracking what each pane shows lets the others leave
  // that run out of their Active runs, so no terminal is attached twice.
  const [paneRunIds, setPaneRunIds] = useState<(string | null)[]>([]);
  const onPaneHandle = useCallback((i: number, id: string | null) => {
    setPaneRunIds((prev) => {
      if (prev[i] === id) return prev;
      const next = [...prev];
      next[i] = id;
      return next;
    });
  }, []);
  const paneHandlers = useMemo(
    () => [0, 1, 2, 3].map((i) => (id: string | null) => onPaneHandle(i, id)),
    [onPaneHandle]
  );
  const hiddenFor = useMemo(
    () =>
      [0, 1, 2, 3].map((i) =>
        paneRunIds.filter((id, j): id is string => j !== i && j < splitView.layout && !!id)
      ),
    [paneRunIds, splitView.layout]
  );

  return (
    <>
      {showToggle && <SplitLayoutToggle splitView={splitView} setLayout={setLayout} />}
      {splitView.layout === 1 ? (
        <LaneConsolePane
          lanes={lanes}
          laneId={selectedLaneId}
          onHandleChange={paneHandlers[0]}
          showLaneSelector={false}
          onLaneIdChange={onLaneIdChange}
          onLaneCreated={onLaneCreated}
          binaryStatus={binaryStatus}
          cwdSuggestions={cwdSuggestions}
          activeRuns={activeRuns}
          externalSessions={externalSessions}
          wsConnected={wsConnected}
          defaultCwd={defaultCwd}
          onHasActiveRunChange={onHasActiveRunChange}
        />
      ) : (
        <div
          className={`grid flex-1 min-h-0 gap-3 ${
            splitView.layout === 2 ? "grid-cols-2" : "grid-cols-2 grid-rows-2"
          }`}
        >
          {Array.from({ length: splitView.layout }, (_, i) => (
            <LaneConsolePane
              key={i}
              lanes={lanes}
              laneId={selectedLaneId}
              slot={i}
              hiddenRunIds={hiddenFor[i]}
              onHandleChange={paneHandlers[i]}
              showLaneSelector={false}
              onLaneIdChange={onLaneIdChange}
              onLaneCreated={onLaneCreated}
              binaryStatus={binaryStatus}
              cwdSuggestions={cwdSuggestions}
              activeRuns={activeRuns}
              externalSessions={externalSessions}
              wsConnected={wsConnected}
              defaultCwd={defaultCwd}
            />
          ))}
        </div>
      )}
    </>
  );
}

export function Workspace() {
  const { t: tLanes } = useTranslation("lanes");
  const wsConnected = useSyncExternalStore(eventBus.onConnection, () => eventBus.connected);
  const [searchParams, setSearchParams] = useSearchParams();

  // Lane state
  const [lanes, setLanes] = useState<Lane[]>([]);
  const [selectedLaneId, setSelectedLaneId] = useState<number | null>(null);
  const [laneActionError, setLaneActionError] = useState<string | null>(null);
  const [addLaneOpen, setAddLaneOpen] = useState(false);
  // Fields the Add-lane modal opens with when it was opened from a lane's git
  // bar ("new lane here"): one provisioning path for every lane, prefilled.
  const [addLanePrefill, setAddLanePrefill] = useState<{
    sourceRepo?: string;
    branch?: string;
  } | null>(null);
  const [viewedFeatureSlug, setViewedFeatureSlug] = useState<string | null>(null);
  const [features, setFeatures] = useState<LaneFeature[]>([]);
  const [pipelineTemplates, setPipelineTemplates] = useState<
    { id: string; name: string; nodes: { id: string }[] }[]
  >([]);
  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.
  const [activeRuns, setActiveRuns] = useState<RunListResponse | null>(null);
  // Claude Code sessions running outside the dashboard (a `claude` the user
  // started in a terminal tab). They are not dashboard runs, so the run list
  // would otherwise show nothing while two agents are working.
  const [externalSessions, setExternalSessions] = useState<Session[]>([]);
  const [binaryStatus, setBinaryStatus] = useState<Record<
    string,
    { found: boolean; path: string | null }
  > | null>(null);
  const [cwdSuggestions, setCwdSuggestions] = useState<CwdSuggestion[]>([]);
  const [defaultCwd, setDefaultCwd] = useState<string>("");
  const [paneHasActiveRun, setPaneHasActiveRun] = useState(false);

  // Split view state
  const [splitView, setSplitView] = useState<SplitViewState>(() => readSplitViewState());
  // Info block (pickers, LaneCard, PipelineMap, proof gallery) starts shown in
  // single-pane view and collapsed in split view, but the toggle below can
  // override that in either mode — the user decides, not the layout.
  const [infoExpanded, setInfoExpanded] = useState(() => splitView.layout === 1);
  // Whether the Changes panel is open. A viewer preference, so it lives in
  // localStorage and never reaches the server — same rule as the lane strip's
  // order (client/src/lib/laneOrderStorage.ts).
  const [changesOpen, setChangesOpen] = useState(() => {
    try {
      return window.localStorage.getItem(CHANGES_OPEN_KEY) === "1";
    } catch {
      return false;
    }
  });
  useEffect(() => {
    try {
      window.localStorage.setItem(CHANGES_OPEN_KEY, changesOpen ? "1" : "0");
    } catch {
      /* private mode / disabled storage: the panel just forgets between visits */
    }
  }, [changesOpen]);
  const [changesSize, setChangesSize] = useState<ChangesSize>(() => {
    try {
      const saved = window.localStorage.getItem(CHANGES_SIZE_KEY) as ChangesSize | null;
      return saved && CHANGES_SIZES.includes(saved) ? saved : "compact";
    } catch {
      return "compact";
    }
  });
  useEffect(() => {
    try {
      window.localStorage.setItem(CHANGES_SIZE_KEY, changesSize);
    } catch {
      /* same as above: a forgotten width, not an error */
    }
  }, [changesSize]);
  const nextChangesSize =
    CHANGES_SIZES[(CHANGES_SIZES.indexOf(changesSize) + 1) % CHANGES_SIZES.length]!;
  const changesNextLabel =
    changesSize === CHANGES_SIZES[CHANGES_SIZES.length - 1]
      ? tLanes("changes.collapse")
      : tLanes("changes.resize", { size: tLanes(`changes.size.${nextChangesSize}`) });
  const showInfo = infoExpanded;

  const setLayout = useCallback((layout: SplitLayout) => {
    setSplitView((prev) => {
      const paneLaneIds = Array.from({ length: layout }, (_, i) => prev.paneLaneIds[i] ?? null);
      const next = { layout, paneLaneIds };
      writeSplitViewState(next);
      return next;
    });
  }, []);

  // Pre-flight: probe binary + active runs + cwd suggestions + lanes on mount
  const refreshLanes = useCallback(async () => {
    try {
      const r = await api.lanes.list();
      // 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)
      );
    } catch {
      // Silent fail for lanes load
    }
  }, []);

  // Deep link from a notification click (`/workspace?lane=<id>`, see
  // useNotifications' laneUrlForSession): once that lane is in the loaded
  // list, select it and drop the param so a later manual lane switch sticks.
  useEffect(() => {
    const laneParam = searchParams.get("lane");
    if (laneParam === null || lanes.length === 0) return;
    const paramId = Number(laneParam);
    if (lanes.some((l) => l.id === paramId)) {
      setSelectedLaneId(paramId);
    }
    setSearchParams(
      (prev) => {
        const next = new URLSearchParams(prev);
        next.delete("lane");
        return next;
      },
      { replace: true }
    );
  }, [lanes, searchParams, setSearchParams]);

  // Probe the CLI of every tool a lane uses — fresh on the server, so a CLI
  // installed since the page loaded clears its missing-binary banner. Claude is
  // always probed: the console's no-lane state runs it.
  const laneToolsKey = Array.from(new Set(["claude", ...lanes.map((l) => l.tool || "claude")]))
    .sort()
    .join(",");
  useEffect(() => {
    const tools = laneToolsKey.split(",");
    Promise.all(tools.map((tool) => api.run.binary(tool)))
      .then((found) =>
        setBinaryStatus(Object.fromEntries(tools.map((tool, i) => [tool, found[i]!])))
      )
      // Fetch failure (server unreachable, proxy misrouted, etc.) isn't proof
      // a CLI is missing from PATH — leave the probe unresolved rather than
      // showing a misleading "binary missing" banner for an unrelated fault.
      .catch(() => undefined);
  }, [laneToolsKey]);

  useEffect(() => {
    api.lanes
      .pipelines()
      .then((r) => setPipelineTemplates(r.pipelines))
      .catch(() => undefined);
    void refreshLanes();
    api.run
      .cwds()
      .then((r) => {
        setCwdSuggestions(r.items);
        // Pre-fill cwd with the user's home directory — a neutral default.
        // Spawning in the dashboard's own cwd would make ad-hoc runs inherit
        // this repo's project context (.claude/agents, skills, rules,
        // CLAUDE.md, .mcp.json), which is almost never what an ad-hoc run
        // wants and can bloat the initial request (issue #202). Fall back to
        // the dashboard cwd when no home suggestion exists. The user can
        // change it; we just don't want an invisible default.
        const home = r.items.find((s) => s.kind === "home");
        const dashboard = r.items.find((s) => s.kind === "dashboard");
        const preferred = home || dashboard;
        if (preferred) {
          setDefaultCwd(preferred.path);
        }
      })
      .catch(() => undefined);

    // Subscribe to lane updates from the event bus
    return eventBus.subscribe((msg: WSMessage) => {
      if (msg.type !== "lane_update") return;
      const payload = msg.data as { lane?: Lane; removed?: number };
      if (payload.removed !== undefined) {
        void refreshLanes();
        return;
      }
      const lane = payload.lane;
      if (!lane) return;
      setLanes((cur) => {
        const i = cur.findIndex((l) => l.id === lane.id);
        if (i === -1) {
          void refreshLanes();
          return cur;
        }
        // The server re-broadcasts a lane on hook activity that often changed
        // nothing this page renders; replacing the array anyway would re-render
        // the strip and the console on every such event.
        if (JSON.stringify(cur[i]) === JSON.stringify(lane)) return cur;
        const next = [...cur];
        next[i] = lane;
        return next;
      });
    });
  }, [refreshLanes]);

  // A reconnect (e.g. the dashboard server restarting) resumes the WS but does
  // not replay missed lane_update diffs, so a lane whose fields changed while
  // disconnected — status, needs_action — would keep showing its pre-restart
  // badges forever with no further server-side change to broadcast. Refetch
  // the full list whenever the socket comes back up.
  useEffect(
    () =>
      eventBus.onConnection((isConnected) => {
        if (isConnected) void refreshLanes();
      }),
    [refreshLanes]
  );

  // Clean up stale pane lane IDs when lanes load
  useEffect(() => {
    if (!lanes.length) return;
    setSplitView((prev) => {
      const paneLaneIds = prev.paneLaneIds.map((id) =>
        id !== null && lanes.some((l) => l.id === id) ? id : null
      );
      if (paneLaneIds.every((id, i) => id === prev.paneLaneIds[i])) return prev;
      const next = { ...prev, paneLaneIds };
      writeSplitViewState(next);
      return next;
    });
  }, [lanes]);

  // Both setters go through `keepIfSame`: these fire every 5 s below, and a
  // fresh-but-identical payload would otherwise re-render the lane strip, the
  // lane card and the whole console area on every tick for nothing.
  const refreshList = useCallback(() => {
    api.run
      .list()
      .then((r) => setActiveRuns(keepIfSame(r)))
      .catch(() => undefined);
    api.sessions
      // Attach/resume go through `claude`, so a Codex session is not offered
      // (filtered by the server, before its limit).
      .list({ status: "active", limit: 50, sort_by: "updated_at", sort_desc: true, tool: "claude" })
      .then((r) => setExternalSessions(keepIfSame(r.sessions)))
      .catch(() => undefined);
  }, []);

  // Background poll so the run list and history reflect external changes
  // (server-boot reconciliation, sibling tabs, direct DB edits) even when
  // no WS event fires. Lighter than typical WS gaps; aggressive enough that
  // status flips appear within seconds without needing a manual refresh.
  useEffect(() => {
    refreshList();
    const tick = setInterval(() => {
      refreshList();
    }, 5000);
    return () => clearInterval(tick);
  }, [refreshList]);

  // Refresh whenever the tab regains focus / visibility - typical when the
  // user comes back from running `claude` in a terminal and wants to see the
  // current state of every run without waiting for the next poll.
  useEffect(() => {
    const onFocus = () => refreshList();
    const onVis = () => {
      if (document.visibilityState === "visible") refreshList();
    };
    window.addEventListener("focus", onFocus);
    document.addEventListener("visibilitychange", onVis);
    return () => {
      window.removeEventListener("focus", onFocus);
      document.removeEventListener("visibilitychange", onVis);
    };
  }, [refreshList]);

  const currentLane = selectedLaneId !== null ? lanes.find((l) => l.id === selectedLaneId) : null;
  // Only claude lanes carry a pipeline (codex and antigravity emit no hooks),
  // and only while a template is installed — none ships, so it is dormant.
  const noPipeline =
    !!currentLane && (currentLane.tool !== "claude" || currentLane.pipeline_nodes.length === 0);

  // Feature list follows the selected lane, resets the viewer on lane switch.
  useEffect(() => {
    setViewedFeatureSlug(null);
    setViewedFeature(null);
    if (currentLane === null || currentLane === undefined) {
      setFeatures([]);
      return;
    }
    api.lanes.features
      .list(currentLane.id)
      .then((data) => setFeatures(data.features))
      .catch(() => setFeatures([]));
  }, [currentLane?.id]);

  // Fetch the archived snapshot when the picker selects one — read-only, never
  // touches the live lane.
  useEffect(() => {
    if (!currentLane || !viewedFeatureSlug) {
      setViewedFeature(null);
      return;
    }
    let cancelled = false;
    api.lanes.features
      .show(currentLane.id, viewedFeatureSlug)
      .then((data) => {
        if (!cancelled) setViewedFeature(data.feature);
      })
      .catch(() => {
        if (!cancelled) setViewedFeature(null);
      });
    return () => {
      cancelled = true;
    };
  }, [currentLane?.id, viewedFeatureSlug]);

  // Proof gallery follows the selected lane.
  useEffect(() => {
    if (!currentLane) {
      setProofFeatures([]);
      return;
    }
    api.lanes.proof
      .list(currentLane.id)
      .then((data) => setProofFeatures(data.features))
      .catch(() => setProofFeatures([]));
  }, [currentLane?.id, viewedFeatureSlug]);

  // Resolve the active feature slug: either the user-selected one, or the lane's active_feature_id
  const activeFeatureSlug =
    viewedFeatureSlug ??
    (currentLane?.active_feature_id
      ? features.find((f) => f.id === currentLane?.active_feature_id)?.slug
      : null);
  const proofFeature = activeFeatureSlug
    ? proofFeatures.find((f) => f.slug === activeFeatureSlug)
    : null;

  // Viewport locked only when a live run is showing (TerminalView needs locked
  // viewport for chat scrolling). The config-card screen needs normal page flow
  // so the form is fully reachable on short windows. A full-width Changes panel
  // hides that form anyway, and without a locked height it shrinks to its
  // content — the editor inside it collapsed to a few lines (no live run).
  const viewportLocked =
    paneHasActiveRun || (!!currentLane && changesOpen && changesSize === "full");

  const handleLaneAction = async (id: number, action: string, body?: Record<string, unknown>) => {
    setLaneActionError(null);
    try {
      if (action === "reset" || action === "remove" || action === "purge") {
        await api.lanes.action(id, action, {
          confirm: true,
          expect: body?.expect,
          ...(body?.force === true ? { force: true } : {}),
        });
      } else {
        await api.lanes.action(id, action, body);
      }
      if (action === "remove") await refreshLanes();
    } catch (err) {
      setLaneActionError(err instanceof Error ? err.message : tLanes("actionErrorUnknown"));
    }
  };

  /**
   * 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.
  const handlePipelineChange = async (id: number, pipeline: string) => {
    setLaneActionError(null);
    try {
      const { lane } = await api.lanes.update(id, { pipeline });
      await refreshLanes();
      // `stage` defaults to the DB sentinel "idle" until a driving session ever
      // calls `agenthub stage` — that's the normal state for most lanes and never
      // matches a real pipeline node, so it isn't a mismatch worth surfacing.
      if (lane.stage !== "idle" && !lane.pipeline_nodes.some((n) => n.state === "current")) {
        setLaneActionError(
          tLanes("pipelinePicker.stageMismatch", {
            stage: lane.stage,
            pipeline: lane.pipeline,
            nodes: lane.pipeline_nodes.map((n) => n.id).join(", "),
          })
        );
      }
    } catch (err) {
      setLaneActionError(err instanceof Error ? err.message : tLanes("actionErrorUnknown"));
    }
  };

  return (
    <div
      className={
        viewportLocked
          ? "h-[calc(100vh-2.5rem)] lg:h-[calc(100vh-3rem)] flex flex-col gap-5"
          : "space-y-5"
      }
    >
      {/* Lane strip + detail stack vertically: the strip is a horizontally
          scrolling row (holds any number of lanes), the detail/console area
          below it gets the full width and never competes for it. */}
      <div className="flex min-h-0 flex-1 flex-col gap-4">
        {lanes.length === 0 ? (
          /* With no lanes the strip was a dashed tile beside a stray sentence,
             which reads as a half-rendered row rather than a state. One banner
             instead — and a compact one on purpose: the run setup form below
             is what the user actually needs the height for. */
          <button
            type="button"
            data-testid="lane-empty"
            onClick={() => setAddLaneOpen(true)}
            className="card flex w-full shrink-0 flex-wrap items-center gap-4 border-dashed px-5 py-4 text-left transition-colors hover:border-accent/50 hover:bg-surface-2"
          >
            <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-surface-4 text-fg-muted">
              <Layers className="h-5 w-5" />
            </span>
            <div className="min-w-0 flex-1">
              <span className="block text-sm font-medium text-fg-primary">
                {tLanes("empty.title")}
              </span>
              <p className="mt-0.5 text-xs text-fg-muted">
                {tLanes("empty.body")}{" "}
                <code className="rounded bg-surface-2 px-1.5 py-0.5 text-[11px] text-fg-secondary">
                  agenthub lanes add --cwd $(pwd)
                </code>
              </p>
            </div>
            <span className="flex shrink-0 items-center gap-1.5 text-xs font-medium text-accent">
              <Plus className="h-4 w-4" />
              {tLanes("add")}
            </span>
          </button>
        ) : (
          <div
            data-testid="lane-strip"
            className="flex shrink-0 flex-row gap-2 overflow-x-auto pb-1"
          >
            {/* "Add lane" is a tile in the strip rather than a header button:
                creating a lane is the same kind of act as picking one, so it
                reads as the empty slot at the head of the row. Dashed border and
                no liveness dot keep it from being mistaken for a lane. */}
            <button
              type="button"
              data-testid="lane-tile-add"
              onClick={() => setAddLaneOpen(true)}
              title={tLanes("addLane")}
              className="flex w-56 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-border-light p-3 text-[13px] font-medium text-fg-secondary transition-colors hover:border-accent hover:bg-accent/5 hover:text-fg-primary"
            >
              <Plus className="h-4 w-4" />
              {tLanes("add")}
            </button>
            {lanes.map((l, i) => (
              <LaneStripCard
                key={l.id}
                lane={l}
                index={i}
                selected={selectedLaneId === l.id}
                onSelect={() => setSelectedLaneId(l.id)}
                onReorder={handleLaneReorder}
              />
            ))}
          </div>
        )}

        {/* The selected lane's pipeline — the thing you actually come to this
            page to read, beside the list rather than stacked under it.
            The section itself is ALWAYS rendered, even with no lane selected:
            `ConsoleArea` lives inside it, and a conditional wrapper would give
            the console two render sites, so every flip of `currentLane` (lanes
            arriving on mount, a lane removed, a refetch re-picking the
            selection) unmounted the terminal and wiped a half-typed prompt.
            Same rule as RunConsole's own collapse — hide with CSS, never by
            unmounting. */}
        {/* Detail and the Changes panel share one row: the panel is a reading
            surface for the same lane the console is driving, so it sits beside
            it rather than under it. It collapses to a rail instead of
            unmounting nothing — there is no live subscription inside it, so
            unmounting is safe and keeps a closed panel from polling. */}
        <div className="flex min-h-0 flex-1 gap-4">
          <section
            data-testid="lane-detail"
            className={`flex min-h-0 min-w-0 flex-1 flex-col ${currentLane ? "card p-4" : ""}${
              currentLane && changesOpen && changesSize === "full" ? " hidden" : ""
            }`}
          >
            {/* One header row, not two. The pipeline picker, the stage badges,
              the feature picker and the router select used to sit on a second
              row below this one; every one of them is a per-lane control that
              belongs beside the lane's own name, and stacking them cost a whole
              row of height on a panel whose point is the pipeline map further
              down. The pipeline's NAME is no longer interpolated into
              `laneHeader` either — the picker right next to it already says it.
              They stay gated on `showInfo`, same as before the merge. */}
            {currentLane && (
              <div className="mb-3 flex flex-wrap items-center gap-2">
                <span className="flex shrink-0 items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-fg-secondary">
                  <span className={`h-2 w-2 rounded-full ${LIVENESS_DOT[currentLane.liveness]}`} />
                  {currentLane.liveness === "dead"
                    ? tLanes("statusDead")
                    : tLanes(`status.${currentLane.status}`, { defaultValue: currentLane.status })}
                </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>
                )}
                {/* A lane with no pipeline (non-claude, or no template
                    installed): no time-at-stage, no pipeline or feature
                    picker, no map. */}
                {!noPipeline && (
                  <span className="shrink-0 tabular-nums text-xs text-fg-muted">
                    {since(currentLane.stage_seconds)}
                  </span>
                )}
                {showInfo && (
                  <>
                    {!noPipeline && (
                      <select
                        data-testid="pipeline-picker"
                        aria-label={tLanes("pipelinePicker.label")}
                        className="rounded border border-border bg-surface-1 px-2 py-0.5 text-xs text-fg-secondary disabled:opacity-60"
                        value={currentLane.pipeline}
                        disabled={!!viewedFeature}
                        title={
                          viewedFeature
                            ? tLanes("features.viewingArchived", { slug: viewedFeature.slug })
                            : undefined
                        }
                        onChange={(e) => void handlePipelineChange(currentLane.id, e.target.value)}
                      >
                        {(pipelineTemplates.length
                          ? pipelineTemplates
                          : [
                              {
                                id: currentLane.pipeline,
                                name: currentLane.pipeline_name,
                                nodes: [],
                              },
                            ]
                        ).map((p) => (
                          <option key={p.id} value={p.id}>
                            {p.nodes.length ? `${p.name} (${p.nodes.length})` : p.name}
                          </option>
                        ))}
                      </select>
                    )}
                    {/* `agy` has no endpoint to point at a router. */}
                    <LaneRouterRow lane={currentLane} />
                    {/* No stage chip and no "auto: <stage>" chip here: the
                        PipelineMap right below this header already draws both
                        — the declared node as the current ring, the detected
                        one as its amber badge — so the chips were a second,
                        smaller copy of the same two facts. */}
                    {!noPipeline && features.length > 0 && (
                      <select
                        data-testid="feature-picker"
                        className="rounded border border-border bg-surface-1 px-2 py-0.5 text-xs"
                        value={viewedFeatureSlug ?? ""}
                        onChange={(e) => setViewedFeatureSlug(e.target.value || null)}
                      >
                        <option value="">{tLanes("features.live")}</option>
                        {features.map((f) => (
                          <option key={f.slug} value={f.slug}>
                            {f.slug}
                            {f.archived_at ? ` (${tLanes("features.archived")})` : ""}
                          </option>
                        ))}
                      </select>
                    )}
                  </>
                )}
                <div className="ml-auto flex items-center gap-2">
                  {/* Per-lane actions (mcp sync, sync-base check)
                    belong beside the lane they act on, not in a page header. */}
                  <LaneToolsMenu lane={currentLane} />
                  <button
                    type="button"
                    data-testid="lane-detail-toggle"
                    aria-expanded={infoExpanded}
                    onClick={() => setInfoExpanded((v) => !v)}
                    className="rounded border border-border-light px-2 py-1 text-xs text-fg-secondary transition-colors hover:text-fg-primary"
                  >
                    {infoExpanded ? tLanes("laneDetail.hide") : tLanes("laneDetail.show")}
                  </button>
                  <SplitLayoutToggle splitView={splitView} setLayout={setLayout} />
                  {showInfo && (
                    <button
                      type="button"
                      data-testid="lane-action-remove"
                      onClick={() => setRemoveConfirmOpen(true)}
                      className="rounded px-2 py-0.5 text-xs text-status-danger transition-colors hover:bg-status-danger/15"
                    >
                      {/* One label for both kinds: removal forgets the lane's row
                        and never deletes a worktree, a branch or a database. */}
                      {tLanes("action.forget")}
                    </button>
                  )}
                </div>
              </div>
            )}
            {currentLane && showInfo && (
              <div className="max-h-[45vh] shrink-0 overflow-y-auto">
                {/* No margin when the card rendered nothing (see LaneCard). */}
                <div className="mb-3 has-[>div:empty]:mb-0">
                  <LaneCard
                    lane={currentLane}
                    onAction={(a, b) => handleLaneAction(currentLane.id, a, b)}
                    childWorktrees={lanes.filter(
                      (l) => l.source_repo === currentLane.cwd && l.id !== currentLane.id
                    )}
                    onSelectLane={setSelectedLaneId}
                  />
                </div>
                {!noPipeline && (
                  <div className="mb-3">
                    <PipelineMap
                      nodes={
                        viewedFeature ? viewedFeature.pipeline_nodes : currentLane.pipeline_nodes
                      }
                      detectedSignal={viewedFeature ? undefined : currentLane.detected_signal}
                    />
                    {viewedFeature && (
                      <p data-testid="feature-viewer-banner" className="mb-2 text-xs text-fg-muted">
                        {tLanes("features.viewingArchived", { slug: viewedFeature.slug })}
                      </p>
                    )}
                  </div>
                )}
                {proofFeature &&
                  (Object.keys(proofFeature.groups).length > 0 || proofFeature.ticket_report) && (
                    <div data-testid="proof-gallery" className="mt-2">
                      {proofFeature.ticket_report && (
                        <a
                          href={`/api/lanes/${currentLane.id}/proof/${proofFeature.ticket_report}`}
                          target="_blank"
                          rel="noreferrer"
                          className="text-xs text-fg-muted"
                        >
                          {tLanes("proof.ticketReport")}
                        </a>
                      )}
                      {Object.entries(proofFeature.groups).map(([group, images]) => (
                        <div key={group} className="mt-1">
                          <span className="text-xs text-fg-muted">
                            {group} · {images.length}
                          </span>
                          <div className="flex flex-wrap gap-1">
                            {images.slice(0, 8).map((img) => (
                              <img
                                key={img}
                                loading="lazy"
                                className="h-16 w-16 rounded object-cover"
                                src={api.lanes.proof.imageUrl(
                                  currentLane.id,
                                  proofFeature.slug,
                                  group,
                                  img
                                )}
                                alt={img}
                              />
                            ))}
                            {images.length > 8 && (
                              <span className="text-xs text-fg-muted">+{images.length - 8}</span>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
              </div>
            )}
            <div
              className={`flex min-h-0 flex-1 flex-col gap-2 ${
                currentLane ? "border-t border-border pt-3" : ""
              }`}
            >
              {/* `showToggle`: the lane header carries its own split toggle; with
                no lane there is no header, so the console shows one instead. */}
              <ConsoleArea
                lanes={lanes}
                selectedLaneId={selectedLaneId}
                splitView={splitView}
                setLayout={setLayout}
                binaryStatus={binaryStatus}
                cwdSuggestions={cwdSuggestions}
                activeRuns={activeRuns}
                externalSessions={externalSessions}
                wsConnected={wsConnected}
                defaultCwd={defaultCwd}
                onHasActiveRunChange={setPaneHasActiveRun}
                onLaneCreated={(lane) =>
                  setLanes((prev) => (prev.some((l) => l.id === lane.id) ? prev : [...prev, lane]))
                }
                onLaneIdChange={setSelectedLaneId}
                showToggle={!currentLane}
              />
            </div>
          </section>

          {currentLane &&
            (changesOpen ? (
              <aside
                id="lane-changes-panel"
                data-testid="lane-changes-card"
                className={`card flex shrink-0 flex-col p-3 ${CHANGES_WIDTH[changesSize]}`}
              >
                <div className="mb-2 flex items-center gap-2">
                  <span className="text-[11px] font-medium uppercase tracking-wide text-fg-secondary">
                    {tLanes("changes.title")}
                  </span>
                  <button
                    type="button"
                    data-testid="lane-changes-resize"
                    onClick={() => {
                      // Past the widest step the next state is "gone", which
                      // is what the rail button reopens at `compact`.
                      if (changesSize === CHANGES_SIZES[CHANGES_SIZES.length - 1]) {
                        setChangesOpen(false);
                        setChangesSize("compact");
                      } else {
                        setChangesSize(nextChangesSize);
                      }
                    }}
                    // The control names the same region the rail button does,
                    // so a screen reader reads one panel that is open or
                    // closed rather than two unrelated buttons.
                    aria-expanded
                    aria-controls="lane-changes-panel"
                    aria-label={changesNextLabel}
                    title={changesNextLabel}
                    className="ml-auto flex h-6 w-6 items-center justify-center rounded-md text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary"
                  >
                    {/* Icon-only, and it draws the width the click LANDS on,
                        not the current one — the label the tooltip carries. */}
                    {(() => {
                      const Next = CHANGES_NEXT_ICON[changesSize];
                      return <Next className="h-4 w-4" />;
                    })()}
                  </button>
                </div>
                <LaneChangesPanel
                  laneId={currentLane.id}
                  full={changesSize === "full"}
                  // A sibling worktree forks from the lane's SOURCE repo when
                  // it has one (this lane is itself a worktree of it); an
                  // adopted lane is its own repo.
                  onNewLane={(branch) => {
                    setAddLanePrefill({
                      sourceRepo: currentLane.source_repo || currentLane.cwd,
                      branch,
                    });
                    setAddLaneOpen(true);
                  }}
                />
              </aside>
            ) : (
              <button
                type="button"
                data-testid="lane-changes-expand"
                onClick={() => setChangesOpen(true)}
                aria-expanded={false}
                aria-controls="lane-changes-panel"
                aria-label={tLanes("changes.expand")}
                title={tLanes("changes.expand")}
                className="card flex w-9 shrink-0 flex-col items-center gap-2 py-3 text-fg-muted transition-colors hover:text-fg-primary"
              >
                <PanelLeftClose className="h-4 w-4" />
                <span className="text-[10px] uppercase tracking-wide [writing-mode:vertical-rl]">
                  {tLanes("changes.title")}
                </span>
              </button>
            ))}
        </div>
      </div>

      {currentLane && removeConfirmOpen && (
        <DestructiveLaneModal
          lane={currentLane}
          action="remove"
          open
          onClose={() => setRemoveConfirmOpen(false)}
          onConfirm={(body) => {
            setRemoveConfirmOpen(false);
            void handleLaneAction(currentLane.id, "remove", body);
          }}
        />
      )}

      <AddLaneModal
        open={addLaneOpen}
        cwdSuggestions={cwdSuggestions}
        prefill={addLanePrefill}
        onClose={() => {
          setAddLaneOpen(false);
          setAddLanePrefill(null);
        }}
        onAdded={(lane) => {
          setLanes((prev) => (prev.some((l) => l.id === lane.id) ? prev : [...prev, lane]));
          setSelectedLaneId(lane.id);
          void refreshLanes();
        }}
      />

      {laneActionError && (
        <p
          role="alert"
          className="rounded border border-status-danger bg-status-danger/40 px-3 py-2 text-sm text-status-danger"
        >
          {tLanes("actionError", { message: laneActionError })}
        </p>
      )}
    </div>
  );
}