// The `ctrl-k` command bar (docs/COMMAND-BAR.md): a query line over a result
// list, opened from the sidebar, closed with Escape.
//
// Three kinds live here: sessions and commands, ranked together by default,
// and directories, which need the `~` sigil. `tab` on a session drills into
// its action page (#151), which is the same overlay over three actions.

import { listDir, projects as fetchProjects, recentDirs } from "./api.js";
import {
  KILL_SESSION_EVENT,
  RENAME_SESSION_EVENT,
  SESSION_SELECT_EVENT,
  SPAWN_SIMILAR_EVENT,
} from "./catalog.js";
import { keyCaps, publishedCommands, type Command } from "./commands.js";
import {
  matchAndRank,
  type CandidateKind,
  type CommandCandidate,
  type DirectoryCandidate,
  type MatchRange,
  type MatchResult,
  type SessionCandidate,
} from "./utils/matcher.js";
import { splitPath } from "./paths.js";
import { splitCommand } from "./toolIcon.js";
import { abbreviateCwd, sessionName, sessionTreePath, type Session } from "./types.js";

/** A matcher candidate that remembers what it came from, so a result can be
 *  acted on without a second lookup. The extra property is invisible to the
 *  matcher, which only ever reads `kind` and `fields`. */
export type SessionBarCandidate = SessionCandidate & { session: Session };
export type CommandBarCandidate = CommandCandidate & { command: Command };
/** `fields.path` is the abbreviated path the operator reads and the matcher
 *  ranks; `path` is the one a spawn is made in. */
export type DirectoryBarCandidate = DirectoryCandidate & { path: string };

/** One row of a session's action page. It is a `command` to the matcher — a
 *  single `label` field, ranked exactly like a registry command — and carries
 *  the action it stands for instead of a registry entry. */
export type ActionBarCandidate = CommandCandidate & { action: SessionAction };

export type BarCandidate =
  SessionBarCandidate | CommandBarCandidate | ActionBarCandidate | DirectoryBarCandidate;
export type BarResult = MatchResult<BarCandidate>;

/** Raised when Enter lands on a directory row. The bar picks the directory; the
 *  shell owns the spawn, which is the same fast-forward path `N` takes. */
export const SPAWN_DIRECTORY_EVENT = "cmdbar-spawn-directory";

/** One kind's slice of the ranked list, in rank order. */
export interface BarGroup<C extends BarCandidate = BarCandidate> {
  kind: CandidateKind;
  title: string;
  results: MatchResult<C>[];
}

const KIND_TITLES: Record<CandidateKind, string> = {
  session: "Sessions",
  command: "Commands",
  directory: "Directories",
};

// ---- the sigils ----

export type BarSigil = ">" | "~";

export interface BarQuery {
  /** The sigil in force, or null for the mixed list. */
  sigil: BarSigil | null;
  /** What the matcher sees: everything after a sigil, or the whole query. */
  query: string;
}

/** Split a raw query line into its sigil and the query proper.
 *
 *  A sigil is only a sigil in first position: `>` or `~` anywhere else is a
 *  literal query character, which is what a directory query with a second `~`
 *  in it depends on. Backspacing past a sigil needs no special case either —
 *  the first character goes and the query is a mixed one again. */
export function parseBarQuery(raw: string): BarQuery {
  const first = raw[0];
  if (first === ">" || first === "~") return { sigil: first, query: raw.slice(1) };
  return { sigil: null, query: raw };
}

// ---- the session action page ----

/** The actions a session's action page offers, and no others: the bar picks
 *  one and hands off to the flow that already implements it
 *  (docs/COMMAND-BAR.md, "Drill-in"). */
export type SessionActionId = "kill" | "rename" | "spawn-similar";

export interface SessionAction {
  id: SessionActionId;
  label: string;
}

export const SESSION_ACTIONS: readonly SessionAction[] = [
  { id: "kill", label: "Kill session" },
  { id: "rename", label: "Rename session" },
  { id: "spawn-similar", label: "Spawn similar" },
];

