comux-view.tsx

"use client";

import { Fragment, useCallback, useEffect, useMemo, useReducer, useRef, useState, type CSSProperties, type DragEvent, type MouseEvent, type MutableRefObject, type ReactNode } from "react";
import { relativeTime } from "@/lib/relative-time";
import { useDateTimePrefs } from "@/lib/datetime-format";
import { Group, Panel, Separator } from "react-resizable-panels";
import { BottomTerminal } from "@/components/bottom-terminal";
import { killPtyBridge } from "@/lib/pty-ws-bridge";
import { Icon } from "@/lib/icon";
import { copyText } from "@/lib/clipboard";
import { ProjectTree, type ProjectTreeHandle } from "@/components/project-tree";
import { CodeQuickOpen } from "@/components/code-quick-open";
import { MarkdownBlock, SyntaxBlock } from "@/components/message-bubble";
import { SessionChangesInner } from "@/components/session-changes-panel";
import { useChangesSummary } from "@/lib/use-changes-summary";
import { CodeEditor } from "@/components/code-editor";
import { resolveLangLabel } from "@/lib/code-lang";
import {
  CODE_PRESET_COLUMN_FLEX,
  CODE_PRESET_EVENT,
  CODE_PRESET_RIGHT_VIEW,
  readProjectListCollapsed,
  readCodePreset,
  writeProjectListCollapsed,
  type CodePreset,
} from "@/lib/code-layout-preset";
import type { SearchResult } from "@/lib/project-search";
import { SeparatorHandle } from "@/components/ui/separator-handle";
import { useAnnouncer } from "@/components/ui/live-region";
import { EmptyState } from "@/components/ui/empty-state";
import { ErrorState } from "@/components/ui/error-state";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import {
  deriveComuxProjects,
  projectName,
  type ComuxProject,
} from "@/lib/comux-projects";
import { ProjectAvatar } from "@/components/project-avatar";
import { useRovingTabIndex } from "@/lib/use-roving-tabindex";
import { ContextMenu, openContextMenuAt, type ContextMenuState } from "@/components/ui/context-menu";
import { PopoverItem, PopoverSeparator } from "@/components/ui/popover";
import {
  DndContext,
  PointerSensor,
  useSensor,
  useSensors,
  closestCenter,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  SortableContext,
  useSortable,
  arrayMove,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import {
  readProjectOrder,
  writeProjectOrder,
  readPinnedProjects,
  writePinnedProjects,
  readSelectedProject,
  writeSelectedProject,
  toggleProjectPin,
  isProjectPinned,
  orderProjects,
} from "@/lib/comux-project-order";
import {
  addTerminalSession,
  closeTerminalSession,
  createTerminalLayout,
  focusTerminalSession,
  moveTerminalPane,
  normalizeTerminalLayout,
  removeTerminalPaneView,
  renameTerminalSession,
  reorderTerminalSessions,
  terminalLayoutVisibleSessionIds,
  type TerminalLayoutNode,
  type TerminalLayoutState,
  type TerminalSession,
  type TerminalSplitDirection,
  type TerminalSplitSide,
} from "@/lib/terminal-layout";
import {
  directionalNeighbor,
  cycleVisibleSession,
  paneNumberMap,
  sessionAtPaneNumber,
  type PaneDirection,
} from "@/lib/terminal-nav";
import { broadcastTargetIds } from "@/lib/terminal-broadcast";
import type { SessionRow } from "@/lib/types";

type ComuxViewMode = "terminal" | "projects";

type SessionPlacement = "replace" | "split";

type Props = {
  view: ComuxViewMode;
  sessions: SessionRow[];
  onOpenSession: (sessionId: string, familiarId?: string | null) => void;
  onNewChat: (projectRoot: string) => void;
  active?: boolean;
  /** Suffix that isolates this instance's persisted terminal layout/sessions
   *  from other ComuxView instances (e.g. the Code workspace keeps its own
   *  terminals separate from the standalone Terminal surface). */
  storageNamespace?: string;
  /** Controlled right-pane view. When provided (with onRightViewChange), the
   *  parent owns the Files↔Changes selection — the Code workspace drives it from
   *  its top-level tabs — and comux hides its own inline Files/Changes toggle and
   *  collapses the file-tree column while Changes is shown (so Changes is a
   *  full-width tab). Omit both for the standalone, self-toggling behaviour. */
  rightView?: "files" | "changes";
  onRightViewChange?: (view: "files" | "changes") => void;
  /** Center column slot — the familiar conversation. When provided (the Code
   *  workspace), the projects view lays out three columns in the Codex position:
   *  the file-tree explorer (left), this chat (center), and the preview / Changes
   *  review (right). Omitted elsewhere, where
   *  comux stays two-column (tree | preview/changes). */
  centerSlot?: ReactNode;
  /** Code mode moves project/thread navigation into the primary shell sidebar.
   *  When this is true, keep this column focused on the selected project's
   *  details, search, files, terminals, preview, and diff state. */
  hideProjectNavigator?: boolean;
  /** Remove the left file-tree explorer column entirely (project header,
   *  Terminal/New chat, in-project search, sessions, and the FILES tree), so the
   *  surface is just the conversation + preview/Changes. The Code surface sets
   *  this; standalone project browsers keep their tree. */
  hideFileTree?: boolean;
};

type ProjectFilePreview =
  | { kind: "text"; content: string; size?: number }
  | { kind: "image"; dataUrl: string; mimeType: string; size?: number }
  | { kind: "error"; message: string };

const STORAGE_SESSIONS = "cave:comux:sessions";
const STORAGE_LAYOUT = "cave:comux:terminal-layout:v1";
const TERMINAL_SESSION_DRAG_TYPE = "application/x-cave-terminal-session";

function TerminalDropZone({
  side,
  onSplit,
}: {
  side: TerminalSplitSide;
  onSplit: (sessionId: string, side: TerminalSplitSide) => void;
}) {
  const [over, setOver] = useState(false);

  const acceptsTerminalSession = (event: DragEvent<HTMLDivElement>) =>
    Array.from(event.dataTransfer.types).includes(TERMINAL_SESSION_DRAG_TYPE);

  return (
    <div
      className={`comux-terminal-drop-zone comux-terminal-drop-zone--${side}${over ? " comux-terminal-drop-zone--over" : ""}`}
      data-drop-side={side}
      aria-hidden="true"
      onDragEnter={(e) => {
        if (!acceptsTerminalSession(e)) return;
        e.preventDefault();
        setOver(true);
      }}
      onDragOver={(e) => {
        if (!acceptsTerminalSession(e)) return;
        e.preventDefault();
        e.dataTransfer.dropEffect = "move";
        setOver(true);
      }}
      onDragLeave={() => setOver(false)}
      onDrop={(e) => {
        if (!acceptsTerminalSession(e)) return;
        e.preventDefault();
        setOver(false);
        const dragged = e.dataTransfer.getData(TERMINAL_SESSION_DRAG_TYPE);
        if (!dragged) return;
        onSplit(dragged, side);
      }}
    />
  );
}

function readLegacySessions(storageKey: string): TerminalSession[] {
  if (typeof window === "undefined") return [];
  try {
    const raw = window.localStorage.getItem(storageKey);
    if (!raw) return [];
    const parsed = JSON.parse(raw) as unknown;
    if (!Array.isArray(parsed)) return [];
    return parsed.filter(
      (s): s is TerminalSession =>
        typeof s === "object" &&
        s !== null &&
        typeof (s as Record<string, unknown>).id === "string" &&
        typeof (s as Record<string, unknown>).label === "string",
    ).map((s) => ({
      id: s.id,
      label: s.label,
      projectRoot:
        typeof (s as Record<string, unknown>).projectRoot === "string"
          ? ((s as Record<string, unknown>).projectRoot as string)
          : undefined,
    }));
  } catch {
    return [];
  }
}

function isLayoutNode(value: unknown): value is TerminalLayoutNode {
  if (typeof value !== "object" || value === null) return false;
  const node = value as Record<string, unknown>;
  if (node.kind === "leaf") return typeof node.sessionId === "string";
  if (node.kind !== "horizontal" && node.kind !== "vertical") return false;
  return Array.isArray(node.children) && node.children.every((entry) => {
    if (typeof entry !== "object" || entry === null) return false;
    const child = entry as Record<string, unknown>;
    return typeof child.size === "number" && isLayoutNode(child.node);
  });
}

function readTerminalLayout(layoutKey: string, sessionsKey: string): TerminalLayoutState {
  if (typeof window === "undefined") return createTerminalLayout();
  try {
    const raw = window.localStorage.getItem(layoutKey);
    if (raw) {
      const parsed = JSON.parse(raw) as Partial<TerminalLayoutState>;
      if (
        parsed.version === 1 &&
        Array.isArray(parsed.sessions) &&
        (parsed.root === null || isLayoutNode(parsed.root))
      ) {
        const layout: TerminalLayoutState = {
          version: 1,
          sessions: parsed.sessions.filter(
            (session): session is TerminalSession =>
              typeof session === "object" &&
              session !== null &&
              typeof (session as Record<string, unknown>).id === "string" &&
              typeof (session as Record<string, unknown>).label === "string",
          ).map((session) => ({
            id: session.id,
            label: session.label,
            projectRoot:
              typeof session.projectRoot === "string"
                ? session.projectRoot
                : undefined,
          })),
          activeSessionId:
            typeof parsed.activeSessionId === "string"
              ? parsed.activeSessionId
              : null,
          root: parsed.root ?? null,
        };
        return normalizeTerminalLayout(layout);
      }
    }
  } catch {
    // Fall back to the legacy flat session list below.
  }
  const legacy = readLegacySessions(sessionsKey);
  return createTerminalLayout(legacy, legacy[0]?.id ?? null);
}

type TerminalLayoutAction =
  | {
      type: "add";
      session: TerminalSession;
      placement?: SessionPlacement;
      targetSessionId?: string | null;
      side?: TerminalSplitSide;
    }
  | { type: "close"; sessionId: string }
  | { type: "focus"; sessionId: string }
  | { type: "move"; sourceSessionId: string; targetSessionId: string; side: TerminalSplitSide }
  | { type: "remove-view"; sessionId: string }
  | { type: "reorder"; sourceSessionId: string; targetSessionId: string }
  | { type: "rename"; sessionId: string; label: string };

function terminalLayoutReducer(
  state: TerminalLayoutState,
  action: TerminalLayoutAction,
): TerminalLayoutState {
  switch (action.type) {
    case "add":
      return addTerminalSession(state, action.session, {
        placement: action.placement,
        targetSessionId: action.targetSessionId ?? undefined,
        side: action.side,
      });
    case "close":
      return closeTerminalSession(state, action.sessionId);
    case "focus":
      return focusTerminalSession(state, action.sessionId);
    case "move":
      return moveTerminalPane(state, action);
    case "remove-view":
      return removeTerminalPaneView(state, action.sessionId);
    case "reorder":
      return reorderTerminalSessions(state, action.sourceSessionId, action.targetSessionId);
    case "rename":
      return renameTerminalSession(state, action.sessionId, action.label);
  }
}

function uid(): string {
  return crypto.randomUUID();
}

const MARKDOWN_EXTS = new Set(["md", "mdx", "markdown"]);
function isMarkdownPath(path: string | null): boolean {
  if (!path) return false;
  const ext = path.split(".").pop()?.toLowerCase();
  return Boolean(ext && MARKDOWN_EXTS.has(ext));
}

function formatBytes(bytes: number | undefined): string | null {
  if (typeof bytes !== "number" || bytes < 0) return null;
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function shortProjectTime(iso: string | null): string {
  return iso ? relativeTime(iso) : "No sessions yet";
}

// One row in the Projects explorer. Sortable (drag to reorder, keyed by root)
// while `dragEnabled`; carries the per-project identity tile, monogram, a pin
// indicator, and the running dot. A pointer activation distance keeps a quick
// click an "open" — only a deliberate drag (≥5px) reorders.
function SortableProjectRow({
  project,
  isActive,
  isPinned,
  dragEnabled,
  activeRowRef,
  onSelect,
  onRowContextMenu,
}: {
  project: ComuxProject;
  isActive: boolean;
  isPinned: boolean;
  dragEnabled: boolean;
  activeRowRef: MutableRefObject<HTMLButtonElement | null>;
  onSelect: (project: ComuxProject) => void;
  onRowContextMenu: (project: ComuxProject, e: MouseEvent) => void;
}) {
  const { setNodeRef, listeners, transform, transition, isDragging } = useSortable({
    id: project.root,
    disabled: !dragEnabled,
  });
  const meta: string[] = [];
  if (project.sessionCount > 0) {
    meta.push(`${project.sessionCount} ${project.sessionCount === 1 ? "chat" : "chats"}`);
  }
  if (project.updatedAt) meta.push(shortProjectTime(project.updatedAt));
  const style: CSSProperties = {
    transform: CSS.Translate.toString(transform),
    transition,
  };
  return (
    <button
      // Merge the sortable node ref with the active-row ref (used to keep the
      // selected project scrolled into view) without clobbering either.
      ref={(el) => {
        setNodeRef(el);
        if (isActive) activeRowRef.current = el;
      }}
      type="button"
      data-project-row
      data-dragging={isDragging ? "true" : undefined}
      onClick={() => onSelect(project)}
      onContextMenu={(e) => onRowContextMenu(project, e)}
      title={project.root}
      aria-current={isActive ? "true" : undefined}
      style={style}
      {...listeners}
      className={`comux-project-row group flex w-full items-center gap-2.5 rounded-lg px-2 py-[7px] text-left text-[12px] ${
        dragEnabled ? "cursor-grab active:cursor-grabbing" : ""
      } ${
        isActive
          ? "comux-project-row--active text-[var(--text-primary)]"
          : "text-[var(--text-primary)]"
      }`}
    >
      <ProjectAvatar name={project.name} root={project.root} size="lg" className="shrink-0" />
      <span className="flex min-w-0 flex-1 flex-col">
        <span className="truncate font-medium leading-tight">{project.name}</span>
        {meta.length > 0 && (
          <span className="truncate text-[10px] leading-tight tabular-nums text-[var(--text-muted)]">
            {meta.join(" · ")}
          </span>
        )}
      </span>
      {isPinned && (
        <Icon
          name="ph:push-pin-fill"
          width={11}
          className="shrink-0 text-[var(--accent-presence)]"
          title="Pinned"
          aria-hidden
        />
      )}
      {project.runningCount > 0 && (
        <span
          className="h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-[var(--color-success)] shadow-[0_0_8px_var(--color-success)]"
          title={`${project.runningCount} running`}
        />
      )}
    </button>
  );
}

export function ComuxView({ view, sessions: daemonSessions, onOpenSession, onNewChat, active = true, storageNamespace = "", rightView: rightViewProp, onRightViewChange, centerSlot, hideProjectNavigator = false, hideFileTree = false }: Props) {
  useDateTimePrefs(); // subscribe: re-render when the date/time density pref changes
  const layoutKey = STORAGE_LAYOUT + storageNamespace;
  const sessionsKey = STORAGE_SESSIONS + storageNamespace;
  const [terminalLayout, dispatchTerminalLayout] = useReducer(
    terminalLayoutReducer,
    undefined,
    () => readTerminalLayout(layoutKey, sessionsKey),
  );
  const sessions = terminalLayout.sessions;
  const activeSessionId = terminalLayout.activeSessionId;
  const currentIdx = Math.max(
    0,
    sessions.findIndex((session) => session.id === activeSessionId),
  );

  // Project tab state
  const [previewPath, setPreviewPath] = useState<string | null>(null);
  const [preview, setPreview] = useState<ProjectFilePreview | null>(null);
  const [previewLoading, setPreviewLoading] = useState(false);
  const [previewError, setPreviewError] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const [copiedPath, setCopiedPath] = useState(false);
  const [previewRaw, setPreviewRaw] = useState(false);
  // 1-based line to scroll the preview to (set when opened from a search match,
  // cleared when opened from the file tree).
  const [previewLine, setPreviewLine] = useState<number | undefined>(undefined);
  // Editable preview: edit mode swaps the read-only render for a textarea and
  // POSTs back to /api/project-file on save.
  const [editing, setEditing] = useState(false);
  const [editValue, setEditValue] = useState("");
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);
  // Brief "Saved" confirmation after a successful write (auto-clears).
  const [justSaved, setJustSaved] = useState(false);
  const { announce } = useAnnouncer();
  const [tabDropTargetId, setTabDropTargetId] = useState<string | null>(null);
  const [sessionsCollapsed, setSessionsCollapsed] = useState(false);
  // Projects list (the 200px column) visibility, driven by the Code workspace
  // toolbar's Projects toggle and its layout presets over window events. Lives
  // here because comux owns the column; code-view only mirrors the boolean.
  const [projectListCollapsed, setProjectListCollapsed] = useState(false);
  const [projectDetailCollapsed, setProjectDetailCollapsed] = useState(false);
  const [filePreviewCollapsed, setFilePreviewCollapsed] = useState(false);
  const [codePreset, setCodePreset] = useState<CodePreset>(() => readCodePreset());
  // Right pane view: the file preview, or the project's git changes/diff review.
  // Controllable: when the parent passes onRightViewChange (the Code workspace's
  // top-level Files/Changes tabs), the prop wins and every setRightView call is
  // forwarded up; otherwise this is local, self-toggling state. The setter name
  // stays `setRightView` so the diff-first/auto-switch logic below is unchanged.
  const [rightViewState, setRightViewState] = useState<"files" | "changes">("files");
  const isControlledRightView = onRightViewChange != null;
  const rightView = isControlledRightView ? (rightViewProp ?? "files") : rightViewState;
  const setRightView = useCallback(
    (next: "files" | "changes") => {
      if (onRightViewChange) onRightViewChange(next);
      else setRightViewState(next);
    },
    [onRightViewChange],
  );
  // Diff-first review: auto-switch to Changes the first time an agent run
  // produces edits — but never fight an explicit user choice. pinnedRightView
  // flips once the user clicks a toggle or opens a file; prevChangeCount tracks
  // the 0→>0 edit transition so we surface the diff exactly once per project.
  const pinnedRightViewRef = useRef(false);
  // Tracks the most-recent openFilePreview request so a slow response for an
  // older file can't clobber a newer one (wrong file shown / edited).
  const previewReqRef = useRef<string | null>(null);
  // Jump-to-diff target from a transcript edit tool (cave:open-file-diff). The
  // nonce re-triggers the focus even when the same path is clicked again.
  const [focusDiff, setFocusDiff] = useState<{ path: string; nonce: number } | null>(null);
  const prevChangeCountRef = useRef(0);
  // Project-wide code search (CODE-SEARCH-01).
  const [searchInput, setSearchInput] = useState("");
  const [searchRegex, setSearchRegex] = useState(false);
  const [searchCaseSensitive, setSearchCaseSensitive] = useState(false);
  const [searchGlob, setSearchGlob] = useState("");
  const [searchResult, setSearchResult] = useState<SearchResult | null>(null);
  const [searchLoading, setSearchLoading] = useState(false);
  const [searchError, setSearchError] = useState<string | null>(null);
  const treeRef = useRef<ProjectTreeHandle | null>(null);
  const wasActiveTerminalRef = useRef(false);

  // Daemon project root — forwarded to BottomTerminal so terminals open in
  // the right CWD instead of the app bundle dir.
  const [daemonProjectRoot, setDaemonProjectRoot] = useState<string | undefined>(undefined);
  const [selectedProjectRoot, setSelectedProjectRoot] = useState<string | undefined>(undefined);

  // Projects-list ergonomics: type-to-filter (mirrors the Chat-tab projects
  // list), arrow-key roving over the rows, and keeping the active row in view.
  const [projectFilter, setProjectFilter] = useState("");
  const projectFilterRef = useRef<HTMLInputElement>(null);
  const projectListRef = useRef<HTMLDivElement>(null);
  const activeProjectRowRef = useRef<HTMLButtonElement | null>(null);
  const selectedRootRef = useRef<string | undefined>(undefined);
  // Right-click context menu for a project row. `menuTarget` records which
  // project was right-clicked (one menu serves the whole list).
  const [projectMenu, setProjectMenu] = useState<ContextMenuState>(null);
  const [projectMenuTarget, setProjectMenuTarget] = useState<ComuxProject | null>(null);
  // Pinned roots float to the top; manual drag order persists below them. Both
  // load from localStorage after mount so SSR markup and first render agree.
  const [pinnedProjects, setPinnedProjects] = useState<string[]>([]);
  const [projectOrder, setProjectOrder] = useState<string[]>([]);
  useEffect(() => {
    setPinnedProjects(readPinnedProjects());
    setProjectOrder(readProjectOrder());
  }, []);
  // Pointer only (no KeyboardSensor) — arrow keys belong to the roving tab
  // index, not to drag. Distance keeps a click an "open", not a drag.
  const projectSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));

  useEffect(() => {
    void (async () => {
      try {
        const res = await fetch("/api/daemon/status", { cache: "no-store" });
        const json = (await res.json()) as Record<string, unknown>;
        const root =
          (json.workspacePath as string | undefined) ??
          (json.projectRoot as string | undefined);
        if (root && typeof root === "string") {
          setDaemonProjectRoot(root);
        }
      } catch {
        // non-fatal — terminal will open in default shell dir
      }
    })();
  }, []);

  // Persist the full pane tree. Keep the legacy flat key in sync so older
  // versions can still recover terminal tabs if a user rolls back.
  useEffect(() => {
    window.localStorage.setItem(layoutKey, JSON.stringify(terminalLayout));
    window.localStorage.setItem(sessionsKey, JSON.stringify(sessions));
  }, [terminalLayout, sessions, layoutKey, sessionsKey]);

  const projects = useMemo(
    () => deriveComuxProjects(daemonSessions, daemonProjectRoot),
    [daemonSessions, daemonProjectRoot],
  );

  // Display order: pinned-first + manual drag order applied over the recency
  // sort from deriveComuxProjects.
  const orderedProjects = useMemo(
    () => orderProjects(projects, projectOrder, pinnedProjects),
    [projects, projectOrder, pinnedProjects],
  );

  // Filter the project list by name or path (case-insensitive). The code-search
  // box below is a separate ripgrep search — this only narrows the switcher.
  const visibleProjects = useMemo(() => {
    const q = projectFilter.trim().toLowerCase();
    if (!q) return orderedProjects;
    return orderedProjects.filter(
      (p) => p.name.toLowerCase().includes(q) || p.root.toLowerCase().includes(q),
    );
  }, [orderedProjects, projectFilter]);

  // Drag reorders only the unfiltered full list (a filtered subset can't define
  // a total order). Persist the new root sequence as the manual order.
  const dragEnabled = !projectFilter.trim();
  const handleProjectDragEnd = useCallback(
    (event: DragEndEvent) => {
      const { active, over } = event;
      if (!over || active.id === over.id) return;
      const ids = orderedProjects.map((p) => p.root);
      const from = ids.indexOf(String(active.id));
      const to = ids.indexOf(String(over.id));
      if (from < 0 || to < 0) return;
      const next = arrayMove(ids, from, to);
      setProjectOrder(next);
      writeProjectOrder(next);
    },
    [orderedProjects],
  );

  const toggleProjectPinned = useCallback((root: string) => {
    setPinnedProjects((prev) => {
      const next = toggleProjectPin(prev, root);
      writePinnedProjects(next);
      return next;
    });
  }, []);

  // Arrow-key roving over the project rows (WAI-ARIA): one tab stop, ↑/↓ move,
  // Home/End jump. The hook ignores keystrokes while the filter input is focused.
  useRovingTabIndex({
    containerRef: projectListRef,
    itemSelector: "[data-project-row]",
    orientation: "vertical",
  });

  // GitHub-style "/" focuses the project filter while the Code surface is shown,
  // unless the user is already typing or holding a modifier.
  useEffect(() => {
    if (hideProjectNavigator) return;
    if (!active) return;
    function onKey(e: KeyboardEvent) {
      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
      const t = e.target as HTMLElement | null;
      if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
      const el = projectFilterRef.current;
      if (!el) return;
      e.preventDefault();
      el.focus();
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [active, hideProjectNavigator]);

  // Keep the selected project on screen — when the list is long, or after a
  // filter changes which rows are rendered. block:"nearest" is a no-op if it's
  // already visible, so clicking a visible row never jolts the scroll.
  useEffect(() => {
    activeProjectRowRef.current?.scrollIntoView({ block: "nearest" });
  }, [selectedProjectRoot, visibleProjects]);

  const selectedProject = useMemo(
    () => projects.find((project) => project.root === selectedProjectRoot) ?? projects[0] ?? null,
    [projects, selectedProjectRoot],
  );
  const selectedProjectSessions = useMemo(() => {
    if (!selectedProject) return [];
    return daemonSessions
      .filter((session) => session.project_root === selectedProject.root)
      .sort((a, b) =>
        (b.updated_at || b.created_at).localeCompare(a.updated_at || a.created_at),
      );
  }, [daemonSessions, selectedProject]);
  const recentProjectSessions = useMemo(
    () => selectedProjectSessions.slice(0, 6),
    [selectedProjectSessions],
  );
  const selectedProjectFamiliarId = useMemo(
    () => selectedProjectSessions[0]?.familiarId ?? "",
    [selectedProjectSessions],
  );

  useEffect(() => {
    if (projects.length === 0) {
      setSelectedProjectRoot(undefined);
      return;
    }
    // Restore happens here rather than in a mount effect: projects arrive
    // async, and the empty-list reset above would wipe a mount-time restore
    // before the list ever populated.
    setSelectedProjectRoot((current) => {
      const stored = current ?? readSelectedProject() ?? undefined;
      return stored && projects.some((project) => project.root === stored)
        ? stored
        : projects[0].root;
    });
  }, [projects]);
  useEffect(() => {
    if (selectedProjectRoot) writeSelectedProject(selectedProjectRoot);
  }, [selectedProjectRoot]);

  const addSession = useCallback((rootOverride?: string, placement: SessionPlacement = "replace") => {
    const id = uid();
    const root = rootOverride ?? selectedProjectRoot ?? daemonProjectRoot;
    const targetSessionId =
      terminalLayout.activeSessionId ??
      terminalLayoutVisibleSessionIds(terminalLayout)[0] ??
      null;
    dispatchTerminalLayout({
      type: "add",
      session: {
        id,
        label: root ? `${projectName(root)} ${sessions.length + 1}` : `Terminal ${sessions.length + 1}`,
        projectRoot: root,
      },
      placement,
      targetSessionId,
      side: placement === "split" ? "right" : undefined,
    });
    return id;
  }, [daemonProjectRoot, selectedProjectRoot, sessions.length, terminalLayout]);

  useEffect(() => {
    const activeTerminal = view === "terminal" && active;
    if (!activeTerminal) {
      wasActiveTerminalRef.current = false;
      return;
    }
    if (wasActiveTerminalRef.current) return;
    wasActiveTerminalRef.current = true;
    if (sessions.length > 0) return;
    addSession();
  }, [active, addSession, sessions.length, view]);

  const removeSession = useCallback(
    (idx: number) => {
      const removedId = sessions[idx]?.id;
      if (!removedId) return;
      dispatchTerminalLayout({ type: "close", sessionId: removedId });
      // Closing a tab is the ONLY place a desktop PTY is killed. The
      // terminal component deliberately does not stop the shell on
      // unmount — tab switches remount terminals through the keepalive
      // container, and killing there raced the next mount's liveness
      // check, leaving a dead pane that ate keystrokes.
      const internals = (window as unknown as Record<string, unknown>)
        .__TAURI_INTERNALS__;
      if (internals) {
        void import("@tauri-apps/api/core")
          .then(({ invoke }) =>
            invoke("pty_stop", { threadId: `cave.comux.${removedId}` }),
          )
          .catch(() => {});
      }
      // WS transport (browser / iOS / Android): the desktop pty_stop above only
      // reaps native-IPC shells. Without this, closing a tab merely drops the
      // socket — which the server treats as a transient detach — so the shell
      // (and its foreground job) leaks for the full detach grace (~5 min).
      // killPtyBridge sends an explicit kill frame; it is a no-op when no WS
      // bridge is registered for the threadId (i.e. the desktop transport), so
      // running it unconditionally is safe.
      killPtyBridge(`cave.comux.${removedId}`);
    },
    [sessions],
  );

  const renameSession = useCallback((idx: number, label: string) => {
    const session = sessions[idx];
    if (!session) return;
    // Ignore blank/whitespace-only names so a cleared tab keeps its label
    // instead of becoming an empty tab.
    const trimmed = label.trim();
    if (!trimmed) return;
    dispatchTerminalLayout({ type: "rename", sessionId: session.id, label: trimmed });
  }, [sessions]);

  const visiblePaneSessionIds = useMemo(
    () => terminalLayoutVisibleSessionIds(terminalLayout),
    [terminalLayout],
  );

  // Zoom/maximize: when set, the surface renders only this pane full-size while
  // its siblings stay alive (PTYs untouched) behind it. 1-based pane numbers
  // back the badges + ⌘1…9 quick-jump.
  const [zoomedSessionId, setZoomedSessionId] = useState<string | null>(null);

  // Broadcast input ("sync panes"): a keystroke in any pane is mirrored to every
  // other live pane. Each BottomTerminal registers its PTY writer; refs keep the
  // input handler stable so toggling broadcast never re-mounts a pane.
  const [broadcast, setBroadcast] = useState(false);
  const broadcastRef = useRef(false);
  broadcastRef.current = broadcast;
  const paneWritersRef = useRef(new Map<string, (data: string) => void>());
  const registerPaneWriter = useCallback(
    (paneSessionId: string, write: ((data: string) => void) | null) => {
      if (write) paneWritersRef.current.set(paneSessionId, write);
      else paneWritersRef.current.delete(paneSessionId);
    },
    [],
  );
  const handlePaneInput = useCallback((originSessionId: string, data: string) => {
    if (!broadcastRef.current) return;
    for (const id of broadcastTargetIds([...paneWritersRef.current.keys()], originSessionId)) {
      try {
        paneWritersRef.current.get(id)?.(data);
      } catch {
        /* pane unmounted mid-broadcast — drop it */
      }
    }
  }, []);
  const paneNumbers = useMemo(() => paneNumberMap(terminalLayout), [terminalLayout]);
  useEffect(() => {
    if (zoomedSessionId && !visiblePaneSessionIds.includes(zoomedSessionId)) {
      setZoomedSessionId(null);
    }
  }, [zoomedSessionId, visiblePaneSessionIds]);

  const hiddenPaneSessions = useMemo(() => {
    const visibleIds = new Set(visiblePaneSessionIds);
    return sessions.filter((session) => !visibleIds.has(session.id));
  }, [sessions, visiblePaneSessionIds]);

  const focusSessionById = useCallback((sessionId: string) => {
    dispatchTerminalLayout({ type: "focus", sessionId });
  }, []);

  const selectSession = useCallback((idx: number) => {
    const session = sessions[idx];
    if (!session) return;
    dispatchTerminalLayout({ type: "focus", sessionId: session.id });
  }, [sessions]);

  const splitSessionIntoPane = useCallback(
    (sessionId: string, targetSessionId: string, side: TerminalSplitSide) => {
      if (!sessions.some((session) => session.id === sessionId)) return;
      if (sessionId === targetSessionId) return;
      dispatchTerminalLayout({
        type: "move",
        sourceSessionId: sessionId,
        targetSessionId,
        side,
      });
    },
    [sessions],
  );

  const acceptsTerminalSessionDrag = useCallback((event: DragEvent<HTMLElement>) =>
    Array.from(event.dataTransfer.types).some((type) =>
      type === TERMINAL_SESSION_DRAG_TYPE || type === "text/plain",
    ),
  []);

  const onSplitTerminal = useCallback(
    (direction: TerminalSplitDirection) => {
      const side: TerminalSplitSide = direction === "horizontal" ? "right" : "bottom";
      const id = uid();
      const root = selectedProjectRoot ?? daemonProjectRoot;
      dispatchTerminalLayout({
        type: "add",
        session: {
          id,
          label: root ? `${projectName(root)} ${sessions.length + 1}` : `Terminal ${sessions.length + 1}`,
          projectRoot: root,
        },
        placement: "split",
        targetSessionId: terminalLayout.activeSessionId ?? visiblePaneSessionIds[0] ?? null,
        side,
      });
    },
    [daemonProjectRoot, selectedProjectRoot, sessions.length, terminalLayout.activeSessionId, visiblePaneSessionIds],
  );

  // Direct-manipulation split: spawn a new terminal adjacent to THIS pane
  // (inherits its cwd), complementing the global toolbar split + drag-to-split.
  const splitFromPane = useCallback(
    (targetSessionId: string, side: TerminalSplitSide) => {
      const id = uid();
      const target = sessions.find((x) => x.id === targetSessionId);
      const root = target?.projectRoot ?? selectedProjectRoot ?? daemonProjectRoot;
      dispatchTerminalLayout({
        type: "add",
        session: {
          id,
          label: root ? `${projectName(root)} ${sessions.length + 1}` : `Terminal ${sessions.length + 1}`,
          projectRoot: root,
        },
        placement: "split",
        targetSessionId,
        side,
      });
    },
    [daemonProjectRoot, selectedProjectRoot, sessions],
  );

  useEffect(() => {
    if (view !== "terminal" || !active) return;
    const onKey = (e: KeyboardEvent) => {
      const mod = e.metaKey || e.ctrlKey;
      if (!mod) return;
      const target = e.target as HTMLElement | null;
      if (target?.isContentEditable) return;
      // Ctrl-chords typed inside the terminal belong to the SHELL, not to
      // tab management: Ctrl+W is readline delete-word and Ctrl+N is
      // next-history. Hijacking them closed/spawned tabs mid-keystroke,
      // which read as the terminal randomly "losing the ability to type".
      // ⌘-chords still manage tabs (macOS terminals reserve ⌘, never Ctrl).
      if (e.ctrlKey && !e.metaKey && target?.closest?.(".xterm")) return;
      if (e.key === "n" || e.key === "N") {
        e.preventDefault();
        addSession();
      } else if (e.key === "w" || e.key === "W") {
        if (sessions.length === 0) return;
        e.preventDefault();
        removeSession(currentIdx);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [view, active, addSession, removeSession, currentIdx, sessions.length]);

  // Multi-pane navigation (tmux-grade): directional focus (⌘⌥Arrow), cycle
  // (⌘[ / ⌘]), quick-jump (⌘1…9), and zoom toggle (⌘Enter). All gated to ⌘/Ctrl
  // chords the shell never sees; zoom follows focus so navigating while zoomed
  // moves the maximized pane.
  useEffect(() => {
    if (view !== "terminal" || !active) return;
    const onKey = (e: KeyboardEvent) => {
      const mod = e.metaKey || e.ctrlKey;
      if (!mod) return;
      const target = e.target as HTMLElement | null;
      if (target?.isContentEditable) return;
      if (e.ctrlKey && !e.metaKey && target?.closest?.(".xterm")) return;

      const activeId = terminalLayout.activeSessionId;
      const focusPane = (id: string | null) => {
        if (!id) return;
        e.preventDefault();
        dispatchTerminalLayout({ type: "focus", sessionId: id });
        setZoomedSessionId((z) => (z ? id : z)); // zoom follows the focused pane
      };

      // Directional focus — ⌘⌥Arrow.
      if (e.altKey && !e.shiftKey) {
        const dir: PaneDirection | null =
          e.key === "ArrowLeft" ? "left"
          : e.key === "ArrowRight" ? "right"
          : e.key === "ArrowUp" ? "up"
          : e.key === "ArrowDown" ? "down"
          : null;
        if (dir && activeId) {
          focusPane(directionalNeighbor(terminalLayout, activeId, dir));
        }
        return;
      }
      if (e.shiftKey && (e.key === "b" || e.key === "B")) {
        e.preventDefault();
        setBroadcast((v) => !v);
        return;
      }
      if (e.shiftKey) return;

      // Cycle visible panes — ⌘] (next) / ⌘[ (prev).
      if (e.key === "]" || e.key === "[") {
        focusPane(cycleVisibleSession(terminalLayout, activeId, e.key === "]" ? 1 : -1));
        return;
      }
      // Quick-jump to pane N — ⌘1…9.
      if (e.key >= "1" && e.key <= "9") {
        const id = sessionAtPaneNumber(terminalLayout, Number(e.key));
        if (id) focusPane(id);
        return;
      }
      // Zoom / restore the active pane — ⌘Enter.
      if (e.key === "Enter") {
        if (!activeId) return;
        if (visiblePaneSessionIds.length <= 1 && !zoomedSessionId) return;
        e.preventDefault();
        setZoomedSessionId((z) => (z ? null : activeId));
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [view, active, terminalLayout, zoomedSessionId, visiblePaneSessionIds]);

  const openFilePreview = useCallback(async (path: string, line?: number) => {
    previewReqRef.current = path;
    setPreviewPath(path);
    setPreviewLine(line);
    setFilePreviewCollapsed(false);
    setPreviewLoading(true);
    setPreview(null);
    setPreviewError(null);
    setPreviewRaw(false);
    // Leave any prior edit session — opening a new file discards unsaved edits.
    setEditing(false);
    setSaveError(null);
    try {
      const params = new URLSearchParams({
        path,
        familiarId: selectedProjectFamiliarId,
      });
      const res = await fetch(
        `/api/project-file?${params.toString()}`,
        { cache: "no-store" },
      );
      const json = (await res.json()) as {
        ok: boolean;
        kind?: "text" | "image";
        content?: string;
        dataUrl?: string;
        mimeType?: string;
        size?: number;
        error?: string;
      };
      // A newer file was opened while this fetch was in flight — drop the stale
      // response so it can't paint over the current file.
      if (previewReqRef.current !== path) return;
      if (json.ok && json.kind === "image" && typeof json.dataUrl === "string" && typeof json.mimeType === "string") {
        setPreview({ kind: "image", dataUrl: json.dataUrl, mimeType: json.mimeType, size: json.size });
      } else if (json.ok && typeof json.content === "string") {
        setPreview({ kind: "text", content: json.content, size: json.size });
      } else {
        setPreview({ kind: "error", message: json.error ?? "Could not load this file." });
      }
    } catch (err) {
      if (previewReqRef.current !== path) return;
      setPreview({ kind: "error", message: `Could not load this file. ${String(err)}` });
    } finally {
      if (previewReqRef.current === path) setPreviewLoading(false);
    }
  }, [selectedProjectFamiliarId]);

  // Click-to-open from chat: a file tool's target (absolute path) or a prose
  // reference (relative, e.g. `src/foo.ts:42`) dispatches `cave:open-project-file`;
  // the active comux opens it in the Files preview. Relative paths resolve
  // against the selected project root. Gated on `active` so only the visible
  // instance reacts.
  const selectedRoot = selectedProject?.root;
  useEffect(() => {
    if (!active) return;
    const onOpenFile = (event: Event) => {
      const detail = (event as CustomEvent<{ path?: string; line?: number }>).detail;
      if (!detail?.path) return;
      const path = detail.path.startsWith("/")
        ? detail.path
        : selectedRoot
          ? `${selectedRoot.replace(/\/$/, "")}/${detail.path.replace(/^\.?\//, "")}`
          : detail.path;
      // If the file lives inside a project we already track, reveal it in the
      // tree too: switch to that project so the tree is rooted there, and make
      // sure the file column is open. The tree then auto-expands to the file and
      // highlights it (via selectedPath). Files outside any known project still
      // open in the preview — just without the tree reveal.
      const within = projects.find((project) => {
        const r = project.root.replace(/\/$/, "");
        return path === r || path.startsWith(`${r}/`);
      });
      if (within) {
        if (within.root !== selectedProjectRoot) setSelectedProjectRoot(within.root);
        setProjectDetailCollapsed(false);
      }
      // A user-initiated file open is an explicit view choice — pin it so the
      // diff-first auto-switch doesn't yank them back to Changes.
      pinnedRightViewRef.current = true;
      setRightView("files");
      void openFilePreview(path, typeof detail.line === "number" ? detail.line : undefined);
    };
    // Edit tools jump to their file's diff in the Changes review instead of the
    // file preview. Pin Changes and focus that file (matched repo-relative or
    // by suffix inside SessionChangesInner).
    const onOpenDiff = (event: Event) => {
      const detail = (event as CustomEvent<{ path?: string }>).detail;
      if (!detail?.path) return;
      pinnedRightViewRef.current = true;
      setRightView("changes");
      setFocusDiff((prev) => ({ path: detail.path!, nonce: (prev?.nonce ?? 0) + 1 }));
    };
    window.addEventListener("cave:open-project-file", onOpenFile as EventListener);
    window.addEventListener("cave:open-file-diff", onOpenDiff as EventListener);
    return () => {
      window.removeEventListener("cave:open-project-file", onOpenFile as EventListener);
      window.removeEventListener("cave:open-file-diff", onOpenDiff as EventListener);
    };
  }, [active, openFilePreview, selectedRoot, projects, selectedProjectRoot]);

  useEffect(() => {
    if (view !== "projects" || !active) return;
    const onSelectProject = (event: Event) => {
      const root = (event as CustomEvent<{ root?: string }>).detail?.root;
      if (!root) return;
      // Switching to a DIFFERENT project must drop the previous project's open
      // file preview — otherwise it keeps showing (and offering Edit/Save on)
      // a file from the old project, with a broken absolute-path breadcrumb.
      if (root !== selectedRootRef.current) clearFilePreview();
      setSelectedProjectRoot(root);
      setProjectDetailCollapsed(false);
    };
    window.addEventListener("cave:code-select-project", onSelectProject as EventListener);
    return () => window.removeEventListener("cave:code-select-project", onSelectProject as EventListener);
  }, [active, view]);

  // Code workspace toolbar wiring (projects view only): the Code/Changes toggle
  // switches the right pane and applies the matching 2/3 column weighting. Sync
  // initial persisted state so a reload remembers the selected mode.
  useEffect(() => {
    if (view !== "projects") return;
    setProjectListCollapsed(readProjectListCollapsed());
    const initialPreset = readCodePreset();
    setCodePreset(initialPreset);
    setRightView(CODE_PRESET_RIGHT_VIEW[initialPreset]);
    const onPreset = (event: Event) => {
      const preset = (event as CustomEvent<{ preset?: CodePreset }>).detail?.preset;
      if (!preset) return;
      setCodePreset(preset);
      const nextRight = CODE_PRESET_RIGHT_VIEW[preset];
      // An explicit preset is a deliberate view choice — pin it so diff-first
      // auto-switch doesn't override.
      pinnedRightViewRef.current = true;
      setRightView(nextRight);
    };
    window.addEventListener(CODE_PRESET_EVENT, onPreset as EventListener);
    return () => {
      window.removeEventListener(CODE_PRESET_EVENT, onPreset as EventListener);
    };
  }, [setRightView, view]);

  // Show/hide the projects list from its own header (and the collapsed rail).
  // Persists so a reload remembers.
  const setProjectListVisible = useCallback((visible: boolean) => {
    setProjectListCollapsed(!visible);
    writeProjectListCollapsed(!visible);
  }, []);

  const setProjectDetailVisible = useCallback((visible: boolean) => {
    if (!visible && filePreviewCollapsed) setFilePreviewCollapsed(false);
    setProjectDetailCollapsed(!visible);
  }, [filePreviewCollapsed]);

  const setFilePreviewVisible = useCallback((visible: boolean) => {
    if (!visible && projectDetailCollapsed) setProjectDetailCollapsed(false);
    setFilePreviewCollapsed(!visible);
  }, [projectDetailCollapsed]);

  const copyPreview = useCallback(() => {
    if (!preview || preview.kind !== "text") return;
    void copyText(preview.content).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    });
  }, [preview]);

  // Enter edit mode: seed the textarea with the current source and show raw
  // (markdown previews edit their source, not the rendered HTML).
  const startEditing = useCallback(() => {
    if (!preview || preview.kind !== "text") return;
    setEditValue(preview.content);
    setSaveError(null);
    setJustSaved(false);
    setPreviewRaw(true);
    setEditing(true);
  }, [preview]);

  const cancelEditing = useCallback(() => {
    setEditing(false);
    setSaveError(null);
  }, []);

  // Synchronous in-flight guard: Cmd-S in the editor calls onSave directly,
  // bypassing the Save button's disabled={saving}. A ref (not the saving state,
  // which would be stale in this callback) blocks concurrent POSTs.
  const savingRef = useRef(false);
  const saveEdit = useCallback(async () => {
    if (!previewPath || savingRef.current) return;
    savingRef.current = true;
    setSaving(true);
    setSaveError(null);
    try {
      const res = await fetch("/api/project-file", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ path: previewPath, content: editValue, familiarId: selectedProjectFamiliarId }),
      });
      const json = (await res.json()) as { ok: boolean; size?: number; error?: string };
      if (!res.ok || !json.ok) {
        setSaveError(json.error ?? `save failed (${res.status})`);
        return;
      }
      // Commit the edit into the preview so a cancel/reopen shows saved text.
      setPreview({ kind: "text", content: editValue, size: json.size });
      setEditing(false);
      setJustSaved(true);
      announce("File saved.");
    } catch (err) {
      setSaveError(String(err));
      announce(`Couldn't save the file: ${String(err)}`, "assertive");
    } finally {
      setSaving(false);
      savingRef.current = false;
    }
  }, [previewPath, editValue, selectedProjectFamiliarId]);

  // Auto-clear the "Saved" confirmation a moment after it shows.
  useEffect(() => {
    if (!justSaved) return;
    const t = window.setTimeout(() => setJustSaved(false), 1800);
    return () => window.clearTimeout(t);
  }, [justSaved]);

  // A redacted .env (server refuses writes) and error placeholders aren't
  // editable; everything else text is.
  const previewEditable =
    preview?.kind === "text" &&
    !(previewPath ? previewPath.split("/").pop()?.startsWith(".env") : false);

  // Debounced project-wide search. Re-runs when the query, regex toggle, or
  // selected project changes; an empty query clears results without a request.
  const searchRoot = selectedProject?.root;

  // ⌘P / Ctrl+P → quick-open file picker (fuzzy jump by name). preventDefault
  // also suppresses the browser's print dialog. Works across the Code workspace
  // whenever a project is selected, regardless of the active sub-view.
  const [quickOpen, setQuickOpen] = useState(false);
  useEffect(() => {
    if (!active) return;
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && (e.key === "p" || e.key === "P")) {
        if (!searchRoot) return;
        e.preventDefault();
        setQuickOpen(true);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [active, searchRoot]);

  useEffect(() => {
    const query = searchInput.trim();
    if (!query || !searchRoot) {
      setSearchResult(null);
      setSearchError(null);
      setSearchLoading(false);
      return;
    }
    let cancelled = false;
    setSearchLoading(true);
    const timer = setTimeout(() => {
      const params = new URLSearchParams({ root: searchRoot, q: query });
      params.set("familiarId", selectedProjectFamiliarId);
      if (searchRegex) params.set("regex", "1");
      if (searchCaseSensitive) params.set("case", "sensitive");
      const glob = searchGlob.trim();
      if (glob) params.set("glob", glob);
      fetch(`/api/project/search?${params.toString()}`, { cache: "no-store" })
        .then((res) => res.json())
        .then((json: SearchResult & { ok: boolean; repo?: boolean; error?: string }) => {
          if (cancelled) return;
          if (!json.ok || json.repo === false) {
            setSearchResult(null);
            setSearchError(json.error ?? "search unavailable");
          } else {
            setSearchResult({ files: json.files ?? [], totalMatches: json.totalMatches ?? 0, truncated: !!json.truncated });
            setSearchError(null);
          }
        })
        .catch((err) => {
          if (cancelled) return;
          setSearchResult(null);
          setSearchError(String(err));
        })
        .finally(() => {
          if (!cancelled) setSearchLoading(false);
        });
    }, 250);
    return () => {
      cancelled = true;
      clearTimeout(timer);
    };
  }, [searchInput, searchRegex, searchCaseSensitive, searchGlob, searchRoot, selectedProjectFamiliarId]);

  // Open a search match: search paths are relative to the searched root, so
  // rejoin them to the project root before handing off to the file preview.
  const openSearchMatch = useCallback(
    (relPath: string, line?: number) => {
      if (!searchRoot) return;
      void openFilePreview(`${searchRoot.replace(/\/$/, "")}/${relPath}`, line);
    },
    [searchRoot, openFilePreview],
  );

  useEffect(() => { selectedRootRef.current = selectedProjectRoot; }, [selectedProjectRoot]);

  const clearFilePreview = useCallback(() => {
    previewReqRef.current = null;
    setPreviewPath(null);
    setPreview(null);
    setEditing(false);
    setSaveError(null);
  }, []);

  const selectProject = useCallback((project: ComuxProject) => {
    setSelectedProjectRoot(project.root);
    clearFilePreview();
  }, [clearFilePreview]);

  // Poll the diff while a familiar is actively working this project so the
  // Changes view reflects edits as they land.
  const projectHasRunningSession = recentProjectSessions.some((s) => s.status === "running");

  // Diff-first review: poll a lightweight changes summary while Files is showing
  // and a familiar is working this project, and flip to the Changes/diff view
  // the first time edits appear — unless the user pinned a view. The poll pauses
  // once Changes is shown (SessionChangesInner takes over its own polling).
  const changesSummary = useChangesSummary(
    selectedProject?.root,
    rightView !== "changes" && projectHasRunningSession,
  );
  useEffect(() => {
    // Reset the diff-first decision when switching projects.
    pinnedRightViewRef.current = false;
    prevChangeCountRef.current = 0;
  }, [selectedProject?.root]);
  useEffect(() => {
    const prev = prevChangeCountRef.current;
    prevChangeCountRef.current = changesSummary.count;
    if (
      !pinnedRightViewRef.current &&
      rightView === "files" &&
      prev === 0 &&
      changesSummary.count > 0
    ) {
      setRightView("changes");
    }
  }, [changesSummary.count, rightView]);

  const previewIsMarkdown = preview?.kind === "text" && isMarkdownPath(previewPath);
  const previewLineCount = preview?.kind === "text" ? preview.content.split("\n").length : 0;
  const renderAsMarkdown = previewIsMarkdown && !previewRaw;
  // Language badge for the preview header — resolves the file extension to a
  // human grammar name ("ts" → "TypeScript") matching what the highlighter
  // now actually colorizes.
  const previewExt = previewPath ? previewPath.split(".").pop() : undefined;
  const previewLangLabel = preview?.kind === "text" ? resolveLangLabel(previewExt) : null;
  const codeColumnFlex = CODE_PRESET_COLUMN_FLEX[codePreset];
  const visiblePaneCount = visiblePaneSessionIds.length;
  const sessionById = useMemo(
    () => new Map(sessions.map((session) => [session.id, session])),
    [sessions],
  );
  const nodeKey = useCallback((node: TerminalLayoutNode): string => {
    if (node.kind === "leaf") return node.sessionId;
    return `${node.kind}:${node.children.map((entry) => nodeKey(entry.node)).join("|")}`;
  }, []);
  const renderTerminalNode = useCallback(
    (node: TerminalLayoutNode, path = "root"): ReactNode => {
      if (node.kind === "leaf") {
        const s = sessionById.get(node.sessionId);
        if (!s) return null;
        const isActive = s.id === activeSessionId;
        return (
          <div
            className="comux-terminal-pane"
            data-terminal-pane-id={s.id}
            data-active={isActive ? "true" : undefined}
            data-broadcast={broadcast ? "true" : undefined}
            onClick={() => focusSessionById(s.id)}
          >
            <div
              className="comux-terminal-pane-bar"
              draggable
              data-terminal-pane-handle={s.id}
              title="Drag onto another pane's edge to move this terminal"
              onDragStart={(e) => {
                e.dataTransfer.effectAllowed = "move";
                e.dataTransfer.setData(TERMINAL_SESSION_DRAG_TYPE, s.id);
                e.dataTransfer.setData("text/plain", s.id);
                e.currentTarget
                  .closest(".comux-terminal-pane")
                  ?.setAttribute("data-dragging", "true");
              }}
              onDragEnd={(e) => {
                e.currentTarget
                  .closest(".comux-terminal-pane")
                  ?.removeAttribute("data-dragging");
              }}
            >
              {visiblePaneCount > 1 ? (
                <button
                  type="button"
                  draggable={false}
                  className="comux-terminal-pane-num"
                  onClick={(e) => {
                    e.stopPropagation();
                    focusSessionById(s.id);
                  }}
                  aria-label={`Focus pane ${paneNumbers.get(s.id)}: ${s.label}`}
                  title={`Go directly to pane ${paneNumbers.get(s.id)}`}
                >
                  {paneNumbers.get(s.id)}
                </button>
              ) : (
                <Icon name="ph:terminal-window" width={12} aria-hidden />
              )}
              <span className="min-w-0 flex-1 truncate">{s.label}</span>
              {s.projectRoot ? (
                <span className="comux-terminal-pane-cwd" title={s.projectRoot}>
                  {projectName(s.projectRoot)}
                </span>
              ) : null}
              <button
                type="button"
                draggable={false}
                className="comux-terminal-pane-action comux-terminal-pane-action--split"
                onClick={(e) => {
                  e.stopPropagation();
                  splitFromPane(s.id, "right");
                }}
                aria-label={`Split ${s.label} right`}
                title="Split right"
              >
                <Icon name="ph:columns" width={10} aria-hidden />
              </button>
              <button
                type="button"
                draggable={false}
                className="comux-terminal-pane-action comux-terminal-pane-action--split"
                onClick={(e) => {
                  e.stopPropagation();
                  splitFromPane(s.id, "bottom");
                }}
                aria-label={`Split ${s.label} down`}
                title="Split down"
              >
                <Icon name="ph:rows" width={10} aria-hidden />
              </button>
              {visiblePaneCount > 1 || zoomedSessionId === s.id ? (
                <button
                  type="button"
                  draggable={false}
                  className="comux-terminal-pane-action"
                  onClick={(e) => {
                    e.stopPropagation();
                    setZoomedSessionId((z) => (z === s.id ? null : s.id));
                  }}
                  aria-label={zoomedSessionId === s.id ? `Restore ${s.label}` : `Zoom ${s.label}`}
                  title={zoomedSessionId === s.id ? "Restore split (⌘⏎)" : "Zoom pane (⌘⏎)"}
                >
                  <Icon name={zoomedSessionId === s.id ? "ph:arrows-in-simple" : "ph:arrows-out-simple"} width={10} aria-hidden />
                </button>
              ) : null}
              {visiblePaneCount > 1 ? (
                <button
                  type="button"
                  draggable={false}
                  className="comux-terminal-pane-action"
                  onClick={(e) => {
                    e.stopPropagation();
                    dispatchTerminalLayout({ type: "remove-view", sessionId: s.id });
                  }}
                  aria-label={`Remove ${s.label} from split`}
                  title="Remove split"
                >
                  <Icon name="ph:x-bold" width={10} aria-hidden />
                </button>
              ) : null}
            </div>
            <div className="comux-terminal-pane-body">
              <TerminalDropZone side="left" onSplit={(dragged, side) => splitSessionIntoPane(dragged, s.id, side)} />
              <TerminalDropZone side="right" onSplit={(dragged, side) => splitSessionIntoPane(dragged, s.id, side)} />
              <TerminalDropZone side="top" onSplit={(dragged, side) => splitSessionIntoPane(dragged, s.id, side)} />
              <TerminalDropZone side="bottom" onSplit={(dragged, side) => splitSessionIntoPane(dragged, s.id, side)} />
              <BottomTerminal
                threadId={`cave.comux.${s.id}`}
                active={active && isActive}
                visible={active}
                projectRoot={s.projectRoot ?? selectedProjectRoot ?? daemonProjectRoot}
                paneId={s.id}
                label={s.label}
                registerWriter={registerPaneWriter}
                onUserInput={handlePaneInput}
              />
            </div>
          </div>
        );
      }

      return (
        <Group
          className="h-full min-h-0 w-full"
          orientation={node.kind}
        >
          {node.children.map((entry, paneIdx) => {
            const key = nodeKey(entry.node);
            return (
              <Fragment key={`${path}:${key}`}>
                <Panel
                  id={`terminal-pane-${path}-${key}`}
                  minSize={18}
                  defaultSize={entry.size}
                  className="h-full min-h-0 min-w-0 overflow-hidden"
                >
                  {renderTerminalNode(entry.node, `${path}-${paneIdx}`)}
                </Panel>
                {paneIdx < node.children.length - 1 ? (
                  <Separator
                    className="comux-terminal-resize shrink-0"
                    data-terminal-resize-handle={`${path}-${paneIdx}`}
                    data-orientation={node.kind === "horizontal" ? "col" : "row"}
                  >
                    <SeparatorHandle orientation={node.kind === "horizontal" ? "col" : "row"} />
                  </Separator>
                ) : null}
              </Fragment>
            );
          })}
        </Group>
      );
    },
    [
      active,
      activeSessionId,
      daemonProjectRoot,
      focusSessionById,
      nodeKey,
      paneNumbers,
      selectedProjectRoot,
      sessionById,
      splitFromPane,
      splitSessionIntoPane,
      visiblePaneCount,
      zoomedSessionId,
      broadcast,
      handlePaneInput,
      registerPaneWriter,
    ],
  );

  return (
    <div className="flex h-full flex-col">
      {view === "terminal" ? (
        <div className="flex flex-1 flex-col min-h-0">
          {/* Session tab strip */}
          <div className="comux-terminal-tab-strip flex items-center gap-2 border-b border-[var(--border-hairline)] bg-[var(--bg-raised)]/20 px-2 py-1 text-[11px]">
            <div
              className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto"
              role="tablist"
              aria-orientation="horizontal"
              aria-label="Terminal sessions"
            >
              {sessions.map((s, i) => (
                <div
                  key={s.id}
                  draggable
                  role="tab"
                  aria-selected={i === currentIdx}
                  tabIndex={i === currentIdx ? 0 : -1}
                  className={`comux-terminal-tab group flex cursor-pointer items-center gap-1 rounded px-2 py-0.5 transition-colors ${
                    i === currentIdx
                      ? "bg-[var(--bg-base)] text-[var(--text-primary)]"
                      : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
                  }${tabDropTargetId === s.id ? " comux-terminal-tab--drop-target" : ""}`}
                  data-terminal-tab-id={s.id}
                  onClick={() => selectSession(i)}
                  onKeyDown={(e) => {
                    // Roving tablist keys act on the tab itself; keystrokes
                    // inside the rename textbox (a child) must not re-route.
                    if (e.target !== e.currentTarget) return;
                    if (e.key === "Enter" || e.key === " ") {
                      e.preventDefault();
                      selectSession(i);
                      return;
                    }
                    if (e.key === "F2") {
                      e.preventDefault();
                      e.currentTarget.querySelector<HTMLElement>("[data-terminal-tab-rename]")?.focus();
                      return;
                    }
                    const last = sessions.length - 1;
                    const next =
                      e.key === "ArrowRight" ? (i === last ? 0 : i + 1)
                      : e.key === "ArrowLeft" ? (i === 0 ? last : i - 1)
                      : e.key === "Home" ? 0
                      : e.key === "End" ? last
                      : null;
                    if (next === null || next === i) return;
                    e.preventDefault();
                    // Selection follows focus (WAI-ARIA tabs pattern). The
                    // keyed node persists across the re-render, so focusing
                    // it synchronously is safe.
                    selectSession(next);
                    document
                      .querySelector<HTMLElement>(`[data-terminal-tab-id="${window.CSS.escape(sessions[next].id)}"]`)
                      ?.focus();
                  }}
                  onDragStart={(e) => {
                    e.dataTransfer.effectAllowed = "move";
                    e.dataTransfer.setData(TERMINAL_SESSION_DRAG_TYPE, s.id);
                    e.dataTransfer.setData("text/plain", s.id);
                  }}
                  onDragOver={(e) => {
                    if (!acceptsTerminalSessionDrag(e)) return;
                    const dragged =
                      e.dataTransfer.getData(TERMINAL_SESSION_DRAG_TYPE) ||
                      e.dataTransfer.getData("text/plain");
                    if (dragged === s.id) return;
                    e.preventDefault();
                    e.dataTransfer.dropEffect = "move";
                    setTabDropTargetId(s.id);
                  }}
                  onDragLeave={() => {
                    setTabDropTargetId((current) => (current === s.id ? null : current));
                  }}
                  onDrop={(e) => {
                    if (!acceptsTerminalSessionDrag(e)) return;
                    e.preventDefault();
                    setTabDropTargetId(null);
                    const dragged =
                      e.dataTransfer.getData(TERMINAL_SESSION_DRAG_TYPE) ||
                      e.dataTransfer.getData("text/plain");
                    if (!dragged || dragged === s.id) return;
                    dispatchTerminalLayout({
                      type: "reorder",
                      sourceSessionId: dragged,
                      targetSessionId: s.id,
                    });
                  }}
                  onDragEnd={() => setTabDropTargetId(null)}
                  title="Drag onto another tab to reorder · drag onto a pane edge to split"
                >
                  <span
                    contentEditable
                    suppressContentEditableWarning
                    role="textbox"
                    aria-label={`Rename terminal ${s.label} — Enter saves, Escape cancels`}
                    data-terminal-tab-rename
                    onBlur={(e) =>
                      renameSession(i, e.currentTarget.textContent ?? s.label)
                    }
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        e.preventDefault();
                        (e.target as HTMLElement).blur();
                      } else if (e.key === "Escape") {
                        // Abort the rename: restore the original label before
                        // blur so the onBlur save is a no-op.
                        e.preventDefault();
                        e.currentTarget.textContent = s.label;
                        (e.target as HTMLElement).blur();
                      }
                    }}
                    title="Click or F2 to rename · Enter to save · Esc to cancel"
                    className="max-w-[120px] truncate rounded-[3px] px-0.5 outline-none focus:bg-[var(--bg-base)] focus:ring-1 focus:ring-[var(--accent-presence)]"
                  >
                    {s.label}
                  </span>
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      removeSession(i);
                    }}
                    className="comux-terminal-tab-close hidden items-center text-[var(--text-muted)] hover:text-[var(--text-primary)] group-hover:inline-flex"
                    aria-label={`Close ${s.label}`}
                  >
                    <Icon name="ph:x-bold" width={10} />
                  </button>
                </div>
              ))}
            </div>
            <div className="comux-terminal-toolbar-actions flex shrink-0 items-center gap-1.5">
              <div className="comux-terminal-split-controls flex items-center gap-0.5 rounded-md border border-[var(--border-hairline)] bg-[var(--bg-base)]/40 p-0.5">
                <button
                  type="button"
                  onClick={() => onSplitTerminal("horizontal")}
                  disabled={sessions.length === 0}
                  className="comux-terminal-toolbar-button inline-flex items-center gap-1 rounded-[5px] px-1.5 py-0.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)] disabled:pointer-events-none disabled:opacity-40"
                  title="Split right"
                >
                  <Icon name="ph:columns" width={12} aria-hidden />
                  <span>Split right</span>
                </button>
                <button
                  type="button"
                  onClick={() => onSplitTerminal("vertical")}
                  disabled={sessions.length === 0}
                  className="comux-terminal-toolbar-button inline-flex items-center gap-1 rounded-[5px] px-1.5 py-0.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)] disabled:pointer-events-none disabled:opacity-40"
                  title="Split down"
                >
                  <Icon name="ph:rows" width={12} aria-hidden />
                  <span>Split down</span>
                </button>
              </div>
              <button
                type="button"
                onClick={() => setBroadcast((v) => !v)}
                aria-pressed={broadcast}
                disabled={visiblePaneCount < 2 && !broadcast}
                className="comux-terminal-toolbar-button inline-flex items-center gap-1 rounded-[5px] px-1.5 py-0.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)] disabled:pointer-events-none disabled:opacity-40"
                data-broadcast-active={broadcast ? "true" : undefined}
                title="Broadcast input to all panes (⌘⇧B)"
              >
                <Icon name="ph:share-network" width={12} aria-hidden />
                <span>{broadcast ? `Broadcasting · ${visiblePaneSessionIds.length}` : "Broadcast"}</span>
              </button>
              <button
                type="button"
                onClick={() => addSession()}
                aria-label="New terminal"
                title="New terminal (⌘N)"
                className="comux-terminal-add-button inline-grid h-[22px] w-[22px] place-items-center rounded-md border border-[var(--border-hairline)] bg-[var(--bg-base)]/40 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)]"
              >
                <Icon name="ph:plus" width={12} aria-hidden />
              </button>
            </div>
          </div>

          {/* Terminal area */}
          <div className="flex-1 min-h-0 relative">
            {sessions.length === 0 ? (
              <div className="flex h-full flex-col items-center justify-center gap-3">
                <div className="flex flex-col items-center gap-1 text-center">
                  <p className="text-sm text-[var(--text-secondary)]">No terminal sessions</p>
                  <p className="text-xs text-[var(--text-muted)]">
                    Start one to run commands inside the cave.
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => addSession()}
                    className="comux-terminal-empty-add rounded border border-[var(--border-hairline)] px-3 py-1 text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-raised)]"
                  >
                    + New terminal
                  </button>
                  <kbd className="rounded border border-[var(--border-hairline)] bg-[var(--bg-raised)]/40 px-1.5 py-0.5 text-[10px] text-[var(--text-muted)]">
                    ⌘N
                  </kbd>
                </div>
                <div className="comux-terminal-empty-hints">
                  <span><kbd>⌘N</kbd> new</span>
                  <span><kbd>⌘⌥←↑↓→</kbd> focus pane</span>
                  <span><kbd>⌘[</kbd> <kbd>⌘]</kbd> cycle</span>
                  <span><kbd>⌘1–9</kbd> jump</span>
                  <span><kbd>⌘⏎</kbd> zoom</span>
                  <span><kbd>⌘⇧B</kbd> broadcast</span>
                  <span>drag a pane edge to split</span>
                </div>
              </div>
            ) : (
              <>
                {broadcast && visiblePaneSessionIds.length > 1 ? (
                  <div className="comux-terminal-broadcast-banner" role="status">
                    <Icon name="ph:share-network" width={12} aria-hidden />
                    <span>Broadcasting to {visiblePaneSessionIds.length} panes · ⌘⇧B to stop</span>
                  </div>
                ) : null}
                {terminalLayout.root
                  ? zoomedSessionId && visiblePaneSessionIds.includes(zoomedSessionId)
                    ? renderTerminalNode({ kind: "leaf", sessionId: zoomedSessionId })
                    : renderTerminalNode(terminalLayout.root)
                  : null}
                {/* a11y invariant (cave-hnn5): the keepalive class hides via
                    visibility:hidden, which makes every descendant — including
                    xterm's helper textarea, which only opacity-hides itself —
                    unfocusable AND hidden from AT. So this aria-hidden never
                    hides focusable content. If the CSS ever moves to
                    opacity/clip hiding, add `inert` here. */}
                <div className="comux-terminal-keepalive" aria-hidden="true">
                  {hiddenPaneSessions.map((s) => (
                    <BottomTerminal
                      key={s.id}
                      threadId={`cave.comux.${s.id}`}
                      active={false}
                      visible={false}
                      projectRoot={s.projectRoot ?? selectedProjectRoot ?? daemonProjectRoot}
                      label={s.label}
                    />
                  ))}
                </div>
              </>
            )}
          </div>
          <footer className="shrink-0 border-t border-[var(--border-hairline)] px-3 py-1.5 text-center text-[10px] text-[var(--text-muted)]">
            ⌘N new · ⌘W close · drag tabs or pane bars onto pane edges to split &amp; reorganize · drag dividers to resize · ⌘⌥arrows focus · ⌘[ ⌘] cycle · ⌘1–9 jump · ⌘⏎ zoom · ⌘⇧B broadcast
          </footer>
        </div>
      ) : (
        /* Project tab */
        <div className="flex flex-1 min-h-0">

          {/* Project detail */}
          <div className="flex min-w-0 min-h-0 flex-1 flex-col">
            {selectedProject ? (
              <div className="flex min-h-0 flex-1 flex-col xl:flex-row">
                {/* File-tree column (projects · search · sessions · tree) — the
                    Files tab. Hidden in controlled Changes mode so the diff
                    review fills the surface as its own tab. */}
                {!hideFileTree && !(isControlledRightView && rightView === "changes") && (projectDetailCollapsed ? (
                  <button
                    type="button"
                    aria-label="Show project details"
                    title="Show project details"
                    onClick={() => setProjectDetailVisible(true)}
                    className="flex min-h-[34px] shrink-0 items-center gap-2 border-b border-[var(--border-hairline)] px-2 py-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-primary)] xl:min-h-0 xl:w-[34px] xl:flex-col xl:self-stretch xl:border-b-0 xl:border-r xl:py-2"
                  >
                    <span className="grid h-7 w-7 shrink-0 place-items-center">
                      <Icon name="ph:sidebar-simple" width={15} />
                    </span>
                    <span className="comux-detail-rail-label text-[10px] font-semibold uppercase tracking-widest xl:mt-1">
                      Details
                    </span>
                  </button>
                ) : (
                  <div className="flex min-h-0 min-w-0 flex-col border-b border-[var(--border-hairline)] xl:flex-1 xl:border-b-0 xl:border-r">
                    <div className="shrink-0 border-b border-[var(--border-hairline)] px-4 py-3">
                      {/* Top row: project identity + the project-details toggle,
                          pinned to the topmost row so it never wraps below the
                          Terminal / New chat actions. */}
                      <div className="flex items-start justify-between gap-2">
                        <div className="min-w-0">
                          <div className="flex items-center gap-2">
                            <ProjectAvatar
                              name={selectedProject.name}
                              root={selectedProject.root}
                              size="md"
                            />
                            <h2 className="truncate text-sm font-semibold text-[var(--text-primary)]">
                              {selectedProject.name}
                            </h2>
                          </div>
                          <p className="mt-1 truncate text-[11px] text-[var(--text-muted)]">
                            {selectedProject.root}
                          </p>
                        </div>
                        <button
                          type="button"
                          aria-label="Hide project details"
                          title="Hide project details"
                          onClick={() => setProjectDetailVisible(false)}
                          className="grid h-7 w-7 shrink-0 place-items-center rounded-md text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-primary)]"
                        >
                          <Icon name="ph:sidebar-simple-fill" width={14} />
                        </button>
                      </div>
                      {/* Actions row */}
                      <div className="mt-3 flex flex-wrap items-center gap-2">
                        <button
                          type="button"
                          onClick={() => addSession(selectedProject.root)}
                          className="flex h-7 items-center gap-1 rounded-md border border-[var(--border-hairline)] px-2.5 text-[11px] text-[var(--text-secondary)] hover:bg-[var(--bg-raised)]"
                        >
                          <Icon name="ph:plus" width={12} />
                          Terminal
                        </button>
                        <button
                          type="button"
                          onClick={() => onNewChat(selectedProject.root)}
                          className="flex h-7 items-center gap-1 rounded-md bg-[var(--accent-presence)] px-2.5 text-[11px] font-medium text-[var(--accent-presence-foreground)] hover:opacity-85"
                        >
                          <Icon name="ph:chat-circle-dots" width={12} />
                          New chat
                        </button>
                      </div>
                    </div>

                    {/* No top padding on the scroller: the sticky PROJECTS
                        header must stick flush at the scrollport top, or rows
                        scrolling up bleed into the gap above it. Top breathing
                        room lives inside the header instead (its own padding). */}
                    <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
                    {!hideProjectNavigator && (
                      <>
                    {/* Projects — merged into this column above the file tree so
                        the project switcher and the file browser share one
                        explorer. Collapsible; the Code toolbar's Projects toggle
                        also drives it via projectListCollapsed. */}
                    <div className="mb-3">
                      <button
                        type="button"
                        onClick={() => setProjectListVisible(projectListCollapsed)}
                        className="comux-project-header sticky top-0 z-10 -mx-1 flex w-[calc(100%+0.5rem)] items-center gap-1.5 rounded px-2 pb-[6px] pt-2.5 text-left transition-colors hover:bg-[var(--bg-raised)]"
                      >
                        <svg
                          width="7" height="7" viewBox="0 0 8 8"
                          className="shrink-0 text-[var(--text-muted)] transition-transform duration-150"
                          style={{ transform: projectListCollapsed ? "rotate(0deg)" : "rotate(90deg)" }}
                        >
                          <polygon points="1,1 7,4 1,7" fill="currentColor" />
                        </svg>
                        <Icon name="ph:folder" width={11} className="shrink-0 text-[var(--text-muted)]" />
                        <span className="text-[10px] font-semibold uppercase tracking-widest text-[var(--text-muted)]">Projects</span>
                        <span className="ml-auto rounded-full bg-[var(--bg-raised)] px-1.5 py-px text-[9px] text-[var(--text-muted)]">
                          {projectFilter.trim() ? `${visibleProjects.length}/${projects.length}` : projects.length}
                        </span>
                      </button>
                      {!projectListCollapsed && (
                        <>
                          {projects.length > 1 && (
                            <div className="relative mt-1.5">
                              <Icon
                                name="ph:magnifying-glass"
                                width={12}
                                className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-[var(--text-muted)]"
                                aria-hidden
                              />
                              <input
                                ref={projectFilterRef}
                                type="search"
                                value={projectFilter}
                                onChange={(e) => setProjectFilter(e.target.value)}
                                onKeyDown={(e) => {
                                  if (e.key === "Escape" && projectFilter) {
                                    e.preventDefault();
                                    setProjectFilter("");
                                  }
                                }}
                                placeholder="Filter projects…"
                                aria-label="Filter projects by name or path"
                                className="focus-ring h-7 w-full rounded-md border border-[var(--border-hairline)] bg-[var(--bg-base)]/60 pl-7 pr-7 text-[11px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--border-strong)]"
                              />
                              {!projectFilter && (
                                <kbd
                                  aria-hidden
                                  className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded border border-[var(--border-hairline)] bg-[var(--bg-raised)] px-1 font-mono text-[9px] leading-tight text-[var(--text-muted)]"
                                >
                                  /
                                </kbd>
                              )}
                            </div>
                          )}
                          {visibleProjects.length === 0 ? (
                            <p className="px-2 py-4 text-center text-[11px] text-[var(--text-muted)]">
                              No projects match “{projectFilter.trim()}”
                            </p>
                          ) : (
                          <DndContext
                            id="comux-projects"
                            sensors={projectSensors}
                            collisionDetection={closestCenter}
                            onDragEnd={handleProjectDragEnd}
                          >
                            <SortableContext
                              items={visibleProjects.map((p) => p.root)}
                              strategy={verticalListSortingStrategy}
                            >
                              <div ref={projectListRef} className="comux-project-list mt-1 space-y-0.5 p-0.5">
                                {visibleProjects.map((project) => (
                                  <SortableProjectRow
                                    key={project.root}
                                    project={project}
                                    isActive={selectedProject?.root === project.root}
                                    isPinned={isProjectPinned(pinnedProjects, project.root)}
                                    dragEnabled={dragEnabled}
                                    activeRowRef={activeProjectRowRef}
                                    onSelect={selectProject}
                                    onRowContextMenu={(p, e) => {
                                      setProjectMenuTarget(p);
                                      openContextMenuAt(setProjectMenu)(e);
                                    }}
                                  />
                                ))}
                              </div>
                            </SortableContext>
                          </DndContext>
                          )}
                        </>
                      )}
                    </div>
                    {/* Right-click a project → act on it without selecting it
                        first (start a chat, copy, or reveal its path). One
                        menu serves the whole list. */}
                    <ContextMenu
                      state={projectMenu}
                      onClose={() => setProjectMenu(null)}
                      ariaLabel={projectMenuTarget ? `Actions for ${projectMenuTarget.name}` : "Project actions"}
                    >
                      {projectMenuTarget && (
                        <>
                          <PopoverItem
                            icon={isProjectPinned(pinnedProjects, projectMenuTarget.root) ? "ph:push-pin-slash" : "ph:push-pin"}
                            onSelect={() => {
                              const root = projectMenuTarget.root;
                              setProjectMenu(null);
                              toggleProjectPinned(root);
                            }}
                          >
                            {isProjectPinned(pinnedProjects, projectMenuTarget.root) ? "Unpin" : "Pin to top"}
                          </PopoverItem>
                          <PopoverSeparator />
                          <PopoverItem
                            icon="ph:chat-circle-dots-bold"
                            onSelect={() => {
                              setProjectMenu(null);
                              onNewChat(projectMenuTarget.root);
                            }}
                          >
                            New chat
                          </PopoverItem>
                          <PopoverItem
                            icon="ph:copy"
                            onSelect={() => {
                              setProjectMenu(null);
                              void copyText(projectMenuTarget.root);
                            }}
                          >
                            Copy path
                          </PopoverItem>
                          <PopoverItem
                            icon="ph:arrow-square-out"
                            onSelect={() => {
                              setProjectMenu(null);
                              const root = projectMenuTarget.root;
                              if (root.startsWith("/")) {
                                window.open(`file://${root}`, "_blank", "noopener");
                              }
                            }}
                          >
                            Reveal in Finder
                          </PopoverItem>
                        </>
                      )}
                    </ContextMenu>
                      </>
                    )}
                    {/* Project-wide code search (CODE-SEARCH-01) */}
                    <div className="mb-3">
                      <div className="relative">
                        <Icon
                          name="ph:magnifying-glass"
                          width={12}
                          className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-[var(--text-muted)]"
                        />
                        <input
                          type="search"
                          value={searchInput}
                          onChange={(e) => setSearchInput(e.target.value)}
                          placeholder="Search in project…"
                          aria-label="Search in project"
                          className="h-7 w-full rounded-md border border-[var(--border-hairline)] bg-[var(--bg-base)]/60 pl-7 pr-[3.75rem] text-[11px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--border-strong)] focus:outline-none"
                        />
                        <div className="absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-0.5">
                          <button
                            type="button"
                            onClick={() => setSearchCaseSensitive((v) => !v)}
                            aria-pressed={searchCaseSensitive}
                            title={searchCaseSensitive ? "Case-sensitive" : "Case-insensitive (smart case)"}
                            className={`rounded px-1 py-0.5 font-mono text-[10px] transition-colors ${
                              searchCaseSensitive
                                ? "bg-[var(--accent-presence,var(--bg-raised))] text-[var(--text-primary)]"
                                : "text-[var(--text-muted)] hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)]"
                            }`}
                          >
                            Aa
                          </button>
                          <button
                            type="button"
                            onClick={() => setSearchRegex((v) => !v)}
                            aria-pressed={searchRegex}
                            title={searchRegex ? "Regex search on" : "Regex search off — matching literal text"}
                            className={`rounded px-1 py-0.5 font-mono text-[10px] transition-colors ${
                              searchRegex
                                ? "bg-[var(--accent-presence,var(--bg-raised))] text-[var(--text-primary)]"
                                : "text-[var(--text-muted)] hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)]"
                            }`}
                          >
                            .*
                          </button>
                        </div>
                      </div>
                      {/* File-glob include filter (passes ?glob= to ripgrep). */}
                      <div className="relative mt-1.5">
                        <Icon
                          name="ph:funnel"
                          width={11}
                          className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-[var(--text-muted)]"
                        />
                        <input
                          type="text"
                          value={searchGlob}
                          onChange={(e) => setSearchGlob(e.target.value)}
                          placeholder="Filter files — e.g. *.ts, src/**"
                          aria-label="Filter files by glob"
                          spellCheck={false}
                          autoComplete="off"
                          className="h-7 w-full rounded-md border border-[var(--border-hairline)] bg-[var(--bg-base)]/60 pl-7 pr-2 font-mono text-[10px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-[var(--border-strong)] focus:outline-none"
                        />
                      </div>
                      {searchInput.trim() && (
                        <div className="mt-2">
                          {searchLoading ? (
                            <div className="flex items-center gap-2 py-1 pl-1 text-[11px] text-[var(--text-muted)]">
                              <Icon name="ph:arrow-clockwise" width={11} className="animate-spin" />
                              Searching…
                            </div>
                          ) : searchError ? (
                            <p className="py-1 pl-1 text-[11px] text-[var(--color-danger,#f87171)]">{searchError}</p>
                          ) : searchResult && searchResult.totalMatches > 0 ? (
                            <>
                              <div className="mb-1 flex items-center gap-1.5 pl-1 text-[10px] text-[var(--text-muted)]">
                                <span>
                                  {searchResult.totalMatches} {searchResult.totalMatches === 1 ? "match" : "matches"} in{" "}
                                  {searchResult.files.length} {searchResult.files.length === 1 ? "file" : "files"}
                                </span>
                                {searchResult.truncated && <span className="text-[var(--text-muted)]">· capped</span>}
                              </div>
                              <div className="space-y-1.5">
                                {searchResult.files.map((file) => (
                                  <div key={file.path}>
                                    <div
                                      className="truncate px-1 py-0.5 font-mono text-[10px] text-[var(--text-secondary)]"
                                      title={file.path}
                                    >
                                      {file.path}
                                    </div>
                                    <div className="space-y-px">
                                      {file.matches.map((match, i) => (
                                        <button
                                          key={`${file.path}:${match.line}:${i}`}
                                          type="button"
                                          onClick={() => openSearchMatch(file.path, match.line)}
                                          className="focus-ring-inset flex w-full items-baseline gap-2 rounded px-1 py-[3px] text-left transition-colors hover:bg-[var(--bg-raised)]"
                                          title={`${file.path}:${match.line}`}
                                        >
                                          <span className="shrink-0 font-mono text-[10px] tabular-nums text-[var(--text-muted)]">
                                            {match.line}
                                          </span>
                                          <span className="min-w-0 flex-1 truncate font-mono text-[10px] text-[var(--text-primary)]">
                                            {match.preview.trim()}
                                          </span>
                                        </button>
                                      ))}
                                    </div>
                                  </div>
                                ))}
                              </div>
                            </>
                          ) : (
                            <p className="py-1 pl-1 text-[11px] text-[var(--text-muted)]">No matches.</p>
                          )}
                        </div>
                      )}
                    </div>

                    {!hideProjectNavigator && (
                      <>
                    {/* Recent sessions — collapsible */}
                    <div className="mb-2">
                      <button
                        type="button"
                        onClick={() => setSessionsCollapsed((v) => !v)}
                        className="flex w-full items-center gap-1.5 rounded px-1 py-[3px] text-left transition-colors hover:bg-[var(--bg-raised)]"
                      >
                        <svg
                          width="7" height="7" viewBox="0 0 8 8"
                          className="shrink-0 text-[var(--text-muted)] transition-transform duration-150"
                          style={{ transform: sessionsCollapsed ? "rotate(0deg)" : "rotate(90deg)" }}
                        >
                          <polygon points="1,1 7,4 1,7" fill="currentColor" />
                        </svg>
                        <Icon name="ph:chats-circle" width={11} className="shrink-0 text-[var(--text-muted)]" />
                        <span className="text-[10px] font-semibold uppercase tracking-widest text-[var(--text-muted)]">Sessions</span>
                        {recentProjectSessions.length > 0 && (
                          <span className="ml-auto rounded-full bg-[var(--bg-raised)] px-1.5 py-px text-[9px] text-[var(--text-muted)]">
                            {recentProjectSessions.length}
                          </span>
                        )}
                      </button>
                      {!sessionsCollapsed && (
                        recentProjectSessions.length === 0 ? (
                          <p className="py-1 pl-6 text-[11px] text-[var(--text-muted)]">No chats yet.</p>
                        ) : (
                          <div className="space-y-px">
                            {recentProjectSessions.map((session) => (
                              <button
                                key={session.id}
                                type="button"
                                onClick={() => onOpenSession(session.id, session.familiarId)}
                                className="flex w-full items-center gap-2 rounded py-[4px] pl-6 pr-2 text-left text-[11px] text-[var(--text-primary)] transition-colors hover:bg-[var(--bg-raised)]"
                              >
                                <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${
                                  session.status === "running" ? "bg-[var(--color-success)]"
                                  : session.status === "failed" ? "bg-red-400"
                                  : "bg-[var(--border-strong)]"
                                }`} />
                                <span className="min-w-0 flex-1 truncate">
                                  {session.title || "(untitled chat)"}
                                </span>
                                <span className="shrink-0 text-[10px] text-[var(--text-muted)]">
                                  {shortProjectTime(session.updated_at)}
                                </span>
                              </button>
                            ))}
                          </div>
                        )
                      )}
                    </div>
                      </>
                    )}

                    {/* Files — native tree */}
                    <div>
                      <div className="mb-1 flex items-center gap-1.5 px-1 py-[3px]">
                        <Icon name="ph:list-bullets" width={11} className="shrink-0 text-[var(--text-muted)]" />
                        <span className="text-[10px] font-semibold uppercase tracking-widest text-[var(--text-muted)]">Files</span>
                        <button
                          type="button"
                          onClick={() => treeRef.current?.refresh()}
                          className="ml-auto flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)]"
                          title="Refresh files"
                          aria-label="Refresh files"
                        >
                          <Icon name="ph:arrow-clockwise" width={11} />
                        </button>
                      </div>
                      <ProjectTree
                        ref={treeRef}
                        root={selectedProject.root}
                        familiarId={selectedProjectFamiliarId}
                        selectedPath={previewPath}
                        onFileClick={openFilePreview}
                      />
                    </div>
                    </div>
                  </div>
                ))}

                {/* Center column — the familiar conversation (Codex position:
                    file tree on the left, chat in the middle, preview/Changes on
                    the right). Only the Code workspace passes a centerSlot;
                    standalone project browsers stay two-column. */}
                {centerSlot ? (
                  <div
                    className="comux-center-column flex min-w-0 min-h-0 flex-col overflow-hidden border-b border-[var(--border-hairline)] xl:border-b-0 xl:border-r"
                    style={{ flex: codeColumnFlex.chat }}
                  >
                    {centerSlot}
                  </div>
                ) : null}

                {filePreviewCollapsed ? (
                  <button
                    type="button"
                    aria-label="Show file preview"
                    title="Show file preview"
                    onClick={() => setFilePreviewVisible(true)}
                    className="flex min-h-[34px] shrink-0 items-center gap-2 border-b border-[var(--border-hairline)] px-2 py-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-primary)] xl:min-h-0 xl:w-[34px] xl:flex-col xl:self-stretch xl:border-b-0 xl:border-l xl:py-2"
                  >
                    <span className="grid h-7 w-7 shrink-0 place-items-center">
                      <Icon name="ph:sidebar-simple" width={15} />
                    </span>
                    <span className="comux-detail-rail-label text-[10px] font-semibold uppercase tracking-widest xl:mt-1">
                      Preview
                    </span>
                  </button>
                ) : (
                  <div
                    className="min-w-0 min-h-0 flex flex-1 flex-col overflow-hidden"
                    style={{ flex: codeColumnFlex.worktree }}
                  >
                  {/* Files / Changes toggle — review the familiar's working-tree
                      diffs (revert + checkpoints) without leaving the surface.
                      Hidden when a parent owns the selection (Code workspace's
                      top-level tabs); shown for the standalone surface. */}
                  {!isControlledRightView && (
                  <div className="flex shrink-0 items-center gap-2 border-b border-[var(--border-hairline)] px-2 py-1.5">
                    <div role="group" aria-label="Right pane view" className="flex items-center rounded-md border border-[var(--border-hairline)] bg-[var(--bg-base)]/40 p-0.5 text-[10px]">
                      <button
                        type="button"
                        aria-pressed={rightView === "files"}
                        onClick={() => { pinnedRightViewRef.current = true; setRightView("files"); }}
                        className={`flex items-center gap-1 rounded-[4px] px-2 py-0.5 transition-colors ${rightView === "files" ? "bg-[var(--bg-raised)] text-[var(--text-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"}`}
                      >
                        <Icon name="ph:file-code" width={11} />
                        Files
                      </button>
                      <button
                        type="button"
                        aria-pressed={rightView === "changes"}
                        onClick={() => { pinnedRightViewRef.current = true; setRightView("changes"); }}
                        className={`flex items-center gap-1 rounded-[4px] px-2 py-0.5 transition-colors ${rightView === "changes" ? "bg-[var(--bg-raised)] text-[var(--text-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"}`}
                      >
                        <Icon name="ph:git-diff" width={11} />
                        Changes
                      </button>
                    </div>
                    <button
                      type="button"
                      aria-label="Hide file preview"
                      title="Hide file preview"
                      onClick={() => setFilePreviewVisible(false)}
                      className="ml-auto mr-8 grid h-7 w-7 place-items-center rounded-md text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-primary)] xl:mr-9"
                    >
                      <Icon name="ph:sidebar-simple-fill" width={14} />
                    </button>
                  </div>
                  )}
                  {rightView === "changes" ? (
                    <div className="min-h-0 flex-1 overflow-hidden">
                      <SessionChangesInner
                        key={selectedProject.root}
                        projectRoot={selectedProject.root}
                        running={projectHasRunningSession}
                        focusPath={focusDiff?.path ?? null}
                        focusNonce={focusDiff?.nonce}
                      />
                    </div>
                  ) : previewPath ? (
                    <>
                      {/* Preview header */}
                      <div className="flex shrink-0 items-center gap-2 border-b border-[var(--border-hairline)] px-3 py-2">
                        <Icon
                          name={preview?.kind === "image" ? "ph:file-image" : previewIsMarkdown ? "ph:file-text" : "ph:file-code"}
                          width={12}
                          className="shrink-0 text-[var(--text-muted)]"
                        />
                        <nav className="comux-preview-crumbs min-w-0 flex-1 flex items-center gap-1 truncate font-mono text-[11px] text-[var(--text-muted)]" aria-label="File path">
                          {(previewPath.startsWith(selectedProject.root)
                            ? previewPath.slice(selectedProject.root.length).replace(/^\//, "")
                            : previewPath)
                            .split("/")
                            .filter(Boolean)
                            .map((seg, i, segs) => (
                              <span key={i} className="flex min-w-0 items-center gap-1">
                                {i > 0 ? <span className="comux-preview-crumb-sep" aria-hidden>›</span> : null}
                                <span className={i === segs.length - 1 ? "truncate text-[var(--text-secondary)]" : "truncate"}>
                                  {seg}
                                </span>
                              </span>
                            ))}
                        </nav>
                        <button
                          type="button"
                          onClick={() => {
                            void copyText(previewPath);
                            setCopiedPath(true);
                            setTimeout(() => setCopiedPath(false), 1500);
                          }}
                          className="comux-preview-copypath shrink-0 rounded-[5px] border border-[var(--border-hairline)] bg-[var(--bg-base)]/40 px-1.5 py-px text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)]"
                          aria-label="Copy file path"
                          title={copiedPath ? "Copied!" : "Copy path"}
                        >
                          <Icon name={copiedPath ? "ph:check" : "ph:copy"} width={11} aria-hidden />
                        </button>
                        {previewLangLabel && (
                          <span className="comux-preview-lang shrink-0 rounded-[5px] border border-[var(--border-hairline)] bg-[var(--bg-raised)]/50 px-1.5 py-px font-mono text-[10px] uppercase tracking-wide text-[var(--text-secondary)]">
                            {previewLangLabel}
                          </span>
                        )}
                        {preview?.kind === "text" && (
                          <span className="hidden shrink-0 items-center gap-2 font-mono text-[10px] text-[var(--text-muted)] sm:flex">
                            <span>{previewLineCount.toLocaleString()} {previewLineCount === 1 ? "line" : "lines"}</span>
                            {formatBytes(preview.size) && <span>· {formatBytes(preview.size)}</span>}
                          </span>
                        )}
                        {!editing && previewIsMarkdown && (
                          <div role="group" aria-label="Preview format" className="flex shrink-0 items-center rounded-md border border-[var(--border-hairline)] bg-[var(--bg-base)]/40 p-0.5 text-[10px]">
                            <button
                              type="button"
                              aria-pressed={!previewRaw}
                              onClick={() => setPreviewRaw(false)}
                              className={`rounded-[4px] px-1.5 py-0.5 transition-colors ${!previewRaw ? "bg-[var(--bg-raised)] text-[var(--text-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"}`}
                            >
                              Rendered
                            </button>
                            <button
                              type="button"
                              aria-pressed={previewRaw}
                              onClick={() => setPreviewRaw(true)}
                              className={`rounded-[4px] px-1.5 py-0.5 transition-colors ${previewRaw ? "bg-[var(--bg-raised)] text-[var(--text-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"}`}
                            >
                              Raw
                            </button>
                          </div>
                        )}
                        {editing ? (
                          <>
                            {saveError && (
                              <span role="alert" className="shrink-0 truncate text-[10px] text-[var(--color-danger,#f87171)]" title={saveError}>
                                {saveError}
                              </span>
                            )}
                            <button
                              type="button"
                              onClick={cancelEditing}
                              disabled={saving}
                              className="focus-ring flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-[10px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)] disabled:opacity-30"
                            >
                              Cancel
                            </button>
                            <button
                              type="button"
                              onClick={() => void saveEdit()}
                              disabled={saving}
                              className="focus-ring flex shrink-0 items-center gap-1 rounded border border-[var(--border-hairline)] bg-[var(--accent-presence,var(--bg-raised))] px-2 py-0.5 text-[10px] text-[var(--text-primary)] transition-colors hover:opacity-90 disabled:opacity-40"
                            >
                              <Icon name={saving ? "ph:arrow-clockwise" : "ph:floppy-disk-bold"} width={11} className={saving ? "animate-spin" : ""} />
                              {saving ? "Saving…" : "Save"}
                            </button>
                          </>
                        ) : (
                          <>
                            {justSaved && (
                              <span className="flex shrink-0 items-center gap-1 text-[10px] text-[var(--color-success)]">
                                <Icon name="ph:check" width={11} aria-hidden />
                                Saved
                              </span>
                            )}
                            {previewEditable && (
                              <button
                                type="button"
                                onClick={startEditing}
                                className="focus-ring flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-[10px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)]"
                              >
                                <Icon name="ph:pencil-simple" width={11} />
                                Edit
                              </button>
                            )}
                            <button
                              type="button"
                              onClick={copyPreview}
                              disabled={!preview || preview.kind !== "text"}
                              className="focus-ring flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-[10px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-raised)] hover:text-[var(--text-secondary)] disabled:opacity-30"
                            >
                              <Icon name="ph:copy" width={11} />
                              {copied ? "Copied" : "Copy"}
                            </button>
                          </>
                        )}
                      </div>
                      {/* Preview content */}
                      <div className="comux-file-preview min-h-0 flex-1 overflow-auto p-3">
                        {previewLoading ? (
                          <div className="space-y-2.5" aria-label="Loading file" aria-busy="true">
                            {["94%", "88%", "97%", "72%", "90%", "83%", "60%"].map((w, i) => (
                              <Skeleton key={i} variant="text" width={w} />
                            ))}
                          </div>
                        ) : previewError ? (
                          <ErrorState
                            compact
                            headline="Couldn't open this file"
                            subtitle={previewError}
                            actions={
                              <Button size="xs" leadingIcon="ph:arrow-clockwise" onClick={() => { if (previewPath) void openFilePreview(previewPath, previewLine); }}>
                                Retry
                              </Button>
                            }
                          />
                        ) : editing ? (
                          <div className="h-full overflow-hidden rounded-md border border-[var(--border-hairline)]">
                            <CodeEditor
                              value={editValue}
                              filename={previewPath.split("/").pop() ?? ""}
                              onChange={setEditValue}
                              onSave={() => void saveEdit()}
                              onCancel={cancelEditing}
                            />
                          </div>
                        ) : (
                          preview?.kind === "error" ? (
                            <div className="flex h-full min-h-[240px] flex-col items-center justify-center gap-2 rounded-md border border-dashed border-[var(--border-hairline)] bg-[var(--bg-base)] p-4 text-center" role="alert">
                              <Icon name="ph:warning-circle" width={28} className="text-[var(--color-danger)] opacity-80" />
                              <p className="text-[12px] text-[var(--text-secondary)]">{preview.message}</p>
                              {previewPath ? (
                                <p className="font-mono text-[10px] text-[var(--text-muted)]">{previewPath.split("/").pop()}</p>
                              ) : null}
                              {previewPath ? (
                                <Button
                                  size="xs"
                                  leadingIcon="ph:arrow-clockwise"
                                  onClick={() => void openFilePreview(previewPath, previewLine)}
                                >
                                  Retry
                                </Button>
                              ) : null}
                            </div>
                          ) : preview?.kind === "image" ? (
                            <div className="flex h-full min-h-[240px] flex-col items-center justify-center gap-3 rounded-md border border-[var(--border-hairline)] bg-[var(--bg-base)] p-4">
                              <img
                                src={preview.dataUrl}
                                alt={`Preview of ${previewPath.split("/").pop() ?? "image"}`}
                                className="max-h-full max-w-full rounded border border-[var(--border-hairline)] object-contain"
                              />
                              <div className="font-mono text-[10px] text-[var(--text-muted)]">
                                {preview.mimeType}
                                {typeof preview.size === "number" ? ` · ${preview.size.toLocaleString()} bytes` : ""}
                              </div>
                            </div>
                          ) : renderAsMarkdown ? (
                            <MarkdownBlock
                              text={preview?.content ?? ""}
                              className="comux-md max-w-[72ch]"
                            />
                          ) : (
                            <SyntaxBlock
                              text={preview?.content ?? ""}
                              lang={previewPath.split(".").pop()}
                              highlightLine={previewLine}
                              className="leading-relaxed"
                            />
                          )
                        )}
                      </div>
                    </>
                  ) : (
                    <div className="flex h-full items-center justify-center">
                      <EmptyState
                        icon="ph:file"
                        headline="Select a file to preview"
                        subtitle="Pick a file from the tree to read or edit it here."
                      />
                    </div>
                  )}
                  </div>
                )}
              </div>
            ) : (
              <div className="flex h-full items-center justify-center">
                <EmptyState
                  icon="ph:folder-open"
                  headline="No projects found yet"
                  subtitle="Projects appear here once a familiar has worked in a directory."
                />
              </div>
            )}
          </div>
        </div>
      )}
      <CodeQuickOpen
        open={quickOpen}
        root={searchRoot}
        familiarId={selectedProjectFamiliarId}
        onClose={() => setQuickOpen(false)}
        onOpenFile={(rel) =>
          // Reuse the full open-and-reveal flow (switches to the Files view,
          // reveals in the tree, opens the preview) instead of just previewing.
          window.dispatchEvent(
            new CustomEvent("cave:open-project-file", {
              detail: { path: `${(searchRoot ?? "").replace(/\/$/, "")}/${rel}` },
            }),
          )
        }
      />
    </div>
  );
}