@larose/pi-web 0.3.0

package/src/client/session.ts

@@ -0,0 +1,2174 @@
+import { displaySessionTitle } from "./display-title.js";
+import { SessionEventStream, type EventStreamState } from "./event-stream.js";
+import { renderMarkdown } from "./markdown.js";
+import {
+  copyMessageQueue,
+  messageQueueFromEvent,
+  reconcileMessageQueue,
+  steeringQueueGrew,
+  withoutSteeringMessage,
+  type MessageQueue,
+} from "./message-queue.js";
+import {
+  completeSlashCommand,
+  createSlashCompletionState,
+  getSlashCompletionWindow,
+  moveSlashCompletionSelection,
+  type SlashCompletionState,
+} from "./slash-completion.js";
+import { api, type GitContext, readableError, requiredElement, sessionPath, textElement } from "./shared.js";
+import {
+  activityPreview,
+  groupTranscriptActivity,
+  partitionAssistantContent,
+  toolActionLabel,
+  type ActivityGroup,
+  type ActivityItem,
+  type TranscriptMessage,
+} from "./transcript-activity.js";
+import { formatSessionUsage, type SessionUsage } from "./usage-format.js";
+import { relativePathWithin } from "./workspace-browser.js";
+
+interface AgentMessage extends TranscriptMessage {}
+
+interface PersistedMessage {
+  entryId: string;
+  message: AgentMessage;
+}
+
+interface PersistedCustomEntry {
+  entryId: string;
+  customType: string;
+  data: unknown;
+}
+
+type PersistedTranscriptEntry = ({ kind: "message" } & PersistedMessage) | ({ kind: "custom" } & PersistedCustomEntry);
+
+interface PersistedSession {
+  id: string;
+  cwd: string;
+  gitContext: GitContext | null;
+  name?: string;
+  created: string;
+  modified: string;
+  messageCount: number;
+  firstMessage: string;
+  transcriptEntries: PersistedTranscriptEntry[];
+  model: { provider: string; modelId: string } | null;
+  thinkingLevel: string;
+}
+
+type ExtensionUIDialogRequest =
+  | { id: string; method: "select"; title: string; options: string[]; timeout?: number }
+  | { id: string; method: "confirm"; title: string; message: string; timeout?: number }
+  | { id: string; method: "input"; title: string; placeholder?: string; timeout?: number }
+  | { id: string; method: "editor"; title: string; prefill?: string };
+
+type ExtensionUIRequest =
+  | ExtensionUIDialogRequest
+  | { id: string; method: "notify"; message: string; notifyType?: "info" | "warning" | "error" }
+  | { id: string; method: "setStatus"; statusKey: string; statusText?: string }
+  | {
+      id: string;
+      method: "setWidget";
+      widgetKey: string;
+      widgetLines?: string[];
+      widgetPlacement?: "aboveEditor" | "belowEditor";
+    }
+  | { id: string; method: "setTitle"; title: string }
+  | { id: string; method: "set_editor_text"; text: string };
+
+interface ExtensionUIState {
+  pending: ExtensionUIDialogRequest[];
+  statuses: Array<{ key: string; text: string }>;
+  widgets: Array<{ key: string; lines: string[]; placement: "aboveEditor" | "belowEditor" }>;
+}
+
+interface RuntimeCommand {
+  name: string;
+  description?: string;
+  source: "extension" | "prompt" | "skill";
+}
+
+interface RuntimeState {
+  id: string;
+  cwd: string;
+  sessionName?: string;
+  isStreaming: boolean;
+  isCompacting: boolean;
+  isWorking: boolean;
+  pendingMessageCount: number;
+  queue: MessageQueue;
+  model: { provider: string; id: string; name: string } | null;
+  thinkingLevel: string;
+  autoCompactionEnabled: boolean;
+  usage: SessionUsage;
+  commands: RuntimeCommand[];
+  extensionUI: ExtensionUIState;
+  streamingMessage?: AgentMessage;
+}
+
+interface SessionResponse {
+  session: PersistedSession;
+  runtime: RuntimeState | null;
+}
+
+type RuntimeEnvelope =
+  | { type: "agent_event"; event: Record<string, unknown> }
+  | ({ type: "extension_ui_request" } & ExtensionUIRequest)
+  | { type: "extension_ui_closed"; id: string }
+  | { type: "extension_ui_reset" }
+  | { type: "session_replaced"; previousId: string; sessionId: string }
+  | { type: "runtime_error"; message: string }
+  | { type: "runtime_disposed" };
+
+interface LiveBlock {
+  kind: string;
+  target: HTMLElement;
+  summary?: HTMLElement;
+  source?: string;
+}
+
+interface LiveMessage {
+  root: HTMLElement;
+  content: HTMLElement;
+}
+
+interface ActivityCard {
+  root: HTMLDetailsElement;
+  content: HTMLElement;
+  title: HTMLElement;
+  action: HTMLElement;
+  statusText: HTMLElement;
+  manuallyToggled: boolean;
+}
+
+const elements = {
+  abort: requiredElement<HTMLButtonElement>("[data-abort]"),
+  composer: requiredElement<HTMLFormElement>("[data-composer]"),
+  connection: requiredElement<HTMLElement>("[data-connection]"),
+  createSession: requiredElement<HTMLAnchorElement>("[data-create-session]"),
+  extensionPrompt: requiredElement<HTMLElement>("[data-extension-prompt]"),
+  extensionStatusItem: requiredElement<HTMLElement>("[data-extension-status-item]"),
+  extensionStatuses: requiredElement<HTMLElement>("[data-extension-statuses]"),
+  extensionWidgetsAbove: requiredElement<HTMLElement>("[data-extension-widgets-above]"),
+  extensionWidgetsBelow: requiredElement<HTMLElement>("[data-extension-widgets-below]"),
+  prompt: requiredElement<HTMLTextAreaElement>("[data-prompt]"),
+  send: requiredElement<HTMLButtonElement>("[data-send]"),
+  sessionContext: requiredElement<HTMLElement>(".session-context"),
+  sessionContextToggle: requiredElement<HTMLButtonElement>("[data-session-context-toggle]"),
+  sessionContextUsage: requiredElement<HTMLElement>("[data-session-context-usage]"),
+  sessionModel: requiredElement<HTMLElement>("[data-session-model]"),
+  sessionTokens: requiredElement<HTMLElement>("[data-session-tokens]"),
+  sessionWorkspaceRepository: requiredElement<HTMLElement>("[data-session-workspace-repository]"),
+  sessionWorkspaceRepositoryPath: requiredElement<HTMLElement>("[data-session-workspace-repository-path]"),
+  sessionWorkspaceState: requiredElement<HTMLElement>("[data-session-workspace-state]"),
+  sessionWorkspaceWorkingDirectory: requiredElement<HTMLElement>("[data-session-workspace-working-directory]"),
+  sessionWorkspaceWorkingDirectoryPath: requiredElement<HTMLElement>("[data-session-workspace-working-directory-path]"),
+  sessionWorkspaceWorktree: requiredElement<HTMLElement>("[data-session-workspace-worktree]"),
+  sessionWorkspaceWorktreePath: requiredElement<HTMLElement>("[data-session-workspace-worktree-path]"),
+  slashCompletion: requiredElement<HTMLElement>("[data-slash-completion]"),
+  sessionTitle: requiredElement<HTMLButtonElement>("[data-session-title]"),
+  transcript: requiredElement<HTMLElement>("[data-transcript]"),
+};
+
+let currentSession: PersistedSession | undefined;
+let currentRuntime: RuntimeState | null = null;
+let currentSessionId: string | undefined;
+let liveMessage: LiveMessage | undefined;
+let liveActivity: ActivityCard | undefined;
+let streamBlocks = new Map<number, LiveBlock>();
+let markdownRenderFrame: number | undefined;
+const pendingMarkdownBlocks = new Set<LiveBlock>();
+let sending = false;
+let renaming = false;
+let extensionUI: ExtensionUIState = { pending: [], statuses: [], widgets: [] };
+let renderedExtensionRequestId: string | undefined;
+let slashCompletion: SlashCompletionState<RuntimeCommand> | null = null;
+let dismissedSlashCompletionValue: string | undefined;
+let reconcileSequence = 0;
+let optimisticSubmission: { sessionId: string; message: string; root: HTMLElement } | undefined;
+let submittedTurnAnchor:
+  | {
+      sessionId: string;
+      message: string;
+      root: HTMLElement;
+      needsAlignment: boolean;
+    }
+  | undefined;
+let submittedTurnRunwayFrame: number | undefined;
+let dequeuedSteering: string[] = [];
+let discardingQueue = false;
+const liveTools = new Map<string, HTMLElement>();
+const SLASH_COMPLETION_MAX_VISIBLE = 5;
+
+function currentNativeName(): string | undefined {
+  return currentRuntime?.sessionName?.trim() || currentSession?.name?.trim() || undefined;
+}
+
+function updateSessionHeading(): void {
+  if (!currentSessionId) {
+    return;
+  }
+
+  const title = displaySessionTitle({
+    name: currentNativeName(),
+    firstMessage: currentSession?.firstMessage,
+  });
+  const renameLabel = `Rename session title: ${title}`;
+  elements.sessionTitle.textContent = title;
+  elements.sessionTitle.title = renameLabel;
+  elements.sessionTitle.setAttribute("aria-label", renameLabel);
+  document.title = `${title} · Pi`;
+}
+
+function applyCurrentSessionName(name: string | undefined): void {
+  if (currentRuntime) {
+    if (name) {
+      currentRuntime.sessionName = name;
+    } else {
+      delete currentRuntime.sessionName;
+    }
+  }
+  if (currentSession) {
+    if (name) {
+      currentSession.name = name;
+    } else {
+      delete currentSession.name;
+    }
+  }
+
+  updateSessionHeading();
+}
+
+function setConnection(label: string, state: "offline" | "online" | "error"): void {
+  elements.connection.textContent = label;
+  elements.connection.dataset.state = state;
+}
+
+function setSessionContextCollapsed(collapsed: boolean): void {
+  const label = `${collapsed ? "Expand" : "Collapse"} session context`;
+
+  elements.sessionContext.classList.toggle("is-collapsed", collapsed);
+  elements.sessionContextToggle.setAttribute("aria-expanded", String(!collapsed));
+  elements.sessionContextToggle.setAttribute("aria-label", label);
+  elements.sessionContextToggle.title = label;
+}
+
+function resizePrompt(): void {
+  elements.prompt.style.height = "auto";
+  elements.prompt.style.overflowY = "hidden";
+
+  const styles = getComputedStyle(elements.prompt);
+  const borderHeight = Number.parseFloat(styles.borderTopWidth) + Number.parseFloat(styles.borderBottomWidth);
+  const naturalHeight = elements.prompt.scrollHeight + borderHeight;
+  elements.prompt.style.height = `${naturalHeight}px`;
+
+  const renderedHeight = elements.prompt.getBoundingClientRect().height;
+  elements.prompt.style.overflowY = naturalHeight > renderedHeight + 0.5 ? "auto" : "hidden";
+}
+
+function closeSlashCompletion(dismiss = false): void {
+  if (dismiss) {
+    dismissedSlashCompletionValue = elements.prompt.value;
+  }
+  slashCompletion = null;
+  elements.slashCompletion.hidden = true;
+  elements.slashCompletion.replaceChildren();
+  elements.prompt.setAttribute("aria-expanded", "false");
+  elements.prompt.removeAttribute("aria-activedescendant");
+}
+
+function applySelectedSlashCompletion(submit: boolean): void {
+  const command = slashCompletion?.matches[slashCompletion.selectedIndex];
+  if (!command) {
+    return;
+  }
+
+  setPromptValue(completeSlashCommand(command));
+  elements.prompt.setSelectionRange(elements.prompt.value.length, elements.prompt.value.length);
+  elements.prompt.focus();
+
+  if (submit) {
+    void sendMessage();
+  }
+}
+
+function renderSlashCompletion(resetSelection = false): void {
+  if (elements.prompt.disabled || dismissedSlashCompletionValue === elements.prompt.value) {
+    closeSlashCompletion();
+    return;
+  }
+
+  const selectedName = resetSelection ? undefined : slashCompletion?.matches[slashCompletion.selectedIndex]?.name;
+  const nextState = createSlashCompletionState(currentRuntime?.commands ?? [], elements.prompt.value, selectedName);
+  if (!nextState) {
+    closeSlashCompletion();
+    return;
+  }
+
+  slashCompletion = nextState;
+  const visible = getSlashCompletionWindow(nextState, SLASH_COMPLETION_MAX_VISIBLE);
+  const options = visible.items.map((command, visibleIndex) => {
+    const index = visible.startIndex + visibleIndex;
+    const selected = index === nextState.selectedIndex;
+    const option = document.createElement("button");
+    option.type = "button";
+    option.className = "slash-completion-option";
+    option.id = `slash-command-option-${index}`;
+    option.dataset.commandIndex = String(index);
+    option.setAttribute("role", "option");
+    option.setAttribute("aria-selected", String(selected));
+
+    const name = textElement("span", "slash-completion-name", `/${command.name}`);
+    option.append(name);
+    if (command.description) {
+      option.append(textElement("span", "slash-completion-description", command.description));
+    }
+
+    option.addEventListener("pointerdown", (event) => event.preventDefault());
+    option.addEventListener("click", () => {
+      if (!slashCompletion) {
+        return;
+      }
+      slashCompletion = { ...slashCompletion, selectedIndex: index };
+      applySelectedSlashCompletion(false);
+    });
+    return option;
+  });
+
+  elements.slashCompletion.replaceChildren(...options);
+  elements.slashCompletion.hidden = false;
+  elements.prompt.setAttribute("aria-expanded", "true");
+  elements.prompt.setAttribute("aria-activedescendant", `slash-command-option-${nextState.selectedIndex}`);
+}
+
+function setPromptValue(value: string): void {
+  dismissedSlashCompletionValue = undefined;
+  elements.prompt.value = value;
+  resizePrompt();
+  renderSlashCompletion(true);
+}
+
+function updateControls(): void {
+  const selected = currentSessionId !== undefined;
+  const working = currentRuntime?.isWorking ?? false;
+  elements.prompt.disabled = !selected;
+  elements.send.disabled = !selected || sending;
+  elements.abort.disabled = !selected || !working || sending;
+  elements.sessionTitle.disabled = !selected || renaming;
+  renderSlashCompletion();
+}
+
+function setContextValue(element: HTMLElement, value: string, title = value): void {
+  element.textContent = value;
+  element.title = value ? title : "";
+}
+
+function setWorkspaceRow(row: HTMLElement, path: HTMLElement, value = "", title = value): void {
+  row.hidden = !value;
+  setContextValue(path, value, title);
+}
+
+function setWorkspace(cwd: string, context: GitContext | null | undefined): void {
+  elements.sessionWorkspaceState.hidden = true;
+  setContextValue(elements.sessionWorkspaceState, "");
+  setWorkspaceRow(elements.sessionWorkspaceRepository, elements.sessionWorkspaceRepositoryPath);
+  setWorkspaceRow(elements.sessionWorkspaceWorktree, elements.sessionWorkspaceWorktreePath);
+  setWorkspaceRow(elements.sessionWorkspaceWorkingDirectory, elements.sessionWorkspaceWorkingDirectoryPath);
+
+  if (context === undefined) {
+    return;
+  }
+
+  if (context === null) {
+    elements.sessionWorkspaceState.hidden = false;
+    setContextValue(elements.sessionWorkspaceState, "Not a Git working tree");
+    setWorkspaceRow(elements.sessionWorkspaceWorkingDirectory, elements.sessionWorkspaceWorkingDirectoryPath, cwd);
+    return;
+  }
+
+  setWorkspaceRow(elements.sessionWorkspaceRepository, elements.sessionWorkspaceRepositoryPath, context.repositoryRoot);
+
+  if (context.isLinkedWorktree) {
+    const relativeWorktree = relativePathWithin(context.repositoryRoot, context.worktreeRoot);
+    const worktreePath = relativeWorktree && relativeWorktree !== "." ? relativeWorktree : context.worktreeRoot;
+    setWorkspaceRow(
+      elements.sessionWorkspaceWorktree,
+      elements.sessionWorkspaceWorktreePath,
+      worktreePath,
+      context.worktreeRoot,
+    );
+  }
+
+  setWorkspaceRow(elements.sessionWorkspaceWorkingDirectory, elements.sessionWorkspaceWorkingDirectoryPath, cwd);
+}
+
+function updateSessionUsage(usage: SessionUsage | null, autoCompactionEnabled = false): void {
+  const formatted = formatSessionUsage(usage, autoCompactionEnabled);
+  const tokenLines =
+    formatted.tokenLines.length > 0
+      ? formatted.tokenLines.map((line) => textElement("span", "session-token-line", line))
+      : [textElement("span", "session-token-line is-empty", "No usage yet")];
+
+  for (const line of tokenLines) {
+    line.setAttribute("aria-hidden", "true");
+  }
+  elements.sessionTokens.replaceChildren(...tokenLines);
+  elements.sessionTokens.title = formatted.tokenAccessibleText;
+  elements.sessionTokens.setAttribute("aria-label", formatted.tokenAccessibleText);
+
+  const contextVisual = document.createElement("div");
+  contextVisual.className = "session-context-usage-visual";
+  contextVisual.setAttribute("aria-hidden", "true");
+
+  const contextSummary = document.createElement("div");
+  contextSummary.className = "session-context-usage-summary";
+  contextSummary.append(textElement("span", "session-context-percentage", formatted.context.percentageText));
+  if (formatted.context.capacityText) {
+    contextSummary.append(textElement("span", "session-context-capacity", formatted.context.capacityText));
+  }
+  contextVisual.append(contextSummary);
+
+  if (formatted.context.meterPercent !== null) {
+    const meter = document.createElement("span");
+    meter.className = "session-context-meter";
+    const fill = document.createElement("span");
+    fill.className = "session-context-meter-fill";
+    fill.style.width = `${formatted.context.meterPercent}%`;
+    meter.append(fill);
+    contextVisual.append(meter);
+  }
+
+  if (formatted.context.autoCompactionEnabled) {
+    contextVisual.append(textElement("span", "session-context-auto", "Auto-compact enabled"));
+  }
+
+  elements.sessionContextUsage.dataset.state = formatted.context.state;
+  elements.sessionContextUsage.replaceChildren(contextVisual);
+  elements.sessionContextUsage.title = formatted.context.accessibleText;
+  elements.sessionContextUsage.setAttribute("aria-label", formatted.context.accessibleText);
+}
+
+function updateSessionContext(): void {
+  const runtimeModel = currentRuntime?.model;
+  const persistedModel = currentSession?.model;
+  const modelIdentifier = runtimeModel
+    ? `${runtimeModel.provider}/${runtimeModel.id}`
+    : persistedModel
+      ? `${persistedModel.provider}/${persistedModel.modelId}`
+      : "Unavailable";
+  const modelName = runtimeModel?.name.trim() || modelIdentifier;
+  const thinking = currentRuntime?.thinkingLevel ?? currentSession?.thinkingLevel ?? "off";
+  const modelValue = modelIdentifier === "Unavailable" ? modelIdentifier : `${modelName} (${thinking})`;
+  const modelTitle =
+    modelIdentifier === "Unavailable" ? modelIdentifier : `${modelIdentifier} · Thinking level: ${thinking}`;
+
+  setContextValue(elements.sessionModel, modelValue, modelTitle);
+  elements.sessionModel.setAttribute(
+    "aria-label",
+    modelIdentifier === "Unavailable"
+      ? "Model unavailable"
+      : `Model: ${modelName}; identifier: ${modelIdentifier}; thinking level: ${thinking}`,
+  );
+  updateSessionUsage(currentRuntime?.usage ?? null, currentRuntime?.autoCompactionEnabled);
+}
+
+function safeJson(value: unknown): string {
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function createActivityCard(group?: ActivityGroup, running = false): ActivityCard {
+  const root = document.createElement("details");
+  root.className = "assistant-activity";
+  root.open = false;
+  root.dataset.state = running ? "running" : (group?.outcome ?? "complete");
+
+  const summary = document.createElement("summary");
+  const icon = document.createElement("span");
+  icon.className = "assistant-activity-status";
+  icon.setAttribute("aria-hidden", "true");
+
+  const summaryCopy = document.createElement("span");
+  summaryCopy.className = "assistant-activity-summary-copy";
+  const title = textElement(
+    "span",
+    "assistant-activity-title",
+    group?.preview ?? (running ? "Working…" : "Assistant activity"),
+  );
+  const action = textElement("span", "assistant-activity-action", "");
+  action.hidden = true;
+  summaryCopy.append(title, action);
+
+  const statusText = textElement(
+    "span",
+    "sr-only",
+    running
+      ? "Assistant working."
+      : group?.outcome === "aborted"
+        ? "Assistant work stopped."
+        : "Assistant work complete.",
+  );
+  summary.append(icon, summaryCopy, statusText);
+
+  const content = document.createElement("div");
+  content.className = "assistant-activity-content";
+  root.append(summary, content);
+
+  const card: ActivityCard = {
+    root,
+    content,
+    title,
+    action,
+    statusText,
+    manuallyToggled: false,
+  };
+  summary.addEventListener("click", () => {
+    card.manuallyToggled = true;
+  });
+  summary.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      card.manuallyToggled = true;
+    }
+  });
+
+  if (group) {
+    for (const item of group.items) {
+      appendActivityItem(card, item);
+    }
+    updateActivitySummary(card, group.preview, group.lastAction);
+  }
+  if (!running) {
+    card.action.hidden = true;
+  }
+
+  return card;
+}
+
+function updateActivitySummary(card: ActivityCard, preview?: string, action?: string): void {
+  if (preview) {
+    card.title.textContent = preview;
+  }
+  if (action) {
+    card.action.textContent = action;
+    card.action.hidden = false;
+  }
+}
+
+function setActivityRunning(card: ActivityCard, running: boolean): void {
+  card.root.dataset.state = running ? "running" : "complete";
+  card.statusText.textContent = running ? "Assistant working." : "Assistant work complete.";
+  if (running && card.action.textContent) {
+    card.action.hidden = false;
+  } else if (!running) {
+    card.action.hidden = true;
+  }
+}
+
+function setActivityAborted(card: ActivityCard): void {
+  card.root.dataset.state = "aborted";
+  card.statusText.textContent = "Assistant work stopped.";
+  card.action.hidden = true;
+  collapseActivity(card);
+}
+
+function collapseActivity(card: ActivityCard): void {
+  if (!card.manuallyToggled) {
+    card.root.open = false;
+  }
+}
+
+function appendActivityItem(card: ActivityCard, item: ActivityItem, append = true): HTMLElement {
+  const details = document.createElement("details");
+  details.className = `assistant-activity-item ${item.kind}`;
+  const summary = document.createElement("summary");
+  const body = document.createElement("div");
+  body.className = "assistant-activity-item-content";
+
+  if (item.kind === "thinking") {
+    summary.textContent = "Thinking";
+    body.append(textElement("pre", "", item.text));
+    const preview = activityPreview(item.text);
+    updateActivitySummary(card, preview || undefined);
+  } else if (item.kind === "toolCall") {
+    summary.textContent = toolActionLabel(item.name);
+    body.append(textElement("pre", "", safeJson(item.arguments)));
+    updateActivitySummary(card, undefined, toolActionLabel(item.name));
+  } else {
+    summary.textContent = `Tool result · ${item.message.toolName ?? "tool"}`;
+    appendContent(body, item.message.content);
+    updateActivitySummary(card, undefined, toolActionLabel(item.message.toolName, true));
+  }
+
+  details.append(summary, body);
+  if (append) {
+    card.content.append(details);
+  }
+  return details;
+}
+
+function markdownElement(source: string): HTMLElement {
+  const element = document.createElement("div");
+  element.className = "message-text markdown-content";
+  element.innerHTML = renderMarkdown(source);
+  return element;
+}
+
+function appendContent(container: HTMLElement, content: unknown, markdown = false): void {
+  if (typeof content === "string") {
+    container.append(markdown ? markdownElement(content) : textElement("p", "message-text", content));
+    return;
+  }
+
+  if (!Array.isArray(content)) {
+    if (content !== undefined) {
+      container.append(textElement("pre", "", safeJson(content)));
+    }
+    return;
+  }
+
+  for (const part of content) {
+    if (!part || typeof part !== "object") {
+      if (part !== undefined && part !== null) {
+        container.append(textElement("pre", "", safeJson(part)));
+      }
+      continue;
+    }
+    const block = part as Record<string, unknown>;
+
+    if (block.type === "text") {
+      const text = typeof block.text === "string" ? block.text : "";
+      container.append(markdown ? markdownElement(text) : textElement("p", "message-text", text));
+      continue;
+    }
+
+    if (block.type === "thinking") {
+      const details = document.createElement("details");
+      const summary = document.createElement("summary");
+      summary.textContent = "Thinking";
+      details.append(summary, textElement("pre", "", typeof block.thinking === "string" ? block.thinking : ""));
+      container.append(details);
+      continue;
+    }
+
+    if (block.type === "toolCall") {
+      const details = document.createElement("details");
+      const summary = document.createElement("summary");
+      summary.textContent = `Tool · ${String(block.name ?? "unknown")}`;
+      details.append(summary, textElement("pre", "", safeJson(block.arguments)));
+      container.append(details);
+      continue;
+    }
+
+    if (block.type === "image") {
+      container.append(textElement("p", "message-text", "[Image]"));
+      continue;
+    }
+
+    container.append(textElement("pre", "", safeJson(block)));
+  }
+}
+
+function createMessage(message: AgentMessage, label?: string): HTMLElement {
+  const collapsible = message.role === "toolResult" || message.role === "live-tool";
+  let root: HTMLElement;
+  let header: HTMLElement;
+  let content: HTMLElement;
+
+  if (collapsible) {
+    root = document.createElement("details");
+    root.className = "message";
+    header = document.createElement("summary");
+    content = document.createElement("div");
+    content.className = "message-content";
+    root.append(header, content);
+  } else {
+    const template = requiredElement<HTMLTemplateElement>("#message-template");
+    const fragment = template.content.cloneNode(true) as DocumentFragment;
+    root = requiredElement<HTMLElement>("article", fragment);
+    header = requiredElement<HTMLElement>("header", root);
+    content = requiredElement<HTMLElement>(".message-content", root);
+  }
+
+  root.classList.add(message.role);
+  if (message.isError) {
+    root.classList.add("error");
+  }
+  header.textContent =
+    label ??
+    (message.role === "toolResult"
+      ? `Tool result · ${message.toolName ?? "tool"}`
+      : message.role === "custom"
+        ? "extension"
+        : message.role);
+  appendContent(content, message.content, message.role === "assistant");
+  return root;
+}
+
+function renderEmpty(title: string, description: string): void {
+  const empty = document.createElement("div");
+  empty.className = "empty-state";
+  empty.append(textElement("strong", "", title), textElement("span", "", description));
+  elements.transcript.replaceChildren(empty);
+}
+
+function setSubmittedTurnAnchor(active: boolean): void {
+  elements.transcript.classList.toggle("has-submitted-turn-anchor", active);
+  if (!active) {
+    elements.transcript.style.removeProperty("--submitted-turn-runway");
+  }
+}
+
+function updateSubmittedTurnRunway(): void {
+  submittedTurnRunwayFrame = undefined;
+  const turn = submittedTurnAnchor;
+  if (!turn || turn.sessionId !== currentSessionId || !turn.root.isConnected) {
+    return;
+  }
+
+  const transcriptRect = elements.transcript.getBoundingClientRect();
+  const rootRect = turn.root.getBoundingClientRect();
+  const scrollPadding = Number.parseFloat(getComputedStyle(elements.transcript).scrollPaddingBlockStart) || 0;
+  const rootContentTop = elements.transcript.scrollTop + rootRect.top - transcriptRect.top;
+  const anchoredScrollTop = Math.max(0, rootContentTop - scrollPadding);
+  const previousScrollTop = elements.transcript.scrollTop;
+
+  elements.transcript.style.setProperty("--submitted-turn-runway", "0px");
+  const naturalScrollHeight = elements.transcript.scrollHeight;
+  const runway = Math.max(0, Math.ceil(anchoredScrollTop + elements.transcript.clientHeight - naturalScrollHeight));
+  elements.transcript.style.setProperty("--submitted-turn-runway", `${runway}px`);
+
+  const maximumScrollTop = elements.transcript.scrollHeight - elements.transcript.clientHeight;
+  elements.transcript.scrollTop = Math.min(previousScrollTop, maximumScrollTop);
+}
+
+function scheduleSubmittedTurnRunwayUpdate(): void {
+  if (submittedTurnRunwayFrame !== undefined) {
+    return;
+  }
+
+  submittedTurnRunwayFrame = requestAnimationFrame(updateSubmittedTurnRunway);
+}
+
+function alignSubmittedTurn(root: HTMLElement): void {
+  const turn = submittedTurnAnchor;
+  if (!turn || turn.sessionId !== currentSessionId) {
+    return;
+  }
+
+  turn.root = root;
+  updateSubmittedTurnRunway();
+  if (!turn.needsAlignment) {
+    return;
+  }
+
+  root.scrollIntoView({ block: "start" });
+  turn.needsAlignment = false;
+}
+
+function insertBeforePendingQueue(node: Node): void {
+  const firstPending = elements.transcript.querySelector("[data-pending-steering]");
+  elements.transcript.insertBefore(node, firstPending);
+}
+
+function renderPendingQueue(): void {
+  for (const pending of elements.transcript.querySelectorAll("[data-pending-steering]")) {
+    pending.remove();
+  }
+
+  const messages = currentRuntime?.queue.steering ?? [];
+  if (messages.length === 0) {
+    return;
+  }
+
+  elements.transcript.querySelector(".empty-state")?.remove();
+  messages.forEach((message, index) => {
+    const root = createMessage({ role: "user", content: message });
+    root.classList.add("pending");
+    root.dataset.pendingSteering = "true";
+    root.dataset.state = "pending";
+
+    const header = requiredElement<HTMLElement>("header", root);
+    const label = textElement("span", "pending-message-label", "Pending");
+    const remove = textElement("button", "pending-message-remove", "×") as HTMLButtonElement;
+    const removeLabel = `Remove pending message ${index + 1}`;
+    remove.type = "button";
+    remove.disabled = sending;
+    remove.title = removeLabel;
+    remove.setAttribute("aria-label", removeLabel);
+    remove.addEventListener("click", () => void removePendingSteering(index, message));
+    header.replaceChildren(label, remove);
+
+    elements.transcript.append(root);
+  });
+}
+
+function anchorPendingSteeringMessage(index: number): void {
+  const pending = elements.transcript.querySelectorAll<HTMLElement>("[data-pending-steering]")[index];
+  if (pending) {
+    alignSubmittedTurn(pending);
+  }
+}
+
+function renderConversation(session: PersistedSession, runtime: RuntimeState | null): void {
+  const preservedActivityOpen = liveActivity?.manuallyToggled ? liveActivity.root.open : undefined;
+  const preservedActivityAborted = liveActivity?.root.dataset.state === "aborted";
+  liveMessage = undefined;
+  liveActivity = undefined;
+  resetStreamBlocks();
+  liveTools.clear();
+
+  const fragment = document.createDocumentFragment();
+  let latestTurnActivity: ActivityCard | undefined;
+
+  for (const entry of groupTranscriptActivity(session.transcriptEntries)) {
+    if (entry.kind === "activity") {
+      latestTurnActivity = createActivityCard(entry);
+      fragment.append(latestTurnActivity.root);
+      continue;
+    }
+
+    if (entry.kind === "message") {
+      if (entry.message.role === "user") {
+        latestTurnActivity = undefined;
+      }
+      if (entry.message.role !== "custom" || entry.message.display !== false) {
+        fragment.append(createMessage(entry.message));
+      }
+      continue;
+    }
+
+    if (!entry.data || typeof entry.data !== "object") {
+      continue;
+    }
+
+    const data = entry.data as { path?: unknown; markdown?: unknown };
+    if (typeof data.markdown !== "string") {
+      continue;
+    }
+
+    const fileName = typeof data.path === "string" ? data.path.split("/").at(-1) : undefined;
+    const label = fileName ? `extension snapshot · ${fileName}` : "extension snapshot";
+    const snapshot = createMessage({ role: "extension", content: [] }, label);
+    requiredElement<HTMLElement>(".message-content", snapshot).append(markdownElement(data.markdown));
+    fragment.append(snapshot);
+  }
+
+  if (fragment.childNodes.length === 0 && !runtime?.isWorking && !runtime?.queue.steering.length) {
+    renderEmpty("Start a conversation", "Send a message to begin this session.");
+  } else {
+    elements.transcript.replaceChildren(fragment);
+  }
+
+  if (latestTurnActivity && preservedActivityOpen !== undefined) {
+    latestTurnActivity.manuallyToggled = true;
+    latestTurnActivity.root.open = preservedActivityOpen;
+  }
+
+  if (runtime?.isWorking) {
+    liveActivity = latestTurnActivity ?? ensureLiveActivity();
+    if (preservedActivityOpen !== undefined) {
+      liveActivity.manuallyToggled = true;
+      liveActivity.root.open = preservedActivityOpen;
+    }
+    setActivityRunning(liveActivity, true);
+    if (runtime.streamingMessage) {
+      hydrateStreamingMessage(runtime.streamingMessage);
+    }
+  } else if (preservedActivityAborted) {
+    liveActivity = latestTurnActivity ?? ensureLiveActivity();
+    setActivityAborted(liveActivity);
+  }
+
+  renderPendingQueue();
+}
+
+function ensureLiveActivity(): ActivityCard {
+  if (liveActivity) {
+    return liveActivity;
+  }
+
+  elements.transcript.querySelector(".empty-state")?.remove();
+  liveActivity = createActivityCard(undefined, true);
+  insertBeforePendingQueue(liveActivity.root);
+  return liveActivity;
+}
+
+function ensureLiveMessage(): LiveMessage {
+  if (liveMessage) {
+    return liveMessage;
+  }
+
+  const activity = ensureLiveActivity();
+  collapseActivity(activity);
+  const root = createMessage({ role: "assistant", content: [] }, "assistant · streaming");
+  const content = requiredElement<HTMLElement>(".message-content", root);
+  liveMessage = { root, content };
+  insertBeforePendingQueue(root);
+  return liveMessage;
+}
+
+function renderLiveMarkdown(block: LiveBlock): void {
+  if (block.kind !== "text") {
+    return;
+  }
+
+  block.target.innerHTML = renderMarkdown(block.source ?? "");
+}
+
+function flushLiveMarkdown(): void {
+  markdownRenderFrame = undefined;
+  const blocks = [...pendingMarkdownBlocks];
+  pendingMarkdownBlocks.clear();
+  for (const block of blocks) {
+    renderLiveMarkdown(block);
+  }
+}
+
+function scheduleLiveMarkdown(block: LiveBlock): void {
+  pendingMarkdownBlocks.add(block);
+  if (markdownRenderFrame !== undefined) {
+    return;
+  }
+
+  markdownRenderFrame = requestAnimationFrame(flushLiveMarkdown);
+}
+
+function resetStreamBlocks(): void {
+  if (markdownRenderFrame !== undefined) {
+    cancelAnimationFrame(markdownRenderFrame);
+  }
+  markdownRenderFrame = undefined;
+  pendingMarkdownBlocks.clear();
+  streamBlocks = new Map();
+}
+
+function ensureStreamBlock(index: number, kind: string, initial?: Record<string, unknown>): LiveBlock {
+  const existing = streamBlocks.get(index);
+  if (existing) {
+    return existing;
+  }
+
+  let block: LiveBlock;
+  if (kind === "thinking") {
+    const card = ensureLiveActivity();
+    const details = appendActivityItem(card, { kind: "thinking", text: "" });
+    block = {
+      kind,
+      target: requiredElement<HTMLElement>("pre", details),
+      summary: requiredElement<HTMLElement>("summary", details),
+    };
+  } else if (kind.toLowerCase().startsWith("toolcall")) {
+    const name = String(initial?.toolName ?? initial?.name ?? "tool");
+    const card = ensureLiveActivity();
+    const details = appendActivityItem(card, { kind: "toolCall", name, arguments: {} });
+    block = {
+      kind: "toolcall",
+      target: requiredElement<HTMLElement>("pre", details),
+      summary: requiredElement<HTMLElement>("summary", details),
+    };
+  } else {
+    const live = ensureLiveMessage();
+    const markdown = markdownElement("");
+    live.content.append(markdown);
+    block = { kind: "text", target: markdown, source: "" };
+  }
+
+  streamBlocks.set(index, block);
+  return block;
+}
+
+function hydrateStreamingMessage(partial: AgentMessage): void {
+  resetStreamBlocks();
+
+  if (typeof partial.content === "string") {
+    const block = ensureStreamBlock(0, "text");
+    block.source = partial.content;
+    renderLiveMarkdown(block);
+    return;
+  }
+  if (!Array.isArray(partial.content)) {
+    return;
+  }
+
+  partial.content.forEach((part, index) => {
+    if (!part || typeof part !== "object") {
+      return;
+    }
+    const value = part as Record<string, unknown>;
+    const kind = typeof value.type === "string" ? value.type : "text";
+    const block = ensureStreamBlock(index, kind, value);
+
+    if (kind === "text" && typeof value.text === "string") {
+      block.source = value.text;
+      renderLiveMarkdown(block);
+    }
+    if (kind === "thinking" && typeof value.thinking === "string") {
+      block.target.textContent = value.thinking;
+      updateActivitySummary(ensureLiveActivity(), activityPreview(value.thinking) || undefined);
+    }
+    if (kind === "toolCall" && value.arguments !== undefined) {
+      block.target.textContent = safeJson(value.arguments);
+    }
+  });
+}
+
+function handleMessageUpdate(event: Record<string, unknown>): void {
+  const update = event.assistantMessageEvent;
+  if (!update || typeof update !== "object") {
+    return;
+  }
+  const delta = update as Record<string, unknown>;
+  const type = typeof delta.type === "string" ? delta.type : "";
+  const index = typeof delta.contentIndex === "number" ? delta.contentIndex : 0;
+
+  if (type === "text_start") {
+    ensureStreamBlock(index, "text");
+  }
+  if (type === "thinking_start") {
+    ensureStreamBlock(index, "thinking");
+  }
+  if (type === "toolcall_start") {
+    ensureStreamBlock(index, "toolcall", delta);
+  }
+
+  if (type === "text_delta" || type === "thinking_delta" || type === "toolcall_delta") {
+    const kind = type === "thinking_delta" ? "thinking" : type === "toolcall_delta" ? "toolcall" : "text";
+    const block = ensureStreamBlock(index, kind, delta);
+    if (typeof delta.delta === "string") {
+      if (kind === "text") {
+        block.source = (block.source ?? "") + delta.delta;
+        scheduleLiveMarkdown(block);
+      } else {
+        block.target.append(document.createTextNode(delta.delta));
+      }
+    }
+    if (kind === "thinking") {
+      updateActivitySummary(ensureLiveActivity(), activityPreview(block.target.textContent ?? "") || undefined);
+    }
+  }
+
+  if (type === "toolcall_end") {
+    const block = ensureStreamBlock(index, "toolcall", delta);
+    const toolCall = delta.toolCall as Record<string, unknown> | undefined;
+    const name = toolCall?.name ?? delta.toolName;
+    if (block.summary) {
+      block.summary.textContent = toolActionLabel(name);
+    }
+    if (toolCall?.arguments !== undefined) {
+      block.target.textContent = safeJson(toolCall.arguments);
+    }
+    updateActivitySummary(ensureLiveActivity(), undefined, toolActionLabel(name));
+  }
+}
+
+function resultText(value: unknown): string {
+  if (!value || typeof value !== "object") {
+    return "";
+  }
+  const content = (value as { content?: unknown }).content;
+  if (!Array.isArray(content)) {
+    return "";
+  }
+
+  return content
+    .filter((part): part is { type: string; text: string } =>
+      Boolean(
+        part &&
+          typeof part === "object" &&
+          (part as { type?: unknown }).type === "text" &&
+          typeof (part as { text?: unknown }).text === "string",
+      ),
+    )
+    .map((part) => part.text)
+    .join("\n");
+}
+
+function updateTool(event: Record<string, unknown>, finished: boolean): void {
+  const id = typeof event.toolCallId === "string" ? event.toolCallId : undefined;
+  if (!id) {
+    return;
+  }
+
+  const card = ensureLiveActivity();
+  const name = String(event.toolName ?? "tool");
+  let root = liveTools.get(id);
+  if (!root) {
+    root = document.createElement("details");
+    root.className = "assistant-activity-item toolResult live-tool";
+    const summary = textElement("summary", "", `Tool result · ${name}`);
+    const content = document.createElement("div");
+    content.className = "assistant-activity-item-content";
+    root.append(summary, content);
+    card.content.append(root);
+    liveTools.set(id, root);
+  }
+
+  const content = requiredElement<HTMLElement>(".assistant-activity-item-content", root);
+  const result = finished ? event.result : event.partialResult;
+  content.replaceChildren(textElement("pre", "", resultText(result)));
+  if (finished) {
+    requiredElement<HTMLElement>("summary", root).textContent = `Tool result · ${name} · done`;
+  }
+  updateActivitySummary(card, undefined, toolActionLabel(name, finished));
+}
+
+function messageText(message: AgentMessage): string | undefined {
+  if (typeof message.content === "string") {
+    return message.content;
+  }
+  if (!Array.isArray(message.content)) {
+    return undefined;
+  }
+
+  const text = message.content
+    .filter((part): part is { type: string; text: string } =>
+      Boolean(
+        part &&
+          typeof part === "object" &&
+          (part as { type?: unknown }).type === "text" &&
+          typeof (part as { text?: unknown }).text === "string",
+      ),
+    )
+    .map((part) => part.text)
+    .join("\n");
+  return text || undefined;
+}
+
+function appendUserMessage(message: AgentMessage): void {
+  const text = messageText(message);
+  const candidate = optimisticSubmission;
+  const optimistic =
+    candidate && candidate.sessionId === currentSessionId && candidate.root.isConnected && candidate.message === text
+      ? candidate
+      : undefined;
+  const dequeuedIndex = text === undefined ? -1 : dequeuedSteering.indexOf(text);
+  if (!optimistic && dequeuedIndex < 0) {
+    return;
+  }
+
+  if (dequeuedIndex >= 0) {
+    dequeuedSteering.splice(dequeuedIndex, 1);
+  }
+  const final = createMessage(message);
+  if (optimistic) {
+    optimistic.root.replaceWith(final);
+    optimisticSubmission = undefined;
+    alignSubmittedTurn(final);
+  } else {
+    insertBeforePendingQueue(final);
+    const turn = submittedTurnAnchor;
+    if (turn && turn.sessionId === currentSessionId && turn.message === text) {
+      alignSubmittedTurn(final);
+    }
+  }
+
+  if (!optimistic) {
+    if (liveActivity) {
+      setActivityRunning(liveActivity, false);
+      collapseActivity(liveActivity);
+    }
+    liveMessage = undefined;
+    liveActivity = undefined;
+    resetStreamBlocks();
+    liveTools.clear();
+  }
+}
+
+function appendMessage(message: AgentMessage): void {
+  if (message.role === "custom" && message.display === false) {
+    return;
+  }
+
+  elements.transcript.querySelector(".empty-state")?.remove();
+
+  if (message.role === "user") {
+    appendUserMessage(message);
+  } else if (message.role === "assistant") {
+    const partitioned = partitionAssistantContent(message.content);
+    const sawStreamedActivity = [...streamBlocks.values()].some((block) => block.kind !== "text");
+    if (!sawStreamedActivity) {
+      const card = partitioned.activity.length > 0 ? ensureLiveActivity() : undefined;
+      if (card) {
+        for (const item of partitioned.activity) {
+          appendActivityItem(card, item);
+        }
+      }
+    }
+
+    if (partitioned.hasResponse) {
+      const final = createMessage({ ...message, content: partitioned.responseContent });
+      collapseActivity(ensureLiveActivity());
+      if (liveMessage) {
+        liveMessage.root.replaceWith(final);
+      } else {
+        insertBeforePendingQueue(final);
+      }
+      liveMessage = undefined;
+    }
+    if (message.stopReason === "aborted") {
+      setActivityAborted(ensureLiveActivity());
+    }
+    resetStreamBlocks();
+  } else if (message.role === "toolResult") {
+    const card = ensureLiveActivity();
+    const placeholder = message.toolCallId ? liveTools.get(message.toolCallId) : undefined;
+    const final = appendActivityItem(card, { kind: "toolResult", message }, !placeholder);
+    if (placeholder) {
+      placeholder.replaceWith(final);
+    }
+    if (message.toolCallId) {
+      liveTools.delete(message.toolCallId);
+    }
+  } else {
+    insertBeforePendingQueue(createMessage(message));
+  }
+}
+
+function appendError(message: string): void {
+  const root = createMessage({ role: "error", content: message, isError: true }, "error");
+  elements.transcript.querySelector(".empty-state")?.remove();
+  insertBeforePendingQueue(root);
+}
+
+function cloneExtensionUIState(state: ExtensionUIState | undefined): ExtensionUIState {
+  return state
+    ? {
+        pending: state.pending.map((request) => ({ ...request })),
+        statuses: state.statuses.map((status) => ({ ...status })),
+        widgets: state.widgets.map((widget) => ({ ...widget, lines: [...widget.lines] })),
+      }
+    : { pending: [], statuses: [], widgets: [] };
+}
+
+function renderExtensionState(): void {
+  const statuses = document.createDocumentFragment();
+  for (const status of extensionUI.statuses) {
+    statuses.append(textElement("span", "extension-status", status.text));
+  }
+
+  const above = document.createDocumentFragment();
+  const below = document.createDocumentFragment();
+  for (const widget of extensionUI.widgets) {
+    const section = document.createElement("section");
+    section.className = "extension-widget";
+    section.append(textElement("pre", "extension-widget-content", widget.lines.join("\n")));
+    (widget.placement === "belowEditor" ? below : above).append(section);
+  }
+
+  const hasStatuses = statuses.childNodes.length > 0;
+  const hasAbove = above.childNodes.length > 0;
+  const hasBelow = below.childNodes.length > 0;
+  elements.extensionStatuses.replaceChildren(statuses);
+  elements.extensionWidgetsAbove.replaceChildren(above);
+  elements.extensionWidgetsBelow.replaceChildren(below);
+  elements.extensionStatusItem.hidden = !hasStatuses;
+  elements.extensionStatuses.hidden = !hasStatuses;
+  elements.extensionWidgetsAbove.hidden = !hasAbove;
+  elements.extensionWidgetsBelow.hidden = !hasBelow;
+}
+
+async function respondToExtensionUI(
+  request: ExtensionUIDialogRequest,
+  response: { value: string } | { confirmed: boolean } | { cancelled: true },
+  reconcileAfterResponse = true,
+): Promise<void> {
+  if (!currentSessionId) {
+    return;
+  }
+
+  const sessionId = currentSessionId;
+  applyExtensionUIState({
+    ...extensionUI,
+    pending: extensionUI.pending.filter((candidate) => candidate.id !== request.id),
+  });
+
+  try {
+    await api<{ accepted: boolean }>(`/api/sessions/${encodeURIComponent(sessionId)}/extension-ui`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ type: "extension_ui_response", id: request.id, ...response }),
+    });
+
+    if (currentSessionId === sessionId && reconcileAfterResponse) {
+      await reconcileSession();
+    }
+  } catch (error) {
+    appendError(`Could not answer extension request: ${readableError(error)}`);
+    if (currentSessionId === sessionId && reconcileAfterResponse) {
+      void reconcileSession();
+    }
+  }
+}
+
+function renderExtensionPrompt(): void {
+  const request = extensionUI.pending[0];
+  if (!request) {
+    const closedRequest = renderedExtensionRequestId !== undefined;
+    renderedExtensionRequestId = undefined;
+    elements.extensionPrompt.hidden = true;
+    elements.extensionPrompt.replaceChildren();
+    if (closedRequest && currentSessionId) {
+      queueMicrotask(() => elements.prompt.focus());
+    }
+    return;
+  }
+  if (request.id === renderedExtensionRequestId && elements.extensionPrompt.childElementCount > 0) {
+    return;
+  }
+
+  renderedExtensionRequestId = request.id;
+  const panel = document.createElement("section");
+  panel.className = "extension-prompt-panel";
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-labelledby", "extension-prompt-title");
+  panel.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") {
+      return;
+    }
+
+    event.preventDefault();
+    void respondToExtensionUI(request, { cancelled: true });
+  });
+
+  const header = document.createElement("header");
+  const title = document.createElement("h2");
+  title.id = "extension-prompt-title";
+  const titleToggle = textElement("button", "extension-prompt-title-toggle", request.title) as HTMLButtonElement;
+  titleToggle.type = "button";
+  title.append(titleToggle);
+
+  const body = document.createElement("div");
+  body.id = "extension-prompt-body";
+  body.className = "extension-prompt-body";
+  const actions = document.createElement("footer");
+  actions.id = "extension-prompt-actions";
+  actions.className = "extension-prompt-actions";
+
+  titleToggle.setAttribute("aria-controls", `${body.id} ${actions.id}`);
+
+  const setCollapsed = (collapsed: boolean): void => {
+    const label = `${collapsed ? "Expand" : "Collapse"} extension request`;
+    panel.classList.toggle("is-collapsed", collapsed);
+    titleToggle.title = label;
+    titleToggle.setAttribute("aria-expanded", String(!collapsed));
+  };
+  const toggleCollapsed = (): void => {
+    setCollapsed(!panel.classList.contains("is-collapsed"));
+  };
+
+  setCollapsed(false);
+  titleToggle.addEventListener("click", toggleCollapsed);
+  titleToggle.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+
+    event.preventDefault();
+    toggleCollapsed();
+  });
+
+  const cancel = textElement("button", "extension-prompt-cancel secondary", "Cancel") as HTMLButtonElement;
+  cancel.type = "button";
+  cancel.addEventListener("click", () => void respondToExtensionUI(request, { cancelled: true }));
+
+  const headerActions = document.createElement("div");
+  headerActions.className = "extension-prompt-header-actions";
+  headerActions.append(cancel);
+  header.append(title, headerActions);
+  header.addEventListener("click", (event) => {
+    if (event.target instanceof Element && event.target.closest("button")) {
+      return;
+    }
+
+    toggleCollapsed();
+  });
+
+  let initialFocus: HTMLElement = cancel;
+
+  if (request.method === "select") {
+    const choices = document.createElement("div");
+    choices.className = "extension-prompt-choices";
+    for (const option of request.options) {
+      const button = textElement("button", "secondary", option) as HTMLButtonElement;
+      button.type = "button";
+      button.addEventListener("click", () => void respondToExtensionUI(request, { value: option }));
+      choices.append(button);
+      if (choices.childElementCount === 1) {
+        initialFocus = button;
+      }
+    }
+    body.append(choices);
+  } else if (request.method === "confirm") {
+    body.append(textElement("p", "message-text", request.message));
+    const confirm = textElement("button", "", "Confirm") as HTMLButtonElement;
+    confirm.type = "button";
+    confirm.addEventListener("click", () => void respondToExtensionUI(request, { confirmed: true }));
+    actions.append(confirm);
+    initialFocus = confirm;
+  } else {
+    const field = request.method === "editor" ? document.createElement("textarea") : document.createElement("input");
+    field.className = "extension-prompt-field";
+    if (field instanceof HTMLTextAreaElement) {
+      field.rows = 8;
+      field.value = "prefill" in request ? (request.prefill ?? "") : "";
+    } else {
+      field.type = "text";
+      field.placeholder = "placeholder" in request ? (request.placeholder ?? "") : "";
+    }
+
+    const submit = textElement("button", "", "Submit") as HTMLButtonElement;
+    submit.type = "button";
+    submit.addEventListener("click", () => void respondToExtensionUI(request, { value: field.value }));
+    field.addEventListener("keydown", (event) => {
+      const keyboardEvent = event as KeyboardEvent;
+      if (
+        keyboardEvent.key === "Enter" &&
+        (request.method === "input" || keyboardEvent.ctrlKey || keyboardEvent.metaKey)
+      ) {
+        keyboardEvent.preventDefault();
+        void respondToExtensionUI(request, { value: field.value });
+      }
+    });
+    body.append(field);
+    actions.append(submit);
+    initialFocus = field;
+  }
+
+  panel.append(header, body, actions);
+  elements.extensionPrompt.replaceChildren(panel);
+  elements.extensionPrompt.hidden = false;
+  queueMicrotask(() => initialFocus.focus());
+}
+
+function applyExtensionUIState(state: ExtensionUIState | undefined): void {
+  extensionUI = cloneExtensionUIState(state);
+  if (currentRuntime) {
+    currentRuntime = { ...currentRuntime, extensionUI: cloneExtensionUIState(extensionUI) };
+  }
+
+  renderExtensionState();
+  renderExtensionPrompt();
+  updateControls();
+}
+
+function handleExtensionUIRequest(request: ExtensionUIRequest): void {
+  if (
+    request.method === "select" ||
+    request.method === "confirm" ||
+    request.method === "input" ||
+    request.method === "editor"
+  ) {
+    applyExtensionUIState({
+      ...extensionUI,
+      pending: [...extensionUI.pending.filter((candidate) => candidate.id !== request.id), request],
+    });
+    void reconcileSession();
+    return;
+  }
+
+  if (request.method === "notify") {
+    const notification = createMessage(
+      { role: "extension", content: request.message, isError: request.notifyType === "error" },
+      `extension · ${request.notifyType ?? "info"}`,
+    );
+    elements.transcript.querySelector(".empty-state")?.remove();
+    insertBeforePendingQueue(notification);
+    return;
+  }
+
+  if (request.method === "setStatus") {
+    const statuses = extensionUI.statuses.filter((status) => status.key !== request.statusKey);
+    if (request.statusText !== undefined) {
+      statuses.push({ key: request.statusKey, text: request.statusText });
+    }
+    applyExtensionUIState({ ...extensionUI, statuses });
+    return;
+  }
+
+  if (request.method === "setWidget") {
+    const widgets = extensionUI.widgets.filter((widget) => widget.key !== request.widgetKey);
+    if (request.widgetLines !== undefined) {
+      widgets.push({
+        key: request.widgetKey,
+        lines: [...request.widgetLines],
+        placement: request.widgetPlacement ?? "aboveEditor",
+      });
+    }
+    applyExtensionUIState({ ...extensionUI, widgets });
+    return;
+  }
+
+  if (request.method === "setTitle") {
+    document.title = request.title;
+    return;
+  }
+
+  setPromptValue(request.text);
+}
+
+function applyRuntimeState(runtime: RuntimeState | null): void {
+  const previousQueue = copyMessageQueue(currentRuntime?.queue);
+  const nextRuntime = runtime ? { ...runtime, queue: copyMessageQueue(runtime.queue) } : null;
+  if (!nextRuntime) {
+    resetStreamBlocks();
+  }
+
+  const submittedQueueIndex =
+    optimisticSubmission && nextRuntime && steeringQueueGrew(previousQueue, nextRuntime.queue)
+      ? previousQueue.steering.length
+      : undefined;
+  if (submittedQueueIndex !== undefined) {
+    optimisticSubmission?.root.remove();
+    optimisticSubmission = undefined;
+  }
+
+  currentRuntime = nextRuntime;
+  if (nextRuntime && currentSession) {
+    if (nextRuntime.sessionName) {
+      currentSession.name = nextRuntime.sessionName;
+    } else {
+      delete currentSession.name;
+    }
+  }
+  applyExtensionUIState(nextRuntime?.extensionUI);
+  renderPendingQueue();
+  if (submittedQueueIndex !== undefined) {
+    anchorPendingSteeringMessage(submittedQueueIndex);
+  }
+  updateControls();
+  updateSessionContext();
+  updateSessionHeading();
+}
+
+function patchRuntimeState(patch: Partial<Omit<RuntimeState, "extensionUI">>): void {
+  const existing = currentRuntime ?? emptyRuntime();
+  currentRuntime = {
+    ...existing,
+    ...patch,
+    queue: copyMessageQueue(patch.queue ?? existing.queue),
+    extensionUI: cloneExtensionUIState(extensionUI),
+  };
+  renderPendingQueue();
+  updateControls();
+  updateSessionContext();
+}
+
+async function reconcileSession(): Promise<void> {
+  if (!currentSessionId) {
+    return;
+  }
+  const selectedId = currentSessionId;
+  const sequence = ++reconcileSequence;
+
+  try {
+    const response = await api<SessionResponse>(`/api/sessions/${encodeURIComponent(selectedId)}`);
+    if (currentSessionId !== selectedId || sequence !== reconcileSequence) {
+      return;
+    }
+
+    currentSession = response.session;
+    applyRuntimeState(response.runtime);
+    updateSessionHeading();
+    setWorkspace(response.session.cwd, response.session.gitContext);
+    optimisticSubmission = undefined;
+    dequeuedSteering = [];
+    renderConversation(response.session, currentRuntime);
+
+    const latestUserEntry = [...response.session.transcriptEntries]
+      .reverse()
+      .find(
+        (entry): entry is Extract<PersistedTranscriptEntry, { kind: "message" }> =>
+          entry.kind === "message" && entry.message.role === "user",
+      );
+    if (
+      submittedTurnAnchor?.sessionId === selectedId &&
+      latestUserEntry &&
+      messageText(latestUserEntry.message) === submittedTurnAnchor.message
+    ) {
+      const renderedUsers = elements.transcript.querySelectorAll<HTMLElement>(".message.user:not(.pending)");
+      const renderedUser = renderedUsers[renderedUsers.length - 1];
+      if (renderedUser) {
+        alignSubmittedTurn(renderedUser);
+      }
+    }
+  } catch (error) {
+    if (currentSessionId === selectedId && sequence === reconcileSequence) {
+      appendError(readableError(error));
+    }
+  }
+}
+
+function handleAgentEvent(event: Record<string, unknown>): void {
+  const type = typeof event.type === "string" ? event.type : "";
+
+  if (type === "agent_start") {
+    patchRuntimeState({ isStreaming: true, isWorking: true });
+    ensureLiveActivity();
+  } else if (type === "message_start") {
+    const message = event.message as AgentMessage | undefined;
+    if (message?.role === "assistant") {
+      resetStreamBlocks();
+    }
+  } else if (type === "message_update") {
+    handleMessageUpdate(event);
+  } else if (type === "message_end") {
+    const message = event.message as AgentMessage | undefined;
+    if (message) {
+      appendMessage(message);
+    }
+  } else if (type === "entry_appended") {
+    const entry = event.entry as { type?: unknown } | undefined;
+    if (entry?.type === "custom" || entry?.type === "custom_message") {
+      void reconcileSession();
+    }
+  } else if (type === "tool_execution_start") {
+    updateTool(event, false);
+    patchRuntimeState({ isWorking: true });
+  } else if (type === "tool_execution_update") {
+    updateTool(event, false);
+  } else if (type === "tool_execution_end") {
+    updateTool(event, true);
+  } else if (type === "queue_update") {
+    const previousQueue = copyMessageQueue(currentRuntime?.queue);
+    const update = reconcileMessageQueue(previousQueue, messageQueueFromEvent(event), discardingQueue);
+    const pendingMessageCount = update.queue.steering.length + update.queue.followUp.length;
+    const submittedQueueIndex =
+      optimisticSubmission && steeringQueueGrew(previousQueue, update.queue)
+        ? previousQueue.steering.length
+        : undefined;
+    if (discardingQueue) {
+      dequeuedSteering = [];
+    }
+    dequeuedSteering.push(...update.dequeuedSteering);
+    if (submittedQueueIndex !== undefined) {
+      optimisticSubmission?.root.remove();
+      optimisticSubmission = undefined;
+    }
+    patchRuntimeState({
+      queue: update.queue,
+      pendingMessageCount,
+      ...(pendingMessageCount > 0 ? { isWorking: true } : {}),
+    });
+    if (submittedQueueIndex !== undefined) {
+      anchorPendingSteeringMessage(submittedQueueIndex);
+    }
+  } else if (type === "compaction_start" || type === "auto_retry_start") {
+    patchRuntimeState({ isCompacting: type === "compaction_start", isWorking: true });
+    ensureLiveActivity();
+  } else if (type === "session_info_changed") {
+    const name = typeof event.name === "string" && event.name.trim() ? event.name.trim() : undefined;
+    applyCurrentSessionName(name);
+  } else if (type === "agent_settled") {
+    dequeuedSteering = [];
+    patchRuntimeState({
+      isStreaming: false,
+      isCompacting: false,
+      isWorking: false,
+      pendingMessageCount: 0,
+      queue: { steering: [], followUp: [] },
+    });
+    if (liveActivity) {
+      if (liveActivity.root.dataset.state !== "aborted") {
+        setActivityRunning(liveActivity, false);
+      }
+      collapseActivity(liveActivity);
+    }
+    void reconcileSession();
+  }
+}
+
+function emptyRuntime(): RuntimeState {
+  return {
+    id: currentSessionId ?? "",
+    cwd: currentSession?.cwd ?? "",
+    isStreaming: false,
+    isCompacting: false,
+    isWorking: false,
+    pendingMessageCount: 0,
+    queue: { steering: [], followUp: [] },
+    model: currentSession?.model
+      ? {
+          provider: currentSession.model.provider,
+          id: currentSession.model.modelId,
+          name: currentSession.model.modelId,
+        }
+      : null,
+    thinkingLevel: currentSession?.thinkingLevel ?? "off",
+    autoCompactionEnabled: false,
+    usage: {
+      tokens: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, total: 0 },
+      context: null,
+    },
+    commands: [],
+    extensionUI,
+  };
+}
+
+function handleRuntimeEnvelope(envelope: RuntimeEnvelope): void {
+  if (envelope.type === "agent_event") {
+    handleAgentEvent(envelope.event);
+  }
+  if (envelope.type === "extension_ui_request") {
+    handleExtensionUIRequest(envelope);
+  }
+  if (envelope.type === "extension_ui_closed") {
+    applyExtensionUIState({
+      ...extensionUI,
+      pending: extensionUI.pending.filter((request) => request.id !== envelope.id),
+    });
+  }
+  if (envelope.type === "extension_ui_reset") {
+    applyExtensionUIState(undefined);
+  }
+  if (envelope.type === "session_replaced" && envelope.sessionId !== currentSessionId) {
+    void selectSession(envelope.sessionId);
+  }
+  if (envelope.type === "runtime_error") {
+    appendError(envelope.message);
+    void reconcileSession();
+  }
+  if (envelope.type === "runtime_disposed") {
+    dequeuedSteering = [];
+    resetStreamBlocks();
+    patchRuntimeState({ pendingMessageCount: 0, queue: { steering: [], followUp: [] } });
+    eventStream.reconnectNow();
+  }
+}
+
+function renderConnectionState(state: EventStreamState): void {
+  if (state === "connected") {
+    setConnection("Connected", "online");
+  } else if (state === "connecting") {
+    setConnection("Connecting", "offline");
+  } else {
+    setConnection("Reconnecting", "error");
+  }
+}
+
+const eventStream = new SessionEventStream({
+  onStateChange: renderConnectionState,
+  onReady: (event, recovered) => {
+    if (!currentSessionId) {
+      return;
+    }
+
+    try {
+      const ready = JSON.parse(event.data) as { gap: boolean; state: RuntimeState };
+      applyRuntimeState(ready.state);
+      if (ready.state.isWorking) {
+        setActivityRunning(ensureLiveActivity(), true);
+      } else if (liveActivity) {
+        if (liveActivity.root.dataset.state !== "aborted") {
+          setActivityRunning(liveActivity, false);
+        }
+        collapseActivity(liveActivity);
+      }
+      if (ready.state.streamingMessage && !liveMessage && streamBlocks.size === 0) {
+        hydrateStreamingMessage(ready.state.streamingMessage);
+      }
+      if (ready.gap || recovered) {
+        void reconcileSession();
+      }
+    } catch (error) {
+      appendError(`Could not read agent state: ${readableError(error)}`);
+    }
+  },
+  onRuntime: (event) => {
+    if (!currentSessionId) {
+      return;
+    }
+
+    try {
+      handleRuntimeEnvelope(JSON.parse(event.data) as RuntimeEnvelope);
+    } catch (error) {
+      appendError(`Could not read agent event: ${readableError(error)}`);
+    }
+  },
+});
+
+function connectEvents(id: string): void {
+  eventStream.start(id);
+}
+
+async function selectSession(id: string, updateHistory = true): Promise<void> {
+  if (id === currentSessionId && currentSession) {
+    return;
+  }
+
+  eventStream.stop();
+  setSubmittedTurnAnchor(false);
+  currentSessionId = id;
+  currentSession = undefined;
+  elements.createSession.href = `${sessionPath(id)}/new`;
+  currentRuntime = null;
+  applyExtensionUIState(undefined);
+  optimisticSubmission = undefined;
+  submittedTurnAnchor = undefined;
+  dequeuedSteering = [];
+  discardingQueue = false;
+  liveMessage = undefined;
+  liveActivity = undefined;
+  resetStreamBlocks();
+  liveTools.clear();
+  sending = false;
+  renaming = false;
+  if (updateHistory) {
+    history.pushState(null, "", sessionPath(id));
+  }
+  setPromptValue("");
+  elements.sessionTitle.textContent = "Loading…";
+  elements.sessionTitle.title = "Session title is loading";
+  elements.sessionTitle.setAttribute("aria-label", "Session title is loading");
+  setWorkspace("", undefined);
+  setContextValue(elements.sessionModel, "");
+  elements.sessionModel.setAttribute("aria-label", "Model and thinking level are loading.");
+  updateSessionUsage(null);
+  renderEmpty("Loading conversation", "Reading the saved Pi session…");
+  updateControls();
+
+  try {
+    const response = await api<SessionResponse>(`/api/sessions/${encodeURIComponent(id)}`);
+    if (currentSessionId !== id) {
+      return;
+    }
+
+    currentSession = response.session;
+    applyRuntimeState(response.runtime);
+    updateSessionHeading();
+    setWorkspace(response.session.cwd, response.session.gitContext);
+    renderConversation(response.session, response.runtime);
+    connectEvents(id);
+    if (window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
+      elements.prompt.focus();
+    }
+  } catch (error) {
+    if (currentSessionId !== id) {
+      return;
+    }
+    appendError(readableError(error));
+    setConnection("Unavailable", "error");
+  }
+}
+
+async function renameCurrentSession(): Promise<void> {
+  if (!currentSessionId || renaming) {
+    return;
+  }
+
+  const value = window.prompt("Session title (leave blank to clear)", currentNativeName() ?? "");
+  if (value === null) {
+    return;
+  }
+
+  const id = currentSessionId;
+  renaming = true;
+  updateControls();
+
+  try {
+    const response = await api<{ name: string | null; state: RuntimeState }>(
+      `/api/sessions/${encodeURIComponent(id)}/name`,
+      {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ name: value }),
+      },
+    );
+    if (currentSessionId !== id) {
+      return;
+    }
+
+    applyRuntimeState(response.state);
+    applyCurrentSessionName(response.name ?? undefined);
+  } catch (error) {
+    if (currentSessionId === id) {
+      appendError(`Could not rename session: ${readableError(error)}`);
+    }
+  } finally {
+    renaming = false;
+    updateControls();
+  }
+}
+
+async function sendMessage(): Promise<void> {
+  if (!currentSessionId || sending) {
+    return;
+  }
+  const message = elements.prompt.value;
+  if (!message.trim()) {
+    return;
+  }
+
+  const id = currentSessionId;
+  const pendingExtensionRequest = extensionUI.pending[0];
+  const previousFirstMessage = currentSession?.firstMessage;
+  const shouldUpdateFirstMessage = Boolean(currentSession && !currentSession.firstMessage.trim());
+  if (currentSession && shouldUpdateFirstMessage) {
+    currentSession.firstMessage = message;
+    updateSessionHeading();
+  }
+
+  const activatedTurnAnchor = !elements.transcript.classList.contains("has-submitted-turn-anchor");
+  const previousSubmittedTurnAnchor = submittedTurnAnchor;
+  setSubmittedTurnAnchor(true);
+  elements.transcript.querySelector(".empty-state")?.remove();
+  if (!currentRuntime?.isWorking) {
+    liveActivity = undefined;
+    resetStreamBlocks();
+  }
+  const optimistic = createMessage({ role: "user", content: message });
+  optimistic.dataset.optimistic = "true";
+  optimisticSubmission = { sessionId: id, message, root: optimistic };
+  submittedTurnAnchor = { sessionId: id, message, root: optimistic, needsAlignment: true };
+  elements.transcript.append(optimistic);
+  updateSubmittedTurnRunway();
+  optimistic.scrollIntoView({ block: "start" });
+
+  setPromptValue("");
+  sending = true;
+  updateControls();
+  eventStream.ensureConnected();
+
+  try {
+    if (pendingExtensionRequest) {
+      await respondToExtensionUI(pendingExtensionRequest, { cancelled: true }, false);
+      if (currentSessionId !== id) {
+        return;
+      }
+    }
+
+    const response = await api<{ queued: boolean; state: RuntimeState }>(
+      `/api/sessions/${encodeURIComponent(id)}/messages`,
+      {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ message }),
+      },
+    );
+    if (currentSessionId !== id) {
+      return;
+    }
+    applyRuntimeState(response.state);
+    if (response.state.isWorking) {
+      ensureLiveActivity();
+    }
+    void reconcileSession();
+  } catch (error) {
+    optimistic.remove();
+    if (optimisticSubmission?.root === optimistic) {
+      optimisticSubmission = undefined;
+    }
+    if (currentSessionId === id) {
+      submittedTurnAnchor = previousSubmittedTurnAnchor;
+      if (activatedTurnAnchor) {
+        setSubmittedTurnAnchor(false);
+      } else {
+        updateSubmittedTurnRunway();
+      }
+      if (currentSession && shouldUpdateFirstMessage) {
+        currentSession.firstMessage = previousFirstMessage ?? "";
+        updateSessionHeading();
+      }
+
+      setPromptValue(message);
+      appendError(readableError(error));
+      void reconcileSession();
+    }
+  } finally {
+    sending = false;
+    updateControls();
+  }
+}
+
+async function removePendingSteering(index: number, message: string): Promise<void> {
+  if (!currentSessionId || !currentRuntime || sending) {
+    return;
+  }
+
+  const id = currentSessionId;
+  const expectedQueue = copyMessageQueue(currentRuntime.queue);
+  const nextQueue = withoutSteeringMessage(expectedQueue, index, message);
+  if (!nextQueue) {
+    void reconcileSession();
+    return;
+  }
+  sending = true;
+  discardingQueue = true;
+  dequeuedSteering = [];
+  patchRuntimeState({
+    pendingMessageCount: nextQueue.steering.length + nextQueue.followUp.length,
+    queue: nextQueue,
+  });
+  updateControls();
+
+  try {
+    const response = await api<{ state: RuntimeState }>(`/api/sessions/${encodeURIComponent(id)}/pending-steering`, {
+      method: "DELETE",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ index, message, queue: expectedQueue.steering }),
+    });
+    if (currentSessionId !== id) {
+      return;
+    }
+
+    applyRuntimeState(response.state);
+    await reconcileSession();
+  } catch (error) {
+    if (currentSessionId === id) {
+      appendError(`Could not remove pending message: ${readableError(error)}`);
+      await reconcileSession();
+    }
+  } finally {
+    sending = false;
+    discardingQueue = false;
+    renderPendingQueue();
+    updateControls();
+  }
+}
+
+async function abortRun(): Promise<void> {
+  if (!currentSessionId || sending) {
+    return;
+  }
+  const id = currentSessionId;
+  sending = true;
+  discardingQueue = true;
+  dequeuedSteering = [];
+  patchRuntimeState({ pendingMessageCount: 0, queue: { steering: [], followUp: [] } });
+  updateControls();
+
+  try {
+    const response = await api<{ restoredMessages: string[] }>(`/api/sessions/${encodeURIComponent(id)}/abort`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: "{}",
+    });
+    if (currentSessionId !== id) {
+      return;
+    }
+    if (response.restoredMessages.length > 0) {
+      setPromptValue(response.restoredMessages.join("\n\n"));
+    }
+    if (liveActivity) {
+      setActivityAborted(liveActivity);
+    }
+    await reconcileSession();
+  } catch (error) {
+    if (currentSessionId === id) {
+      appendError(readableError(error));
+      void reconcileSession();
+    }
+  } finally {
+    sending = false;
+    discardingQueue = false;
+    updateControls();
+  }
+}
+
+const submittedTurnRunwayObserver = new MutationObserver(scheduleSubmittedTurnRunwayUpdate);
+submittedTurnRunwayObserver.observe(elements.transcript, {
+  attributeFilter: ["open"],
+  attributes: true,
+  characterData: true,
+  childList: true,
+  subtree: true,
+});
+
+elements.composer.addEventListener("submit", (event) => {
+  event.preventDefault();
+  void sendMessage();
+});
+elements.prompt.addEventListener("input", () => {
+  dismissedSlashCompletionValue = undefined;
+  resizePrompt();
+  renderSlashCompletion(true);
+});
+elements.prompt.addEventListener("keydown", (event) => {
+  if (slashCompletion && !event.isComposing) {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      slashCompletion = moveSlashCompletionSelection(slashCompletion, event.key === "ArrowDown" ? 1 : -1);
+      renderSlashCompletion();
+      return;
+    }
+
+    if (event.key === "Tab") {
+      event.preventDefault();
+      applySelectedSlashCompletion(false);
+      return;
+    }
+
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      applySelectedSlashCompletion(true);
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeSlashCompletion(true);
+      return;
+    }
+  }
+
+  if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+    event.preventDefault();
+    void sendMessage();
+  }
+});
+elements.abort.addEventListener("click", () => void abortRun());
+elements.sessionTitle.addEventListener("click", () => void renameCurrentSession());
+elements.sessionContextToggle.addEventListener("click", () => {
+  setSessionContextCollapsed(!elements.sessionContext.classList.contains("is-collapsed"));
+});
+window.addEventListener("popstate", () => {
+  const route = routeFromLocation();
+  if (route) {
+    void selectSession(route, false);
+  } else {
+    location.reload();
+  }
+});
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState !== "visible" || !currentSessionId) {
+    return;
+  }
+
+  eventStream.ensureConnected();
+  void reconcileSession();
+});
+window.addEventListener("online", () => {
+  if (!currentSessionId) {
+    return;
+  }
+
+  eventStream.reconnectNow();
+  void reconcileSession();
+});
+window.addEventListener("resize", () => {
+  resizePrompt();
+  scheduleSubmittedTurnRunwayUpdate();
+});
+function routeFromLocation(): string | undefined {
+  const match = /^\/sessions\/([^/]+)\/?$/.exec(location.pathname);
+  if (!match?.[1]) {
+    return undefined;
+  }
+
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return undefined;
+  }
+}
+
+const requestedSession = routeFromLocation();
+if (requestedSession) {
+  void selectSession(requestedSession, false);
+} else {
+  location.assign("/");
+}