/** The action page's candidates, in the order above — which is the order an
 *  empty query lists them in, since the matcher keeps input order. */
export function sessionActionCandidates(): ActionBarCandidate[] {
  return SESSION_ACTIONS.map((action) => ({
    kind: "command",
    action,
    fields: { label: action.label },
  }));
}

/** Narrow a `command` candidate to an action row. Both share the matcher's
 *  `command` kind, so what separates them is what they carry. */
export function isActionCandidate(candidate: BarCandidate): candidate is ActionBarCandidate {
  return candidate.kind === "command" && "action" in candidate;
}

// ---- candidates ----

function focusedAt(s: Session): number | null {
  const stamp = s.last_focused_at;
  if (typeof stamp !== "string" || stamp === "") return null;
  const ms = Date.parse(stamp);
  return Number.isNaN(ms) ? null : ms;
}

function createdAt(s: Session): number {
  const ms = Date.parse(s.created_at ?? "");
  return Number.isNaN(ms) ? 0 : ms;
}

/** The empty-query order (docs/COMMAND-BAR.md, "Empty query"): most recently
 *  focused first; a session that has never been focused sorts after every
 *  session that has, most recently created first among those; and a dead
 *  session sorts after every live one regardless of recency, because a session
 *  you cannot attach to is not where you just were.
 *
 *  This is also the input order for a non-empty query, which is what the
 *  matcher's last tie-break preserves. */
export function orderSessionsForBar(sessions: readonly Session[]): Session[] {
  return [...sessions].sort((a, b) => {
    const deadA = a.status === "Dead" ? 1 : 0;
    const deadB = b.status === "Dead" ? 1 : 0;
    if (deadA !== deadB) return deadA - deadB;

    const focusA = focusedAt(a);
    const focusB = focusedAt(b);
    if ((focusA === null) !== (focusB === null)) return focusA === null ? 1 : -1;
    if (focusA !== null && focusB !== null && focusA !== focusB) return focusB - focusA;

    return createdAt(b) - createdAt(a);
  });
}

/** Build one session's candidate: the fields docs/COMMAND-BAR.md's candidate
 *  table names, with the directory abbreviated the way the sidebar shows it. */
export function sessionCandidate(s: Session, homeDir?: string): SessionBarCandidate {
  const treePath = sessionTreePath(s);
  const directory = treePath ? abbreviateCwd(treePath, homeDir) : undefined;
  const tool = splitCommand(s.command).tool ?? undefined;
  return {
    kind: "session",
    session: s,
    fields: {
      name: sessionName(s),
      ...(directory ? { directory } : {}),
      ...(s.command ? { command: s.command } : {}),
      ...(tool ? { tool } : {}),
    },
  };
}

/** Every session as a candidate, in the empty-query order. */
export function sessionBarCandidates(
  sessions: readonly Session[],
  homeDir?: string,
): SessionBarCandidate[] {
  return orderSessionsForBar(sessions).map((s) => sessionCandidate(s, homeDir));
}

/** Drop the commands that would list twice. Several chords can be bound to one
 *  action — the registry already carries its aliases on one entry, but nothing
 *  stops two entries running the same handler, and listed naively that is two
 *  identical rows. The dedupe is by **action**, never by chord: the chord is
 *  displayed, so a command with two of them is still one row. */
export function dedupeCommands(commands: readonly Command[]): Command[] {
  const seenRun = new Set<Command["run"]>();
  const seenLabel = new Set<string>();
  const kept: Command[] = [];
  for (const command of commands) {
    if (seenRun.has(command.run) || seenLabel.has(command.label)) continue;
    seenRun.add(command.run);
    seenLabel.add(command.label);
    kept.push(command);
  }
  return kept;
}

/** Every bound command as a candidate, in registry order. Only the label is a
 *  field: the chord is displayed beside the row, never matched, because
 *  matching it would make `>` results depend on a user's rebinds. */
