jonsoc 1.1.49 → 1.1.50

package/src/cli/cmd/tui/routes/session/navigator.tsx

@@ -1,1124 +0,0 @@
-import {
-  batch,
-  createEffect,
-  createMemo,
-  createResource,
-  createSignal,
-  For,
-  Match,
-  on,
-  onCleanup,
-  Show,
-  Switch,
-  untrack,
-} from "solid-js"
-import { createStore } from "solid-js/store"
-import path from "path"
-import type { ScrollBoxRenderable, TextareaRenderable, InputRenderable, ScrollAcceleration } from "@opentui/core"
-import { TextAttributes } from "@opentui/core"
-import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
-import { selectedForeground, useTheme } from "@tui/context/theme"
-import { useSDK } from "@tui/context/sdk"
-import { useToast } from "@tui/ui/toast"
-import { useDialog } from "@tui/ui/dialog"
-import { DialogAlert } from "@tui/ui/dialog-alert"
-import { DialogPrompt } from "@tui/ui/dialog-prompt"
-import { DialogSelect } from "@tui/ui/dialog-select"
-import { usePromptRef } from "@tui/context/prompt"
-import { useSync } from "@tui/context/sync"
-import { SplitBorder } from "@tui/component/border"
-import { useKV } from "@tui/context/kv"
-import { useErrorLog } from "@tui/context/error-log"
-import { useKeybind } from "@tui/context/keybind"
-import { Filesystem } from "@/util/filesystem"
-import { Locale } from "@/util/locale"
-import { Global } from "@/global"
-import { LANGUAGE_EXTENSIONS } from "@/lsp/language"
-import type { File as FileStatus, FileContent, FileNode, VcsHistoryLine } from "@jonsoc/sdk/v2"
-import { GitCommit } from "./git-commit"
-import { GitHistory } from "./git-history"
-import { VcsDiffViewer } from "./vcs-diff-viewer"
-import { NavigatorBorderChars, Tab, ActionButton, ExplorerRow, GitRow, fileType, BinaryPreview } from "./navigator-ui"
-
-type ExplorerEntry = {
-  node: FileNode
-  depth: number
-}
-
-type NavigatorProps = {
-  width: number
-  onClose: () => void
-  open: boolean
-  side: "left" | "right"
-  wrapMode?: "word" | "none"
-  promptRef?: { focused: boolean; focus: () => void } | undefined
-  onOpenFile?: (path: string, line?: number) => void
-}
-
-type NavigatorTab = "explorer" | "git"
-
-const STATUS_LABELS: Record<string, string> = {
-  added: "A",
-  deleted: "D",
-  modified: "M",
-}
-
-class CustomSpeedScroll implements ScrollAcceleration {
-  constructor(private speed: number) {}
-
-  tick(_now?: number): number {
-    return this.speed
-  }
-
-  reset(): void {}
-}
-
-export function Navigator(props: NavigatorProps) {
-  const theme = useTheme()
-  const sdk = useSDK()
-  const toast = useToast()
-  const dialog = useDialog()
-  const promptRef = usePromptRef()
-  const sync = useSync()
-  const kv = useKV()
-  const errorLog = useErrorLog()
-  const keybind = useKeybind()
-  const term = useTerminalDimensions()
-  const [loaded, setLoaded] = createSignal(false)
-  const [tab, setTab] = kv.signal<NavigatorTab>("navigator_tab", "explorer")
-  const [selectedExplorer, setSelectedExplorer] = kv.signal("navigator_explorer_index", 0)
-  const [selectedGit, setSelectedGit] = kv.signal("navigator_git_index", 0)
-  const [activePath, setActivePath] = kv.signal<string | null>("navigator_active_path", null)
-  const [listRatio, setListRatio] = kv.signal<number>("navigator_list_ratio", 0.35)
-  const [tree, setTree] = createStore<Record<string, FileNode[]>>({})
-  const [loading, setLoading] = createStore<Record<string, boolean>>({})
-  const [showScrollbar] = kv.signal("scrollbar_enabled", true)
-  const readExpanded = () => {
-    const stored = kv.get("navigator_expanded")
-    if (!stored) return {}
-    if (typeof stored !== "object") return {}
-    if (Array.isArray(stored)) return {}
-    const next: Record<string, boolean> = {}
-    for (const [key, value] of Object.entries(stored)) {
-      if (typeof value !== "boolean") continue
-      next[key] = value
-    }
-    return next
-  }
-  const [expanded, setExpanded] = createStore<Record<string, boolean>>(readExpanded())
-  const [explorerScroll, setExplorerScroll] = createSignal<ScrollBoxRenderable | undefined>(undefined)
-  const [gitScroll, setGitScroll] = createSignal<ScrollBoxRenderable | undefined>(undefined)
-  const [commitMessage, setCommitMessage] = createSignal("")
-
-  const [status, { refetch: refreshStatus }] = createResource(
-    () => (loaded() ? "open" : undefined),
-    async () => {
-      const result = await sdk.client.file.status().catch(() => undefined)
-      if (!result?.data) return []
-      return result.data
-    },
-  )
-
-  const historyLimit = 60
-  const [history, { refetch: refreshHistory }] = createResource(
-    () => (loaded() ? "open" : undefined),
-    async () => {
-      const result = await sdk.client.vcs.history({ limit: historyLimit }).catch(() => undefined)
-      if (!result?.data) return []
-      return result.data
-    },
-  )
-
-  const [fileContent, setFileContent] = createSignal<FileContent | undefined>(undefined)
-  const [fileLoading, setFileLoading] = createSignal(false)
-  const [fileError, setFileError] = createSignal(false)
-  const [cache, setCache] = createStore<Record<string, FileContent>>({})
-  const [targetLine, setTargetLine] = createSignal<number | undefined>(undefined)
-  const [openFileInfo, setOpenFileInfo] = kv.signal<{ path: string; line: number } | undefined>(
-    "navigator_open_file",
-    undefined,
-  )
-
-  // Editing state - manual save only
-  const [isDirty, setIsDirty] = createSignal(false)
-  const [saveStatus, setSaveStatus] = createSignal<"idle" | "saving" | "saved" | "error">("idle")
-  let editorRef: TextareaRenderable | undefined
-  const [currentFilePath, setCurrentFilePath] = createSignal<string | null>(null)
-
-  const saveFile = async () => {
-    const filePath = activePath()
-    if (!filePath || !editorRef || !isDirty() || saveStatus() === "saving") return
-
-    const content = editorRef.plainText
-    setSaveStatus("saving")
-    try {
-      const directory = sync.data.path.directory
-      const fullPath = path.isAbsolute(filePath) ? filePath : path.join(directory, filePath)
-
-      await Bun.write(fullPath, content)
-
-      setIsDirty(false)
-      setSaveStatus("saved")
-      // Update cache with new content
-      setCache(filePath, { type: "text", content })
-      setFileContent({ type: "text", content })
-      setTimeout(() => setSaveStatus("idle"), 2000)
-    } catch (err: any) {
-      const fullMessage = `Failed to save ${filePath}\n\n${err.message || "FileSystem error"}`
-      setSaveStatus("error")
-      errorLog.add(fullMessage, "Navigator")
-    }
-  }
-
-  const handleEditorChange = () => {
-    setIsDirty(true)
-    setSaveStatus("idle")
-  }
-
-  onCleanup(() => {
-    if (isDirty()) {
-      void saveFile()
-    }
-  })
-
-  const listWidth = createMemo(() => {
-    if (!props.open) return 0
-    const available = Math.max(0, props.width)
-    const min = Math.min(20, available)
-    const max = Math.max(min, available - 20)
-    const width = Math.floor(available * listRatio())
-    return Math.min(max, Math.max(min, width))
-  })
-  const viewerWidth = createMemo(() => (props.open ? Math.max(0, props.width - listWidth()) : 0))
-
-  const displayRoot = createMemo(() => {
-    const directory = sync.data.path.directory || process.cwd()
-    const replaced = directory.replace(Global.Path.home, "~")
-    return Locale.truncateMiddle(replaced, 36)
-  })
-  const branch = createMemo(() => sync.data.vcs?.branch)
-
-  const statusEntries = createMemo(() => status() ?? [])
-  const statusMap = createMemo(() => {
-    const map = new Map<string, FileStatus>()
-    for (const entry of statusEntries()) {
-      map.set(entry.path, entry)
-    }
-    return map
-  })
-
-  const explorerEntries = createMemo(() => {
-    const result: ExplorerEntry[] = []
-
-    const add = (dir: string, depth: number) => {
-      const nodes = tree[dir] ?? []
-      for (const node of nodes) {
-        result.push({ node, depth })
-        if (node.type !== "directory") continue
-        if (!expanded[node.path]) continue
-        add(node.path, depth + 1)
-      }
-    }
-
-    add("", 0)
-    return result
-  })
-
-  const gitEntries = createMemo(() => {
-    const entries = [...statusEntries()]
-    const order = {
-      added: 0,
-      modified: 1,
-      deleted: 2,
-    }
-    return entries.toSorted((a, b) => {
-      const orderDiff = order[a.status] - order[b.status]
-      if (orderDiff !== 0) return orderDiff
-      return a.path.localeCompare(b.path)
-    })
-  })
-
-  // Auto-refresh Git status periodically and on save
-  createEffect(() => {
-    if (tab() !== "git" || !props.open) return
-    const id = setInterval(refreshGit, 10000)
-    onCleanup(() => clearInterval(id))
-  })
-
-  createEffect(
-    on(saveStatus, (status) => {
-      if (status === "saved") {
-        refreshGit()
-      }
-    }),
-  )
-
-  const activeStatus = createMemo(() => {
-    const file = activePath()
-    if (!file) return undefined
-    return statusMap().get(file)
-  })
-
-  const viewTitle = createMemo(() => {
-    const file = activePath()
-    if (!file) return "File Viewer"
-    const statusEntry = activeStatus()
-    const filename = path.basename(file)
-    const dirname = path.dirname(file)
-    const displayPath = dirname === "." ? "./ " : `${dirname}/ `
-    const prefix = statusEntry ? `${STATUS_LABELS[statusEntry.status]} ` : ""
-    return `${prefix}${displayPath}${filename}`
-  })
-
-  const hasExplorerEntries = createMemo(() => explorerEntries().length > 0)
-  const hasGitEntries = createMemo(() => gitEntries().length > 0)
-  const historyEntries = createMemo(() => history() ?? [])
-  const historyHeight = createMemo(() => Math.max(8, Math.floor(term().height * 0.35)))
-
-  const viewportOptions = createMemo(() => ({
-    paddingLeft: 1,
-    paddingRight: showScrollbar() ? 2 : 1,
-  }))
-  const verticalScrollbarOptions = createMemo(() => ({
-    paddingLeft: 1,
-    visible: showScrollbar(),
-    trackOptions: {
-      backgroundColor: theme.theme.backgroundElement,
-      foregroundColor: theme.theme.border,
-    },
-  }))
-
-  createEffect(() => {
-    const next: Record<string, boolean> = {}
-    for (const [key, value] of Object.entries(expanded)) {
-      next[key] = value
-    }
-    kv.set("navigator_expanded", next)
-  })
-
-  createEffect(() => {
-    const scroll = explorerScroll()
-    const entry = selectedExplorerEntry()
-    if (!scroll || !entry) return
-    ensureVisible(scroll, entry.node.path)
-  })
-
-  createEffect(() => {
-    const scroll = gitScroll()
-    const entry = selectedGitEntry()
-    if (!scroll || !entry) return
-    ensureVisible(scroll, entry.path)
-  })
-
-  const selectedExplorerEntry = createMemo(() => {
-    const list = explorerEntries()
-    if (list.length === 0) return undefined
-    const index = selectedExplorer()
-    if (index < 0) return undefined
-    if (index >= list.length) return undefined
-    return list[index]
-  })
-
-  const selectedGitEntry = createMemo(() => {
-    const list = gitEntries()
-    if (list.length === 0) return undefined
-    const index = selectedGit()
-    if (index < 0) return undefined
-    if (index >= list.length) return undefined
-    return list[index]
-  })
-
-  const fileData = createMemo(() => fileContent())
-  const resizeLeft = createMemo(() => keybind.print("navigator_resize_narrow"))
-  const resizeRight = createMemo(() => keybind.print("navigator_resize_wide"))
-  const resizeLabel = createMemo(() => {
-    if (!resizeLeft() && !resizeRight()) return ""
-    return `${resizeLeft() || ""}${resizeLeft() && resizeRight() ? "/" : ""}${resizeRight() || ""} resize`
-  })
-
-  const ensureVisible = (scroll: ScrollBoxRenderable | undefined, id: string) => {
-    if (!scroll) return
-    const child = scroll.getChildren().find((entry) => entry.id === id)
-    if (!child) return
-    const y = child.y - scroll.y
-    if (y >= scroll.height) scroll.scrollBy(y - scroll.height + 1)
-    if (y < 0) scroll.scrollBy(y)
-  }
-
-  const selectExplorerIndex = (index: number) => {
-    const list = explorerEntries()
-    if (list.length === 0) return
-    const next = Math.min(Math.max(index, 0), list.length - 1)
-    setSelectedExplorer(() => next)
-    const entry = list[next]
-    if (!entry) return
-    ensureVisible(explorerScroll(), entry.node.path)
-  }
-
-  const selectGitIndex = (index: number) => {
-    const list = gitEntries()
-    if (list.length === 0) return
-    const next = Math.min(Math.max(index, 0), list.length - 1)
-    setSelectedGit(() => next)
-    const entry = list[next]
-    if (!entry) return
-    ensureVisible(gitScroll(), entry.path)
-  }
-
-  const loadDirectory = async (dir: string) => {
-    if (loading[dir]) return
-    setLoading(dir, true)
-    const result = await sdk.client.file.list({ path: dir }).catch(() => undefined)
-    if (!result?.data) {
-      setLoading(dir, false)
-      toast.show({ variant: "error", message: `Failed to load ${dir || "project"} files` })
-      return
-    }
-    setTree(dir, result.data)
-    setLoading(dir, false)
-  }
-
-  const toggleDirectory = async (node: FileNode) => {
-    if (node.type !== "directory") return
-    const isExpanded = expanded[node.path] ?? false
-    if (isExpanded) {
-      setExpanded(node.path, false)
-      return
-    }
-    setExpanded(node.path, true)
-    if (tree[node.path]) return
-    await loadDirectory(node.path)
-  }
-
-  createEffect(() => {
-    if (!loaded()) return
-    for (const [key, value] of Object.entries(expanded)) {
-      if (!value) continue
-      if (!key) continue
-      if (tree[key]) continue
-      void loadDirectory(key)
-    }
-  })
-
-  const openFilePath = async (nextPath: string) => {
-    const current = activePath()
-    if (current === nextPath) {
-      if (loaded()) {
-        void loadFile(nextPath, true)
-      }
-      return
-    }
-
-    if (isDirty()) {
-      await saveFile()
-    }
-
-    batch(() => {
-      setFileLoading(true)
-      setFileError(false)
-      setIsDirty(false)
-      setSaveStatus("idle")
-      setActivePath(() => nextPath)
-      setTargetLine(undefined)
-    })
-    // Notify parent/sync navigation state
-    props.onOpenFile?.(nextPath)
-  }
-
-  const openFile = (node: FileNode) => {
-    if (node.type !== "file") return
-    openFilePath(node.path)
-  }
-
-  const openFileAtLine = async (path: string, line?: number) => {
-    const current = activePath()
-    if (current !== path) {
-      batch(() => {
-        // Set loading state FIRST to prevent "No content" flash
-        setFileLoading(true)
-        setFileError(false)
-        setIsDirty(false)
-        setSaveStatus("idle")
-        setActivePath(() => path)
-      })
-      // Notify parent/sync navigation state - this will update openFileInfo via KV
-      props.onOpenFile?.(path, line)
-      // loadFile will be triggered by the effect on activePath
-    } else if (loaded()) {
-      // Force reload if path is the same
-      void loadFile(path, true)
-    }
-    if (line && line > 0) {
-      setTargetLine(line)
-    }
-  }
-
-  const handleExplorerSelect = async () => {
-    const entry = selectedExplorerEntry()
-    if (!entry) return
-    if (entry.node.type === "directory") {
-      await toggleDirectory(entry.node)
-      return
-    }
-    openFile(entry.node)
-  }
-
-  const handleGitSelect = () => {
-    const entry = selectedGitEntry()
-    if (!entry) return
-    openFilePath(entry.path)
-  }
-
-  const [currentLoadFile, setCurrentLoadFile] = createSignal<string | undefined>(undefined)
-  const [loadNonce, setLoadNonce] = createSignal(0)
-
-  const loadFile = async (file: string, force = false) => {
-    // Check loading state and path in a single untracked lookup to avoid loops
-    const alreadyLoading = untrack(() => fileLoading() && currentLoadFile() === file)
-    if (alreadyLoading) return
-
-    const nonce = loadNonce() + 1
-
-    batch(() => {
-      setLoadNonce(nonce)
-      setCurrentLoadFile(() => file)
-
-      // Clear previous content and state immediately before loading
-      setFileContent(undefined)
-      setFileLoading(true)
-      setFileError(false)
-      setIsDirty(false)
-      setSaveStatus("idle")
-    })
-
-    if (!force) {
-      const cached = cache[file]
-      if (cached) {
-        if (loadNonce() !== nonce) return
-        batch(() => {
-          setFileContent(cached)
-          setFileLoading(false)
-          setFileError(false)
-          setCurrentLoadFile(() => undefined)
-        })
-        return
-      }
-    }
-
-    const result = await sdk.client.file.read({ path: file }).catch(() => undefined)
-    if (loadNonce() !== nonce) return
-
-    batch(() => {
-      if (!result?.data) {
-        setFileContent(undefined)
-        setFileLoading(false)
-        setFileError(true)
-        setCurrentLoadFile(() => undefined)
-        return
-      }
-      setCache(file, result.data)
-      setFileContent(result.data)
-      setFileLoading(false)
-      setCurrentLoadFile(() => undefined)
-    })
-  }
-
-  const adjustListWidth = (delta: number) => {
-    setListRatio((prev) => {
-      const base = typeof prev === "function" ? prev(0.35) : prev
-      const next = Math.min(0.6, Math.max(0.2, base + delta))
-      return next
-    })
-  }
-
-  const runPrompt = (input: string, mode?: "normal" | "shell") => {
-    const ref = promptRef.current
-    if (!ref) return
-    ref.set({
-      input,
-      mode,
-      parts: [],
-    })
-    ref.focus()
-    ref.submit()
-  }
-
-  const runCommand = async (command: string) => {
-    if (isDirty()) await saveFile()
-    runPrompt(`/${command}`)
-  }
-
-  const runShell = async (command: string) => {
-    if (isDirty()) await saveFile()
-    runPrompt(command, "shell")
-  }
-
-  const refreshGit = () => {
-    refreshStatus()
-    refreshHistory()
-  }
-
-  const handleCommit = async () => {
-    const msg = commitMessage().trim()
-    if (!msg) return
-    if (isDirty()) await saveFile()
-
-    const directory = sync.data.path.directory
-    try {
-      const proc = Bun.spawn({
-        cmd: ["git", "add", "."],
-        cwd: directory,
-        stdout: "pipe",
-        stderr: "pipe",
-      })
-      await proc.exited
-
-      const commitProc = Bun.spawn({
-        cmd: ["git", "commit", "-m", msg],
-        cwd: directory,
-        stdout: "pipe",
-        stderr: "pipe",
-      })
-      const exitCode = await commitProc.exited
-
-      if (exitCode === 0) {
-        toast.show({ variant: "success", message: "Changes committed" })
-        refreshGit()
-      } else {
-        const stderr = await new Response(commitProc.stderr).text()
-        toast.show({ variant: "error", message: `Commit failed: ${stderr}` })
-      }
-    } catch (err: any) {
-      toast.show({ variant: "error", message: `Commit failed: ${err.message}` })
-    }
-
-    setCommitMessage("")
-  }
-
-  const openBranchSwitcher = async () => {
-    const list = await fetch(`${sdk.url}/vcs/branches`)
-      .then((r) => r.json())
-      .catch(() => [])
-    if (!list || !Array.isArray(list)) return
-
-    const current = branch()
-    dialog.replace(() => (
-      <DialogSelect
-        title="Switch branch"
-        options={[
-          { title: "+ New branch...", value: "__new__" },
-          ...list.map((b: string) => ({
-            title: b,
-            value: b,
-          })),
-        ]}
-        current={current}
-        onSelect={async (opt) => {
-          if (opt.value === "__new__") {
-            dialog.replace(() => (
-              <DialogPrompt
-                title="Create branch"
-                placeholder="branch-name"
-                onConfirm={async (name) => {
-                  dialog.clear()
-                  const trimmed = name.trim()
-                  if (!trimmed) return
-                  await runShell(`git checkout -b ${trimmed}`)
-                  refreshGit()
-                }}
-                onCancel={() => openBranchSwitcher()}
-              />
-            ))
-            return
-          }
-          dialog.clear()
-          await fetch(`${sdk.url}/vcs/checkout`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ branch: opt.value }),
-          })
-          refreshGit()
-        }}
-      />
-    ))
-  }
-
-  const openMergeDialog = () => {
-    dialog.replace(() => (
-      <DialogPrompt
-        title="Merge branch"
-        placeholder="Branch name (e.g. main)"
-        onConfirm={(value) => {
-          dialog.clear()
-          const name = value.trim()
-          if (!name) return
-          runShell(`git merge ${name}`)
-        }}
-        onCancel={() => dialog.clear()}
-      />
-    ))
-  }
-
-  useKeyboard((evt) => {
-    if (!props.open) return
-    if (dialog.stack.length > 0) return
-    if (keybind.match("navigator_resize_narrow", evt)) {
-      evt.preventDefault()
-      adjustListWidth(-0.05)
-      return
-    }
-
-    if (keybind.match("navigator_resize_wide", evt)) {
-      evt.preventDefault()
-      adjustListWidth(0.05)
-      return
-    }
-    if (promptRef.current?.focused) return
-    if (evt.name === "escape") {
-      evt.preventDefault()
-      return
-    }
-    if (evt.name === "tab") {
-      evt.preventDefault()
-      setTab((value) => (value === "explorer" ? "git" : "explorer"))
-      return
-    }
-
-    if (tab() === "explorer") {
-      if (evt.name === "up") {
-        selectExplorerIndex(selectedExplorer() - 1)
-        return
-      }
-      if (evt.name === "down") {
-        selectExplorerIndex(selectedExplorer() + 1)
-        return
-      }
-      if (evt.name === "home") {
-        selectExplorerIndex(0)
-        return
-      }
-      if (evt.name === "end") {
-        selectExplorerIndex(explorerEntries().length - 1)
-        return
-      }
-      if (evt.name === "left") {
-        const entry = selectedExplorerEntry()
-        if (!entry) return
-        if (entry.node.type !== "directory") return
-        if (!expanded[entry.node.path]) return
-        setExpanded(entry.node.path, false)
-        return
-      }
-      if (evt.name === "right") {
-        handleExplorerSelect()
-        return
-      }
-      if (evt.name === "return") {
-        handleExplorerSelect()
-        return
-      }
-    }
-
-    if (tab() === "git") {
-      if (evt.name === "up") {
-        selectGitIndex(selectedGit() - 1)
-        return
-      }
-      if (evt.name === "down") {
-        selectGitIndex(selectedGit() + 1)
-        return
-      }
-      if (evt.name === "home") {
-        selectGitIndex(0)
-        return
-      }
-      if (evt.name === "end") {
-        selectGitIndex(gitEntries().length - 1)
-        return
-      }
-      if (evt.name === "return") {
-        handleGitSelect()
-      }
-    }
-  })
-
-  // Auto-save when closing the navigator
-  createEffect(() => {
-    if (!props.open && isDirty()) {
-      void saveFile()
-    }
-  })
-
-  createEffect(() => {
-    const list = explorerEntries()
-    if (list.length === 0) return
-    const current = selectedExplorer()
-    if (current < list.length) return
-    // Only update if out of bounds
-    setSelectedExplorer(() => list.length - 1)
-  })
-
-  // Sync selectedExplorer with activePath so the selected file is highlighted in explorer
-  createEffect(() => {
-    const path = activePath()
-    if (!path) return
-    const list = explorerEntries()
-    const index = list.findIndex((entry) => entry.node.path === path)
-    if (index === -1) return
-    // Only update if different to avoid cycle
-    if (selectedExplorer() === index) return
-    setSelectedExplorer(() => index)
-  })
-
-  createEffect(() => {
-    if (loaded()) return
-    setLoaded(true)
-    loadDirectory("")
-  })
-
-  createEffect(() => {
-    const file = activePath()
-    const fileInfo = openFileInfo()
-    const isLoaded = loaded()
-
-    if (!isLoaded) return
-
-    if (!file) {
-      untrack(() => {
-        setFileContent(undefined)
-        setFileLoading(false)
-        setFileError(false)
-        // Clear editor when no file is selected
-        if (editorRef) {
-          editorRef.setText("")
-        }
-      })
-      return
-    }
-
-    // Wrap state updates and loading logic in untrack to prevent recursive loops
-    // We only want this effect to trigger on activePath, openFileInfo, or loaded changes.
-    untrack(() => {
-      // Skip if already loading this file
-      if (fileLoading() && currentLoadFile() === file) return
-
-      if (fileInfo?.path === file) {
-        setTargetLine(() => fileInfo.line)
-        // Clear navigation request to avoid re-triggering this repeatedly if it fails
-        setOpenFileInfo(() => undefined)
-      }
-
-      void loadFile(file)
-    })
-  })
-
-  createEffect(() => {
-    const data = fileData()
-    if (!data) return
-    if (data.encoding === "base64") return
-    // Clear targetLine after file data loads
-    if (targetLine()) {
-      setTargetLine(undefined)
-    }
-  })
-
-  // Initialize edit content when file data loads - only if file changed
-  createEffect(
-    on(fileData, (data) => {
-      const path = activePath()
-      if (!data || data.encoding === "base64" || !path) return
-      setCurrentFilePath(() => path)
-      setIsDirty(false)
-      setSaveStatus("idle")
-      if (editorRef && editorRef.plainText !== data.content) {
-        editorRef.setText(data.content ?? "")
-      }
-    }),
-  )
-
-  // Compute viewer state as a discriminated union for exclusive rendering
-  const viewerState = createMemo(() => {
-    const path = activePath()
-    if (!path) return { type: "empty" as const }
-    if (fileLoading()) return { type: "loading" as const }
-    if (fileError()) return { type: "error" as const }
-    const data = fileData()
-    if (!data) return { type: "no-content" as const }
-    if (data.encoding === "base64") return { type: "binary" as const, data }
-    return { type: "text" as const, data }
-  })
-
-  // Focus editor when clicking on the editor area
-  const focusEditor = () => {
-    if (viewerState().type === "text") {
-      setTimeout(() => editorRef?.focus(), 0)
-    }
-  }
-
-  const fileViewer = () => (
-    <scrollbox
-      flexGrow={1}
-      height="100%"
-      paddingTop={1}
-      viewportOptions={viewportOptions()}
-      verticalScrollbarOptions={verticalScrollbarOptions()}
-      scrollAcceleration={new CustomSpeedScroll(3)}
-    >
-      <Switch>
-        <Match when={viewerState().type === "empty"}>
-          <text fg={theme.theme.textMuted}>Select a file to edit</text>
-        </Match>
-        <Match when={viewerState().type === "loading"}>
-          <text fg={theme.theme.textMuted}>Loading...</text>
-        </Match>
-        <Match when={viewerState().type === "error"}>
-          <text fg={theme.theme.textMuted}>Unable to read file</text>
-        </Match>
-        <Match when={viewerState().type === "no-content"}>
-          <text fg={theme.theme.textMuted}>No content</text>
-        </Match>
-        <Match when={viewerState().type === "binary"}>
-          <BinaryPreview content={(viewerState() as { type: "binary"; data: FileContent }).data} />
-        </Match>
-        <Match when={viewerState().type === "text"}>
-          <box flexDirection="column" flexGrow={1} onMouseUp={focusEditor}>
-            <line_number
-              fg={theme.theme.textMuted}
-              bg={theme.theme.background}
-              paddingRight={1}
-              minWidth={3}
-              showLineNumbers={true}
-              flexGrow={1}
-            >
-              <textarea
-                ref={(r: TextareaRenderable) => {
-                  editorRef = r
-                  // Set initial content when ref is assigned
-                  const state = viewerState()
-                  if (state.type === "text" && state.data.content !== undefined && r.plainText !== state.data.content) {
-                    r.setText(state.data.content ?? "")
-                  }
-                }}
-                textColor={theme.theme.text}
-                focusedTextColor={theme.theme.text}
-                cursorColor={theme.theme.text}
-                focusedBackgroundColor={theme.theme.background}
-                minHeight={10}
-                flexGrow={1}
-                wrapMode={props.wrapMode ?? "none"}
-                syntaxStyle={theme.syntax()}
-                onContentChange={handleEditorChange}
-                onKeyDown={(e: { name: string; ctrl?: boolean; meta?: boolean; preventDefault: () => void }) => {
-                  // Ctrl+S / Cmd+S to save
-                  if ((e.ctrl || e.meta) && e.name === "s") {
-                    e.preventDefault()
-                    saveFile()
-                  }
-                  // Escape to blur
-                  if (e.name === "escape") {
-                    editorRef?.blur()
-                  }
-                }}
-              />
-            </line_number>
-            <Show when={fileData()?.diff}>
-              <VcsDiffViewer
-                diff={() => fileData()!.diff!}
-                fileType={fileType(activePath())}
-                wrapMode={props.wrapMode ?? "none"}
-              />
-            </Show>
-          </box>
-        </Match>
-      </Switch>
-    </scrollbox>
-  )
-
-  const historyPanel = () => (
-    <GitHistory
-      branch={branch}
-      historyEntries={historyEntries}
-      historyHeight={historyHeight}
-      onBranchSwitcher={openBranchSwitcher}
-      viewportOptions={viewportOptions()}
-      verticalScrollbarOptions={verticalScrollbarOptions()}
-    />
-  )
-
-  const edgeBorder = createMemo<("left" | "right")[]>(() => (props.side === "left" ? ["left"] : ["right"]))
-
-  const handleNavigatorClick = () => {
-    if (props.promptRef?.focused) return
-    props.promptRef?.focus()
-  }
-
-  return (
-    <box
-      width={props.open ? props.width : 0}
-      height="100%"
-      flexDirection="column"
-      backgroundColor={theme.theme.background}
-      border={props.open ? edgeBorder() : undefined}
-      customBorderChars={props.open ? NavigatorBorderChars : undefined}
-      borderColor={theme.theme.border}
-      visible={props.open}
-      onMouseUp={handleNavigatorClick}
-    >
-      <box
-        paddingLeft={2}
-        paddingRight={2}
-        paddingTop={1}
-        paddingBottom={1}
-        flexDirection="row"
-        justifyContent="space-between"
-        border={["bottom"]}
-        borderColor={theme.theme.border}
-        customBorderChars={NavigatorBorderChars}
-      >
-        <box flexDirection="column">
-          <text fg={theme.theme.text}>
-            <b>Navigator</b>
-          </text>
-          <text fg={theme.theme.textMuted}>{displayRoot()}</text>
-        </box>
-        <box onMouseUp={props.onClose} paddingLeft={1} paddingRight={1} backgroundColor={theme.theme.backgroundElement}>
-          <text fg={theme.theme.text}>Close</text>
-        </box>
-      </box>
-      <box flexGrow={1} flexDirection="row">
-        <box
-          width={listWidth()}
-          border={["right"]}
-          customBorderChars={NavigatorBorderChars}
-          borderColor={theme.theme.border}
-          flexDirection="column"
-          backgroundColor={theme.theme.background}
-        >
-          <box
-            backgroundColor={theme.theme.background}
-            flexDirection="row"
-            justifyContent="center"
-            paddingTop={0}
-            paddingBottom={1}
-            flexShrink={0}
-          >
-            <Tab label="Explorer" active={tab() === "explorer"} onSelect={() => setTab(() => "explorer")} />
-            <Tab label="Git" active={tab() === "git"} onSelect={() => setTab(() => "git")} />
-          </box>
-
-          <Switch>
-            <Match when={tab() === "git"}>
-              <GitCommit commitMessage={commitMessage} setCommitMessage={setCommitMessage} onCommit={handleCommit} />
-              <Show
-                when={hasGitEntries()}
-                fallback={
-                  <box paddingLeft={2} paddingRight={2} paddingTop={1} flexGrow={1}>
-                    <text fg={theme.theme.textMuted}>No git changes</text>
-                  </box>
-                }
-              >
-                <scrollbox
-                  flexGrow={1}
-                  height="100%"
-                  ref={(el) => setGitScroll(el)}
-                  viewportOptions={viewportOptions()}
-                  verticalScrollbarOptions={verticalScrollbarOptions()}
-                  scrollAcceleration={new CustomSpeedScroll(3)}
-                >
-                  <For each={gitEntries()}>
-                    {(entry, index) => (
-                      <GitRow
-                        entry={entry}
-                        width={listWidth()}
-                        active={index() === selectedGit()}
-                        onSelect={() => {
-                          setSelectedGit(() => index())
-                          openFilePath(entry.path)
-                        }}
-                      />
-                    )}
-                  </For>
-                </scrollbox>
-              </Show>
-              {historyPanel()}
-            </Match>
-            <Match when={true}>
-              <Show
-                when={hasExplorerEntries()}
-                fallback={
-                  <box paddingLeft={2} paddingRight={2} paddingTop={1}>
-                    <text fg={theme.theme.textMuted}>{loading[""] ? "Loading files..." : "No files found"}</text>
-                  </box>
-                }
-              >
-                <scrollbox
-                  flexGrow={1}
-                  height="100%"
-                  ref={(el) => setExplorerScroll(el)}
-                  viewportOptions={viewportOptions()}
-                  verticalScrollbarOptions={verticalScrollbarOptions()}
-                  scrollAcceleration={new CustomSpeedScroll(3)}
-                >
-                  <For each={explorerEntries()}>
-                    {(entry, index) => (
-                      <ExplorerRow
-                        entry={entry}
-                        width={listWidth()}
-                        active={index() === selectedExplorer()}
-                        status={statusMap().get(entry.node.path)}
-                        expanded={expanded[entry.node.path] ?? false}
-                        onSelect={() => {
-                          setSelectedExplorer(() => index())
-                          if (entry.node.type === "directory") {
-                            toggleDirectory(entry.node)
-                            return
-                          }
-                          openFile(entry.node)
-                        }}
-                      />
-                    )}
-                  </For>
-                </scrollbox>
-              </Show>
-            </Match>
-          </Switch>
-        </box>
-        <box
-          width={viewerWidth()}
-          flexDirection="column"
-          paddingLeft={2}
-          paddingRight={2}
-          paddingTop={1}
-          paddingBottom={1}
-        >
-          <box justifyContent="center" paddingTop={1} paddingBottom={1} flexShrink={0}>
-            <text fg={theme.theme.text}>
-              <b>{viewTitle()}</b>
-            </text>
-          </box>
-          {fileViewer()}
-        </box>
-      </box>
-      <box
-        paddingLeft={2}
-        paddingRight={2}
-        paddingTop={1}
-        paddingBottom={1}
-        flexDirection="row"
-        justifyContent="space-between"
-      >
-        <text fg={theme.theme.textMuted}>
-          {(() => {
-            const status = saveStatus()
-            if (status === "saving") return "Saving..."
-            if (status === "saved") return "Saved"
-            if (status === "error") return "Save failed"
-            if (isDirty()) return "Unsaved changes"
-            return "Click to edit"
-          })()}
-        </text>
-        <text fg={theme.theme.textMuted}>{resizeLabel() ? `${resizeLabel()} - ` : ""}Esc: chat</text>
-      </box>
-    </box>
-  )
-}