@larose/pi-web 0.3.0

package/dist/client/home.js

@@ -0,0 +1,1619 @@
+// src/client/display-title.ts
+var UNNAMED_SESSION_TITLE = "Unnamed session";
+var MAX_FALLBACK_TITLE_CHARS = 60;
+function normalizedFirstSentence(value) {
+  const normalized = value.replace(/\s+/gu, " ").trim();
+  const sentenceEnd = /[.!?。！？](?=\s|$)/u.exec(normalized);
+  return sentenceEnd ? normalized.slice(0, sentenceEnd.index + sentenceEnd[0].length) : normalized;
+}
+function boundedTitle(value) {
+  const characters = Array.from(value);
+  if (characters.length <= MAX_FALLBACK_TITLE_CHARS) {
+    return value;
+  }
+  const prefix = characters.slice(0, MAX_FALLBACK_TITLE_CHARS - 1).join("").trimEnd();
+  return `${prefix}\u2026`;
+}
+function displaySessionTitle(source) {
+  const nativeName = source.name?.trim();
+  if (nativeName) {
+    return nativeName;
+  }
+  const firstSentence = normalizedFirstSentence(source.firstMessage ?? "");
+  return firstSentence ? boundedTitle(firstSentence) : UNNAMED_SESSION_TITLE;
+}
+
+// src/client/path-combobox.ts
+var nextComboboxId = 0;
+function uniqueSuggestions(suggestions) {
+  const values = /* @__PURE__ */ new Set();
+  return suggestions.filter((suggestion) => {
+    if (values.has(suggestion.value)) {
+      return false;
+    }
+    values.add(suggestion.value);
+    return true;
+  });
+}
+var PathCombobox = class {
+  options;
+  optionIdPrefix;
+  suggestions = [];
+  activeIndex = -1;
+  generation = 0;
+  request = null;
+  openState = false;
+  loading = false;
+  disabled = false;
+  constructor(options) {
+    this.options = options;
+    this.optionIdPrefix = `path-combobox-option-${++nextComboboxId}`;
+    options.input.setAttribute("role", "combobox");
+    options.input.setAttribute("aria-autocomplete", "list");
+    options.input.setAttribute("aria-controls", options.list.id);
+    options.input.setAttribute("aria-expanded", "false");
+    options.input.setAttribute("aria-haspopup", "listbox");
+    options.toggle.setAttribute("aria-controls", options.list.id);
+    options.list.setAttribute("role", "listbox");
+    options.list.setAttribute("aria-label", "Directory suggestions");
+    options.input.addEventListener("focus", () => this.open());
+    options.input.addEventListener("click", () => {
+      const end = options.input.value.length;
+      options.input.setSelectionRange(end, end);
+    });
+    options.input.addEventListener("input", () => {
+      this.activeIndex = -1;
+      this.openState = true;
+      this.render();
+      void this.refresh();
+    });
+    options.input.addEventListener("keydown", (event) => this.handleKeydown(event));
+    options.input.addEventListener("blur", () => {
+      window.setTimeout(() => this.close(), 0);
+    });
+    options.toggle.addEventListener("click", () => {
+      if (this.disabled) {
+        return;
+      }
+      if (this.openState) {
+        this.close();
+      } else {
+        options.input.focus();
+        if (!this.openState) {
+          this.open();
+        }
+      }
+    });
+  }
+  setValue(value) {
+    this.options.input.value = value;
+  }
+  value() {
+    return this.options.input.value;
+  }
+  setDisabled(disabled) {
+    this.disabled = disabled;
+    this.options.input.disabled = disabled;
+    this.options.toggle.disabled = disabled;
+    if (disabled) {
+      this.close();
+    }
+  }
+  refreshShortcuts() {
+    if (this.openState) {
+      void this.refresh();
+    }
+  }
+  close() {
+    this.openState = false;
+    this.activeIndex = -1;
+    this.request?.abort();
+    this.request = null;
+    this.options.input.removeAttribute("aria-activedescendant");
+    this.render();
+  }
+  open() {
+    if (this.disabled) {
+      return;
+    }
+    this.openState = true;
+    this.render();
+    void this.refresh();
+  }
+  async refresh() {
+    const generation = ++this.generation;
+    this.request?.abort();
+    const request = new AbortController();
+    this.request = request;
+    const shortcuts = this.options.shortcuts();
+    const value = this.options.input.value.trim();
+    this.loading = Boolean(value);
+    this.suggestions = shortcuts;
+    this.options.status.textContent = this.loading ? "Loading folders\u2026" : "";
+    this.render();
+    if (!value) {
+      this.loading = false;
+      this.options.status.textContent = shortcuts.length > 0 ? `${shortcuts.length} recent paths` : "Enter a path";
+      return;
+    }
+    try {
+      const loaded = await this.options.load(value, request.signal);
+      if (generation !== this.generation || request.signal.aborted) {
+        return;
+      }
+      this.suggestions = uniqueSuggestions([...shortcuts, ...loaded]);
+      this.options.status.textContent = this.suggestions.length > 0 ? `${this.suggestions.length} paths available` : "No matching directories";
+    } catch (error) {
+      if (generation !== this.generation || request.signal.aborted) {
+        return;
+      }
+      this.suggestions = shortcuts;
+      this.options.status.textContent = error instanceof Error ? error.message : "Could not browse directories";
+    } finally {
+      if (generation === this.generation) {
+        this.loading = false;
+        this.request = null;
+        this.render();
+      }
+    }
+  }
+  render() {
+    this.options.input.setAttribute("aria-expanded", String(this.openState));
+    this.options.input.setAttribute("aria-busy", String(this.loading));
+    this.options.toggle.setAttribute("aria-expanded", String(this.openState));
+    this.options.list.hidden = !this.openState;
+    if (!this.openState) {
+      this.options.list.replaceChildren();
+      return;
+    }
+    const fragment = document.createDocumentFragment();
+    let previousSource = null;
+    for (const [index, suggestion] of this.suggestions.entries()) {
+      if (suggestion.source !== previousSource) {
+        const heading = document.createElement("li");
+        heading.className = "path-combobox-heading";
+        heading.textContent = suggestion.source === "recent" ? "Recent" : "Folders";
+        heading.setAttribute("role", "presentation");
+        fragment.append(heading);
+        previousSource = suggestion.source;
+      }
+      const item = document.createElement("li");
+      item.className = "path-combobox-option";
+      item.id = `${this.optionIdPrefix}-${index}`;
+      item.setAttribute("role", "option");
+      item.setAttribute("aria-selected", String(index === this.activeIndex));
+      item.append(Object.assign(document.createElement("strong"), { textContent: suggestion.label }));
+      if (suggestion.detail) {
+        item.append(Object.assign(document.createElement("span"), { textContent: suggestion.detail }));
+      }
+      item.addEventListener("mousedown", (event) => event.preventDefault());
+      item.addEventListener("click", () => this.choose(index));
+      fragment.append(item);
+    }
+    if (this.suggestions.length === 0 && !this.loading) {
+      const empty = document.createElement("li");
+      empty.className = "path-combobox-empty";
+      empty.textContent = "No directories found";
+      empty.setAttribute("role", "presentation");
+      fragment.append(empty);
+    }
+    this.options.list.replaceChildren(fragment);
+  }
+  choose(index) {
+    const suggestion = this.suggestions[index];
+    if (!suggestion) {
+      return;
+    }
+    this.options.input.value = suggestion.value;
+    this.close();
+    void this.options.commit(suggestion.value);
+  }
+  moveActive(offset) {
+    if (this.suggestions.length === 0) {
+      return;
+    }
+    this.activeIndex = this.activeIndex < 0 ? offset > 0 ? 0 : this.suggestions.length - 1 : (this.activeIndex + offset + this.suggestions.length) % this.suggestions.length;
+    this.options.input.setAttribute("aria-activedescendant", `${this.optionIdPrefix}-${this.activeIndex}`);
+    this.render();
+    document.getElementById(`${this.optionIdPrefix}-${this.activeIndex}`)?.scrollIntoView({ block: "nearest" });
+  }
+  handleKeydown(event) {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!this.openState) {
+        this.open();
+      }
+      this.moveActive(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+    if (event.key === "Escape" && this.openState) {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (this.openState && this.activeIndex >= 0) {
+        this.choose(this.activeIndex);
+      } else {
+        this.close();
+        void this.options.commit(this.options.input.value);
+      }
+    }
+  }
+};
+
+// src/client/shared.ts
+function requiredElement(selector, root = document) {
+  const element = root.querySelector(selector);
+  if (!element) {
+    throw new Error(`Missing required element: ${selector}`);
+  }
+  return element;
+}
+function textElement(tag, className, text) {
+  const element = document.createElement(tag);
+  element.className = className;
+  element.textContent = text;
+  return element;
+}
+function readableError(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+async function api(path, options) {
+  const response = await fetch(path, options);
+  const body = await response.json().catch(() => void 0);
+  if (!response.ok) {
+    throw new Error(body?.error?.message ?? `Request failed (${response.status})`);
+  }
+  return body;
+}
+function sessionPath(id) {
+  return `/sessions/${encodeURIComponent(id)}`;
+}
+
+// src/client/workspace-browser.ts
+function repositoryName(root) {
+  const normalized = root.replace(/[\\/]+$/, "");
+  return normalized.split(/[\\/]/).pop() || root;
+}
+function displayRelativePath(relativePath) {
+  return relativePath === "." ? "(root)" : relativePath;
+}
+function relativePathWithin(root, candidate) {
+  const separator = root.includes("\\") && !root.includes("/") ? "\\" : "/";
+  const normalizedRoot = root.replaceAll("\\", "/").replace(/\/+$/, "") || "/";
+  const normalizedCandidate = candidate.replaceAll("\\", "/").replace(/\/+$/, "") || "/";
+  const caseInsensitive = /^[A-Za-z]:/.test(normalizedRoot);
+  const comparableRoot = caseInsensitive ? normalizedRoot.toLocaleLowerCase() : normalizedRoot;
+  const comparableCandidate = caseInsensitive ? normalizedCandidate.toLocaleLowerCase() : normalizedCandidate;
+  if (comparableCandidate === comparableRoot) {
+    return ".";
+  }
+  const rootPrefix = comparableRoot === "/" ? "/" : `${comparableRoot}/`;
+  if (!comparableCandidate.startsWith(rootPrefix)) {
+    return null;
+  }
+  return normalizedCandidate.slice(rootPrefix.length).replaceAll("/", separator);
+}
+function worktreeTargetPath(context, name) {
+  const root = context.repositoryRoot.replace(/[\\/]$/, "");
+  const separator = root.includes("\\") && !root.includes("/") ? "\\" : "/";
+  const relativeCwd = context.relativeCwd === "." ? "" : `${separator}${context.relativeCwd}`;
+  return `${root}${separator}.pi${separator}worktrees${separator}${name || "<name>"}${relativeCwd}`;
+}
+
+// src/client/home.ts
+var elements = {
+  appNotifications: requiredElement("[data-app-notifications]"),
+  checkoutFeedback: requiredElement("[data-workspace-checkout-feedback]"),
+  checkoutSelect: requiredElement("[data-workspace-checkout]"),
+  createSubmit: requiredElement("[data-create-submit]"),
+  gitStatus: requiredElement("[data-git-status]"),
+  kindRepository: requiredElement("[data-workspace-kind-repository]"),
+  kindStandalone: requiredElement("[data-workspace-kind-standalone]"),
+  latestSessionList: requiredElement("[data-latest-session-list]"),
+  newSession: requiredElement("[data-new-session]"),
+  newSessionCancel: requiredElement("[data-new-session-cancel]"),
+  newSessionToggle: requiredElement("[data-new-session-toggle]"),
+  newWorktreeMode: requiredElement("[data-new-worktree-mode]"),
+  recentWorkspace: requiredElement("[data-recent-workspace]"),
+  relativeFeedback: requiredElement("[data-workspace-relative-feedback]"),
+  relativeInput: requiredElement("[data-workspace-relative-path]"),
+  relativeList: requiredElement("[data-workspace-relative-options]"),
+  relativeStatus: requiredElement("[data-workspace-relative-status]"),
+  relativeToggle: requiredElement("[data-workspace-relative-toggle]"),
+  repositoryFeedback: requiredElement("[data-repository-path-feedback]"),
+  repositoryFields: requiredElement("[data-repository-fields]"),
+  repositoryInput: requiredElement("[data-repository-path]"),
+  repositoryList: requiredElement("[data-repository-path-options]"),
+  repositoryStatus: requiredElement("[data-repository-path-status]"),
+  repositoryToggle: requiredElement("[data-repository-path-toggle]"),
+  sessionList: requiredElement("[data-session-list]"),
+  standaloneFeedback: requiredElement("[data-standalone-path-feedback]"),
+  standaloneFields: requiredElement("[data-standalone-fields]"),
+  standaloneInput: requiredElement("[data-standalone-path]"),
+  standaloneList: requiredElement("[data-standalone-path-options]"),
+  standaloneStatus: requiredElement("[data-standalone-path-status]"),
+  standaloneToggle: requiredElement("[data-standalone-path-toggle]"),
+  worktreeAvailability: requiredElement("[data-worktree-availability]"),
+  worktreeCancel: requiredElement("[data-worktree-cancel]"),
+  worktreeName: requiredElement("[data-worktree-name]"),
+  worktreeStart: requiredElement("[data-worktree-start]"),
+  worktreeSubmit: requiredElement("[data-worktree-submit]"),
+  worktreeTarget: requiredElement("[data-worktree-target]")
+};
+var listing = { groups: [], knownCwds: [], activeSessionIds: [], runningSessionIds: [] };
+var workspaceKind = "repository";
+var repositorySelection = null;
+var standaloneSelection = null;
+var inspectionGeneration = 0;
+var workspacePending = false;
+var pendingRecentWorkspaceValue = null;
+var recentWorkspaceOptionsSignature = "";
+var newSessionOpen = false;
+var workspaceInitialized = false;
+var newWorktreeOpen = false;
+var creatingSession = false;
+var contextualCreationCwd = null;
+var repositoryWorktreeEditorRoot = null;
+var repositoryWorktreeName = "";
+var repositoryWorktreeCreationRoot = null;
+var appNotifications = /* @__PURE__ */ new Map();
+var deletingSessionIds = /* @__PURE__ */ new Set();
+var removingWorktreeRoots = /* @__PURE__ */ new Set();
+function formatTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return new Intl.DateTimeFormat(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(date);
+}
+function clearAppStatus(key) {
+  const notification = appNotifications.get(key);
+  if (!notification) {
+    return;
+  }
+  if (notification.dismissal !== void 0) {
+    window.clearTimeout(notification.dismissal);
+  }
+  notification.element.remove();
+  appNotifications.delete(key);
+  elements.appNotifications.hidden = appNotifications.size === 0;
+}
+function createAppNotification(key) {
+  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 = "\xD7";
+  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: void 0, element, generation: 0, message, dismiss };
+  appNotifications.set(key, notification);
+  return notification;
+}
+function setAppStatus(key, message, tone) {
+  if (!message) {
+    clearAppStatus(key);
+    return;
+  }
+  const notification = appNotifications.get(key) ?? createAppNotification(key);
+  const generation = ++notification.generation;
+  if (notification.dismissal !== void 0) {
+    window.clearTimeout(notification.dismissal);
+    notification.dismissal = void 0;
+  }
+  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 = void 0;
+      if (generation === notification.generation) {
+        clearAppStatus(key);
+      }
+    }, 1e4);
+  }
+}
+function setGitStatus(message, isError = false) {
+  elements.gitStatus.textContent = message;
+  elements.gitStatus.classList.toggle("error", isError);
+}
+function feedbackElement(control) {
+  if (control === "checkout") {
+    return elements.checkoutFeedback;
+  }
+  if (control === "relative") {
+    return elements.relativeFeedback;
+  }
+  if (control === "repository") {
+    return elements.repositoryFeedback;
+  }
+  return elements.standaloneFeedback;
+}
+function setFeedback(control, message = "", isError = false) {
+  const element = feedbackElement(control);
+  element.textContent = message || "\xA0";
+  element.classList.toggle("error", isError);
+}
+function clearFeedback() {
+  setFeedback("checkout");
+  setFeedback("relative");
+  setFeedback("repository");
+  setFeedback("standalone");
+}
+function worktreeHeadLabel(worktree) {
+  return worktree.head.type === "branch" ? worktree.head.name : `detached ${worktree.head.shortCommit}`;
+}
+function checkoutLabel(worktree) {
+  return worktree.isLinkedWorktree ? "Worktree" : "Primary checkout";
+}
+function compareText(left, right) {
+  const folded = left.toLocaleLowerCase().localeCompare(right.toLocaleLowerCase());
+  return folded || left.localeCompare(right);
+}
+function modifiedTimestamp(session) {
+  const timestamp = Date.parse(session.modified);
+  return Number.isNaN(timestamp) ? 0 : timestamp;
+}
+function compareLatestSessions(left, right) {
+  return modifiedTimestamp(right) - modifiedTimestamp(left) || left.id.localeCompare(right.id);
+}
+function compareSessionsByTitle(left, right) {
+  const title = compareText(displaySessionTitle(left), displaySessionTitle(right));
+  return title || modifiedTimestamp(right) - modifiedTimestamp(left) || left.id.localeCompare(right.id);
+}
+function compareWorktrees(left, right) {
+  if (left.isLinkedWorktree !== right.isLinkedWorktree) {
+    return left.isLinkedWorktree ? 1 : -1;
+  }
+  return compareText(worktreeHeadLabel(left), worktreeHeadLabel(right)) || compareText(left.worktreeRoot, right.worktreeRoot);
+}
+function compareRelativePaths(left, right) {
+  if (left === "." || right === ".") {
+    return left === "." ? -1 : 1;
+  }
+  return compareText(left, right);
+}
+function option(value, label) {
+  const element = document.createElement("option");
+  element.value = value;
+  element.textContent = label;
+  return element;
+}
+function pathSeparator(path) {
+  return path.includes("\\") && !path.includes("/") ? "\\" : "/";
+}
+function trimTrailingSeparators(path) {
+  if (/^[A-Za-z]:[\\/]?$/.test(path)) {
+    return path;
+  }
+  return path.replace(/[\\/]+$/, "");
+}
+function joinServerPath(root, relativePath) {
+  if (!relativePath || relativePath === ".") {
+    return root;
+  }
+  return `${trimTrailingSeparators(root)}${pathSeparator(root)}${relativePath}`;
+}
+function isAbsoluteServerPath(path) {
+  return path.startsWith("/") || path.startsWith("\\\\") || /^[A-Za-z]:[\\/]/.test(path);
+}
+function normalizeRelativePath(value, root) {
+  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) {
+  return api("/api/git-workspaces/inspect", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ cwd })
+  });
+}
+async function browseDirectories(path, signal) {
+  return api("/api/directories", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ path }),
+    signal
+  });
+}
+function recentWorkspaceValue() {
+  if (workspaceKind === "repository" && repositorySelection) {
+    return `repository:${repositorySelection.repositoryRoot}`;
+  }
+  if (workspaceKind === "standalone" && standaloneSelection) {
+    return `standalone:${standaloneSelection.cwd}`;
+  }
+  return "";
+}
+function renderRecentWorkspaces() {
+  const choices = listing.groups.map(
+    (group) => group.type === "repository" ? {
+      value: `repository:${group.repositoryRoot}`,
+      label: `Git \xB7 ${repositoryName(group.repositoryRoot)} \u2014 ${group.repositoryRoot}`
+    } : {
+      value: `standalone:${group.cwd}`,
+      label: `Directory \xB7 ${repositoryName(group.cwd)} \u2014 ${group.cwd}`
+    }
+  );
+  const placeholder = listing.groups.length > 0 ? "Choose a recent workspace\u2026" : "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() {
+  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(listing2) {
+  return listing2.directories.map((directory) => ({
+    value: directory.path,
+    label: directory.name,
+    detail: directory.path,
+    source: "server"
+  }));
+}
+function primaryWorktree(inspection) {
+  return inspection.worktrees.find((worktree) => !worktree.isLinkedWorktree) ?? inspection.worktrees[0] ?? null;
+}
+function closeWorktreeEditor() {
+  newWorktreeOpen = false;
+  elements.worktreeName.value = "";
+}
+function currentCwd() {
+  return workspaceKind === "repository" ? repositorySelection?.cwd ?? "" : standaloneSelection?.cwd ?? "";
+}
+function renderCheckout() {
+  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)} \u2014 ${checkoutLabel(worktree)}` : checkoutLabel(worktree);
+    elements.checkoutSelect.append(option(worktree.worktreeRoot, label));
+  }
+  elements.checkoutSelect.value = selection.worktreeRoot;
+}
+function renderWorktreeMode() {
+  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() {
+  const context = repositorySelection?.selectedInspection.context;
+  elements.worktreeTarget.textContent = context ? worktreeTargetPath(context, elements.worktreeName.value.trim()) : "";
+}
+function renderNewSessionDisclosure() {
+  elements.newSession.hidden = !newSessionOpen;
+  elements.newSessionToggle.setAttribute("aria-expanded", String(newSessionOpen));
+  elements.newSessionToggle.disabled = creatingSession;
+  elements.newSessionCancel.disabled = creatingSession;
+}
+function renderWorkspaceControls() {
+  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, selectedInspection) {
+  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, preserveDetectedPath = false) {
+  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\u2026");
+  setGitStatus("Inspecting repository\u2026");
+  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) {
+  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\u2026");
+  setGitStatus("Inspecting directory\u2026");
+  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) {
+  const selection = repositorySelection;
+  if (!selection) {
+    return false;
+  }
+  let relativeCwd;
+  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\u2026");
+  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() {
+  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\u2026");
+  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();
+    }
+  }
+}
+var 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)
+});
+var 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)
+});
+var 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) => {
+      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) {
+  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) {
+  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)} \xB7 ${session.messageCount} messages`)
+  );
+  link.append(dot, copy);
+  card.append(link, sessionDeleteButton(session));
+  return card;
+}
+function contextualCreateButton(cwd) {
+  const button = document.createElement("button");
+  button.className = "contextual-session-create";
+  button.type = "button";
+  button.textContent = contextualCreationCwd === cwd ? "Creating\u2026" : "+ 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, name) {
+  const separator = pathSeparator(repositoryRoot);
+  return `${trimTrailingSeparators(repositoryRoot)}${separator}.pi${separator}worktrees${separator}${name || "<name>"}`;
+}
+function closeRepositoryWorktreeEditor(editorId) {
+  repositoryWorktreeEditorRoot = null;
+  repositoryWorktreeName = "";
+  renderSessions();
+  document.getElementById(`${editorId}-toggle`)?.focus();
+}
+function repositoryWorktreeButton(group, editorId) {
+  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(`#${editorId} input`)?.focus();
+      return;
+    }
+    repositoryWorktreeEditorRoot = group.repositoryRoot;
+    repositoryWorktreeName = "";
+    renderSessions();
+    document.querySelector(`#${editorId} input`)?.focus();
+  });
+  return button;
+}
+function renderRepositoryWorktreeEditor(group, editorId) {
+  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\u2026" : "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, path, id, action) {
+  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, worktree, relativeCwd) {
+  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, worktree) {
+  const container = document.createElement("section");
+  container.className = "worktree-group";
+  const sessions = group.sessions.filter((session) => session.workspaceContext?.worktreeRoot === worktree.worktreeRoot);
+  const cwdHeading = (relativeCwd, includeDelete) => {
+    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\u2026" : "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 = /* @__PURE__ */ new Map();
+    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() {
+  return listing.groups.flatMap((group) => group.sessions);
+}
+function renderLatestSession(session) {
+  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)} \xB7 ${session.messageCount} messages`),
+    textElement("span", "latest-session-location", session.cwd)
+  );
+  link.append(dot, copy);
+  row.append(link, sessionDeleteButton(session));
+  return row;
+}
+function renderSessions() {
+  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") {
+  try {
+    listing = await api("/api/sessions");
+    renderSessions();
+    if (showStatus) {
+      clearAppStatus(statusKey);
+    }
+    return true;
+  } catch (error) {
+    setAppStatus(statusKey, readableError(error), "error");
+    return false;
+  }
+}
+async function refreshRepositorySelectionAfterRemoval(repositoryRoot, removedWorktreeRoot) {
+  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, worktree) {
+  if (!worktree.isLinkedWorktree || removingWorktreeRoots.size > 0) {
+    return;
+  }
+  const label = worktreeHeadLabel(worktree);
+  const statusKey = `worktree-removal:${worktree.worktreeRoot}`;
+  const confirmed = confirm(
+    `Delete linked worktree \u201C${label}\u201D?
+
+This 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("/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) {
+  const title = displaySessionTitle(session);
+  const statusKey = `session-deletion:${session.id}`;
+  if (!confirm(`Permanently delete \u201C${title}\u201D? This cannot be undone.`)) {
+    return;
+  }
+  deletingSessionIds.add(session.id);
+  renderSessions();
+  try {
+    await api(`/api/sessions/${encodeURIComponent(session.id)}`, { method: "DELETE" });
+    if (await refreshSessions(false, statusKey)) {
+      setAppStatus(statusKey, `Session \u201C${title}\u201D deleted`, "success");
+    }
+  } catch (error) {
+    setAppStatus(statusKey, readableError(error), "error");
+  } finally {
+    deletingSessionIds.delete(session.id);
+    renderSessions();
+  }
+}
+async function commitEditedWorkspace() {
+  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, options = {}) {
+  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("/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) {
+  await createSessionAt(cwd, { contextualCwd: cwd });
+}
+async function createSession() {
+  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() {
+  const match = /^\/sessions\/([^/]+)\/new\/?$/.exec(location.pathname);
+  if (!match?.[1]) {
+    return null;
+  }
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return null;
+  }
+}
+async function initializeWorkspace() {
+  if (workspaceInitialized) {
+    return;
+  }
+  workspaceInitialized = true;
+  let initialCwd = "";
+  let initialCwdFromSession = false;
+  const sourceId = sourceSessionId();
+  if (sourceId) {
+    try {
+      const response = await api(`/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) {
+  newSessionOpen = true;
+  renderNewSessionDisclosure();
+  await initializeWorkspace();
+  if (focusForm) {
+    const target = elements.recentWorkspace.disabled ? workspaceKind === "repository" ? elements.repositoryInput : elements.standaloneInput : elements.recentWorkspace;
+    target.focus();
+  }
+}
+function closeNewSession() {
+  newSessionOpen = false;
+  closeWorktreeEditor();
+  renderWorkspaceControls();
+}
+function changeWorkspaceKind(kind) {
+  ++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() {
+  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);
+  }
+}, 3e4);