export function commandBarCandidates(commands: readonly Command[]): CommandBarCandidate[] {
  return dedupeCommands(commands).map((command) => ({
    kind: "command",
    command,
    fields: { label: command.label },
  }));
}

/** `~/dev/api` back to `/home/me/dev/api` — the inverse of `abbreviateCwd`, for
 *  a path the operator typed or `/api/dirs` completed. */
export function expandHome(path: string, homeDir?: string): string {
  if (!homeDir) return path;
  if (path === "~") return homeDir;
  return path.startsWith("~/") ? `${homeDir}${path.slice(1)}` : path;
}

export function directoryCandidate(path: string, homeDir?: string): DirectoryBarCandidate {
  const absolute = expandHome(path, homeDir);
  return { kind: "directory", path: absolute, fields: { path: abbreviateCwd(absolute, homeDir) } };
}

/** Candidates for `~`, deduped by the directory they spawn in and keeping the
 *  first mention of each — recent dirs (newest first) ahead of the project
 *  list, which is the empty-query order the contract asks for. */
export function directoryBarCandidates(
  paths: readonly string[],
  homeDir?: string,
): DirectoryBarCandidate[] {
  const seen = new Set<string>();
  const out: DirectoryBarCandidate[] = [];
  for (const path of paths) {
    if (path === "") continue;
    const candidate = directoryCandidate(path, homeDir);
    if (seen.has(candidate.path)) continue;
    seen.add(candidate.path);
    out.push(candidate);
  }
  return out;
}

/** The directory list the bar starts from: what the spawn form already knows —
 *  `GET /api/recent-dirs` and the project list — either alone if the other
 *  fails. */
export async function loadBarDirectories(): Promise<string[]> {
  const [recents, discovered] = await Promise.all([
    recentDirs()
      .then((r) => r.dirs.map((d) => d.cwd))
      .catch(() => [] as string[]),
    fetchProjects()
      .then((list) => list.map((p) => p.path))
      .catch(() => [] as string[]),
  ]);
  return [...recents, ...discovered];
}

// ---- grouping ----

/** Bucket a ranked list by kind for rendering. Grouping is a rendering of the
 *  ranking, never a reordering of it: a group holds its matches in rank order,
 *  and groups appear in the order their best-scoring member does — so the first
 *  row under the first header is the globally best result. */
export function barGroups<C extends BarCandidate>(
  results: readonly MatchResult<C>[],
): BarGroup<C>[] {
  const groups: BarGroup<C>[] = [];
  for (const result of results) {
    const kind = result.candidate.kind;
    let group = groups.find((g) => g.kind === kind);
    if (!group) {
      group = { kind, title: KIND_TITLES[kind], results: [] };
      groups.push(group);
    }
    group.results.push(result);
  }
  return groups;
}

/** The rows a query produces, flat and in rank order — what the highlight walks
 *  and what Enter acts on. Headers are labels, not rows, so they are never in
 *  this list. */
export function barRows<C extends BarCandidate>(
  query: string,
  candidates: readonly C[],
): MatchResult<C>[] {
  return matchAndRank(query, candidates);
}

// ---- rendering ----

/** Text with its matched ranges wrapped in `<mark>`. Ranges come from the
 *  matcher as `[start, end)` character pairs over the field that won. */
export function renderHighlighted(text: string, ranges: readonly MatchRange[]): DocumentFragment {
  const frag = document.createDocumentFragment();
  let cursor = 0;
  for (const [start, end] of ranges) {
    if (start > cursor) frag.append(text.slice(cursor, start));
    const mark = document.createElement("mark");
    mark.className = "cmdbar-hit";
    mark.textContent = text.slice(start, end);
    frag.append(mark);
    cursor = end;
  }
  if (cursor < text.length) frag.append(text.slice(cursor));
  return frag;
}

/** The name line of a row: the session's name, the command's label, or the
 *  directory's path. */
