wsb-daemon 0.275.7622

<script lang="ts">
  import { cubicOut } from "svelte/easing";
  import { slide } from "svelte/transition";
  import type { TreeEntry } from "../../../api/types.js";
  import type { FileStatusKind } from "../../../api/types/fleet.js";
  import { explorer } from "../../../stores/explorer.svelte.js";
  import { workbench } from "../../../stores/workbench.svelte.js";
  import { commands } from "../../../stores/commands.svelte.js";
  import { issues } from "../../../stores/issues.svelte.js";
  import { activityBar } from "../../../stores/activity-bar.svelte.js";
  import { ui } from "../../../stores/ui.svelte.js";
  import { git } from "../../../stores/git.svelte.js";
  import { conflicts } from "../../../stores/conflicts.svelte.js";
  import { notes as notesStore } from "../../../stores/notes.svelte.js";
  import { github } from "../../../stores/github.svelte.js";
  import { notifications } from "../../../stores/notifications.svelte.js";
  import { copyToClipboard } from "../../../utils/clipboard.js";
  import { createProgressiveMount } from "../../../virtual/createProgressiveMount.svelte.js";
  import AppIcon from "../../layout/AppIcon.svelte";
  import IssueCreate from "../../issues/IssueCreate.svelte";
  import GitCommitDialog from "./GitCommitDialog.svelte";
  import GitCheckoutDialog from "./GitCheckoutDialog.svelte";
  import GitDiscardDialog from "./GitDiscardDialog.svelte";
  import GitBranchDeleteDialog from "./GitBranchDeleteDialog.svelte";
  import ContextSubmenu from "../../menu/ContextSubmenu.svelte";
  import { contextMenu as placeMenu } from "../../../utils/menu.js";
  import GitBranchCreateDialog from "./GitBranchCreateDialog.svelte";
  import ExplorerNode from "./ExplorerNode.svelte";

  interface Props {
    entry: TreeEntry;
    depth?: number;
  }

  let { entry, depth = 0 }: Props = $props();

  let expanded = $derived(
    entry.kind === "directory" && explorer.isExpanded(entry.path),
  );
  // Read entries and status from separate maps so that loading-state changes
  // (treeStatus) never invalidate the entry-derived chain (treeEntries).
  // If they were read from the same map write, every loadTree() call would
  // invalidate visibleBranchEntries and re-evaluate every child row for a
  // change that had not happened.
  let branchEntries = $derived(
    entry.kind === "directory" ? (explorer.treeEntries.get(entry.path) ?? null) : null,
  );
  let branchStatus = $derived(
    entry.kind === "directory" ? (explorer.treeStatus.get(entry.path) ?? null) : null,
  );
  let visibleBranchEntries = $derived(
    branchEntries ? explorer.visibleEntries(branchEntries) : [],
  );

  // Progressive child mounting — the same primitive OverviewSidebar uses.
  // Re-reading this directory never takes back a child that is already
  // mounted; only added or removed children move the count.
  // Matches the root's batch: a directory of ordinary size opens in one frame.
  const CHILD_BATCH = 24;
  const childMount = createProgressiveMount(CHILD_BATCH);

  let visibleChildSlice = $derived(visibleBranchEntries.slice(0, childMount.count));
  let childDripping = $derived(childMount.settling);

  $effect(() => {
    childMount.setTarget(expanded ? visibleBranchEntries.length : 0);
  });

  $effect(() => () => childMount.dispose());

  let isHidden = $derived(entry.hidden);
  let submodule = $derived(entry.submodule);
  let submoduleError = $derived(submodule?.error ?? null);
  // The spinner belongs to the first read of a directory, when there is nothing
  // to show yet. A re-read of a directory already on screen is a background
  // refresh: its result either changes a row or changes nothing, and swapping
  // the chevron for a spinner each time a repository is scanned would be the
  // most visible churn in the tree while saying nothing the user can act on.
  let loadingBranch = $derived(
    entry.kind === "directory" && !!branchStatus?.loading && !branchEntries,
  );
  let contextMenu = $state<{ x: number; y: number } | null>(null);
  /// The menu element itself, so a click inside it can be told from a click
  /// away from it. Submenu panels are nested inside it, so `contains` covers
  /// them too.
  let menuElement = $state<HTMLElement>();
  let rowRef = $state<HTMLDivElement | undefined>(undefined);
  let showIssueCreate = $state(false);
  let showCommitDialog = $state(false);
  let showCheckoutDialog = $state(false);
  let showBranchCreateDialog = $state(false);
  let showDiscardDialog = $state(false);
  let showBranchDeleteDialog = $state(false);

  // Drag-and-drop state
  let isDragOver = $state(false);

  // Inline input state
  let showNewFileInput = $state(false);
  let showNewDirInput = $state(false);
  let showRenameInput = $state(false);
  let newEntryName = $state("");
  let renameValue = $state("");

  // Subscribe to the stable string primitive rather than workbench.activeTab
  // (an object) so this derived only invalidates when the active *path*
  // changes — not on every tab mutation. See WorkbenchStore.activeFilePath.
  let isActive = $derived(workbench.activeFilePath === entry.path);

  let nodeGitStatus = $derived<FileStatusKind | null>(entry.git_status ?? null);
  let repoGitStatus = $derived(entry.repo_status ?? null);
  let repoHasVisibleChanges = $derived(
    repoGitStatus ? repoGitStatus.files.some((f) => f.status !== "ignored") : false,
  );
  let hasNotes = $derived(notesStore.hasNotes(entry.path));
  // Issues belong to a repository, so only a repository row carries the badge.
  // The count comes from the mirror the daemon keeps, which means it is there
  // the moment the tree draws — no request, no spinner, no empty flash.
  let openIssues = $derived(
    submodule?.github_repo ? issues.openCount(submodule.github_repo) : 0,
  );
  // What the mirror knows about this repository: whether it is private, how
  // many pull requests are open, and what CI says. Each is drawn only when it
  // is KNOWN — a repository nobody has read yet gets no lock at all, because a
  // private repository drawn as public is how something private gets shared.
  let repoMirror = $derived(
    submodule?.github_repo ? github.overview[submodule.github_repo] ?? null : null,
  );
  let openPulls = $derived(repoMirror?.open_pulls ?? 0);

  // How many files this repository has changed, ignoring the ignored: the
  // count the fleet panel showed as "NΔ", on the row it belongs to.
  let repoChangeCount = $derived(
    repoGitStatus ? repoGitStatus.files.filter((f) => f.status !== "ignored").length : 0,
  );
  let repoDetached = $derived(repoGitStatus?.is_detached === true);
  /// The branch this repository is on, shown beside the submenu that acts on
  /// it: which branch a checkout or a discard applies to is the first thing
  /// anybody wants to know before opening it.
  let repoBranch = $derived(repoGitStatus?.branch ?? null);
  // A submodule declared by .gitmodules with nothing checked out. It has a row
  // (the tree lists it) and no repository behind it, so every git action on it
  // is refused rather than offered.
  let repoAbsent = $derived(!!submodule && repoGitStatus?.exists === false);
  // Conflicts with another machine, addressed the way continuity addresses
  // them: by repository. A directory that is not a repository shows what is
  // waiting BELOW it, so collapsing a folder cannot hide a decision.
  // Conflicts with another machine, addressed the way continuity addresses
  // them: by repository.
  //
  // No badge of its own any more. The row already says what is waiting with a
  // peer and WHICH WAY — `←` and `→` — and an aggregate beside them added a
  // third number without saying anything the reader could act on differently.
  // What a conflict needs is the resolution, and that is the context-menu item
  // this count is for; the differences themselves are listed under Peers on
  // the node's own page.
  let conflictCount = $derived(
    submodule
      ? conflicts.forRepository(entry.path)?.conflicts ?? 0
      : entry.kind === "directory"
        ? conflicts.underPath(entry.path)
        : 0,
  );
  /// What is waiting to move with a peer, and which way.
  ///
  /// The two directions are shown apart because they are facts about different
  /// machines and a person acts on them differently: what is coming here is
  /// this machine's to take, what would leave is the peer's to accept. A
  /// single number could say neither.
  ///
  /// Rolled up under a directory for the same reason conflicts are: a
  /// collapsed folder must still say something below it is waiting.
  let peerPending = $derived(
    submodule
      ? {
          incoming: conflicts.forRepository(entry.path)?.incoming ?? 0,
          outgoing: conflicts.forRepository(entry.path)?.outgoing ?? 0,
        }
      : entry.kind === "directory"
        ? conflicts.pendingUnderPath(entry.path)
        : { incoming: 0, outgoing: 0 },
  );
  let peerNames = $derived(
    submodule ? (conflicts.forRepository(entry.path)?.peers ?? []) : [],
  );

  let badgesEmpty = $derived.by(() => {
    if (hasNotes) return false;
    if (openIssues > 0) return false;
    if (openPulls > 0) return false;
    if (peerPending.incoming > 0 || peerPending.outgoing > 0) return false;
    if (!submodule) return true;
    if (submoduleError) return false;
    if (!repoGitStatus) return true;
    const hasBranch = repoGitStatus.branch && repoGitStatus.branch !== "main" && repoGitStatus.branch !== "master";
    return (
      !hasBranch &&
      repoGitStatus.ahead === 0 &&
      repoGitStatus.behind === 0 &&
      repoChangeCount === 0 &&
      !repoDetached
    );
  });

  let gitStatusClass = $derived.by(() => {
    if (submodule) return repoHasVisibleChanges ? "git-modified" : "";
    if (!nodeGitStatus) return "";
    return `git-${nodeGitStatus}`;
  });

  // Scroll into view when this file node becomes the active tab.
  $effect(() => {
    if (!isActive || !rowRef) return;
    rowRef.scrollIntoView({ block: "nearest" });
  });

  async function openEntry() {
    if (entry.kind === "directory") {
      await explorer.toggleDirectory(entry.path);
      return;
    }
    void explorer.ensureFile(entry.path);
    workbench.openFile(entry.path, true);
  }

  /** Keep the file open: a preview becomes a tab of its own. */
  function promoteFileTab() {
    if (entry.kind !== "file") return;
    workbench.openFile(entry.path, false);
  }

  function openNodeInfo() {
    workbench.openNodeInfo(entry.path, true);
  }

  function openNodeInfoPermanent() {
    workbench.openNodeInfo(entry.path, false);
  }

  function handleContextMenu(e: MouseEvent) {
    e.preventDefault();
    contextMenu = { x: e.clientX, y: e.clientY };
  }

  function closeContextMenu() {
    contextMenu = null;
  }

  function handleRefactor() {
    // The dialog refactors THIS node, so the target is handed over with the
    // request to open it rather than read from whatever is selected later.
    ui.refactorTarget = entry.path;
    ui.activeModal = "refactor";
    closeContextMenu();
  }

  function handlePrimaryAction() {
    openEntry();
    closeContextMenu();
  }

  async function handleCopyPath() {
    try {
      await copyToClipboard(entry.path);
    } catch { /* clipboard unavailable */ }
    closeContextMenu();
  }

  async function handleCopyName() {
    try {
      await copyToClipboard(entry.name);
    } catch { /* clipboard unavailable */ }
    closeContextMenu();
  }

  function handleCopyRelativeDir() {
    const parts = entry.path.split("/");
    parts.pop();
    void copyToClipboard(parts.join("/") || ".").catch(() => {});
    closeContextMenu();
  }

  async function handleUpdate() {
    try {
      await explorer.updateProject(entry.path);
    } finally {
      closeContextMenu();
    }
  }

  function handleNewIssue() {
    closeContextMenu();
    showIssueCreate = true;
  }

  /// The home's peers panel, where a conflict is settled by choosing a side.
  ///
  /// Continuity decides everything it can by itself; this is the one thing it
  /// cannot, so the row that carries the count is also the way to the page
  /// that resolves it.
  function handleResolveConflicts() {
    closeContextMenu();
    // Conflicts between machines are settled on the home's peers panel.
    workbench.showPeers();
  }

  /// Issues live on the node they belong to, beside that node's notes. There
  /// is no issues panel to send anybody to any more: "which repository" was a
  /// filter somebody had to set, and the repository is right here.
  function handleShowIssues() {
    closeContextMenu();
    workbench.openNodeInfo(entry.path, false);
  }

  let hasDiff = $derived.by(() => {
    if (submodule) return false;
    const s = nodeGitStatus;
    return s !== null && s !== "ignored";
  });

  let owningRepoPath = $derived(entry.repo_path ?? null);
  let repoRelativePath = $derived(
    owningRepoPath ? entry.path.slice(owningRepoPath.length + 1) : entry.path,
  );

  function handleShowDiff() {
    closeContextMenu();
    workbench.openDiff(repoRelativePath, owningRepoPath, false);
  }

  /// Everything this repository has changed, including what is no longer on
  /// disk.
  ///
  /// The tree can only show files that exist, so a deletion — a change like
  /// any other — has no row to right-click. The repository's own view lists
  /// them all, and each opens its diff.
  function handleShowChanges() {
    closeContextMenu();
    workbench.openNodeInfo(entry.path, false);
  }

  function handleGitStage() {
    closeContextMenu();
    git.stage(entry.path);
  }

  function handleGitCommit() {
    closeContextMenu();
    showCommitDialog = true;
  }

  function handleGitPush() {
    closeContextMenu();
    git.push(entry.path);
  }

  function handleGitPull() {
    closeContextMenu();
    git.pull(entry.path);
  }

  function handleGitCheckout() {
    closeContextMenu();
    showCheckoutDialog = true;
  }

  function handleGitCreateBranch() {
    closeContextMenu();
    showBranchCreateDialog = true;
  }

  function handleGitFetch() {
    closeContextMenu();
    git.fetch(entry.path);
  }

  function handleGitDiscard() {
    closeContextMenu();
    showDiscardDialog = true;
  }

  function handleGitDeleteBranch() {
    closeContextMenu();
    showBranchDeleteDialog = true;
  }

  function handleOpenRepoPage() {
    closeContextMenu();
    workbench.openNodeInfo(entry.path, false);
  }

  // ---------------------------------------------------------------------------
  // File operation context menu handlers
  // ---------------------------------------------------------------------------

  function handleNewFile() {
    closeContextMenu();
    if (!expanded && entry.kind === "directory") {
      void explorer.expandDirectory(entry.path);
    }
    newEntryName = "";
    showNewFileInput = true;
    showNewDirInput = false;
  }

  function handleNewDirectory() {
    closeContextMenu();
    if (!expanded && entry.kind === "directory") {
      void explorer.expandDirectory(entry.path);
    }
    newEntryName = "";
    showNewDirInput = true;
    showNewFileInput = false;
  }

  function handleRename() {
    closeContextMenu();
    renameValue = entry.name;
    showRenameInput = true;
  }

  function handleFileCopy() {
    explorer.copyToClipboard(entry.path);
    closeContextMenu();
  }

  function handleFileCut() {
    explorer.cutToClipboard(entry.path);
    closeContextMenu();
  }

  function handlePaste() {
    closeContextMenu();
    void explorer.pasteEntry(entry.path).catch((err: unknown) => {
      notifications.upsert(
        `paste-error-${Date.now()}`,
        "error",
        "Paste failed",
        err instanceof Error ? err.message : String(err),
        "worktree",
      );
    });
  }

  async function handleDelete() {
    closeContextMenu();
    const isDir = entry.kind === "directory";
    const label = isDir ? `directory "${entry.name}"` : `file "${entry.name}"`;
    const confirmed = window.confirm(`Delete ${label}? This cannot be undone.`);
    if (!confirmed) return;
    try {
      await explorer.deleteEntry(entry.path, isDir);
    } catch (err) {
      notifications.upsert(
        `delete-error-${Date.now()}`,
        "error",
        "Delete failed",
        err instanceof Error ? err.message : String(err),
        "worktree",
      );
    }
  }

  // Inline new-file/new-dir confirmation
  async function confirmNewEntry(kind: "file" | "dir") {
    const name = newEntryName.trim();
    showNewFileInput = false;
    showNewDirInput = false;
    if (!name) return;
    try {
      if (kind === "file") {
        await explorer.createFile(entry.path, name);
      } else {
        await explorer.createDirectory(entry.path, name);
      }
    } catch (err) {
      notifications.upsert(
        `create-error-${Date.now()}`,
        "error",
        kind === "file" ? "Create file failed" : "Create directory failed",
        err instanceof Error ? err.message : String(err),
        "worktree",
      );
    }
  }

  function cancelNewEntry() {
    showNewFileInput = false;
    showNewDirInput = false;
    newEntryName = "";
  }

  // Inline rename confirmation
  async function confirmRename() {
    const name = renameValue.trim();
    showRenameInput = false;
    if (!name || name === entry.name) return;
    try {
      await explorer.renameEntry(entry.path, name);
    } catch (err) {
      notifications.upsert(
        `rename-error-${Date.now()}`,
        "error",
        "Rename failed",
        err instanceof Error ? err.message : String(err),
        "worktree",
      );
    }
  }

  function cancelRename() {
    showRenameInput = false;
    renameValue = "";
  }

  // ---------------------------------------------------------------------------
  // Drag-and-drop handlers
  // ---------------------------------------------------------------------------

  function handleDragStart(e: DragEvent) {
    e.dataTransfer?.setData("text/plain", entry.path);
    if (e.dataTransfer) {
      e.dataTransfer.effectAllowed = "copyMove";
    }
  }

  function handleDragOver(e: DragEvent) {
    if (entry.kind !== "directory") return;
    const draggedPath = e.dataTransfer?.getData("text/plain");
    if (draggedPath === entry.path) return;
    e.preventDefault();
    if (e.dataTransfer) {
      e.dataTransfer.dropEffect = e.altKey ? "copy" : "move";
    }
    isDragOver = true;
  }

  function handleDragLeave(e: DragEvent) {
    // Only clear isDragOver if we are actually leaving this element,
    // not just moving into a child element.
    const related = e.relatedTarget as Node | null;
    if (rowRef && related && rowRef.contains(related)) return;
    isDragOver = false;
  }

  async function handleDrop(e: DragEvent) {
    e.preventDefault();
    isDragOver = false;
    if (entry.kind !== "directory") return;
    const fromPath = e.dataTransfer?.getData("text/plain");
    if (!fromPath || fromPath === entry.path) return;

    const name = fromPath.split("/").pop() ?? fromPath;
    const toPath = `${entry.path}/${name}`;

    try {
      if (e.altKey) {
        // Alt held: copy
        await explorer.copyEntry(fromPath, toPath);
      } else {
        // Default: move
        await explorer.moveEntry(fromPath, toPath);
      }
    } catch (err) {
      notifications.upsert(
        `drop-error-${Date.now()}`,
        "error",
        e.altKey ? "Copy failed" : "Move failed",
        err instanceof Error ? err.message : String(err),
        "worktree",
      );
    }
  }

  function handleDragEnd() {
    isDragOver = false;
  }

  // ---------------------------------------------------------------------------
  // Context menu auto-close
  // ---------------------------------------------------------------------------

  $effect(() => {
    if (!contextMenu) return;
    // A click INSIDE the menu is not a click away from it. It used to be:
    // every click closed the menu, so opening a submenu closed the menu the
    // submenu was in, and the items behind it could not be reached at all.
    // The items that should close it close it themselves.
    function handler(event: Event) {
      const target = event.target;
      if (target instanceof Node && menuElement?.contains(target)) return;
      contextMenu = null;
    }
    const id = setTimeout(() => {
      document.addEventListener("click", handler);
      document.addEventListener("contextmenu", handler);
    }, 0);
    return () => {
      clearTimeout(id);
      document.removeEventListener("click", handler);
      document.removeEventListener("contextmenu", handler);
    };
  });

  $effect(() => {
    if (!contextMenu) return;
    function handler(e: KeyboardEvent) {
      if (e.key === "Escape") {
        contextMenu = null;
      }
    }
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  });

  // Clipboard content for paste availability
  let hasClipboard = $derived(explorer.clipboard !== null);
