@larose/pi-web 0.3.0

package/src/client/home.ts

@@ -0,0 +1,1575 @@
+import { displaySessionTitle } from "./display-title.js";
+import { PathCombobox, type PathComboboxSuggestion } from "./path-combobox.js";
+import {
+  api,
+  type GitWorkspaceInspection,
+  type GitWorktreeSummary,
+  readableError,
+  requiredElement,
+  type RepositorySessionGroup,
+  type SessionListing,
+  type SessionSummary,
+  sessionPath,
+  textElement,
+} from "./shared.js";
+import { displayRelativePath, relativePathWithin, repositoryName, worktreeTargetPath } from "./workspace-browser.js";
+
+const elements = {
+  appNotifications: requiredElement<HTMLElement>("[data-app-notifications]"),
+  checkoutFeedback: requiredElement<HTMLElement>("[data-workspace-checkout-feedback]"),
+  checkoutSelect: requiredElement<HTMLSelectElement>("[data-workspace-checkout]"),
+  createSubmit: requiredElement<HTMLButtonElement>("[data-create-submit]"),
+  gitStatus: requiredElement<HTMLElement>("[data-git-status]"),
+  kindRepository: requiredElement<HTMLInputElement>("[data-workspace-kind-repository]"),
+  kindStandalone: requiredElement<HTMLInputElement>("[data-workspace-kind-standalone]"),
+  latestSessionList: requiredElement<HTMLElement>("[data-latest-session-list]"),
+  newSession: requiredElement<HTMLFormElement>("[data-new-session]"),
+  newSessionCancel: requiredElement<HTMLButtonElement>("[data-new-session-cancel]"),
+  newSessionToggle: requiredElement<HTMLButtonElement>("[data-new-session-toggle]"),
+  newWorktreeMode: requiredElement<HTMLElement>("[data-new-worktree-mode]"),
+  recentWorkspace: requiredElement<HTMLSelectElement>("[data-recent-workspace]"),
+  relativeFeedback: requiredElement<HTMLElement>("[data-workspace-relative-feedback]"),
+  relativeInput: requiredElement<HTMLInputElement>("[data-workspace-relative-path]"),
+  relativeList: requiredElement<HTMLElement>("[data-workspace-relative-options]"),
+  relativeStatus: requiredElement<HTMLElement>("[data-workspace-relative-status]"),
+  relativeToggle: requiredElement<HTMLButtonElement>("[data-workspace-relative-toggle]"),
+  repositoryFeedback: requiredElement<HTMLElement>("[data-repository-path-feedback]"),
+  repositoryFields: requiredElement<HTMLElement>("[data-repository-fields]"),
+  repositoryInput: requiredElement<HTMLInputElement>("[data-repository-path]"),
+  repositoryList: requiredElement<HTMLElement>("[data-repository-path-options]"),
+  repositoryStatus: requiredElement<HTMLElement>("[data-repository-path-status]"),
+  repositoryToggle: requiredElement<HTMLButtonElement>("[data-repository-path-toggle]"),
+  sessionList: requiredElement<HTMLElement>("[data-session-list]"),
+  standaloneFeedback: requiredElement<HTMLElement>("[data-standalone-path-feedback]"),
+  standaloneFields: requiredElement<HTMLElement>("[data-standalone-fields]"),
+  standaloneInput: requiredElement<HTMLInputElement>("[data-standalone-path]"),
+  standaloneList: requiredElement<HTMLElement>("[data-standalone-path-options]"),
+  standaloneStatus: requiredElement<HTMLElement>("[data-standalone-path-status]"),
+  standaloneToggle: requiredElement<HTMLButtonElement>("[data-standalone-path-toggle]"),
+  worktreeAvailability: requiredElement<HTMLElement>("[data-worktree-availability]"),
+  worktreeCancel: requiredElement<HTMLButtonElement>("[data-worktree-cancel]"),
+  worktreeName: requiredElement<HTMLInputElement>("[data-worktree-name]"),
+  worktreeStart: requiredElement<HTMLButtonElement>("[data-worktree-start]"),
+  worktreeSubmit: requiredElement<HTMLButtonElement>("[data-worktree-submit]"),
+  worktreeTarget: requiredElement<HTMLElement>("[data-worktree-target]"),
+};
+
+type AppStatusTone = "error" | "success";
+type WorkspaceKind = "repository" | "standalone";
+type WorkspaceFeedback = "checkout" | "relative" | "repository" | "standalone";
+
+interface AppNotificationRecord {
+  dismissal: number | undefined;
+  element: HTMLElement;
+  generation: number;
+  message: HTMLElement;
+  dismiss: HTMLButtonElement;
+}
+
+interface RepositorySelection {
+  repositoryRoot: string;
+  repositoryInspection: GitWorkspaceInspection;
+  selectedInspection: GitWorkspaceInspection;
+  worktreeRoot: string;
+  relativeCwd: string;
+  cwd: string;
+}
+
+interface StandaloneSelection {
+  inspection: GitWorkspaceInspection;
+  cwd: string;
+}
+
+interface DirectorySuggestionListing {
+  directories: Array<{ name: string; path: string }>;
+  truncated: boolean;
+}
+
+let listing: SessionListing = { groups: [], knownCwds: [], activeSessionIds: [], runningSessionIds: [] };
+let workspaceKind: WorkspaceKind = "repository";
+let repositorySelection: RepositorySelection | null = null;
+let standaloneSelection: StandaloneSelection | null = null;
+let inspectionGeneration = 0;
+let workspacePending = false;
+let pendingRecentWorkspaceValue: string | null = null;
+let recentWorkspaceOptionsSignature = "";
+let newSessionOpen = false;
+let workspaceInitialized = false;
+let newWorktreeOpen = false;
+let creatingSession = false;
+let contextualCreationCwd: string | null = null;
+let repositoryWorktreeEditorRoot: string | null = null;
+let repositoryWorktreeName = "";
+let repositoryWorktreeCreationRoot: string | null = null;
+const appNotifications = new Map<string, AppNotificationRecord>();
+const deletingSessionIds = new Set<string>();
+const removingWorktreeRoots = new Set<string>();
+
+function formatTime(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(date);
+}
+
+function clearAppStatus(key: string): void {
+  const notification = appNotifications.get(key);
+  if (!notification) {
+    return;
+  }
+
+  if (notification.dismissal !== undefined) {
+    window.clearTimeout(notification.dismissal);
+  }
+  notification.element.remove();
+  appNotifications.delete(key);
+  elements.appNotifications.hidden = appNotifications.size === 0;
+}
+
+function createAppNotification(key: string): AppNotificationRecord {
+  const element = document.createElement("div");
+  element.className = "app-notification";
+
+  const message = document.createElement("p");
+  message.className = "app-notification-message";
+  message.setAttribute("aria-atomic", "true");
+
+  const dismiss = document.createElement("button");
+  dismiss.className = "app-notification-dismiss";
+  dismiss.type = "button";
+  dismiss.textContent = "×";
+  dismiss.setAttribute("aria-label", "Dismiss notification");
+  dismiss.addEventListener("click", () => clearAppStatus(key));
+
+  element.append(message, dismiss);
+  elements.appNotifications.prepend(element);
+  elements.appNotifications.hidden = false;
+
+  const notification = { dismissal: undefined, element, generation: 0, message, dismiss };
+  appNotifications.set(key, notification);
+  return notification;
+}
+
+function setAppStatus(key: string, message: string, tone: AppStatusTone): void {
+  if (!message) {
+    clearAppStatus(key);
+    return;
+  }
+
+  const notification = appNotifications.get(key) ?? createAppNotification(key);
+  const generation = ++notification.generation;
+  if (notification.dismissal !== undefined) {
+    window.clearTimeout(notification.dismissal);
+    notification.dismissal = undefined;
+  }
+
+  notification.element.dataset.tone = tone;
+  notification.dismiss.hidden = false;
+  notification.message.setAttribute("role", tone === "error" ? "alert" : "status");
+  notification.message.setAttribute("aria-live", tone === "error" ? "assertive" : "polite");
+  notification.message.textContent = message;
+
+  if (tone === "success") {
+    notification.dismissal = window.setTimeout(() => {
+      notification.dismissal = undefined;
+      if (generation === notification.generation) {
+        clearAppStatus(key);
+      }
+    }, 10_000);
+  }
+}
+
+function setGitStatus(message: string, isError = false): void {
+  elements.gitStatus.textContent = message;
+  elements.gitStatus.classList.toggle("error", isError);
+}
+
+function feedbackElement(control: WorkspaceFeedback): HTMLElement {
+  if (control === "checkout") {
+    return elements.checkoutFeedback;
+  }
+  if (control === "relative") {
+    return elements.relativeFeedback;
+  }
+  if (control === "repository") {
+    return elements.repositoryFeedback;
+  }
+  return elements.standaloneFeedback;
+}
+
+function setFeedback(control: WorkspaceFeedback, message = "", isError = false): void {
+  const element = feedbackElement(control);
+  element.textContent = message || "\u00a0";
+  element.classList.toggle("error", isError);
+}
+
+function clearFeedback(): void {
+  setFeedback("checkout");
+  setFeedback("relative");
+  setFeedback("repository");
+  setFeedback("standalone");
+}
+
+function worktreeHeadLabel(worktree: Pick<GitWorktreeSummary, "head">): string {
+  return worktree.head.type === "branch" ? worktree.head.name : `detached ${worktree.head.shortCommit}`;
+}
+
+function checkoutLabel(worktree: Pick<GitWorktreeSummary, "isLinkedWorktree">): string {
+  return worktree.isLinkedWorktree ? "Worktree" : "Primary checkout";
+}
+
+function compareText(left: string, right: string): number {
+  const folded = left.toLocaleLowerCase().localeCompare(right.toLocaleLowerCase());
+  return folded || left.localeCompare(right);
+}
+
+function modifiedTimestamp(session: Pick<SessionSummary, "modified">): number {
+  const timestamp = Date.parse(session.modified);
+  return Number.isNaN(timestamp) ? 0 : timestamp;
+}
+
+function compareLatestSessions(left: SessionSummary, right: SessionSummary): number {
+  return modifiedTimestamp(right) - modifiedTimestamp(left) || left.id.localeCompare(right.id);
+}
+
+function compareSessionsByTitle(left: SessionSummary, right: SessionSummary): number {
+  const title = compareText(displaySessionTitle(left), displaySessionTitle(right));
+  return title || modifiedTimestamp(right) - modifiedTimestamp(left) || left.id.localeCompare(right.id);
+}
+
+function compareWorktrees(left: GitWorktreeSummary, right: GitWorktreeSummary): number {
+  if (left.isLinkedWorktree !== right.isLinkedWorktree) {
+    return left.isLinkedWorktree ? 1 : -1;
+  }
+
+  return (
+    compareText(worktreeHeadLabel(left), worktreeHeadLabel(right)) || compareText(left.worktreeRoot, right.worktreeRoot)
+  );
+}
+
+function compareRelativePaths(left: string, right: string): number {
+  if (left === "." || right === ".") {
+    return left === "." ? -1 : 1;
+  }
+  return compareText(left, right);
+}
+
+function option(value: string, label: string): HTMLOptionElement {
+  const element = document.createElement("option");
+  element.value = value;
+  element.textContent = label;
+  return element;
+}
+
+function pathSeparator(path: string): string {
+  return path.includes("\\") && !path.includes("/") ? "\\" : "/";
+}
+
+function trimTrailingSeparators(path: string): string {
+  if (/^[A-Za-z]:[\\/]?$/.test(path)) {
+    return path;
+  }
+  return path.replace(/[\\/]+$/, "");
+}
+
+function joinServerPath(root: string, relativePath: string): string {
+  if (!relativePath || relativePath === ".") {
+    return root;
+  }
+
+  return `${trimTrailingSeparators(root)}${pathSeparator(root)}${relativePath}`;
+}
+
+function isAbsoluteServerPath(path: string): boolean {
+  return path.startsWith("/") || path.startsWith("\\\\") || /^[A-Za-z]:[\\/]/.test(path);
+}
+
+function normalizeRelativePath(value: string, root: string): string {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "." || trimmed.toLocaleLowerCase() === "(root)") {
+    return ".";
+  }
+  if (isAbsoluteServerPath(trimmed)) {
+    throw new Error("Working directory must be relative to the selected checkout.");
+  }
+
+  const segments = trimmed.split(/[\\/]+/).filter((segment) => segment && segment !== ".");
+  if (segments.includes("..")) {
+    throw new Error("Working directory cannot leave the selected checkout.");
+  }
+  return segments.join(pathSeparator(root)) || ".";
+}
+
+async function requestInspection(cwd: string): Promise<GitWorkspaceInspection> {
+  return api<GitWorkspaceInspection>("/api/git-workspaces/inspect", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ cwd }),
+  });
+}
+
+async function browseDirectories(path: string, signal: AbortSignal): Promise<DirectorySuggestionListing> {
+  return api<DirectorySuggestionListing>("/api/directories", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ path }),
+    signal,
+  });
+}
+
+function recentWorkspaceValue(): string {
+  if (workspaceKind === "repository" && repositorySelection) {
+    return `repository:${repositorySelection.repositoryRoot}`;
+  }
+  if (workspaceKind === "standalone" && standaloneSelection) {
+    return `standalone:${standaloneSelection.cwd}`;
+  }
+  return "";
+}
+
+function renderRecentWorkspaces(): void {
+  const choices = listing.groups.map((group) =>
+    group.type === "repository"
+      ? {
+          value: `repository:${group.repositoryRoot}`,
+          label: `Git · ${repositoryName(group.repositoryRoot)} — ${group.repositoryRoot}`,
+        }
+      : {
+          value: `standalone:${group.cwd}`,
+          label: `Directory · ${repositoryName(group.cwd)} — ${group.cwd}`,
+        },
+  );
+  const placeholder = listing.groups.length > 0 ? "Choose a recent workspace…" : "No recent workspaces";
+  const signature = JSON.stringify({ placeholder, choices });
+  if (signature !== recentWorkspaceOptionsSignature) {
+    elements.recentWorkspace.replaceChildren(
+      option("", placeholder),
+      ...choices.map((choice) => option(choice.value, choice.label)),
+    );
+    recentWorkspaceOptionsSignature = signature;
+  }
+
+  elements.recentWorkspace.value = pendingRecentWorkspaceValue ?? recentWorkspaceValue();
+  elements.recentWorkspace.disabled = creatingSession || listing.groups.length === 0;
+}
+
+function relativeShortcuts(): PathComboboxSuggestion[] {
+  const selection = repositorySelection;
+  if (!selection) {
+    return [];
+  }
+
+  const paths = ["."];
+  const group = listing.groups.find(
+    (candidate) => candidate.type === "repository" && candidate.repositoryRoot === selection.repositoryRoot,
+  );
+  if (group) {
+    for (const session of group.sessions) {
+      const relativeCwd = session.gitContext?.relativeCwd;
+      if (relativeCwd && !paths.includes(relativeCwd)) {
+        paths.push(relativeCwd);
+      }
+    }
+  }
+
+  return paths.map((path) => ({
+    value: displayRelativePath(path),
+    label: displayRelativePath(path),
+    detail: path === "." ? "Checkout root" : "Recent working directory",
+    source: "recent",
+  }));
+}
+
+function absoluteDirectorySuggestions(listing: DirectorySuggestionListing): PathComboboxSuggestion[] {
+  return listing.directories.map((directory) => ({
+    value: directory.path,
+    label: directory.name,
+    detail: directory.path,
+    source: "server",
+  }));
+}
+
+function primaryWorktree(inspection: GitWorkspaceInspection): GitWorktreeSummary | null {
+  return inspection.worktrees.find((worktree) => !worktree.isLinkedWorktree) ?? inspection.worktrees[0] ?? null;
+}
+
+function closeWorktreeEditor(): void {
+  newWorktreeOpen = false;
+  elements.worktreeName.value = "";
+}
+
+function currentCwd(): string {
+  return workspaceKind === "repository" ? (repositorySelection?.cwd ?? "") : (standaloneSelection?.cwd ?? "");
+}
+
+function renderCheckout(): void {
+  const selection = repositorySelection;
+  elements.checkoutSelect.replaceChildren();
+  if (!selection) {
+    elements.checkoutSelect.append(option("", "Choose a repository first"));
+    return;
+  }
+
+  for (const worktree of [...selection.repositoryInspection.worktrees].sort(compareWorktrees)) {
+    const label = worktree.isLinkedWorktree
+      ? `${worktreeHeadLabel(worktree)} — ${checkoutLabel(worktree)}`
+      : checkoutLabel(worktree);
+    elements.checkoutSelect.append(option(worktree.worktreeRoot, label));
+  }
+  elements.checkoutSelect.value = selection.worktreeRoot;
+}
+
+function renderWorktreeMode(): void {
+  const inspection = repositorySelection?.selectedInspection;
+  const repositoryActive = workspaceKind === "repository" && Boolean(repositorySelection);
+  elements.newWorktreeMode.hidden = !newWorktreeOpen || !repositoryActive;
+  elements.worktreeName.required = newWorktreeOpen && repositoryActive;
+  elements.worktreeStart.hidden = !repositoryActive || newWorktreeOpen;
+  elements.worktreeStart.disabled = workspacePending || !inspection?.creation.available;
+  elements.worktreeStart.setAttribute("aria-expanded", String(newWorktreeOpen));
+  elements.worktreeAvailability.textContent = inspection?.creation.reason ?? "";
+  elements.worktreeAvailability.hidden =
+    !repositoryActive || newWorktreeOpen || Boolean(inspection?.creation.available) || !inspection?.creation.reason;
+  elements.createSubmit.hidden = newWorktreeOpen && repositoryActive;
+  elements.worktreeSubmit.hidden = !newWorktreeOpen || !repositoryActive;
+}
+
+function renderWorktreeTarget(): void {
+  const context = repositorySelection?.selectedInspection.context;
+  elements.worktreeTarget.textContent = context ? worktreeTargetPath(context, elements.worktreeName.value.trim()) : "";
+}
+
+function renderNewSessionDisclosure(): void {
+  elements.newSession.hidden = !newSessionOpen;
+  elements.newSessionToggle.setAttribute("aria-expanded", String(newSessionOpen));
+  elements.newSessionToggle.disabled = creatingSession;
+  elements.newSessionCancel.disabled = creatingSession;
+}
+
+function renderWorkspaceControls(): void {
+  const repositoryActive = workspaceKind === "repository";
+  elements.kindRepository.checked = repositoryActive;
+  elements.kindStandalone.checked = !repositoryActive;
+  elements.repositoryFields.hidden = !repositoryActive;
+  elements.standaloneFields.hidden = repositoryActive;
+  elements.repositoryInput.required = repositoryActive;
+  elements.relativeInput.required = repositoryActive;
+  elements.standaloneInput.required = !repositoryActive;
+
+  renderRecentWorkspaces();
+  renderCheckout();
+  elements.checkoutSelect.disabled = workspacePending || !repositorySelection;
+  repositoryCombobox.setDisabled(workspacePending);
+  relativeCombobox.setDisabled(workspacePending || !repositorySelection);
+  standaloneCombobox.setDisabled(workspacePending);
+  renderWorktreeMode();
+  renderWorktreeTarget();
+
+  const validSelection = Boolean(currentCwd());
+  elements.createSubmit.disabled = creatingSession || workspacePending || !validSelection;
+  elements.worktreeSubmit.disabled =
+    creatingSession || workspacePending || !repositorySelection?.selectedInspection.creation.available;
+  elements.newSession.setAttribute("aria-busy", String(creatingSession || workspacePending));
+  renderNewSessionDisclosure();
+}
+
+function applyRepositorySelection(
+  repositoryInspection: GitWorkspaceInspection,
+  selectedInspection: GitWorkspaceInspection,
+): void {
+  const context = selectedInspection.context;
+  if (!context) {
+    throw new Error("This directory is not inside a Git repository.");
+  }
+
+  repositorySelection = {
+    repositoryRoot: context.repositoryRoot,
+    repositoryInspection,
+    selectedInspection,
+    worktreeRoot: context.worktreeRoot,
+    relativeCwd: context.relativeCwd,
+    cwd: selectedInspection.cwd,
+  };
+  workspaceKind = "repository";
+  elements.repositoryInput.value = context.repositoryRoot;
+  elements.relativeInput.value = displayRelativePath(context.relativeCwd);
+  closeWorktreeEditor();
+}
+
+async function inspectRepositoryPath(path: string, preserveDetectedPath = false): Promise<boolean> {
+  const requested = path.trim();
+  const generation = ++inspectionGeneration;
+  if (!requested) {
+    setFeedback("repository", "Enter an absolute repository path.", true);
+    return false;
+  }
+
+  if (!preserveDetectedPath) {
+    repositorySelection = null;
+    elements.relativeInput.value = "(root)";
+    closeWorktreeEditor();
+    setFeedback("checkout");
+    setFeedback("relative");
+  }
+
+  workspacePending = true;
+  setFeedback("repository", "Inspecting repository…");
+  setGitStatus("Inspecting repository…");
+  renderWorkspaceControls();
+
+  try {
+    const detectedInspection = await requestInspection(requested);
+    const detectedContext = detectedInspection.context;
+    if (!detectedContext) {
+      throw new Error("This directory is not inside a Git repository.");
+    }
+
+    const repositoryInspection =
+      detectedInspection.cwd === detectedContext.repositoryRoot
+        ? detectedInspection
+        : await requestInspection(detectedContext.repositoryRoot);
+    if (generation !== inspectionGeneration) {
+      return false;
+    }
+    if (
+      !repositoryInspection.context ||
+      repositoryInspection.context.repositoryRoot !== detectedContext.repositoryRoot
+    ) {
+      throw new Error("The repository checkout could not be inspected.");
+    }
+
+    let selectedInspection = detectedInspection;
+    if (!preserveDetectedPath) {
+      const primary = primaryWorktree(repositoryInspection);
+      if (!primary) {
+        throw new Error("No usable checkout was found for this repository.");
+      }
+      selectedInspection =
+        primary.cwd === repositoryInspection.cwd ? repositoryInspection : await requestInspection(primary.cwd);
+    }
+    if (generation !== inspectionGeneration) {
+      return false;
+    }
+
+    applyRepositorySelection(repositoryInspection, selectedInspection);
+    clearFeedback();
+    setFeedback("repository", detectedContext.repositoryRoot);
+    setGitStatus(`Git repository selected: ${detectedContext.repositoryRoot}.`);
+    return true;
+  } catch (error) {
+    if (generation !== inspectionGeneration) {
+      return false;
+    }
+
+    setFeedback("repository", readableError(error), true);
+    setGitStatus(readableError(error), true);
+    return false;
+  } finally {
+    if (generation === inspectionGeneration) {
+      workspacePending = false;
+      renderWorkspaceControls();
+    }
+  }
+}
+
+async function inspectStandalonePath(path: string): Promise<boolean> {
+  const requested = path.trim();
+  const generation = ++inspectionGeneration;
+  if (!requested) {
+    setFeedback("standalone", "Enter an absolute directory path.", true);
+    return false;
+  }
+
+  standaloneSelection = null;
+  closeWorktreeEditor();
+  workspacePending = true;
+  setFeedback("standalone", "Inspecting directory…");
+  setGitStatus("Inspecting directory…");
+  renderWorkspaceControls();
+
+  try {
+    const inspection = await requestInspection(requested);
+    if (generation !== inspectionGeneration) {
+      return false;
+    }
+
+    if (inspection.context) {
+      const repositoryInspection =
+        inspection.cwd === inspection.context.repositoryRoot
+          ? inspection
+          : await requestInspection(inspection.context.repositoryRoot);
+      if (generation !== inspectionGeneration) {
+        return false;
+      }
+
+      applyRepositorySelection(repositoryInspection, inspection);
+      clearFeedback();
+      setFeedback("repository", "Git repository detected. Switched from standalone directory.");
+      setGitStatus(`Git repository detected: ${inspection.context.repositoryRoot}.`);
+      return true;
+    }
+
+    standaloneSelection = { inspection, cwd: inspection.cwd };
+    workspaceKind = "standalone";
+    elements.standaloneInput.value = inspection.cwd;
+    closeWorktreeEditor();
+    clearFeedback();
+    setFeedback("standalone", inspection.cwd);
+    setGitStatus(`Standalone directory selected: ${inspection.cwd}.`);
+    return true;
+  } catch (error) {
+    if (generation !== inspectionGeneration) {
+      return false;
+    }
+
+    setFeedback("standalone", readableError(error), true);
+    setGitStatus(readableError(error), true);
+    return false;
+  } finally {
+    if (generation === inspectionGeneration) {
+      workspacePending = false;
+      renderWorkspaceControls();
+    }
+  }
+}
+
+async function inspectRelativePath(value: string): Promise<boolean> {
+  const selection = repositorySelection;
+  if (!selection) {
+    return false;
+  }
+
+  let relativeCwd: string;
+  try {
+    relativeCwd = normalizeRelativePath(value, selection.worktreeRoot);
+  } catch (error) {
+    setFeedback("relative", readableError(error), true);
+    return false;
+  }
+
+  const generation = ++inspectionGeneration;
+  workspacePending = true;
+  setFeedback("relative", "Inspecting working directory…");
+  renderWorkspaceControls();
+
+  try {
+    const inspection = await requestInspection(joinServerPath(selection.worktreeRoot, relativeCwd));
+    const context = inspection.context;
+    if (
+      !context ||
+      context.repositoryRoot !== selection.repositoryRoot ||
+      context.worktreeRoot !== selection.worktreeRoot
+    ) {
+      throw new Error("Working directory must be inside the selected checkout.");
+    }
+    if (generation !== inspectionGeneration) {
+      return false;
+    }
+
+    repositorySelection = {
+      ...selection,
+      selectedInspection: inspection,
+      relativeCwd: context.relativeCwd,
+      cwd: inspection.cwd,
+    };
+    elements.relativeInput.value = displayRelativePath(context.relativeCwd);
+    closeWorktreeEditor();
+    setFeedback("relative", inspection.cwd);
+    setGitStatus(`Working directory selected: ${inspection.cwd}.`);
+    return true;
+  } catch (error) {
+    if (generation !== inspectionGeneration) {
+      return false;
+    }
+
+    setFeedback("relative", readableError(error), true);
+    setGitStatus(readableError(error), true);
+    return false;
+  } finally {
+    if (generation === inspectionGeneration) {
+      workspacePending = false;
+      renderWorkspaceControls();
+    }
+  }
+}
+
+async function selectCheckout(): Promise<void> {
+  const selection = repositorySelection;
+  const worktree = selection?.repositoryInspection.worktrees.find(
+    (candidate) => candidate.worktreeRoot === elements.checkoutSelect.value,
+  );
+  if (!selection || !worktree) {
+    return;
+  }
+
+  const generation = ++inspectionGeneration;
+  workspacePending = true;
+  closeWorktreeEditor();
+  elements.relativeInput.value = "(root)";
+  repositorySelection = {
+    ...selection,
+    worktreeRoot: worktree.worktreeRoot,
+    relativeCwd: ".",
+    cwd: worktree.worktreeRoot,
+  };
+  setFeedback("relative");
+  setFeedback("checkout", "Inspecting checkout…");
+  renderWorkspaceControls();
+
+  try {
+    const inspection = await requestInspection(worktree.worktreeRoot);
+    if (generation !== inspectionGeneration) {
+      return;
+    }
+
+    const context = inspection.context;
+    if (
+      !context ||
+      context.repositoryRoot !== selection.repositoryRoot ||
+      context.worktreeRoot !== worktree.worktreeRoot
+    ) {
+      throw new Error("The selected checkout could not be inspected.");
+    }
+
+    repositorySelection = {
+      ...selection,
+      selectedInspection: inspection,
+      worktreeRoot: context.worktreeRoot,
+      relativeCwd: ".",
+      cwd: inspection.cwd,
+    };
+    elements.relativeInput.value = "(root)";
+    setFeedback("checkout", inspection.cwd);
+    setGitStatus(`Checkout selected: ${context.worktreeRoot}.`);
+  } catch (error) {
+    if (generation !== inspectionGeneration) {
+      return;
+    }
+
+    repositorySelection = selection;
+    elements.relativeInput.value = displayRelativePath(selection.relativeCwd);
+    setFeedback("checkout", readableError(error), true);
+    setGitStatus(readableError(error), true);
+  } finally {
+    if (generation === inspectionGeneration) {
+      workspacePending = false;
+      renderWorkspaceControls();
+    }
+  }
+}
+
+const repositoryCombobox = new PathCombobox({
+  input: elements.repositoryInput,
+  list: elements.repositoryList,
+  status: elements.repositoryStatus,
+  toggle: elements.repositoryToggle,
+  shortcuts: () => [],
+  load: async (value, signal) => absoluteDirectorySuggestions(await browseDirectories(value, signal)),
+  commit: (value) => inspectRepositoryPath(value),
+});
+
+const standaloneCombobox = new PathCombobox({
+  input: elements.standaloneInput,
+  list: elements.standaloneList,
+  status: elements.standaloneStatus,
+  toggle: elements.standaloneToggle,
+  shortcuts: () => [],
+  load: async (value, signal) => absoluteDirectorySuggestions(await browseDirectories(value, signal)),
+  commit: (value) => inspectStandalonePath(value),
+});
+
+const relativeCombobox = new PathCombobox({
+  input: elements.relativeInput,
+  list: elements.relativeList,
+  status: elements.relativeStatus,
+  toggle: elements.relativeToggle,
+  shortcuts: relativeShortcuts,
+  load: async (value, signal) => {
+    const selection = repositorySelection;
+    if (!selection) {
+      return [];
+    }
+
+    const normalized = normalizeRelativePath(value, selection.worktreeRoot);
+    const response = await browseDirectories(joinServerPath(selection.worktreeRoot, normalized), signal);
+    return response.directories.flatMap((directory): PathComboboxSuggestion[] => {
+      const relative = relativePathWithin(selection.worktreeRoot, directory.path);
+      return relative
+        ? [
+            {
+              value: displayRelativePath(relative),
+              label: displayRelativePath(relative),
+              detail: directory.path,
+              source: "server",
+            },
+          ]
+        : [];
+    });
+  },
+  commit: (value) => inspectRelativePath(value),
+});
+
+function sessionDeleteButton(session: SessionSummary): HTMLButtonElement {
+  const running = listing.runningSessionIds.includes(session.id);
+  const title = displaySessionTitle(session);
+  const button = document.createElement("button");
+  button.className = "session-delete destructive";
+  button.type = "button";
+  button.textContent = "Delete";
+  button.title = running ? "Wait for the session to finish before deleting it" : "Permanently delete session";
+  button.setAttribute("aria-label", `Permanently delete session ${title}`);
+  button.disabled = running || deletingSessionIds.has(session.id);
+  button.addEventListener("click", () => void deleteSession(session));
+  return button;
+}
+
+function renderSessionCard(session: SessionSummary): HTMLElement {
+  const running = listing.runningSessionIds.includes(session.id);
+  const title = displaySessionTitle(session);
+  const card = document.createElement("div");
+  card.className = "session-card";
+
+  const link = document.createElement("a");
+  link.className = "session-button";
+  link.href = sessionPath(session.id);
+  link.title = title;
+
+  const dot = document.createElement("span");
+  dot.className = `running-dot${running ? " active" : ""}`;
+  dot.setAttribute("aria-label", running ? "Running" : "Idle");
+
+  const copy = document.createElement("span");
+  copy.className = "session-copy";
+  copy.append(
+    textElement("strong", "", title),
+    textElement("span", "session-meta", `${formatTime(session.modified)} · ${session.messageCount} messages`),
+  );
+  link.append(dot, copy);
+
+  card.append(link, sessionDeleteButton(session));
+  return card;
+}
+
+function contextualCreateButton(cwd: string): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.className = "contextual-session-create";
+  button.type = "button";
+  button.textContent = contextualCreationCwd === cwd ? "Creating…" : "+ New session";
+  button.title = `Create a new session in ${cwd}`;
+  button.setAttribute("aria-label", `Create a new session in ${cwd}`);
+  button.disabled = creatingSession;
+  button.addEventListener("click", () => void createContextualSession(cwd));
+  return button;
+}
+
+function repositoryWorktreeTarget(repositoryRoot: string, name: string): string {
+  const separator = pathSeparator(repositoryRoot);
+  return `${trimTrailingSeparators(repositoryRoot)}${separator}.pi${separator}worktrees${separator}${name || "<name>"}`;
+}
+
+function closeRepositoryWorktreeEditor(editorId: string): void {
+  repositoryWorktreeEditorRoot = null;
+  repositoryWorktreeName = "";
+  renderSessions();
+  document.getElementById(`${editorId}-toggle`)?.focus();
+}
+
+function repositoryWorktreeButton(group: RepositorySessionGroup, editorId: string): HTMLButtonElement {
+  const button = document.createElement("button");
+  button.id = `${editorId}-toggle`;
+  button.className = "repository-worktree-start";
+  button.type = "button";
+  button.textContent = "+ New worktree";
+  button.title = `Create a new worktree and session in ${group.repositoryRoot}`;
+  button.setAttribute("aria-label", `Create a new worktree and session in ${group.repositoryRoot}`);
+  button.setAttribute("aria-controls", editorId);
+  button.setAttribute("aria-expanded", String(repositoryWorktreeEditorRoot === group.repositoryRoot));
+  button.disabled = creatingSession;
+  button.addEventListener("click", () => {
+    if (repositoryWorktreeEditorRoot === group.repositoryRoot) {
+      document.querySelector<HTMLInputElement>(`#${editorId} input`)?.focus();
+      return;
+    }
+
+    repositoryWorktreeEditorRoot = group.repositoryRoot;
+    repositoryWorktreeName = "";
+    renderSessions();
+    document.querySelector<HTMLInputElement>(`#${editorId} input`)?.focus();
+  });
+  return button;
+}
+
+function renderRepositoryWorktreeEditor(group: RepositorySessionGroup, editorId: string): HTMLFormElement {
+  const form = document.createElement("form");
+  form.id = editorId;
+  form.className = "repository-worktree-editor";
+  form.setAttribute("aria-busy", String(repositoryWorktreeCreationRoot === group.repositoryRoot));
+
+  const header = document.createElement("header");
+  const headingId = `${editorId}-heading`;
+  const heading = textElement("h4", "", "New worktree");
+  heading.id = headingId;
+  form.setAttribute("aria-labelledby", headingId);
+
+  const cancel = document.createElement("button");
+  cancel.className = "quiet-action";
+  cancel.type = "button";
+  cancel.textContent = "Cancel";
+  cancel.disabled = creatingSession;
+  cancel.addEventListener("click", () => closeRepositoryWorktreeEditor(editorId));
+  header.append(heading, cancel);
+
+  const label = document.createElement("label");
+  const inputId = `${editorId}-name`;
+  label.htmlFor = inputId;
+  label.textContent = "Worktree and branch name";
+
+  const input = document.createElement("input");
+  input.id = inputId;
+  input.name = "worktreeName";
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  input.required = true;
+  input.disabled = creatingSession;
+  input.value = repositoryWorktreeName;
+  input.addEventListener("input", () => {
+    repositoryWorktreeName = input.value;
+    target.textContent = repositoryWorktreeTarget(group.repositoryRoot, repositoryWorktreeName.trim());
+  });
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || creatingSession) {
+      return;
+    }
+
+    event.preventDefault();
+    closeRepositoryWorktreeEditor(editorId);
+  });
+
+  const preview = document.createElement("p");
+  preview.className = "worktree-target";
+  preview.append("Create at ");
+  const target = document.createElement("span");
+  target.textContent = repositoryWorktreeTarget(group.repositoryRoot, repositoryWorktreeName.trim());
+  preview.append(target);
+
+  const submit = document.createElement("button");
+  submit.className = "session-create-submit";
+  submit.type = "submit";
+  submit.textContent =
+    repositoryWorktreeCreationRoot === group.repositoryRoot ? "Creating…" : "Create worktree & session";
+  submit.disabled = creatingSession;
+
+  form.append(header, label, input, preview, submit);
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    void createSessionAt(group.repositoryRoot, {
+      worktreeName: repositoryWorktreeName,
+      repositoryEditorRoot: group.repositoryRoot,
+    });
+  });
+  return form;
+}
+
+function renderGroupHeading(name: string, path: string, id: string, action?: HTMLElement): HTMLElement {
+  const header = document.createElement("header");
+  header.className = "session-group-header";
+  const identity = document.createElement("div");
+  identity.className = "session-group-identity";
+  const title = document.createElement("h3");
+  title.id = id;
+  title.title = path;
+  title.append(document.createTextNode(path.slice(0, Math.max(0, path.length - name.length))));
+  title.append(textElement("strong", "", name));
+  identity.append(title);
+  header.append(identity);
+  if (action) {
+    header.append(action);
+  }
+  return header;
+}
+
+function worktreeCwdLabel(group: RepositorySessionGroup, worktree: GitWorktreeSummary, relativeCwd: string): string {
+  if (!worktree.isLinkedWorktree) {
+    return displayRelativePath(relativeCwd);
+  }
+
+  const relativeWorktree = relativePathWithin(group.repositoryRoot, worktree.worktreeRoot);
+  const worktreePath = relativeWorktree && relativeWorktree !== "." ? relativeWorktree : worktree.worktreeRoot;
+  return relativeCwd === "." ? worktreePath : joinServerPath(worktreePath, relativeCwd);
+}
+
+function renderWorktree(group: RepositorySessionGroup, worktree: GitWorktreeSummary): HTMLElement {
+  const container = document.createElement("section");
+  container.className = "worktree-group";
+  const sessions = group.sessions.filter((session) => session.workspaceContext?.worktreeRoot === worktree.worktreeRoot);
+
+  const cwdHeading = (relativeCwd: string, includeDelete: boolean): HTMLElement => {
+    const cwd = joinServerPath(worktree.worktreeRoot, relativeCwd);
+    const header = document.createElement("header");
+    header.className = "worktree-header";
+    const identity = document.createElement("div");
+    identity.className = "worktree-identity";
+    identity.title = cwd;
+    identity.append(textElement("h5", "relative-cwd-heading", worktreeCwdLabel(group, worktree, relativeCwd)));
+
+    const context = document.createElement("div");
+    context.className = "worktree-heading-context";
+    context.append(identity, contextualCreateButton(cwd));
+    header.append(context);
+
+    if (includeDelete) {
+      const active = sessions.some((session) => listing.activeSessionIds.includes(session.id));
+      const removalPending = removingWorktreeRoots.size > 0;
+      const remove = document.createElement("button");
+      remove.className = "worktree-delete";
+      remove.type = "button";
+      remove.textContent = removingWorktreeRoots.has(worktree.worktreeRoot) ? "Deleting…" : "Delete worktree";
+      remove.disabled = active || removalPending;
+      remove.title = active
+        ? "Wait for active sessions in this worktree to close before deleting it"
+        : `Delete linked worktree at ${worktree.worktreeRoot}`;
+      remove.setAttribute("aria-label", `Delete linked worktree ${worktreeHeadLabel(worktree)}`);
+      remove.addEventListener("click", () => void removeWorktree(group, worktree));
+      header.append(remove);
+    }
+
+    return header;
+  };
+
+  const cards = document.createElement("div");
+  cards.className = "worktree-sessions";
+  if (sessions.length === 0) {
+    cards.append(
+      cwdHeading(".", worktree.isLinkedWorktree),
+      textElement("p", "worktree-empty", "No saved sessions in this worktree."),
+    );
+  } else {
+    const sessionsByRelativeCwd = new Map<string, SessionSummary[]>();
+    for (const session of sessions) {
+      const relativeCwd = session.workspaceContext?.relativeCwd ?? ".";
+      const relativeSessions = sessionsByRelativeCwd.get(relativeCwd) ?? [];
+      relativeSessions.push(session);
+      sessionsByRelativeCwd.set(relativeCwd, relativeSessions);
+    }
+
+    const relativeGroups = [...sessionsByRelativeCwd].sort(([left], [right]) => compareRelativePaths(left, right));
+    for (const [index, [relativeCwd, relativeSessions]] of relativeGroups.entries()) {
+      const relativeGroup = document.createElement("section");
+      relativeGroup.className = "relative-cwd-group";
+      relativeGroup.append(
+        cwdHeading(relativeCwd, worktree.isLinkedWorktree && index === 0),
+        ...relativeSessions.sort(compareSessionsByTitle).map((session) => renderSessionCard(session)),
+      );
+      cards.append(relativeGroup);
+    }
+  }
+  container.append(cards);
+  return container;
+}
+
+function allSessions(): SessionSummary[] {
+  return listing.groups.flatMap((group) => group.sessions);
+}
+
+function renderLatestSession(session: SessionSummary): HTMLElement {
+  const running = listing.runningSessionIds.includes(session.id);
+  const title = displaySessionTitle(session);
+  const row = document.createElement("div");
+  row.className = "latest-session-card";
+
+  const link = document.createElement("a");
+  link.className = "latest-session-button";
+  link.href = sessionPath(session.id);
+  link.title = title;
+
+  const dot = document.createElement("span");
+  dot.className = `running-dot${running ? " active" : ""}`;
+  dot.setAttribute("aria-label", running ? "Running" : "Idle");
+
+  const copy = document.createElement("span");
+  copy.className = "session-copy";
+  copy.append(
+    textElement("strong", "", title),
+    textElement("span", "session-meta", `${formatTime(session.modified)} · ${session.messageCount} messages`),
+    textElement("span", "latest-session-location", session.cwd),
+  );
+  link.append(dot, copy);
+
+  row.append(link, sessionDeleteButton(session));
+  return row;
+}
+
+function renderSessions(): void {
+  const sessions = allSessions();
+  const latest = sessions.sort(compareLatestSessions).slice(0, 5);
+  elements.latestSessionList.replaceChildren(
+    ...(latest.length > 0
+      ? latest.map((session) => renderLatestSession(session))
+      : [textElement("p", "empty-list latest-empty", "No saved sessions yet.")]),
+  );
+
+  const groups = document.createDocumentFragment();
+  const orderedGroups = [...listing.groups].sort((left, right) => compareText(left.cwd, right.cwd));
+  for (const [index, group] of orderedGroups.entries()) {
+    const section = document.createElement("section");
+    section.className = `session-group ${group.type}`;
+    const headingId = `session-group-${index}`;
+    section.setAttribute("aria-labelledby", headingId);
+
+    if (group.type === "repository") {
+      const editorId = `${headingId}-new-worktree`;
+      section.append(
+        renderGroupHeading(
+          repositoryName(group.repositoryRoot),
+          group.repositoryRoot,
+          headingId,
+          repositoryWorktreeButton(group, editorId),
+        ),
+      );
+      if (repositoryWorktreeEditorRoot === group.repositoryRoot) {
+        section.append(renderRepositoryWorktreeEditor(group, editorId));
+      }
+
+      const worktrees = document.createElement("div");
+      worktrees.className = "worktree-list";
+      worktrees.append(
+        ...[...group.worktrees].sort(compareWorktrees).map((worktree) => renderWorktree(group, worktree)),
+      );
+      section.append(worktrees);
+    } else {
+      section.append(
+        renderGroupHeading(repositoryName(group.cwd), group.cwd, headingId, contextualCreateButton(group.cwd)),
+      );
+      const cards = document.createElement("div");
+      cards.className = "standalone-sessions";
+      cards.append(...[...group.sessions].sort(compareSessionsByTitle).map((session) => renderSessionCard(session)));
+      section.append(cards);
+    }
+
+    groups.append(section);
+  }
+
+  if (orderedGroups.length === 0) {
+    groups.append(textElement("p", "empty-list", "No saved sessions yet. Create one above to get started."));
+  }
+  elements.sessionList.replaceChildren(groups);
+  renderRecentWorkspaces();
+  relativeCombobox.refreshShortcuts();
+}
+
+async function refreshSessions(showStatus = true, statusKey = "session-listing"): Promise<boolean> {
+  try {
+    listing = await api<SessionListing>("/api/sessions");
+    renderSessions();
+    if (showStatus) {
+      clearAppStatus(statusKey);
+    }
+    return true;
+  } catch (error) {
+    setAppStatus(statusKey, readableError(error), "error");
+    return false;
+  }
+}
+
+async function refreshRepositorySelectionAfterRemoval(
+  repositoryRoot: string,
+  removedWorktreeRoot: string,
+): Promise<void> {
+  const selection = repositorySelection;
+  if (!selection || selection.repositoryRoot !== repositoryRoot) {
+    return;
+  }
+
+  const repositoryInspection = await requestInspection(repositoryRoot);
+  if (!repositoryInspection.context) {
+    repositorySelection = null;
+    renderWorkspaceControls();
+    return;
+  }
+
+  if (selection.worktreeRoot !== removedWorktreeRoot) {
+    repositorySelection = { ...selection, repositoryInspection };
+    renderWorkspaceControls();
+    return;
+  }
+
+  const fallback = primaryWorktree(repositoryInspection);
+  if (!fallback) {
+    repositorySelection = null;
+    renderWorkspaceControls();
+    return;
+  }
+
+  const selectedInspection =
+    fallback.cwd === repositoryInspection.cwd ? repositoryInspection : await requestInspection(fallback.cwd);
+  applyRepositorySelection(repositoryInspection, selectedInspection);
+  renderWorkspaceControls();
+}
+
+async function removeWorktree(group: RepositorySessionGroup, worktree: GitWorktreeSummary): Promise<void> {
+  if (!worktree.isLinkedWorktree || removingWorktreeRoots.size > 0) {
+    return;
+  }
+
+  const label = worktreeHeadLabel(worktree);
+  const statusKey = `worktree-removal:${worktree.worktreeRoot}`;
+  const confirmed = confirm(
+    `Delete linked worktree “${label}”?\n\nThis deletes the checkout at ${worktree.worktreeRoot}. Git will refuse if it contains modified or untracked files. Git branches and saved Pi sessions are kept.`,
+  );
+  if (!confirmed) {
+    return;
+  }
+
+  removingWorktreeRoots.add(worktree.worktreeRoot);
+  renderSessions();
+
+  try {
+    await api<{ removed: { worktreeRoot: string } }>("/api/git-workspaces/worktrees", {
+      method: "DELETE",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ cwd: group.repositoryRoot, worktreeRoot: worktree.worktreeRoot }),
+    });
+    const [sessionsRefreshed] = await Promise.all([
+      refreshSessions(false, statusKey),
+      refreshRepositorySelectionAfterRemoval(group.repositoryRoot, worktree.worktreeRoot),
+    ]);
+    if (sessionsRefreshed) {
+      setAppStatus(statusKey, `Deleted linked worktree at ${worktree.worktreeRoot}.`, "success");
+    }
+  } catch (error) {
+    setAppStatus(statusKey, readableError(error), "error");
+  } finally {
+    removingWorktreeRoots.delete(worktree.worktreeRoot);
+    renderSessions();
+  }
+}
+
+async function deleteSession(session: SessionSummary): Promise<void> {
+  const title = displaySessionTitle(session);
+  const statusKey = `session-deletion:${session.id}`;
+  if (!confirm(`Permanently delete “${title}”? This cannot be undone.`)) {
+    return;
+  }
+
+  deletingSessionIds.add(session.id);
+  renderSessions();
+
+  try {
+    await api<{ deleted: boolean }>(`/api/sessions/${encodeURIComponent(session.id)}`, { method: "DELETE" });
+    if (await refreshSessions(false, statusKey)) {
+      setAppStatus(statusKey, `Session “${title}” deleted`, "success");
+    }
+  } catch (error) {
+    setAppStatus(statusKey, readableError(error), "error");
+  } finally {
+    deletingSessionIds.delete(session.id);
+    renderSessions();
+  }
+}
+
+async function commitEditedWorkspace(): Promise<boolean> {
+  if (workspaceKind === "standalone") {
+    return elements.standaloneInput.value.trim() === standaloneSelection?.cwd
+      ? true
+      : inspectStandalonePath(elements.standaloneInput.value);
+  }
+
+  const requestedRepository = elements.repositoryInput.value.trim();
+  if (requestedRepository !== repositorySelection?.repositoryRoot) {
+    return inspectRepositoryPath(requestedRepository);
+  }
+  if (elements.relativeInput.value.trim() !== displayRelativePath(repositorySelection?.relativeCwd ?? ".")) {
+    return inspectRelativePath(elements.relativeInput.value);
+  }
+  return true;
+}
+
+async function createSessionAt(
+  cwd: string,
+  options: { worktreeName?: string; contextualCwd?: string; repositoryEditorRoot?: string } = {},
+): Promise<void> {
+  if (creatingSession) {
+    return;
+  }
+
+  creatingSession = true;
+  contextualCreationCwd = options.contextualCwd ?? null;
+  repositoryWorktreeCreationRoot = options.repositoryEditorRoot ?? null;
+  renderWorkspaceControls();
+  renderSessions();
+
+  try {
+    const body = options.worktreeName ? { cwd, worktreeName: options.worktreeName } : { cwd };
+    const response = await api<{ session: { id: string } }>("/api/sessions", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    location.assign(sessionPath(response.session.id));
+  } catch (error) {
+    creatingSession = false;
+    contextualCreationCwd = null;
+    repositoryWorktreeCreationRoot = null;
+    renderWorkspaceControls();
+    renderSessions();
+    setAppStatus("session-creation", readableError(error), "error");
+  }
+}
+
+async function createContextualSession(cwd: string): Promise<void> {
+  await createSessionAt(cwd, { contextualCwd: cwd });
+}
+
+async function createSession(): Promise<void> {
+  if (creatingSession || workspacePending) {
+    return;
+  }
+  if (!(await commitEditedWorkspace())) {
+    return;
+  }
+
+  const createWorktree = newWorktreeOpen && workspaceKind === "repository";
+  const cwd = currentCwd();
+  if (!cwd || !elements.newSession.reportValidity()) {
+    return;
+  }
+
+  await createSessionAt(cwd, createWorktree ? { worktreeName: elements.worktreeName.value } : {});
+}
+
+function sourceSessionId(): string | null {
+  const match = /^\/sessions\/([^/]+)\/new\/?$/.exec(location.pathname);
+  if (!match?.[1]) {
+    return null;
+  }
+
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return null;
+  }
+}
+
+async function initializeWorkspace(): Promise<void> {
+  if (workspaceInitialized) {
+    return;
+  }
+  workspaceInitialized = true;
+
+  let initialCwd = "";
+  let initialCwdFromSession = false;
+  const sourceId = sourceSessionId();
+  if (sourceId) {
+    try {
+      const response = await api<{ session: { cwd: string } }>(`/api/sessions/${encodeURIComponent(sourceId)}`);
+      initialCwd = response.session.cwd;
+      initialCwdFromSession = true;
+    } catch (error) {
+      setAppStatus("source-session", readableError(error), "error");
+    }
+  }
+  if (!initialCwd) {
+    initialCwd = listing.knownCwds[0] ?? "";
+  }
+  if (!initialCwd) {
+    renderWorkspaceControls();
+    return;
+  }
+
+  const initialGeneration = ++inspectionGeneration;
+  try {
+    const inspection = await requestInspection(initialCwd);
+    if (initialGeneration === inspectionGeneration && inspection.context) {
+      elements.repositoryInput.value = inspection.context.repositoryRoot;
+      await inspectRepositoryPath(initialCwd, initialCwdFromSession);
+    } else if (initialGeneration === inspectionGeneration) {
+      workspaceKind = "standalone";
+      elements.standaloneInput.value = initialCwd;
+      await inspectStandalonePath(initialCwd);
+    }
+  } catch (error) {
+    if (initialGeneration === inspectionGeneration) {
+      setAppStatus("initial-workspace", readableError(error), "error");
+    }
+  }
+  renderWorkspaceControls();
+}
+
+async function openNewSession(focusForm: boolean): Promise<void> {
+  newSessionOpen = true;
+  renderNewSessionDisclosure();
+  await initializeWorkspace();
+
+  if (focusForm) {
+    const target = elements.recentWorkspace.disabled
+      ? workspaceKind === "repository"
+        ? elements.repositoryInput
+        : elements.standaloneInput
+      : elements.recentWorkspace;
+    target.focus();
+  }
+}
+
+function closeNewSession(): void {
+  newSessionOpen = false;
+  closeWorktreeEditor();
+  renderWorkspaceControls();
+}
+
+function changeWorkspaceKind(kind: WorkspaceKind): void {
+  ++inspectionGeneration;
+  workspacePending = false;
+  pendingRecentWorkspaceValue = null;
+  workspaceKind = kind;
+  repositorySelection = null;
+  standaloneSelection = null;
+  elements.repositoryInput.value = "";
+  elements.relativeInput.value = "(root)";
+  elements.standaloneInput.value = "";
+  closeWorktreeEditor();
+  clearFeedback();
+  setGitStatus("");
+  renderWorkspaceControls();
+}
+
+async function selectRecentWorkspace(): Promise<void> {
+  const value = elements.recentWorkspace.value;
+  if (!value) {
+    pendingRecentWorkspaceValue = null;
+    return;
+  }
+
+  pendingRecentWorkspaceValue = value;
+  repositorySelection = null;
+  standaloneSelection = null;
+  elements.repositoryInput.value = "";
+  elements.relativeInput.value = "(root)";
+  elements.standaloneInput.value = "";
+  closeWorktreeEditor();
+  try {
+    if (value.startsWith("repository:")) {
+      const repositoryRoot = value.slice("repository:".length);
+      workspaceKind = "repository";
+      elements.repositoryInput.value = repositoryRoot;
+      clearFeedback();
+      renderWorkspaceControls();
+      await inspectRepositoryPath(repositoryRoot, false);
+      return;
+    }
+    if (value.startsWith("standalone:")) {
+      const cwd = value.slice("standalone:".length);
+      workspaceKind = "standalone";
+      elements.standaloneInput.value = cwd;
+      clearFeedback();
+      renderWorkspaceControls();
+      await inspectStandalonePath(cwd);
+    }
+  } finally {
+    if (pendingRecentWorkspaceValue === value) {
+      pendingRecentWorkspaceValue = null;
+      renderRecentWorkspaces();
+    }
+  }
+}
+
+elements.newSession.addEventListener("submit", (event) => {
+  event.preventDefault();
+  void createSession();
+});
+elements.newSessionToggle.addEventListener("click", () => void openNewSession(true));
+elements.newSessionCancel.addEventListener("click", () => {
+  closeNewSession();
+  elements.newSessionToggle.focus();
+});
+elements.kindRepository.addEventListener("change", () => {
+  if (elements.kindRepository.checked) {
+    changeWorkspaceKind("repository");
+  }
+});
+elements.kindStandalone.addEventListener("change", () => {
+  if (elements.kindStandalone.checked) {
+    changeWorkspaceKind("standalone");
+  }
+});
+elements.recentWorkspace.addEventListener("change", () => void selectRecentWorkspace());
+elements.repositoryInput.addEventListener("input", () => {
+  if (elements.repositoryInput.value.trim() !== repositorySelection?.repositoryRoot) {
+    ++inspectionGeneration;
+    workspacePending = false;
+    pendingRecentWorkspaceValue = null;
+    repositorySelection = null;
+    elements.relativeInput.value = "(root)";
+    elements.recentWorkspace.value = "";
+    closeWorktreeEditor();
+    setFeedback("checkout");
+    setFeedback("relative");
+    renderWorkspaceControls();
+  }
+});
+elements.standaloneInput.addEventListener("input", () => {
+  if (elements.standaloneInput.value.trim() !== standaloneSelection?.cwd) {
+    ++inspectionGeneration;
+    workspacePending = false;
+    pendingRecentWorkspaceValue = null;
+    standaloneSelection = null;
+    elements.recentWorkspace.value = "";
+    closeWorktreeEditor();
+    renderWorkspaceControls();
+  }
+});
+elements.relativeInput.addEventListener("input", () => {
+  if (newWorktreeOpen) {
+    closeWorktreeEditor();
+    renderWorkspaceControls();
+  }
+});
+elements.checkoutSelect.addEventListener("change", () => void selectCheckout());
+elements.worktreeStart.addEventListener("click", () => {
+  if (!repositorySelection?.selectedInspection.creation.available) {
+    return;
+  }
+
+  newWorktreeOpen = true;
+  elements.worktreeName.value = "";
+  renderWorkspaceControls();
+  elements.worktreeName.focus();
+});
+elements.worktreeCancel.addEventListener("click", () => {
+  closeWorktreeEditor();
+  renderWorkspaceControls();
+  elements.worktreeStart.focus();
+});
+elements.worktreeName.addEventListener("input", renderWorktreeTarget);
+elements.worktreeName.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape") {
+    return;
+  }
+
+  event.preventDefault();
+  elements.worktreeCancel.click();
+});
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState === "visible") {
+    void refreshSessions(false);
+  }
+});
+
+clearFeedback();
+renderWorkspaceControls();
+await refreshSessions();
+if (sourceSessionId()) {
+  await openNewSession(false);
+}
+
+setInterval(() => {
+  if (document.visibilityState === "visible") {
+    void refreshSessions(false);
+  }
+}, 30_000);