function rowName(candidate: BarCandidate): string {
  switch (candidate.kind) {
    case "session":
      return candidate.fields.name;
    case "command":
      return candidate.fields.label;
    case "directory":
      return candidate.fields.path;
  }
}

/** The secondary line under a session row: the field the match was found in
 *  when that was not the name, so a session found through its directory says
 *  so. Only sessions have one — a command shows keycaps instead, and a
 *  directory's path is already the name. */
function metaText(result: BarResult): string | undefined {
  if (result.candidate.kind !== "session") return undefined;
  const fields = result.candidate.fields;
  switch (result.field) {
    case "directory":
      return fields.directory;
    case "command":
      return fields.command;
    case "tool":
      return fields.tool;
    default:
      return fields.directory;
  }
}

function renderRow(result: BarResult, index: number): HTMLElement {
  const candidate = result.candidate;
  const row = document.createElement("div");
  row.className = "cmdbar-row";
  row.setAttribute("role", "option");
  row.id = `cmdbar-row-${index}`;
  row.dataset.index = String(index);
  row.dataset.kind = candidate.kind;
  if (candidate.kind === "session") {
    row.dataset.sessionId = candidate.session.id;
    if (candidate.session.status === "Dead") row.classList.add("is-dead");
  } else if (isActionCandidate(candidate)) {
    row.dataset.actionId = candidate.action.id;
  } else if (candidate.kind === "command") {
    row.dataset.commandId = candidate.command.id;
  } else {
    row.dataset.path = candidate.path;
  }

  const name = document.createElement("span");
  name.className = "cmdbar-row-name";
  const nameText = rowName(candidate);
  const nameMatched =
    result.field === "name" || result.field === "label" || result.field === "path";
  name.append(nameMatched ? renderHighlighted(nameText, result.ranges) : nameText);
  row.appendChild(name);

  // The chord is teaching material, not a match target: it is rendered from
  // the live registry entry and never fed to the matcher.
  if (candidate.kind === "command" && !isActionCandidate(candidate)) {
    const keys = document.createElement("span");
    keys.className = "cmdbar-row-keys";
    for (const cap of keyCaps(candidate.command.keys[0])) {
      const kbd = document.createElement("kbd");
      kbd.textContent = cap;
      keys.appendChild(kbd);
    }
    row.appendChild(keys);
    return row;
  }

  const meta = metaText(result);
  if (meta) {
    const el = document.createElement("span");
    el.className = "cmdbar-row-meta";
    const highlighted = result.field !== undefined && result.field !== "name";
    el.append(highlighted ? renderHighlighted(meta, result.ranges) : meta);
    row.appendChild(el);
  }
  return row;
}

const PLACEHOLDERS: Record<"mixed" | BarSigil, string> = {
  mixed: "Go to a session…",
  ">": "Run a command…",
  "~": "Spawn in a directory…",
};

// ---- the overlay ----

export interface CommandBarOptions {
  /** Sessions to build candidates from, as the store has them right now. */
  sessions: readonly Session[];
  /** The daemon's home dir, for the directory field's `~/…` abbreviation. */
  homeDir?: string;
  /** Open the highlighted session. Defaults to the shared open path — the
   *  sidebar's click event — which is what the contract requires; tests pass
   *  their own. */
  onOpenSession?: (sessionId: string) => void;
  /** The command registry to list under `>`. Defaults to every bound command,
   *  in registry order. */
  commands?: readonly Command[];
  /** The directory list behind `~`, fetched once on first use. */
  loadDirectories?: () => Promise<string[]>;
  /** One directory's subdirectories, for filling the list in as a path is
   *  typed. Defaults to `GET /api/dirs`. */
  listDirEntries?: (dir: string) => Promise<string[]>;
  /** Spawn a session in the highlighted directory. Defaults to raising
   *  `SPAWN_DIRECTORY_EVENT`, which the shell turns into a fast-forward
   *  spawn. */
  onSpawnDirectory?: (path: string) => void;
  /** The action page's three actions (#151). Each defaults to raising the
   *  event the flow that already implements it listens on — the sidebar's
   *  confirm-and-blockers kill, its inline rename prompt, the spawn form
   *  seeded from the session. The bar picks the action and nothing more. */
  onKillSession?: (session: Session) => void;
  onRenameSession?: (session: Session) => void;
  onSpawnSimilar?: (session: Session) => void;
}