</script>

<div class="node" style:--depth={`${depth}`}>
  <!-- Row is split into two independently clickable zones. -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    bind:this={rowRef}
    class:hidden={isHidden}
    class:active={isActive}
    class:drag-over={isDragOver}
    class="node-row {gitStatusClass}"
    draggable={true}
    oncontextmenu={handleContextMenu}
    ondragstart={handleDragStart}
    ondragover={handleDragOver}
    ondragleave={handleDragLeave}
    ondrop={handleDrop}
    ondragend={handleDragEnd}
  >
    <!-- Zone 1: chevron + icon + name — expands directory or opens file -->
    {#if showRenameInput}
      <div class="node-zone node-zone-left node-rename-zone">
        <!-- svelte-ignore a11y_autofocus -->
        <input
          class="node-inline-input"
          type="text"
          bind:value={renameValue}
          autofocus
          onkeydown={(e) => {
            if (e.key === "Enter") { e.preventDefault(); void confirmRename(); }
            if (e.key === "Escape") { e.preventDefault(); cancelRename(); }
          }}
          onblur={cancelRename}
        />
      </div>
    {:else}
      <button
        class="node-zone node-zone-left"
        onclick={openEntry}
        ondblclick={entry.kind !== "directory" ? promoteFileTab : undefined}
        aria-label={entry.kind === "directory" ? (expanded ? "Collapse" : "Expand") : "Open"}
      >
        <span class="node-twist">
          {#if entry.kind === "directory"}
            <AppIcon
              class={`${expanded ? "expanded" : ""} ${loadingBranch ? "node-spinner" : ""}`.trim()}
              name={loadingBranch ? "refresh" : "chevron-right"}
              size={10}
            />
          {/if}
        </span>
        <span
          class="node-icon"
          title={submodule
            ? repoMirror?.private === true
              ? "Private GitHub repository"
              : repoMirror?.private === false
                ? "Public GitHub repository"
                : "GitHub repository"
            : undefined}
        >
          {#if entry.kind === "directory"}
            <AppIcon
              name={submodule
                ? repoMirror?.private === true
                  ? "globe-lock"
                  : "globe"
                : expanded
                  ? "folder-open"
                  : "folder"}
              size={14}
            />
          {:else}
            <AppIcon name="file-text" size={14} />
          {/if}
        </span>
        <span class="node-label">
          <span class:node-name--submodule={!!submodule} class="node-name">{entry.name}</span>
          {#if submodule?.version}
            <span class="node-version" title={`Version ${submodule.version}`}>
              v{submodule.version}
            </span>
          {/if}
        </span>
      </button>
    {/if}

    <!-- Zone 2: badges + info trigger -->
    <button
      class="node-zone node-zone-badges"
      onclick={openNodeInfo}
      ondblclick={openNodeInfoPermanent}
      title="Open node info"
      aria-label="Open node info"
    >
      {#if submodule}
        <span class="node-meta">
          {#if submoduleError}
            <span class="node-error-badge" title={submoduleError}>
              <AppIcon name="triangle-alert" size={11} />
            </span>
          {/if}
          {#if repoAbsent}
            <span class="node-absent" title="Declared by .gitmodules and not checked out here">absent</span>
          {:else if repoGitStatus}
            {#if repoDetached}
              <!-- Detached is not a branch name. A row that showed the commit
                   as though it were one is how a commit made on nothing gets
                   made. -->
              <span class="node-detached" title="HEAD is detached — commits here belong to no branch">detached</span>
            {:else if repoGitStatus.branch && repoGitStatus.branch !== "main" && repoGitStatus.branch !== "master"}
              <span class="node-branch">{repoGitStatus.branch}</span>
            {/if}
            {#if repoChangeCount > 0}
              <span class="node-dirty" title="{repoChangeCount} uncommitted change{repoChangeCount === 1 ? '' : 's'}">
                {repoChangeCount}<AppIcon name="file-diff" size={10} />
              </span>
            {/if}
            {#if repoGitStatus.ahead > 0}
              <span class="node-ahead" title="{repoGitStatus.ahead} commit(s) to push">
                {repoGitStatus.ahead}<AppIcon name="arrow-up" size={10} />
              </span>
            {/if}
            {#if repoGitStatus.behind > 0}
              <span class="node-behind" title="{repoGitStatus.behind} commit(s) to pull">
                {repoGitStatus.behind}<AppIcon name="arrow-down" size={10} />
              </span>
            {/if}
          {/if}
        </span>
      {/if}
      <!-- What a peer has waiting, and which way it would go. Left is
           arriving here, right is leaving for the peer — the direction is the
           whole of what a person needs, because only one of the two is theirs
           to act on. Kept apart from the git arrows above, which are about
           this repository and its remote. -->
      {#if peerPending.incoming > 0}
        <span
          class="node-peer-in"
          title={peerNames.length > 0
            ? `${peerPending.incoming} change(s) waiting to arrive from ${peerNames.join(", ")}`
            : `${peerPending.incoming} change(s) waiting to arrive from a paired machine`}
        >{peerPending.incoming}<AppIcon name="arrow-left" size={10} /></span>
      {/if}
      {#if peerPending.outgoing > 0}
        <span
          class="node-peer-out"
          title={peerNames.length > 0
            ? `${peerPending.outgoing} change(s) waiting to go to ${peerNames.join(", ")}`
            : `${peerPending.outgoing} change(s) waiting to go to a paired machine`}
        >{peerPending.outgoing}<AppIcon name="arrow-right" size={10} /></span>
      {/if}
      <!-- `neutral` is CI having reached no verdict — a run that was skipped,
           cancelled, or had nothing to say. It is not a state anybody acts on,
           and a grey dot on every row is the noise that stops the red ones
           being seen. Absent means the same thing and shows nothing, so
           `neutral` shows nothing too. -->
      {#if repoMirror?.checks && repoMirror.checks !== "neutral"}
        <span
          class="node-checks node-checks--{repoMirror.checks}"
          title="CI on this machine's commit: {repoMirror.checks}"
        ><AppIcon name="circle" size={8} /></span>
      {/if}
      {#if openPulls > 0}
        <span
          class="node-pulls"
          title="{openPulls} open pull request{openPulls === 1 ? '' : 's'}"
        >
          <AppIcon name="git-merge" size={11} />
          {openPulls}
        </span>
      {/if}
      {#if openIssues > 0}
        <span
          class="node-issues-badge"
          title="{openIssues} open issue{openIssues === 1 ? '' : 's'} — open this node to read them"
        >
          <AppIcon name="circle-alert" size={11} />
          {openIssues}
        </span>
      {/if}
      {#if hasNotes}
        <span class="node-notes-badge" title="Has notes">
          <AppIcon name="message-circle" size={11} />
        </span>
      {/if}
      {#if badgesEmpty}
        <span class="node-info-hint" title="Open node info">
          <AppIcon name="info" size={11} />
        </span>
      {/if}
    </button>
  </div>

  {#if entry.kind === "directory" && expanded}
    <div
      class="children"
      transition:slide={{
        axis: "y",
        duration: 200,
        easing: cubicOut,
      }}
    >
      <!-- An error from a re-read is reported above the listing, not in place
           of it: the rows already there are still what the backend last said,
           and dropping them would lose every expansion below this one. -->
      {#if branchStatus?.error}
        <div class="node-error">{branchStatus.error}</div>
      {/if}
      {#if branchEntries}
        {#each visibleChildSlice as child (child.path)}
          <ExplorerNode entry={child} depth={depth + 1} />
        {/each}
        {#if childDripping}
          <div class="children-loading" aria-hidden="true"></div>
        {/if}
      {/if}

      <!-- Inline new-file input (shown inside this directory's children) -->
      {#if showNewFileInput}
        <div class="node-inline-entry" style:--depth={`${depth + 1}`}>
          <span class="node-inline-icon"><AppIcon name="file-text" size={14} /></span>
          <!-- svelte-ignore a11y_autofocus -->
          <input
            class="node-inline-input"
            type="text"
            placeholder="file name"
            bind:value={newEntryName}
            autofocus
            onkeydown={(e) => {
              if (e.key === "Enter") { e.preventDefault(); void confirmNewEntry("file"); }
              if (e.key === "Escape") { e.preventDefault(); cancelNewEntry(); }
            }}
            onblur={cancelNewEntry}
          />
        </div>
      {/if}

      <!-- Inline new-directory input -->
      {#if showNewDirInput}
        <div class="node-inline-entry" style:--depth={`${depth + 1}`}>
          <span class="node-inline-icon"><AppIcon name="folder" size={14} /></span>
          <!-- svelte-ignore a11y_autofocus -->
          <input
            class="node-inline-input"
            type="text"
            placeholder="folder name"
            bind:value={newEntryName}
            autofocus
            onkeydown={(e) => {
              if (e.key === "Enter") { e.preventDefault(); void confirmNewEntry("dir"); }
              if (e.key === "Escape") { e.preventDefault(); cancelNewEntry(); }
            }}
            onblur={cancelNewEntry}
          />
        </div>
      {/if}
    </div>
  {/if}
</div>

{#if contextMenu}
  {@const editorContext = entry.kind === "file" ? explorer.editorContextForPath(entry.path) : null}
  {@const extensionMenuItems = explorer.menuCommands("explorer/context", editorContext)}
  <div
    class="context-menu"
    bind:this={menuElement}
    use:placeMenu={contextMenu}
  >
    <button class="context-menu-item" onclick={handlePrimaryAction}>
      {entry.kind === "directory" ? expanded ? "Collapse" : "Expand" : "Open"}
    </button>

    {#if entry.kind === "directory"}
      <div class="context-menu-separator"></div>
      <button class="context-menu-item" onclick={handleNewFile}>New File...</button>
      <button class="context-menu-item" onclick={handleNewDirectory}>New Folder...</button>
      <button class="context-menu-item" onclick={handleRefactor}>Refactor...</button>
    {/if}

    <div class="context-menu-separator"></div>
    <button class="context-menu-item" onclick={handleCopyPath}>Copy Path</button>
    <button class="context-menu-item" onclick={handleCopyName}>Copy Name</button>
    <button class="context-menu-item" onclick={handleCopyRelativeDir}>Copy Containing Folder Path</button>

    <div class="context-menu-separator"></div>
    <button class="context-menu-item" onclick={handleRename}>Rename...</button>
    <button class="context-menu-item" onclick={handleFileCopy}>Copy</button>
    <button class="context-menu-item" onclick={handleFileCut}>Cut</button>
    {#if entry.kind === "directory" && hasClipboard}
      <button class="context-menu-item" onclick={handlePaste}>
        Paste{explorer.clipboard ? ` "${explorer.clipboard.path.split("/").pop()}"` : ""}
      </button>
    {/if}
    <div class="context-menu-separator"></div>
    <button class="context-menu-item context-menu-item--danger" onclick={handleDelete}>Delete</button>

    {#if hasDiff}
      <div class="context-menu-separator"></div>
      <button class="context-menu-item" onclick={handleShowDiff}>Show Diff</button>
    {/if}
    {#if conflictCount > 0}
      <div class="context-menu-separator"></div>
      <button class="context-menu-item context-menu-item--danger" onclick={handleResolveConflicts}>
        Resolve {conflictCount} Conflict{conflictCount === 1 ? "" : "s"}...
      </button>
    {/if}

    {#if submodule}
      <div class="context-menu-separator"></div>
      {#if repoAbsent}
        <button class="context-menu-item" onclick={handleUpdate}>
          Check out this repository
        </button>
        <div class="context-menu-note">
          Declared and not checked out. Nothing else can act on it until it is.
        </div>
      {:else}
        <!-- Everything git does to this repository, behind one item. The
             explorer's menu carried these eleven inline: the file actions
             somebody opens the menu for were above them, and the repository
             actions somebody opens it for were below a third separator, so
             neither was quick. -->
        <ContextSubmenu label="Repository" detail={repoBranch ?? ""}>
          <button class="context-menu-item" onclick={handleOpenRepoPage}>
            Open repository page
          </button>
          <button class="context-menu-item" onclick={handleShowChanges} disabled={repoChangeCount === 0}>
            Changes ({repoChangeCount})
          </button>
          <div class="context-menu-separator"></div>

          <div class="context-menu-label">Record</div>
          <button class="context-menu-item" onclick={handleGitStage} disabled={git.operationInProgress !== null}>
            Stage all
          </button>
          <button class="context-menu-item" onclick={handleGitCommit} disabled={git.operationInProgress !== null}>
            Commit…
          </button>
          <div class="context-menu-separator"></div>

          <div class="context-menu-label">Exchange</div>
          <button class="context-menu-item" onclick={handleGitFetch} disabled={git.operationInProgress !== null}>
            Fetch
          </button>
          <button class="context-menu-item" onclick={handleGitPull} disabled={git.operationInProgress !== null}>
            Pull
          </button>
          <button class="context-menu-item" onclick={handleGitPush} disabled={git.operationInProgress !== null}>
            Push
          </button>
          <div class="context-menu-separator"></div>

          <div class="context-menu-label">Branch</div>
          <button class="context-menu-item" onclick={handleGitCheckout} disabled={git.operationInProgress !== null}>
            Checkout…
          </button>
          <button class="context-menu-item" onclick={handleGitCreateBranch} disabled={git.operationInProgress !== null}>
            Create branch…
          </button>
          <button class="context-menu-item" onclick={handleGitDeleteBranch} disabled={git.operationInProgress !== null}>
            Delete branch…
          </button>
          <div class="context-menu-separator"></div>

          <button class="context-menu-item" onclick={handleUpdate}>
            Refresh
          </button>
          <button
            class="context-menu-item context-menu-item--danger"
            onclick={handleGitDiscard}
            disabled={git.operationInProgress !== null}
          >
            Discard changes…
          </button>
        </ContextSubmenu>

        {#if submodule.github_repo}
          <ContextSubmenu label="GitHub" detail={submodule.github_repo}>
            <button class="context-menu-item" onclick={handleShowIssues}>Issues</button>
            <button class="context-menu-item" onclick={handleNewIssue}>New issue…</button>
          </ContextSubmenu>
        {/if}
      {/if}
    {/if}
    {#if extensionMenuItems.length > 0}
      <div class="context-menu-separator"></div>
      {#each extensionMenuItems as item (item.command)}
        <button class="context-menu-item" onclick={() => { void commands.execute(item.command); closeContextMenu(); }}>
          {item.title}
        </button>
      {/each}
    {/if}
  </div>
{/if}

{#if showIssueCreate && submodule?.github_repo}
  <IssueCreate
    repos={[submodule.github_repo]}
    onclose={() => (showIssueCreate = false)}
  />
{/if}

{#if showCommitDialog}
  <GitCommitDialog
    repoPath={entry.path}
    onclose={() => (showCommitDialog = false)}
  />
{/if}

{#if showDiscardDialog}
  <GitDiscardDialog
    repoPath={entry.path}
    label={entry.name}
    onclose={() => (showDiscardDialog = false)}
  />
{/if}

{#if showBranchDeleteDialog}
  <GitBranchDeleteDialog
    repoPath={entry.path}
    onclose={() => (showBranchDeleteDialog = false)}
  />
{/if}

{#if showCheckoutDialog}
  <GitCheckoutDialog
    repoPath={entry.path}
    onclose={() => (showCheckoutDialog = false)}
  />
{/if}

{#if showBranchCreateDialog}
  <GitBranchCreateDialog
    repoPath={entry.path}
    onclose={() => (showBranchCreateDialog = false)}
  />
{/if}

<style>
  .node {
    --indent: calc(var(--depth) * var(--wb-worktree-indent-step));
  }

  /* The row is a flex container; zones fill the full height. */
  .node-row {
    width: 100%;
    display: flex;
    align-items: stretch;
    color: var(--vscode-editor-foreground);
    font-size: var(--wb-font-size-12);
  }

  .node-row.hidden {
    color: var(--vscode-disabledForeground);
  }

  .node-row.active {
    background: var(--vscode-list-activeSelectionBackground, rgba(83, 153, 236, 0.2));
  }

  .node-row.drag-over {
    background: var(--vscode-list-dropBackground, rgba(83, 153, 236, 0.18));
    outline: 1px solid var(--vscode-focusBorder, #4daafc);
    outline-offset: -1px;
  }

  /* Each zone is a full-height clickable rectangle. */
  .node-zone {
    display: flex;
    align-items: center;
    padding-top: var(--wb-spacing-6);
    padding-bottom: var(--wb-spacing-6);
    text-align: left;
    background: transparent;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
  }

  .node-zone:hover {
    background: var(--vscode-list-hoverBackground);
  }

  /* Zone 1: indent + chevron + icon + name — grows to fill remaining space */
  .node-zone-left {
    flex: 1;
    min-width: 0;
    padding-left: calc(var(--wb-spacing-10) + var(--indent));
    padding-right: var(--wb-spacing-8);
    gap: var(--wb-spacing-4);
  }

  /* Rename zone — same layout as left zone but contains an input */
  .node-rename-zone {
    flex: 1;
    min-width: 0;
    padding-left: calc(var(--wb-spacing-10) + var(--indent));
    padding-right: var(--wb-spacing-8);
    display: flex;
    align-items: center;
    cursor: default;
  }

  .node-pulls {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-spacing-2);
    font-size: var(--wb-font-size-10);
    color: var(--vscode-descriptionForeground);
  }

  .node-checks {
    font-size: var(--wb-font-size-9);
    line-height: 1;
  }

  .node-checks--success { color: var(--vscode-testing-iconPassed, #2d7d46); }
  .node-checks--failure { color: var(--vscode-errorForeground); }
  .node-checks--pending { color: var(--vscode-editorWarning-foreground, #cca700); }

  .node-issues-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-spacing-2);
    font-size: var(--wb-font-size-10);
    color: var(--vscode-editorWarning-foreground, #cca700);
  }

  /* Zone 2: badges + info — fixed right side, always clickable on every node */
  .node-zone-badges {
    flex-shrink: 0;
    min-width: var(--wb-control-size-24);
    padding-left: var(--wb-spacing-4);
    padding-right: var(--wb-spacing-8);
    gap: var(--wb-spacing-4);
  }

  .node-row:has(.node-zone-badges:hover) .node-zone-left {
    background: transparent;
  }

  /* Git status colors — VS Code conventions */
  .node-row.git-modified .node-name,
  .node-row.git-modified .node-icon {
    color: #cca700;
  }
  .node-row.git-staged .node-name,
  .node-row.git-staged .node-icon {
    color: #73c991;
  }
  .node-row.git-untracked .node-name,
  .node-row.git-untracked .node-icon {
    color: #73c991;
  }
  .node-row.git-ignored .node-name,
  .node-row.git-ignored .node-icon {
    color: var(--vscode-disabledForeground);
  }
  .node-row.git-deleted .node-name,
  .node-row.git-deleted .node-icon {
    color: #f14c4c;
    text-decoration: line-through;
  }
  .node-row.git-renamed .node-name,
  .node-row.git-renamed .node-icon {
    color: #73c991;
  }
  .node-row.git-conflict .node-name,
  .node-row.git-conflict .node-icon {
    color: #f14c4c;
    font-weight: 700;
  }

  .node-twist {
    width: var(--wb-control-size-10);
    color: var(--vscode-disabledForeground);
    flex-shrink: 0;
  }
  .node-twist :global(svg.expanded) {
    transform: rotate(90deg);
  }
  .node-twist :global(svg.node-spinner) {
    animation: node-spin 0.7s linear infinite;
  }
  .node-icon {
    width: var(--wb-control-size-14);
    height: var(--wb-control-size-14);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wb-font-size-12);
  }
  .node-label {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
  }
  .node-name {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .node-name--submodule {
    font-weight: 650;
  }
  .node-version {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vscode-disabledForeground);
    font-size: var(--wb-font-size-10);
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.82;
  }
  .node-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-spacing-6);
    color: var(--vscode-disabledForeground);
    font-size: var(--wb-font-size-11);
  }
  .node-branch {
    color: var(--vscode-disabledForeground);
    max-width: var(--wb-control-size-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* A number and its sign, on one baseline. The sign is an icon rather than a
     character so it does not inherit whatever font the row is in and sit
     wherever that font's metrics put it. */
  .node-dirty,
  .node-ahead,
  .node-behind,
  .node-peer-in,
  .node-peer-out {
    display: inline-flex;
    align-items: center;
    gap: 1px;
  }

  /* The CI dot reads as a dot: the colour is the verdict, and an outline ring
     at 8px is a smudge. */
  .node-checks :global(svg) {
    fill: currentColor;
  }

  .node-peer-in,
  .node-peer-out {
    font-size: 10px;
    flex: none;
    /* The peer's colour, not git's: these are two different relationships and
       a reader must not have to check which arrow they are looking at. */
    color: var(--vscode-charts-purple, #b180d7);
  }

  .node-ahead,
  .node-behind {
    font-variant-numeric: tabular-nums;
    font-size: var(--wb-font-size-10);
  }
  .node-ahead {
    color: #73c991;
  }
  .node-behind {
    color: #f14c4c;
  }
  .context-menu-note {
    padding: var(--wb-spacing-6) var(--wb-spacing-12);
    max-width: 240px;
    font-size: var(--wb-font-size-11);
    line-height: 1.4;
    color: var(--vscode-disabledForeground);
  }
  .node-dirty {
    font-variant-numeric: tabular-nums;
    font-size: var(--wb-font-size-10);
    color: var(--vscode-editorWarning-foreground, #cca700);
  }
  .node-absent,
  .node-detached {
    font-size: var(--wb-font-size-10);
    color: var(--vscode-errorForeground, #f14c4c);
  }
  .node-absent {
    color: var(--vscode-disabledForeground);
    font-style: italic;
  }
  .node-notes-badge {
    color: var(--vscode-textLink-foreground, #4daafc);
    display: inline-flex;
    align-items: center;
    opacity: 0.85;
  }
  .node-info-hint {
    display: none;
    align-items: center;
    color: var(--vscode-disabledForeground);
    opacity: 0.5;
  }
  .node-row:hover .node-info-hint {
    display: inline-flex;
  }
  .node-row.hidden .node-icon,
  .node-row.hidden .node-name,
  .node-row.hidden .node-version {
    color: var(--vscode-disabledForeground);
  }
  .children {
    display: flex;
    flex-direction: column;
  }
  .children-loading {
    height: var(--wb-control-size-2);
    background: var(--vscode-progressBar-background, #0e70c0);
    opacity: 0.5;
    margin: var(--wb-spacing-1) 0;
  }
  .node-error {
    padding: var(--wb-spacing-6) var(--wb-spacing-10) var(--wb-spacing-6) calc(var(--wb-spacing-34) + var(--indent));
    font-size: var(--wb-font-size-11);
    color: var(--vscode-errorForeground);
  }
  .node-row:has(.node-error-badge) {
    color: var(--vscode-errorForeground);
  }
  .node-error-badge {
    display: inline-flex;
    align-items: center;
    color: #e09030;
  }
  /* Inline entry creation row */
  .node-inline-entry {
    display: flex;
    align-items: center;
    gap: var(--wb-spacing-4);
    padding: var(--wb-spacing-3) var(--wb-spacing-8) var(--wb-spacing-3) calc(var(--wb-spacing-10) + calc(var(--depth) * var(--wb-spacing-14)));
  }

  .node-inline-icon {
    width: var(--wb-control-size-14);
    flex-shrink: 0;
    color: var(--vscode-disabledForeground);
  }

  .node-inline-input {
    flex: 1;
    min-width: 0;
    background: var(--vscode-input-background, #3c3c3c);
    color: var(--vscode-input-foreground, #cccccc);
    border: 1px solid var(--vscode-focusBorder, #007acc);
    border-radius: var(--wb-corner-radius-2);
    padding: var(--wb-spacing-1) var(--wb-spacing-4);
    font-size: var(--wb-font-size-12);
    font-family: inherit;
    outline: none;
  }

  .node-inline-input:focus {
    border-color: var(--vscode-focusBorder, #007acc);
  }

  @keyframes node-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>