interface OpenBar {
  el: HTMLElement;
  dispose: () => void;
}

let current: OpenBar | null = null;

export function isCommandBarOpen(): boolean {
  return current !== null;
}

export function closeCommandBar(): void {
  current?.dispose();
}

/** Mount the bar. Opening while one is up replaces it, so a stray second call
 *  can never stack two overlays. */
export function openCommandBar(opts: CommandBarOptions): HTMLElement {
  closeCommandBar();

  // Closing returns the keyboard to whatever held it when the bar opened: a
  // round trip through the bar never silently moves focus.
  const previouslyFocused = document.activeElement as HTMLElement | null;
  const openSession =
    opts.onOpenSession ??
    ((id: string) => document.dispatchEvent(new CustomEvent(SESSION_SELECT_EVENT, { detail: id })));
  const spawnDirectory =
    opts.onSpawnDirectory ??
    ((path: string) =>
      document.dispatchEvent(new CustomEvent(SPAWN_DIRECTORY_EVENT, { detail: path })));
  const sessionEvent =
    (name: string) =>
    (session: Session): void => {
      document.dispatchEvent(new CustomEvent(name, { detail: session }));
    };
  const killSession = opts.onKillSession ?? sessionEvent(KILL_SESSION_EVENT);
  const renameSession = opts.onRenameSession ?? sessionEvent(RENAME_SESSION_EVENT);
  const spawnSimilar = opts.onSpawnSimilar ?? sessionEvent(SPAWN_SIMILAR_EVENT);
  const loadDirectories = opts.loadDirectories ?? loadBarDirectories;
  const listEntries =
    opts.listDirEntries ?? ((dir: string) => listDir(dir).then((listing) => listing.entries));

  const sessionCandidates: SessionBarCandidate[] = sessionBarCandidates(
    opts.sessions,
    opts.homeDir,
  );
  const commandCandidates: CommandBarCandidate[] = commandBarCandidates(
    opts.commands ?? publishedCommands(),
  );

  const el = document.createElement("div");
  el.className = "cmdbar-overlay";
  el.setAttribute("role", "dialog");
  el.setAttribute("aria-modal", "true");
  el.setAttribute("aria-label", "Command bar");

  const panel = document.createElement("div");
  panel.className = "cmdbar-panel";

  const input = document.createElement("input");
  input.type = "text";
  input.className = "cmdbar-input";
  input.setAttribute("role", "combobox");
  input.setAttribute("aria-expanded", "true");
  input.setAttribute("aria-controls", "cmdbar-results");
  input.setAttribute("aria-label", "Search sessions, commands and directories");
  input.setAttribute("autocomplete", "off");
  input.spellcheck = false;
  input.placeholder = PLACEHOLDERS.mixed;

  const results = document.createElement("div");
  results.className = "cmdbar-results";
  results.id = "cmdbar-results";
  results.setAttribute("role", "listbox");

  panel.append(input, results);
  el.appendChild(panel);
  document.body.appendChild(el);

  let rows: BarResult[] = [];
  let highlighted = 0;

  // The action page (#151). `page` is the session being acted on, `stashed`
  // the result-list query it was drilled into from — backing out restores it,
  // so the round trip costs the operator nothing.
  let page: Session | null = null;
  let stashed = "";
  let header: HTMLElement | null = null;

  // `~`'s candidates: the recents-and-projects list, fetched once, plus
  // whatever `/api/dirs` has filled in for the directory being typed.
  let directories: DirectoryBarCandidate[] = [];
  let directoriesRequested = false;
  let probed: DirectoryBarCandidate[] = [];
  let probedDir: string | null = null;
  const listings = new Map<string, string[]>();

  function alive(): boolean {
    return current?.el === el;
  }

  /** Fetch the recents-and-projects list the first time `~` is used. */
  function ensureDirectories(): void {
    if (directoriesRequested) return;
    directoriesRequested = true;
    loadDirectories()
      .then((paths) => {
        directories = directoryBarCandidates(paths, opts.homeDir);
        if (alive()) render();
      })
      .catch(() => {
        /* no directories is a shorter list, not an error state */
      });
  }

  /** Fill the list in from `GET /api/dirs` once the query looks like a path:
   *  the directory it names is listed and its children join the candidates, so
   *  `~` reaches a directory that was never spawned in. */
  function probeDirectories(query: string): void {
    const { dir } = splitPath(query);
    if (dir === "") {
      probed = [];
      probedDir = null;
      return;
    }
    if (dir === probedDir) return;
    probedDir = dir;
    const cached = listings.get(dir);
    if (cached) {
      probed = directoryBarCandidates(
        cached.map((entry) => `${dir}${entry}`),
        opts.homeDir,
      );
      return;
    }
    probed = [];
    listEntries(dir)
      .then((entries) => {
        listings.set(dir, entries);
        if (!alive() || probedDir !== dir) return;
        probed = directoryBarCandidates(
          entries.map((entry) => `${dir}${entry}`),
          opts.homeDir,
        );
        render();
      })
      .catch(() => {
        /* an unreadable directory contributes nothing */
      });
  }

  /** What the matcher sees for the query line as it stands. With no sigil the
   *  list is mixed — sessions and commands together — except on an empty query,
   *  where the bar is a session switcher. */
  function candidatesFor(parsed: BarQuery): BarCandidate[] {
    if (page) return sessionActionCandidates();
    switch (parsed.sigil) {
      case ">":
        return [...commandCandidates];
      case "~": {
        ensureDirectories();
        probeDirectories(parsed.query);
        const seen = new Set<string>();
        return [...directories, ...probed].filter((c) =>
          seen.has(c.path) ? false : (seen.add(c.path), true),
        );
      }
      default:
        return parsed.query === ""
          ? [...sessionCandidates]
          : [...sessionCandidates, ...commandCandidates];
    }
  }

  function paintHighlight(): void {
    for (const row of results.querySelectorAll<HTMLElement>(".cmdbar-row")) {
      const active = Number(row.dataset.index) === highlighted;
      row.classList.toggle("is-active", active);
      row.setAttribute("aria-selected", active ? "true" : "false");
      if (active) {
        row.scrollIntoView({ block: "nearest" });
        input.setAttribute("aria-activedescendant", row.id);
      }
    }
    if (rows.length === 0) input.removeAttribute("aria-activedescendant");
  }

  /** The line naming the session being acted on, so the target is never
   *  ambiguous. Present only while the action page is up. */
  function paintHeader(): void {
    header?.remove();
    header = null;
    if (!page) return;
    header = document.createElement("div");
    header.className = "cmdbar-page-header";
    header.setAttribute("role", "presentation");
    header.textContent = `Actions for "${sessionName(page)}"`;
    panel.insertBefore(header, results);
  }

  function render(): void {
    // On the action page the query line is over the three actions, so there is
    // no sigil to read: `>` and `~` are ordinary characters there.
    const parsed = page ? { sigil: null, query: input.value } : parseBarQuery(input.value);
    input.placeholder = page
      ? `Act on ${sessionName(page)}…`
      : PLACEHOLDERS[parsed.sigil ?? "mixed"];
    paintHeader();
    rows = barRows(parsed.query, candidatesFor(parsed));
    // The highlight starts on the globally best row every time the list
    // changes: an old index would point at a different result.
    highlighted = 0;
    results.replaceChildren();

    if (rows.length === 0) {
      const empty = document.createElement("div");
      empty.className = "cmdbar-empty";
      empty.textContent = "No matches";
      results.appendChild(empty);
      paintHighlight();
      return;
    }

    let index = 0;
    for (const group of barGroups(rows)) {
      // While a sigil is in force there is one kind, so the header is
      // dropped — and the action page is one kind too.
      if (parsed.sigil === null && !page) {
        const header = document.createElement("div");
        header.className = "cmdbar-group-title";
        header.setAttribute("role", "presentation");
        header.textContent = group.title;
        results.appendChild(header);
      }
      for (const result of group.results) {
        const at = index;
        const row = renderRow(result, at);
        row.addEventListener("click", () => activate(at));
        results.appendChild(row);
        index += 1;
      }
    }
    paintHighlight();
  }

  /** The highlight does not wrap: it stops at the first and last row. */
  function move(delta: number): void {
    if (rows.length === 0) return;
    highlighted = Math.min(rows.length - 1, Math.max(0, highlighted + delta));
    paintHighlight();
  }

  /** `tab`: drill into the highlighted session's action page. No effect on any
   *  other kind, and none on the page itself, which has no session rows. */
  function drillIn(): void {
    const candidate = rows[highlighted]?.candidate;
    if (page || candidate?.kind !== "session") return;
    page = candidate.session;
    stashed = input.value;
    input.value = "";
    render();
  }

  /** Escape, or backspace at an empty query: back to the result list with the
   *  query the drill-in was made from. */
  function leavePage(): void {
    page = null;
    input.value = stashed;
    stashed = "";
    render();
  }

  function runAction(action: SessionAction, session: Session): void {
    close();
    switch (action.id) {
      case "kill":
        killSession(session);
        return;
      case "rename":
        renameSession(session);
        return;
      case "spawn-similar":
        spawnSimilar(session);
        return;
    }
  }

  function activate(index: number): void {
    const result = rows[index];
    if (!result) return;
    const candidate = result.candidate;
    if (isActionCandidate(candidate)) {
      // The page cannot be up without a session to act on.
      if (page) runAction(candidate.action, page);
      return;
    }
    close();
    switch (candidate.kind) {
      case "session":
        openSession(candidate.session.id);
        return;
      case "command":
        candidate.command.run();
        return;
      case "directory":
        spawnDirectory(candidate.path);
        return;
    }
  }

  function onKeydown(e: KeyboardEvent): void {
    switch (e.key) {
      case "Escape":
        e.preventDefault();
        // On an action page Escape is one level up, not the way out.
        if (page) leavePage();
        else close();
        return;
      case "Tab":
        e.preventDefault();
        drillIn();
        return;
      case "Backspace":
        // Ordinary editing, except at an empty query on the action page.
        if (page && input.value === "") {
          e.preventDefault();
          leavePage();
        }
        return;
      case "Enter":
        e.preventDefault();
        activate(highlighted);
        return;
      case "ArrowDown":
        e.preventDefault();
        move(1);
        return;
      case "ArrowUp":
        e.preventDefault();
        move(-1);
        return;
      case "n":
        if (e.ctrlKey) {
          e.preventDefault();
          move(1);
        }
        return;
      case "p":
        if (e.ctrlKey) {
          e.preventDefault();
          move(-1);
        }
        return;
    }
  }

  function close(): void {
    if (current?.el !== el) return;
    current = null;
    el.remove();
    // Restoring focus is what makes the bar a view over the app rather than a
    // place in it; a detached node cannot take it.
    if (previouslyFocused?.isConnected) previouslyFocused.focus();
  }

  input.addEventListener("keydown", onKeydown);
  input.addEventListener("input", render);
  // A press on the scrim closes; one inside the panel is left alone.
  el.addEventListener("mousedown", (ev) => {
    if (!panel.contains(ev.target as Node)) close();
  });

  current = { el, dispose: close };
  render();
  input.focus();
  return el;
}